/* base/radar.css: o sistema de desenho v5 do Radar (brief prompts/BRIEF-ALTA-V5.md, 11/09/2026).
   Única dona das cores: tela nenhuma redeclara token. Cada seção diz de onde a medida veio. */

/* 1. Tokens do tema claro, verbatim do brief §3; --*-texto são derivados só para letra sobre fundo fraco (o
   verde, o âmbar e o vermelho do brief dão 3,71, 3,82 e 4,32 sobre os fracos, abaixo do piso 4,5). */
:root{
  color-scheme:light;
  --fundo:#F6F4EF; --papel:#FFFFFF; --papel-2:#FBFAF7; --filete:#E6E2D8;
  --tinta:#1A1A1A; --tinta-fraca:#6B6A64; --tinta-tenue:#9A978E;
  --azul:#4545E5; --azul-fraco:#ECEBFD; --lavanda:#E0DDFE;
  --verde:#1D8977; --verde-fraco:#E2F2EE; --neon:#00D563;
  --ambar:#B4650A; --ambar-fraco:#FBEEDC; --vermelho:#C2412D; --vermelho-fraco:#FBE7E3;
  --sombra:0 1px 2px rgba(20,27,31,.05), 0 8px 24px -12px rgba(20,27,31,.14);
  --verde-texto:#0F6E5E; --ambar-texto:#8A4D08; --vermelho-texto:#A3321D;
  /* paleta de séries do gráfico em ordem fixa (brief §4: verde, azul, lavanda-escura, âmbar, vermelho; neon só destaque) */
  --serie-1:#1D8977; --serie-2:#4545E5; --serie-3:#6E6BC4; --serie-4:#B4650A; --serie-5:#C2412D; --destaque:#00D563;
  --sombra-coluna:rgba(20,27,31,.18); --sombra-chave:rgba(20,27,31,.25);
  /* selo de produto, verbatim de radar-geral.html (D6: cores dos arquivos de marca do RegenCodes) */
  --selo-tinta:#144848; --selo-g1:#E9D6CB; --selo-g2:#C59368;
  --texto:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"DejaVu Sans Mono",monospace;
  --largura:1184px; /* 1120 de conteúdo mais 32 de margem de cada lado (brief §3) */
}
/* 2. Tokens do tema escuro, verbatim do brief §3: o aparelho manda, salvo data-theme="light" (mecânica de logo-radar.html) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --fundo:#091A24; --papel:#0F2433; --papel-2:#132B3B; --filete:#1F3A4B;
  --tinta:#EEF2F4; --tinta-fraca:#A9B6BE; --tinta-tenue:#7A8A94;
  --azul:#8C8CFF; --azul-fraco:#1C2456; --lavanda:#22304F;
  --verde:#3DBFA4; --verde-fraco:#123A36; --neon:#00D563;
  --ambar:#E6A44A; --ambar-fraco:#3A2A10; --vermelho:#F07A66; --vermelho-fraco:#3D1B16;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --verde-texto:#3DBFA4; --ambar-texto:#E6A44A; --vermelho-texto:#F07A66;
  --serie-1:#3DBFA4; --serie-2:#8C8CFF; --serie-3:#A9A6E6; --serie-4:#E6A44A; --serie-5:#F07A66;
  --sombra-coluna:rgba(0,0,0,.5); --sombra-chave:rgba(0,0,0,.5);
  --selo-tinta:#F6F2E8; --selo-g1:#F6F2E8; --selo-g2:#D2A57F;}}
/* 3. O botão vence o aparelho: data-theme="dark" repete os mesmos valores (logo-radar.html) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --fundo:#091A24; --papel:#0F2433; --papel-2:#132B3B; --filete:#1F3A4B;
  --tinta:#EEF2F4; --tinta-fraca:#A9B6BE; --tinta-tenue:#7A8A94;
  --azul:#8C8CFF; --azul-fraco:#1C2456; --lavanda:#22304F;
  --verde:#3DBFA4; --verde-fraco:#123A36; --neon:#00D563;
  --ambar:#E6A44A; --ambar-fraco:#3A2A10; --vermelho:#F07A66; --vermelho-fraco:#3D1B16;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --verde-texto:#3DBFA4; --ambar-texto:#E6A44A; --vermelho-texto:#F07A66;
  --serie-1:#3DBFA4; --serie-2:#8C8CFF; --serie-3:#A9A6E6; --serie-4:#E6A44A; --serie-5:#F07A66;
  --sombra-coluna:rgba(0,0,0,.5); --sombra-chave:rgba(0,0,0,.5);
  --selo-tinta:#F6F2E8; --selo-g1:#F6F2E8; --selo-g2:#D2A57F;}

/* 4. Reset curto: caixa, margens e mídia (referência raio-x) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--texto);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img,svg,canvas{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}

/* 5. Tipografia: escala do brief §3 (kicker 11, corpo 14, apoio 12, h1 26/22, h2 16); número em Plex Mono tabular */
.kicker{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--azul);margin:0 0 6px}
h1{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em;text-wrap:balance;color:var(--verde-texto)} /* a voz verde da referência aprovada (revisão de 12/09): 6,15 sobre papel no claro, 6,96 no escuro */
.sub{font-size:13.5px;color:var(--tinta-fraca);max-width:62ch;line-height:1.5}
.apoio{font-size:12px;color:var(--tinta-fraca)}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
strong,b{font-weight:600}
a{color:var(--azul)}
code{font-family:var(--mono);font-size:.92em}
@media (max-width:719px){h1{font-size:22px}}

