/* HUB Sab.IA — pele de dashboard.
   Carregado depois de app.css. Mantém a identidade da Rede Sesc de Educação e
   usa a organização de dashboard que o gestor aprovou.

   SOBRE A HARMONIA DE COR
   A rampa da marca é quente e a página é creme: verde-oliva e mostarda sobre
   creme caem todos na mesma vizinhança amarela e a leitura vira barro. A saída
   foi manter as matizes da marca, mas afastá-las do fundo em duas frentes:
   a página perde o viés amarelo (fica creme neutro) e os acentos ganham
   saturação e distância de matiz entre si. O roxo continua sendo a voz
   principal; verde e azul puxam para o frio; âmbar e coral para o quente.
   Nenhuma cor de dado repete a família do fundo.

   A demonstração roda em um tema só (claro). */

:root {
  --app-sidebar: 256px;

  /* ── Superfícies ──────────────────────────────────────────────────
     Creme neutro: ainda é a cor da Rede, mas parou de disputar matiz com
     os dados. O cartão branco é o palco; a página é o fundo do palco. */
  --surface-page: #f4f4ef;
  --surface-card: #ffffff;
  --surface-sunken: #eeeee7;
  --surface-inverse: #262441;
  --surface-page-translucent: rgba(244, 244, 239, .94);
  --surface-primary-tint: #eceafa;
  --surface-primary-tint-hover: #e0ddf5;
  --border-subtle: #e6e5dd;
  --border-default: #d4d3c8;
  --border-strong: #9d9b8e;

  /* ── Primária: o roxo da Rede ─────────────────────────────────── */
  --color-primary: #5f55bd;
  --color-primary-hover: #524897;
  --color-primary-active: #453c80;
  --text-on-primary: #ffffff;
  --text-link: #554aad;
  --text-link-hover: #433a8c;
  --text-heading: #26243d;
  --text-body: #4a4860;
  --text-muted: #77748c;

  --tint-blue: #e7eff7;
  --tint-blue-ink: #1f5478;
  --sabia-chrome: #5f9fc9;
  --sabia-surface: #eef4fa;
  --sabia-ink: #1f5478;

  --shadow-sm: 0 1px 2px rgba(38, 36, 61, .05), 0 1px 3px rgba(38, 36, 61, .05);
  --shadow-md: 0 10px 28px rgba(38, 36, 61, .10);
  --shadow-lg: 0 22px 52px rgba(38, 36, 61, .18);

  /* ── Rampa categórica ─────────────────────────────────────────────
     Oito matizes com peso visual parecido e distância suficiente para
     serem lidas lado a lado numa rosca. Começa no roxo da marca. */
  --viz-1: #5f55bd;   /* roxo — a voz da marca */
  --viz-2: #2f8f6b;   /* verde-teal, longe do creme */
  --viz-3: #d4881d;   /* âmbar quente, não mostarda */
  --viz-4: #cb5a67;   /* coral */
  --viz-5: #3f7fb8;   /* azul */
  --viz-6: #8a63c6;   /* violeta claro */
  --viz-7: #b0642a;   /* terracota */
  --viz-8: #6f9c33;   /* verde-oliva claro */

  /* ── Semáforo ─────────────────────────────────────────────────────
     Mesma lógica: o verde puxa para o teal e o alerta para o âmbar, para
     não encostarem no creme da página. */
  --viz-ok: #2f8f6b;
  --viz-atencao: #d4881d;
  --viz-critica: #cb5a67;
  --viz-excedente: #5f55bd;
  --st-ok: #2f8f6b;
  --st-atencao: #c27a14;
  --st-critica: #cb5a67;
  --st-excedente: #5f55bd;
  --st-ok-surface: #e6f3ed;
  --st-atencao-surface: #fbf0dd;
  --st-critica-surface: #fbeaec;
  --st-excedente-surface: #ecebf9;
  --st-ok-ink: #1f6b4f;
  --st-atencao-ink: #8c5709;
  --st-critica-ink: #a3414d;
  --st-excedente-ink: #453c80;

  /* Escala do mapa: uma só matiz, do quase-branco ao roxo profundo. */
  --viz-mapa-1: #3b3282;
  --viz-mapa-2: #5f55bd;
  --viz-mapa-3: #9189d7;
  --viz-mapa-4: #c3bdeb;
  --viz-mapa-5: #ebe9f8;

  /* ── Movimento ────────────────────────────────────────────────────
     Uma curva só para o app inteiro: entra rápido, assenta devagar. */
  --mola: cubic-bezier(.22, 1, .36, 1);
  --mola-curta: cubic-bezier(.34, 1.3, .64, 1);
  --ritmo: 260ms;
}

