/* Portal Caravelas — tema escuro fixo, proposta D do hub (`identidade-visual.md` › "Proposta D"; feature 001, D-15).
   Cores de dado e de superfície copiadas dos tokens da identidade (validadas lá pelo `validate_palette.js`);
   `--tinta-2`, `--tinta-3` e `--fio` são a própria tinta com transparência (a identidade não traz o valor; a ratificar).
   Fonte Figtree quando instalada no aparelho, senão a do sistema: nenhuma fonte vem de fora (sem CDN, ADR-001 S-05). */

:root {
  --pagina: #091a27;
  --superficie: #132331;
  --superficie-2: #1c3041;
  --menu: #071725;
  --marca: #1d5d8c;
  --azul-logo: #022356;
  --entrada-fundo: #ffffff;
  --entrada-tinta: #0f1f33;
  --entrada-tinta-2: #3d4d60;
  --entrada-borda: #8796a8;
  --entrada-foco: #1479b0;
  --entrada-aviso: #eef2f6;
  --tinta: #e2e9ee;
  --tinta-2: rgb(226 233 238 / 72%);
  --tinta-3: rgb(226 233 238 / 50%);
  --fio: rgb(226 233 238 / 10%);
  --borda: rgb(226 233 238 / 18%);
  --dado: #1e9fd0;
  --destaque: #c38300;
  --neutro: #495e6d;
  --ref: #e2e9ee;
  --foco: #73c3e9;
  --o1: #106c8f;
  --o2: #2e81a4;
  --o3: #4697bb;
  --o4: #5dadd1;
  --o5: #73c3e9;
  --fonte: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-grafico: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--pagina);
  color: var(--tinta);
  font: 400 14px/1.4 var(--fonte);
  min-height: 100vh;
}
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--foco); }

/* ---------- tela de entrada (opção C, Rafael 2026-11-04; identidade-visual.md § Tela de entrada) ---------- */
body.pagina-entrada { background: var(--entrada-fundo); color: var(--entrada-tinta); }
.entrada {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 100vh; background: var(--entrada-fundo);
  color: var(--entrada-tinta);
}
.entrada-logo {
  background: var(--azul-logo); display: flex; align-items: center; justify-content: center; padding: 64px;
}
.entrada-logo img { display: block; width: 100%; max-width: 440px; height: auto; }
.entrada-lado { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.entrada-formulario { width: 100%; max-width: 360px; display: grid; gap: 8px; }
.entrada-traco { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--azul-logo); }
.entrada-titulo { margin: 6px 0 20px; font-size: 34px; font-weight: 700; letter-spacing: -0.01em; color: var(--azul-logo); }
.entrada-formulario label { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--entrada-tinta-2); }
.entrada-formulario input {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--entrada-borda); border-radius: 10px; background: var(--entrada-fundo);
  color: var(--entrada-tinta); font-size: 16px;
}
.entrada-formulario button {
  min-height: 50px; margin-top: 16px; border: 0; border-radius: 10px; background: var(--azul-logo); color: var(--entrada-fundo);
  font-size: 16px; font-weight: 700;
}
.entrada :focus-visible { outline-color: var(--entrada-foco); }
.entrada .aviso { background: var(--entrada-aviso); color: var(--entrada-tinta); }
@media screen and (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrada-logo { padding: 56px 32px; }
  .entrada-logo img { max-width: 300px; }
  .entrada-lado { align-items: flex-start; padding: 36px 24px 24px; }
  .entrada-titulo { font-size: 28px; }
}

/* ---------- entrar (troca de senha; a tela de entrada usa .entrada acima) ---------- */
.entrar {
  max-width: 340px; margin: 12vh auto 0; padding: 28px 24px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 10px;
}
.entrar h1 { font-size: 18px; margin: 12px 0 18px; }
.formulario-entrar { display: grid; gap: 8px; }
.formulario-entrar label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.formulario-entrar input {
  min-height: 44px; padding: 8px 10px; background: var(--pagina); border: 1px solid var(--borda); border-radius: 6px;
}
.formulario-entrar button {
  min-height: 44px; margin-top: 10px; background: var(--dado); color: var(--pagina); font-weight: 700;
  border: 0; border-radius: 6px;
}
.aviso { margin: 4px 0 0; color: var(--tinta); background: var(--superficie-2); padding: 8px 10px; border-radius: 6px; }
.marca {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: var(--marca); color: var(--tinta); font-weight: 700;
}