/* 6. Layout: largura máxima 1120 de conteúdo, margens 32 no computador e 20 no celular (brief §3) */
.pagina{width:100%;max-width:var(--largura);margin:0 auto;padding:24px 32px 40px;flex:1 0 auto}
.cabeca{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin:0 0 20px}
.cabeca h1{margin-right:4px}
.cabeca .a-direita{margin-left:auto}
@media (max-width:719px){.pagina{padding:20px 20px 32px}.cabeca{margin-bottom:16px}}

/* 7. Cabeçalho .topo: 56 px, uma marca (régua de PADRAO-CABECALHO-RODAPE.md), chip de contexto, menu de cinco, botão de tema */
.topo{background:var(--papel);position:relative}
.topo::after{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--verde),var(--neon))} /* a onda da Next fecha o cabeçalho: neon só no diferencial (brief §3); fica embaixo para o canto superior seguir sendo papel (mede_regua_do_cabecalho.mjs lê o fundo ali) */
.topo-dentro{max-width:var(--largura);margin:0 auto;padding:0 32px;display:flex;align-items:center;flex-wrap:wrap;gap:0 20px;min-height:56px}
.marca-link{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);text-decoration:none;flex:none}
/* a régua das marcas, verbatim de logo-radar.html (R do Radar em 20 px; medir com mede_regua_do_cabecalho.mjs) */
.marcas{display:flex;align-items:center;gap:20px;height:20px}
.marca-radar{display:block;height:20.61px;width:auto;position:relative;top:-0.43px;transform:translateY(0.75px);overflow:visible}
.risco{width:1px;height:22px;background:currentColor;opacity:.34;flex:none}
.contexto{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinta-fraca);min-width:0;flex:0 1 auto}
.contexto .chip-contexto{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--filete);border-radius:999px;
  background:var(--papel-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:border-color .15s,background .15s}
.contexto .chip-contexto > b,.contexto .chip-contexto > span{font-weight:500;color:var(--tinta-fraca)} /* o caminho: o degrau onde se está é o último, e é ele que pesa */
.contexto .chip-contexto > :last-child{color:var(--tinta);font-weight:600}
.contexto i{font-style:normal;color:var(--tinta-fraca)}
.contexto span{overflow:hidden;text-overflow:ellipsis}
.contexto[aria-disabled="true"]{cursor:default}
.contexto[aria-disabled="true"]:hover .chip-contexto{border-color:var(--filete);background:var(--papel-2)}
.contexto:hover .chip-contexto{border-color:var(--azul);background:var(--azul-fraco)}
.menu{display:flex;gap:22px;margin-left:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a,.menu span{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:56px;padding:0 2px;color:var(--tinta-fraca);text-decoration:none;font-size:13px;white-space:nowrap;
  transition:color .15s}
.menu a::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:2px;border-radius:1px;background:transparent;transition:background .15s} /* o mesmo desenho de .abas-secao: o sublinhado fica a 6 px do pé, e a onda de 2 px vem depois; colados, os dois liam como faixa dupla (revisão de 12/09) */
.menu a:hover{color:var(--tinta)}
.menu a[aria-current="page"]{color:var(--tinta);font-weight:600}
.menu a[aria-current="page"]::after{background:var(--azul)} /* aba viva: sublinhado 2 px azul, peso 600 */
.menu span[aria-disabled="true"]{cursor:default} /* tela v5 que ainda não existe no pacote: fica sem link, nunca cai em 404 (rotaNoAr em radar.js) */
.tema{margin-left:auto;appearance:none;background:none;border:0;cursor:pointer;color:var(--tinta-fraca);width:44px;height:44px;display:grid;place-items:center;
  border-radius:10px;padding:0;flex:none;transition:background .15s,color .15s} /* 44 px de toque (README regra 9) */
