@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* ============================================================
   NODUS DESIGN SYSTEM — Estilo Apple + Cores Institucionais
   ============================================================ */

/* === 1. VARIAVEIS E RESET === */
:root {
  /* Cores institucionais NODUS */
  --sgp-azul:           #4d2cae;
  --sgp-azul-escuro:    #1a0b3d;
  --sgp-azul-hover:     #5d35c6;
  --sgp-azul-claro:     #e8defa;
  --sgp-azul-bg:        #f8fafc;
  --sgp-ciano:          #22d3ee;
  --sgp-roxo-profundo:  #26115e;
  --sgp-roxo-vibrante:  #5d35c6;
  --sgp-azul-vivo:      #4339b8;
  --sgp-gradiente-main: linear-gradient(135deg, #1a0b3d 0%, #26115e 34%, #3a1f86 68%, #4d2cae 100%);

  --sgp-verde:          #427842;
  --sgp-verde-hover:    #356430;
  --sgp-verde-claro:    #edf5ed;

  --sgp-dourado:        #bc9d32;
  --sgp-dourado-hover:  #a88b28;
  --sgp-dourado-claro:  #fdf6e3;

  /* Semanticas */
  --sgp-sucesso:        #16a34a;
  --sgp-sucesso-claro:  #dcfce7;
  --sgp-alerta:         #d97706;
  --sgp-alerta-claro:   #fef3c7;
  --sgp-erro:           #dc2626;
  --sgp-erro-claro:     #fee2e2;
  --sgp-info:           #22d3ee;
  --sgp-info-claro:     #e0f2fe;

  /* Cores de botões de tabela */
  --sgp-laranja:        #B3711F;
  --sgp-verde-escuro:   #157347;

  /* Badge de projeto estruturante */
  --sgp-badge-estruturante-bg:    #fff3cd;
  --sgp-badge-estruturante-texto: #856404;

  /* Neutras */
  --sgp-texto:          #111827;
  --sgp-texto-2:        #374151;
  --sgp-texto-3:        #64748b;
  --sgp-texto-4:        #9ca3af;
  --sgp-texto-secundario: #64748b;
  --sgp-borda:          #e5e7eb;
  --sgp-borda-2:        #d1d5db;
  --sgp-fundo:          #f9fafb;
  --sgp-fundo-2:        #f3f4f6;
  --sgp-fundo-card:     #ffffff;
  --sgp-fundo-pagina:   #f9fafb;

  /* Tipografia */
  --sgp-fonte:          'Lexend Deca', system-ui, -apple-system, sans-serif;
  --sgp-fonte-mono:     'SF Mono', 'Monaco', monospace;
  --bs-primary:         var(--sgp-azul);
  --bs-primary-rgb:     77, 44, 174;
  --bs-link-color:      var(--sgp-azul);
  --bs-link-hover-color: var(--sgp-azul-hover);

  /* Espacamento */
  --sgp-space-1: 0.25rem;
  --sgp-space-2: 0.5rem;
  --sgp-space-3: 0.75rem;
  --sgp-space-4: 1rem;
  --sgp-space-5: 1.25rem;
  --sgp-space-6: 1.5rem;
  --sgp-space-8: 2rem;
  --sgp-space-10: 2.5rem;
  --sgp-space-12: 3rem;
  --sgp-space-xs:  0.25rem;
  --sgp-space-sm:  0.5rem;
  --sgp-space-md:  1rem;
  --sgp-space-lg:  1.5rem;
  --sgp-space-xl:  2rem;

  /* Border radius */
  --sgp-radius-1: 4px;
  --sgp-radius-2: 8px;
  --sgp-radius-3: 12px;
  --sgp-radius-4: 16px;
  --sgp-radius-full: 9999px;
  --sgp-radius-sm: 0.25rem;
  --sgp-radius-md: 0.5rem;
  --sgp-radius-lg: 1rem;

  /* Sombras (Apple style — sutis) */
  --sgp-sombra-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sgp-sombra-2: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --sgp-sombra-3: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.05);
  --sgp-sombra-4: 0 20px 50px rgba(0,0,0,0.12);
  --sgp-sombra-azul: 0 0 0 3px rgba(91,60,196,0.22);

  /* Transicoes */
  --sgp-transicao: 0.2s ease;
  --sgp-transicao-lento: 0.3s ease;

  /* Layout */
  --sgp-nav-largura: 256px;
  --sgp-nav-largura-fechada: 68px;
  --sgp-topbar-altura: 60px;

  /* === ALIASES --nodus-* ===
     Páginas migradas (resumo.php, relatorio.php, etc.) passaram a usar a
     nomenclatura --nodus-*, mas o design system principal continua em --sgp-*.
     Estes aliases ligam os dois. Como variáveis CSS resolvem no ponto de uso,
     o dark mode (que sobrescreve --sgp-* em [data-sgp-theme="dark"]) é herdado
     automaticamente, sem precisar duplicar o bloco escuro. */
  --nodus-azul:           var(--sgp-azul);
  --nodus-azul-escuro:    var(--sgp-azul-escuro);
  --nodus-azul-hover:     var(--sgp-azul-hover);
  --nodus-azul-claro:     var(--sgp-azul-claro);
  --nodus-azul-bg:        var(--sgp-azul-bg);
  --nodus-ciano:          var(--sgp-ciano);
  --nodus-roxo-profundo:  var(--sgp-roxo-profundo);
  --nodus-roxo-vibrante:  var(--sgp-roxo-vibrante);
  --nodus-azul-vivo:      var(--sgp-azul-vivo);
  --nodus-gradiente-main: var(--sgp-gradiente-main);
  --nodus-verde:          var(--sgp-verde);
  --nodus-verde-hover:    var(--sgp-verde-hover);
  --nodus-verde-claro:    var(--sgp-verde-claro);
  --nodus-dourado:        var(--sgp-dourado);
  --nodus-dourado-hover:  var(--sgp-dourado-hover);
  --nodus-dourado-claro:  var(--sgp-dourado-claro);
  --nodus-sucesso:        var(--sgp-sucesso);
  --nodus-sucesso-claro:  var(--sgp-sucesso-claro);
  --nodus-alerta:         var(--sgp-alerta);
  --nodus-alerta-claro:   var(--sgp-alerta-claro);
  --nodus-erro:           var(--sgp-erro);
  --nodus-erro-claro:     var(--sgp-erro-claro);
  --nodus-info:           var(--sgp-info);
  --nodus-info-claro:     var(--sgp-info-claro);
  --nodus-laranja:        var(--sgp-laranja);
  --nodus-verde-escuro:   var(--sgp-verde-escuro);
  --nodus-badge-estruturante-bg:    var(--sgp-badge-estruturante-bg);
  --nodus-badge-estruturante-texto: var(--sgp-badge-estruturante-texto);
  --nodus-texto:          var(--sgp-texto);
  --nodus-texto-2:        var(--sgp-texto-2);
  --nodus-texto-3:        var(--sgp-texto-3);
  --nodus-texto-4:        var(--sgp-texto-4);
  --nodus-texto-secundario: var(--sgp-texto-secundario);
  --nodus-borda:          var(--sgp-borda);
  --nodus-borda-2:        var(--sgp-borda-2);
  --nodus-fundo:          var(--sgp-fundo);
  --nodus-fundo-2:        var(--sgp-fundo-2);
  --nodus-fundo-card:     var(--sgp-fundo-card);
  --nodus-fundo-pagina:   var(--sgp-fundo-pagina);
  --nodus-fonte:          var(--sgp-fonte);
  --nodus-fonte-mono:     var(--sgp-fonte-mono);
  --nodus-space-1:  var(--sgp-space-1);
  --nodus-space-2:  var(--sgp-space-2);
  --nodus-space-3:  var(--sgp-space-3);
  --nodus-space-4:  var(--sgp-space-4);
  --nodus-space-5:  var(--sgp-space-5);
  --nodus-space-6:  var(--sgp-space-6);
  --nodus-space-8:  var(--sgp-space-8);
  --nodus-space-10: var(--sgp-space-10);
  --nodus-space-12: var(--sgp-space-12);
  --nodus-space-xs: var(--sgp-space-xs);
  --nodus-space-sm: var(--sgp-space-sm);
  --nodus-space-md: var(--sgp-space-md);
  --nodus-space-lg: var(--sgp-space-lg);
  --nodus-space-xl: var(--sgp-space-xl);
  --nodus-radius-1: var(--sgp-radius-1);
  --nodus-radius-2: var(--sgp-radius-2);
  --nodus-radius-3: var(--sgp-radius-3);
  --nodus-radius-4: var(--sgp-radius-4);
  --nodus-radius-full: var(--sgp-radius-full);
  --nodus-radius-sm: var(--sgp-radius-sm);
  --nodus-radius-md: var(--sgp-radius-md);
  --nodus-radius-lg: var(--sgp-radius-lg);
  --nodus-sombra-1: var(--sgp-sombra-1);
  --nodus-sombra-2: var(--sgp-sombra-2);
  --nodus-sombra-3: var(--sgp-sombra-3);
  --nodus-sombra-4: var(--sgp-sombra-4);
  --nodus-sombra-azul: var(--sgp-sombra-azul);
  --nodus-transicao: var(--sgp-transicao);
  --nodus-transicao-lento: var(--sgp-transicao-lento);
  --nodus-nav-largura: var(--sgp-nav-largura);
  --nodus-nav-largura-fechada: var(--sgp-nav-largura-fechada);
  --nodus-topbar-altura: var(--sgp-topbar-altura);
}

/* === DARK MODE — Paleta neutra quente (estilo Claude) + regra 60/30/10 ===
   60% Dominante: --sgp-fundo / --sgp-fundo-pagina  (#12081f — preto roxo)
   30% Secundaria: --sgp-fundo-card / --sgp-fundo-2 (#2a0f49 — sidebar, cards, topbar, modais)
   10% Accent:    --sgp-azul                        (#7a5ce6 — botoes primarios, links, foco) */
html[data-sgp-theme="dark"] {
  color-scheme: dark;
  --sgp-azul:           #7a5ce6;
  --sgp-azul-escuro:    #12081f;
  --sgp-azul-hover:     #9274f2;
  --sgp-azul-claro:     #231336;
  --sgp-azul-bg:        #1a102c;
  --sgp-ciano:          #67e8f9;
  --sgp-roxo-profundo:  #2a0f49;
  --sgp-roxo-vibrante:  #7a5ce6;
  --sgp-azul-vivo:      #6f4fd6;
  --sgp-gradiente-main: linear-gradient(135deg, #12081f 0%, #2a0f49 36%, #4a2398 70%, #7a5ce6 100%);
  --sgp-verde-claro:    #163223;
  --sgp-dourado-claro:  #2F2A1C;
  --sgp-sucesso-claro:  #163223;
  --sgp-alerta-claro:   #2F2820;
  --sgp-erro-claro:     #2F2126;
  --sgp-info-claro:     #132c3f;
  --sgp-texto:          #edf3ff;
  --sgp-texto-2:        #c7d4e8;
  --sgp-texto-3:        #90a3bd;
  --sgp-texto-4:        #71839a;
  --sgp-texto-secundario: #90a3bd;
  --sgp-borda:          rgba(255, 255, 255, 0.08);
  --sgp-borda-2:        rgba(255, 255, 255, 0.14);
  --sgp-fundo:          #1F1E1D;
  --sgp-fundo-2:        #262624;
  --sgp-fundo-card:     #262624;
  --sgp-fundo-pagina:   #1F1E1D;
  --sgp-sombra-1: 0 8px 18px rgba(0,0,0,0.30);
  --sgp-sombra-2: 0 14px 30px rgba(0,0,0,0.36);
  --sgp-sombra-3: 0 18px 38px rgba(0,0,0,0.42);
  --sgp-sombra-4: 0 26px 56px rgba(0,0,0,0.52);
  --sgp-sombra-azul: 0 0 0 3px rgba(122, 92, 230, 0.22);
  --bs-primary:         var(--sgp-azul);
  --bs-primary-rgb:     122, 92, 230;
  --bs-link-color:      var(--sgp-azul);
  --bs-link-hover-color: var(--sgp-azul-hover);
}

/* === 2. BASE === */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sgp-fonte);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sgp-texto);
  background: var(--sgp-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

html[data-sgp-theme="dark"] body {
  background: var(--sgp-fundo);
}

/* === 3. LAYOUT PRINCIPAL === */
.sgp-layout {
  display: flex;
  min-height: 100vh;
}

.sgp-main {
  flex: 1;
  margin-left: var(--sgp-nav-largura);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--sgp-transicao-lento);
  min-width: 0;
}

.sgp-main.nav-fechada {
  margin-left: var(--sgp-nav-largura-fechada);
}

.sgp-conteudo {
  flex: 1;
  padding: var(--sgp-space-8);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* === 4. SIDEBAR === */
.sgp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sgp-nav-largura);
  height: 100vh;
  background: var(--sgp-azul-escuro);
  display: flex;
  flex-direction: column;
  transition: width var(--sgp-transicao-lento);
  z-index: 1000;
  overflow: visible;
}

.sgp-sidebar.fechada {
  width: var(--sgp-nav-largura-fechada);
}

.sgp-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-3);
  padding: var(--sgp-space-3) var(--sgp-space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: var(--sgp-topbar-altura);
}

.sgp-sidebar-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 200px;
  transition: opacity 0.2s ease, max-width 0.3s ease;
}

.sgp-sidebar-logo-link:hover {
  text-decoration: none;
}