/* ---------- painel de uma tela ---------- */
.pagina-painel {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr auto;
  grid-template-areas: "menu titulo" "menu painel" "menu estado";
}
.menu {
  grid-area: menu; background: var(--menu); display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 12px 0;
}
.modulo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--tinta-3); }
.modulo.ativo { background: var(--superficie-2); color: var(--tinta); }
.titulo {
  grid-area: titulo; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 16px;
  border-bottom: 1px solid var(--fio);
}
.titulo h1 { font-size: 15px; margin: 0; font-weight: 700; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filtros label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-2); min-width: 0; }
/* alvo de toque ≥ 44 px nos seletores, em "aplicar" e em "limpar" (ENTREGA §1; 002 audit A006) */
.filtros select {
  min-height: 44px; max-width: 100%; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px;
  padding: 4px 8px;
}
.filtros .aplicar, .sair button {
  min-height: 44px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 6px; padding: 4px 12px;
}
.filtros .limpar {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 8px;
}
/* Todo o histórico: ano, sub e turma desabilitados, visíveis e apagados (002 D-15, RN-01, RN-09); a turma mostra a
   explicação da D-08 ("para ver uma turma, escolha um ano") como texto da opção, em itálico para não parecer valor */
.filtros label.apagado { color: var(--tinta-3); }
.filtros select:disabled {
  background: var(--pagina); border-color: var(--fio); color: var(--tinta-3); cursor: not-allowed;
}
.filtros select[name="turma"]:disabled { font-style: italic; }
.sair { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-2); }
.sair .trocar-senha, .entrar .voltar { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 8px; }