.tema:hover{background:var(--azul-fraco);color:var(--azul)}
.tema svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tema .sol{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tema .sol{display:block}:root:not([data-theme="light"]) .tema .lua{display:none}}
:root[data-theme="dark"] .tema .sol{display:block}
:root[data-theme="dark"] .tema .lua{display:none}
@media (min-width:900px){.menu{margin-left:auto}.tema{margin-left:0}} /* mesa: marca e contexto à esquerda, menu e tema à direita; antes tudo encostava à esquerda e sobravam 400 px de vazio antes do botão (medido a 1440, 12/09) */
@media (max-width:899px){ /* celular: o menu desce para a segunda linha, rola de lado, sem hambúrguer */
  .topo-dentro{padding:0 16px;gap:0 12px}
  .menu{order:3;flex:1 0 100%;margin:0;gap:20px;border-top:1px solid var(--filete)}
  .menu a,.menu span{height:44px}
  .contexto .chip-contexto{font-size:12px;padding:0 10px}
}

/* 8. Rodapé .rodape: next · risco · Berclah com a régua de PADRAO-CABECALHO-RODAPE.md §2 e §3; linha de carga em 11,5 px */
.rodape{margin-top:auto;border-top:1px solid var(--filete);font-size:11.5px;color:var(--tinta-fraca)}
.rodape-dentro{max-width:var(--largura);margin:0 auto;padding:20px 32px 36px}
.marcas-rodape{display:flex;align-items:center;gap:14px;height:11px;margin:0 0 12px;color:var(--tinta)}
.marca-next{display:block;height:14.83px;width:auto;position:relative;top:-0.96px}
.marca-berclah{display:block;height:15.71px;width:auto;position:relative;top:-1.11px;transform:translateY(-0.20px)}
.marcas-rodape .risco{height:13px}
.carga{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px}
@media (max-width:719px){.rodape-dentro{padding:16px 20px 28px}}

/* 9. Bloco: cartão leve (papel, filete, raio 14, sombra suave, padding 20/24), separação de 28 px (brief §1 e §3) */
.bloco{background:var(--papel);border:1px solid var(--filete);border-radius:14px;box-shadow:var(--sombra);padding:20px 24px;min-width:0}
.bloco + .bloco{margin-top:28px}
.cabeca-bloco{display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;margin:0 0 12px}
.cabeca-bloco .a-direita{margin-left:auto}
.titulo-bloco{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--verde-texto)} /* a voz verde da referência, como o h1 */
.legenda-bloco{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--tinta-fraca)} /* vazia em repouso: o toque na dica escreve aqui (README regra 2) */
.legenda-bloco:empty{display:none}
.nota{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--tinta-fraca);max-width:82ch} /* nota só onde há um porquê (referência) */
@media (max-width:719px){.bloco{padding:16px;border-radius:12px}}

