/* ============================================================
   VARIÁVEIS DE TEMA

   Esse bloco é a identidade do produto (SindicoON: marinho +
   dourado, luxo discreto, o mesmo visual da página do portfólio).
   Cada empresa cliente sobrescreve as quatro cores de
   marca na hora: o aplicarMarca() escreve no <html>, e os temas
   abaixo escrevem no <body>, que vence quando é escolhido.

   Não põe cor fixa em componente novo: usa as variáveis, senão
   ele quebra nos temas escuros e ignora a marca do cliente.
   ============================================================ */
:root{
  /* ── TEMA 1: CLARO (padrão do produto) ── */
  /* Dourado só em detalhe e ação; o resto é marinho e neutro quente. */
  --cor-primaria:#1E3A5F;--cor-secundaria:#2F5A85;--cor-acento:#C8A97E;--cor-acento-escuro:#8A6A3E;
  --cor-sucesso:#2F7D5B;--cor-perigo:#B42318;
  --cor-aviso:#C98A2B;--cor-aviso-texto:#8A5A12;
  --cor-bg:#FAFAF8;--cor-card:#FFFFFF;--cor-topbar:#0F172A;--cor-topbar-texto:rgba(250,250,248,.92);
  /* A lateral é a primária da empresa escurecida, como a lateral do
     portfólio. O aplicarMarca() escreve a primária no <html> e essa conta
     acompanha. Os temas escrevem a própria --cor-sidebar no <body>. */
  --cor-sidebar:color-mix(in srgb,var(--cor-primaria) 38%,#0B1120);
  --cor-sidebar-texto:#FAFAF8;--cor-sidebar-muted:rgba(226,232,240,.5);
  --cor-texto:#0F172A;--cor-texto-muted:#64748B;
  --cor-border:#E8E6E1;--cor-table-header:#F6F5F2;
  --cor-input-bg:#FFFFFF;--cor-input-texto:#0F172A;
  /* Cor do texto sobre o acento. O `ajustarTintaDoHero()` recalcula pela
     luminância a cada marca/tema, isso aqui é só o valor inicial. */
  --cor-acento-texto:#0F172A;
  --cor-sidebar-w:256px;
  /* A marca "crua", que tema nenhum sobrescreve. O tema escuro clareia a
     --cor-primaria pra texto ficar legível; a vitrine do login precisa
     da cor da empresa como ela é (escura). O aplicarMarca() reescreve. */
  --marca-primaria:#1E3A5F;--marca-secundaria:#2F5A85;
  --radius-lg:18px;--radius-md:12px;--radius-sm:10px;
  /* Títulos e números em Manrope; o corpo continua em Inter. */
  --fonte-titulo:'Manrope','Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* ── ESCALAS ──────────────────────────────────────────────
     Espaçamento e tipografia não mudam com o tema, então ficam só
     aqui. Antes tinha nove tamanhos de fonte sem critério
     (.74/.78/.82/.84/.85/.86/.88/.9/.92rem). Com cinco degraus a
     hierarquia fica clara e a densidade se ajusta num lugar só. */
  --esp-1:4px;  --esp-2:8px;  --esp-3:12px;
  --esp-4:16px; --esp-5:22px; --esp-6:32px;
  --fs-xs:.72rem;  /* rótulos, metadados      */
  --fs-sm:.82rem;  /* apoio, legendas         */
  --fs-md:.9rem;   /* corpo                   */
  --fs-lg:1.05rem; /* títulos de bloco        */
  --fs-xl:1.6rem;  /* título de página        */
  /* Pesos contidos: 800 pesa demais, 600/700 já dão destaque. */
  --peso-forte:600; --peso-max:700;
  --traco-rotulo:.5px;
  /* Duas camadas: contato (curta, quase invisível) e ambiente (larga
     e diluída). Uma sombra só, escura e curta, parece borda dura. */
  --sombra-card:0 1px 2px rgba(15,23,42,.04),0 8px 28px -14px rgba(15,23,42,.10);
  --sombra-card-hover:0 2px 4px rgba(15,23,42,.05),0 20px 44px -20px rgba(15,23,42,.18);
}
/* ── TEMA 2: ESCURO (par noturno do padrão: marinho profundo + dourado) ── */
body.tema-alt-noite{
  --cor-primaria:#A9C1E0;--cor-secundaria:#7F9CC4;--cor-acento:#C8A97E;--cor-acento-escuro:#DCC39C;
  --cor-sucesso:#4FB286;--cor-perigo:#E26D5F;
  --cor-aviso:#E0A84E;--cor-aviso-texto:#E0A84E;
  --cor-bg:#0B1120;--cor-card:#111A2E;--cor-topbar:#070C18;--cor-topbar-texto:rgba(231,229,224,.92);
  --cor-sidebar:#070C18;--cor-sidebar-texto:#E7E5E0;--cor-sidebar-muted:rgba(203,213,225,.45);
  --cor-texto:#E7E5E0;--cor-texto-muted:#8B97AB;
  --cor-border:#1F2A40;--cor-table-header:#152036;
  --cor-input-bg:#152036;--cor-input-texto:#E7E5E0;
  --sombra-card:0 1px 2px rgba(0,0,0,.34),0 12px 30px -14px rgba(0,0,0,.55);
  --sombra-card-hover:0 2px 5px rgba(0,0,0,.4),0 24px 48px -18px rgba(0,0,0,.65);
}
/* ── TEMA 3: ÂMBAR CLARO ── */
body.tema-alt-laranja{
  --cor-primaria:#bf5500;--cor-secundaria:#e07830;--cor-acento:#1a3c5e;--cor-acento-escuro:#0d2238;
  --cor-sucesso:#198754;--cor-perigo:#dc3545;
  --cor-aviso:#d98324;--cor-aviso-texto:#9c5a05;
  --cor-bg:#fff8f0;--cor-card:#ffffff;--cor-topbar:#6b2e00;--cor-topbar-texto:rgba(255,240,220,.95);
  --cor-sidebar:#8a3d00;--cor-sidebar-texto:#fff;--cor-sidebar-muted:rgba(255,255,255,.55);
  --cor-texto:#2d1800;--cor-texto-muted:#8a6040;
  --cor-border:#f0d8b8;--cor-table-header:#fff0e0;
  --cor-input-bg:#ffffff;--cor-input-texto:#2d1800;
  --sombra-card:0 1px 2px rgba(90,40,0,.08),0 6px 18px -10px rgba(90,40,0,.16);
  --sombra-card-hover:0 2px 6px rgba(90,40,0,.1),0 14px 28px -14px rgba(90,40,0,.24);
}
/* ── TEMA 4: ÂMBAR ESCURO ── */
body.tema-alt-laranja-noite{
  --cor-primaria:#f07030;--cor-secundaria:#e08020;--cor-acento:#4a8fc0;--cor-acento-escuro:#2e6da4;
  --cor-sucesso:#34c77b;--cor-perigo:#e2596b;
  --cor-aviso:#f5b45c;--cor-aviso-texto:#f5b45c;
  --cor-bg:#150b00;--cor-card:#241400;--cor-topbar:#100800;--cor-topbar-texto:rgba(255,200,140,.9);
  --cor-sidebar:#1e0e00;--cor-sidebar-texto:#ffd8b0;--cor-sidebar-muted:rgba(255,200,140,.4);
  --cor-texto:#ffd8b0;--cor-texto-muted:#a07850;
  --cor-border:#3a2000;--cor-table-header:#2a1800;
  --cor-input-bg:#2a1800;--cor-input-texto:#ffd8b0;
  --sombra-card:0 1px 2px rgba(0,0,0,.34),0 12px 30px -14px rgba(0,0,0,.55);
  --sombra-card-hover:0 2px 5px rgba(0,0,0,.4),0 24px 48px -18px rgba(0,0,0,.65);
}
/* ── TEMA 5: PLATINA (moderno claro) ── */
body.tema-platina{
  --cor-primaria:#334155;--cor-secundaria:#475569;--cor-acento:#0ea5e9;--cor-acento-escuro:#0284c7;
  --cor-sucesso:#198754;--cor-perigo:#dc3545;
  --cor-aviso:#e0a33a;--cor-aviso-texto:#8f6410;
  --cor-bg:#f0f4f8;--cor-card:#ffffff;--cor-topbar:#1e293b;--cor-topbar-texto:rgba(226,232,240,.95);
  --cor-sidebar:#1e293b;--cor-sidebar-texto:#e2e8f0;--cor-sidebar-muted:rgba(200,210,230,.45);
  --cor-texto:#1e293b;--cor-texto-muted:#64748b;
  --cor-border:#e2e8f0;--cor-table-header:#f1f5f9;
  --cor-input-bg:#ffffff;--cor-input-texto:#1e293b;
  --sombra-card:0 1px 2px rgba(15,23,42,.06),0 6px 18px -10px rgba(15,23,42,.14);
  --sombra-card-hover:0 2px 6px rgba(15,23,42,.08),0 14px 28px -14px rgba(15,23,42,.22);
}
/* ── TEMA 6: MIDNIGHT (moderno escuro) ── */
body.tema-midnight{
  --cor-primaria:#818cf8;--cor-secundaria:#6366f1;--cor-acento:#f59e0b;--cor-acento-escuro:#d97706;
  --cor-sucesso:#34c77b;--cor-perigo:#e2596b;
  --cor-aviso:#fbbf24;--cor-aviso-texto:#fbbf24;
  --cor-bg:#0f0f1a;--cor-card:#181825;--cor-topbar:#0b0b16;--cor-topbar-texto:rgba(199,210,254,.92);
  --cor-sidebar:#111120;--cor-sidebar-texto:#c7d2fe;--cor-sidebar-muted:rgba(165,180,252,.4);
  --cor-texto:#e2e8f0;--cor-texto-muted:#64748b;
  --cor-border:#252540;--cor-table-header:#1e1e35;
  --cor-input-bg:#1e1e35;--cor-input-texto:#e2e8f0;
  --sombra-card:0 1px 2px rgba(0,0,0,.34),0 12px 30px -14px rgba(0,0,0,.55);
  --sombra-card-hover:0 2px 5px rgba(0,0,0,.4),0 24px 48px -18px rgba(0,0,0,.65);
}
/* ── TEMA 7: NEON (cyber escuro; já liga o brilho neon) ── */
body.tema-neon{
  --cor-primaria:#38bdf8;--cor-secundaria:#22d3ee;--cor-acento:#ff7a1a;--cor-acento-escuro:#ff5e00;
  --cor-sucesso:#22e39a;--cor-perigo:#ff3b6b;
  --cor-aviso:#ffc14d;--cor-aviso-texto:#ffc14d;
  --cor-bg:#070711;--cor-card:#0f1020;--cor-topbar:#05050d;--cor-topbar-texto:rgba(216,246,255,.95);
  --cor-sidebar:#0a0a18;--cor-sidebar-texto:#cde9ff;--cor-sidebar-muted:rgba(150,200,240,.5);
  --cor-texto:#e6f6ff;--cor-texto-muted:#7fa9c4;
  --cor-border:#1c2740;--cor-table-header:#0e1424;
  --cor-input-bg:#0e1424;--cor-input-texto:#e6f6ff;
  --sombra-card:0 1px 2px rgba(0,0,0,.5),0 8px 22px -10px rgba(0,0,0,.6);
  --sombra-card-hover:0 2px 8px rgba(0,0,0,.5),0 16px 32px -14px rgba(0,0,0,.7);
}

body.neon-on #topbar{box-shadow:0 3px 0 -1px rgba(0,0,0,.15),0 0 24px -4px color-mix(in srgb,var(--cor-acento) 55%,transparent)}
body.neon-on .btn-primary{box-shadow:0 0 16px -2px color-mix(in srgb,var(--cor-primaria) 70%,transparent)}
body.neon-on .btn-acento{box-shadow:0 0 16px -2px color-mix(in srgb,var(--cor-acento) 70%,transparent)}
body.neon-on .stat-card{box-shadow:var(--sombra-card),0 0 20px -8px color-mix(in srgb,var(--cor-acento) 50%,transparent)}
body.neon-on #sidebar .nav-link:hover{box-shadow:0 0 18px -4px color-mix(in srgb,var(--cor-acento) 65%,transparent)}
body.neon-on #mobile-nav{box-shadow:0 -2px 20px -6px color-mix(in srgb,var(--cor-acento) 55%,transparent)}
/* ============================================================ */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--cor-bg);
  color:var(--cor-texto);margin:0;overflow-x:hidden;transition:background .3s,color .3s;
  /* Alturas de x parelhas e vírgulas no lugar: é isso que deixa o texto
     com cara de ajustado, e não só renderizado. */
  font-feature-settings:'cv05' 1,'cv11' 1;letter-spacing:-.006em}
/* Título grande com tracking aberto parece cartaz. Fica mais fácil de
   ler quando a letra fecha conforme o corpo cresce. */
h1,h2,h3,h4,h5,h6{text-wrap:balance;letter-spacing:-.021em}
/* Número em coluna tem que alinhar. Sem isso o "1" ocupa menos que o
   "8" e a lista de valores fica torta. */
.valor,.stat-card .valor,.rel-num,.hero-pilula strong,td,th{font-variant-numeric:tabular-nums}
::selection{background:var(--cor-acento);color:var(--cor-acento-texto)}
*:focus-visible{outline:2px solid var(--cor-acento);outline-offset:2px}
/* Scrollbar fino com a cor da marca */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--cor-border);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--cor-secundaria)}