/* ── Menu lateral ─────────────────────────────────────────────────── */
.sidebar { background: var(--surface-inverse); padding-top: 0; gap: 0; }
.sidebar-head {
  min-height: var(--header-height);
  padding: var(--space-3) var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.hub-icon {
  background: linear-gradient(135deg, #8e82d8, #4c549e);
  color: #fff;
  box-shadow: 0 2px 10px rgba(79, 159, 208, .4);
}
.hub-nome { font-size: 1.15rem; }
.hub-nome b { color: #b9b2ee; }
.sidenav { gap: var(--space-3); padding-bottom: var(--space-4); }
.sidenav .grupo-titulo { color: #8a87a8; font-size: .68rem; letter-spacing: .1em; }
.sidenav a { color: #cbc9dd; min-height: 40px; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.sidenav a[aria-current] { background: var(--color-primary); box-shadow: inset 3px 0 0 #b9b2ee; }
.sidenav a .contexto { max-width: 86px; }
.sidebar-foot { margin-top: auto; }

/* ── Cabeçalho ────────────────────────────────────────────────────── */
.topbar { background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.topbar-inner { padding-inline: var(--space-5); }
.topbar-titulo b { font-size: 1.05rem; }
.marca-sesc { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-3); margin-right: var(--space-1); border-right: 1px solid var(--border-default); }
.marca-sesc img { height: 30px; }
.marca-sesc span { font-size: .66rem; line-height: 1.25; color: var(--text-muted); font-weight: 600; max-width: 104px; }
.sino { position: relative; }
.sino::after {
  content: ''; position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-critica); border: 2px solid var(--surface-card);
}

/* ── Faixa de KPIs ────────────────────────────────────────────────── */
.kpis { gap: var(--space-3); }
.kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { padding: var(--space-4); border-radius: 14px; }
.kpi-value { font-size: 1.75rem; white-space: nowrap; }
.kpi.com-ico { grid-template-columns: 46px 1fr; }
.kpi .kpi-ico { width: 46px; height: 46px; border-radius: 13px; }
.kpi-topo { font-size: var(--text-caption); font-weight: 700; color: var(--text-muted); line-height: 1.3; }
.kpi-nota { font-size: var(--text-caption); color: var(--text-muted); }

/* Variação contra o período anterior. */
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-caption); font-weight: 700; }
.delta .icon { width: 13px; height: 13px; }
.delta-pos { color: var(--st-ok-ink); }
.delta-neg { color: var(--st-critica-ink); }
.delta-zero { color: var(--text-muted); }

/* Tintas dos círculos de ícone. */
.ico-azul { background: var(--tint-blue); color: var(--viz-1); }
.ico-verde { background: var(--st-ok-surface); color: var(--st-ok-ink); }
.ico-amarelo { background: var(--st-atencao-surface); color: var(--st-atencao-ink); }
.ico-vermelho { background: var(--st-critica-surface); color: var(--st-critica-ink); }
.ico-roxo { background: var(--st-excedente-surface); color: var(--st-excedente-ink); }
.ico-laranja { background: #fbeee1; color: #a3541a; }

/* ── Cartões e grade ──────────────────────────────────────────────── */
.card { border-radius: 14px; padding: var(--space-4) var(--space-5) var(--space-5); }
.card-head { margin-bottom: var(--space-3); align-items: center; }
.card-head h2 { font-size: 1.02rem; letter-spacing: -.01em; }
.card-head .acoes { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }

/* ── Gráficos ─────────────────────────────────────────────────────── */
.viz { width: 100%; min-width: 0; position: relative; }
.viz-clicavel { cursor: pointer; }
.viz-esqueleto {
  position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--border-subtle) 50%, var(--surface-sunken) 70%);
  background-size: 220% 100%;
  animation: viz-brilho 1.2s linear infinite;
}
.viz-pronto .viz-esqueleto { display: none; }
@keyframes viz-brilho { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .viz-esqueleto { animation: none; } }
.viz-falha { display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: var(--text-body-sm); text-align: center; }

/* Legenda escrita à mão, ao lado da rosca. */
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); align-content: center; }
.legenda li { display: grid; grid-template-columns: 12px 1fr; gap: var(--space-3); align-items: start; }
.legenda .ponto { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.legenda .rotulo { font-size: var(--text-body-sm); color: var(--text-body); font-weight: 600; line-height: 1.35; }
.legenda .valor { display: block; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.viz-lado { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.viz-lado-estreito { grid-template-columns: minmax(0, 1fr) 150px; }

/* Números soltos ao lado de um gráfico. */
.stat-col { display: grid; gap: var(--space-3); align-content: center; }
.stat-box { background: var(--surface-sunken); border-radius: 12px; padding: var(--space-3) var(--space-4); text-align: center; }
.stat-box b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text-heading); line-height: 1.2; }
.stat-box span { font-size: var(--text-caption); color: var(--text-muted); font-weight: 600; }
.stat-linha { display: flex; align-items: center; gap: var(--space-3); }
.stat-linha .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.stat-linha b { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.stat-linha span { font-size: var(--text-caption); color: var(--text-muted); display: block; }

/* ── Abas internas e alternadores ─────────────────────────────────── */
.segmentado { display: inline-flex; gap: 2px; background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 3px; flex-wrap: wrap; }
.segmentado button {
  border: 0; background: transparent; border-radius: var(--radius-pill);
  padding: 6px 13px; font-size: var(--text-caption); font-weight: 700;
  color: var(--text-muted); cursor: pointer; white-space: nowrap; min-height: 32px;
}
.segmentado button:hover { color: var(--text-heading); }
.segmentado button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }

/* ── Tabela com barra de ferramentas ──────────────────────────────── */
.tabela-barra { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.busca { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.busca input {
  width: 100%; min-height: 40px; padding: 0 var(--space-3) 0 38px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-heading);
}
.busca .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 17px; height: 17px; pointer-events: none; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.paginacao .paginas { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.paginacao button {
  min-width: 32px; min-height: 32px; border-radius: 8px; border: 1px solid var(--border-subtle);
  background: var(--surface-card); color: var(--text-body); font-size: var(--text-caption); font-weight: 700; cursor: pointer;
}
.paginacao button[aria-current="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.paginacao button:disabled { opacity: .45; cursor: not-allowed; }
table.data tbody tr.sem-acao { cursor: default; }
table.data td .aluno { font-weight: 700; color: var(--text-heading); }
table.data td .sub { display: block; font-size: var(--text-caption); color: var(--text-muted); font-weight: 500; }
.total-row td { font-weight: 800; color: var(--text-heading); background: var(--surface-sunken); border-top: 2px solid var(--border-default); }
.ponto-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--text-caption); white-space: nowrap; }
.ponto-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

/* ── Mapa ─────────────────────────────────────────────────────────── */
.mapa-bloco { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: var(--space-4); }
.mapa-regioes { display: grid; gap: var(--space-2); align-content: start; }
.mapa-regiao {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center;
  background: var(--surface-sunken); border: 1px solid transparent; border-radius: 11px;
  padding: var(--space-2) var(--space-3); text-align: left; cursor: pointer; width: 100%;
}
.mapa-regiao:hover { border-color: var(--color-primary); }
.mapa-regiao .selo {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--viz-mapa-2); color: #fff; font-weight: 800; font-size: var(--text-caption);
}
.mapa-regiao .nome { font-size: var(--text-body-sm); font-weight: 700; color: var(--text-heading); }
.mapa-regiao .nome small { display: block; font-weight: 600; color: var(--text-muted); font-size: var(--text-caption); }
.mapa-nota { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-2); }