/* 10. Cartão de métrica: rótulo em caixa alta, valor em mono 28 (36 no que manda), moldura 2 px no que manda (CONVENCOES §5, brief §3) */
.grade-cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cartao{background:var(--papel-2);border:1px solid var(--filete);border-radius:12px;padding:12px 12px;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.cartao .rotulo{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-fraca);line-height:1.3}
.cartao .valor{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:18px;font-weight:500;line-height:1.2;margin-top:4px;white-space:nowrap;letter-spacing:-.01em}
.cartao .sub{font-size:11.5px;color:var(--tinta-fraca);margin-top:2px;max-width:none}
.cartao.manda{grid-column:1/-1;border:2px solid var(--verde)}
.cartao.manda .valor{font-size:28px;color:var(--verde-texto);font-weight:500}
.cartao.forte .valor{color:var(--verde-texto)}
.cartao.ausente .valor{color:var(--tinta-fraca)}
@media (min-width:900px){
  .grade-cartoes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cartao{padding:14px 16px}
  .cartao .valor{font-size:clamp(20px,2.3vw,28px)}
  /* o cartão que manda ocupa duas colunas (o número de 36 px não cabe em uma) e se deita: rótulo e sub à esquerda, o número à
     direita, ocupando a largura em vez de deixar metade da caixa vazia (medido a 1440 em 12/09: 530 px de caixa para 330 de conteúdo) */
  .cartao.manda{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;gap:0 16px;align-items:center}
  .cartao.manda .rotulo{grid-column:1;grid-row:1;align-self:end}
  .cartao.manda .sub{grid-column:1;grid-row:2;align-self:start}
  .cartao.manda .valor{grid-column:2;grid-row:1/span 2;margin-top:0;font-size:clamp(28px,3vw,36px)}
}

/* 11. Pílula de estado: fundo fraco e letra do token *-texto (piso 4,5 medido nos dois temas) (referência .ov-tag) */
.pilula{display:inline-block;font-family:var(--texto);font-size:11px;font-weight:600;line-height:16px;padding:2px 8px;border-radius:20px;white-space:nowrap;vertical-align:middle}
.pilula-bom{background:var(--verde-fraco);color:var(--verde-texto)}
.pilula-atencao{background:var(--ambar-fraco);color:var(--ambar-texto)}
.pilula-critico{background:var(--vermelho-fraco);color:var(--vermelho-texto)}
.pilula-neutro{background:var(--fundo);color:var(--tinta-fraca);box-shadow:inset 0 0 0 1px var(--filete)}

/* 12. Barra na célula: 5 px, mínimo 46, máximo 132, margem 5px 0 0 auto (CONVENCOES §2) */
.barra-cel{display:block;height:5px;min-width:46px;max-width:132px;margin:5px 0 0 auto;border-radius:3px;background:var(--serie-1)}
.barra-cel.vazia{min-width:0;width:0} /* zero medido é trilha vazia, nunca um toco de 46 px */

/* 13. Tabela: rola dentro da moldura, primeira coluna fixa, cabeçalho lavanda fixo, zebra, número à direita em mono, total com 2 px (referência e CONVENCOES §1, §3, §4) */
.rola{position:relative}
.moldura{overflow:auto;max-height:560px;border:1px solid var(--filete);border-radius:10px;background:var(--papel);-webkit-overflow-scrolling:touch}
.moldura:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
thead th{position:sticky;top:0;z-index:2;background:var(--lavanda);color:var(--tinta);text-align:right;font-weight:600;font-size:11px;letter-spacing:.02em;
  padding:9px 10px;white-space:nowrap;border-bottom:1px solid var(--filete)}
th:first-child,td:first-child,th[scope="row"]{text-align:left}
tbody td,tbody th{padding:7px 10px;border-top:1px solid var(--filete);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:400}
tbody tr:first-child td,tbody tr:first-child th{border-top:0}
tbody td:first-child,tbody th[scope="row"]{font-family:var(--texto);font-weight:600;text-align:left;font-variant-numeric:normal}
tbody tr:nth-child(even) td,tbody tr:nth-child(even) th{background:var(--papel-2)}
tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th{background:var(--papel)}
thead th:first-child,tbody td:first-child,tbody th:first-child,tfoot th:first-child,tfoot td:first-child{position:sticky;left:0;z-index:1}
thead th:first-child{z-index:3}
tfoot th,tfoot td{padding:8px 10px;border-top:2px solid var(--verde);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;background:var(--papel);white-space:nowrap}
tfoot th[scope="row"]{font-family:var(--texto);text-align:left}
td.ausente,th.ausente{color:var(--tinta-fraca)}
.celula-texto{font-family:var(--texto);font-variant-numeric:normal} /* a classe (0,0,1,0) já vence tbody td (0,0,0,2): sem !important */
/* turma futura é uma frase numa linha só (AUTOPSIA §7): a célula de colspan mede a tabela inteira e por isso não gruda; o texto dentro dela
   é que fica sticky, e acompanha a rolagem da moldura (medido a 390 em 12/09: antes, a linha virava uma faixa vazia) */