/* BUG 1 — esconder logo completamente no modo minimizado */
.sgp-sidebar.fechada .sgp-sidebar-logo-link {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

.sgp-sidebar-logo img {
  height: 130px;
  margin-left:25px;
  
  
  object-fit: contain;
  flex-shrink: 0;
}

.sgp-mobile-sheet-meta {
  display: none;
  min-width: 0;
  margin-right: auto;
}

.sgp-mobile-sheet-title {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.sgp-mobile-sheet-subtitle {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

/* Botao hamburger */
.sgp-hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sgp-radius-2);
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 22px;
  cursor: pointer;
  transition: all var(--sgp-transicao);
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.sgp-hamburger-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.sgp-sidebar.fechada .sgp-hamburger-btn {
  margin-left: 0;
}

.sgp-sidebar.fechada .sgp-sidebar-logo {
  justify-content: center;
  gap: 0;
  padding: var(--sgp-space-3) var(--sgp-space-2);
  flex-direction: column;
}

.sgp-sidebar.fechada .sgp-sidebar-logo img {
  width: 36px;
  max-width: 36px;
  margin-left: 0;
}

/* Navegacao da sidebar */
.sgp-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sgp-space-3) var(--sgp-space-2);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sgp-nav::-webkit-scrollbar {
  width: 4px;
}
.sgp-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sgp-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

.sgp-nav-secao {
  margin-bottom: var(--sgp-space-2);
}

/* Itens de navegacao */
.sgp-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-3);
  padding: 10px var(--sgp-space-3);
  border-radius: var(--sgp-radius-2);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--sgp-transicao);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
}

.sgp-nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}

.sgp-nav-item.ativo {
  background: var(--sgp-azul);
  color: #fff;
  font-weight: 600;
}

.sgp-nav-item .sgp-nav-icone {
  font-size: 18px;
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sgp-nav-item .sgp-nav-texto {
  opacity: 1;
  transition: opacity var(--sgp-transicao);
  overflow: hidden;
}

.sgp-sidebar.fechada .sgp-nav-texto { opacity: 0; width: 0; }
.sgp-sidebar.fechada .sgp-nav { overflow: hidden; }

/* Sub-itens colapsaveis */
.sgp-nav .sgp-nav-grupo > .sgp-nav-item {
  font-weight: 600;
}

.sgp-nav .sgp-nav-sub {
  padding-left: var(--sgp-space-4);
}

.sgp-nav .sgp-nav-sub .sgp-nav-item {
  font-size: 13px;
  padding: 8px var(--sgp-space-3);
  color: rgba(255,255,255,0.6);
}

.sgp-nav .sgp-nav-sub .sgp-nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}

.sgp-nav .sgp-nav-sub .sgp-nav-item.ativo {
  color: var(--sgp-dourado);
  background: rgba(188,157,50,0.12);
}

/* Estilo legado dos itens de nav dentro da sidebar (compatibilidade com menuList) */
.sgp-nav .nav-pills {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sgp-nav .nav-pills > li {
  margin-bottom: 2px;
}

.sgp-nav .nav-pills .nav-link {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-3);
  padding: 10px var(--sgp-space-3) !important;
  border-radius: var(--sgp-radius-2) !important;
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all var(--sgp-transicao);
  border: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
}

.sgp-nav .nav-pills .nav-link:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-bottom: none !important;
}

.sgp-nav .nav-pills .nav-link i {
  font-size: 18px !important;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.sgp-nav .nav-pills .nav-link .title-feature {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  opacity: 1;
  transition: opacity var(--sgp-transicao);
}

.sgp-sidebar.fechada .sgp-nav .nav-pills .nav-link .title-feature {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Botao toggle colapsavel dentro da sidebar */
.sgp-nav .btn-toggle {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-3);
  padding: 10px var(--sgp-space-3) !important;
  border-radius: var(--sgp-radius-2) !important;
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  transition: all var(--sgp-transicao);
}

.sgp-nav .btn-toggle:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

.sgp-nav .btn-toggle .nav-link {
  padding: 0 !important;
  background: transparent !important;
}

.sgp-nav .btn-toggle .nav-link:hover {
  background: transparent !important;
}

/* Sub-itens da nav legada */
.sgp-nav .btn-toggle-nav {
  padding-left: var(--sgp-space-4);
  list-style: none;
}

.sgp-nav .btn-toggle-nav .nav-link {
  padding: 8px var(--sgp-space-3) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.6) !important;
}

.sgp-nav .btn-toggle-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Item ativo/selecionado na sidebar — fundo branco translúcido, mesmo padrão para todos os menus */
.sgp-nav .sgp-nav-ativo {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-radius: 4px;
  color: #fff !important;
}
.sgp-nav .sgp-nav-ativo:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.sgp-nav .sgp-nav-ativo .title-feature,
.sgp-nav .sgp-nav-ativo i {
  color: #fff !important;
}

/* Footer da sidebar */
.sgp-sidebar-footer {
  padding: var(--sgp-space-3) var(--sgp-space-2);
  border-top: 1px solid rgba(255,255,255,0.04);
  position: relative;
}

.sgp-sidebar-footer .sgp-nav-item {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}

.sgp-sidebar-footer .sgp-nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.sgp-sidebar-footer .sgp-footer-item {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-3);
  padding: 10px var(--sgp-space-3);
  border-radius: var(--sgp-radius-2);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--sgp-transicao);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.sgp-sidebar-footer .sgp-footer-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

/* Seta de expansao no footer */
.sgp-nav-seta {
  font-size: 12px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.sgp-nav-seta.rotacionado {
  transform: rotate(180deg);
}

.sgp-sidebar.fechada .sgp-nav-seta {
  display: none;
}

/* Sub-menu do footer (Configuracoes) — abre para cima */
.sgp-footer-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0;
  padding-left: var(--sgp-space-4);
}

.sgp-footer-sub.aberto {
  max-height: 200px;
  opacity: 1;
}

.sgp-footer-sub .sgp-sub-item {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-3);
  padding: 8px var(--sgp-space-3);
  border-radius: var(--sgp-radius-2);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
  transition: all var(--sgp-transicao);
}

.sgp-footer-sub .sgp-sub-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
  text-decoration: none;
}

.sgp-footer-sub .sgp-sub-item .sgp-nav-icone {
  font-size: 15px;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

/* Esconder textos e seta do footer quando colapsado */
.sgp-sidebar.fechada .sgp-footer-sub {
  max-height: 0 !important;
  opacity: 0 !important;
}

/* --- Botao Chevron removido — agora usa hamburger na area da logo --- */

/* --- Flyout flutuante (sidebar colapsada) --- */
.sgp-flyout {
  position: fixed;
  z-index: 1050;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--sgp-sombra-2);
  padding: 8px 0;
  min-width: 180px;
  max-width: 260px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.sgp-flyout.sgp-flyout-visivel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.sgp-flyout-titulo {
  padding: 6px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sgp-texto-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--sgp-borda);
  margin-bottom: 4px;
}

.sgp-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--sgp-texto-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--sgp-transicao), color var(--sgp-transicao);
  white-space: nowrap;
}

.sgp-flyout-item:hover {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  text-decoration: none;
}

.sgp-flyout-item .sgp-nav-icone {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sgp-texto-3);
}

.sgp-flyout-item:hover .sgp-nav-icone {
  color: var(--sgp-azul);
}

.sgp-flyout.sgp-flyout-tooltip {
  padding: 4px 0;
  min-width: auto;
}

.sgp-flyout.sgp-flyout-tooltip .sgp-flyout-item {
  padding: 6px 14px;
  font-size: 13px;
}

/* --- Submenu abrindo para cima (deteccao via JS) --- */
.sgp-sub-para-cima {
  display: flex;
  flex-direction: column-reverse;
}

/* === 5. TOPBAR === */
.sgp-topbar {
  height: var(--sgp-topbar-altura);
  background: var(--sgp-fundo-card);
  border-bottom: 1px solid var(--sgp-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sgp-space-8);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: var(--sgp-sombra-1);
}

.sgp-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  border-radius: var(--sgp-radius-full);
  border: 1px solid var(--sgp-borda);
  background: var(--sgp-fundo-2);
  color: var(--sgp-texto-2);
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all var(--sgp-transicao);
}

.sgp-theme-toggle:hover {
  background: var(--sgp-azul-bg);
  color: var(--sgp-texto);
  border-color: var(--sgp-borda-2);
}

.sgp-theme-toggle i {
  font-size: 14px;
}

.sgp-topbar-esquerda {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-4);
  min-width: 0;
}

.sgp-topbar-esquerda > div {
  min-width: 0;
}

.sgp-topbar-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--sgp-texto);
}

.sgp-topbar-subtitulo {
  font-size: 12px;
  color: var(--sgp-texto-3);
  font-weight: 500;
  max-width: min(56vw, 720px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgp-topbar-acoes {
  display: flex;
  align-items: center;
  gap: var(--sgp-space-4);
}

.sgp-topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--sgp-radius-full);
  background: var(--sgp-azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--sgp-borda);
  transition: border-color var(--sgp-transicao), box-shadow var(--sgp-transicao);
  overflow: hidden;
}

.sgp-topbar-avatar:hover {
  border-color: var(--sgp-azul);
  box-shadow: var(--sgp-sombra-azul);
}

.sgp-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sgp-radius-full);
}

.sgp-topbar-timer {
  font-size: 12px;
  color: var(--sgp-texto-3);
  background: var(--sgp-fundo-2);
  padding: 4px 12px;
  border-radius: var(--sgp-radius-full);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sgp-topbar-timer i {
  font-size: 13px;
  color: var(--sgp-texto-4);
}

.sgp-topbar-nome {
  font-size: 13px;
  font-weight: 500;
  color: var(--sgp-texto-2);
}

.sgp-topbar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--sgp-texto-2);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--sgp-radius-1);
  transition: background var(--sgp-transicao);
}

.sgp-topbar-toggle:hover {
  background: var(--sgp-fundo-2);
}

.sgp-mobile-bottombar {
  display: none;
}

/* Dropdown de perfil na topbar */
.sgp-topbar .dropdown-menu {
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-2);
  box-shadow: var(--sgp-sombra-3);
  padding: 4px;
  min-width: 160px;
  background: var(--sgp-fundo-card);
}

.sgp-topbar .dropdown-item {
  border-radius: var(--sgp-radius-1);
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--sgp-texto-2);
  transition: background var(--sgp-transicao);
}

.sgp-topbar .dropdown-item:hover {
  background: var(--sgp-fundo-2);
  color: var(--sgp-texto);
}

/* === 6. CARDS === */
.sgp-card {
  background: var(--sgp-fundo-card);
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-3);
  box-shadow: var(--sgp-sombra-1);
  overflow: hidden;
  transition: box-shadow var(--sgp-transicao);
}

.sgp-card:hover {
  box-shadow: var(--sgp-sombra-2);
}

.sgp-card-header {
  padding: var(--sgp-space-5) var(--sgp-space-6);
  border-bottom: 1px solid var(--sgp-borda);
  background: #fff;
}

.sgp-card-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--sgp-texto);
  margin: 0;
  letter-spacing: -0.01em;
}

.sgp-card-body {
  padding: var(--sgp-space-6);
}

/* === METRICAS (KPI) === */
.sgp-metrica {
  background: var(--sgp-fundo-card);
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-3);
  padding: var(--sgp-space-5) var(--sgp-space-6);
  box-shadow: var(--sgp-sombra-1);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--sgp-transicao), transform var(--sgp-transicao);
  cursor: pointer;
  min-height: 110px;
}

.sgp-metrica:hover {
  box-shadow: var(--sgp-sombra-2);
  transform: translateY(-2px);
}

.sgp-metrica-acento {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: var(--sgp-radius-3) var(--sgp-radius-3) 0 0;
}

.sgp-metrica-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sgp-texto-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.sgp-metrica-valor {
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--sgp-texto);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.sgp-metrica-valor--menor {
  font-size: clamp(1.2rem, 2vw, 1.75rem);
}

.sgp-metrica-valor .fs-6 {
  font-size: 0.95rem !important;
  font-weight: 600;
}

.sgp-metrica-sub {
  font-size: 12px;
  color: var(--sgp-texto-3);
  margin-top: 4px;
}

/* === 7. BOTOES === */
.btn {
  font-family: var(--sgp-fonte);
  font-weight: 500;
  border-radius: var(--sgp-radius-2);
  transition: all var(--sgp-transicao);
  border: 1px solid transparent;
  font-size: 13.5px;
  padding: 8px 16px;
  cursor: pointer;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: var(--sgp-azul);
  border-color: var(--sgp-azul);
  color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--sgp-azul-hover);
  border-color: var(--sgp-azul-hover);
  color: #fff;
  box-shadow: var(--sgp-sombra-azul);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--sgp-fundo-2);
  border-color: var(--sgp-borda-2);
  color: var(--sgp-texto-2);
}

.btn-secondary:hover {
  background: var(--sgp-borda);
  border-color: var(--sgp-borda-2);
  color: var(--sgp-texto);
}

.btn-success {
  background: var(--sgp-sucesso);
  border-color: var(--sgp-sucesso);
  color: #fff;
}

.btn-success:hover {
  background: #12863d;
  border-color: #12863d;
  color: #fff;
}

.btn-danger {
  background: var(--sgp-erro);
  border-color: var(--sgp-erro);
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--sgp-azul);
  color: var(--sgp-azul);
}

.btn-outline-primary:hover {
  background: var(--sgp-azul);
  color: #fff;
}

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

/* === 8. FORMULARIOS === */
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sgp-texto-2);
  margin-bottom: 6px;
}

.form-control, .form-select {
  font-family: var(--sgp-fonte);
  font-size: 14px;
  color: var(--sgp-texto);
  background: var(--sgp-fundo-2);
  border: 1.5px solid var(--sgp-borda-2);
  border-radius: var(--sgp-radius-2);
  padding: 9px 12px;
  height: auto;
  transition: all var(--sgp-transicao);
}