/* ── Cartão de leitura da Sab.IA ──────────────────────────────────── */
.insight {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3);
  background: var(--sabia-surface); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: var(--space-4); align-content: start;
}
.insight .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #8e82d8, #4c549e); color: #fff; }
.insight p { font-size: var(--text-body-sm); color: var(--text-body); line-height: 1.5; }
.insight p + p { margin-top: var(--space-2); }
.insight b { color: var(--text-heading); }
.insight .frase { font-weight: 700; color: var(--sabia-ink); }

/* ── Rodapé de propósito ──────────────────────────────────────────── */
.proposito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-4); align-items: center; }
.proposito-item { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-3); align-items: center; }
.proposito-item .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--tint-blue); color: var(--viz-1); }
.proposito-item b { display: block; font-size: var(--text-body-sm); color: var(--text-heading); }
.proposito-item span { font-size: var(--text-caption); color: var(--text-muted); }

/* ── Origem do dado e avisos ──────────────────────────────────────── */
.origem { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-caption); color: var(--text-muted); font-weight: 600; }
.origem .icon { width: 13px; height: 13px; }
.aviso-lgpd {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: var(--st-atencao-surface); border-radius: 10px;
  padding: var(--space-2) var(--space-3); font-size: var(--text-caption);
  color: var(--st-atencao-ink); font-weight: 600; margin-bottom: var(--space-3);
}
.aviso-lgpd .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ── Responsivo ───────────────────────────────────────────────────── */
/* Seis KPIs só cabem lado a lado em tela muito larga; abaixo disso viram 3 + 3. */
@media (max-width: 1599px) {
  .kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .g-12 > [class*="col-"] { grid-column: span 12; }
  .g-12 > .col-6, .g-12 > .col-4 { grid-column: span 6; }
  .mapa-bloco { grid-template-columns: minmax(0, 1fr); }
  .mapa-regioes { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .proposito { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1119px) {
  .kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viz-lado, .viz-lado-estreito { grid-template-columns: minmax(0, 1fr); }
  .legenda { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 833px) {
  .g-12 > [class*="col-"] { grid-column: span 12 !important; }
  .marca-sesc span { display: none; }
  .card { padding: var(--space-4); }
  .proposito { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .kpis-6, .kpis-5, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--space-3); }
  .kpi-value { font-size: 1.35rem; }
  .kpi.com-ico { grid-template-columns: 34px 1fr; column-gap: var(--space-2); }
  .kpi .kpi-ico { width: 34px; height: 34px; border-radius: 10px; }
  .kpi .kpi-ico .icon { width: 17px; height: 17px; }
  .topbar-titulo small { display: none; }
  .marca-sesc { display: none; }
  .busca { max-width: none; }
  .card-head { align-items: flex-start; }
}

/* Indicadores da Rede: em cartão largo, os quatro sinais viram duas colunas. */
.indicadores-rede .stat-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.indicadores-rede .stat-linha { background: var(--surface-sunken); border-radius: 12px; padding: var(--space-3); }
@media (max-width: 599px) { .indicadores-rede .stat-col { grid-template-columns: minmax(0, 1fr); } }

/* Rosca empilhada: em cartão estreito o gráfico vai em cima e a legenda embaixo. */
.viz-lado.empilhado { grid-template-columns: minmax(0, 1fr); }
.viz-lado.empilhado .legenda { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--space-2) var(--space-3); }

/* Indicadores em cartão estreito: a variação desce para a linha de baixo. */
.indicadores-permanencia .stat-linha { flex-wrap: wrap; }
.indicadores-permanencia .stat-linha > span[style] { margin-left: 52px !important; }

/* A marca Sesc tem versão clara e escura: mostra a que lê no tema atual. */
.marca-sesc .marca-escura { display: none; }

/* Sugestões da Sab.IA: em gaveta estreita a pergunta ocupa três linhas e a
   pílula fica deformada. Abaixo de 520px cada sugestão vira um bloco. */
@media (max-width: 520px) {
  .suggestions { flex-direction: column; }
  .suggestion {
    width: 100%;
    border-radius: 12px;
    padding: var(--space-2) var(--space-3);
    line-height: 1.35;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Ritmo vertical: um só espaçamento entre blocos de topo
   ═══════════════════════════════════════════════════════════════════
   Cada componente trazia a própria margem e o resultado era irregular —
   às vezes zero, como entre o resumo da Sab.IA e a barra de filtros. */
main > * { margin-bottom: 0; }
main > * + * { margin-top: var(--space-5); }
/* .kpis traz margin-top próprio de app.css e vencia o seletor acima por
   especificidade; aqui ele volta para o mesmo ritmo dos demais blocos. */
main > .kpis, main > .grid, main > .card, main > .filtros { margin-top: var(--space-5); }
main > :first-child { margin-top: 0; }
main > .tabs + * { margin-top: var(--space-4); }
.section-gap { margin-top: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════════
   Barra superior: um cluster de ícones, a Sab.IA e o perfil
   ═══════════════════════════════════════════════════════════════════ */
.top-actions { gap: var(--space-2); }
.top-grupo {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.top-grupo .icon-btn { width: 38px; height: 38px; color: var(--text-body); }
.top-grupo .icon-btn:hover { background: var(--surface-card); color: var(--color-primary); }

/* O sino ganha o ponto de alerta; o ícone agora existe, então o ponto
   se apoia nele em vez de flutuar sozinho. */
.top-grupo [data-action="abrir-alertas"] { position: relative; }
.top-grupo [data-action="abrir-alertas"]::after {
  content: ''; position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-critica);
  border: 2px solid var(--surface-sunken);
}
.top-grupo [data-action="abrir-alertas"]:hover::after { border-color: var(--surface-card); }

/* Perfil vira botão com menu. */
.perfil {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-2) 4px 4px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.perfil:hover { border-color: var(--color-primary); background: var(--surface-primary-tint); }
.perfil-seta { color: var(--text-muted); }
.perfil-ini {
  background: linear-gradient(135deg, #8e82d8, #4c549e);
  color: #fff; font-weight: 800;
}
.perfil-ini.grande { width: 56px; height: 56px; font-size: 1.1rem; }
.perfil-cartao { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.perfil-cartao h2 { font-size: var(--text-h4); }
.perfil-lista { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.perfil-lista li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); font-size: var(--text-body-sm); }
.perfil-lista li .icon { width: 20px; height: 20px; color: var(--color-primary); margin-top: 2px; }
.modal-foot { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   Tela de entrada
   ═══════════════════════════════════════════════════════════════════ */
body.com-login { overflow: hidden; }
.login {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: #201f36;
  overflow-y: auto;
  padding: var(--space-5);
  animation: login-entra var(--duration-slow) var(--ease-out);
}
@keyframes login-entra { from { opacity: 0; } }
.login.saiu {
  animation: login-sai 600ms var(--mola) forwards;
  pointer-events: none;
}
@keyframes login-sai {
  to { opacity: 0; transform: scale(1.04); filter: blur(6px); }
}

/* Fundo vivo: três orbes de marca que respiram devagar. */
.login-fundo { position: absolute; inset: 0; overflow: hidden; }
.login-fundo .orbe {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: orbita 18s var(--ease-standard) infinite alternate;
}
.orbe-1 { width: 46vw; height: 46vw; background: #6c62c4; top: -14vw; left: -10vw; }
.orbe-2 { width: 38vw; height: 38vw; background: #4c549e; bottom: -14vw; right: -8vw; animation-delay: -6s; }
.orbe-3 { width: 26vw; height: 26vw; background: #76b3dd; top: 42%; left: 52%; animation-delay: -12s; opacity: .35; }
@keyframes orbita {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3vw, 4vh, 0) scale(1.14); }
}

.login-painel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-5);
  width: min(980px, 100%);
  align-items: stretch;
}
.login-cartao {
  background: var(--surface-card);
  border-radius: 22px;
  padding: var(--space-6);
  box-shadow: 0 30px 70px rgba(16, 15, 34, .45);
  animation: sobe 700ms var(--mola) both;
}
@keyframes sobe { from { opacity: 0; transform: translateY(22px); } }
.login-marca { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.login-marca .hub-nome { color: var(--text-heading); }
.login-marca .hub-nome b { color: var(--color-primary); }
.login-marca .hub-nome small { color: var(--text-muted); }
.login-cartao h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.18; letter-spacing: -.02em; margin-bottom: var(--space-3);
  /* Quebra equilibrada: nada de uma palavra sozinha na última linha. */
  text-wrap: balance;
}
.login-lead { color: var(--text-muted); font-size: var(--text-body-sm); margin-bottom: var(--space-4); max-width: 46ch; }
.login-aviso {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: var(--tint-blue); color: var(--tint-blue-ink);
  border-radius: 12px; padding: var(--space-3);
  font-size: var(--text-caption); line-height: 1.45;
  margin-bottom: var(--space-5);
}
.login-aviso .icon { flex: none; margin-top: 1px; }

.login-form { display: grid; gap: var(--space-3); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.login-form.saindo { opacity: 0; transform: translateY(-8px); pointer-events: none; height: 0; overflow: hidden; margin: 0; }
.login-form .campo { display: grid; gap: 5px; }
.login-form .campo label { font-size: var(--text-caption); font-weight: 700; color: var(--text-muted); }
.campo-caixa {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--border-default); border-radius: 12px;
  padding: 0 var(--space-3); min-height: 46px;
  background: var(--surface-sunken);
}
.campo-caixa .icon { color: var(--text-muted); flex: none; }
.campo-caixa input {
  flex: 1; border: 0; background: transparent; min-width: 0;
  font-weight: 600; color: var(--text-body); cursor: default;
}
.campo-caixa input:focus { outline: none; }
.login-entrar { width: 100%; min-height: 50px; margin-top: var(--space-2); font-size: var(--text-body); }

.login-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); min-height: 150px; }
.login-etapas li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3);
  align-items: center; font-size: var(--text-body-sm); font-weight: 600;
  color: var(--text-muted);
  animation: sobe 380ms var(--ease-out) both;
}
.login-etapas li .icon { width: 20px; height: 20px; }
.login-etapas li.pending .icon { color: var(--color-primary); animation: gira 1s linear infinite; }
.login-etapas li.feito { color: var(--text-heading); }
.login-etapas li.feito .icon { color: var(--st-ok); animation: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.login-rodape { margin-top: var(--space-5); font-size: var(--text-caption); color: var(--text-muted); }

.login-lado {
  color: #e8e6f4; align-self: center;
  padding: var(--space-5) var(--space-4);
  animation: sobe 700ms var(--mola) 140ms both;
}
.login-lado-eyebrow {
  font-size: var(--text-eyebrow); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: #b9b2ee; margin-bottom: var(--space-4);
}
.login-lado ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.login-lado li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3);
  font-size: var(--text-body-sm); line-height: 1.45;
}
.login-lado li .icon { color: #9ad36a; margin-top: 3px; }
.login-lado-marca { display: flex; align-items: center; gap: var(--space-3); opacity: .75; }
.login-lado-marca img { height: 30px; }
.login-lado-marca span { font-size: var(--text-caption); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════════════
   Fluidez: a página se monta, não aparece de uma vez
   ═══════════════════════════════════════════════════════════════════ */

/* Entrada escalonada dos blocos. Vale a cada troca de tela, então a
   navegação também ganha o movimento — não só a chegada pelo login. */
main .kpi,
main > .grid > .card,
main > .grid > div,
main > .card,
main > .brief {
  animation: bloco-entra 420ms var(--mola) both;
}
@keyframes bloco-entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
main .kpis .kpi:nth-child(1) { animation-delay: 20ms; }
main .kpis .kpi:nth-child(2) { animation-delay: 55ms; }
main .kpis .kpi:nth-child(3) { animation-delay: 90ms; }
main .kpis .kpi:nth-child(4) { animation-delay: 125ms; }
main .kpis .kpi:nth-child(5) { animation-delay: 160ms; }
main .kpis .kpi:nth-child(6) { animation-delay: 195ms; }
main > .grid > *:nth-child(1) { animation-delay: 60ms; }
main > .grid > *:nth-child(2) { animation-delay: 110ms; }
main > .grid > *:nth-child(3) { animation-delay: 160ms; }
main > .grid > *:nth-child(4) { animation-delay: 210ms; }
main > .grid > *:nth-child(5) { animation-delay: 250ms; }
main > .grid > *:nth-child(n+6) { animation-delay: 290ms; }

/* Logo depois do login o escalonamento é mais generoso: é a hora de
   mostrar a plataforma se montando. */
body.entrando main .kpi,
body.entrando main > .grid > * {
  animation-duration: 620ms;
}
body.entrando main .kpis .kpi:nth-child(1) { animation-delay: 120ms; }
body.entrando main .kpis .kpi:nth-child(2) { animation-delay: 190ms; }
body.entrando main .kpis .kpi:nth-child(3) { animation-delay: 260ms; }
body.entrando main .kpis .kpi:nth-child(4) { animation-delay: 330ms; }
body.entrando main .kpis .kpi:nth-child(5) { animation-delay: 400ms; }
body.entrando main .kpis .kpi:nth-child(6) { animation-delay: 470ms; }
body.entrando main > .grid > *:nth-child(1) { animation-delay: 420ms; }
body.entrando main > .grid > *:nth-child(2) { animation-delay: 510ms; }
body.entrando main > .grid > *:nth-child(3) { animation-delay: 600ms; }
body.entrando main > .grid > *:nth-child(n+4) { animation-delay: 680ms; }
body.entrando .sidebar { animation: lateral-entra 700ms var(--mola) both; }
body.entrando .topbar { animation: bloco-entra 560ms var(--mola) both; }
@keyframes lateral-entra { from { opacity: 0; transform: translateX(-18px); } }

/* Cartão que responde ao toque. */
.card { transition: box-shadow 220ms var(--ease-standard), transform 220ms var(--mola); }
.card:hover { box-shadow: var(--shadow-md); }
table.data tbody tr { transition: background 140ms var(--ease-standard); }
table.data tbody tr[data-action]:hover { transform: none; }
.kpi { transition: box-shadow 220ms var(--ease-standard), transform 220ms var(--mola); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mapa-regiao { transition: border-color 180ms var(--ease-standard), transform 180ms var(--mola), background 180ms var(--ease-standard); }
.mapa-regiao:hover { transform: translateX(3px); background: var(--surface-card); }
.segmentado button { transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard); }
.btn { transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard), transform 160ms var(--mola-curta); }
.btn:active:not(:disabled) { transform: scale(.97); }
.icon-btn { transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard); }