tbody .linha-frase th,tbody .linha-frase td{position:static;text-align:left;font-family:var(--texto);font-weight:400;font-variant-numeric:normal;color:var(--tinta-fraca);white-space:nowrap}
.linha-frase .frase{position:sticky;left:10px;display:inline-block}
.rola[data-rola="esquerda"] td:first-child,.rola[data-rola="esquerda"] th:first-child,
.rola[data-rola="ambos"] td:first-child,.rola[data-rola="ambos"] th:first-child{box-shadow:1px 0 0 var(--filete),10px 0 12px -8px var(--sombra-coluna)} /* a aresta da coluna fixa: filete e sombra enquanto há conteúdo passando por baixo */
/* o sinal de rolagem: "›" num chip de papel de 22 px, no canto de cima da moldura, aceso só no estouro real (CONVENCOES §1). É chip,
   e não texto solto com degradê, para ler como controle por cima da tabela: o degradê de 34 px sobre o cabeçalho lavanda apagava a
   última letra da coluna cortada ("CTR" virava "CT›", medido a 390 em 12/09) */
.rola::before,.rola::after{position:absolute;top:7px;width:22px;height:22px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:4;
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--tinta-fraca);
  background:var(--papel);border:1px solid var(--filete);border-radius:7px;box-shadow:var(--sombra)}
.rola::after{content:"›";right:7px}
.rola[data-rola="direita"]::after,.rola[data-rola="ambos"]::after{opacity:1}
/* a fila de turmas dentro de .rola.rola-fila (Radar.seletorTurma): sem coluna fixa que sombreie, o lado esquerdo ganha o espelho "‹";
   os dois chips ficam no meio da altura dos botões */
.rola-fila::before{content:"‹";left:7px}
.rola-fila::before,.rola-fila::after{top:50%;margin-top:-12px}
.rola-fila[data-rola="esquerda"]::before,.rola-fila[data-rola="ambos"]::before{opacity:1}

/* 14. Abas de seção e grupo de opções: junto do título, mesma linha, 44 px de toque (regra_abas_secao_junto_ao_titulo.mjs) */
.abas-secao{display:flex;gap:18px;min-width:0;overflow-x:auto;scrollbar-width:none}
.abas-secao::-webkit-scrollbar{display:none}
.abas-secao a,.abas-secao button{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
  color:var(--tinta-fraca);font-size:13px;text-decoration:none;white-space:nowrap;transition:color .15s}
.abas-secao a::after,.abas-secao button::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:1px;background:transparent;transition:background .15s}
.abas-secao a:hover,.abas-secao button:hover{color:var(--tinta)}
.abas-secao [aria-current],.abas-secao [aria-selected="true"],.abas-secao [aria-pressed="true"]{color:var(--tinta);font-weight:600}
.abas-secao [aria-current]::after,.abas-secao [aria-selected="true"]::after,.abas-secao [aria-pressed="true"]::after{background:var(--azul)}
.grupo-opcoes{display:inline-flex;border:1px solid var(--filete);border-radius:12px;background:var(--papel-2);padding:0;overflow:hidden;max-width:100%}
.grupo-opcoes button{appearance:none;border:0;background:none;cursor:pointer;min-height:44px;padding:0 14px;font-size:12.5px;color:var(--tinta-fraca);white-space:nowrap;
  transition:background .15s,color .15s}
.grupo-opcoes button + button{border-left:1px solid var(--filete)}
.grupo-opcoes button:hover{color:var(--tinta)}
.grupo-opcoes button[aria-pressed="true"]{background:var(--azul-fraco);color:var(--azul);font-weight:600}
@media (max-width:719px){.grupo-opcoes{display:flex;width:100%}.grupo-opcoes button{flex:1;padding:0 8px}}