.form-control:focus, .form-select:focus {
  border-color: var(--sgp-azul);
  background: var(--sgp-fundo-card);
  box-shadow: var(--sgp-sombra-azul);
  outline: none;
}

.form-control::placeholder { color: var(--sgp-texto-4); }

input {
  border-color: var(--sgp-borda-2) !important;
}

select {
  border-color: var(--sgp-borda-2) !important;
}

/* === 9. TABELAS === */
.table {
  font-size: 13.5px;
  color: var(--sgp-texto);
  --bs-table-color: var(--sgp-texto);
  --bs-table-bg: var(--sgp-fundo-card);
  --bs-table-border-color: var(--sgp-borda);
  --bs-table-striped-bg: var(--sgp-fundo-2);
  --bs-table-hover-bg: var(--sgp-azul-bg);
}

.table thead th {
  background: var(--sgp-azul-escuro);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border: none;
}

.table tbody td {
  padding: 12px 16px;
  border-color: var(--sgp-borda);
  vertical-align: middle;
}

.table tbody tr:hover { background: var(--sgp-azul-bg); }

.table-head-relatorio {
  background-color: var(--sgp-azul) !important;
  color: white !important;
}

/* === 10. BADGES === */
.badge {
  font-family: var(--sgp-fonte);
  font-weight: 600 !important;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--sgp-radius-full);
  letter-spacing: 0.3px;
}

/* === 11. MODAIS === */
.modal-content {
  border: none;
  border-radius: var(--sgp-radius-4);
  box-shadow: var(--sgp-sombra-4);
  overflow: hidden;
  background: var(--sgp-fundo-card);
  color: var(--sgp-texto);
}

.modal-header {
  background: var(--sgp-azul-escuro);
  color: #fff;
  padding: 16px 24px;
  border: none;
}

.modal-header .modal-title {
  color: #fff;
}

.modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.modal-body { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--sgp-borda);
  gap: 8px;
}

html[data-sgp-theme="dark"] .swal2-popup,
html[data-sgp-theme="dark"] .dropdown-menu,
html[data-sgp-theme="dark"] .custom-dropdown-menu,
html[data-sgp-theme="dark"] .select2-dropdown,
html[data-sgp-theme="dark"] .ui-widget-content,
html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--sgp-fundo-card) !important;
  color: var(--sgp-texto) !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-layout-row,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-layout-cell,
