/* ──────────────────────────────────────────────────────────────────
 * EducaSaude · tokens de cor, tipografia, raio e sombra
 *
 * Tema escuro via `<html data-theme="dark">` (js/shared/tema.js).
 *
 * Prefixo `--es-*` para não colidir com Bootstrap (`--bs-*`) nem Tabler
 * (`--tblr-*`). O mapeamento para as variáveis do Bootstrap fica mais abaixo.
 * ────────────────────────────────────────────────────────────────── */

:root,
[data-theme="light"] {
  /* ─── Surfaces ─── */
  --es-bg:            #F4F6FB;
  --es-surface:       #FFFFFF;
  --es-panel:         #FAFBFE;
  --es-input-bg:      #FFFFFF;

  /* ─── Text ─── */
  --es-ink:           #0B1733;
  --es-ink-soft:      #3B4863;
  --es-muted:         #6B7794;

  /* ─── Borders ─── */
  --es-line:          #E1E6F0;
  --es-line-soft:     #EDF0F7;

  /* ─── Brand ─── */
  --es-primary:       #1E3A8A;
  --es-primary-deep:  #0F1F5C;
  --es-primary-light: #EEF2FE;
  --es-primary-ink:   #FFFFFF;

  /* ─── Accent ─── */
  --es-accent:        #0EA5B7;
  --es-accent-soft:   #E0F4F6;

  /* ─── Status ─── */
  --es-success:       #0F8C5E;
  --es-success-soft:  #E5F4ED;
  --es-warn:          #C57B0A;
  --es-warn-soft:     #FBF1DA;
  --es-danger:        #C03A2F;
  --es-danger-soft:   #FCE8E5;

  /* ─── Gráficos (ApexCharts) ───
     O ApexCharts recebe cor como string em JS e não lê CSS: até 2026-09-20 cada um dos oito
     arquivos de gráfico trazia o seu par de hex escrito à mão, lido UMA vez no init — quem
     trocava de tema sem recarregar ficava com a cor do tema anterior. Agora quem muda o tom de
     um gráfico muda aqui, e js/shared/graficos-tema.js reaplica a cada troca de tema.
     São tokens próprios, não apelidos de --es-muted / --es-line: o rótulo de eixo é mais claro
     que o texto secundário da página de propósito, e a grade é mais fraca que a régua das
     tabelas. Os valores são exatamente os que estavam nos arquivos — a troca não mudou tela. */
  --es-chart-axis:        #98A6B3;
  --es-chart-axis-strong: #3B4863;
  --es-chart-grid:        rgba(15,40,52,0.06);
  --es-chart-track:       rgba(15,40,52,0.08);
  --es-chart-label:       var(--es-ink);
  --es-chart-accent:      #1EC2D4;
  --es-chart-marker-bg:   #FFFFFF;

  /* ─── Sidebar (dark in BOTH themes by design) ─── */
  --es-sidebar-bg:        #0B1733;
  --es-sidebar-ink:       #E2E8F3;
  --es-sidebar-muted:     #7C89A8;
  --es-sidebar-line:      rgba(255,255,255,0.07);
  --es-sidebar-active-bg: rgba(30,58,138,0.40);
  --es-sidebar-active-bar:#0EA5B7;
  /* Luz difusa no topo da barra (layout.css .es-sb e layout-colab.css .es-colab-sb): centro e meio do
     radial. Na cor primária, e só ela: duas cores começam a ler como efeito. */
  --es-sidebar-luz:       rgba(52,92,200,0.50);
  --es-sidebar-luz-meio:  rgba(30,58,138,0.20);

  /* ─── Radii ─── */
  --es-radius-sm: 4px;
  --es-radius:    8px;
  --es-radius-lg: 12px;
  --es-radius-xl: 16px;
  --es-radius-pill: 999px;

  /* ─── Shadows ─── */
  --es-shadow-sm: 0 1px 2px rgba(11,23,51,0.04);
  --es-shadow:    0 4px 12px rgba(11,23,51,0.06), 0 1px 2px rgba(11,23,51,0.04);
  --es-shadow-lg: 0 12px 30px -8px rgba(11,23,51,0.12), 0 4px 10px rgba(11,23,51,0.04);
  /* Containers (card, KPI, seção, listagem) são delimitados pela sombra, sem contorno: a borda
     fica transparente no tema claro, e o fundo --es-bg contra a --es-surface faz o resto.
     Duas camadas: a curta dá a aresta, a longa e difusa dá o assentamento. */
  --es-shadow-card: 0 1px 2px rgba(11,23,51,0.05), 0 4px 16px -4px rgba(11,23,51,0.10);
  --es-card-border: transparent;
  --es-focus-ring: 0 0 0 3px rgba(30,58,138,0.18);

  /* ─── Botão cheio da primária ───
     Papel separado de --es-primary porque os dois não cabem no mesmo valor: --es-primary é
     TINTA (texto, ícone, traço) e precisa ler sobre o chão; isto aqui é FUNDO e precisa
     segurar texto branco em cima. No tema claro o mesmo azul faz os dois papéis; no escuro,
     não. Quem pinta botão cheio consome estes tokens, nunca --es-primary. */
  --es-btn-primary-bg:       var(--es-primary);
  --es-btn-primary-bg-hover: var(--es-primary-deep);
  --es-btn-primary-ink:      #FFFFFF;
  --es-btn-primary-shadow:   0 1px 0 rgba(255,255,255,0.18) inset,
                             0 4px 10px -4px rgba(30,58,138,0.5);

  /* ─── Typography ─── */
  --es-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Rótulos (KPI, cabeçalho de tabela, filtros, campos). Hoje é a própria fonte do texto; existe
     separado para o papel poder mudar sem caçar seletor por seletor. */
  --es-font-label: var(--es-font-sans);
  /* Só dado técnico: CPF, matrícula, códigos, carimbo de data e hora, atalho de teclado. */
  --es-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --es-font-feature: "tnum";

  /* ─── Cores dos grupos de agrupamento (PLANO_AGRUPAMENTOS.md, F2) ───
     Seis categóricas FORA da família da marca e dos estados (verde, âmbar, vermelho): "Sem grupo" é âmbar
     (--es-warn), e grupo nenhum pode parecer aviso. A mesma cor na lista, no editor, nos relatórios e na home.
     A partir do sétimo grupo as cores se repetem em ciclo (CorGrupoExtensions.DaPosicao). Valores do handoff
     (frentes/AGRUPAMENTOS.md §4). */
  --es-grupo-terracota: #B4613C;
  --es-grupo-petroleo:  #12808A;
  --es-grupo-azul:      #3D63C9;
  --es-grupo-vinho:     #9C4775;
  --es-grupo-oliva:     #6B7F2A;
  --es-grupo-ardosia:   #56647F;
}