@media (prefers-reduced-motion: reduce) {
  main .kpi, main > .grid > *, main > .card, main > .brief,
  body.entrando .sidebar, body.entrando .topbar,
  .login, .login.saiu, .login-cartao, .login-lado, .login-etapas li,
  .login-fundo .orbe {
    animation: none !important;
  }
  .card:hover, .kpi:hover, .mapa-regiao:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Assessoria Sab.IA: janela flutuante que não bloqueia o painel
   ═══════════════════════════════════════════════════════════════════ */
.chat-flutuante {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  z-index: calc(var(--z-modal) - 1);
  width: min(408px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 116px));
  display: flex; flex-direction: column;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(32, 31, 54, .28);
  overflow: hidden;
  animation: chat-entra 320ms var(--mola) both;
  transition: width 320ms var(--mola), height 320ms var(--mola);
}
@keyframes chat-entra {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
}
.chat-flutuante.saindo { animation: chat-sai 200ms var(--ease-standard) forwards; }
@keyframes chat-sai { to { opacity: 0; transform: translateY(12px) scale(.98); } }

.chat-flutuante.expandido {
  width: min(720px, calc(100vw - 48px));
  height: calc(100vh - 88px);
}
.chat-acoes { display: flex; gap: 2px; flex: none; }
.chat-flutuante .drawer-head {
  padding: var(--space-4);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.chat-flutuante .drawer-head img { height: 22px; }
.chat-flutuante .drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4); scroll-behavior: smooth; }
.chat-flutuante .drawer-foot {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
}
.chat-flutuante .composer { display: flex; gap: var(--space-2); align-items: center; }
.chat-flutuante .composer .input {
  flex: 1; min-width: 0; min-height: 44px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 0 var(--space-4); background: var(--surface-page);
}
.chat-flutuante .composer .btn { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
.chat-flutuante .msg-user, .chat-flutuante .msg-ai { max-width: 100%; }
.chat-flutuante .msg-ai { grid-template-columns: 34px minmax(0, 1fr); }
.chat-flutuante .msg-ai .bubble { min-width: 0; }
.chat-flutuante .msg-ai .brief-avatar { width: 34px; height: 34px; }

/* O botão que abre a Sab.IA some enquanto a janela está aberta: não faz
   sentido oferecer abrir o que já está aberto. */
body.com-chat .top-actions [data-action="abrir-sabia"] { opacity: .45; pointer-events: none; }

/* Sugestões: bloco de canto suave, nunca pílula com três linhas. */
.chat-flutuante .suggestions { display: grid; gap: var(--space-2); }
.chat-flutuante .suggestion {
  width: 100%; text-align: left; border-radius: 12px;
  padding: var(--space-2) var(--space-3); line-height: 1.35; min-height: 0;
  transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard), transform 160ms var(--mola);
}
.chat-flutuante .suggestion:hover { transform: translateX(2px); }