html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-search,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-search label {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-layout-row,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-layout-cell,
html[data-sgp-theme="dark"] .dataTables_wrapper .top,
html[data-sgp-theme="dark"] .dataTables_wrapper .bottom,
html[data-sgp-theme="dark"] div.dt-container div.dt-layout-row,
html[data-sgp-theme="dark"] div.dt-container div.dt-layout-cell {
  background: var(--sgp-fundo-card) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button,
html[data-sgp-theme="dark"] .dataTables_wrapper button.dt-button {
  background: rgba(61, 159, 225, 0.16) !important;
  border: 1px solid rgba(61, 159, 225, 0.28) !important;
  color: var(--sgp-texto) !important;
  box-shadow: none !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper button.dt-button:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button:focus,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button:focus,
html[data-sgp-theme="dark"] .dataTables_wrapper button.dt-button:focus {
  background: rgba(61, 159, 225, 0.28) !important;
  border-color: rgba(91, 176, 232, 0.42) !important;
  color: #ffffff !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button-collection {
  background: var(--sgp-fundo-card) !important;
  border: 1px solid var(--sgp-borda) !important;
  box-shadow: var(--sgp-sombra-3) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button-collection .dt-button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button-collection .dt-button:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-button-collection .dt-button.active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody td {
  background: var(--sgp-fundo-card) !important;
  color: var(--sgp-texto) !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable thead th {
  background: #1A1918 !important;
  color: var(--sgp-texto) !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable.table-hover tbody tr:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover td {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable.table-hover tbody tr:hover td *,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover td *,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable.table-hover tbody tr:hover a,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover a,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable.table-hover tbody tr:hover .a-link,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover .a-link,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable.table-hover tbody tr:hover .text-tab-color,
html[data-sgp-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover .text-tab-color {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-sgp-theme="dark"] .table-hover > tbody > tr:hover,
html[data-sgp-theme="dark"] .table-striped > tbody > tr:hover > *,
html[data-sgp-theme="dark"] .table-striped > tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .table-hover > tbody > tr:hover > * *,
html[data-sgp-theme="dark"] .table-striped > tbody > tr:hover > * * {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-paging .dt-paging-button {
  background: var(--sgp-fundo-card) !important;
  color: var(--sgp-texto) !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-paging .dt-paging-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-sgp-theme="dark"] .dataTables_wrapper .dt-paging .dt-paging-button.current {
  background: rgba(61, 159, 225, 0.22) !important;
  color: var(--sgp-texto) !important;
  border-color: rgba(61, 159, 225, 0.40) !important;
}

html[data-sgp-theme="dark"] .sgp-skeleton,
html[data-sgp-theme="dark"] .sgp-home-skeleton-row,
html[data-sgp-theme="dark"] .va-skeleton-row,
html[data-sgp-theme="dark"] .sgp-skeleton-card,
html[data-sgp-theme="dark"] .sgp-skeleton-toolbar,
html[data-sgp-theme="dark"] .sgp-skeleton-table thead th,
html[data-sgp-theme="dark"] .sgp-skeleton-table tbody td {
  background-color: #2A2826 !important;
  color: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-sgp-theme="dark"] .select2-container--default .select2-selection--single,
html[data-sgp-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: var(--sgp-fundo-2) !important;
  border-color: var(--sgp-borda) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-sgp-theme="dark"] .select2-results__option,
html[data-sgp-theme="dark"] .ui-menu-item-wrapper,
html[data-sgp-theme="dark"] .swal2-title,
html[data-sgp-theme="dark"] .swal2-html-container {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .btn-light,
html[data-sgp-theme="dark"] .btn-outline-secondary {
  background: var(--sgp-fundo-2);
  border-color: var(--sgp-borda);
  color: var(--sgp-texto-2);
}

html[data-sgp-theme="dark"] .bg-white,
html[data-sgp-theme="dark"] .bg-light {
  background-color: var(--sgp-fundo-card) !important;
}

html[data-sgp-theme="dark"] .text-dark {
  color: var(--sgp-texto) !important;
}

/* === 12. ALERTS === */
.alert {
  border: none;
  border-radius: var(--sgp-radius-2);
  font-size: 13.5px;
  padding: 12px 16px;
  border-left: 4px solid;
}

.alert-success { background: var(--sgp-sucesso-claro); border-color: var(--sgp-sucesso); color: #14532d; }
.alert-warning { background: var(--sgp-alerta-claro); border-color: var(--sgp-alerta); color: #92400e; }
.alert-danger  { background: var(--sgp-erro-claro);   border-color: var(--sgp-erro);   color: #7f1d1d; }
.alert-info    { background: var(--sgp-info-claro);   border-color: var(--sgp-info);   color: #0c4a6e; }

/* === 13. RESPONSIVO / MOBILE === */
@media (max-width: 1024px) {
  :root {
    --sgp-mobile-bottombar-space: calc(86px + env(safe-area-inset-bottom));
  }

  .sgp-sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: min(88vh, 760px);
    height: min(88dvh, 760px);
    max-height: calc(100dvh - 8px);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.14);
    background: linear-gradient(180deg, #002a44 0%, #00375a 56%, #00324f 100%);
    box-shadow: 0 -24px 44px rgba(2, 18, 30, 0.42);
    transform: translateY(104%);
    transition: transform 0.34s cubic-bezier(0.22, 0.7, 0.2, 1), box-shadow 0.2s ease;
    overflow: hidden;
    pointer-events: none;
  }

  .sgp-sidebar::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.42);
    z-index: 3;
  }

  .sgp-sidebar.aberta {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Evitar duplicacao com a bottom bar mobile */
  #sgpSidebar .sgp-nav a[href$="visao_global.php"],
  #sgpSidebar .sgp-nav a[href*="/visao_global.php"],
  #sgpSidebar .sgp-nav a[href^="visao_global.php?"],
  #sgpSidebar .sgp-nav a[href$="perfil.php"],
  #sgpSidebar .sgp-nav a[href*="/perfil.php"],
  #sgpSidebar .sgp-nav a[href^="perfil.php#"],
  #sgpSidebar .sgp-nav a[href*="/perfil.php#"],
  #sgpSidebar .sgp-sidebar-footer a[href$="perfil.php"],
  #sgpSidebar .sgp-sidebar-footer a[href*="/perfil.php"],
  #sgpSidebar .sgp-sidebar-footer a[href^="perfil.php#"],
  #sgpSidebar .sgp-sidebar-footer a[href*="/perfil.php#"] {
    display: none !important;
  }

  /* Em mobile, nunca usar o modo colapsado */
  .sgp-sidebar.fechada {
    width: 100%;
  }

  .sgp-sidebar.fechada .sgp-sidebar-logo {
    justify-content: flex-start;
    gap: var(--sgp-space-3);
    padding: 12px 14px;
    flex-direction: row;
  }

  .sgp-sidebar.fechada .sgp-sidebar-logo-link {
    opacity: 1;
    max-width: none;
    pointer-events: auto;
  }

  .sgp-sidebar.fechada .sgp-nav {
    overflow-y: auto;
  }

  .sgp-sidebar.fechada .sgp-nav-texto,
  .sgp-sidebar.fechada .sgp-nav .nav-pills .nav-link .title-feature {
    opacity: 1;
    width: auto;
  }

  .sgp-sidebar.fechada .sgp-nav-seta {
    display: inline-flex;
  }

  .sgp-sidebar-logo {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 60px;
    padding: 16px 14px 12px;
    background: rgba(0, 42, 68, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .sgp-sidebar-logo img {
    height: 34px;
  }

  .sgp-sidebar-logo-link {
    max-width: none;
    margin-right: 8px;
  }

  .sgp-mobile-sheet-meta {
    display: flex;
    flex-direction: column;
  }

  .sgp-mobile-sheet-title {
    font-size: 13.5px;
  }

  .sgp-mobile-sheet-subtitle {
    font-size: 10.5px;
  }

  .sgp-hamburger-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 21px;
  }

  .sgp-hamburger-btn:hover {
    background: rgba(255,255,255,0.18);
  }

  .sgp-nav {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sgp-nav .nav-pills > li {
    margin-bottom: 6px;
  }

  .sgp-nav .nav-pills .nav-link,
  .sgp-nav .btn-toggle,
  .sgp-footer-sub .sgp-sub-item,
  .sgp-sidebar-footer .sgp-footer-item {
    min-height: 46px;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    align-items: center;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  .sgp-nav .btn-toggle-nav {
    padding-left: 8px;
    margin-top: 4px;
  }

  .sgp-nav .btn-toggle-nav .nav-link {
    margin-left: 0 !important;
    padding-left: 12px !important;
    background: rgba(255,255,255,0.04) !important;
  }

  .sgp-nav .nav-pills .nav-link i,
  .sgp-nav .btn-toggle i,
  .sgp-footer-sub .sgp-sub-item .sgp-nav-icone,
  .sgp-sidebar-footer .sgp-footer-item .sgp-nav-icone {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: rgba(255,255,255,0.13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    flex-shrink: 0;
  }

  .sgp-nav .nav-pills .nav-link:hover,
  .sgp-nav .btn-toggle:hover,
  .sgp-footer-sub .sgp-sub-item:hover,
  .sgp-sidebar-footer .sgp-footer-item:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.18) !important;
  }

  .sgp-nav .sgp-nav-ativo {
    background: #ffffff !important;
    border-color: rgba(255,255,255,0.9) !important;
    color: var(--sgp-azul-escuro) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }

  .sgp-nav .sgp-nav-ativo .title-feature,
  .sgp-nav .sgp-nav-ativo i {
    color: var(--sgp-azul-escuro) !important;
  }

  .sgp-nav .sgp-nav-ativo i {
    background: #deedfa;
  }

  .sgp-nav .title-feature {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: normal;
    line-height: 1.25;
  }

  .sgp-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(0,42,68,0) 0%, rgba(0,42,68,0.96) 26%);
    padding: 8px 10px var(--sgp-mobile-bottombar-space);
  }

  .sgp-footer-sub {
    padding-left: 6px;
  }

  .sgp-main {
    margin-left: 0 !important;
    padding-bottom: var(--sgp-mobile-bottombar-space);
  }

  .sgp-topbar {
    padding: 0 var(--sgp-space-4);
  }

  .sgp-topbar-esquerda {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--sgp-space-2);
  }

  .sgp-topbar-toggle {
    display: none !important;
  }

  .sgp-mobile-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: fixed;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(420px, calc(100% - 18px));
    padding: 7px;
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(217, 226, 238, 0.95);
    box-shadow: 0 14px 28px rgba(11, 32, 52, 0.2);
    backdrop-filter: blur(10px);
    z-index: 1102;
    transition: opacity var(--sgp-transicao), transform var(--sgp-transicao);
  }

  .sgp-mobile-tab {
    flex: 1;
    min-width: 0;
    height: 56px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: #33516b;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .sgp-mobile-tab i {
    font-size: 18px;
    line-height: 1;
  }

  .sgp-mobile-tab:hover {
    text-decoration: none;
    color: var(--sgp-azul);
    background: #eef4fb;
  }

  .sgp-mobile-tab.is-active {
    background: #e9f3fc;
    color: var(--sgp-azul);
  }

  .sgp-mobile-tab-menu {
    color: #163752;
  }

  .sgp-mobile-tab-menu.is-current-section {
    background: #e9f3fc;
    color: var(--sgp-azul);
  }

  .sgp-mobile-tab-badge {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(145deg, #005a92 0%, #0a6fb0 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0, 90, 146, 0.26);
  }

  .sgp-mobile-tab-menu[aria-expanded="true"] .sgp-mobile-tab-badge {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 8px 16px rgba(17, 24, 39, 0.3);
  }

  .sgp-mobile-tab-menu[aria-expanded="true"] {
    background: #edf1f6;
    color: #111827;
  }

  .sgp-mobile-tab-label {
    display: block;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-bottombar {
    background: rgba(16, 28, 46, 0.94);
    border-color: rgba(126, 148, 179, 0.24);
    box-shadow: 0 14px 28px rgba(2, 8, 23, 0.45);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab {
    color: var(--sgp-texto-2, #c7d4e8);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab:hover {
    color: var(--sgp-texto, #edf3ff);
    background: rgba(59, 130, 246, 0.12);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab.is-active {
    background: rgba(59, 130, 246, 0.18);
    color: #ffffff;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu {
    color: var(--sgp-texto-2, #c7d4e8);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu.is-current-section {
    background: rgba(59, 130, 246, 0.18);
    color: #ffffff;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu[aria-expanded="true"] {
    background: rgba(59, 130, 246, 0.22);
    color: #ffffff;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu[aria-expanded="true"] .sgp-mobile-tab-badge {
    background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.35);
  }

  .sgp-topbar-acoes {
    flex-shrink: 0;
    gap: var(--sgp-space-2);
  }

  .sgp-theme-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .sgp-theme-toggle span {
    display: none;
  }

  .sgp-theme-toggle i {
    font-size: 16px;
  }

  .sgp-topbar-titulo {
    font-size: 12.5px;
    line-height: 1.1;
  }

  .sgp-topbar-subtitulo {
    font-size: 10.5px;
    line-height: 1.1;
    max-width: 48vw;
  }

  .sgp-topbar-timer {
    font-size: 11px;
    padding: 3px 9px;
  }

  .sgp-conteudo {
    padding: var(--sgp-space-4);
    padding-bottom: calc(var(--sgp-space-4) + 86px);
  }

  .sgp-topbar-nome {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --sgp-mobile-bottombar-space: calc(74px + env(safe-area-inset-bottom));
  }

  .sgp-sidebar {
    height: min(92vh, 820px);
    height: min(92dvh, 820px);
    border-radius: 18px 18px 0 0;
  }

  .sgp-sidebar-logo-link img {
    height: 24px;
  }

  .sgp-mobile-sheet-subtitle {
    display: none;
  }

  .sgp-nav .nav-pills .nav-link,
  .sgp-nav .btn-toggle,
  .sgp-footer-sub .sgp-sub-item,
  .sgp-sidebar-footer .sgp-footer-item {
    min-height: 44px;
    padding: 9px 11px !important;
  }

  .sgp-topbar {
    padding: 0 10px;
  }

  .sgp-mobile-bottombar {
    width: calc(100% - 14px);
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 16px;
  }

  .sgp-mobile-tab {
    height: 50px;
    font-size: 10px;
  }

  .sgp-mobile-tab i {
    font-size: 17px;
  }

  .sgp-mobile-tab-badge {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-bottombar {
    background: rgba(16, 28, 46, 0.96);
    border-color: rgba(126, 148, 179, 0.24);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab {
    color: var(--sgp-texto-2, #c7d4e8);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab:hover {
    background: rgba(59, 130, 246, 0.12);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab.is-active {
    background: rgba(59, 130, 246, 0.18);
    color: #ffffff;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu {
    color: var(--sgp-texto-2, #c7d4e8);
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu.is-current-section {
    background: rgba(59, 130, 246, 0.18);
    color: #ffffff;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu[aria-expanded="true"] {
    background: rgba(59, 130, 246, 0.22);
    color: #ffffff;
  }

  html[data-sgp-theme="dark"] .sgp-mobile-tab-menu[aria-expanded="true"] .sgp-mobile-tab-badge {
    background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.35);
  }

  .sgp-topbar-titulo {
    font-size: 11.5px;
  }

  .sgp-topbar-subtitulo {
    font-size: 10px;
    max-width: 42vw;
  }

  .sgp-topbar-timer {
    font-size: 10px;
    padding: 3px 8px;
  }

  .sgp-topbar-avatar {
    width: 32px;
    height: 32px;
  }

  .sgp-theme-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .sgp-theme-toggle i {
    font-size: 15px;
  }
}

body.sgp-mobile-nav-open {
  overflow: hidden;
}

/* Overlay escuro quando sidebar aberta em mobile */
.sgp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 22, 0.46);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--sgp-transicao-lento);
}

.sgp-overlay.ativo {
  display: block;
  opacity: 1;
}

/* === 14. LOADER === */
.sgp-loader {
  position: fixed;
  inset: 0;
  background: var(--sgp-azul-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

.sgp-loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sgp-giro 0.8s linear infinite;
}

@keyframes sgp-giro {
  to { transform: rotate(360deg); }
}

/* Loader legado (barras animadas) */
.loader {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

.loader .inner_loader {
  background: var(--sgp-azul);
  width: 15px;
  height: 15px;
  display: inline-block;
  transform-origin: 50% 0;
  animation: animate 2s ease-in-out infinite;
}

.loader .inner_loader:nth-child(2) {
  background: var(--sgp-dourado);
  animation-delay: 0.1s;
}

.loader .inner_loader:nth-child(3) {
  background: var(--sgp-verde);
  animation-delay: 0.2s;
}

.loader .inner_loader:nth-child(4) {
  background: var(--sgp-texto-3);
  animation-delay: 0.3s;
}

@keyframes animate {
  0%, 5%, 95%, 100% { transform: translateY(0) scaleY(1); }
  16.7% { transform: translateY(0) scaleY(8); }
  28.3%, 38.3% { transform: translateY(5.25em) scaleY(1); }
  50% { transform: translateY(2.625em) scaleY(4.5); }
  61.7%, 71.7% { transform: translateY(2.625em) scaleY(1); }
  83.3% { transform: translateY(0) scaleY(4.5); }
}

/* === 15. UTILITARIOS === */
.font-calc {
  font-size: clamp(12px, 2vw, 18px);
  white-space: nowrap;
}

.back-grad-azul {
  background-color: var(--sgp-azul) !important;
  color: #fff !important;
}

.back-grad-azul:hover {
  background-color: var(--sgp-azul-hover) !important;
}

.text-primary { color: var(--sgp-azul) !important; }
.bg-primary { background-color: var(--sgp-azul) !important; }
.border-primary { border-color: var(--sgp-azul) !important; }

.text-sgp-azul { color: var(--sgp-azul); }
.text-sgp-verde { color: var(--sgp-verde); }
.text-sgp-dourado { color: var(--sgp-dourado); }
.bg-sgp-azul { background: var(--sgp-azul); }
.bg-sgp-claro { background: var(--sgp-azul-claro); }
.border-sgp { border-color: var(--sgp-borda) !important; }
.radius-sgp { border-radius: var(--sgp-radius-2); }
.sombra-sgp { box-shadow: var(--sgp-sombra-2); }
.hidden { display: none; }
.pointer { cursor: pointer; }

/* === 16. COMPATIBILIDADE Select2 === */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 9px 12px;
  border: 1.5px solid var(--sgp-borda-2) !important;
  border-radius: var(--sgp-radius-2) !important;
  background: var(--sgp-fundo-2);
  font-family: var(--sgp-fonte);
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sgp-texto);
  line-height: 1.4;
  padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  width: 36px !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--sgp-borda-2) !important;
  border-radius: var(--sgp-radius-2) !important;
  padding: 0.5rem 0 !important;
}

.select2-dropdown {
  border: 1.5px solid var(--sgp-borda-2);
  border-radius: var(--sgp-radius-2);
  box-shadow: var(--sgp-sombra-3);
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background-color: var(--sgp-azul) !important;
  color: #fff !important;
}

/* Opção já selecionada (não destacada): mantém legível em ambos os temas */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--sgp-azul-claro);
  color: var(--sgp-texto);
}

/* Modal global "Criar Novo Projeto": algumas páginas (ex.: alertas de gestão)
   elevam o .modal-backdrop para z-index 1080 por causa dos modais próprios.
   Como este modal usa o z-index padrão do Bootstrap (1055), ele ficava ATRÁS
   do backdrop e não dava pra clicar. Fica acima de qualquer backdrop elevado. */
#modaladdproj {
  z-index: 1090;
}

/* Modal de ajuste financeiro manual:
   mantém a janela acima do backdrop mesmo quando outras páginas elevam o overlay. */
#modalFinanceiroManual {
  z-index: 1105 !important;
}

#modalFinanceiroManual .modal-dialog {
  position: relative;
  z-index: 1106;
}

.modal-backdrop.manual-financeiro-backdrop {
  z-index: 1100 !important;
}

/* === 17. COMPATIBILIDADE DataTables === */
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--sgp-borda-2);
  border-radius: var(--sgp-radius-2);
  padding: 6px 12px;
  font-family: var(--sgp-fonte);
  font-size: 13.5px;
}

.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--sgp-borda-2);
  border-radius: var(--sgp-radius-2);
  padding: 4px 8px;
}

.dt-input {
  border: 1px solid var(--sgp-borda) !important;
}

.dt-input:focus {
  outline: none;
  border-color: var(--sgp-azul) !important;
}

/* === 18. COMPONENTES LEGADOS (preservados) === */

/* Avatar do usuario */
.span-avatar {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  color: #fff;
  font-weight: 700 !important;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--sgp-borda);
  box-shadow: var(--sgp-sombra-1);
}

.user-avatar-placeholder {
  width: 36px;
  height: 36px;
  background-color: var(--sgp-azul);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-transform: uppercase;
  border: 2px solid var(--sgp-borda);
  box-shadow: var(--sgp-sombra-1);
  font-family: var(--sgp-fonte);
}

.user-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar {
  margin-left: 0.75rem;
}

/* Navbar legada (compatibilidade com offcanvas mobile) */
.background-navbar {
  background: var(--sgp-azul-escuro) !important;
}

/* Manter navegacao do Bootstrap mas sem os borders antigos dentro da sidebar */
.ftitulo strong span {
  font-weight: 600 !important;
}

.nav-item strong {
  font-weight: 400 !important;
}

/* Logo nav legado */
.logo_nav_1 {
  width: 12rem;
  object-fit: contain;
  margin-left: 2rem;
}

/* Titulo de feature */
.title-feature {
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* Shadow figma */
.shadow-figma {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

/* Linha decorativa azul */
.linha-azul {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

.linha-azul::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 0.2rem;
  background-color: var(--sgp-azul);
}

.linha-azulC {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

.linha-azulC::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 120%;
  height: 0.2rem;
  background-color: var(--sgp-azul);
}

/* Radius para header de tabela */
.radius-bg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Label de usuario (gestao de perfil) */
.usuario-label {
  background: var(--sgp-azul) !important;
  border: 1px solid var(--sgp-azul) !important;
}

/* Tabela de listagem de usuario */
#listagemUsuarioTable {
  font-size: 0.75rem;
}

#listagemUsuarioTable tbody td {
  vertical-align: middle;
}

#listagemUsuarioTable .sgp-user-actions {
  white-space: nowrap;
}

#listagemUsuarioTable .sgp-user-actions .btn {
  border-radius: 8px;
}

#listagemUsuarioTable_wrapper .dataTables_filter .input-group {
  flex-wrap: nowrap;
}

/* Links e botoes de tabela */
.text-tab-color {
  color: var(--sgp-azul);
}

.a-link {
  color: var(--sgp-azul);
  text-decoration: none;
}

.a-link:hover {
  color: var(--sgp-azul-hover);
  text-decoration: underline;
}

.btn-hover {
  color: var(--sgp-azul);
  transition: color var(--sgp-transicao);
}

.btn-hover:hover {
  color: var(--sgp-dourado);
}

/* Botoes de tabela (DataTables) */
.button-filter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media (max-width: 767.98px) {
  .sgp-user-management {
    padding: 12px 8px !important;
  }

  .sgp-user-management .table-responsive {
    overflow-x: visible;
  }

  #listagemUsuarioTable_wrapper .button-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #listagemUsuarioTable_wrapper .dt-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  #listagemUsuarioTable_wrapper .dt-buttons .dt-button {
    width: 100%;
    margin: 0 !important;
  }

  #listagemUsuarioTable_wrapper .dataTables_filter,
  #listagemUsuarioTable_wrapper .dataTables_filter label {
    width: 100%;
    margin: 0;
  }

  #listagemUsuarioTable_wrapper .dataTables_filter .input-group {
    width: 100%;
  }

  #listagemUsuarioTable_wrapper .dataTables_filter input {
    width: 100% !important;
    min-width: 0;
  }

  #listagemUsuarioTable_wrapper .dataTables_info {
    width: 100%;
    margin-top: 0.25rem;
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    color: var(--sgp-texto-3);
    background: #f8fafc;
    border: 1px solid var(--sgp-borda);
    border-radius: 10px;
  }

  #listagemUsuarioTable_wrapper .dataTables_paginate {
    width: 100%;
    margin-top: 0.55rem;
    display: flex;
    justify-content: center;
    float: none !important;
  }

  #listagemUsuarioTable_wrapper .dataTables_paginate span {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  #listagemUsuarioTable_wrapper .dataTables_paginate .paginate_button {
    min-width: 42px;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid var(--sgp-borda) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--sgp-texto) !important;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
  }

  #listagemUsuarioTable_wrapper .dataTables_paginate .paginate_button.current {
    border-color: var(--sgp-azul) !important;
    background: var(--sgp-azul) !important;
    color: #fff !important;
  }

  #listagemUsuarioTable_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
  }

  #listagemUsuarioTable_wrapper .dt-info {
    width: 100%;
    margin-top: 0.25rem;
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    color: var(--sgp-texto-3);
    background: #f8fafc;
    border: 1px solid var(--sgp-borda);
    border-radius: 10px;
  }

  #listagemUsuarioTable_wrapper .dt-paging {
    width: 100%;
    margin-top: 0.55rem;
  }

  #listagemUsuarioTable_wrapper .dt-paging nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  #listagemUsuarioTable_wrapper .dt-paging .dt-paging-button {
    min-width: 42px;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 1px solid var(--sgp-borda) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--sgp-texto) !important;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
  }

  #listagemUsuarioTable_wrapper .dt-paging .dt-paging-button.current {
    border-color: var(--sgp-azul) !important;
    background: var(--sgp-azul) !important;
    color: #fff !important;
  }

  #listagemUsuarioTable_wrapper .dt-paging .dt-paging-button.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
  }

  #listagemUsuarioTable {
    min-width: 0 !important;
    border: 0 !important;
    font-size: 0.78rem;
  }

  #listagemUsuarioTable thead {
    display: none;
  }

  #listagemUsuarioTable tbody,
  #listagemUsuarioTable tbody tr,
  #listagemUsuarioTable tbody td {
    display: block;
    width: 100%;
  }

  #listagemUsuarioTable tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--sgp-borda);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sgp-sombra-1);
    padding: 10px 12px;
  }

  #listagemUsuarioTable tbody td {
    border: 0 !important;
    padding: 5px 0 !important;
    text-align: left !important;
  }

  #listagemUsuarioTable tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--sgp-texto-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #listagemUsuarioTable tbody td.sgp-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px !important;
  }

  #listagemUsuarioTable tbody td.sgp-user-actions::before {
    width: 100%;
    margin-bottom: 4px;
  }

  #listagemUsuarioTable tbody td.sgp-user-actions .btn {
    min-width: 38px;
    min-height: 34px;
    padding: 6px 8px !important;
    border: 1px solid var(--sgp-borda);
    background: var(--sgp-fundo-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  #listagemUsuarioTable_wrapper .dataTables_paginate .paginate_button.first,
  #listagemUsuarioTable_wrapper .dataTables_paginate .paginate_button.last,
  #listagemUsuarioTable_wrapper .dt-paging .dt-paging-button.first,
  #listagemUsuarioTable_wrapper .dt-paging .dt-paging-button.last {
    display: none !important;
  }

  #listagemUsuarioTable_wrapper .dataTables_info,
  #listagemUsuarioTable_wrapper .dt-info {
    font-size: 12px;
    padding: 7px 10px;
  }

  #listagemUsuarioTable_wrapper .dataTables_paginate .paginate_button,
  #listagemUsuarioTable_wrapper .dt-paging .dt-paging-button {
    min-width: 40px;
    min-height: 38px;
    padding: 8px 12px !important;
    font-size: 12px;
  }
}