:root[data-theme="dark"] {
  /* Ardósia — tom decidido em 19/09/2026 sobre prévia. Três regras sustentam este bloco:
     1. quem delimita o container é o degrau de luminância entre o chão e a caixa (1,10×),
        não uma linha: --es-card-border é transparente aqui também, como no claro;
     2. as cinco cores com significado derivam das autorais do tema claro — nunca da régua
        de fábrica de um framework;
     3. o acento sai do ciano neon para o petróleo, e o selo de IA perde o violeta.
     Ver standards/FRONTEND.md §20.2. */
  --es-bg:            #0C111B;
  --es-surface:       #10192A;
  --es-panel:         #0E1523;

  --es-ink:           #E5EAF2;
  --es-ink-soft:      #A3ACBC;
  --es-muted:         #7D8797;

  --es-line:          rgba(255,255,255,0.085);
  --es-line-soft:     rgba(255,255,255,0.05);

  --es-primary:       #6E90DD;
  /* Segue escuro de propósito: o "deep" também pinta texto sobre chip branco
     (.es-sb-logo, .es-sb-modo-seg, .mat-tip-card). O hover do botão cheio no escuro
     não depende dele — sai de --es-btn-primary-bg-hover. */
  --es-primary-deep:  #1E3A8A;
  --es-primary-light: rgba(110,144,221,0.16);
  /* O botão cheio não usa --es-primary no escuro: #6E90DD é claro demais para segurar texto
     branco (3,1:1) e gritava na tela. Este azul é fundo, e só fundo — 7,6:1 com o branco. */
  --es-btn-primary-bg:       #2F5195;
  --es-btn-primary-bg-hover: #3B63AE;
  --es-btn-primary-shadow:   var(--es-shadow-sm);

  --es-accent:        #4C9CA8;
  --es-accent-soft:   rgba(76,156,168,0.16);

  --es-success:       #4A9C79;
  --es-success-soft:  rgba(74,156,121,0.16);
  --es-warn:          #C6974A;
  --es-warn-soft:     rgba(198,151,74,0.16);
  --es-danger:        #D5726A;
  --es-danger-soft:   rgba(213,114,106,0.16);

  /* ─── Gráficos — ver o bloco do tema claro ───
     --es-chart-accent segue no ciano vivo do tema anterior, e NÃO no petróleo da Ardósia
     (--es-accent). É o degradê dos gauges sobre o hero ink, que é escuro nos dois temas;
     alinhá-lo ao acento novo é decisão de aparência, não de código. Ver FRONTEND.md §12. */
  --es-chart-axis:        #6B7B88;
  --es-chart-axis-strong: #AEB9C7;
  --es-chart-grid:        rgba(255,255,255,0.06);
  --es-chart-track:       rgba(255,255,255,0.08);
  --es-chart-accent:      #2FD3E4;
  --es-chart-marker-bg:   #0C2934;

  --es-input-bg:          #17223A;

  --es-sidebar-bg:        #070B12;
  --es-sidebar-ink:       #E2E8F3;
  --es-sidebar-muted:     #7C89A8;
  --es-sidebar-line:      rgba(255,255,255,0.05);
  --es-sidebar-active-bg: rgba(110,144,221,0.18);
  --es-sidebar-active-bar:var(--es-accent);
  /* No escuro a barra é quase preta: a mesma luz do claro viraria mancha. */
  --es-sidebar-luz:       rgba(110,144,221,0.28);
  --es-sidebar-luz-meio:  rgba(110,144,221,0.10);

  --es-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --es-shadow:    0 4px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --es-shadow-lg: 0 12px 30px -8px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.3);
  /* O fio de luz de 1px no topo é acabamento, não seguro: a 2% ele some em monitor
     lavado, e aí quem separa é a sombra. Saída de reserva, se algum dia incomodar,
     é subir --es-surface para #141F36 (degrau 1,10× → 1,16×), sem tocar no fio. */
  --es-shadow-card: inset 0 1px 0 rgba(255,255,255,0.02),
                    0 1px 2px rgba(0,0,0,0.35),
                    0 8px 20px -8px rgba(0,0,0,0.60);
  --es-card-border:   transparent;
  --es-focus-ring: 0 0 0 3px rgba(110,144,221,0.32);

  /* ─── Bootstrap dark overrides — garante que componentes BS usem nossos tokens ─── */
  --bs-body-bg:          var(--es-bg);
  --bs-body-color:       var(--es-ink);
  --bs-secondary-bg:     var(--es-panel);
  --bs-tertiary-bg:      var(--es-panel);
  --bs-border-color:     var(--es-line);
  --bs-card-bg:          var(--es-surface);
  --bs-table-bg:         transparent;
  --bs-table-color:      var(--es-ink);
  --bs-table-border-color: var(--es-line);
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-hover-bg:   rgba(255,255,255,0.04);
  --bs-table-accent-bg:  transparent;

  /* Cores dos grupos no escuro. O terracota do handoff (#D8916F) ficava vizinho demais do âmbar de "Sem grupo"
     (#C6974A) — §11.1 ponto 4 da decisão: puxado para o vermelho, longe do âmbar e ainda longe do --es-danger. */
  --es-grupo-terracota: #DE8472;
  --es-grupo-petroleo:  #55B3B8;
  --es-grupo-azul:      #7F9DE6;
  --es-grupo-vinho:     #D08BB1;
  --es-grupo-oliva:     #A7BB62;
  --es-grupo-ardosia:   #9BA7BE;
}