/* ═══════════════════════════════════════════════════════════════════
   Menu lateral: rótulo em duas linhas, sem corte
   ═══════════════════════════════════════════════════════════════════ */
.sidenav a { align-items: center; padding: var(--space-2) var(--space-3); min-height: 44px; }
.sidenav a .rotulo {
  display: grid; gap: 1px; min-width: 0; line-height: 1.25;
}
.sidenav a .contexto {
  display: block; margin: 0; max-width: none;
  font-size: .68rem; font-weight: 600; color: #8a87a8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidenav a[aria-current] .contexto { color: rgba(255, 255, 255, .78); }

/* ═══════════════════════════════════════════════════════════════════
   MPOE: os quatro passos e as faixas do semáforo
   ═══════════════════════════════════════════════════════════════════ */
.mpoe-passos { display: grid; gap: var(--space-3); }
.mpoe-passo {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3);
  background: var(--surface-sunken); border-radius: 12px; padding: var(--space-3);
}
.mpoe-passo .num {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary); color: #fff; font-weight: 800; font-size: var(--text-caption);
}
.mpoe-passo b { display: flex; align-items: center; gap: 6px; color: var(--text-heading); font-size: var(--text-body-sm); }
.mpoe-passo b .icon { color: var(--color-primary); }
.mpoe-passo p { font-size: var(--text-body-sm); color: var(--text-body); margin-top: 3px; line-height: 1.45; }
.mpoe-faixas { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Cartão que explica a MPOE no topo da frente Oferta e ocupação. */
.mpoe-chamada {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-4);
  align-items: center;
  background: var(--surface-primary-tint);
  border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: var(--space-4);
}
.mpoe-chamada .ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--color-primary); color: #fff;
}
.mpoe-chamada b { display: block; color: var(--text-heading); }
.mpoe-chamada p { font-size: var(--text-body-sm); color: var(--text-body); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   Celular
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 833px) {
  /* Tela de entrada vira uma coluna: o cartão primeiro, a lista depois. */
  .login { padding: 0; align-items: stretch; }
  .login-painel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0; width: 100%; min-height: 100%;
  }
  .login-cartao {
    border-radius: 0; padding: var(--space-5) var(--space-4);
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    box-shadow: none;
  }
  .login-cartao h1 { font-size: 1.45rem; }
  .login-lado { display: none; }
  .login-etapas { min-height: 190px; }

  /* A assessoria vira folha de baixo para cima, ocupando a tela. */
  .chat-flutuante,
  .chat-flutuante.expandido {
    right: 0; bottom: 0; left: 0;
    width: 100%; height: 88vh;
    border-radius: 18px 18px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .chat-flutuante [data-action="chat-tamanho"] { display: none; }
  .chat-flutuante .drawer-head { padding: var(--space-3) var(--space-4); }
  .chat-flutuante .drawer-head h2 { font-size: var(--text-body); }
  .chat-flutuante .drawer-body { padding: var(--space-3); }
  /* O avatar da Sab.IA continua visível dentro do chat. Uma regra global de
     celular esconde .brief-avatar; sem ele a bolha caía na coluna do avatar e
     o texto quebrava a cada duas palavras. */
  .chat-flutuante .msg-ai { grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); }
  .chat-flutuante .msg-ai .brief-avatar { display: grid !important; width: 28px; height: 28px; }
  .chat-flutuante .msg-ai .brief-avatar .icon { width: 15px; height: 15px; }
  .chat-flutuante .msg-ai .bubble { padding: var(--space-3); }

  /* Uma barra só no topo: título curto e as ações essenciais. */
  .top-grupo { background: transparent; padding: 0; }
  .marca-sesc { display: none; }
  .perfil-nome { display: none; }
  .mpoe-chamada { grid-template-columns: 40px 1fr; }
  .mpoe-chamada .btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 599px) {
  .login-cartao { padding: var(--space-4); }
  .login-marca .hub-nome { font-size: 1rem; }
  .login-cartao h1 { font-size: 1.28rem; }
  .chat-flutuante { height: 92vh; }
}