.btn-copy-table {
  background-color: var(--sgp-azul) !important;
  color: white !important;
}

.btn-clovis-table {
  background-color: var(--sgp-laranja) !important;
  color: white !important;
}

.btn-excel-table {
  background-color: var(--sgp-verde-escuro) !important;
  color: white !important;
}

.btn-create-user {
  background-color: #B3711F !important;
  color: white !important;
}

/* Botão carregar mais projetos */
.sgp-btn-carregar-mais {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid var(--sgp-azul);
  transition: all 0.2s ease;
}

.sgp-btn-carregar-mais:hover,
.sgp-btn-carregar-mais:focus {
  background: var(--sgp-azul);
  color: #fff;
  outline: 2px solid var(--sgp-azul);
  outline-offset: 2px;
}

/* Alertas flutuantes */
.floating-alert {
  position: fixed;
  top: 10%;
  left: 0;
  width: 100%;
  z-index: 1050;
}

.alert-strong {
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Borda vermelha de validacao */
.red-border {
  border: 3px solid var(--sgp-erro) !important;
}

/* Busca no nav */
#search-container {
  position: relative;
}

#search-input {
  width: 0;
  opacity: 0;
  display: none;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.3s ease;
}

#search-icon {
  cursor: pointer;
}

/* Dropdown customizado */
.custom-dropdown-menu {
  right: 0;
  left: auto;
}

/* Classe pp (icone pequeno) */
.pp {
  width: 0.9rem;
}

/* Classe dados (transicao de margem) */
.dados {
  transition: margin-left 0.5s;
}

/* Select2 para secretaria */
.user-select2-secretaria > .select2-container {
  width: 75% !important;
}

.user-select2-secretaria > .select2-container > .selection > .select2-selection {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 0px !important;
}

/* Responsivo: botoes de filtro em mobile */
@media (max-width: 450px) {
  .button-filter {
    flex-direction: column;
  }

  .dt-buttons {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-direction: column;
  }

  .dt-search {
    margin-bottom: 1rem;
  }
}

/* Toggler do navbar Bootstrap (offcanvas mobile) */
.navbar-toggler {
  display: block;
}

.navbar-toggler.collapsed {
  background-color: transparent;
}

/* === HOME (VISAO GLOBAL) === */
.sgp-home-container {
  padding-top: 24px;
  padding-bottom: 48px;
}

.sgp-home-filtros-body {
  padding: 16px 24px;
}

.sgp-home-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sgp-texto-secundario);
}

.sgp-home-search-icon-wrap {
  background: var(--sgp-fundo-pagina);
  border-color: var(--sgp-borda);
}

.sgp-home-search-icon {
  color: var(--sgp-texto-secundario);
}

.sgp-home-lista-header {
  gap: var(--sgp-space-3);
  flex-wrap: wrap;
}

.sgp-home-counter {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
}

html[data-sgp-theme="dark"] .sgp-home-lista-header,
html[data-sgp-theme="dark"] .sgp-card-header,
html[data-sgp-theme="dark"] .sgp-card {
  background: var(--sgp-fundo-card) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .sgp-home-counter {
  background: #231336 !important;
  color: #c9b6f5 !important;
  border: 1px solid rgba(122, 92, 230, 0.24);
}

html[data-sgp-theme="dark"] .sgp-card-titulo,
html[data-sgp-theme="dark"] .sgp-home-lista-header .bi {
  color: var(--sgp-texto) !important;
}

.sgp-home-skeleton-row {
  border-color: var(--sgp-borda) !important;
}

.sgp-home-load-more {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid var(--sgp-azul);
  transition: all .2s ease;
}

.sgp-home-load-more:hover,
.sgp-home-load-more:focus {
  background: var(--sgp-azul);
  color: #fff;
  border-color: var(--sgp-azul);
}

.sgp-home-load-more.is-loading {
  opacity: 0.9;
  pointer-events: none;
}

.sgp-home-filtro-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sgp-home-filtro-btn {
  min-width: 132px;
}

.sgp-home-kpi-grid .sgp-metrica {
  height: 100%;
}

/* === 19. PROJETO ITEM / DASHBOARD === */
.sgp-projeto-item {
  border-bottom: 1px solid var(--sgp-borda);
  transition: background .15s ease;
  cursor: pointer;
}

/* Barra de acento lateral colorida */
.sgp-projeto-acento {
  width: 4px;
  height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Nome do projeto — desktop: uma linha com ellipsis */
.sgp-projeto-nome {
  font-weight: 600;
  font-size: 14px;
  color: var(--sgp-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgp-projeto-item:hover {
  background: var(--sgp-fundo-pagina) !important;
}

.sgp-projeto-item:last-child {
  border-bottom: none;
}

.sgp-projeto-acento {
  width: 4px;
  height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
}

.sgp-projeto-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.sgp-projeto-badge {
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.25;
  padding: 3px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sgp-projeto-badge-estruturante {
  background: #fff3cd;
  color: #856404;
}

.sgp-projeto-pacto {
  color: var(--sgp-azul);
  font-size: 14px;
}

.sgp-projeto-titulo {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--sgp-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgp-projeto-link {
  color: var(--sgp-texto);
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sgp-projeto-link:hover {
  color: var(--sgp-texto);
  text-decoration: underline;
}

.sgp-projeto-meta {
  font-size: 12px;
  color: var(--sgp-texto-secundario);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.sgp-home-empty-state {
  color: var(--sgp-texto-secundario);
  font-size: 13.5px;
}

.sgp-home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 24px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-3);
  background:
    radial-gradient(circle at top right, rgba(77, 44, 174, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(77, 44, 174, 0.06), rgba(255, 255, 255, 0.96));
  box-shadow: var(--sgp-sombra-1);
  overflow: hidden;
}

.sgp-home-hero::after {
  content: "";
  position: absolute;
  inset: auto -60px -100px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 44, 174, 0.16), transparent 68%);
  pointer-events: none;
}

.sgp-home-hero__content,
.sgp-home-hero__snapshot {
  position: relative;
  z-index: 1;
}

.sgp-home-hero__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sgp-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(77, 44, 174, 0.12);
  color: var(--sgp-azul);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sgp-home-hero__title {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--sgp-texto);
  max-width: 18ch;
}

.sgp-home-hero__text {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sgp-texto-secundario);
}

.sgp-home-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sgp-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.sgp-home-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(77, 44, 174, 0.18);
  background: rgba(77, 44, 174, 0.08);
  color: var(--sgp-azul);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sgp-sombra-1);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sgp-home-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--sgp-sombra-2);
  background: rgba(77, 44, 174, 0.12);
  color: var(--sgp-azul);
}

.sgp-home-action i {
  font-size: 13px;
}

.sgp-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sgp-borda);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--sgp-texto-2);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--sgp-sombra-1);
}

.sgp-home-chip i {
  color: var(--sgp-azul);
}

.sgp-home-hero__snapshot {
  display: grid;
  gap: 12px;
}

.sgp-home-snapshot-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--sgp-borda);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--sgp-sombra-1);
  color: inherit;
  text-decoration: none;
}

.sgp-home-snapshot-card:hover,
.sgp-home-snapshot-card:focus,
.sgp-home-snapshot-card:active,
.sgp-home-snapshot-card:visited {
  color: inherit;
  text-decoration: none;
}

.sgp-home-snapshot-card--info {
  border-color: rgba(77, 44, 174, 0.22);
}

.sgp-home-snapshot-card--success {
  border-color: rgba(25, 135, 84, 0.22);
}

.sgp-home-snapshot-card--warning {
  border-color: rgba(245, 158, 11, 0.22);
}

.sgp-home-snapshot-value {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sgp-texto);
  margin-bottom: 6px;
}

.sgp-home-snapshot-card--info .sgp-home-snapshot-value {
  color: var(--sgp-azul);
}

.sgp-home-snapshot-card--success .sgp-home-snapshot-value {
  color: #198754;
}

.sgp-home-snapshot-card--warning .sgp-home-snapshot-value {
  color: #d97706;
}

.sgp-home-snapshot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sgp-texto-secundario);
}

.sgp-metrica--static {
  cursor: default;
}

.sgp-metrica--static:hover {
  transform: none;
  box-shadow: var(--sgp-sombra-1);
}

.sgp-metrica-icone {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.95;
}

.sgp-home-section-subtitle {
  margin-top: 4px;
  color: var(--sgp-texto-secundario);
  font-size: 13px;
}

.sgp-home-insight-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sgp-home-insight-row {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--sgp-borda);
  border-left-width: 4px;
  border-radius: 20px;
  background: var(--sgp-fundo-card);
  box-shadow: var(--sgp-sombra-1);
}

.sgp-home-insight-row--info {
  border-left-color: var(--sgp-azul);
}

.sgp-home-insight-row--success {
  border-left-color: #198754;
}

.sgp-home-insight-row--warning {
  border-left-color: #d97706;
}

.sgp-home-insight-row--danger {
  border-left-color: #dc3545;
}

.sgp-home-insight-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 auto;
}

.sgp-home-insight-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 16px;
}

.sgp-home-insight-icon--info {
  background: var(--sgp-azul);
}

.sgp-home-insight-icon--success {
  background: #198754;
}

.sgp-home-insight-icon--warning {
  background: #d97706;
}

.sgp-home-insight-icon--danger {
  background: #dc3545;
}

.sgp-home-insight-label {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sgp-texto-secundario);
}

.sgp-home-insight-title {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sgp-texto);
  word-break: break-word;
}

.sgp-home-insight-meta {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sgp-texto-secundario);
}

.sgp-home-insight-stats {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  text-align: right;
}

.sgp-home-insight-stat {
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sgp-home-insight-stat strong {
  display: block;
  font-size: 16px;
  line-height: 1.1;
  color: var(--sgp-texto);
}

.sgp-home-insight-stat span {
  margin-top: 2px;
  font-size: 11px;
  color: var(--sgp-texto-secundario);
}

.sgp-home-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sgp-home-stage-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--sgp-borda);
  border-radius: 20px;
  background: var(--sgp-fundo-card);
  box-shadow: var(--sgp-sombra-1);
}

.sgp-home-stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sgp-home-stage-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--sgp-texto);
}

.sgp-home-stage-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(77, 44, 174, 0.08);
}

.sgp-home-stage-count {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--sgp-texto);
  text-align: right;
}

.sgp-home-stage-count-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--sgp-texto-secundario);
  text-align: right;
}

.sgp-home-stage-meta {
  font-size: 12px;
  color: var(--sgp-texto-secundario);
}

.sgp-home-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--sgp-fundo-2);
  overflow: hidden;
}

.sgp-home-progress .progress-bar {
  border-radius: inherit;
}

.sgp-home-empty {
  padding: 24px;
  border: 1px dashed var(--sgp-borda);
  border-radius: 20px;
  color: var(--sgp-texto-secundario);
  background: var(--sgp-fundo-pagina);
  font-size: 13.5px;
  text-align: center;
}