/* ──────────────────────────────────────────────────────────────────
 * Variáveis do Bootstrap 5.3 apontadas para os tokens do produto.
 * ────────────────────────────────────────────────────────────────── */

:root {
  --bs-primary:        var(--es-primary);
  --bs-primary-rgb:    30, 58, 138;       /* keep in sync with --es-primary */
  --bs-body-bg:        var(--es-bg);
  --bs-body-color:     var(--es-ink);
  --bs-border-color:   var(--es-line);
  --bs-link-color:     var(--es-primary);
  --bs-success:        var(--es-success);
  --bs-warning:        var(--es-warn);
  --bs-danger:         var(--es-danger);
  --bs-font-sans-serif: var(--es-font-sans);
  --bs-font-monospace:  var(--es-font-mono);
}

:root[data-theme="dark"] {
  --bs-primary-rgb:    110, 144, 221;
  --bs-body-bg:        var(--es-bg);
  --bs-body-color:     var(--es-ink);
  --bs-border-color:   var(--es-line);
  --bs-card-bg:        var(--es-surface);
  --bs-secondary-bg:   var(--es-panel);
  --bs-tertiary-bg:    var(--es-panel);
  --bs-emphasis-color: var(--es-ink);
  color-scheme: dark;
}

/* ──────────────────────────────────────────────────────────────────
 * Sobrescritas de componentes do Tabler e do tema base.
 * ────────────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--es-btn-primary-bg) !important;
  border-color: var(--es-btn-primary-bg) !important;
  color: var(--es-btn-primary-ink) !important;
  font-weight: 700;
  border-radius: var(--es-radius);
  box-shadow: var(--es-btn-primary-shadow);
}
.btn-primary:hover { background: var(--es-btn-primary-bg-hover) !important; border-color: var(--es-btn-primary-bg-hover) !important; }
.btn-primary:focus { box-shadow: var(--es-focus-ring) !important; }

.form-control,
.form-select {
  background: var(--es-input-bg);
  color: var(--es-ink);
  border: 1.5px solid var(--es-line);
  border-radius: var(--es-radius);
  font-family: var(--es-font-sans);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--es-primary);
  box-shadow: var(--es-focus-ring);
}

.form-label {
  font-family: var(--es-font-label);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--es-ink-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.card {
  background: var(--es-surface);
  border: 1px solid var(--es-card-border);
  border-radius: var(--es-radius-lg);
  box-shadow: var(--es-shadow-card);
}

/* Sidebar — matches the dark navy permanent design */
.sidebar {
  background: var(--es-sidebar-bg) !important;
  color: var(--es-sidebar-ink) !important;
  font-family: var(--es-font-sans);
}
.sidebar .nav-item.active > a {
  background: var(--es-sidebar-active-bg);
  color: #fff !important;
  position: relative;
}
.sidebar .nav-item.active > a::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--es-sidebar-active-bar); border-radius: 2px;
}