/* Dicionário no celular: a tabela de cinco colunas vira uma ficha por
   indicador. Rolagem horizontal em tabela longa é o pior jeito de ler. */
@media (max-width: 760px) {
  .modal .dicionario thead { display: none; }
  .modal .dicionario, .modal .dicionario tbody, .modal .dicionario tr, .modal .dicionario td { display: block; width: 100%; }
  .modal .dicionario tr {
    border: 1px solid var(--border-subtle); border-radius: 12px;
    padding: var(--space-3); margin-bottom: var(--space-3);
    background: var(--surface-card);
  }
  .modal .dicionario td { border: 0; padding: 2px 0; }
  .modal .dicionario td::before {
    content: attr(data-rotulo) ': ';
    font-weight: 700; color: var(--text-muted); font-size: var(--text-caption);
  }
  .modal .dicionario td.turma::before { content: none; }
  .modal .dicionario td.turma { font-size: var(--text-body); margin-bottom: var(--space-2); }
  .modal .table-wrap { border: 0; background: transparent; }
}

/* ═══════════════════════════════════════════════════════════════════
   Travessia entre telas
   ═══════════════════════════════════════════════════════════════════
   A casca fica parada e só o conteúdo atravessa. Sem isso a troca de
   frente parecia um corte seco de câmera. */