html[data-sgp-theme="dark"] .sgp-home-hero {
  background:
    radial-gradient(circle at top right, rgba(77, 44, 174, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(77, 44, 174, 0.16), rgba(8, 14, 26, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-sgp-theme="dark"] .sgp-home-chip {
  background: rgba(8, 14, 26, 0.9);
  color: var(--sgp-texto);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-sgp-theme="dark"] .sgp-home-action {
  background: rgba(77, 44, 174, 0.14);
  color: #c9b6f5;
  border-color: rgba(122, 92, 230, 0.28);
}

html[data-sgp-theme="dark"] .sgp-home-action:hover {
  background: rgba(77, 44, 174, 0.2);
  color: #e6dcfb;
}

html[data-sgp-theme="dark"] .sgp-home-snapshot-card {
  background: rgba(8, 14, 26, 0.94);
}

html[data-sgp-theme="dark"] .sgp-home-empty {
  background: rgba(8, 14, 26, 0.92);
}

/* Responsivo dashboard */
@media (max-width: 768px) {
  .sgp-conteudo {
    padding: 12px;
  }

  .sgp-home-container {
    padding-top: 8px;
    padding-bottom: 24px;
  }

  .sgp-home-filtros-body {
    padding: 14px 16px;
  }

  .sgp-home-lista-header {
    padding: 14px 16px;
    align-items: flex-start !important;
  }

  .sgp-home-counter {
    width: 100%;
    text-align: center;
  }

  .sgp-home-skeleton-row {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .sgp-home-skeleton-actions {
    width: 100%;
  }

  #loadMoreContainer {
    padding: 16px !important;
  }

  .sgp-home-load-more {
    width: 100%;
  }

  .sgp-home-filtro-acoes {
    justify-content: stretch;
  }

  .sgp-home-filtro-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .sgp-metrica-valor {
    font-size: 1.55rem;
  }
  .sgp-metrica-valor--menor {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
  }

  .sgp-home-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .sgp-home-hero__title {
    max-width: none;
  }

  .sgp-home-hero__text {
    font-size: 14px;
  }

  .sgp-home-hero__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sgp-home-chip {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sgp-home-hero__chips .sgp-home-chip:first-child {
    grid-column: auto;
  }

  .sgp-home-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sgp-home-action {
    justify-content: center;
    min-width: 0;
    gap: 6px;
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .sgp-home-action i {
    font-size: 11px;
  }
  .sgp-home-hero__actions .sgp-home-action:last-child {
    grid-column: 1 / -1;
    width: min(220px, 100%);
    justify-self: center;
  }

  .sgp-home-hero__snapshot {
    grid-template-columns: 1fr;
  }

  .sgp-home-insight-row {
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }

  .sgp-home-insight-main {
    gap: 10px;
  }

  .sgp-home-insight-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 13px;
  }

  .sgp-home-insight-title {
    font-size: 14px;
    line-height: 1.28;
    margin-bottom: 2px;
  }

  .sgp-home-insight-meta {
    font-size: 11.5px;
    line-height: 1.35;
  }

  .sgp-home-insight-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    justify-content: initial;
    text-align: left;
  }

  .sgp-home-insight-stat {
    min-width: 0;
    align-items: flex-start;
    padding-top: 2px;
  }

  .sgp-home-insight-stat strong {
    font-size: 15px;
  }

  .sgp-home-insight-stat span {
    font-size: 10.5px;
  }

  .sgp-home-insight-stats:has(.sgp-home-insight-stat:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(104px, 132px));
    justify-content: center;
    justify-items: center;
    column-gap: 12px;
  }

  .sgp-home-insight-stats:has(.sgp-home-insight-stat:nth-child(2):last-child) .sgp-home-insight-stat {
    align-items: center;
    text-align: center;
  }

  #sgpHomeConcentracao .sgp-home-insight-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    justify-items: center;
    padding-left: 0;
    transform: translateX(-10px);
  }

  #sgpHomeConcentracao .sgp-home-insight-stat {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  #sgpHomeConcentracao .sgp-home-insight-stat strong {
    font-size: 13px;
    line-height: 1.1;
  }

  #sgpHomeConcentracao .sgp-home-insight-stat span {
    font-size: 10px;
    line-height: 1.2;
  }

  .sgp-home-stage-grid {
    grid-template-columns: 1fr;
  }

  .sgp-home-stage-top {
    flex-direction: column;
  }

  .sgp-home-stage-count,
  .sgp-home-stage-count-sub {
    text-align: left;
  }

  /* Item vira card com borda colorida no topo */
  .sgp-projeto-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    border-top: 3px solid var(--sgp-acento, var(--sgp-azul));
    border-radius: var(--sgp-radius-2);
    margin-bottom: 4px;
  }
  /* Acento lateral some — a border-top colorida assume */
  .sgp-projeto-acento {
    display: none !important;
  }
  /* Nome pode quebrar linha em vez de truncar */
  .sgp-projeto-nome {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }
  .sgp-projeto-item .sgp-projeto-acoes {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-start !important;
  }
  .sgp-projeto-item .sgp-projeto-info {
    min-width: 100% !important;
    max-width: 100%;
  }
  /* Card header não transborda em mobile */
  .sgp-card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  /* Previne overflow horizontal das rows Bootstrap com gutters negativos */
  .sgp-conteudo {
    overflow-x: clip;
  }
  /* Evita zoom automático do iOS ao focar inputs */
  .form-control, .form-select {
    font-size: 16px;
  }
}

/* Telas muito pequenas — padding mais compacto */
@media (max-width: 575px) {
  .sgp-home-hero {
    padding: 16px;
  }

  .sgp-card-header {
    padding: 0.875rem 1rem;
  }
  .sgp-projeto-item {
    padding: 0.875rem 1rem !important;
  }
}

/* Skeleton loader */
.sgp-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: sgp-shimmer 1.5s infinite;
  border-radius: var(--sgp-radius-sm);
}

@keyframes sgp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Badge de projeto estruturante */
.badge-estruturante {
  background: var(--sgp-badge-estruturante-bg);
  color: var(--sgp-badge-estruturante-texto);
  font-size: 11px;
  padding: 3px 10px;
}

/* Botao de acao na lista */
.sgp-btn-acao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--sgp-radius-md);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  color: var(--sgp-texto-secundario);
  background: transparent;
  border: 1px solid var(--sgp-borda);
}

.sgp-btn-acao:hover {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  border-color: var(--sgp-azul);
  text-decoration: none;
}

.sgp-btn-acao i {
  font-size: 14px;
}

/* === 20. OFFCANVAS MOBILE (estilo Apple) === */
.offcanvas {
  border: none !important;
}

.offcanvas[style*="background-color: #005A92"] {
  background-color: var(--sgp-azul-escuro) !important;
}

/* === PROJECT PAGE === */

/* --- Sections do Projeto --- */
.project-section {
  margin-top: var(--sgp-space-8);
  background: var(--sgp-fundo-card);
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-3);
  box-shadow: var(--sgp-sombra-1);
  padding: 0 var(--sgp-space-6) var(--sgp-space-6);
  overflow: hidden;
}

.project-section > .w-100 {
  width: 100%;
}

/* Cabecalho das secoes */
.project-section-header {
  text-align: center;
  padding: var(--sgp-space-3) var(--sgp-space-4);
  color: #fff;
  background-color: var(--sgp-azul);
  font-size: 0.95rem;
  border-radius: var(--sgp-radius-2) var(--sgp-radius-2) 0 0;
  margin: 0 calc(-1 * var(--sgp-space-6));
  margin-bottom: var(--sgp-space-5);
  letter-spacing: 0.01em;
}

html[data-sgp-theme="dark"] .project-section-header {
  background-color: #1f4f78;
}

/* --- Toggle Buttons (Status, Projeto, Tipo, Emergencial) --- */
.project-toggle-left {
  border-radius: var(--sgp-radius-2) 0 0 var(--sgp-radius-2);
  width: 7rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.project-toggle-right {
  border-radius: 0 var(--sgp-radius-2) var(--sgp-radius-2) 0;
  width: 7rem;
  font-size: 0.85rem;
  font-weight: 500;
}

/* --- Textareas do projeto --- */
.project-textarea {
  min-height: 10rem !important;
  height: 10rem !important;
  line-height: 1.4;
  resize: vertical;
}

/* --- Botao Salvar Projeto (fixo no canto) --- */
.project-save-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  animation: projectSaveFadeIn 0.3s ease;
}

/* Evita que o botao flutuante de Salvar fique sobre o rodape de modais
   (ex.: botao "Criar" do modal de Novo Projeto), já que ambos disputam
   a mesma faixa de z-index (1050). */
body.modal-open .project-save-container {
  display: none;
}

@keyframes projectSaveFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.project-btn-save {
  background: var(--sgp-azul-escuro);
  color: #fff;
  border: none;
  padding: 0.875rem 2.5rem;
  border-radius: var(--sgp-radius-3);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 24px rgba(0, 31, 50, 0.35);
  transition: background var(--sgp-transicao), box-shadow var(--sgp-transicao), transform 0.15s ease;
  cursor: pointer;
}

.project-btn-save:hover {
  background: var(--sgp-azul-hover);
  box-shadow: 0 6px 30px rgba(0, 31, 50, 0.45);
  transform: translateY(-1px);
}

.project-btn-save:active {
  transform: translateY(0);
}

.project-btn-save:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  transform: none;
}

/* --- Badge de status Aprovado/Modificado --- */
.project-badge-aprovado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sgp-verde);
  background: var(--sgp-verde-claro);
  border: 1px solid var(--sgp-verde);
  border-radius: var(--sgp-radius-full);
}

.project-btn-modificado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sgp-dourado);
  background: var(--sgp-dourado-claro);
  border: 1px solid var(--sgp-dourado);
  border-radius: var(--sgp-radius-full);
  transition: background var(--sgp-transicao), color var(--sgp-transicao);
  cursor: pointer;
}

.project-btn-modificado:hover {
  background: var(--sgp-dourado);
  color: #fff;
}

/* --- Botoes de acao (Excluir, Relevante, etc.) --- */
.project-btn-action {
  border-radius: var(--sgp-radius-2);
  font-size: 0.85rem;
  font-weight: 500;
}

/* --- Botao de Permissao --- */
.project-btn-permissao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--sgp-texto-2);
  cursor: pointer;
  transition: color var(--sgp-transicao);
  text-decoration: none;
}

.project-btn-permissao:hover {
  color: var(--sgp-azul);
}

/* --- Offcanvas de Validacao --- */
.project-offcanvas-validacao {
  width: 460px !important;
  max-width: 90vw;
}

.project-offcanvas-validacao .offcanvas-header {
  background: var(--sgp-fundo);
  padding: var(--sgp-space-4) var(--sgp-space-5);
}

.project-offcanvas-validacao .offcanvas-body {
  padding: var(--sgp-space-5);
}

.project-validacao-content .table {
  font-size: 0.82rem;
}

.project-validacao-content .table th {
  background: var(--sgp-fundo-2);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sgp-texto-3);
  border-bottom: 2px solid var(--sgp-borda);
}

.project-validacao-content .table td {
  vertical-align: middle;
  padding: 8px 10px;
}

.project-validacao-content .btn-success,
.project-validacao-content .btn-danger,
.project-validacao-content .btn-info {
  font-size: 0.8rem;
  padding: 6px 16px;
  border-radius: var(--sgp-radius-2);
  font-weight: 500;
}

/* --- Valor Container (resumo financeiro) --- */
#valor-container {
  background: var(--sgp-fundo);
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-2);
  padding: var(--sgp-space-4);
  margin-top: var(--sgp-space-4);
}

#valor-container h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sgp-azul);
  margin-bottom: var(--sgp-space-3);
  padding-bottom: var(--sgp-space-2);
  border-bottom: 1px solid var(--sgp-borda);
}

#valor-container strong {
  font-size: 0.82rem;
  color: var(--sgp-texto-2);
}

#valor-container span {
  font-size: 0.82rem;
}

/* --- Modais --- */
.modal-xxl {
  max-width: 90%;
}

.modal-body {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

.modal-body2 {
  max-height: 95vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 2rem;
  padding-top: 1rem;
}

.accordion-body p {
  margin-bottom: 0.3rem !important;
}

/* --- Toast --- */
.toast-warning .btn {
  margin-top: 5px;
}

.toast {
  max-width: 350rem;
  width: 100% !important;
  opacity: 1 !important;
}

/* --- Select2 dentro de project --- */
.project-section .select2 {
  width: 100% !important;
}

/* --- Badges de nav dentro de project.php --- */
.project-section .nav-item {
  position: relative;
}

.project-section .badge {
  position: absolute;
  top: 0;
  right: -0.5rem;
}

/* --- Responsividade project.php --- */
@media (max-width: 980px) {
  .sup-editProject {
    justify-content: center !important;
  }

  .h1-editProject,
  .h1span-editProject {
    margin-left: 0 !important;
  }

  .button-editProject {
    margin-top: 1rem !important;
  }

  .itensClick-editProject {
    justify-content: center !important;
  }

  .txtDOO-editProject {
    flex-direction: column !important;
  }

  #valor-container {
    margin: 1.5rem 0 !important;
  }

  .cmpobt-editProject {
    justify-content: center !important;
  }

  .project-offcanvas-validacao {
    width: 100% !important;
  }

  .project-save-container {
    right: 12px;
    bottom: 12px;
  }

  .project-btn-save {
    padding: 0.75rem 1.5rem;
    font-size: 0.82rem;
  }

  .project-section {
    margin-top: var(--sgp-space-5);
    padding: 0 var(--sgp-space-3) var(--sgp-space-3);
  }

  .project-section-header {
    margin: 0 calc(-1 * var(--sgp-space-3));
    margin-bottom: var(--sgp-space-4);
  }
}