/* Page typography */
body { font-family: var(--es-font-sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.page-header h3,
.page-header h1 { font-weight: 700; letter-spacing: -0.5px; }
.breadcrumbs { font-family: var(--es-font-sans); font-size: 11.5px; letter-spacing: 0.4px; }
.text-mono,
code, kbd { font-family: var(--es-font-mono); font-feature-settings: var(--es-font-feature); }

/* Pills / badges */
.badge { font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.2px; }
.badge-primary { background: var(--es-primary-light); color: var(--es-primary); }
.badge-success { background: var(--es-success-soft); color: var(--es-success); }
.badge-warn    { background: var(--es-warn-soft);    color: var(--es-warn); }
.badge-danger  { background: var(--es-danger-soft);  color: var(--es-danger); }

/* ─── SweetAlert2 — notificações de canto (top-end) ──────────────────────────
 * Definido aqui (e não em components.css) porque tokens.css é carregado por
 * TODAS as telas — inclusive Login (Layout = null), que não inclui components.css.
 * Garante toast idêntico em login e dentro do sistema.
 * Escopo restrito a .swal2-top-end para não afetar alertas centrados
 * (confirmações, erros fatais). A maior especificidade vence o sweetalert2.min.css
 * independentemente da ordem de carregamento.
 * font-size em `em` escala ícone, título, texto e padding proporcionalmente.
 *
 * ─────────────────────────────────────────────────────────────────────────── */
/* --es-toast-icone é O ÚNICO número a mexer para mudar o tamanho do ícone do toast.
 * As três medidas abaixo derivam dele por calc(), então não há como mudar uma e
 * esquecer as outras. A conta: a coluna do ícone ocupa 3em do próprio ícone
 * (anel 2em + borda 2×.25em + margem .5em); 368px = os 340,8px da coluna de texto
 * mais os 2×1em de padding do popup; o container leva mais 2×10px de padding dele.
 * Reduzir a escala é seguro: o texto ganha espaço, nada estoura. */
:root { --es-toast-icone: 1.6; }

.swal2-container.swal2-top-end .swal2-popup,
.swal2-container.swal2-top-right .swal2-popup {
    font-size: 0.85rem;   /* tamanho médio — entre o padrão (1rem) e o reduzido (0.72rem) */
    min-width: min(324px, 100%);  /* mantém o toast horizontal, não quadrado;
                                     o min() evita estouro em tela de 320px */
    width: auto;
    max-width: calc(368px + 3 * 0.85rem * var(--es-toast-icone));
}

/* O CONTAINER precisa crescer junto, senão o max-width acima nunca é alcançado.
 * Em modo toast o SweetAlert marca o body com .swal2-toast-shown e trava o container
 * em width: 360px — com padding de 10px de cada lado, sobra 340px para o popup, e a
 * coluna de texto desabava de 340,8px para 248px (medido no navegador). A largura aqui
 * é a do popup mais os 2×10px de padding do container. O max-width: 100% protege
 * telas estreitas — a 320px o popup encolhe sozinho, sem estourar.
 * A especificidade (0,3,1) vence a regra da biblioteca (0,2,1). */
body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    width: calc(388px + 3 * 0.85rem * var(--es-toast-icone));
    max-width: 100%;
}

/* ─── Botão de alternar tema nas telas ANÔNIMAS ──────────────────────────────
 * Aqui pela mesma razão do toast acima: tokens.css é o único arquivo que as quatro telas
 * anônimas carregam (nenhuma delas inclui components.css nem layout.css, onde mora o
 * .es-sb-icon-btn do shell). Mesma geometria do botão da sidebar — 28px, raio 6, ícone 14 —
 * mas com cor de token, porque estas telas ficam sobre superfície clara ou escura conforme
 * o tema, e não sobre o ink fixo da sidebar.
 *
 * Existe porque o tema JÁ persistia nestas telas (o <script> de localStorage no <head> de
 * cada uma) sem nenhuma forma de sair dele: dava para entrar no escuro pelo sistema e ficar
 * preso nele no login. Ver js/shared/tema.js, que é quem liga o clique.
 * ─────────────────────────────────────────────────────────────────────────── */
.es-tema-btn {
    width: 28px; height: 28px;
    border: 1px solid var(--es-line, #E1E6F0);
    background: transparent;
    color: var(--es-muted, #6B7794);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    padding: 0;
    transition: background .12s, color .12s, border-color .12s;
}

.es-tema-btn:hover {
    background: var(--es-panel, #FAFBFE);
    color: var(--es-ink, #0B1733);
    border-color: var(--es-muted, #6B7794);
}

.es-tema-btn:focus-visible { outline: none; box-shadow: var(--es-focus-ring); }

/* Select2 — override movido para components.css (carrega após select2.min.css) */

/* ──────────────────────────────────────────────────────────────────
   INTELIGÊNCIA ARTIFICIAL — accent indigo-violeta
   Vieram de treinamentos/treinamento-ia.css em 2026-09-22, quando o saldo de Créditos IA entrou no
   cabeçalho do shell: cor usada fora do módulo que a criou é cor do sistema, e deixá-la lá faria o
   widget sair sem cor em toda tela que não fosse de IA.
   ────────────────────────────────────────────────────────────────── */
/* ── Tokens IA (extend root) ─────────────────────────────── */
:root,
[data-theme="light"] {
    --ia-accent:        #6D5AE6;
    --ia-accent-deep:   #4C3FC0;
    --ia-soft:          #EEEBFE;
    --ia-border:        rgba(124, 92, 246, 0.28);
    /* Só a barra de progresso da geração ainda usa o degradê (decisão de 2026-09-14). Botão e ícones
     * são cor sólida (--ia-accent), com brilho fino em cima e sombra na mesma família. */
    --ia-grad:          linear-gradient(135deg, #5B5BD6 0%, #8B5CF6 100%);
    --ia-sombra:        rgba(109, 90, 230, 0.55);
    --ia-ink:           #FFFFFF;
    --ia-hover-soft:    rgba(109, 90, 230, 0.06);
    /* Bloqueio por saldo: vermelho translúcido, não cheio — borda cheia
     * lê como erro de formulário, e falta de crédito é aviso, não erro do usuário. */
    --ia-danger-line:   rgba(192, 58, 47, 0.32);
    --ia-danger-icone:  rgba(192, 58, 47, 0.30);
    --ia-danger-fundo:  #FFFFFF;
}

:root[data-theme="dark"] {
    --ia-accent:        #968CD9;
    --ia-accent-deep:   #7C6CE0;
    --ia-soft:          rgba(150, 130, 255, 0.14);
    --ia-border:        rgba(150, 140, 217, 0.28);
    --ia-grad:          linear-gradient(135deg, #7C6CE0 0%, #968CD9 100%);
    --ia-sombra:        rgba(0, 0, 0, 0.55);
    --ia-ink:           #0C111B;
    --ia-hover-soft:    rgba(150, 140, 217, 0.08);
    --ia-danger-line:   rgba(213, 114, 106, 0.32);
    --ia-danger-icone:  rgba(213, 114, 106, 0.30);
    /* No escuro o quadro do ícone é um tinte avermelhado, não a superfície azulada:
     * sobre o fundo já tingido do aviso, a superfície padrão sumiria. */
    --ia-danger-fundo:  rgba(240, 90, 90, 0.16);
}