.sidebar { view-transition-name: casca-lateral; }
.topbar { view-transition-name: casca-topo; }

::view-transition-old(root) { animation: vt-sai 170ms var(--ease-standard) both; }
::view-transition-new(root) { animation: vt-entra 340ms var(--mola) both; }
@keyframes vt-sai { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(10px); } }

/* A lateral e o topo só trocam de estado: atravessam com um respiro curto. */
::view-transition-old(casca-lateral), ::view-transition-old(casca-topo) { animation: vt-fade-sai 120ms linear both; }
::view-transition-new(casca-lateral), ::view-transition-new(casca-topo) { animation: vt-fade-entra 200ms linear both; }
@keyframes vt-fade-sai { to { opacity: 0; } }
@keyframes vt-fade-entra { from { opacity: 0; } }

/* Enquanto a travessia roda, nada de rolagem por baixo. */
html.travessia { overflow: hidden; }

/* Fallback para navegador sem View Transitions. */
#conteudo { transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); }
#conteudo.saindo { opacity: 0; transform: translateY(-6px); }
#conteudo.chegando { animation: vt-entra 380ms var(--mola) both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(casca-lateral), ::view-transition-new(casca-lateral),
  ::view-transition-old(casca-topo), ::view-transition-new(casca-topo) { animation: none !important; }
  #conteudo, #conteudo.saindo, #conteudo.chegando { transition: none; animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   A fala da Sab.IA
   ═══════════════════════════════════════════════════════════════════ */
.typing-dots { display: inline-flex; gap: 5px; align-items: center; padding: var(--space-2) 0; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sabia-chrome); }
.typing-dots i:nth-child(2) { animation-delay: .16s; }
.typing-dots i:nth-child(3) { animation-delay: .32s; }

/* A pergunta sai de quem escreveu: entra pela direita. */
.chat-flutuante .msg-user { animation: msg-usuario 320ms var(--mola) both; }
@keyframes msg-usuario { from { opacity: 0; transform: translateX(14px) scale(.97); } }
.chat-flutuante .msg-ai { animation: msg-sabia 340ms var(--mola) both; }
@keyframes msg-sabia { from { opacity: 0; transform: translateX(-10px); } }

/* Depois de prontas, as etapas recolhem para não competir com a resposta. */
.thinking { transition: opacity var(--ritmo) var(--ease-standard), max-height 380ms var(--mola); }
.thinking.recolhida {
  opacity: .5; font-size: var(--text-caption);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--border-subtle);
}
.thinking.recolhida li .icon { color: var(--st-ok); }
.thinking li { animation: bloco-entra 260ms var(--ease-out) both; }

.fala-abertura {
  font-weight: 700; color: var(--text-heading);
  min-height: 1.4em;
}
/* Cursor piscando enquanto a frase é digitada. */
.chat-flutuante.respondendo .fala-abertura::after {
  content: ''; display: inline-block; width: 2px; height: 1em;
  background: var(--color-primary); margin-left: 3px;
  vertical-align: -2px; animation: cursor 900ms steps(2) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }

/* Enquanto responde, o campo espera. */
.chat-flutuante.respondendo .composer .input { opacity: .55; pointer-events: none; }
.chat-flutuante.respondendo .composer .btn { opacity: .55; pointer-events: none; }
.chat-flutuante .suggestions button { animation: bloco-entra 300ms var(--ease-out) both; }
.chat-flutuante .suggestions button:nth-child(2) { animation-delay: 40ms; }
.chat-flutuante .suggestions button:nth-child(3) { animation-delay: 80ms; }
.chat-flutuante .suggestions button:nth-child(4) { animation-delay: 120ms; }
.chat-flutuante .suggestions button:nth-child(n+5) { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .chat-flutuante .msg-user, .chat-flutuante .msg-ai,
  .thinking li, .chat-flutuante .suggestions button { animation: none; }
  .chat-flutuante.respondendo .fala-abertura::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Central de alertas
   ═══════════════════════════════════════════════════════════════════ */
.drawer { background: var(--surface-page); }
.alertas-head { align-items: flex-start; }
.alertas-head h2 { font-size: var(--text-h3); margin: 2px 0 4px; }
.alertas-foot { display: flex; gap: var(--space-2); justify-content: space-between; flex-wrap: wrap; }

.alerta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.alerta {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-default);
  border-radius: 14px; padding: var(--space-4);
  animation: bloco-entra 420ms var(--mola) both;
  transition: box-shadow 200ms var(--ease-standard), transform 200ms var(--mola);
}
.alerta:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.alerta-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.alerta-critica { border-left-color: var(--st-critica); }
.alerta-critica .alerta-ico { background: var(--st-critica-surface); color: var(--st-critica-ink); }
.alerta-atencao { border-left-color: var(--st-atencao); }
.alerta-atencao .alerta-ico { background: var(--st-atencao-surface); color: var(--st-atencao-ink); }
.alerta-excedente { border-left-color: var(--st-excedente); }
.alerta-excedente .alerta-ico { background: var(--st-excedente-surface); color: var(--st-excedente-ink); }