@media (max-width: 576px) {
  .project-toggle-left,
  .project-toggle-right {
    width: 5.5rem;
    font-size: 0.78rem;
  }

  .project-page-shell .sup-editProject {
    gap: 10px;
    margin-bottom: 6px;
  }

  .project-page-shell .sup-editProject > .d-flex {
    width: 100%;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }

  .project-page-shell .h1-editProject {
    font-size: 1.1rem;
    margin-left: 0 !important;
  }

  .project-page-shell .project-badge-aprovado,
  .project-page-shell .project-btn-modificado {
    font-size: 0.72rem;
    padding: 5px 10px;
  }

  .project-page-shell .button-editProject {
    width: 100%;
    margin-top: 0 !important;
  }

  .project-page-shell .button-editProject .btn {
    width: 100%;
  }

  .project-page-shell .project-btn-permissao {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    padding: 6px 8px;
    border: 1px solid var(--sgp-borda);
    border-radius: var(--sgp-radius-2);
    background: var(--sgp-fundo-card);
  }

  .project-page-shell .project-btn-permissao svg {
    width: 20px;
    height: 20px;
  }

  .project-page-shell .itensClick-editProject {
    gap: 8px;
    margin-top: 12px !important;
  }

  .project-page-shell .itensClick-editProject > .text-center {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    background: var(--sgp-fundo-card);
    border: 1px solid var(--sgp-borda);
    border-radius: var(--sgp-radius-2);
    padding: 8px;
  }

  .project-page-shell .itensClick-editProject > .text-center:only-child {
    flex: 0 0 100%;
  }

  .project-page-shell .itensClick-editProject > .text-center strong {
    font-size: 0.76rem;
    display: inline-block;
    margin-bottom: 5px;
  }

  .project-page-shell .itensClick-editProject > .text-center .d-flex {
    width: 100%;
  }

  .project-page-shell .itensClick-editProject > .text-center .btn {
    flex: 1 1 0;
    padding: 0.34rem 0.42rem;
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .project-page-shell .project-section {
    margin-top: 12px;
    padding: 0 10px 12px;
    border-radius: 12px;
  }

  .project-page-shell .project-section-header {
    margin: 0 -10px 10px;
    padding: 10px 12px;
    font-size: 0.83rem;
  }

  .project-page-shell .project-section .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 6px;
  }

  .project-page-shell .project-section .row > .col-sm {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .project-page-shell .project-section .row > .col-sm:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .project-page-shell .project-section .row > .col-sm-8,
  .project-page-shell .project-section .row > .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .project-page-shell .project-section .mb-3 {
    margin-bottom: 0.65rem !important;
  }

  .project-page-shell .project-section .form-label strong {
    font-size: 0.78rem;
    line-height: 1.28;
    display: inline-block;
  }

  .project-page-shell .project-section .pointer svg,
  .project-page-shell .project-section .icone_required svg {
    width: 14px;
    height: 14px;
  }

  .project-page-shell .project-section .form-control,
  .project-page-shell .project-section .form-select,
  .project-page-shell .project-section .select_search {
    min-height: 36px;
    font-size: 14px;
    padding: 0.38rem 0.55rem;
  }

  .project-page-shell .project-section .input-group-text {
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
  }

  .project-page-shell .project-section .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    padding: 0.35rem !important;
  }

  .project-page-shell .project-section .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0 !important;
  }

  .project-page-shell .project-section .select2-container--default .select2-selection--multiple .select2-selection__choice {
    max-width: 100%;
    margin: 0 !important;
    padding: 0.18rem 0.4rem !important;
  }

  .project-page-shell .project-section .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    font-size: 0.74rem;
    line-height: 1.25;
  }

  .project-page-shell .project-section .select2-container--default .select2-search--inline .select2-search__field {
    min-width: 100px !important;
    margin-top: 0 !important;
    font-size: 14px;
  }

  .project-page-shell .project-ods-info {
    display: block;
    margin-top: 0.65rem;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .project-page-shell .project-textarea {
    min-height: 7rem !important;
    height: auto !important;
  }

  .project-page-shell #valor-container {
    padding: 10px 12px;
    margin-top: 10px;
  }

  .project-page-shell #valor-container h3 {
    font-size: 0.82rem;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .project-page-shell #valor-container strong,
  .project-page-shell #valor-container span {
    font-size: 0.74rem;
    line-height: 1.3;
  }
}

/* --- Alertas e textos auxiliares --- */
.project-flag-alerta {
  font-size: 0.75rem;
  color: var(--sgp-erro);
}

.project-ods-info {
  font-size: 0.9rem;
  margin-top: 1rem;
  display: inline-block;
}

/* --- Form controls dentro de project --- */
.project-section .form-control,
.project-section .form-select,
.project-section .select_search {
  border-color: var(--sgp-borda-2);
  border-radius: var(--sgp-radius-2);
  font-size: 0.875rem;
  transition: border-color var(--sgp-transicao), box-shadow var(--sgp-transicao);
}

.project-section .form-control:focus,
.project-section .form-select:focus {
  border-color: var(--sgp-azul);
  box-shadow: var(--sgp-sombra-azul);
}

.project-section .form-label strong {
  font-size: 0.85rem;
  color: var(--sgp-texto-2);
}

/* --- Icone required (warning) --- */
.project-section .icone_required svg {
  width: 16px;
  height: 16px;
}

/* --- Select2 global dentro do form --- */
.select2 {
  width: 100% !important;
}

.project-section .select2-container--default .select2-selection--single {
  border-color: var(--sgp-borda-2);
  border-radius: var(--sgp-radius-2);
  height: 38px;
  display: flex;
  align-items: center;
}

.project-section .select2-container--default .select2-selection--single:focus-within {
  border-color: var(--sgp-azul);
  box-shadow: var(--sgp-sombra-azul);
}

/* --- Alerta de projeto desatualizado --- */
.alert-modificacao {
  border-radius: var(--sgp-radius-2);
  font-size: 0.85rem;
}

.alert-modificacao .alert-strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-icon-required-float {
  right: 0;
  top: 8%;
}

/* === VALIDAR ALTERACOES === */
.validar-info-alteracao {
  background: var(--sgp-fundo-2, #f8f9fa);
  border: 1px solid var(--sgp-borda, #dee2e6);
  border-radius: var(--sgp-radius-2, 6px);
  padding: 10px 14px;
}

.validar-diferencas-wrapper {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--sgp-borda, #dee2e6);
  border-radius: var(--sgp-radius-2, 6px);
}

.validar-tabela {
  font-size: 0.82rem;
  margin-bottom: 0;
}

.validar-tabela thead th {
  position: sticky;
  top: 0;
  background: var(--sgp-fundo-2, #f1f3f5);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sgp-texto-3, #6c757d);
  border-bottom: 2px solid var(--sgp-borda, #dee2e6);
  z-index: 1;
}

.validar-tabela td {
  vertical-align: middle;
  padding: 8px 10px;
  word-break: break-word;
}

.validar-valor-antes {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.07);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}

.validar-valor-depois {
  color: #198754;
  background: rgba(25, 135, 84, 0.07);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}

html[data-sgp-theme="dark"] .project-offcanvas-validacao,
html[data-sgp-theme="dark"] .project-offcanvas-validacao .offcanvas-header,
html[data-sgp-theme="dark"] .project-offcanvas-validacao .offcanvas-body,
html[data-sgp-theme="dark"] #conteudo-offcanvas,
html[data-sgp-theme="dark"] .project-validacao-content {
  background: var(--sgp-fundo-card) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .project-offcanvas-validacao {
  border-right: 1px solid var(--sgp-borda);
}

html[data-sgp-theme="dark"] .project-offcanvas-validacao .offcanvas-header {
  border-bottom: 1px solid var(--sgp-borda);
}

html[data-sgp-theme="dark"] .project-offcanvas-validacao .offcanvas-title,
html[data-sgp-theme="dark"] .project-validacao-content strong,
html[data-sgp-theme="dark"] .project-validacao-content .fw-semibold,
html[data-sgp-theme="dark"] .project-validacao-content .text-muted,
html[data-sgp-theme="dark"] .project-validacao-content .small,
html[data-sgp-theme="dark"] .project-validacao-content span,
html[data-sgp-theme="dark"] .project-validacao-content td,
html[data-sgp-theme="dark"] .project-validacao-content th {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .project-validacao-content .validar-info-alteracao,
html[data-sgp-theme="dark"] .project-validacao-content .validar-diferencas-wrapper {
  background: var(--sgp-fundo-2) !important;
  border-color: var(--sgp-borda) !important;
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .project-validacao-content .validar-tabela,
html[data-sgp-theme="dark"] .project-validacao-content .validar-tabela tbody tr,
html[data-sgp-theme="dark"] .project-validacao-content .validar-tabela tbody td {
  background: transparent !important;
  color: var(--sgp-texto) !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .project-validacao-content .validar-tabela thead th {
  background: linear-gradient(180deg, #162235 0%, #1b2a40 100%) !important;
  color: #f4f8ff !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .project-validacao-content hr {
  border-color: var(--sgp-borda);
  opacity: 1;
}

html[data-sgp-theme="dark"] .project-offcanvas-validacao .btn-close {
  filter: invert(1);
}

html[data-sgp-theme="dark"] .project-page-shell,
html[data-sgp-theme="dark"] .project-page-shell label,
html[data-sgp-theme="dark"] .project-page-shell .form-check-label,
html[data-sgp-theme="dark"] .project-page-shell .project-ods-info,
html[data-sgp-theme="dark"] .project-page-shell .project-ods-info a,
html[data-sgp-theme="dark"] .project-page-shell .text-muted {
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .form-control,
html[data-sgp-theme="dark"] .project-page-shell .form-select,
html[data-sgp-theme="dark"] .project-page-shell .select_search,
html[data-sgp-theme="dark"] .project-page-shell .input-group-text {
  background: var(--sgp-fundo-card);
  border-color: var(--sgp-borda);
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .form-control::placeholder,
html[data-sgp-theme="dark"] .project-page-shell .form-select::placeholder,
html[data-sgp-theme="dark"] .project-page-shell textarea::placeholder {
  color: var(--sgp-texto-3);
}

html[data-sgp-theme="dark"] .project-page-shell select,
html[data-sgp-theme="dark"] .project-page-shell select option,
html[data-sgp-theme="dark"] .project-page-shell select optgroup {
  background: var(--sgp-fundo-card);
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .project-page-shell .form-check-input {
  background-color: var(--sgp-fundo-card);
  border-color: var(--sgp-borda-2);
}

html[data-sgp-theme="dark"] .project-page-shell .form-check-input:checked {
  background-color: var(--sgp-azul);
  border-color: var(--sgp-azul);
}

html[data-sgp-theme="dark"] .project-page-shell .table,
html[data-sgp-theme="dark"] .project-page-shell .table > :not(caption) > * > * {
  color: var(--sgp-texto);
  border-color: var(--sgp-borda);
}

html[data-sgp-theme="dark"] .project-page-shell .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(126, 148, 179, 0.04);
  --bs-table-hover-bg: rgba(126, 148, 179, 0.08);
  --bs-table-color: var(--sgp-texto);
  --bs-table-border-color: var(--sgp-borda);
}

html[data-sgp-theme="dark"] .project-page-shell .table thead th,
html[data-sgp-theme="dark"] .project-page-shell .table-light,
html[data-sgp-theme="dark"] .project-page-shell .table-light > :not(caption) > * > * {
  background: linear-gradient(180deg, #162235 0%, #1b2a40 100%) !important;
  color: #f4f8ff !important;
  border-color: var(--sgp-borda) !important;
}

html[data-sgp-theme="dark"] .project-page-shell .table tbody tr {
  background: transparent;
}

html[data-sgp-theme="dark"] .project-page-shell .table a {
  color: var(--sgp-azul);
}

html[data-sgp-theme="dark"] .project-page-shell .modificadores a,
html[data-sgp-theme="dark"] .project-page-shell .modificadores span,
html[data-sgp-theme="dark"] .project-page-shell .td-sei-exclusao a,
html[data-sgp-theme="dark"] .project-page-shell .editar-sei,
html[data-sgp-theme="dark"] .project-page-shell #dados-financeiros a,
html[data-sgp-theme="dark"] .project-page-shell #dados-sei a,
html[data-sgp-theme="dark"] .project-page-shell #dados-cep a,
html[data-sgp-theme="dark"] .project-page-shell #dados-localizacao a {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .project-page-shell .modificadores .icon-sax,
html[data-sgp-theme="dark"] .project-page-shell .td-sei-exclusao .icon-sax,
html[data-sgp-theme="dark"] .project-page-shell #dados-financeiros .icon-sax,
html[data-sgp-theme="dark"] .project-page-shell #dados-sei .icon-sax,
html[data-sgp-theme="dark"] .project-page-shell #dados-cep .icon-sax,
html[data-sgp-theme="dark"] .project-page-shell #dados-localizacao .icon-sax {
  filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(327%) hue-rotate(180deg) brightness(103%) contrast(101%);
  opacity: 0.95;
}

html[data-sgp-theme="dark"] .project-page-shell .table .badge {
  position: static;
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--single,
html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--multiple {
  background: var(--sgp-fundo-card);
  border-color: var(--sgp-borda);
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered,
html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-search--inline .select2-search__field {
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--sgp-texto-3) !important;
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--sgp-texto-3) transparent transparent transparent;
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(43, 136, 198, 0.16);
  border: 1px solid var(--sgp-borda);
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--sgp-texto-2);
}

html[data-sgp-theme="dark"] #mpFiltrosCard .form-control,
html[data-sgp-theme="dark"] #mpFiltrosCard .form-select,
html[data-sgp-theme="dark"] #mpFiltrosCard .input-group-text {
  background: var(--sgp-fundo-card);
  border-color: var(--sgp-borda);
  color: var(--sgp-texto) !important;
}

html[data-sgp-theme="dark"] #mpBusca {
  color: var(--sgp-texto) !important;
  caret-color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] #mpFiltrosCard .form-control:focus,
html[data-sgp-theme="dark"] #mpFiltrosCard .form-control:active,
html[data-sgp-theme="dark"] #mpFiltrosCard .form-control:focus-visible {
  color: var(--sgp-texto) !important;
  background: var(--sgp-fundo-card) !important;
  border-color: var(--sgp-azul) !important;
  box-shadow: 0 0 0 0.2rem rgba(77, 44, 174, 0.15);
  caret-color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] #mpBusca:-webkit-autofill,
html[data-sgp-theme="dark"] #mpBusca:-webkit-autofill:hover,
html[data-sgp-theme="dark"] #mpBusca:-webkit-autofill:focus,
html[data-sgp-theme="dark"] #mpBusca:-webkit-autofill:active {
  -webkit-text-fill-color: var(--sgp-texto) !important;
  box-shadow: 0 0 0 1000px var(--sgp-fundo-card) inset !important;
  caret-color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] #mpBusca::placeholder {
  color: var(--sgp-texto-3);
}

html[data-sgp-theme="dark"] #mpFiltrosCard .input-group-text i {
  color: var(--sgp-texto-secundario) !important;
}

html[data-sgp-theme="dark"] #mpBuscaClear:hover {
  background: var(--sgp-fundo-pagina) !important;
}

html[data-sgp-theme="dark"] .project-page-shell .select2-dropdown {
  background: var(--sgp-fundo-card);
  border-color: var(--sgp-borda);
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .select2-results__option {
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(43, 136, 198, 0.18);
  color: var(--sgp-texto);
}

html[data-sgp-theme="dark"] .project-page-shell .loader .inner_loader {
  background: var(--sgp-azul);
}

.validar-acoes .btn {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--sgp-radius-2, 6px);
}

.validar-acoes .btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.validar-acoes .btn-success {
  background: #198754;
  border-color: #198754;
}

.validar-acoes .btn-success:hover:not(:disabled) {
  background: #146c43;
  border-color: #146c43;
}

.validar-acoes .btn-danger {
  background: #dc3545;
  border-color: #dc3545;
}

.validar-acoes .btn-danger:hover:not(:disabled) {
  background: #bb2d3b;
  border-color: #bb2d3b;
}
/* === END VALIDAR ALTERACOES === */

/* === END PROJECT PAGE === */

/* === MEUS PROJETOS === */

/* Tabs customizadas */
.mp-tabs {
  display: flex;
  gap: 8px;
  border: none;
  padding: 0;
}

.mp-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sgp-texto-secundario);
  background: var(--sgp-fundo-card);
  border: 1px solid var(--sgp-borda);
  border-radius: var(--sgp-radius-full);
  cursor: pointer;
  transition: all var(--sgp-transicao);
}