.painel { grid-area: painel; padding: 12px 16px; display: grid; gap: 12px; align-content: start; }
/* faixa nas 12 colunas da grade: herói em 4, os outros 4 números em 2 cada (o desktop, no fim do arquivo) */
.faixa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.kpi {
  text-align: left; background: var(--superficie); border: 1px solid var(--fio); border-radius: 10px;
  padding: 10px 12px; display: grid; gap: 2px; min-height: 44px;
}
.kpi .r { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.kpi .v { font-size: 28px; font-weight: 700; line-height: 1.1; }
.kpi.heroi { grid-column: span 4; background: var(--superficie-2); }
.kpi.heroi .v { font-size: 40px; }
.kpi .s { font-size: 12px; color: var(--tinta); }
.kpi .ref { font-size: 11.5px; color: var(--tinta-2); }

.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.cartao {
  grid-column: 1 / span 4; background: var(--superficie); border: 1px solid var(--fio); border-radius: 10px;
  padding: 10px 12px; min-height: 220px; display: grid; grid-template-rows: auto 1fr;
}
/* posição na grade 12 × 2 (ENTREGA §1 › Grade a 1366×768) */
.c1 { grid-column: 1 / span 3; grid-row: 1; }
.c2 { grid-column: 4 / span 3; grid-row: 1 / span 2; }
.c3 { grid-column: 7 / span 6; grid-row: 1; }
/* linha 2 trocada no painel v2 (006, D-20): o cartão 5 nas cols. 1–3 e o 4 nas 7–12, com a largura do .c3 (D-10) */
.c4 { grid-column: 7 / span 6; grid-row: 2; }
.c5 { grid-column: 1 / span 3; grid-row: 2; }
.cabeca { display: flex; align-items: center; gap: 8px; }
.cabeca h2 { font-size: 13.5px; margin: 0; font-weight: 700; flex: 1; }
.info, .abrir-tabela {
  min-width: 28px; min-height: 28px; background: transparent; border: 1px solid var(--borda); border-radius: 999px;
  font-size: 12px; color: var(--tinta-2);
}
.abrir-tabela { border-radius: 6px; padding: 2px 8px; }
/* selo do modo nos cartões 4 e 5 (RF-34) e legenda do cartão 2 numa linha abaixo do título (ficha 2 v4): só tokens */
.selo { font-size: 11px; color: var(--tinta-2); border: 1px solid var(--borda); border-radius: 999px; padding: 1px 8px; }
.legenda { margin: 0; font-size: 12px; color: var(--tinta-2); }
.grafico { width: 100%; height: 160px; }
/* item de grade encolhe abaixo do SVG já desenhado: sem isto, estreitar a janela (F12, celular girado) prende a página
   na largura antiga, porque o redesenho do resize mede a caixa esticada (test_css_estreitar.py) */
.grade > *, .painel > *, .faixa > *, .grafico { min-width: 0; }
/* célula alta do cartão 2 (grade 12 × 2, duas linhas): o gráfico em painéis ocupa a altura da célula (D-14) */
.c2 .grafico { height: 100%; min-height: 360px; }
/* cartão 3 (série das noites, 6 colunas × 1 linha): o gráfico ocupa a altura da célula; o contorno do rótulo exige paint-order */
.c3 .grafico { height: 100%; min-height: 200px; }
.c3 svg text { paint-order: stroke fill; }
/* cartão 4: média e nº de notas com o mesmo contorno (conferência da 006, 2026-11-03; test_css_contorno_rotulos.py) */
.c4 svg text { paint-order: stroke fill; }
/* cartão 4 (notas 5 a 1, barras sem eixo, 3 colunas × 1 linha): o gráfico ocupa a altura da célula */
.c4 .grafico { height: 100%; min-height: 180px; }
.vazio { align-self: center; color: var(--tinta-2); }

/* ---------- gaveta (a prova a um clique) ---------- */
.veu { position: fixed; inset: 0; background: rgb(7 23 37 / 60%); }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); overflow-y: auto; overflow-x: hidden;
  background: var(--superficie); border-left: 1px solid var(--borda); padding: 18px 20px; z-index: 2;
}
.gaveta h2 { font-size: 16px; margin: 0 32px 6px 0; }
.gaveta .fechar {
  position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; background: transparent; border: 0;
  font-size: 22px; color: var(--tinta-2);
}
.gaveta .subtitulo, .gaveta .cabecalho-tabela { color: var(--tinta-2); font-size: 12.5px; }
.gaveta .rodape { color: var(--tinta-2); font-size: 12px; }
.tabela { overflow: auto; max-height: 60vh; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th { position: sticky; top: 0; background: var(--superficie); text-align: left; font-weight: 600; color: var(--tinta-2); }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--fio); }
.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.soma td, tr.linha-soma td { font-weight: 700; border-top: 2px solid var(--borda); }
.gaveta p.referencia { color: var(--tinta-2); font-size: 12.5px; margin: 4px 0 8px; }
/* título curto da coluna de presenças: só aparece até 420 px (002 D-12) */
.rotulo-curto { display: none; }

.barra-de-estado {
  grid-area: estado; position: sticky; bottom: 0; padding: 8px 16px; font-size: 11.5px; color: var(--tinta-2);
  background: var(--menu); border-top: 1px solid var(--fio);
}

/* balão do Vega (`moldes-vega-lite.md` §0) */
#vg-tooltip-element.portal-theme {
  background: var(--tinta); color: var(--pagina); border: 0; border-radius: 6px; font: 12px var(--fonte);
}

/* ---------- celular (ENTREGA §1: ≤ 900 px) ---------- */
@media (max-width: 900px) {
  .pagina-painel { grid-template-columns: 1fr; grid-template-areas: "menu" "titulo" "painel" "estado"; }
  .menu { flex-direction: row; justify-content: flex-start; padding: 8px 12px; }
  .faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.heroi { grid-column: 1 / -1; }
  .grade { grid-template-columns: 1fr; }
  .cartao { grid-column: 1 / -1; }
  .c1, .c2, .c3, .c4, .c5 { grid-column: 1 / -1; grid-row: auto; }
  .c2 .grafico { height: 360px; }
  .c3 .grafico { height: 220px; }
  .c4 .grafico { height: 200px; }
  .sair { margin-left: 0; }
  /* 5 controles (RF-34): a 360 px "Formação" + a opção mais longa não cabem numa linha; o seletor desce */
  .filtros label { flex-wrap: wrap; }
}