.alerta-corpo { min-width: 0; }
.alerta-num {
  font-size: 1.45rem; font-weight: 800; color: var(--text-heading);
  line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.alerta-num span { font-size: var(--text-body-sm); font-weight: 700; color: var(--text-muted); letter-spacing: 0; }
.alerta-texto { font-size: var(--text-body-sm); color: var(--text-body); margin-top: 4px; line-height: 1.45; }
.alerta-acao {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-3); font-size: var(--text-body-sm); font-weight: 700;
  color: var(--text-link); text-decoration: none;
}
.alerta-acao:hover { text-decoration: underline; }
.alerta-acao .icon { transition: transform 180ms var(--mola); }
.alerta-acao:hover .icon { transform: translateX(3px); }

.alerta-prioridade {
  margin-top: var(--space-5);
  background: var(--surface-primary-tint);
  border-radius: 14px; padding: var(--space-4);
}
.alerta-prioridade h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-h4); color: var(--text-heading);
}
.alerta-prioridade h3 .icon { color: var(--color-primary); }
.prioridade-lista { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 2px; }
.prioridade-lista li {
  display: grid; grid-template-columns: 26px 1fr 16px; gap: var(--space-3);
  align-items: center; padding: var(--space-2); border-radius: 10px;
  transition: background 160ms var(--ease-standard);
}
.prioridade-lista li:hover { background: var(--surface-card); }
.prioridade-lista .pos {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary); color: #fff;
  font-size: var(--text-caption); font-weight: 800;
}
.prioridade-lista a { text-decoration: none; min-width: 0; }
.prioridade-lista a b { display: block; color: var(--text-heading); font-size: var(--text-body-sm); }
.prioridade-lista a small { display: block; color: var(--text-muted); font-size: var(--text-caption); }
.prioridade-lista li .icon { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .alerta { animation: none; }
  .alerta:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Barra de filtros e aviso de recorte
   ═══════════════════════════════════════════════════════════════════ */
.filtros { margin-bottom: 0; gap: var(--space-3) var(--space-4); padding: var(--space-4); border-radius: 14px; }
.filtro { min-width: 140px; }
.filtro label { letter-spacing: .01em; }
.filtro select {
  border-radius: 10px; border-color: var(--border-default);
  transition: border-color 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.filtro select:hover { border-color: var(--color-primary); }
.filtro select:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--surface-primary-tint); }

.filtro-ativo {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-2) !important;
  background: var(--surface-primary-tint);
  border-radius: 12px; padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm); color: var(--text-body);
  animation: bloco-entra 320ms var(--mola) both;
}
.filtro-ativo > .icon { color: var(--color-primary); flex: none; }
.filtro-ativo span { flex: 1; min-width: 220px; }
.filtro-ativo b { color: var(--text-heading); }

/* ═══════════════════════════════════════════════════════════════════
   Procedência do dado: cadastro, fontes e lacunas
   ═══════════════════════════════════════════════════════════════════ */

/* O selo do cabeçalho vira botão: abre o cadastro em vez de só avisar. */
.tag-btn { border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.tag-btn:hover { filter: brightness(.96); }
.tag-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Linha de procedência sob o nome da escola. */
.cad-procedencia {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--text-muted);
}
.cad-linha { color: var(--text-body); }

/* Os três selos que abrem o modal do cadastro. */
.cad-selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.cad-selo {
  background: var(--surface-sunken); border-radius: 12px; padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
}
.cad-selo p { margin: 0; font-size: var(--text-body-sm); color: var(--text-body); }
.cad-selo b { color: var(--text-heading); }

.cad-h3 { font-size: var(--text-h4); margin: var(--space-5) 0 var(--space-2); }

.cad-metodo { margin: 0 0 var(--space-2); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.cad-metodo li { font-size: var(--text-body-sm); color: var(--text-body); }
.cad-metodo b { color: var(--text-heading); }

.cad-lacunas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cad-lacunas li { display: flex; gap: var(--space-3); align-items: flex-start; }
.cad-lacunas > li > .icon { flex: none; margin-top: 2px; color: var(--st-atencao); }
.cad-lacunas b { display: block; color: var(--text-heading); font-size: var(--text-body-sm); }
.cad-lacunas p { margin: 2px 0 0; font-size: var(--text-body-sm); color: var(--text-muted); }

/* DR sem escola regular mapeada. A lacuna é o dado: recebe a tela inteira. */
.aviso-lacuna { border-left: 4px solid var(--st-atencao); }
.aviso-lacuna h2 { display: flex; align-items: center; gap: var(--space-2); }
.aviso-lacuna h2 .icon { color: var(--st-atencao); }
.aviso-lacuna p { max-width: 68ch; }

/* Sesc EAD EJA. */
.ead-topo { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.ead-num { font-size: var(--text-h1); line-height: 1; color: var(--text-heading); margin-right: var(--space-2); }
.lista-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lista-simples li {
  display: grid; gap: 2px; padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken); border-radius: 10px; font-size: var(--text-body-sm);
}
.vazio { color: var(--text-muted); font-size: var(--text-body-sm); }

/* Variação de unidades na tabela do cadastro. */
.data .turma small.delta-up { color: var(--st-ok-ink); }
.data .turma small.delta-down { color: var(--st-critica-ink); }
td .delta-up, td .delta-down { display: inline-block; margin-left: 6px; font-weight: 700; }

@media (max-width: 720px) {
  .cad-selos { grid-template-columns: 1fr; }
}