/* 15. Interruptor: role=switch, o input invisível cobre o rótulo inteiro (44 px de toque) (radar-geral.html) */
.interruptor{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;font-size:12.5px;color:var(--tinta-fraca);cursor:pointer;user-select:none}
.interruptor input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.interruptor .chave{width:34px;height:20px;border-radius:10px;background:var(--filete);position:relative;flex:none;transition:background .15s}
.interruptor .chave::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--papel);box-shadow:0 1px 2px var(--sombra-chave);transition:transform .15s}
.interruptor input:checked + .chave{background:var(--azul)}
.interruptor input:checked + .chave::after{transform:translateX(14px)}
.interruptor input:focus-visible + .chave{outline:2px solid var(--azul);outline-offset:2px}

/* 16. Seletor de período (todo, um mês, intervalo: README regra 10) e seletor de turma (fila de datas clicáveis: autópsia regra 8;
   a fila mora numa .rola.rola-fila, que Radar.seletorTurma embrulha, com o escolhido sempre à vista e o sinal "‹ ›" dos dois lados) */
.seletor-periodo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.datas{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--tinta-fraca)}
.datas label{display:inline-flex;align-items:center;gap:6px}
.datas input{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;min-height:44px;padding:0 10px;border:1px solid var(--filete);border-radius:10px;
  background:var(--papel);color:var(--tinta);min-width:0}
.seletor-turma{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.seletor-turma::-webkit-scrollbar{display:none}
.seletor-turma button{appearance:none;cursor:pointer;min-height:44px;min-width:64px;padding:4px 12px;border:1px solid var(--filete);border-radius:10px;background:var(--papel-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.2;transition:border-color .15s,background .15s;flex:none}
.seletor-turma button b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:500;color:var(--tinta)}
.seletor-turma button span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-fraca)}
.seletor-turma button[aria-pressed="true"]{border-color:var(--azul);background:var(--azul-fraco)}
.seletor-turma button[aria-pressed="true"] b,.seletor-turma button[aria-pressed="true"] span{color:var(--azul)}
@media (max-width:719px){.seletor-periodo,.datas{width:100%}.datas label{flex:1}.datas input{flex:1}}

/* 17. Linha do tempo das turmas: encerrada preenchida, em andamento hachurada, futura tracejada (geral-wireframe.html bloco 1); o hoje é UMA marca,
   em tinta, sob a coluna onde a data de hoje cai no eixo (revisão de 12/09: três barras azuis repetiam a hachura e liam como seleção) */
.linha-turmas,.eixo-turmas,.hoje-turmas{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:4px}
.tcel{min-height:44px;border:1px solid var(--filete);border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:500;color:var(--tinta);background:var(--papel-2)}
.tcel.encerrada{background:var(--verde-fraco);border-color:transparent;color:var(--verde-texto)}
.tcel.andando{background-color:var(--papel);background-image:repeating-linear-gradient(45deg,var(--verde-fraco) 0 4px,transparent 4px 9px);border-color:var(--verde);color:var(--verde-texto)}
.tcel.futura{border-style:dashed;background:transparent;color:var(--tinta-fraca);font-weight:400}
.eixo-turmas{margin-top:4px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--tinta-fraca);text-align:center}
.hoje-turmas{margin-top:3px}
.hoje-turmas span{display:block;height:3px;border-radius:2px;background:transparent}
.hoje-turmas span.ativo{background:var(--tinta)}

/* 18. Gráfico: área do canvas com altura fixa 220 (200 no celular), nunca estoura a largura (brief §1: um gráfico por linha) */
.grafico{position:relative;width:100%;max-width:100%;height:220px;min-width:0}
.grafico canvas{width:100%!important;max-width:100%}
@media (max-width:719px){.grafico{height:200px}}