.mp-tab-btn:hover {
  color: var(--sgp-azul);
  border-color: var(--sgp-azul);
  background: var(--sgp-azul-claro);
}

.mp-tab-btn.active {
  color: #fff;
  background: var(--sgp-azul);
  border-color: var(--sgp-azul);
  font-weight: 600;
  box-shadow: var(--sgp-sombra-1);
}

.mp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--sgp-radius-full);
  background: rgba(255,255,255,0.25);
  color: inherit;
  line-height: 1;
}

.mp-tab-btn:not(.active) .mp-tab-badge {
  background: var(--sgp-fundo-2);
  color: var(--sgp-texto-secundario);
}

.mp-tab-btn.active .mp-tab-badge {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

/* Estado vazio */
.mp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.mp-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sgp-fundo-2);
  margin-bottom: 20px;
  color: var(--sgp-texto-4);
  font-size: 32px;
}

.mp-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--sgp-texto);
  margin: 0 0 8px 0;
}

.mp-empty-state p {
  font-size: 14px;
  color: var(--sgp-texto-secundario);
  max-width: 400px;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.mp-empty-btn {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  border: 1px solid var(--sgp-azul);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: var(--sgp-radius-full);
  transition: all var(--sgp-transicao);
}

.mp-empty-btn:hover {
  background: var(--sgp-azul);
  color: #fff;
}

/* Botao de acao na lista */
.nodus-btn-acao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--sgp-radius-md);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  color: var(--sgp-texto-secundario);
  background: transparent;
  border: 1px solid var(--sgp-borda);
}

.nodus-btn-acao:hover {
  background: var(--sgp-azul-claro);
  color: var(--sgp-azul);
  border-color: var(--sgp-azul);
  text-decoration: none;
}

.nodus-btn-acao i {
  font-size: 14px;
}

/* === 19. PROJETO ITEM / MEUS PROJETOS === */
.nodus-projeto-item {
  border-bottom: 1px solid var(--nodus-borda);
  transition: background .15s ease;
  cursor: pointer;
}

.nodus-projeto-item:hover {
  background: var(--nodus-fundo-pagina) !important;
}

.nodus-projeto-item:last-child {
  border-bottom: none;
}

.nodus-projeto-acento {
  width: 4px;
  height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
}

.nodus-projeto-info {
  min-width: 0;
}

.nodus-projeto-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--nodus-texto);
}

.nodus-projeto-nome a {
  min-width: 0;
  color: var(--nodus-texto);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nodus-projeto-nome a:hover {
  text-decoration: underline;
}

.nodus-projeto-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.nodus-projeto-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.nodus-projeto-badge {
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.25;
  padding: 3px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nodus-projeto-badge-estruturante {
  background: #fff3cd;
  color: #856404;
}

.nodus-projeto-compass_ti {
  color: var(--nodus-azul);
  font-size: 14px;
}

.nodus-projeto-titulo {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--nodus-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nodus-projeto-link {
  color: var(--nodus-texto);
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.nodus-projeto-link:hover {
  color: var(--nodus-texto);
  text-decoration: underline;
}

.nodus-projeto-meta {
  font-size: 12px;
  color: var(--nodus-texto-secundario);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Badge "Em desenvolvimento" */
.mp-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sgp-dourado);
  background: var(--sgp-dourado-claro);
  border: 1px solid var(--sgp-dourado);
  border-radius: var(--sgp-radius-full);
}

/* Responsivo */
@media (max-width: 768px) {
  .mp-tabs {
    flex-wrap: wrap;
  }
  .mp-tab-btn {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* === END MEUS PROJETOS === */

/* === CONFIGURACOES / PRIVACIDADE === */
.cfg-page-shell {
  max-width: 1200px;
}

.cfg-breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
}

.cfg-breadcrumb .breadcrumb-item,
.cfg-breadcrumb .breadcrumb-item a {
  font-size: 13px;
  color: var(--sgp-texto-secundario);
  text-decoration: none;
}

.cfg-breadcrumb .breadcrumb-item.active {
  color: var(--sgp-texto);
  font-weight: 600;
}

.cfg-page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cfg-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--sgp-texto);
  font-size: 28px;
  font-weight: 700;
}

.cfg-page-title i {
  color: var(--sgp-azul);
}

.cfg-page-subtitle {
  margin: 0;
  color: var(--sgp-texto-secundario);
  font-size: 14px;
  line-height: 1.7;
}

.cfg-status-alert {
  border: 1px solid var(--sgp-borda);
  border-radius: 18px;
  background: var(--sgp-fundo-card);
  box-shadow: var(--sgp-sombra-1);
}

.cfg-status-alert i {
  font-size: 20px;
  margin-top: 2px;
}

.cfg-status-alert--info {
  border-color: #b6d4fe;
  background: #eef6ff;
  color: #084298;
}

.cfg-status-alert--warning {
  border-color: #ffe69c;
  background: #fff8e1;
  color: #997404;
}

.cfg-status-alert--danger {
  border-color: #f1aeb5;
  background: #fff1f3;
  color: #842029;
}

.cfg-card-seguranca,
.cfg-privacidade-secao,
.cfg-faq-section {
  border: 1px solid var(--sgp-borda);
  border-radius: 22px;
  background: var(--sgp-fundo-card);
  box-shadow: var(--sgp-sombra-1);
}

.cfg-card-seguranca .card-body {
  padding: 22px;
}

.cfg-card-icone,
.cfg-privacidade-icone {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  flex-shrink: 0;
  font-size: 20px;
}

.cfg-card-icone-azul {
  background: #eaf3ff;
  color: #0b63ce;
}

.cfg-card-icone-verde {
  background: #e9f8ef;
  color: #1f8b4c;
}

.cfg-card-icone-dourado {
  background: #fff6df;
  color: #a66b00;
}

.cfg-card-icone-cinza {
  background: #f2f4f7;
  color: #475467;
}

.cfg-card-titulo,
.cfg-privacidade-titulo,
.cfg-faq-section-title {
  color: var(--sgp-texto);
  font-weight: 700;
}

.cfg-card-valor {
  font-size: 22px;
  line-height: 1.25;
  color: var(--sgp-texto);
  font-weight: 700;
}

.cfg-link-acao {
  color: var(--sgp-azul);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.cfg-link-acao:hover {
  color: var(--sgp-azul-escuro);
  text-decoration: underline;
}

.cfg-badge-embreve {
  background: #fff3cd;
  color: #8a6d03;
  border: 1px solid #ffe69c;
}

.cfg-privacidade-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cfg-privacidade-secao {
  padding: 24px;
}

.cfg-privacidade-icone {
  background: #edf4ff;
  color: var(--sgp-azul);
}

.cfg-privacidade-texto,
.cfg-accordion-body {
  color: var(--sgp-texto-secundario);
  font-size: 14px;
  line-height: 1.8;
}

.cfg-privacidade-texto p:last-child,
.cfg-accordion-body p:last-child {
  margin-bottom: 0;
}

.cfg-privacidade-texto ul,
.cfg-privacidade-texto ol,
.cfg-accordion-body ul,
.cfg-accordion-body ol {
  margin-bottom: 0;
  padding-left: 20px;
}

.cfg-dado-resumo {
  height: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--sgp-fundo-pagina);
  border: 1px solid var(--sgp-borda);
}

.cfg-dado-label {
  display: block;
  margin-bottom: 6px;
  color: var(--sgp-texto-secundario);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cfg-action-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cfg-contato-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--sgp-borda);
  background: var(--sgp-fundo-pagina);
  color: var(--sgp-texto);
}

.cfg-contato-card i {
  color: var(--sgp-azul);
  font-size: 20px;
  margin-top: 2px;
}

.cfg-contato-card--link {
  text-decoration: none;
  transition: transform var(--sgp-transicao), box-shadow var(--sgp-transicao), border-color var(--sgp-transicao);
}

.cfg-contato-card--link:hover {
  transform: translateY(-1px);
  border-color: var(--sgp-azul);
  box-shadow: var(--sgp-sombra-1);
}

.cfg-help-card {
  display: flex;
  gap: 14px;
  padding: 22px;
  height: 100%;
  border: 1px solid var(--sgp-borda);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: var(--sgp-sombra-1);
}

.cfg-help-card-icon {
  margin-top: 2px;
}

.cfg-manual-grid,
.cfg-tutorial-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cfg-manual-card,
.cfg-tutorial-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--sgp-borda);
  background: var(--sgp-fundo-pagina);
  color: var(--sgp-texto);
  text-decoration: none;
  transition: transform var(--sgp-transicao), box-shadow var(--sgp-transicao), border-color var(--sgp-transicao);
}

.cfg-manual-card:hover,
.cfg-tutorial-card:hover,
.cfg-tutorial-card.is-active {
  transform: translateY(-1px);
  border-color: var(--sgp-azul);
  box-shadow: var(--sgp-sombra-1);
  color: var(--sgp-texto);
}

.cfg-manual-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: #edf4ff;
  color: var(--sgp-azul);
  font-size: 20px;
}

.cfg-manual-card-body,
.cfg-tutorial-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.cfg-manual-card-body span,
.cfg-tutorial-card span {
  color: var(--sgp-texto-secundario);
  font-size: 14px;
  line-height: 1.6;
}

.cfg-tutorial-card small {
  color: var(--sgp-texto-secundario);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.cfg-tutorial-card--static:hover {
  transform: none;
  border-color: var(--sgp-borda);
  box-shadow: none;
}

.cfg-video-player-wrap {
  padding: 18px;
  border: 1px solid var(--sgp-borda);
  border-radius: 18px;
  background: #f8fbff;
}

.cfg-video-title {
  color: var(--sgp-texto);
  font-weight: 700;
}

.cfg-video-player {
  width: 100%;
  border-radius: 14px;
  background: #0f172a;
}

.cfg-help-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed #b6c6dd;
  background: #f8fbff;
  color: var(--sgp-texto);
}

.cfg-help-empty i {
  color: var(--sgp-azul);
  font-size: 20px;
}

.cfg-faq-section {
  padding: 24px;
}

.cfg-faq-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.cfg-accordion {
  --bs-accordion-border-color: var(--sgp-borda);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: #f7fbff;
  --bs-accordion-active-color: var(--sgp-texto);
  --bs-accordion-btn-focus-box-shadow: none;
}

.cfg-accordion-item {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--sgp-borda);
  margin-bottom: 12px;
}

.cfg-accordion-item:last-child {
  margin-bottom: 0;
}

.cfg-accordion-btn {
  font-weight: 600;
  color: var(--sgp-texto);
}

@media (max-width: 768px) {
  .cfg-page-title {
    font-size: 24px;
  }

  .cfg-card-valor {
    font-size: 20px;
  }

  .cfg-privacidade-secao,
  .cfg-faq-section {
    padding: 18px;
  }

  .cfg-help-card,
  .cfg-manual-card,
  .cfg-tutorial-card,
  .cfg-contato-card {
    padding: 16px;
  }
}

/* === END CONFIGURACOES / PRIVACIDADE === */