/* ---------- gaveta no celular (002 D-12, RF-18; ENTREGA §1 › A prova a um clique): até 420 px, sem rolagem para o
   lado. Só CSS: o HTML segue com as 5 colunas e a linha Soma inteira; a frase acima da tabela mantém os convites. */
@media (max-width: 420px) {
  .col-convites, .col-some-420 { display: none; }
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }
  .gaveta { padding: 14px 12px; }
  .gaveta h2, .gaveta p { overflow-wrap: anywhere; }
  .tabela table { table-layout: fixed; }
  .tabela th, .tabela td { padding: 6px 4px; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- lista do cartão 5 (D-12): cabeçalho fixo, rolagem a partir de ~12 linhas ---------- */
.lista-cartao-5 { max-height: 380px; overflow-y: auto; overflow-x: hidden; }
.lista-cartao-5 table { table-layout: fixed; }
.lista-cartao-5 th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.lista-cartao-5 td { overflow-wrap: anywhere; }

/* ---------- desktop (ENTREGA §1: uma tela só, sem rolagem a 1366×768; a grade recalcula a 1920×1080) ----------
   A página tem a altura da janela; a faixa fica com a altura dela e as 2 linhas da grade dividem o resto por igual.
   Nada tem piso de altura: cada gráfico mede a caixa da célula (painel.js) e cabe nela; só a lista do cartão 5 rola,
   por dentro. A barra de estado é a última linha da página, no pé, sem cobrir nada. Pedido do Rafael (2026-10-25):
   "proporcionalmente distribuídos e simétricos" — faixa nas mesmas 12 colunas e no mesmo espaço da grade. */
@media (min-width: 901px) {
  .pagina-painel { height: 100vh; height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; }
  .painel { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; min-height: 0; }
  .faixa { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
  .kpi { grid-column: span 2; align-content: start; }
  /* Rafael (2026-10-25): herói na largura do cartão 1 e o 2º número na do cartão 2; os outros 3 nas 6 colunas restantes */
  .kpi.heroi { grid-column: span 3; }
  #faixa-cartao-2 { grid-column: span 3; }
  .grade { grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .cartao { min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); row-gap: 6px; }
  /* cartão 1 por id: o bloco dele segue byte a byte (D-14) e não leva a classe `c1` */
  #cartao-1 { grid-column: 1 / span 3; grid-row: 1; }
  /* cartão 2: cabeçalho, legenda e o gráfico com o resto da célula */
  .c2 { grid-template-rows: auto auto minmax(0, 1fr); }
  .grafico, .c2 .grafico, .c3 .grafico, .c4 .grafico { height: 100%; min-height: 0; }
  /* cartão 5 na célula de 3 colunas (006, D-20): uma coluna só, o gráfico com 92px e a lista com o resto da célula;
     sem o gráfico (uma turma, ou grupo em Todo o histórico), o _cartao5.html põe `sem-grafico` e a lista fica com a
     célula toda. Só a lista rola, por dentro. */
  .c5 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cabeca" "grafico" "lista"; grid-template-rows: auto 92px minmax(0, 1fr);
  }
  .c5.sem-grafico { grid-template-areas: "cabeca" "lista"; grid-template-rows: auto minmax(0, 1fr); }
  .c5 > .cabeca { grid-area: cabeca; }
  .c5 > .grafico { grid-area: grafico; }
  .c5 > #lista-cartao-5, .c5 > .vazio { grid-area: lista; }
  .lista-cartao-5 th, .lista-cartao-5 td { padding: 4px 8px; }
  .lista-cartao-5 th:first-child { width: 3em; }
  #lista-cartao-5 { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  #lista-cartao-5 .titulo-lista { margin: 0 0 4px; }
  .lista-cartao-5 { min-height: 0; }
  .barra-de-estado { position: static; }
}