/* 19. Recolhível details/summary com badges na linha do título (referência .grp-*) */
.recolhivel{background:var(--papel-2);border:1px solid var(--filete);border-radius:12px} /* sem overflow:hidden: ele recortava a tabela rolável de dentro e o toque na dica dava a célula por inalcançável (medido a 390, 12/09) */
.recolhivel + .recolhivel{margin-top:10px}
.recolhivel summary{cursor:pointer;list-style:none;padding:0 16px;min-height:48px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.recolhivel summary::-webkit-details-marker{display:none}
.recolhivel summary::before{content:"▸";color:var(--tinta-fraca);font-size:13px;transition:transform .15s;flex:none}
.recolhivel[open] summary::before{transform:rotate(90deg)}
.titulo-grupo{font-weight:600;font-size:14px}
.conta-grupo{font-size:12.5px;color:var(--tinta-fraca)} /* mono só no número (regra da casa): o <b> ou .num dentro dela */
.conta-grupo b,.conta-grupo .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--tinta)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.badge{font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:6px;background:var(--papel);border:1px solid var(--filete);color:var(--tinta-fraca)}
.badge b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600} /* mono só no número */
.badge.bom{background:var(--verde-fraco);border-color:transparent;color:var(--verde-texto)}
.badge.atencao{background:var(--ambar-fraco);border-color:transparent;color:var(--ambar-texto)}
.badge.critico{background:var(--vermelho-fraco);border-color:transparent;color:var(--vermelho-texto)}
.corpo-grupo{border-top:1px solid var(--filete);padding:14px 16px 16px;background:var(--papel);border-radius:0 0 11px 11px} /* os cantos de baixo acompanham a moldura do recolhível */
@media (max-width:719px){.badges{margin-left:0}}

/* 20. Chip de alvo (referência .chip) e catálogo com selo (geral-wireframe.html bloco 3) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:6px;background:var(--papel);border:1px solid var(--filete);border-radius:8px;padding:7px 12px;font-size:12px;color:var(--tinta-fraca)}
.chip b{font-size:12.5px;color:var(--tinta);font-weight:600}
.chip span{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--azul);font-weight:600}
.catalogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;align-items:stretch}
.produto{background:var(--papel-2);border:1px solid var(--filete);border-radius:12px;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:2px}
.selos{position:absolute;width:0;height:0;overflow:hidden} /* o sprite dos selos de produto, invisível */
.produto .selo{height:15px;width:auto;display:block;align-self:flex-start;margin:0 0 8px;color:var(--selo-tinta)}
.selo-p1{stop-color:var(--selo-g1)}
.selo-p2{stop-color:var(--selo-g2)}
.produto .categoria{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-fraca)}
.produto .nome{font-size:12.5px;font-weight:600;line-height:1.3}
.produto .dinheiro{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:20px;font-weight:500;margin-top:6px;white-space:nowrap}
@media (max-width:519px){.produto .dinheiro{font-size:16px}} /* a 390 a coluna tem 123 px de conteúdo: "R$ 27.236,39" (12 caracteres a 0,6 em) cabe em 16 px, estoura em 18 e 20 (medido 12/09) */
.produto .qtd{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--tinta-fraca);margin-top:2px}
.produto .qtd b{display:block;font-family:var(--texto);font-weight:400;font-size:10px;letter-spacing:.03em}
.produto.bump{padding:8px 10px;background:transparent} /* subordinado ao produto: sem fundo próprio e tipo menor, com o topo alinhado aos outros (o align-self:end de antes descia o bump 40 px e lia como serrilha, medido a 1440 e 390 em 12/09) */
.produto.bump .nome{font-size:11.5px}
.produto.bump .dinheiro{font-size:16px}
@media (max-width:519px){.produto.bump .dinheiro{font-size:14px}}

/* 21. Foco visível em azul (o interativo, brief §3) e movimento: 150 ms; tudo desliga em prefers-reduced-motion */
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.menu a:focus-visible,.abas-secao a:focus-visible,.abas-secao button:focus-visible{outline-offset:-4px;border-radius:6px} /* dentro da altura de 56/44, longe da borda do controle */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 22. Impressão básica: sem sombra, sem botão de tema, bloco inteiro na página. Exceção deliberada à regra "cor só nos blocos 1 a 3":
   papel é branco e tinta é preta em qualquer tema, porque a impressora não tem tema. */
@media print{
  body{background:#fff;color:#000}
  .topo::before,.tema,.menu{display:none}
  .bloco{box-shadow:none;break-inside:avoid;border-color:#bbb}
  .moldura{max-height:none;overflow:visible}
  .rola::before,.rola::after{display:none}
}