/* Vermelho e amarelo vindos do "Padrão de design e CSS FAPCOM" (v1.0, 19/10/2026). O documento
   registra que os valores são proposta operacional, não homologação do manual de marca: se o
   manual oficial chegar, trocam-se estes três tokens e nada mais precisa ser mexido. */
:root{--nav:#ffffff;--nav2:#f7f8fb;--nav-ink:#4b5563;--nav-ink2:#8b93a3;--nav-on:#ffffff;--red:#E20613;--red-d:#B50510;--red-l:#FDECEE;--red-g:linear-gradient(135deg,#E20613,#B50510);
/* Fundo institucional — UM só, usado pela tela de entrada e pela faixa da visão geral.
   A decisão da direção em 21/10 separa chão e realce: o cinza é a base neutra e permanente, e a
   cor institucional entra só no realce. Trocar vermelho por azul passa a ser mudar um campo em
   Configurações, sem tocar em estilo nenhum.
   Este valor é o padrão, para a tela pintar antes de o JS ler a configuração;
   `aplicarCorInstituicao` o reescreve com a cor cadastrada. Está aqui numa variável, e não copiado
   nos dois lugares, porque cabeçalho duplicado já custou uma régua vermelha num PDF: duas cópias
   da mesma superfície divergem no dia em que alguém mexe numa só.
   A fórmula mora AQUI e em nenhum outro lugar. Ela já esteve copiada em três (este padrão e as
   duas funções que aplicam a cor); uma mutação mostrou que, copiada, ela diverge sem nenhum teste
   perceber — porque as duas cópias do app mudam juntas e continuam iguais entre si. Agora o JS
   escreve só `--red-rgb`, os componentes da cor cadastrada, e quem compõe o degradê é esta linha. */
--red-rgb:226,6,19;
/* `--inst-ini` e `--inst-fim`, as duas pontas do chão do degradê institucional, saíram daqui em
   04/11 para `superficie.css` — a folha que o aplicativo e as páginas públicas carregam juntos.
   O padrão continua tendo um dono só; mudou de endereço, não de regra. */
--amar:#FFD100;--amar-l:#FFF8D6;--grafite:#292929;
--grn:#1f9d57;--grn-l:#e8f7ee;--amb:#cc8a00;--amb-l:#fff6e3;--blu:#1f6fd6;--blu-l:#eaf2fd;--pur:#6b3fc4;--pur-l:#f0eafb;--tea:#0d8a8a;--tea-l:#e3f6f6;

/* ===== PALETA DE DADOS — separada da cor da marca (03/11/2026) =====
   O vermelho institucional vinha sendo a PRIMEIRA cor de todo gráfico: o funil do painel era um
   degradê de vermelho e a primeira fatia de toda rosca saía vermelha. Com isso o vermelho deixou
   de significar alerta — e numa tela em que tudo é vermelho, o que é urgente não salta.
   A partir daqui: a marca pinta a marca, o vermelho de alerta pinta alerta, e DADO tem paleta
   própria. As cores abaixo não são escolhidas a olho: são a paleta de referência validada, e
   passam nas seis conferências (banda de luminosidade, croma, separação sob daltonismo, piso de
   visão normal e contraste). A ORDEM é o mecanismo de segurança — ela não muda, e a nona série
   nunca é uma cor inventada: vira "Outros" ou um gráfico separado.
   Três delas (--d3, --d4, --d5) ficam abaixo de 3:1 no fundo claro: por isso todo gráfico que as
   usa traz rótulo e número escritos ao lado, nunca a cor sozinha. */
--d1:#2a78d6;--d2:#eb6834;--d3:#1baf7a;--d4:#eda100;
--d5:#e87ba4;--d6:#008300;--d7:#6250d6;--d8:#e34948;
/* Rampa ORDINAL — um matiz só, claro→escuro, para o que tem ORDEM e não identidade: as etapas de
   um funil, as faixas de uma escala. Trocar a ordem de uma etapa muda o sentido, e é por isso que
   ela não usa a paleta categórica: a cor tem de deixar a ordem à vista. O degrau mais claro ainda
   se separa do fundo (2,06:1). */
--df1:#86b6ef;--df2:#5598e7;--df3:#2a78d6;--df4:#1c5cab;--df5:#104281;
/* O VERMELHO DE ALERTA, que NÃO é o da marca. `--red` é a cor cadastrada da instituição e
   `aplicarCorInstituicao` a reescreve: numa instituição de marca verde, tudo que diz "crítico"
   passaria a ser verde. Alerta é significado, não identidade visual — e por isso tem token
   próprio, fixo, que nada reescreve. */
--alerta:#c81e1e;--alerta-l:#fdecec;
--ink:#16181d;--ink2:#3a3f4a;--ink3:#646b7a;--ink4:#69727f;--bg:#f4f6fa;--bg2:#eef1f6;--wh:#ffffff;--line:#e4e8ef;--line2:#d3d9e3;
--shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);--shadow-m:0 4px 12px rgba(16,24,40,.08);--shadow-l:0 12px 32px rgba(16,24,40,.14);
--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--titulo:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--mono:'SF Mono',ui-monospace,'Cascadia Code','Roboto Mono',Menlo,Consolas,monospace;--serif:Georgia,'Times New Roman',serif;--sb-w:256px}
/* Poppins só nos títulos, hospedada aqui mesmo: duas faces latinas (600 e 700), 16 KB no total.
   `font-display:swap` faz o título aparecer na fonte do sistema e trocar quando a face chega —
   nada de texto invisível enquanto baixa. O corpo continua na fonte do sistema, que não custa
   download nenhum e é a que o leitor já tem calibrada. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('fontes/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fontes/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box;margin:0;padding:0}
/* Títulos: cabeçalho de página, de cartão, de modal, de seção e o número do indicador. */
/* A tela de entrada entrou nesta lista: os títulos dela estavam fora e saíam na fonte do sistema,
   enquanto o resto do SIGA usa Poppins. Repare que a lista é o lugar certo — acrescentar a
   família solta em cada regra espalharia a decisão por dezenas de pontos. */
/* `.aa-content h1/h2` saiu desta lista em 04/11: o título do painel institucional mora em
   `superficie.css`, com o resto da superfície, porque as páginas públicas carregam aquela folha
   e não esta. */
.ph h1,.wh h3,.modal-title,.empty h4,.km .kv,.vg-faixa h2,.wsec,.cab-rel h2,
.af-head h2{font-family:var(--titulo)}
/* `.cab-rel h2` é o título do cabeçalho COMUM dos relatórios. Ele nunca recebeu tamanho nem
   família: ficava no padrão do navegador para h2 — 1,5 × 14px = 21px, um tamanho que não existe
   em nenhuma outra tela, e em sans. Valia para TODOS os relatórios padronizados, não só para o
   da CPA, porque a peça é uma só.
   `.vg-sec` saiu desta lista: estava declarada aqui e não tinha definição nem uso em lugar
   nenhum — seletor morto numa lista que decide tipografia. */
.cab-rel h2{font-size:18px;font-weight:700;letter-spacing:-.25px;line-height:1.25}
/* Título de seção DENTRO de um bloco, abaixo do `.wh` e acima de uma tabela. Faltava: quem
   precisava escrevia `<h3 style="font-size:13px">`, que sai em sans e do mesmo tamanho do texto
   ao redor — não lê como título. */
.wsec{font-size:14px;font-weight:700;margin:18px 0 8px;color:var(--ink);letter-spacing:-.1px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}a{color:var(--red-d);text-decoration:none}
.svi{width:18px;height:18px;flex-shrink:0}
/* auth */
/* ---- Tela de entrada: um cartão com o painel institucional DENTRO dele ------------
   Opção B, decidida em 21/10 depois de a opção C ir ao ar e não funcionar. A C punha o cartão
   solto sobre o fundo institucional, com a identificação acima dele: publicada, o texto
   institucional dominava a tela, sobrava fundo escuro em volta e o cartão descia demais. O desenho
   não antecipou isso, e só apareceu na tela de verdade.
   Agora é o contrário: o fundo da página é claro e TUDO vive dentro de um cartão — painel escuro à
   esquerda, formulário à direita. O painel continua usando `--fundo-inst`, a mesma superfície da
   faixa da visão geral, que é o que a direção aprovou e segue valendo.
   Nada disso muda o HTML: `#publicLayer` vira a página e `.auth-split` vira o cartão. */
#publicLayer{min-height:100vh;box-sizing:border-box;background:var(--bg);display:flex;
  flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 20px}
/* Centrado por `margin:auto`, e não por `justify-content:center`: num contêiner flex centrado,
   conteúdo mais alto que a tela é cortado EM CIMA e não há como rolar até ele — acontece no celular
   deitado ou com o aviso de erro aberto. Com margem automática, centraliza quando cabe e rola
   quando não cabe. */
/* As duas metades têm o MESMO peso. Com `flex:999` no formulário, ele engolia todo o espaço
   sobrando — 380px de painel contra 660 de campos — e os campos ficavam largos demais para o que
   são: um e-mail e uma senha. Peso igual e cartão um pouco menor dão duas metades parelhas. */
/* ---- O fundo institucional: UMA fórmula, agora em `superficie.css` ----
   Painel da tela de entrada, faixa da visão geral e faixa da disciplina — e, desde 04/11, também
   o portal de inscrição e a área do candidato, que são páginas públicas e não carregam esta folha.
   Por isso a fórmula mudou de endereço: `web/assets/superficie.css`, carregado pelas duas pontas.
   A decisão de 21/10 continua valendo — chão neutro e permanente, cor só no realce —, e o motivo
   de ser uma REGRA e não uma variável está documentado lá. */
/* Tela de acesso no celular: o dedo precisa de alvo, e o iOS some com a parte de baixo da tela.
   48px é o mínimo confortável; o link de senha ganha área além do texto, que tinha 15px de altura. */
/* Campo e botão da tela de acesso com a mesma altura confortável em qualquer tela */
.auth-main .fld input{padding:12px 14px;border-radius:10px}
.auth-main .btn-block{padding:0 16px;min-height:46px;font-size:14px}
/* Aviso dentro do próprio formulário: no celular o toast aparece longe do campo e some sozinho,
   e quem errou a senha fica sem saber o que houve. */
.af-aviso{display:none;background:var(--red-l);border:1px solid rgba(200,16,46,.22);color:var(--red-d);
  border-radius:10px;padding:11px 13px;font-size:13px;font-weight:600;line-height:1.45;margin-bottom:16px}
.af-aviso.on{display:block}
.af-rodape{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink4);font-weight:600;text-align:center;line-height:1.5}

/* ---- convite de primeiro acesso ----
   Duas peças, porque as duas aparecem em mais de um lugar (cadastro individual e importação) e a
   alternativa seria repetir trinta caracteres de `style=` em cada um — que é como os avisos em
   caixa estão escritos hoje neste front, inline, e foi assim que o mesmo aviso passou a ter três
   tamanhos de fonte diferentes. O azul é o de informação do sistema, não um tom novo. */
.conv-aviso{display:flex;gap:11px;background:var(--blu-l);border:1px solid #c7ddf8;border-radius:10px;
  padding:13px 15px;margin-bottom:18px;font-size:12.5px;color:#1b3e68;line-height:1.55}
.conv-aviso b{color:#14365c}
.conv-aviso .svi{flex-shrink:0;margin-top:1px;color:#1758aa}
/* `word-break:break-all` e não `anywhere`: o link não tem espaços, e sem quebrar em qualquer ponto
   ele estoura a largura do modal em vez de rolar — o botão de copiar fica fora da tela. */
.conv-link{font-family:var(--mono);font-size:11.5px;color:var(--ink2);background:var(--nav2);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;word-break:break-all;line-height:1.55}

/* O cartão é o `.auth-split` inteiro e o formulário é a metade direita dele — os dois moram em
   `superficie.css`, com o resto da superfície. */

/* ---- Celular ----
   O que encolhe o painel escuro, empilha as duas metades e aperta o formulário está em
   `superficie.css`. Aqui fica só o que é da TELA DE ENTRADA, que não existe nas páginas públicas. */
@media(max-width:900px){
  #publicLayer{padding:20px 14px calc(20px + env(safe-area-inset-bottom))}
  .auth-main #logoLogin{max-height:38px!important;margin-bottom:16px!important}
  .auth-main .fld input{padding:14px;border-radius:11px}
  .auth-main .btn-block{padding:15px 16px;border-radius:11px;font-size:15px}
  .af-head h2{font-size:22px}
}
.af-senha{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;font-size:12.5px;color:var(--red-d);font-weight:600}
/* olho de mostrar/ocultar senha, dentro do campo */
.fld-senha{position:relative}
.fld-senha input{padding-right:46px}
.fld-senha .olho{position:absolute;right:4px;bottom:1px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--ink4);border-radius:9px}
.fld-senha .olho:hover{color:var(--red)}
@media(max-width:900px){.fld-senha .olho{height:44px;bottom:2px}}
.af-mark{width:44px;height:44px;border-radius:11px;background:var(--red-g);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:24px}
.af-head h2{font-size:22px;font-weight:700;letter-spacing:-.4px}.af-head p{font-size:13px;color:var(--ink4);margin-top:4px;font-weight:600}
.af-tabs{display:flex;gap:6px;margin:20px 0;flex-wrap:wrap}.af-tab{flex:1;min-width:90px;border:1px solid var(--line2);background:var(--wh);border-radius:10px;padding:10px;font-size:12.5px;font-weight:700;color:var(--ink3)}.af-tab:hover{border-color:var(--red)}.af-tab.on{background:var(--red-l);border-color:var(--red);color:var(--red-d)}
.demo-users{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:16px}.demo-users button{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:600;color:var(--ink2);text-align:left}.demo-users button:hover{border-color:var(--red);background:var(--red-l)}
/* As contas de demonstração ficam recolhidas: são doze, e abertas empurravam o formulário para
   fora da tela do celular — quem entra de verdade não precisa vê-las. */
.demo-dobra{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.demo-dobra>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink3);display:flex;align-items:center;gap:6px;padding:6px 0}
.demo-dobra>summary::-webkit-details-marker{display:none}
.demo-dobra>summary::before{content:"›";font-size:16px;line-height:1;transition:transform .15s;color:var(--ink4)}
.demo-dobra[open]>summary::before{transform:rotate(90deg)}
.demo-dobra>summary:hover{color:var(--red-d)}
@media(max-width:900px){.demo-users{grid-template-columns:1fr}.demo-users button{padding:12px 12px;font-size:13px}}
/* layout */
.topbar{position:sticky;top:0;z-index:60;height:58px;background:var(--wh);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 18px;margin-left:var(--sb-w)}
.tb-logo{display:none;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:-.3px}.tb-logo .mark{width:30px;height:30px;border-radius:8px;background:var(--red-g);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;box-shadow:var(--shadow-m)}
.tb-spacer{flex:1}
.tb-busca{position:relative;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:0 10px;height:36px;min-width:260px;max-width:420px;flex:1}
.tb-busca:focus-within{border-color:var(--line2);background:var(--wh)}
.tb-busca .svi{width:16px;height:16px;color:var(--ink4);flex:none}
.tb-busca input{border:0;background:none;outline:0;font-size:13px;width:100%;color:var(--ink);padding:0}
.busca-g{padding:8px 14px 4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink4)}
.busca-i{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 14px;cursor:pointer;font-size:13px;color:var(--ink)}
.busca-i:hover{background:var(--bg2)}
.busca-i small{display:block;color:var(--ink4);font-size:11.5px}
@media(max-width:900px){.tb-busca{display:none}}
.tb-avbtn{display:flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:3px 6px 3px 3px;border-radius:999px;color:var(--ink3)}
.tb-avbtn:hover{background:var(--bg2)}
.tb-avbtn .av{width:32px;height:32px;border-radius:50%;background:var(--red-g);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.tb-avbtn .cv{width:14px;height:14px}
.conta-i{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;text-align:left;padding:10px 14px;font-size:13px;color:var(--ink);cursor:pointer}
.conta-i:hover{background:var(--bg2)}
.conta-i.sair{color:var(--red-d);font-weight:600;border-top:1px solid var(--line)}
.profile-switch{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:5px 8px 5px 12px}.profile-switch .pl{font-size:10px;color:var(--ink4);font-weight:600;text-transform:uppercase;letter-spacing:.4px}.profile-switch select{border:1px solid var(--line2);background:var(--wh);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink)}
/* O SELETOR DE PROCESSO do topo veste o mesmo controle do seletor de perfil, de propósito: são a
   mesma coisa para quem olha — "em que contexto estou trabalhando" — e dois desenhos diferentes
   para a mesma pergunta fariam procurar em dois lugares. Ele só aparece nas telas que ele de fato
   filtra; numa tela que ele não muda, seria um controle que promete e não cumpre. */
.ps-switch{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:5px 8px 5px 12px}
.ps-switch .pl{font-size:10px;color:var(--ink4);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.ps-switch select{border:1px solid var(--line2);background:var(--wh);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);max-width:230px}
@media(max-width:900px){.ps-switch .pl{display:none}.ps-switch select{max-width:150px}}
.tb-iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:none;color:var(--ink3);display:grid;place-items:center}.tb-iconbtn:hover{background:var(--bg2);border-color:var(--line);color:var(--ink)}
.layout{display:flex;min-height:calc(100vh - 58px);padding-left:var(--sb-w)}
.layout .main{flex:1;min-width:0}
.sidebar{width:var(--sb-w);flex-shrink:0;background:var(--wh);border-right:1px solid var(--line);padding:0 10px 14px;position:fixed;left:0;top:0;height:100vh;overflow-y:auto;color:var(--nav-ink);
  border-radius:0;z-index:70}
/* marca dentro do menu, com a logo branca */
/* a linha da marca fecha na mesma altura da borda da barra superior (58px) */
.sb-brand{display:flex;align-items:center;height:58px;padding:0 6px;margin:0 -10px 10px;padding-left:16px;border-bottom:1px solid var(--line);background:var(--wh);position:sticky;top:0;z-index:2}
.sb-brand img{height:38px;width:auto;max-width:190px;object-fit:contain;display:block}
  background:#111827;color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:120;box-shadow:var(--shadow-l)}
.sb-mod{margin-bottom:6px;border:0;border-radius:12px;padding:4px;background:transparent}.sb-mod.open{background:#fafbfd;border-color:#eadfe3}
.sb-mod-t{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:8px 10px;font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer;border-radius:8px;letter-spacing:-.2px}.sb-mod-t:hover{background:var(--bg2)}.sb-mod.open .sb-mod-t{color:#fff}
.sb-mod .sb-group{margin:8px 4px 8px}.sb-mod .sb-group:last-child{margin-bottom:4px}
.sb-group{margin-bottom:14px}.sb-mod.open .sb-group{padding-left:2px}.sb-group h6{font-size:10px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.6px;padding:0 10px;margin-bottom:6px}
.nav-i{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font-size:13px;font-weight:500;color:var(--nav-ink);margin-bottom:2px;border:1px solid transparent;cursor:pointer;width:100%;background:none;text-align:left;transition:background .12s,color .12s}
.nav-i .svi{color:var(--nav-ink2);transition:color .12s;flex:none}
.nav-i:hover{background:var(--bg2);color:var(--ink)}
.nav-i:hover .svi{color:var(--ink2)}
.nav-i.active{background:var(--red-l);color:var(--red-d);font-weight:700;border-color:transparent}
.nav-i.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--red)}
.nav-i.active .svi{color:var(--red)}
.nav-i.active:hover{background:var(--red-l)}
.nav-i.active .bdg{background:var(--red);color:#fff}
.nav-i .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.main{flex:1;min-width:0;padding:24px 28px 60px}.main>*{animation:fade .25s}@keyframes fade{from{opacity:0;transform:translateY(6px)}}@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}}
.ph{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}.ph h1{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1.15}.ph p{color:var(--ink3);font-size:13px;margin-top:3px;max-width:680px}.ph-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-bottom:22px}
.km{background:var(--wh);border:1px solid var(--line);border-radius:14px;padding:16px 17px;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column}.km .kd{font-size:11.5px;color:var(--ink4);font-weight:500}
/* cartão de conteúdo livre (turmas, opções, listas) — sem o ícone decorativo dos indicadores */
.card-l{background:var(--wh);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);text-align:left;display:block;width:100%}
.card-l::before{content:none}
/* Bloco de "termo + explicação": serve ao manual ABNT e à documentação da TI. Nasceu com nome
   de ABNT e a segunda tela ia ganhar uma cópia só para não se chamar `abnt-*` numa página que
   não fala de ABNT — que é como se fazem duas definições da mesma coisa. Nome neutro, uma só. */
.doc-i{padding:11px 0;border-bottom:1px solid var(--line)}
.doc-i:last-child{border-bottom:0}
.doc-k{font-size:13.5px;font-weight:700;margin-bottom:3px}
.doc-v{font-size:13px;color:var(--ink2);line-height:1.6}
.doc-v p{margin:0 0 8px}.doc-v p:last-child{margin-bottom:0}
.doc-v ul{margin:6px 0 8px;padding-left:20px}.doc-v li{margin-bottom:4px}
.doc-v code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--bg2);border-radius:5px;padding:1px 5px;color:var(--ink)}
.doc-v pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;
  background:var(--bg2);border-radius:9px;padding:11px 13px;margin:8px 0;overflow-x:auto;overflow-y:hidden;
  white-space:pre;color:var(--ink)}
.doc-v .tbl{margin:8px 0}.doc-v .tbl td,.doc-v .tbl th{padding:7px 10px;font-size:12.5px}
/* ===== Faixa à esquerda — um recurso, uma definição =====
   A REGRA, confirmada pela direção em 22/10 e escrita aqui para parar de ser tácita:
     · faixa CINZA  (--line2) = conteúdo para LER   — exemplo, resposta de alguém, texto de seção
     · faixa VERMELHA (--red) = onde se AGE          — a pergunta que se responde, o campo que se preenche
   As cinco usavam a mesma fórmula escrita cinco vezes, e por isso tinham quatro raios diferentes
   (8, 9, 9, 10, 10 px) para o mesmo recurso: ninguém nota numa tela, nota-se quando duas aparecem
   juntas. Uma faixa nova entra NESTA lista — não se escreve a fórmula de novo.
   Eram cinco; a pergunta do questionário (`.pq-item`) saiu em 23/10: com vinte e uma perguntas
   seguidas, vinte e uma caixas com tarja empilhadas faziam a tela parecer formulário de imposto.
   Lá o que separa uma pergunta da outra é um fio.
   Há uma sexta cópia, legítima: a folha de estilo do relatório impresso da CPA, em 06-cpa-extra.js,
   é documento à parte e não enxerga este arquivo. Mudou aqui, mude lá — o teste "a faixa à esquerda
   tem uma definição só" cobra as duas. */
.abnt-ex,.res-txt,.pe-secao,.at-cfg{background:var(--bg2);border-left:3px solid var(--line2);border-radius:0 10px 10px 0}
.at-cfg{border-left-color:var(--red)}
.abnt-ex{display:block;margin-top:6px;padding:9px 12px;font-size:12.5px;color:var(--ink)}
/* ficha catalográfica: moldura de 12,5 x 7,5 cm, como pede a biblioteca */
.ficha-cat{width:125mm;min-height:75mm;border:.4mm solid #111;padding:4mm 5mm;font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;box-sizing:border-box}
.ficha-cat .fc-tit{text-align:center;font-size:8.5pt;font-weight:700}
.ficha-cat .fc-sub{text-align:center;font-size:8pt;margin-bottom:3mm}
.ficha-cat .fc-corpo{display:grid;grid-template-columns:16mm 1fr;column-gap:3mm;font-size:8.5pt;line-height:1.35}
.ficha-cat .fc-cut{font-family:ui-monospace,Menlo,monospace;font-size:8.5pt}
.ficha-cat .fc-l1{font-weight:700}
.ficha-cat .fc-l2{margin-left:6mm;text-align:justify}
.ficha-cat .fc-cdd{grid-column:2;text-align:right;font-size:8.5pt;margin-top:3mm}
.ficha-cat .fc-rod{margin-top:3mm;font-size:7pt;text-align:center;color:#444}
.cart{width:85.6mm;height:54mm;border:.6pt solid #c9ced8;border-radius:3.2mm;padding:0;font-family:Arial,sans-serif;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cart .faixa{background:#c5121a;color:#fff;padding:2.6mm 4mm;display:flex;align-items:center;gap:2.5mm}
.cart .faixa img{height:6.5mm;filter:brightness(0) invert(1)}
.cart .faixa .i{font-size:7.4pt;font-weight:700;letter-spacing:.02em;line-height:1.25;flex:1;min-width:0}
.cart .faixa .t{margin-left:auto;font-size:6.2pt;text-transform:uppercase;letter-spacing:.1em;opacity:.92;white-space:nowrap}
.cart .corpo{display:flex;gap:3.5mm;padding:3.2mm 4mm;align-items:flex-start}
.cart .nome{font-size:10.5pt;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.cart .curso{font-size:7.8pt;color:#333;margin-top:.6mm}
.cart .linha{font-size:7.4pt;color:#222;margin-top:1.6mm;line-height:1.45}
.cart .linha b{font-size:8pt}
.cart .rod{position:absolute;bottom:2.4mm;left:4mm;right:4mm;font-size:5.6pt;color:#98a0ad;letter-spacing:.04em}
.cart{position:relative}
.cart-vert{width:54mm;height:85.6mm}
.cart-vert .corpo{flex-direction:column;align-items:center;text-align:center;gap:2.2mm;padding:3mm 4mm 7mm}
.cart-vert .faixa{padding:2.2mm 3mm}.cart-vert .faixa .t{display:none}
.cart-vert .corpo .nome{font-size:11pt}
.cart-vert .rod{text-align:center}
button.card-l{cursor:pointer;font:inherit;color:inherit}
button.card-l:hover{border-color:var(--line2);box-shadow:var(--shadow-l)}
/* `k-red` deixou de ser a cor da MARCA e passou a ser a primeira cor de DADO.
   O nome fica — ele aparece em cerca de vinte e cinco lugares, e trocá-lo seria mexer em vinte e
   cinco telas para não mudar nada que o usuário veja. O que ele significava na prática nunca foi
   "alerta": era "o primeiro cartão", e o primeiro cartão de todo painel do sistema vinha
   vermelho-marca — "24 candidatos inscritos" com a mesma cor que "3 divergências".
   Quem é alerta de verdade (o `tom()` de "Para revisar" e "Divergências") ganhou `k-alr`, que lê
   `--alerta` — o vermelho fixo, que a cor cadastrada da instituição não reescreve.
   Nestes cartões a cor não carrega informação: cada um traz o próprio rótulo e o próprio número.
   Por isso aqui não se aplicam as réguas de separação de séries — elas valem onde a cor É o dado,
   que é o caso dos gráficos. */
.km.k-red{--c:var(--d1)}.km.k-grn{--c:var(--grn)}.km.k-blu{--c:var(--blu)}.km.k-amb{--c:var(--amb)}.km.k-pur{--c:var(--pur)}.km.k-tea{--c:var(--tea)}.km.k-alr{--c:var(--alerta)}
.w{background:var(--wh);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}/* Cabeçalho de quadro: título e botões na primeira linha, descrição inteira embaixo. Lado a lado,
   uma descrição longa espremia o título a ponto de quebrá-lo em três linhas ("Vagas e nota de
   corte por curso"). O `order` põe a descrição por último sem mexer no HTML de cada quadro. */
.wh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--line)}.wh h3{font-size:14.5px;font-weight:700;order:1}.wh p{font-size:12px;color:var(--ink4);font-weight:600;order:3;flex:1 0 100%;margin:0;line-height:1.45}.wh .ha{margin-left:auto;order:2;display:flex;gap:8px;align-items:center}.wb{padding:18px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:left;font-size:10.5px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.4px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}.tbl td{padding:12px 18px;border-bottom:1px solid var(--line);vertical-align:middle}.tbl tr:last-child td{border-bottom:none}.tbl tbody tr:hover{background:var(--red-l)}.tbl .tname{font-weight:700}.tbl .tsub{font-size:11.5px;color:var(--ink4);font-weight:600}.tbl-scroll{overflow-x:auto}
/* ---------- botões ----------------------------------------------------------------
   O serrilhado da borda vinha do `transform:translateY(-1px)` no hover. Mover o elemento promove-o
   a uma camada própria, que o navegador rasteriza de novo por conta — e, como o botão quase nunca
   cai em posição inteira de pixel, a borda arredondada e o texto branco saem reamostrados: a curva
   fica escadinha e a letra, mais fina. Em vez de mover, o botão escurece e ganha sombra. É a mesma
   resposta ao ponteiro, sem redesenhar a borda.

   Três ajustes de harmonia no mesmo passo:
   · `transition:.15s` significava `all`: animava inclusive propriedades de layout. Agora a
     transição nomeia o que de fato muda.
   · a altura era consequência do `padding` sobre uma entrelinha `normal`, que depende das métricas
     da fonte — dois botões vizinhos podiam sair com alturas diferentes. Agora cada tamanho tem
     altura mínima declarada, e o texto fica centrado nela.
   · eram três raios para o mesmo componente (8, 9 e 10 px, conforme a variante). Passa a ser um. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line2);background:var(--wh);color:var(--ink);
  min-height:36px;padding:0 15px;border-radius:6px;
  font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{background:var(--bg2);box-shadow:var(--shadow-m)}
.btn:active{box-shadow:none}
.btn:focus-visible{outline:3px solid var(--red-l);outline-offset:1px}
.btn-p{background:var(--red-g);color:#fff;border-color:transparent;box-shadow:var(--shadow-m)}
.btn-g{background:var(--grn);color:#fff;border-color:transparent}
.btn-g:hover{background:var(--grn);filter:brightness(.93)}
.btn-sm{min-height:30px;padding:0 11px;font-size:12px;gap:6px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--bg2);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--wh);box-shadow:none}
.btn-block{width:100%}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.2px;white-space:nowrap}.p-grn{background:var(--grn-l);color:#157a42}.p-amb{background:var(--amb-l);color:#a06f00}.p-blu{background:var(--blu-l);color:#1758aa}.p-red{background:var(--red-l);color:var(--red-d)}.p-pur{background:var(--pur-l);color:#5630a3}.p-tea{background:var(--tea-l);color:#0a6e6e}.p-gry{background:var(--bg2);color:var(--ink3)}
.tag{display:inline-block;font-size:11px;font-weight:700;color:var(--ink3);background:var(--bg2);border:1px solid var(--line);padding:2px 9px;border-radius:7px}
.tabs{display:flex;gap:2px;margin-bottom:18px;overflow-x:auto;overflow-y:hidden;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}.tab{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;padding:10px 14px;font-size:13px;font-weight:700;color:var(--ink3);white-space:nowrap}.tab.on{background:transparent;color:var(--red-d);border-bottom-color:var(--red);font-weight:800}.tab .bdg{margin-left:6px;background:var(--bg2);color:var(--ink4);font-size:10px;font-weight:800;padding:1px 7px;border-radius:10px}.tab.on .bdg{background:var(--red);color:#fff}
/* Campo solto, fora de um .fld: aparece em buscas e filtros no meio de uma barra de botões.
   Sem isto o campo fica cru — sem borda, sem respiro — e parece que a folha de estilo não carregou.
   A regra do .fld tem especificidade maior, então os formulários continuam exatamente como estavam. */
#main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
#main select,#main textarea{border:1px solid var(--line2);border-radius:9px;padding:9px 12px;
  font-family:inherit;font-size:13px;color:var(--ink);background:var(--wh)}
#main input:focus,#main select:focus,#main textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
.fld{margin-bottom:15px}.fld label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:6px}.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line2);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--wh)}.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}.fld textarea{resize:vertical;min-height:84px}.fld .hint{font-size:11px;color:var(--ink4);margin-top:5px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px}
.empty{text-align:center;padding:48px 20px;color:var(--ink4)}.empty h4{font-size:15px;font-weight:700;color:var(--ink2)}.empty p{font-size:13px;margin-top:4px}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,.55);z-index:200;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto;backdrop-filter:blur(2px)}.modal-overlay.open{display:flex}
.modal-box{background:var(--wh);border-radius:16px;width:100%;max-width:620px;box-shadow:var(--shadow-l);animation:pop .2s;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}.modal-box.wide{max-width:900px}
.modal-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}.modal-title{font-size:16px;font-weight:700;letter-spacing:-.3px;flex:1}.modal-title small{display:block;font-size:11.5px;color:var(--ink4);font-weight:600}.modal-close{margin-left:auto;background:var(--bg2);border:none;width:32px;height:32px;border-radius:8px;font-size:14px;color:var(--ink3)}
.modal-body{padding:22px;overflow-y:auto;flex:1}
/* Botão com FRASE dentro do corpo do modal quebra linha. `.btn` é nowrap — certo para barra de
   ferramentas, fatal aqui: no celular, um rótulo de uma linha inteira empurrava a largura do
   corpo e a vista de prova passava a rolar de lado, cortando o texto da esquerda. O rodapé fica
   de fora de propósito: ali os rótulos são curtos e a linha única é o que alinha os botões. */
.modal-body .btn{white-space:normal;max-width:100%;text-align:center}.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--wh);padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-l);opacity:0;transition:.2s;pointer-events:none;z-index:300}.toast.show{opacity:1;transform:translateX(-50%)}.toast.err{background:var(--red-d)}
.check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.check:last-child{border:0}.check .ic{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--grn)}.check.bad .ic{background:var(--red)}
.alt{display:flex;gap:8px;align-items:center;margin-bottom:6px}.alt .l{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--wh);flex-shrink:0}.alt .l.on{background:var(--grn);border-color:var(--grn);color:#fff}.alt input{flex:1;border:1px solid var(--line2);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:13px}
.qitem{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line)}.qitem:last-child{border:0}.qitem .num{width:26px;height:26px;border-radius:8px;background:var(--bg2);display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}.qitem .en{flex:1;font-size:13px;color:var(--ink2)}.qitem .en b{color:var(--ink)}.qitem .acts{display:flex;gap:4px;flex-shrink:0}
/* 28px era um alvo pequeno demais para dois botões colados: errar o clique por um pixel não
   dava retorno nenhum. O quadrado visível continua 28px; o `padding` aumenta só a área sensível,
   e `position:relative` com z-index mantém o botão acima da célula. */
.icobtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--wh);color:var(--ink3);font-size:13px;display:inline-grid;place-items:center;vertical-align:middle;position:relative;z-index:1;background-clip:padding-box;padding:0}
.icobtn::after{content:"";position:absolute;inset:-5px}
.icobtn+.icobtn{margin-left:6px}
.icobtn:hover{border-color:var(--red);color:var(--red)}
/* sem `transform` aqui de propósito: mover o botão no :active faz o soltar do mouse cair fora
   dele quando o clique é na borda, e aí o navegador não conta o clique */
.icobtn:active{background:var(--bg2)}
/* nome que abre a edição: parece texto da tabela, mas é botão de verdade e alvo largo */
.link-nome{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.link-nome:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.mono{font-family:var(--mono);font-size:12px}
.drop{border:1.5px dashed var(--line2);border-radius:12px;padding:26px;text-align:center;color:var(--ink3);background:var(--bg);font-size:13px}.drop.over{border-color:var(--red);background:var(--red-l)}
.preview-wrap{--pz:.6;background:#dfe4ec;padding:22px;border-radius:12px;overflow:auto;display:flex;flex-direction:column;align-items:center}.preview-wrap .sheet{zoom:var(--pz);width:210mm;height:297mm;flex:none;margin:0 0 10px}
@supports not (zoom:1){.preview-wrap .sheet{zoom:normal;transform:scale(var(--pz));transform-origin:top left;margin-right:calc(-210mm * (1 - var(--pz)));margin-bottom:calc(-297mm * (1 - var(--pz)))}}
/* ---------- responsivo ---------- */
.tb-menu{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--wh);color:var(--ink);place-items:center;margin-right:2px}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:70}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- Paginação (aprovada em 21/10) ----
   Um rodapé só para toda lista longa. A contagem à esquerda é a informação que faltava: antes
   uma lista cortada não dizia que estava cortada. A página atual é grafite com texto branco — a
   mesma marca de escolha dos cartões de relatório, e não um tom claro que se confunde com as
   outras. Alvo de 34px de altura: o padrão de entrega pede 44px de área de toque, que os 34px
   mais o `gap` de 6px entre os botões alcançam na prática no toque. */
.pgn{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;background:var(--bg2);border-top:1px solid var(--line)}
.pgn-c{font-size:12.5px;color:var(--ink4)}
.pgn-c b{color:var(--ink);font-weight:700}
.pgn-n{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pgn-b{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line2);background:var(--wh);border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pgn-b:hover:not([disabled]):not(.on){border-color:var(--ink4)}
.pgn-b.on{background:var(--grafite);border-color:var(--grafite);color:#fff;cursor:default}
.pgn-b[disabled]{color:#b9b9c0;cursor:default}
.pgn-r{color:var(--ink4);font-size:12.5px;padding:0 3px}
.pgn-s{height:34px;border:1px solid var(--line2);border-radius:8px;font:inherit;font-size:12.5px;padding:0 8px;color:var(--ink);background:var(--wh)}
@media print{.pgn{display:none}}

/* ---- Cartão de turma / disciplina (desenho aprovado em 21/10) ----
   Um conjunto de classes só, usado pelo aluno ("Minhas disciplinas") e pelo professor
   ("Minhas turmas"). Dois conjuntos pareceriam iguais hoje e divergiriam na primeira correção.
   O cabeçalho era pintado pela MODALIDADE — azul, roxo e laranja, três cores de fora da
   identidade —, dando o maior peso visual ao dado menos importante do cartão. Agora a
   modalidade é etiqueta de contorno e o cartão é branco, como todo o resto.
   O degradê institucional foi desenhado para este topo e descartado em 21/10: seis cabeçalhos
   escuros numa tela pesam, e o nome da disciplina lê melhor em preto sobre branco. */
.cartao-turma{overflow:hidden}
.ct-topo{padding:15px 17px 13px}
/* A faixa colorida da disciplina. A cor entra pela variável `--cor-disc`, que o JavaScript
   calcula do código da turma (`corDisciplina`, em 01-base.js) — a folha não conhece disciplina
   nenhuma, só recebe três números. Mesma fórmula do degradê institucional, com a cor da
   disciplina no lugar do vermelho, e a MESMA classe serve ao topo do cartão e à faixa da
   disciplina aberta: é o que faz o aluno reconhecer que chegou no lugar certo.
   A cor vive SÓ aqui. Média e frequência seguem verde/âmbar/vermelho sobre branco, na fileira
   de números do cartão — zonas separadas, para que as duas cores nunca disputem significado. */
.ct-banda{--inst-meio:42%;--inst-alfa:.62;color:#fff}
.ct-banda .ct-cod,.ct-banda .ct-ctx,.ct-banda .ct-per,.ct-banda .ct-nl{color:rgba(255,255,255,.75)}
.ct-banda .ct-nome,.ct-banda .ct-id-cod,.ct-banda .ct-nv{color:#fff}
.ct-banda .ct-etq{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.34)}
.ct-banda .ct-turno{color:#fff;background:rgba(255,255,255,.16)}
/* Sem divisória dentro da faixa: as linhas brancas recortavam os números em quadrinhos
   colados sobre o degradê, em vez de deixá-lo ler como uma superfície só. O desenho
   aprovado separava os números por espaço, não por traço. */
.ct-banda .ct-num{border-right:0}
/* dentro da faixa o respiro vem da coluna, não desta linha — ver 02-paginas.js */
.ct-banda .ct-id{padding:0}
.ct-cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink4);letter-spacing:.04em}
.ct-nome{font-size:15.5px;font-weight:700;line-height:1.3;margin:3px 0 0;color:var(--ink)}
.ct-ctx{font-size:11.5px;color:var(--ink4);margin-top:3px}
.ct-etq{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink4);border:1px solid var(--line2);border-radius:5px;padding:2px 7px;margin-top:9px}
.ct-trilho{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.ct-barra{height:100%;background:var(--grafite)}
.ct-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin:0 -16px -14px;border-bottom-left-radius:11px;border-bottom-right-radius:11px;overflow:hidden}
.ct-num{padding:11px 8px;text-align:center;border-right:1px solid var(--line)}
.ct-num:last-child{border-right:0}
.ct-nv{font-size:18px;font-weight:700;line-height:1}
.ct-nl{font-size:10px;color:var(--ink4);margin-top:4px}
.ct-rodape{border-top:1px solid var(--line);padding:10px 17px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg2)}
/* a ação é o botão cheio de sempre, agora no vermelho institucional no lugar do azul (e do roxo
   e do laranja) que a modalidade pintava. Cheguei a propor um link, por achar que seis botões
   cheios disputariam a atenção com as notas; a direção manteve o botão em 21/10. */
.ct-abrir{font:inherit;font-size:12.5px;font-weight:700;color:#fff;background:var(--red);border:0;border-radius:9px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:background .12s}
.ct-abrir:hover{background:var(--red-d)}
/* ---- O cartão de turma do professor: cada pendência é uma porta ----
   A identidade da turma vem ANTES do nome da disciplina. É contraintuitivo e é deliberado: com
   a mesma disciplina em duas turmas (JOR101-A e JOR101-B), são o código e o turno que distinguem
   um cartão do outro, e precisam ser a primeira coisa lida.
   O código do professor tem classe PRÓPRIA (`ct-id-cod`), e não reaproveita o `ct-cod` do
   cartão do aluno: ali ele é uma linha discreta de 11px, aqui é o identificador em destaque.
   Mesma classe com dois pesos seria a armadilha de sempre — uma correção valendo em metade dos
   lugares.
   Cada pendência é um `button` de verdade, de largura inteira: quem usa teclado chega nele com
   Tab, o que um `div` com `onclick` não permitiria. */
.ct-id{display:flex;align-items:center;gap:8px;padding:13px 16px 0;flex-wrap:wrap}
.ct-id-cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.ct-turno{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#45454c;background:var(--bg2);border-radius:5px;padding:3px 8px}
.ct-per{font-size:11px;color:var(--ink4);margin-left:auto}
/* As regras do cartão-porta do professor (.ct-acoes, .ct-acao, .ct-marca, .ct-prazo,
   .ct-emdia, .ct-nums-linha, .ct-prox) saíram em 22/10 com o desenho: a direção voltou ao
   cartão simples. As .ct-* que ficaram servem ao cartão do aluno e ao cabeçalho da
   disciplina aberta — não apague o grupo inteiro procurando por prefixo. */

@media(max-width:1100px){.mg{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.grid4{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .tb-menu{display:grid}
  .topbar{margin-left:0}
  .layout{padding-left:0}
  .tb-logo{display:flex}
  .sidebar{position:fixed;left:0;top:0;height:100vh;width:min(300px,85vw);transform:translateX(-105%);transition:transform .2s;z-index:80;box-shadow:var(--shadow-l);border-radius:0}
  body.sb-open .sidebar{transform:none}body.sb-open .sb-backdrop{display:block}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}.auth-main{padding:24px 18px}.main{padding:16px 14px 60px}
  .profile-switch .pl{display:none}.topbar{gap:8px;padding:0 10px}.tb-logo span{display:none}
  .ph h1{font-size:19px}.ph{gap:10px;margin-bottom:14px}.ph-actions{margin-left:0;width:100%}.ph-actions .btn{flex:1;justify-content:center}
  .w{border-radius:10px}.wh{padding:12px 14px;flex-wrap:wrap}.wh .ha{margin-left:0;width:100%;flex-wrap:wrap}.wb{padding:14px}
  .tbl th,.tbl td{padding:9px 10px}.tbl{min-width:560px}
  .tbl .col-opc{display:none}
  .tabs{gap:0}.tab{padding:9px 11px;font-size:12.5px}
  .modal-overlay{padding:10px 8px;align-items:flex-start}.modal-box,.modal-box.wide{max-width:100%;max-height:calc(100vh - 20px);border-radius:12px}.modal-header{padding:14px 16px}.modal-body{padding:14px 16px}.modal-footer{padding:12px 16px;flex-wrap:wrap}.modal-footer .btn{flex:1;justify-content:center}
  .modal-body[style*="grid-template-columns"]{display:block!important}.modal-body[style*="grid-template-columns"]>div{margin-bottom:16px}
  .preview-wrap{--pz:.36;padding:6px}
  .demo-users{grid-template-columns:1fr}.km .kv{font-size:23px}.qitem{flex-wrap:wrap}.qitem .acts{width:100%;justify-content:flex-end}
  .toast{left:12px;right:12px;transform:none;bottom:12px}.toast.show{transform:none}
  .drop{padding:16px}
}
@media(max-width:480px){.preview-wrap{--pz:.3}.mg{grid-template-columns:1fr}.main{padding:12px 10px 60px}.tab{padding:8px 9px;font-size:12px}.km{padding:12px 13px}}
/* --------- ajustes de celular --------- */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  /* campos com 16px: abaixo disso o iOS dá zoom ao tocar no campo */
  input,select,textarea,.btn,.fld input,.fld select,.fld textarea,.auth-main input{font-size:16px}
  .fld label{font-size:12.5px}
  .toast{max-width:calc(100vw - 24px);box-sizing:border-box}
  /* barra do topo: ícones menores e só o essencial */
  .topbar{gap:2px;padding:0 6px}
  .tb-iconbtn{width:34px;height:34px}
  .tb-iconbtn .svi{width:17px;height:17px}
  .tbdrop{width:min(320px,calc(100vw - 16px));right:-4px}
}
@media(max-width:480px){
  .tb-logo img{height:22px}
  .tb-iconbtn{width:31px;height:31px}
  .ph-actions{flex-wrap:wrap}
  .mg{grid-template-columns:1fr}
  .km{padding:13px 14px;grid-template-columns:42px 1fr}.km .kicon{width:42px;height:42px;border-radius:11px}.km .kv{font-size:22px}.km .kl{font-size:12.5px}
  .wh h3{font-size:14px}
  .tbl{min-width:520px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- Documentos impressos ---------- */
#print-root{display:none}
.sheet{width:210mm;min-height:297mm;box-sizing:border-box;background:#fff;color:#000;font-family:var(--serif);position:relative;padding:18mm 20mm 22mm;page-break-after:always;break-after:page}
.sheet.gab{padding:14mm 14mm;font-family:var(--sans)}
.fid{position:absolute;width:7mm;height:7mm;background:#000}
.fid.tl{top:8mm;left:8mm}.fid.tr{top:8mm;right:8mm}.fid.bl{bottom:8mm;left:8mm}.fid.br{bottom:8mm;right:8mm}
.gab .top{display:grid;grid-template-columns:24mm 1fr 24mm;gap:6mm;align-items:start;margin:8mm 8mm 0}
.gab .qr svg{width:100%;height:100%;display:block}
.gab .qr div{font-size:7pt;text-align:center;margin-top:1mm;font-family:ui-monospace,monospace}
.gab .idb{text-align:center}
.gab .idb .inst{font-size:9pt;color:#333}
.gab .idb .tit{font-size:13pt;font-weight:700;margin:1mm 0}
.gab .idb .nome{font-size:12pt;font-weight:600;border-bottom:.3mm solid #000;padding:1mm 4mm;margin:2mm 0 1mm}
.gab .idb .dados{display:flex;justify-content:center;gap:5mm;font-size:9.5pt}
.gab .ver{font-size:22pt;font-weight:700;border:.6mm solid #000;width:14mm;height:14mm;display:grid;place-items:center;margin:2mm auto 0}
.gab .instr{margin:6mm 10mm 0;font-size:8.5pt;line-height:1.35;display:flex;gap:6mm;align-items:center}
.gab .instr .ex{display:flex;gap:1.5mm;align-items:center;flex:none}
.gab .cols{display:flex;justify-content:center;gap:9mm;margin:6mm 10mm 0}
.gab .col{display:flex;flex-direction:column;gap:0}
.gab .r{display:flex;align-items:center;height:7.2mm}
.gab .r .n{width:8mm;text-align:right;font-size:9.5pt;font-weight:600;padding-right:2mm;font-variant-numeric:tabular-nums}
.gab .b{width:5mm;height:5mm;border:.35mm solid #000;border-radius:50%;margin:0 1.1mm;display:grid;place-items:center;font-size:6.5pt;color:#777}
.gab .b.fill{background:#000;color:#000;padding:0;overflow:hidden}
.gab .sig{position:absolute;bottom:20mm;left:22mm;right:22mm;display:flex;justify-content:space-between;font-size:8.5pt}
.gab .sig div{border-top:.3mm solid #000;padding-top:1mm;width:60mm;text-align:center}
.gab .sig .cod{white-space:nowrap;font-family:ui-monospace,monospace;border:0;width:auto;text-align:right;color:#444}
/* caderno */
.cad .cab .qr svg{width:100%;height:100%;display:block}
.cad .cab{margin-bottom:2mm;display:flex;justify-content:space-between;border-bottom:.4mm solid #000;padding-bottom:3mm;font-family:var(--sans);font-size:9.5pt}
.cad .cab b{font-size:11pt}
.cad .capa{text-align:center;padding-top:30mm}
.cad .cab-abre{border-bottom:.5mm solid #000;padding-bottom:3mm;margin-bottom:4mm;font-family:var(--sans)}
  .cad .cab-abre .ca-top{display:flex;justify-content:space-between;align-items:flex-start;font-size:10.5pt}
  .cad .cab-abre .ca-sub{font-size:9pt;color:#444;font-weight:400}
  .cad .cab-abre .ca-ver{font-size:13pt;font-weight:700;border:.4mm solid #000;padding:0 3mm;display:inline-block}
  .cad .cab-abre .ca-tit{font-family:var(--serif);font-size:15pt;font-weight:600;margin:3mm 0 2mm}
  .cad .cab-abre .ca-linha{display:flex;gap:6mm;flex-wrap:wrap;font-size:10pt;border:.3mm solid #999;padding:2mm 3mm;border-radius:1mm}
  .cad .cab-abre .ca-adapt{margin-top:2mm;font-size:10pt;font-weight:700;color:#900;border:.4mm solid #900;display:inline-block;padding:1mm 3mm}
  .cad .cab-abre .ca-inst{margin-top:2mm;font-size:9pt;color:#333;line-height:1.4}
  .cad .capa .inst{font-family:var(--sans);font-size:11pt;letter-spacing:.02em}
.cad .capa h1{font-size:22pt;margin:8mm 0 3mm;font-weight:600}
.cad .capa .sub{font-size:12pt;color:#333}
.cad .capa .box{border:.4mm solid #000;margin:14mm auto 0;width:140mm;padding:6mm 8mm;text-align:left;font-family:var(--sans);font-size:10.5pt}
.cad .capa .box .l{display:flex;gap:4mm;margin:1.5mm 0}
.cad .capa .box .l span:first-child{width:28mm;color:#444}
.cad .capa .box .l span:last-child{font-weight:600;font-size:12pt}
.cad .capa .verbox{font-size:36pt;font-weight:700;margin:10mm auto 0;width:26mm;height:26mm;border:.7mm solid #000;display:grid;place-items:center}
.cad .capa .inst-l{margin:10mm auto 0;width:150mm;text-align:left;font-size:10pt;line-height:1.5}
.cad .capa .inst-l li{margin-bottom:1.2mm}
.cad .sec{font-family:var(--sans);font-weight:700;font-size:11.5pt;margin:6mm 0 3mm;padding-bottom:1mm;border-bottom:.25mm solid #000}
.cad .qn{margin:0 0 4.5mm;break-inside:avoid;page-break-inside:avoid;font-size:10.5pt;line-height:1.45}
.cad .qn.long{break-inside:auto;page-break-inside:auto}
.cad .qn .e{display:flex;gap:2.5mm}
.cad .qn .e b{font-family:var(--sans);flex:none;width:9mm}
.cad .qn .e p{margin:0;white-space:pre-wrap;flex:1}
.cad .cols2{display:flex;gap:0;align-items:stretch}
.cad .cols2 .col{flex:0 0 50%;width:50%;min-width:0;box-sizing:border-box}
.cad .cols2 .col:first-child{padding-right:4mm}
.cad .cols2 .col+.col{border-left:.2mm solid #ccc;padding-left:4mm}
.cad .cols2 .col+.col:empty{border-left:0}
.cad .cols2 .sec{margin-top:2mm}
.cad .qh{display:flex;gap:2.5mm;font-size:10.5pt;line-height:1.45;break-inside:avoid}
.cad .qh>b{font-family:var(--sans);flex:none;width:0;padding-top:0;overflow:hidden}
/* número da questão acima do texto, em tarja preta: delimita cada questão e libera a coluna inteira */
/* tarja clara com texto preto: delimita a questão e imprime bem mesmo sem gráficos de fundo,
   porque o contorno e o filete à esquerda continuam visíveis */
.cad .qnum{display:inline-block;font-family:var(--sans);font-size:9pt;font-weight:700;letter-spacing:.06em;
  background:#e9ebef;color:#000;padding:.9mm 3mm .9mm 2.4mm;border:.2pt solid #9aa1ab;border-left:.9mm solid #111;
  border-radius:.6mm;margin:0 0 1.6mm;break-after:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.cad .qh .en{flex:1;white-space:pre-wrap;margin:0 0 .6mm;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.cad .qh .tb{flex:1;white-space:pre-wrap;padding:0;font-family:var(--serif);font-size:10pt;line-height:1.45;margin-bottom:1.5mm;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.cad .qh .tb.tbc{margin-bottom:0}
.cad .qh .tb.tbm{margin-top:0}
.cad .qh .tb.tbi{padding-top:1mm;text-align:center}
.cad .qh .fon{flex:1;font-family:var(--sans);font-size:8pt;color:#444;margin:0 0 1.5mm}
.cad.amp .qh .tb{font-size:15pt;line-height:1.5}
.cad.dys .qh .tb{font-family:Verdana,Arial,sans-serif;font-size:13pt;line-height:1.8;text-align:left}
.cad .qh .en.cmd{font-weight:700}
.cad.dys .qh .en.cmd{font-weight:700}
.cad .qh .as{flex:1;margin:0}
.cad .qh .as .a{display:flex;gap:2mm;margin:.4mm 0}
.cad .qh .as .a span:first-child{font-family:var(--sans);font-weight:600;flex:none;width:5mm}
.cad .qh .val{flex:1;font-family:var(--sans);font-size:8.5pt;color:#444;margin-bottom:1mm}
.cad .qh .ln{flex:1;height:6.8mm;border-bottom:.25mm solid #999}
.cad .qgap{height:3.5mm}
/* Compressão micro: quando a questão cabe com um pouco menos de entrelinha, o motor aperta em vez
   de empurrar o bloco inteiro para a coluna seguinte. Só entrelinha e espaços — o corpo da letra
   nunca muda, e a entrelinha tem piso em 1,30. Não se aplica ao material adaptado. */
.cad .cmp1 .qh{line-height:1.40}
.cad .cmp1 .qh .en{margin-bottom:.45mm}
.cad .cmp1 .qh .as .a{margin:.3mm 0}
.cad .cmp1 .qgap{height:3mm}
.cad .cmp2 .qh{line-height:1.36}
.cad .cmp2 .qh .en{margin-bottom:.35mm}
.cad .cmp2 .qh .as .a{margin:.22mm 0}
.cad .cmp2 .qgap{height:2.6mm}
.cad .cmp3 .qh{line-height:1.30}
.cad .cmp3 .qh .en{margin-bottom:.25mm}
.cad .cmp3 .qh .as .a{margin:.14mm 0}
.cad .cmp3 .qgap{height:2.2mm}
.cad.amp .cmp1 .qh,.cad.amp .cmp2 .qh,.cad.amp .cmp3 .qh,
.cad.dys .cmp1 .qh,.cad.dys .cmp2 .qh,.cad.dys .cmp3 .qh{line-height:inherit}
/* Aviso de questão que atravessa a página: visível, para ninguém perder alternativa na virada */
.cad .cont-av{font-family:var(--sans);font-size:8.5pt;font-weight:700;font-style:italic;color:#000;
  border-top:.25mm solid #000;margin-top:1.2mm;padding-top:1mm}
.cad .cont-av.fim{text-align:right}
.cad .cont-av.ini{border-top:0;border-bottom:.25mm solid #000;margin:0 0 1.5mm;padding:0 0 1mm}
/* Marca de sobra: diagnóstico só na prévia, nunca no papel */
.vazio-mark{font-family:var(--sans);font-size:7.5pt;font-weight:700;color:#a50d26;background:#fdecee;
  border:.3mm dashed #e8a0a8;border-radius:1.2mm;padding:.8mm 1.6mm;margin-top:1.5mm;display:inline-block}
.vazio-mark.ok{color:#5a6472;background:#eef1f5;border-color:#c7cfda}
.cad .cond-h,.cad .mot-h{font-family:var(--sans);font-weight:700;font-size:9.5pt;margin:2mm 0 1mm}
.cad .cond-t{font-family:var(--serif);font-size:10pt;line-height:1.45;white-space:pre-wrap;text-align:justify;margin:0 0 1mm}
.cad .cond-f{font-family:var(--sans);font-size:8pt;color:#444;margin:0 0 1mm}
.cad.amp .cond-t{font-size:15pt;line-height:1.5}.cad.dys .cond-t{font-family:Verdana,Arial,sans-serif;font-size:13pt;line-height:1.8;text-align:left}
/* prova adaptada: fonte ampliada */
.cad.amp .qh,.cad.amp .qh .en,.cad.amp .qh .tb,.cad.amp .qh .as .a{font-size:16pt;line-height:1.5}
.cad.amp .qh>b{width:14mm}.cad.amp .qh .as .a span:first-child{width:9mm}.cad.amp .sec{font-size:15pt}.cad.amp .qh .ln{height:9.5mm}.cad.amp .qh .val{font-size:11pt}.cad.amp .qgap{height:6mm}.cad.amp .cab{font-size:11pt}
/* prova adaptada: dislexia (sem serifa, entrelinha e espaçamento maiores, alinhado à esquerda) */
.cad.dys{font-family:Verdana,Arial,sans-serif}
.cad.dys .qh,.cad.dys .qh .en,.cad.dys .qh .tb,.cad.dys .qh .as .a{font-family:Verdana,Arial,sans-serif;font-size:13pt;line-height:1.8;letter-spacing:.03em;word-spacing:.12em;text-align:left}
.cad.dys .qh>b{width:12mm}.cad.dys .qh .as .a{margin:1.5mm 0}.cad.dys .qh .as .a span:first-child{width:8mm}.cad.dys .qh .ln{height:9mm}.cad.dys .qgap{height:6mm}
#medBox.amp .qh,#medBox.amp .qh .en,#medBox.amp .qh .tb,#medBox.amp .qh .as .a{font-size:16pt;line-height:1.5}
.cad .qn .tb{white-space:pre-wrap;padding:0;margin:0 0 2.5mm;font-family:var(--serif);font-size:10pt;line-height:1.45;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.cad .qn .as{margin:1.5mm 0 0 11.5mm}
.cad .qn .a{display:flex;gap:2mm;margin:.6mm 0}
.cad .qn .a span:first-child{font-family:var(--sans);font-weight:600;flex:none;width:5mm}
.cad .qn .lines{margin:2.5mm 0 0 11.5mm;border-top:.25mm solid #999}
.cad .qn .lines div{height:6.8mm;border-bottom:.25mm solid #999}
.cad .qn .val{font-family:var(--sans);font-size:8.5pt;color:#444;margin-left:11.5mm}
.cad .pfoot{position:absolute;bottom:10mm;left:20mm;right:20mm;display:flex;justify-content:space-between;font-family:var(--sans);font-size:8pt;color:#444;border-top:.2mm solid #999;padding-top:1.5mm}
/* prova teste: marca d'água diagonal em todas as páginas */
.sheet.teste::after{content:"PROVA TESTE";position:absolute;left:0;width:210mm;top:130mm;text-align:center;font-family:var(--sans);font-size:60pt;font-weight:800;color:rgba(200,0,20,.13);transform:rotate(-30deg);pointer-events:none;letter-spacing:.06em;white-space:nowrap;line-height:1}

/* ===== tema SIGA (dashboard) ===== */
body{background:#f5f6f8}
.main{padding:26px 28px 60px}
.sidebar{padding:0 10px 14px;border-right:1px solid var(--line)}
.sb-mod{border:0;background:transparent;padding:0;margin-bottom:10px}.sb-mod.open{background:transparent;border:0}
.sb-mod-t{font-size:13px;text-transform:none;letter-spacing:0;color:var(--nav-ink);padding:9px 11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px}.sb-mod-t span{overflow:hidden;text-overflow:ellipsis}
.sb-mod-t:hover{background:var(--bg2);color:var(--ink)}.sb-mod.open .sb-mod-t{color:var(--ink);font-weight:700}
.sb-group h6{color:var(--nav-ink2)}
.sb-sec{font-size:10px;font-weight:700;color:var(--nav-ink2);text-transform:uppercase;letter-spacing:.7px;padding:14px 11px 6px;margin:0}
.nav-i{white-space:nowrap}.nav-i span{overflow:hidden;text-overflow:ellipsis}
.sb-mod .sb-group h6{display:none}
/* quando o módulo traz mais de um grupo (caso do portal do aluno), os títulos aparecem */
.sb-mod.multi .sb-group h6{display:block;color:var(--nav-ink2);margin:10px 0 6px}
.nav-i{padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--nav-ink);border-left:0;gap:12px}
.nav-i .svi{width:19px;height:19px;flex:none;color:var(--nav-ink2)}
.nav-i:hover{background:var(--bg2);color:var(--ink)}.nav-i:hover .svi{color:var(--ink2)}
.nav-i.active:hover{background:var(--red-l);color:var(--red-d)}.nav-i.active:hover .svi{color:var(--red)}
.nav-i:disabled,.nav-i[disabled]{color:var(--ink4);opacity:.6}.nav-i:disabled .svi{color:var(--ink4)}
.nav-i.active{background:var(--red-l);color:var(--red-d);border-color:transparent;border-radius:10px;font-weight:700}
.nav-i.active .svi{color:var(--red)}
.nav-i.active .bdg{background:var(--red);color:#fff}
.ph h1{font-size:24px;letter-spacing:-.6px}.ph p{font-size:13.5px}
/* mesmo desenho dos cartões do dashboard institucional: quadrado cheio, número escuro, rótulo abaixo */
.km{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;border-radius:14px;padding:16px 18px;border-color:#e6e9ef;box-shadow:var(--shadow)}
.km .kicon{grid-row:1/4;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:#475569}
.km .kicon svg{width:22px;height:22px;stroke:#fff}
.km.k-grn .kicon{background:#1a9d55}.km.k-amb .kicon{background:#e8b84a}.km.k-blu .kicon{background:#2563eb}
.km.k-tea .kicon{background:#0f8a91}.km.k-pur .kicon{background:#6d3fd6}.km.k-red .kicon{background:var(--d1)}
.km.k-alr .kicon{background:var(--alerta)}
.km.k-gry .kicon{background:var(--ink4)}
.km .kv{grid-column:2;grid-row:1;font-size:26px;font-weight:700;line-height:1.1;color:var(--ink);letter-spacing:-.5px;margin:0}
.km .kl{grid-column:2;grid-row:2;font-size:13px;font-weight:600;color:var(--ink3);text-transform:none;letter-spacing:0;margin-top:2px}
.km .kd{grid-column:2;grid-row:3;font-size:11.5px;color:var(--ink4);margin-top:2px}
.w{border-radius:12px;border-color:#e6e9ef;box-shadow:0 1px 2px rgba(16,24,40,.04)}.wh{padding:16px 20px;border-bottom:1px solid #eef0f4}.wh h3{font-size:16px;letter-spacing:-.3px}.wh p{font-weight:500;color:var(--ink3)}
.tbl th{background:#f8f9fb;color:var(--ink4);font-size:11px;letter-spacing:.5px}.tbl td{border-bottom:1px solid #eef0f4}
.btn-p{background:var(--red);box-shadow:none}.btn-p:hover{background:var(--red-d);box-shadow:var(--shadow-m)}
.btn-p:disabled:hover{background:var(--red)}.btn{border-color:#dfe3ea}
/* As abas tem UMA definicao so, na regua de abas acima. Aqui havia uma segunda, que vencia a
   primeira em gap e cravava a cor da linha de baixo: por isso ela nao seguia --line em
   contraste alto nem no escuro, e o gap:4px de la era codigo morto. */
.pill{border-radius:6px;font-weight:700;letter-spacing:.2px}
.topbar{border-bottom:1px solid #e9ecf1}
.nav-i{font-size:13px;font-weight:500;padding:9px 11px}.nav-i.active{font-weight:700}.sb-mod-t{font-size:13px;font-weight:600}

.preview-wrap{display:flex;justify-content:center;overflow:hidden}
.preview-wrap .sheet{transform-origin:top center}
@media(max-width:900px){
  .preview-wrap .sheet{transform:scale(.42);margin-bottom:calc(-297mm * .58)}
  .tbl{min-width:560px}
  .tbl th.opt,.tbl td.opt{display:none}
}

@media(max-width:600px){
  .tbl th.sec2,.tbl td.sec2{display:none}
  .tbl{min-width:520px}
}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-grid.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:760px){.modal-grid,.modal-grid.g3{grid-template-columns:1fr}}
@page{size:A4;margin:0}
/* lista de presença: listagem simples, linhas altas o bastante para assinar */
.lista-pres .lp-cab{display:flex;align-items:flex-start;gap:6mm;border-bottom:1.2pt solid #111;padding-bottom:3.5mm}
.lista-pres .lp-cab img{height:13mm}
.lista-pres .lp-inst{font-size:9pt;font-weight:700}
.lista-pres .lp-tit{font-size:16pt;font-weight:800;letter-spacing:-.3px;margin-top:1mm}
.lista-pres .lp-sub{font-size:10.5pt;font-weight:600;margin-top:.8mm}
.lista-pres .lp-cab>div:first-of-type{flex:1}
.lista-pres .lp-meta{text-align:right;font-size:8.5pt;line-height:1.6;color:#333;white-space:nowrap}
.lista-pres .lp-meta b{font-size:11pt}
.lista-pres .lp-nota{font-size:8.5pt;color:#555;margin:2.5mm 0 3.5mm}
.lista-pres .lp-curso{font-size:8pt;color:#555}
.lista-pres .lp-rod{margin-top:5mm;font-size:8.5pt;color:#444}
.lista-pres table.t{width:100%;border-collapse:collapse;font-size:10pt;table-layout:fixed}
.lista-pres table.t th{background:#f2f4f7;font-size:8.5pt;text-transform:uppercase;letter-spacing:.2px;padding:2.5mm 2mm;border:.5pt solid #b9bfc9;white-space:nowrap}
.lista-pres table.t td{padding:4.4mm 3mm;border:.5pt solid #ccd2db;vertical-align:middle;line-height:1.3}
.lista-pres table.t td b{font-size:10.5pt;white-space:nowrap}
/* O NOME quebra linha; o resto não. Com `table-layout:fixed` e `nowrap`, um nome longo não cabia
   na coluna e saía por cima da coluna vizinha — a letra da versão aparecia impressa em cima do
   sobrenome. Numa lista de 323 candidatos isso não era exceção: TODOS os nomes com mais de ~28
   caracteres saíam assim, e a lista é conferida com o documento na mão, à porta da sala. */
.lista-pres table.t td.lp-nome b{white-space:normal;overflow-wrap:break-word;line-height:1.25}
.lista-pres .lp-cpf{font-size:7.5pt;color:#555;margin-top:.6mm;white-space:nowrap}
/* O nome é o campo principal e ganhou a largura que sobrou das outras colunas: com a quebra de
   linha, cada milímetro a menos vira uma linha a mais em CADA candidato, e numa lista de 323
   nomes isso é a diferença entre 30 e 46 folhas por sala. */
.lista-pres table.t th .lp-th2{font-size:7.5pt;font-weight:600;text-transform:none;letter-spacing:0;color:#555}
.lista-pres table.t tr:nth-child(even) td{background:#fafbfc}

/* lista para a porta da sala: tudo grande, para ser lida de pé e a um metro de distância */
.lista-porta .pt-cab{display:flex;align-items:center;gap:6mm}
.lista-porta .pt-cab img{height:14mm}
.lista-porta .pt-inst{font-size:11pt;font-weight:700}
.lista-porta .pt-prova{font-size:13pt;font-weight:600;color:#333;margin-top:.8mm}
.lista-porta .pt-sala{font-size:34pt;font-weight:800;letter-spacing:-1px;line-height:1.05;margin:4mm 0 1mm;border-top:1.5pt solid #111;padding-top:3.5mm}
.lista-porta .pt-meta{font-size:11pt;color:#444;margin-bottom:5mm}
.lista-porta .pt-rod{margin-top:5mm;font-size:10pt;color:#444;text-align:center}
.lista-porta table.t{width:100%;border-collapse:collapse;table-layout:fixed}
.lista-porta table.t th{background:#f2f4f7;font-size:10pt;text-transform:uppercase;letter-spacing:.3px;padding:2.5mm 3mm;border:.5pt solid #b9bfc9;text-align:left}
.lista-porta table.t td{padding:2.4mm 3mm;border:.5pt solid #ccd2db;vertical-align:middle;line-height:1.22;font-size:12.5pt}
.lista-porta table.t td b{font-size:13.5pt;font-weight:700}
.lista-porta table.t tr:nth-child(even) td{background:#fafbfc}

@media print{
  .vazio-mark{display:none !important}
  body{background:#fff}
  .sheet,.cad,.gab,.sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.layout,.modal-overlay,.toast,#publicLayer,#medBox{display:none!important}
  #print-root{display:block}
  /* altura exata da folha e nada de quebra depois da última: evita a página em branco no fim
     e a que aparecia quando a folha passava do limite por uma fração de milímetro */
  .sheet{margin:0;box-shadow:none;height:297mm;min-height:0;overflow:hidden;box-sizing:border-box}
  .sheet:last-child{page-break-after:auto;break-after:auto}
}

/* menu lateral claro */
.sidebar{scrollbar-color:var(--line2) transparent}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.sb-mod-t svg{opacity:.55}
@media(max-width:900px){.sidebar{box-shadow:0 10px 40px rgba(0,0,0,.18)}}

/* O painel da tela de entrada em duas colunas mora em `superficie.css` desde 04/11 — era este
   segundo bloco, 540 linhas depois do primeiro, que já tinha custado uma correção aplicada na
   cópia errada. Agora há uma folha só, e ela vale também para as páginas públicas. */
.af-ou{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink4);font-size:12.5px}
.af-ou::before,.af-ou::after{content:'';flex:1;height:1px;background:var(--line)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--wh);color:var(--ink);border:1px solid var(--line2);font-weight:700}
.btn-google:hover{background:#f7f8fa;color:var(--ink)}

/* sino, mensagens e acessibilidade no topo */
.tb-drop{position:relative}
.tb-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--wh)}
.tbdrop{position:absolute;top:calc(100% + 8px);right:0;width:330px;max-height:440px;background:var(--wh);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l);z-index:120;display:none;flex-direction:column;overflow:hidden}
.tbdrop.on{display:flex}
.drop-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:13px}
.drop-l{overflow-y:auto}
.drop-i{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;font-family:inherit}
.drop-i:hover{background:var(--bg2)}
.drop-i:last-child{border-bottom:0}
.drop-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
.d-critico{background:var(--red)}.d-atencao{background:#e8b84a}.d-info{background:#1a9d55}
.drop-vazio{padding:22px 14px;text-align:center;color:var(--ink4);font-size:12.5px}
.a11y-g{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12.5px;color:var(--ink3);font-weight:600}
.a11y-b{border:1px solid var(--line2);background:var(--wh);border-radius:8px;padding:6px 10px;font-weight:700;font-size:13px;cursor:pointer;margin-left:6px;color:var(--ink)}
.a11y-b.on{background:var(--red-l);border-color:var(--red);color:var(--red-d)}
/* acessibilidade: alto contraste, modo escuro, espaçamento, sem animações */
body.a11y-hc{--wh:#000;--bg:#0b0b0b;--bg2:#141414;--ink:#fff;--ink2:#f1f1f1;--ink3:#e0e0e0;--ink4:#bdbdbd;--line:#666;--line2:#888;--red:#ff6b6b;--red-d:#ff9a9a;--red-l:#2a0000;--nav:#000;--nav2:#000;--nav-ink:#fff;--nav-ink2:#ddd;--nav-on:#222}
body.a11y-hc .w,body.a11y-hc .km,body.a11y-hc .modal-box{background:#0b0b0b;border-color:#666}
body.a11y-hc .tbl th{background:#141414}
body.a11y-dark{--wh:#161b22;--bg:#0d1117;--bg2:#1c2128;--ink:#e6edf3;--ink2:#c9d1d9;--ink3:#9aa6b2;--ink4:#7d8590;--line:#2a3038;--line2:#3a424c;--red-l:#2b1116;--nav:#0d1117;--nav2:#161b22;--nav-ink:#c9d1d9;--nav-ink2:#7d8590;--shadow:0 1px 2px rgba(0,0,0,.5);--shadow-l:0 10px 30px rgba(0,0,0,.6)}
body.a11y-dark .w,body.a11y-dark .km,body.a11y-dark .modal-box,body.a11y-dark .topbar,body.a11y-dark .tbdrop{background:#161b22;border-color:#2a3038}
body.a11y-dark .sidebar{background:#161b22!important;border-color:#2a3038}
body.a11y-dark .topbar{background:#161b22!important}
body.a11y-dark .nav-i.active{background:#2b1116;color:#ff8a94}
body.a11y-dark .nav-i.active .svi{color:#ff8a94}
body.a11y-dark input,body.a11y-dark select,body.a11y-dark textarea{background:#0d1117;color:#e6edf3;border-color:#3a424c}
body.a11y-dark .tbl th{background:#1c2128}
body.a11y-dark .sheet,body.a11y-dark .preview-wrap .sheet,body.a11y-dark .cert{background:#fff;color:#111}
body.a11y-esp{line-height:1.9;letter-spacing:.02em}
body.a11y-esp p,body.a11y-esp td,body.a11y-esp .tsub{line-height:1.9}
body.a11y-nomov *,body.a11y-nomov *::before,body.a11y-nomov *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
@media print{.tbdrop,.tb-drop{display:none!important}}

/* campo a preencher à mão, no caderno impresso sem nome */
.capa .box .l .preencher{display:inline-block;min-width:60mm;border-bottom:.4pt solid #444;height:4mm}

/* Capa padrão do caderno do vestibular — igual para todos os cursos, identificada só pela versão */
.capa-ps{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:Arial,Helvetica,sans-serif;color:#000;padding:2mm 0 0}
.capa-ps .cps-topo{width:100%}
.capa-ps .cps-logo{height:16mm;display:block;margin:0 auto 3mm}
.capa-ps .cps-inst{font-size:10.5pt;font-weight:700}
.capa-ps .cps-linha2{font-size:9.5pt;margin-top:1mm}
.capa-ps .cps-fita{margin:6mm 0 0;background:#000;color:#fff;font-size:10pt;font-weight:800;letter-spacing:.34em;padding:1.8mm 9mm}
.capa-ps .cps-tit{font-size:23pt;font-weight:900;line-height:1.12;margin:5mm 8mm 0;letter-spacing:-.4px}
.capa-ps .cps-cad{font-size:13pt;font-weight:800;letter-spacing:.06em;margin-top:3mm}
.capa-ps .cps-tipobox{margin-top:5mm;border:.8mm solid #000;border-radius:2mm;padding:2mm 7mm;display:flex;align-items:center;gap:4mm}
.capa-ps .cps-rot{font-size:8.5pt;font-weight:700;letter-spacing:.18em}
.capa-ps .cps-tipo{font-size:30pt;font-weight:900;line-height:1}
.capa-ps .cps-meta{font-size:10.5pt;font-weight:700;margin-top:3mm}
.capa-ps .cps-adapt{display:inline-block;margin-top:3mm;border:.5mm solid #900;color:#900;font-weight:700;font-size:10.5pt;padding:1.5mm 5mm}
.capa-ps .cps-ident{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2mm 5mm;margin:5mm 6mm 0;width:calc(100% - 12mm);box-sizing:border-box;border:.5pt solid #000;border-radius:2mm;padding:3mm 4mm 4mm;text-align:left}
.capa-ps .cps-ident-t{grid-column:1/-1;font-size:7.5pt;font-weight:700;letter-spacing:.12em;color:#444;text-align:center;margin-bottom:.5mm}
.capa-ps .cps-ident-l{display:flex;align-items:flex-end;gap:2mm;font-size:8.5pt}
.capa-ps .cps-ident-l span{font-weight:700;white-space:nowrap}
.capa-ps .cps-ident-l i{flex:1;border-bottom:.4pt solid #444;height:5mm}
.capa-ps .cps-instr-t{margin:7mm 6mm 2.5mm;font-size:10.5pt;font-weight:800;letter-spacing:.05em;align-self:flex-start;border-bottom:.5pt solid #000;padding-bottom:1.5mm;width:calc(100% - 12mm);text-align:left}
.capa-ps .cps-lista{margin:0 6mm;padding-left:6mm;text-align:left;font-size:8.6pt;line-height:1.5;width:calc(100% - 12mm);box-sizing:border-box}
.capa-ps .cps-lista>li{margin-bottom:2mm;text-align:justify}
.capa-ps .cps-comp{margin:1.5mm 0 0;padding-left:4mm;list-style:none}
.capa-ps .cps-comp li{margin-bottom:1mm;text-align:justify}
.capa-ps .cps-aviso{font-size:12pt;font-weight:800;margin-top:auto;padding:5mm 0 3mm;border-top:.5pt solid #000;width:calc(100% - 8mm)}
/* Folha de rascunho: em branco, com a palavra na transversal */
.rasc{position:relative;min-height:245mm;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.rasc .rasc-marca{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);
  font-family:Arial,Helvetica,sans-serif;font-size:58pt;font-weight:900;letter-spacing:.14em;
  color:#dfe3ea;white-space:nowrap;pointer-events:none}
.rasc .rasc-topo{position:relative;text-align:center;font-family:Arial,Helvetica,sans-serif;
  font-size:12pt;font-weight:800;letter-spacing:.2em;border-bottom:.5pt solid #000;padding-bottom:3mm;
  position:absolute;top:0;left:0;right:0}
.rasc .rasc-nota{position:relative;font-family:Arial,Helvetica,sans-serif;font-size:8.5pt;color:#555;
  text-align:center;max-width:130mm;margin:0 auto 4mm;line-height:1.5}

/* folha de redação: linhas espaçadas para escrita à mão */
.sheet.cad .red-l{display:flex;align-items:flex-end;gap:3mm}
.sheet.cad .red-l b{font-family:var(--sans);font-size:7.5pt;color:#9aa1ab;width:6mm;text-align:right;font-weight:600;line-height:1}
.sheet.cad .red-l i{flex:1;border-bottom:.4pt solid #444;height:100%}

/* identificação do candidato na folha de redação: nome em até duas linhas, sem estourar a largura */
.sheet.cad .cab .cab-ident{width:66mm;flex:none;text-align:right}
.sheet.cad .cab .cab-nome{display:-webkit-box;font-size:10pt;line-height:1.2;overflow-wrap:anywhere;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* nome comprido: diminui e ganha uma terceira linha, para não cortar sobrenome */
.sheet.cad .cab .cab-nome.longo{font-size:8.4pt;line-height:1.25;-webkit-line-clamp:3}
.sheet.cad .cab .cab-dados{font-size:8.5pt;margin-top:.8mm}
.sheet.cad .cab .cab-cod{font-family:ui-monospace,Menlo,monospace;font-size:7pt;color:#777;margin-top:.6mm;letter-spacing:.04em}

/* selo da triagem objetiva da redação */
.tri-selo{font-size:12.5px;border-radius:10px;padding:9px 12px;margin-bottom:10px;border:1px solid}
.tri-selo b{margin-right:6px}
.tri-grn{background:#eafaf1;border-color:#bfe6cf;color:#145c36}
.tri-amb{background:#fff7e6;border-color:#f1d8a6;color:#7a5406}
.tri-red{background:#fdecee;border-color:#f3c2c6;color:#8d1620}

/* Grupos da triagem da redação. Cada um recolhe a sua lista: os dois que pedem decisão humana
   nascem abertos, "texto curto" e "em ordem" ficam fechados — com 351 candidatos, "em ordem" é
   a lista inteira e aberta empurraria os outros três para fora da tela. */
.tri-g{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.tri-g>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--bg2);font-size:13.5px}
.tri-g>summary::-webkit-details-marker{display:none}
.tri-g>summary::after{content:"›";margin-left:auto;font-size:17px;line-height:1;color:var(--ink4);transition:transform .15s}
.tri-g[open]>summary::after{transform:rotate(90deg)}
.tri-g>summary:hover{background:var(--line)}
.tri-g>summary .tsub{font-weight:600}
.tri-g .tbl{border-top:1px solid var(--line)}

/* ---- Simulados ENADE ---- */
.en-barra{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:6px}
.en-barra>span{display:block;height:100%;background:var(--red);border-radius:4px}
.en-comp{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.en-comp>div:first-child{flex:1;font-size:13px}
.en-pct{font-size:17px;font-weight:800;min-width:52px;text-align:right}
/* Dicas dos Simulados — no mesmo padrão das caixas de orientação: caixa cheia, borda inteira,
   cantos arredondados e ícone. A linha vertical à esquerda saiu daqui também (21/10); eu a tinha
   deixado por classificar estas como "dica" e não como orientação, e "Priorize os conteúdos com
   menor índice de acertos" é orientação.
   O ícone vem de pseudo-elemento, e não de <svg> no markup como em .orienta, porque são 14 pontos
   de chamada dentro de literais aninhados — reescrevê-los à mão é onde eu erraria. O resultado na
   tela é o mesmo, e a forma do ícone muda com o tom, não só a cor. */
.en-dica{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.55;
  color:#4a4a51;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-top:8px}
.en-dica::before{content:'';flex:none;width:17px;height:17px;margin-top:1px;background-color:currentColor;
  -webkit-mask:var(--dica-ico) center/17px 17px no-repeat;mask:var(--dica-ico) center/17px 17px no-repeat;
  --dica-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-5M12 8h.01'/></svg>");
  color:var(--ink4)}
.en-dica.p-red{background:var(--red-l);border-color:#f3c9ce;color:#7a1f28}
.en-dica.p-red::before{color:var(--red-d);
  --dica-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/></svg>")}
.en-dica.p-amb{background:var(--amb-l);border-color:#f0dcb0;color:#6b5420}
.en-dica.p-amb::before{color:#b07d00}
.en-dica.p-grn{background:var(--grn-l);border-color:#c3e8d0;color:#1f5133}
.en-dica.p-grn::before{color:#15803d;
  --dica-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.1V12a10 10 0 1 1-5.9-9.1M22 4 12 14l-3-3'/></svg>")}
.en-dica.p-blu{background:#eef4ff;border-color:#c9d9f5;color:#1e3a6b}
.en-dica.p-blu::before{color:#2563eb}
.en-dica.p-gry{background:var(--bg2);border-color:var(--line);color:var(--ink3)}
/* texto corrido, com negrito no meio: o ícone sai, porque num parágrafo ele vira ruído */
.en-dica.en-corrido{display:block}
.en-dica.en-corrido::before{display:none}
.en-abas{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.en-aba{border:0;background:var(--wh);padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink3);border-right:1px solid var(--line2)}
.en-aba:last-child{border-right:0}
.en-aba.on{background:var(--red);color:#fff}
.en-alerta{display:flex;gap:12px;align-items:flex-start;background:#fff8e6;border:1px solid #f0d699;
  border-radius:10px;padding:13px 15px;margin-bottom:12px}
.en-alerta-ic{width:28px;height:28px;border-radius:50%;background:var(--amb);color:#fff;display:grid;
  place-items:center;font-weight:800;flex:none}
.en-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-bottom:18px}
.en-card{background:var(--wh);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.en-card-ic{color:var(--red);margin-bottom:12px}
.en-card-tit{font-size:14.5px;font-weight:800;margin-bottom:4px}
.en-card-desc{font-size:12.5px;color:var(--ink4);font-weight:600;line-height:1.5;margin-bottom:14px;min-height:38px}
.en-card-pe{display:flex;gap:6px;align-items:center}
@media(max-width:600px){.en-cards{grid-template-columns:1fr}.en-card-desc{min-height:0}}

/* ===== formulário de pesquisa (prévia e resposta) =====
   Os controles do questionário ficam fora de .fld — é o formulário inteiro, não um campo de cadastro —
   e por isso não herdavam estilo nenhum: a caixa de resposta aberta saía com a borda fina e a fonte
   monoespaçada que o navegador usa por conta própria. As cores vêm das variáveis, então o modo escuro
   e o alto contraste acompanham sem regra extra. */
.campo{width:100%;border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font-family:inherit;
  font-size:14px;line-height:1.55;color:var(--ink);background:var(--wh);transition:border-color .12s,box-shadow .12s}
.campo:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)}
.campo::placeholder{color:var(--ink4);font-family:inherit}
.campo:disabled{background:var(--bg2);color:var(--ink3);cursor:default}
textarea.campo{resize:vertical;min-height:104px;display:block}
/* contador de caracteres da resposta aberta */
.campo-pe{display:flex;justify-content:flex-end;font-size:11px;color:var(--ink4);font-weight:600;margin-top:4px}
/* opções de resposta: a escala fica em linha, as demais empilhadas */
.opt{display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid var(--line2);border-radius:10px;
  background:var(--wh);cursor:pointer;font-size:15px;color:var(--ink);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--ink4)}
.opt.on{border-color:var(--red);background:var(--red-l);font-weight:600}
.opt input{width:auto;margin:0;flex:none;accent-color:var(--red)}
.opt.nao-clica{cursor:default}
.opt.nao-clica:hover{border-color:var(--line2)}
.opt-lin{display:flex;flex-direction:column;gap:8px;max-width:560px}
/* os cinco pontos da escala dividem a linha em partes iguais: "Discordo totalmente" é bem mais largo
   que "Neutro", e deixar cada caixa crescer até o seu texto jogava o quinto ponto para a linha de baixo */
/* A escala deixou de ser cinco caixas numeradas: é um ponto por opção, com o rótulo embaixo. O
   número a 21 px pesava mais que a própria pergunta — o olho ia ao "1 2 3 4 5" antes de ler o que
   estava sendo perguntado —, e o rótulo embaixo já diz o que cada ponto significa.
   Grade de cinco colunas iguais: "Discordo totalmente" é bem mais largo que "Neutro", e deixar cada
   coluna crescer até o seu texto jogava o quinto ponto para a linha de baixo. */
.lik{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-width:720px}
.lik .opt{flex-direction:column;align-items:center;gap:9px;text-align:center;border:0;background:none;
  font-size:12.5px;line-height:1.3;color:var(--ink3);padding:6px 4px;border-radius:10px}
.lik .opt:hover{border:0;background:var(--bg2)}
.lik .opt.on{border:0;background:none;font-weight:600;color:var(--ink)}
/* O ponto é o próprio input: anel fino que fica vermelho ao marcar, com o ponto por dentro. Era um
   anel de 7 px, que de longe virava uma rosca e pesava mais que o texto ao lado. */
.lik .opt input{appearance:none;-webkit-appearance:none;position:relative;width:22px;height:22px;
  border-radius:50%;border:1.5px solid var(--line2);background:var(--wh);margin:0;cursor:pointer;
  transition:border-color .14s}
.lik .opt input::after{content:'';position:absolute;inset:4.5px;border-radius:50%;background:var(--red);
  transform:scale(0);transition:transform .14s cubic-bezier(.3,1.3,.6,1)}
.lik .opt input:checked{border-color:var(--red)}
.lik .opt input:checked::after{transform:scale(1)}
.lik .opt input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.lik .opt.nao-clica input{cursor:default}
@media(max-width:700px){.lik{gap:2px}.lik .opt{font-size:10.5px;padding:6px 1px}.opt-lin{max-width:none}}
/* o questionário é para ler e responder: coluna estreita, como um formulário em papel */
.form-pesq{max-width:780px;margin:0 auto}

/* ===== página pública do formulário (link /?cpa=TOKEN) =====
   Não é uma tela do sistema: quem abre não tem conta, não navega e não volta para lugar nenhum. É a cara da
   instituição para quem talvez nunca tenha entrado aqui — por isso a faixa vermelha da marca no topo, a ficha
   da pesquisa à esquerda e o formulário à direita, em vez da barra do sistema esvaziada. */
body.pagina-publica{background:var(--bg)}
body.pagina-publica .layout{padding-left:0;min-height:100vh;flex-direction:column}
body.pagina-publica .main{padding:0;display:flex;flex-direction:column;min-height:100vh}
body.pagina-publica .main>*{animation:none}

.pub-faixa{background:var(--red-g);color:#fff;box-shadow:var(--shadow-m)}
.pub-faixa-in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:16px}
.pub-marca{height:34px;flex:none;filter:brightness(0) invert(1)}
.pub-marca-txt{display:flex;align-items:center;line-height:1.3;border-left:1px solid rgba(255,255,255,.35);padding-left:16px}
.pub-marca-txt span{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.92)}

/* Uma coluna só: o cabeçalho, o formulário e o aviso da LGPD, cada um na largura inteira. A coluna
   lateral de 352px não comportava a apresentação da pesquisa e ainda estreitava o formulário, que é
   onde a escala de 1 a 5 precisa de espaço. */
.pub-corpo{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:26px 28px 56px;box-sizing:border-box}
.pub-abertura{background:var(--wh);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:18px}
.pub-capa-larga{height:200px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.pub-abertura-in{padding:34px 34px 30px}
/* da segunda etapa em diante: só título e fichas, numa faixa baixa */
.pub-abertura-min .pub-abertura-in{padding:18px 34px}
.pub-abertura-min .pub-tit{font-size:19px;line-height:1.3}
.pub-abertura-min .pub-fichas{margin-top:14px;padding:13px 4px;gap:12px 6px}
.pub-abertura-min .pub-chip{width:27px;height:27px;border-radius:9px}
.pub-abertura-min .pub-chip .pub-ico{width:14px;height:14px}
.pub-abertura-min .pub-ficha b{font-size:12.5px}
.pub-abertura-min .pub-ficha span{font-size:11px}
.pub-card{background:var(--wh);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow)}
/* O sobretítulo e o nome do eixo em caixa baixa, na fonte dos títulos: em caixa alta com 11 px e
   entreletra larga eles liam como etiqueta de sistema, e esta é a tela de quem só vai responder. */
.pub-sobre{font-family:var(--titulo);font-size:14px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink3);margin-bottom:9px}
.pub-tit{font-family:var(--titulo);font-size:33px;font-weight:600;line-height:1.18;
  letter-spacing:-.028em;color:var(--ink);margin:0;max-width:820px}
/* Mesma medida do título (820 px). Chegou a ter 68 caracteres por linha, que é a medida boa de
   leitura — mas num cartão de 1100 px o bloco ficava bem mais estreito que o título logo acima e
   que a ficha logo abaixo, e lia como texto recuado em vez de texto medido. */
.pub-desc{font-size:16px;line-height:1.68;color:var(--ink2);margin:16px 0 0;max-width:820px;white-space:pre-wrap}
/* As fichas num painel próprio, cada ícone numa pastilha: os fios entre colunas quebravam em duas
   fileiras tortas assim que a janela estreitava, e a pastilha já marca onde cada item começa.
   #fafbfd é um branco-cinza só desta superfície — mais claro que --bg2, que aqui pesaria. */
.pub-fichas{margin-top:26px;background:#fafbfd;border:1px solid #edf0f5;border-radius:13px;
  padding:19px 6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:17px 8px}
.pub-ficha{display:flex;gap:12px;align-items:center;min-width:0;padding:0 16px}
.pub-chip{flex:none;width:32px;height:32px;border-radius:10px;background:var(--red-l);
  display:grid;place-items:center}
.pub-ficha b{display:block;font-family:var(--titulo);font-size:14px;font-weight:500;
  letter-spacing:-.008em;color:var(--ink);line-height:1.25}
.pub-ficha span{display:block;font-size:11.5px;color:var(--ink3);line-height:1.35;margin-top:3px}
.pub-ico{width:21px;height:21px;flex:none;color:var(--red);margin-top:1px}
/* dentro da pastilha o ícone é menor: quem dá presença ali é a pastilha, não o traço */
.pub-chip .pub-ico{width:16px;height:16px;margin:0}
/* Nota de rodapé, não aviso. Era uma caixa âmbar com escudo e título, do tamanho de um alerta, para
   dizer que está tudo em ordem — logo abaixo de um questionário que já anuncia o anonimato na ficha
   do topo. O texto legal é o mesmo; o peso é o de uma nota. */
.pub-lgpd{margin:26px auto 0;max-width:72ch;text-align:center;font-size:12px;line-height:1.65;color:var(--ink3)}
.pub-lgpd b{font-weight:600;color:var(--ink2)}

.pub-form{min-width:0}
.pub-form .w{margin-bottom:16px}
/* Corpo de leitura, não de interface: quem responde lê trinta perguntas seguidas, muitas com rótulos
   de escala embaixo. A 14px a pergunta cansava, e o rótulo da escala saía a 11,5px.
   A pergunta deixou de ser uma caixa cinza com tarja: com vinte e uma seguidas eram vinte e uma
   caixas empilhadas. Um fio entre elas diz onde uma termina e a outra começa, e o número vermelho
   dá o lugar sem que a pergunta precise de moldura. */
.pq-item{padding:22px 0}
.pq-item:first-child{padding-top:4px}
.pq-item:last-child{padding-bottom:4px}
.pq-item+.pq-item{border-top:1px solid var(--line)}
/* 16px é piso, não gosto: a pergunta já esteve em 14 e cansava na décima. A maquete pedia 15,5,
   meio pixel que ninguém distingue — e a tela do SIGA é mais larga que a prancheta onde ela foi
   desenhada, então aqui o mesmo número lê menor. */
.pq-txt{display:flex;gap:13px;align-items:baseline;font-size:16px;line-height:1.55;
  color:var(--ink);margin-bottom:16px}
/* O número numa bolha vermelha. `.pq-n` não serve: é o "12." do relatório impresso e do
   questionário em papel, onde o número é texto corrido e não pode virar disco. */
.pq-bolha{flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);color:var(--nav-on);
  font-family:var(--titulo);font-size:12.5px;font-weight:600;display:grid;place-items:center;
  align-self:flex-start;line-height:1}
.pq-n{color:var(--red-d);font-weight:800;margin-right:3px}
.pq-obr{color:var(--red)}
.pq-item .campo{background:var(--wh)}
/* a resposta recua para debaixo do texto da pergunta — 26 da bolha + 13 do vão —, senão ela começa
   na borda do cartão e a bolha fica sozinha numa coluna que não é de ninguém */
.pq-item .lik,.pq-item .opt-lin,.pq-item>.campo{margin-left:39px}
@media(max-width:700px){.pq-item .lik,.pq-item .opt-lin,.pq-item>.campo{margin-left:0}}

.pub-rodape{background:var(--nav2);border-top:1px solid var(--line);padding:20px 24px;
  text-align:center;font-size:12px;line-height:1.6;color:var(--ink3);font-weight:600}

@media(max-width:980px){
  .pub-corpo{padding:20px 16px 44px}
  .pub-abertura-in{padding:22px 20px}
  .pub-fichas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pub-card{padding:22px 20px}.pub-tit{font-size:23px}
}
@media(max-width:700px){
  .pub-faixa-in{padding:13px 16px;gap:12px}.pub-marca{height:27px}
  .pub-marca-txt{padding-left:12px}.pub-marca-txt b{font-size:12.5px}
  .pq-item{padding:14px 14px}
  .pe-pct{display:none}
  .pub-fichas{grid-template-columns:1fr}
  .pub-rodape{padding:16px}
}
/* tela de agradecimento do link público */
.pub-fim{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 20px}
.pub-fim .pub-card{max-width:460px;padding:36px 30px}
.pub-ok{width:54px;height:54px;border-radius:50%;background:var(--grn-l);color:var(--grn);
  display:grid;place-items:center;margin:0 auto 16px}
.pub-ok .pub-ico{width:28px;height:28px;color:inherit}

/* ===== etapas do formulário público =====
   O passo mora dentro do cartão: "Etapa 3 de 7" à esquerda, quantas perguntas já foram respondidas à
   direita, e a barra embaixo, em largura inteira. A trilha de bolinhas repetia o nome da etapa logo
   acima do título dela e, de sete etapas em diante, os rótulos ficavam espremidos a ponto de não se
   ler; o fio contínuo que a substituiu dizia só uma porcentagem. A barra é segmentada, um segmento
   por etapa: ela própria informa quantas existem e em qual se está. */
.pe-passo{margin-bottom:20px}
.pe-passo-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pe-fio{display:flex;gap:4px;margin-top:12px}
.pe-fio span{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .2s}
.pe-fio span.on{background:var(--red)}
.pe-pct{font-size:12.5px;font-weight:500;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* faixa etária: botões de largura igual, como a escala */
.faixa-idade{display:flex;gap:8px;flex-wrap:wrap}
.faixa-idade .opt{flex:1 1 0;min-width:112px;justify-content:center;font-weight:600}

.pub-etapa{background:var(--wh);border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;box-shadow:var(--shadow)}
.pe-rotulo{font-family:var(--titulo);font-size:16px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;color:var(--ink)}
.pe-rotulo span{color:var(--ink4)}
/* "Eixo 2" acima do nome do eixo: só nas etapas que são eixo — identificação e conclusão não são */
.pe-eixo{font-family:var(--titulo);font-size:14px;font-weight:600;letter-spacing:-.005em;
  color:var(--red-d);margin:0 0 7px}
.pe-tit{font-family:var(--titulo);font-size:21px;font-weight:500;letter-spacing:-.015em;color:var(--ink);margin:0 0 6px}
.pe-sub{font-size:13.5px;line-height:1.55;color:var(--ink3);margin:0 0 18px}
.pub-etapa .w{box-shadow:none;border:0;margin:0 0 14px;background:transparent}
.pub-etapa .w .wh{padding:0 0 12px;border:0}
.pub-etapa .w .wb{padding:0}
.pub-acoes{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.pub-acoes .seta{font-weight:700}
/* Pergunta obrigatória em branco, apontada na hora de continuar. Apontava pela tarja vermelha à
   esquerda, que saiu com o redesenho de 23/10 — a regra ficou pintando uma borda que não existe
   mais, e nenhum teste cobria este estado. Agora é o fundo e o anel; a margem negativa faz o
   destaque transbordar os 16px laterais sem empurrar o texto de lugar quando ele aparece. */
.pq-item.pq-falta{background:var(--red-l);border-radius:10px;margin:0 -16px;padding:22px 16px;
  box-shadow:0 0 0 1px var(--red) inset;border-top-color:transparent}
.pq-item.pq-falta+.pq-item{border-top-color:transparent}
/* conferência da última etapa */
.pub-rev{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:9px;cursor:pointer;background:var(--bg2)}
.pub-rev:hover{border-color:var(--red);background:var(--red-l)}
.pub-rev b{display:block;font-size:13.5px;color:var(--ink)}
.pub-rev .tsub{display:block;font-size:12px;margin-top:1px}
/* capa da instituição no alto da ficha */
.pub-card-capa{padding:0;overflow:hidden}
.pub-capa-img{height:130px;background-size:cover;background-position:center}
.pub-card-in{padding:24px}

@media(max-width:980px){
  .pub-etapa{padding:20px 18px 18px}.pe-tit{font-size:20px}
  .pub-card-in{padding:20px}
}

/* ===== editor de perguntas da pesquisa ===== */
.pg-sec{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.pg-sec-h{display:flex;align-items:baseline;gap:10px;padding:11px 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.pg-sec-h b{font-size:13px;color:var(--ink)}
.pg-l{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
.pg-l:last-child{border-bottom:0}
.pg-n{min-width:24px;font-size:12px;color:var(--ink4);font-weight:800;padding-top:2px}
.pg-c{flex:1;min-width:0}
.pg-t{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.pg-m{font-size:12px;color:var(--ink3);margin-top:3px}
.pg-alerta{margin-top:6px;font-size:12px;font-weight:600;color:var(--amb);background:var(--amb-l);
  border-radius:7px;padding:6px 9px;display:inline-block}
.pg-b{display:flex;gap:4px;flex:none}
/* faixa de aviso da visualização, dentro do quadro */
.pub-previa{background:var(--amb);color:#3a2a00;font-weight:800;font-size:12px;text-align:center;
  padding:6px 12px;letter-spacing:.2px}

/* ===== resultados da pesquisa ===== */
.res-p{padding:16px 0;border-bottom:1px solid var(--line)}
.res-p:last-child{border-bottom:0;padding-bottom:0}
.res-p:first-child{padding-top:0}
.res-p-cab{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap;
  font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink);margin-bottom:10px}
.res-p-cab .tsub{font-weight:600;white-space:nowrap}
.res-num{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px;
  padding:10px 14px;background:var(--bg2);border-radius:10px}
.res-b{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.res-rot{flex:0 0 190px;font-size:12.5px;color:var(--ink3);line-height:1.35}
.res-tr{flex:1;height:14px;border-radius:7px;background:var(--bg2);overflow:hidden;min-width:60px}
.res-tr>span{display:block;height:100%;background:var(--red);border-radius:7px}
.res-n{flex:0 0 88px;text-align:right;font-size:13px}
.res-txts{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.res-txt{padding:10px 13px;font-size:13px;line-height:1.55;white-space:pre-wrap}
@media(max-width:700px){.res-rot{flex-basis:110px;font-size:11.5px}.res-n{flex-basis:70px;font-size:12px}}
/* na impressão as barras precisam sair com a cor cheia, não em branco */
@media print{.res-tr>span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .res-txts{max-height:none;overflow:visible}}
/* miniatura da imagem de abertura da pesquisa, no editor */
.capa-mini{width:132px;height:74px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2);
  background-size:cover;background-position:center;flex:none;display:grid;place-items:center;
  font-size:11px;color:var(--ink4);font-weight:600}
.pg-sec-txt{padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--line);font-size:12.5px;
  line-height:1.55;color:var(--ink3);white-space:pre-wrap}
/* texto que abre a etapa, no formulário */
.pe-secao{font-size:13.5px;line-height:1.6;color:var(--ink3);padding:11px 14px;margin:0 0 14px;white-space:pre-wrap}
.campo-outra{max-width:420px}

/* ---- prévia da importação de questionário do Word ---- */
.iq-num{display:flex;gap:10px;flex-wrap:wrap}
.iq-num>div{flex:1 1 110px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;text-align:center}
.iq-num b{display:block;font-size:22px;line-height:1.1;color:var(--ink)}
.iq-num span{font-size:11.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.3px}
.aviso-cx{background:#fff8e6;border:1px solid #f0d28a;border-radius:11px;padding:11px 14px;margin:10px 0;font-size:13px;line-height:1.55}
.aviso-cx b{display:block;margin-bottom:4px}
.aviso-cx ul{margin:0;padding-left:18px}
/* ---- A redação DIGITADA, na tela do corretor (03/11) ----
   Superfície de leitura, não campo de formulário: serifada, entrelinha larga e medida de leitura.
   O corretor lê trinta linhas aqui — a mesma tipografia que o caderno impresso usa, porque é o
   mesmo texto e deve pesar o mesmo na avaliação. */
.red-dig{background:var(--wh);border:1px solid var(--line2);border-radius:11px;padding:14px 18px;margin-bottom:12px;font-family:var(--serif);font-size:15.5px;line-height:1.85;white-space:pre-wrap;max-height:62vh;overflow:auto}
.red-dig .rot{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:block}
.red-dig .vazio{font-family:var(--sans);color:var(--red-d);font-weight:700}
.ok-cx{background:#edfaf0;border:1px solid #b6e0c2;border-radius:11px;padding:10px 14px;margin:10px 0;font-size:13px;color:#1d6b35}
.iq-lista{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:6px}
.iq-sec+.iq-sec{border-top:1px solid var(--line)}
.iq-sec h4{display:flex;gap:10px;align-items:baseline;justify-content:space-between;margin:0;padding:10px 14px;background:var(--bg2);font-size:13.5px;border-bottom:1px solid var(--line)}
.iq-sec .pe-secao{margin:10px 14px}
.iq-q{padding:9px 14px;font-size:13.5px;line-height:1.5}
.iq-q+.iq-q{border-top:1px dashed var(--line)}
.iq-m{font-size:11.5px;color:var(--ink3);margin-top:2px}

/* ---- atendimento especial: opções com a descrição do que o sistema faz ---- */
.at-op{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line2);
  border-radius:10px;margin-bottom:8px;cursor:pointer;background:var(--wh)}
.at-op:hover{border-color:var(--ink4)}
.at-op input{width:auto;margin:2px 0 0;flex:none;accent-color:var(--red)}
.at-op b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.at-op .tsub{display:block;font-size:12px;line-height:1.45;margin-top:2px}
.at-cfg{padding:12px 14px;margin:0 0 10px}

/* O mesmo formulário respondido por dentro do sistema: sem a faixa da marca e sem o rodapé, que são da
   página pública, mas com o mesmo cabeçalho, as mesmas etapas e o mesmo aviso da LGPD. */
.pub-corpo-interno{padding:0 0 32px;max-width:1180px}

/* ======================================================================================
   Menu lateral em árvore e composição das telas de visão geral
   Referência: "Padrão de design e CSS FAPCOM" (v1.0) e o layout aprovado pela direção.
   ====================================================================================== */

/* --- cabeça do grupo: é ela que leva o ícone ---------------------------------------
   Com ícone em todo item o menu fica alto demais e os ícones repetidos param de
   significar alguma coisa. Na cabeça o ícone identifica a área; dentro dela, o que
   orienta é a posição na árvore. */
.sb-mod-t{display:flex;align-items:center;gap:11px;width:100%}
.sb-mod-t .svi{width:19px;height:19px;flex:none;color:var(--nav-ink2)}
.sb-mod-t>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-mod-t .seta{width:15px;height:15px;flex:none;color:var(--nav-ink2);transition:transform .15s}
.sb-mod.open>.sb-mod-t{color:var(--ink);font-weight:700;background:var(--bg2)}
.sb-mod.open>.sb-mod-t .svi{color:var(--ink2)}
/* grupo da página aberta, mesmo recolhido: marca onde a pessoa está */
.sb-mod.aqui>.sb-mod-t{color:var(--red-d)}
.sb-mod.aqui>.sb-mod-t .svi{color:var(--red)}

/* --- subitens: sem ícone, ligados por uma linha com um ponto em cada --------------- */
.sb-arv{position:relative;margin:2px 0 8px;padding-left:23px}
.sb-arv::before{content:'';position:absolute;left:22px;top:2px;bottom:10px;width:1.5px;background:var(--line);border-radius:2px}
.sb-arv h6{font-size:10px;font-weight:700;color:var(--nav-ink2);text-transform:uppercase;letter-spacing:.6px;padding:8px 0 4px 10px;margin:0}
.nav-sub{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 12px 8px 16px;margin-bottom:1px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--nav-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s,color .12s}
.nav-sub>span{overflow:hidden;text-overflow:ellipsis}
.nav-sub::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--wh);border:1.5px solid var(--line2);transition:background .12s,border-color .12s}
.nav-sub:hover{background:var(--bg2);color:var(--ink)}
.nav-sub:hover::before{border-color:var(--nav-ink2)}
.nav-sub.active{background:var(--red-l);color:var(--red-d);font-weight:700}
.nav-sub.active::before{background:var(--red);border-color:var(--red)}
.nav-sub .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}

/* --- faixa institucional: o mesmo fundo da tela de entrada ------------------------- */
/* Era `var(--grafite)`, um cinza neutro que não dizia nada da instituição. Agora usa o mesmo
   --fundo-inst da tela de entrada: quem entra vê aquela superfície e a reencontra no primeiro
   quadro de dentro. Uma variável, dois consumidores — e um teste conferindo que os dois
   continuam idênticos, porque é assim que eles param de divergir. */
/* Cor sólida E imagem vêm da regra única do fundo institucional, lá em cima:
   se a variável ficar inválida (CSS velho em cache, cor cadastrada mal formada), o atalho inteiro
   se anula e sobra texto branco sobre fundo claro — ilegível e silencioso. Separadas, a imagem
   some e o chão sólido permanece. Quem flagrou isto foi a conferência de contraste da suíte, que
   mediu 1.08:1 na saudação. */
.vg-faixa{position:relative;overflow:hidden;color:#fff;border-radius:16px;
  padding:26px 28px;margin-bottom:18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* O borrão vermelho do canto saiu: era decoração que não dizia nada e disputava atenção com o
   conteúdo da própria faixa. */
.vg-faixa>div{position:relative;z-index:1;min-width:0}
/* `vg-hoje`, e não `vg-dia`: esse nome já é de outra peça, com fundo vermelho e largura fixa,
   e os pedaços dela que a minha regra não sobrescrevesse vazariam para dentro da faixa. */
.vg-faixa .vg-hoje{font-size:12px;color:#a8aeb8;letter-spacing:.02em}
.vg-faixa h2{font-size:27px;font-weight:700;letter-spacing:-.4px;line-height:1.2;margin-top:4px}
.vg-faixa p{color:#c9ced6;font-size:13px;margin-top:7px;max-width:720px;line-height:1.55}
/* O seletor de período vive dentro da faixa e precisa da roupa dos botões dela. O `#main` não é
   enfeite: a folha tem `#main select`, com seletor de id, que vence qualquer regra de classe — sem
   ele este bloco inteiro não valia nada, e o seletor saía branco sobre o grafite. */
#main .vg-faixa .vg-sel{font:inherit;font-size:13px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:6px;
  padding:0 10px;min-height:36px}
#main .vg-faixa .vg-sel option{color:var(--ink);background:#fff}
.vg-faixa b{color:var(--amar);font-weight:700}
.vg-faixa .vg-acoes{position:relative;z-index:1;margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.vg-faixa .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.vg-faixa .btn:hover{background:rgba(255,255,255,.22);color:#fff}
.vg-faixa .btn:hover{background:rgba(255,255,255,.2)}
.vg-faixa .btn-p{background:var(--amar);border-color:var(--amar);color:#111}
.vg-faixa .btn-p:hover{background:#ebc000}

/* --- grade de 12 colunas, como o padrão ------------------------------------------- */
.vg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-bottom:18px;align-items:start}
.vg-4{grid-column:span 4}.vg-5{grid-column:span 5}.vg-6{grid-column:span 6}
.vg-7{grid-column:span 7}.vg-8{grid-column:span 8}.vg-12{grid-column:span 12}
.vg-grid>.w{margin-bottom:0}
@media(max-width:1180px){.vg-4,.vg-5,.vg-6,.vg-7,.vg-8{grid-column:span 12}}

/* --- agenda e listas curtas da coluna lateral ------------------------------------- */
.vg-ag{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.vg-ag:first-child{padding-top:0}.vg-ag:last-child{border-bottom:0;padding-bottom:0}
.vg-dia{flex:none;width:46px;text-align:center;background:var(--red-l);border-radius:10px;padding:6px 0;line-height:1.1}
.vg-dia b{display:block;font-size:17px;font-weight:800;color:var(--red-d)}
.vg-dia span{font-size:10px;font-weight:700;color:var(--red-d);text-transform:uppercase;letter-spacing:.4px}
.vg-ag-txt{min-width:0;flex:1}
.vg-ag-txt strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
.vg-ag-txt span{display:block;font-size:12px;color:var(--ink4);margin-top:2px}

/* --- ações rápidas ---------------------------------------------------------------- */
.vg-acao{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--wh);cursor:pointer;margin-bottom:9px;
  transition:border-color .12s,background .12s}
.vg-acao:last-child{margin-bottom:0}
.vg-acao:hover{border-color:var(--red);background:var(--red-l)}
.vg-acao .svi{width:20px;height:20px;color:var(--red);flex:none}
.vg-acao-txt{flex:1;min-width:0}
.vg-acao-txt strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.vg-acao-txt span{display:block;font-size:12px;color:var(--ink4);margin-top:1px}
.vg-acao .seta{width:16px;height:16px;color:var(--ink4);flex:none}

/* --- pendências: número grande, rótulo e o caminho para resolver ------------------- */
.vg-pend{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.vg-pend button{display:flex;align-items:baseline;gap:10px;text-align:left;width:100%;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--wh);cursor:pointer;transition:border-color .12s}
.vg-pend button:hover{border-color:var(--red)}
.vg-pend .n{font-size:22px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--titulo)}
.vg-pend .t{font-size:13px;font-weight:600;color:var(--ink3);line-height:1.35}
.vg-pend .urgente .n{color:var(--red-d)}
.vg-pend .zerado{opacity:.6}.vg-pend .zerado .n{color:var(--ink4)}

/* --- barra de progresso simples --------------------------------------------------- */
.vg-barra{height:7px;border-radius:5px;background:var(--bg2);overflow:hidden;margin-top:6px}
.vg-barra i{display:block;height:100%;border-radius:5px;background:var(--red)}

/* --- alternativa textual dos gráficos (o padrão exige) ---------------------------- */
.vg-tab-alt{margin-top:10px;font-size:12px;color:var(--ink4)}
.vg-tab-alt summary{cursor:pointer;font-weight:600;color:var(--ink3)}
.vg-tab-alt table{width:100%;border-collapse:collapse;margin-top:8px}
.vg-tab-alt th,.vg-tab-alt td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left}

@media(max-width:640px){
  .vg-faixa{padding:18px 18px;border-radius:14px}.vg-faixa h2{font-size:17px}
  .vg-faixa .vg-acoes{margin-left:0;width:100%}
  .vg-grid{gap:12px}
}
/* O rótulo da cabeça divide a linha com o ícone e a seta: apertando o espaçamento, nomes longos
   ("Atividades complementares") cabem inteiros em 256 px em vez de virarem reticências. */
.sb-mod-t{padding:9px 10px;gap:10px}
/* Nome de área que não cabe numa linha passa para duas, em vez de virar reticências: o padrão de
   entrega proíbe corte de texto, e "Atividades complementares" não tem abreviação boa. */
.sb-mod-t>span{white-space:normal;line-height:1.3;text-overflow:clip;text-align:left}
.sb-mod-t{align-items:center}
/* Rótulo de seção do menu é texto pequeno: precisa de 4,5:1, enquanto o ícone apagado, que é
   elemento gráfico, se contenta com 3:1. Por isso os dois deixaram de usar o mesmo cinza. */
.sb-sec,.sb-arv h6,.sb-group h6{color:#6d7684}

/* Alinhamento à esquerda em todo o menu: cabeça, item de topo e subitem. */
.sb-mod-t,.nav-i,.nav-sub{text-align:left}
.nav-i>span,.nav-sub>span{text-align:left}

/* ---- Árvore do menu: a bolinha estava sendo cortada ao meio -----------------------
   O item tinha `overflow:hidden` (herdado de quando o rótulo comprido precisava de
   reticências) e a bolinha mora FORA da caixa dele, à esquerda. O recorte comia metade do
   círculo, e o que sobrava parecia um meio-círculo colado na linha. O corte do texto passa a
   ser do <span> de dentro, que é quem de fato pode transbordar; a bolinha fica inteira,
   centrada na linha, com um halo branco que interrompe a linha ao passar por ela. */
.nav-sub{overflow:visible;padding-left:14px}
.nav-sub>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sb-arv{padding-left:26px}
.sb-arv::before{left:9px;top:4px;bottom:12px}
.nav-sub::before{left:-20.75px;width:9px;height:9px;box-shadow:0 0 0 3px var(--wh)}
.sb-arv h6{padding-left:0}

/* ---- Configurações: interruptor no lugar da caixa de seleção ----------------------
   Vindo do protótipo da direção. A caixa de marcar é correta mas discreta demais para uma opção
   que liga ou desliga um módulo inteiro; o interruptor diz, de longe, em que estado a coisa está.
   O elemento continua sendo um <input type=checkbox> — muda a aparência, não o funcionamento,
   e com isso o teclado e o leitor de tela seguem iguais. */
.sw{position:relative;display:inline-flex;align-items:center;flex:none;width:44px;height:25px}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.sw i{position:absolute;inset:0;border-radius:999px;background:var(--line2);transition:background .16s}
.sw i::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.3);transition:transform .16s}
.sw input:checked+i{background:var(--red)}
.sw input:checked+i::after{transform:translateX(19px)}
.sw input:disabled+i{opacity:.5}
.sw input:focus-visible+i{outline:3px solid var(--blu);outline-offset:2px}
/* Linha de opção com interruptor: texto à esquerda, interruptor à direita.
   Chamava-se `.opt` e redefinia, 390 linhas abaixo, a MESMA classe da opção de resposta do
   questionário — a de baixo ganhava, e a escala da CPA vinha herdando daqui a margem de 9 px e o
   recuo de 14/16, por cima do que a sua própria regra mandava. Nome próprio: são dois objetos. */
.opt-sw{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:9px;cursor:pointer}
.opt-sw:hover{border-color:var(--line2)}
.opt-txt{flex:1;min-width:0}
.opt-txt strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.opt-txt span{display:block;font-size:12.5px;color:var(--ink4);margin-top:2px;line-height:1.5}

/* ---- lista de integrações com a situação de cada uma ---------------------------- */
.integ{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;background:var(--wh);cursor:pointer;margin-bottom:9px}
.integ:hover{border-color:var(--red);background:var(--red-l)}
.integ.on{border-color:rgba(31,157,87,.45)}
.integ-txt{flex:1;min-width:0}
.integ-txt strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.integ-txt span{display:block;font-size:12px;color:var(--ink4);margin-top:1px}
/* A ficha da integração é o próprio seletor: a que está aberta fica marcada, e a faixa de abas
   que repetia os mesmos dois nomes logo abaixo saiu. Dois lugares para a mesma escolha fazem a
   pessoa perguntar qual dos dois manda. */
.integ.sel{border-color:var(--red);background:var(--red-l)}
.integ.sel .integ-txt strong{color:var(--red-d)}

/* ===== Configurações: sub-menu vertical e cartões =========================
   Eram nove abas horizontais numa tela e mais quatro telas soltas no menu. Régua de abas obriga a
   lembrar em qual delas cada coisa mora, e some do campo de visão assim que a página rola; a
   coluna fica. O conteúdo continua nos mesmos cartões `.w` do resto do sistema — o que muda é o
   que está à volta deles. */
.cfg-olho{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.cfg-wrap{display:grid;grid-template-columns:232px 1fr;gap:20px;align-items:start}
.cfg-nav{position:sticky;top:78px;display:flex;flex-direction:column;gap:2px;
  background:var(--wh);border:1px solid var(--line);border-radius:14px;padding:8px}
.cfg-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);
  padding:9px 11px;border-radius:10px;line-height:1.25}
.cfg-i svg{flex:none;color:var(--ink4)}
.cfg-i span{flex:1;min-width:0}
.cfg-i:hover{background:var(--nav2);color:var(--ink)}
.cfg-i.on{background:var(--red-l);color:var(--red-d);font-weight:700}
.cfg-i.on svg{color:var(--red)}
.cfg-corpo{min-width:0}
/* cada bloco da seção é um cartão; o primeiro não precisa de respiro em cima */
.cfg-corpo>.w{margin-bottom:16px}
.cfg-corpo>.w:last-child{margin-bottom:0}
/* Rodapé do cartão: a ação de salvar sai do meio do formulário e passa a ter faixa própria, à
   direita, com uma linha acima. Numa seção com quatro cartões seguidos é esta faixa que diz onde
   um acaba e o outro começa — solto no fim do corpo, o botão parecia pertencer ao último campo. */
.wf{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap;
  padding:12px 18px;background:var(--bg2);border-top:1px solid var(--line)}
.wf-nota{margin-right:auto;font-size:11.5px;color:var(--ink4);font-weight:600}
/* o último campo do corpo não precisa empurrar o rodapé para baixo */
.cfg-corpo .wb>*:last-child{margin-bottom:0}
/* Campo de arquivo: o controle nativo entrava cru no meio de campos desenhados — altura diferente,
   borda diferente, botão com a cara do sistema operacional. Continua sendo o mesmo <input>, o que
   preserva o clique, o teclado e o arrastar-e-soltar; muda só a aparência. */
.wb input[type=file],.modal input[type=file]{width:100%;padding:7px 10px;font-size:12.5px;
  font-family:inherit;color:var(--ink3);background:var(--bg2);border:1px dashed var(--line2);
  border-radius:9px;cursor:pointer}
.wb input[type=file]::file-selector-button,.modal input[type=file]::file-selector-button{
  font:inherit;font-size:12.5px;font-weight:700;margin-right:10px;padding:6px 12px;
  border:1px solid var(--line2);border-radius:8px;background:var(--wh);color:var(--ink2);cursor:pointer}
.wb input[type=file]:hover,.modal input[type=file]:hover{border-color:var(--ink4)}
.wb input[type=file]::file-selector-button:hover,.modal input[type=file]::file-selector-button:hover{
  border-color:var(--red);color:var(--red-d)}
/* Interruptores seguidos formam uma lista só, sem a borda dupla entre vizinhos. */
.opt-grupo{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.opt-grupo .opt-sw{border:0;border-radius:0;margin:0}
.opt-grupo .opt-sw+.opt-sw{border-top:1px solid var(--line)}
.opt-grupo .opt-sw:hover{background:var(--bg2)}

/* No celular a coluna vira uma lista rolável acima do conteúdo: 232 px de menu ao lado de um
   campo de formulário não cabem em 360 px sem espremer os dois. */
@media(max-width:860px){
  .cfg-wrap{grid-template-columns:1fr}
  .cfg-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding:6px}
  .cfg-i{width:auto;white-space:nowrap}
  .cfg-i span{flex:none}
}

/* ===== Menu que recolhe e expande =================================================
   Recolhido, o menu é um trilho de 68 px só com os ícones das cabeças: devolve 188 px de largura
   ao conteúdo, que é o que pesa nas telas largas — quadro de horários, diário com uma coluna por
   aula, fila de requerimentos, tabela de candidatos. Nada é removido do menu: os subitens voltam
   quando a pessoa expande, e clicar num ícone já expande abrindo aquele módulo.

   A medida mora em `--sb-w`, de que a barra do topo e o conteúdo já dependiam — por isso os três
   acompanham o recolhimento sem regra nova para cada um. */
body.sb-min{--sb-w:68px}
body.sb-min .sidebar{padding:0 9px 14px}
/* No trilho a sigla e o botão não cabem lado a lado em 50 px úteis: empilham. Pôr o botão para
   fora da borda seria mais bonito e seria cortado — a barra rola, e o que sai dela some. */
body.sb-min .sb-brand{justify-content:center;padding:0;margin:0 -9px 10px}
/* `:not(.sb-mark-img)` porque esta regra é do LOGOTIPO largo: sem o recorte ela casava com
   qualquer img dentro da marca — inclusive o ícone que entra no lugar dele — e vencia por
   especificidade, deixando o trilho sem marca nenhuma. */
body.sb-min .sb-brand img:not(.sb-mark-img){display:none}
body.sb-min .sb-brand img.sb-mark-img{display:block;width:34px;height:34px}
body.sb-min.sem-icone .sb-brand img.sb-mark-img{display:none}
body.sb-min.sem-icone .sb-mark{display:grid}
/* sigla da instituição no lugar do logotipo largo */
/* Pastilha, não quadrado: sigla de instituição costuma ter quatro a seis letras — "FAPCOM" não
   cabe em 36 px, e cortá-la daria "FAPCO", que não é sigla de ninguém. Ocupa os 50 px úteis do
   trilho e corta só no caso extremo, com o nome inteiro no title do botão ao lado. */
/* o ícone da instituição, no lugar do logotipo largo */
/* `.sb-brand img` já declara `display:block`, e vence `.sb-mark-img` por especificidade: as
   três regras do ícone precisam nomear o contexto, senão ele fica visível junto do logotipo
   largo com o menu aberto. Era o que acontecia. */
.sb-brand img.sb-mark-img{display:none;width:34px;height:34px;border-radius:8px;object-fit:contain}
.sb-mark{display:none;width:50px;height:32px;border-radius:9px;background:var(--red);color:#fff;
  place-items:center;font-family:var(--titulo);font-weight:700;font-size:10.5px;letter-spacing:.3px;
  overflow:hidden;white-space:nowrap}
/* o botão de dobrar: discreto quando o menu está aberto, e na borda quando está no trilho */
/* O botão de dobrar vive na barra do topo. Dentro do menu ele mudava de lugar conforme o menu
   abria ou recolhia — e, recolhido, empilhava sob a marca. Aqui a posição é fixa. */
.tb-dobra{width:38px;height:38px;display:grid;place-items:center;flex:none;margin-right:2px;
  border:1px solid var(--line);border-radius:6px;background:var(--wh);color:var(--ink3);cursor:pointer}
.tb-dobra:hover{background:var(--bg2);color:var(--ink)}
.tb-dobra:focus-visible{outline:3px solid var(--red-l);outline-offset:1px}
/* no trilho: só ícone, centrado, sem rótulo, sem seta e sem a árvore de subitens */
body.sb-min .nav-i>span,body.sb-min .sb-mod-t>span,body.sb-min .sb-mod-t .seta,
body.sb-min .sb-arv{display:none}
body.sb-min .nav-i,body.sb-min .sb-mod-t{justify-content:center;gap:0;padding:11px 0}
body.sb-min .sb-mod{padding:0;margin-bottom:3px}
/* o contador do sino não some: vira ponto, que é o que cabe num ícone de 19 px */
body.sb-min .nav-i .bdg{position:absolute;top:6px;right:11px;margin:0;min-width:9px;width:9px;
  height:9px;padding:0;font-size:0;line-height:0;border-radius:50%;overflow:hidden}
/* o rótulo da seção vira um fio: o agrupamento continua visível sem precisar do texto */
body.sb-min .sb-sec{font-size:0;color:transparent;height:1px;padding:0;margin:11px 10px;
  background:var(--line);overflow:hidden}
/* Abaixo de 900 px o menu já é gaveta sobre o conteúdo, e lá recolher não tem o que ganhar:
   a gaveta volta à largura cheia, e o botão de dobrar sai de cena. */
@media(max-width:900px){
  body.sb-min{--sb-w:256px}
  body.sb-min .sidebar{width:min(300px,85vw);padding:0 10px 14px}
  body.sb-min .sb-brand{justify-content:flex-start;padding-left:16px;margin:0 -10px 10px}
  body.sb-min .sb-brand img{display:block}
  body.sb-min .sb-mark,body.sb-min .sb-brand img.sb-mark-img,.tb-dobra{display:none}
  body.sb-min .nav-i>span,body.sb-min .sb-mod-t>span,body.sb-min .sb-mod-t .seta{display:block}
  body.sb-min .sb-arv{display:block}
  body.sb-min .nav-i,body.sb-min .sb-mod-t{justify-content:flex-start;gap:11px;padding:9px 11px}
  body.sb-min .sb-sec{font-size:10px;color:var(--nav-ink2);height:auto;padding:14px 11px 6px;
    margin:0;background:none}
}

/* ---- Caixa de orientação — o padrão do sistema ------------------------------------
   Decisão da direção em 21/10: as orientações usam caixa cheia, com borda inteira, cantos
   arredondados e ícone — como a da LGPD nas páginas públicas. A caixa com linha vertical à
   esquerda sai; ela existia em 35 lugares do módulo de atribuição, todos montados pela mesma
   função `nota()`, o que permitiu trocar o desenho num ponto só.
   O ícone muda de FORMA com o tom (informação, confirmação, atenção), não só de cor: quem não
   distingue vermelho de verde continua lendo o sinal. */
.orienta{display:flex;gap:11px;align-items:flex-start;background:var(--amb-l);border:1px solid #f0dcb0;
  border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.6;color:#6b5420;margin-bottom:14px}
.orienta>svg{flex:none;margin-top:1px;color:#b07d00}
.orienta b{color:#6b4e00}
.orienta a{color:inherit;text-decoration:underline}
.orienta.o-red{background:var(--red-l);border-color:#f3c9ce;color:#7a1f28}
.orienta.o-red>svg{color:var(--red-d)}
.orienta.o-red b{color:#8d1420}
.orienta.o-grn{background:var(--grn-l);border-color:#c3e8d0;color:#1f5133}
.orienta.o-grn>svg{color:#15803d}
.orienta.o-grn b{color:#17522f}
.orienta.o-neutra{background:var(--bg2);border-color:var(--line);color:var(--ink3)}
.orienta.o-neutra>svg{color:var(--ink4)}
.orienta.o-neutra b{color:var(--ink)}
@media(max-width:600px){.orienta{padding:12px 13px;gap:9px}}

/* ---- Telas de relatório: escolher o relatório em cartões -------------------------
   Padrão aprovado em 21/10, para os três módulos que têm relatório. O cartão escolhido muda de
   FUNDO, não só de contorno: diferença de claridade, que se enxerga de relance e não depende de
   distinguir matiz. A borda vermelha fina que o NIAD usava era o sinal mais fraco possível.
   São <button> de verdade, com aria-pressed — a seleção precisa chegar a quem navega por teclado
   e a quem usa leitor de tela, não só a quem vê a cor. */


/* ---- Simulador de bolsas pelo Enem (28/10) --------------------------------
   Mora na mesma superfície da consulta do candidato: cartão branco sobre o
   degradê institucional. Só as peças que a consulta não tinha ficam aqui. */
.bl-passos{display:flex;gap:8px;justify-content:center;margin:4px 0 18px}
.bl-passo{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--bg2);color:var(--ink4);border:1px solid var(--line2)}
.bl-passo.on{background:var(--red);color:#fff;border-color:transparent}
.bl-passo.feito{background:var(--grn-l);color:#157a42;border-color:transparent}
.bl-ajuda{font-size:13px;color:var(--ink3);line-height:1.55;margin:0 0 14px}
.bl-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;cursor:pointer}
.bl-check input{width:auto;margin-top:2px;flex:none}
.bl-notas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.bl-conf{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.bl-conf>div{display:flex;justify-content:space-between;gap:14px;padding:9px 13px;font-size:13px;border-bottom:1px solid var(--line)}
.bl-conf>div:last-child{border-bottom:0}
.bl-conf span{color:var(--ink3)}
.bl-media{margin-top:14px;text-align:center;background:var(--bg2);border-radius:12px;padding:14px}
.bl-conta{font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.bl-mediav{font-family:var(--titulo);font-size:30px;font-weight:800;line-height:1.1;margin-top:4px}
.bl-medial{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.bl-result{text-align:center;background:var(--grn-l);border-radius:14px;padding:20px 14px}
.bl-result.sem{background:var(--bg2)}
.bl-pct{font-family:var(--titulo);font-size:44px;font-weight:800;line-height:1;color:#157a42}
.bl-pctl{font-size:13px;color:var(--ink3);margin-top:2px}
.bl-texto{font-size:14px;line-height:1.6;margin:14px 0 0}
@media(max-width:560px){.bl-notas{grid-template-columns:1fr}}
.bl-arq{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.bl-arq span{font-size:13px;color:var(--ink4)}
.bl-arq span.tem{color:var(--ink);font-weight:700}

/* ---- Funil em quadro (Kanban) -------------------------------------------- *
   Rolagem HORIZONTAL com colunas de largura fixa, e não colunas que encolhem:
   dez etapas repartidas na largura do celular dariam 37 pixels por coluna, que
   é um cartão onde não cabe um nome. A coluna tem o tamanho de um cartão legível
   e o dedo arrasta a tira para o lado. */
.kb{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximate}
.kb-col{flex:0 0 258px;max-width:258px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:10px;scroll-snap-align:start;transition:background .12s,border-color .12s}
.kb-col.kb-alvo{background:var(--blu-l);border-color:#9cc2f2}
.kb-col.kb-sis{background:var(--bg);border-style:dashed}
.kb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 3px 9px}
.kb-top b{font-family:var(--titulo);font-size:13px;color:var(--ink)}
.kb-n{margin-left:auto;background:var(--wh);border:1px solid var(--line2);border-radius:20px;
  font-size:11.5px;font-weight:700;color:var(--ink3);padding:1px 8px}
.kb-top .kb-sub{flex:0 0 100%;margin-top:-4px}
.kb-cards{display:flex;flex-direction:column;gap:9px}
.kb-card{background:var(--wh);border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  box-shadow:var(--shadow);cursor:grab}
.kb-card.kb-indo{opacity:.45}
.kb-nome{font-weight:700;font-size:13px;color:var(--ink);line-height:1.3;cursor:pointer}
.kb-nome:hover{color:var(--red-d);text-decoration:underline}
.kb-sub{font-size:11.5px;color:var(--ink4);margin-top:2px;line-height:1.35}
.kb-selos{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.kb-pe{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:9px}
.kb-wa{font-size:11.5px;padding:4px 9px}
.kb-vazio{font-size:12px;color:var(--ink4);text-align:center;padding:14px 6px;
  border:1px dashed var(--line2);border-radius:9px}

/* ---- Jornada de Afinidades (página pública) ------------------------------ *
   Uma pergunta por tela: o texto grande, as cinco respostas como alvos de dedo
   (44px de altura é o mínimo que a mão acerta sem olhar) e a barra de progresso
   no alto, que é o que faz alguém continuar até a décima oitava. */
.jo-abertura{font-size:14px;line-height:1.65;color:var(--ink2);margin-top:4px}
.jo-lista{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.jo-lista li{font-size:13.5px;color:var(--ink2);padding-left:22px;position:relative;line-height:1.5}
.jo-lista li::before{content:'';position:absolute;left:4px;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}
.jo-nota{font-size:12px;color:var(--ink4);margin-top:14px;line-height:1.5}
.jo-topo{margin-bottom:18px}
.jo-barra{height:6px;background:var(--bg2);border-radius:20px;overflow:hidden}
.jo-barra span{display:block;height:100%;background:var(--red);border-radius:20px;transition:width .25s}
.jo-conta{font-size:11.5px;color:var(--ink4);font-weight:600;margin-top:7px}
.jo-chamada{font-size:12.5px;color:var(--ink4);font-weight:600;text-transform:none;margin-bottom:4px}
.jo-pergunta{font-family:var(--titulo);font-size:19px;line-height:1.35;color:var(--ink);margin-bottom:18px}
.jo-opcoes{display:flex;flex-direction:column;gap:9px}
.jo-op{min-height:46px;border:1px solid var(--line2);background:var(--wh);border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;text-align:left;padding:0 14px;
  transition:border-color .12s,background .12s,color .12s}
.jo-op:hover{border-color:var(--red);color:var(--ink)}
.jo-op.on{border-color:var(--red);background:var(--red-l);color:var(--red-d)}
.jo-pe{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}
.jo-opcional{font-weight:500;color:var(--ink4)}
.jo-areas{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.jo-area{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--wh)}
.jo-area-topo{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.jo-area-topo h3{font-family:var(--titulo);font-size:15px;color:var(--ink);margin:0}
.jo-ord{width:24px;height:24px;border-radius:50%;background:var(--red-l);color:var(--red-d);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 24px}
.jo-area p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0}
.jo-cursos{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.jo-porque{margin-top:16px;background:var(--bg2);border-radius:12px;padding:14px 15px}
.jo-porque h4{font-family:var(--titulo);font-size:13.5px;color:var(--ink);margin-bottom:8px}
.jo-porque ul{margin:0 0 8px 18px;padding:0}
.jo-porque li{font-size:13px;line-height:1.55;color:var(--ink2);margin-bottom:5px}
.jo-fim{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.jo-fim h4{font-family:var(--titulo);font-size:14px;color:var(--ink);margin-bottom:12px}

/* ---- Caixa de entrada do atendimento ------------------------------------ *
   Linha, e não tabela: cada espera carrega o motivo, o tempo, a etapa e o que
   ficou combinado da última vez. Numa tabela, "o que ficou combinado" seria uma
   coluna espremida — e é justamente o que quem vai atender precisa ler antes de
   falar. */
.atd-linha{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--line)}
.atd-linha:last-child{border-bottom:0}
.atd-quem{flex:1;min-width:0}
.atd-nome{font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.3}
.atd-nome:hover{color:var(--red-d);text-decoration:underline}
.atd-selos{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.atd-ultimo{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:7px;
  background:var(--bg2);border-radius:8px;padding:7px 10px}
.atd-acoes{display:flex;flex-direction:column;gap:7px;flex:0 0 auto}
@media(max-width:620px){.atd-linha{flex-direction:column;gap:10px}
  .atd-acoes{flex-direction:row;width:100%}.atd-acoes .btn{flex:1}}

/* ---- Canais de captação -------------------------------------------------- *
   Endereço e chave existem para serem COPIADOS: campo largo, somente leitura,
   que se seleciona inteiro ao clique, com o botão colado nele. Quem está
   configurando isso tem o painel do Google aberto na outra aba. */
.can-campo{margin-bottom:14px}
.can-campo label{display:block;font-size:12.5px;font-weight:600;color:var(--ink3);margin-bottom:5px}
.can-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.can-linha input{flex:1;min-width:220px;border:1px solid var(--line2);border-radius:9px;
  padding:9px 11px;font-size:12.5px;font-family:var(--mono);background:var(--bg2);color:var(--ink2)}

/* `.aa-topo` — o nome da página no alto do painel escuro — foi para `superficie.css` em 04/11,
   junto com o resto da superfície institucional. */

/* ===== A ficha da pessoa (03/11/2026) =====
   Lista à esquerda, ficha à direita: quem despacha vinte casos seguidos não perde o lugar da lista
   a cada pessoa aberta. Abaixo de 1100px as duas empilham — num notebook de 1280 a coluna da ficha
   ficaria com 600px e a linha do tempo quebraria em cada palavra. */
.grid-pes{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
/* `min-width:0` nas colunas da grade. Sem isto, o item de grade não encolhe abaixo do tamanho do
   conteúdo: a fileira de passos (sete, em linha) empurrava a página 87px para a direita e a tela
   inteira passava a rolar de lado — o mesmo defeito que a barra da competência já custou uma vez
   na área do candidato. O `overflow-x:auto` do filho não resolve: quem precisa poder encolher é a
   COLUNA. */
.grid-pes>*{min-width:0}
@media(max-width:1100px){.grid-pes{grid-template-columns:1fr}}

.pes-li{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--wh);
  border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:7px;cursor:pointer}
.pes-li:hover{border-color:var(--d1)}
.pes-li.on{border-color:var(--d1);background:var(--blu-l)}
.pes-li .pes-nm{flex:1;min-width:0;display:block}
.pes-li .pes-nm b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pes-li .pes-nm .tsub{font-size:11.5px}
.pes-on{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:92px}
.pes-av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--d1);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px}
.pes-av.big{width:54px;height:54px;font-size:17px}
.pes-cab{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}

/* Os passos. Feito ganha cor e marca; não feito fica VAZIO, e não vermelho — não estar matriculado
   em novembro não é um problema, é novembro. */
.pes-passos{display:flex;align-items:center;flex-wrap:wrap;row-gap:12px;margin-top:18px}
/* QUEBRA em vez de rolar. Rolando, "Convocação" e "Matrícula" ficavam fora da vista num
   notebook — e um passo que não se vê é um passo que não existe para quem lê. O fio que sobra
   no fim de uma linha quebrada é o preço, e é barato: o que importa é ver os sete. */
.pes-pa{display:flex;align-items:center;white-space:nowrap}
.pes-pa .bl{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--bg2);color:var(--ink4);border:1px solid var(--line2)}
.pes-pa.ok .bl{background:var(--d6);color:#fff;border-color:transparent}
.pes-pa .nm{font-size:12px;margin-left:6px;color:var(--ink4);font-weight:600}
.pes-pa.ok .nm{color:var(--ink2);font-weight:700}
.pes-pa .li{width:26px;height:2px;background:var(--line2);margin:0 9px;flex:none}

/* A linha do tempo: um fio contínuo, pontos coloridos por TIPO de acontecimento — e a cor vem da
   paleta de dados, nunca da marca. */
.pes-tl{position:relative;padding-left:4px}
.pes-tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line2)}
.pes-ev{display:flex;gap:14px;align-items:flex-start;padding:8px 0;position:relative}
.pes-ev .pt{width:10px;height:10px;border-radius:50%;flex:none;margin-top:5px;margin-left:3px;
  box-shadow:0 0 0 3px var(--wh)}
.pes-ev .qd{font-size:11px;color:var(--ink4);font-weight:600}
.pes-ev .tt{font-size:13.5px;font-weight:700;margin-top:1px}
.pes-lin{padding:8px 0;border-bottom:1px solid var(--line)}
.pes-lin:last-child{border-bottom:0}

/* ---- O painel de detalhe da captação (04/11/2026) ------------------------ *
   Interessados e Atendimento: a lista ocupa a largura que tem, o painel fica numa faixa fixa à
   direita. A faixa é FIXA de propósito — uma coluna que acompanha a largura da janela deixaria a
   ficha com 700px num monitor grande, e nada no painel precisa disso. */
.grid-lead{display:grid;grid-template-columns:minmax(0,1fr) 386px;gap:16px;align-items:start}
.grid-lead>*{min-width:0}
/* O painel acompanha a rolagem: numa fila de quarenta linhas, quem rola para ver a vigésima
   perderia a ficha de vista — e com ela os botões que fazem o painel valer. O `max-height` com
   rolagem própria existe porque uma ficha longa presa no topo esconde o próprio fim. */
/* `display:block`, e NÃO uma coluna flexível. Com `flex-direction:column` e uma altura máxima, os
   cartões encolhem para caber — e como `.w` recorta o que sobra, o seletor de etapa e o botão da
   ficha sumiam da tela estando no documento: a medição achava, o olho não. Em bloco, o conteúdo
   passa da altura e a rolagem do painel faz o trabalho, que é o que ela existe para fazer. */
.lead-col{position:sticky;top:74px;max-height:calc(100vh - 92px);overflow:auto;display:block}
.lead-col>.w{margin:0 0 14px}
.lead-col>.w:last-child{margin-bottom:0}
/* Abaixo de 1180px não cabem as duas colunas. O painel vai para CIMA da lista (`order:-1`), e não
   para baixo dela: embaixo de uma lista de quarenta linhas, um painel é um painel que ninguém vê.
   `leadAbrir` leva a vista até ele. */
@media(max-width:1180px){.grid-lead{grid-template-columns:1fr}
  .lead-col{position:static;max-height:none;overflow:visible;order:-1}}
/* A barra de filtros do quadro da esquerda QUEBRA em linhas. Com o painel ao lado, a largura que
   sobra não comporta a busca, dois seletores e dois botões em fila — e sem quebrar, o último
   botão sai pela borda do cartão, que é onde ninguém o procura. */
.grid-lead .wh .ha{flex-wrap:wrap;margin-left:0;row-gap:8px}
.grid-lead .wh .ha input[type=search]{min-width:170px;flex:1}
.lead-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.lead-acoes .btn{flex:1 1 auto;justify-content:center}
.lead-cx{font-size:12.5px;color:var(--ink2);line-height:1.5;background:var(--bg2);
  border-radius:8px;padding:8px 10px;margin-top:10px}
.lead-sel{display:flex;align-items:center;gap:9px;margin-top:12px}
.lead-sel label{flex:none}
.lead-sel .lead-etapa{flex:1}
.lead-etapa{border:1px solid var(--line2);border-radius:8px;padding:5px 8px;font-size:12px;
  background:var(--wh);color:var(--ink)}
.lead-tit{margin:0 0 10px;font-family:var(--titulo);font-size:14px}
/* A linha aberta fica marcada na lista: sem isso, o painel responde a um clique que não deixou
   rastro, e quem despacha vinte casos perde a conta de onde parou. A marca é um filete à
   esquerda, e não um fundo colorido — a lista tem selos coloridos demais para competir. */
/* ---- O painel das páginas públicas (04/11/2026) ----
   Um bloco por endereço, com o estado à vista. O campo do endereço é o mesmo dos canais de
   captação (`.can-linha`): largo, somente leitura e selecionado ao clique, porque quem está aqui
   tem o WhatsApp aberto na outra aba. */
.pub-end{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.pub-end:last-child{margin-bottom:0}
.pub-end-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pub-qr{margin-top:12px;display:flex;align-items:center;gap:14px}
.pub-qr svg{width:132px;height:132px;flex:none;background:#fff;padding:6px;border:1px solid var(--line);border-radius:8px}

.lead-on{box-shadow:inset 3px 0 0 var(--d1)}
tr.lead-cl{cursor:pointer}
tr.lead-cl:hover>td{background:var(--bg2)}
tr.lead-on>td{background:var(--blu-l)}
tr.lead-on>td:first-child{box-shadow:inset 3px 0 0 var(--d1)}

/* ===== CONSTRUTOR DE PÁGINAS DE CAPTAÇÃO (05/11/2026) ======================
   Três colunas: paleta, a página e as propriedades da seção. A do meio leva
   `minmax(0,1fr)` porque sem isso o quadro da prévia empurra as outras duas
   para fora da tela — um `1fr` não encolhe abaixo do conteúdo. */
.pg-3{display:grid;gap:16px;grid-template-columns:236px minmax(0,1fr) 330px;align-items:start}
.pg-2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media(max-width:1200px){.pg-3{grid-template-columns:200px minmax(0,1fr)}
  .pg-3 > :nth-child(3){grid-column:1/-1}}
@media(max-width:900px){.pg-3,.pg-2{grid-template-columns:1fr}}

.pg-comp{display:flex;gap:10px;align-items:center;width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:12.5px;background:var(--w);cursor:pointer;margin-bottom:7px;
  font-family:inherit;color:inherit;text-align:left}
.pg-comp:hover:not([disabled]){border-color:var(--red);background:var(--red-l)}
.pg-comp[disabled]{opacity:.45;cursor:default}
.pg-ic{width:26px;height:26px;border-radius:7px;background:var(--bg2);display:grid;place-items:center;
  font-size:13px;flex:none}

/* O palco da prévia. A largura do "aparelho" é imposta ao QUADRO, e não escalada com `transform`:
   escalar mostraria a página numa largura que ela nunca terá, e os pontos de quebra do CSS
   responderiam à largura errada — que é justamente o que se quer conferir aqui. */
.pg-palco{background:var(--bg2);border-radius:12px;display:flex;justify-content:center}
.pg-palco iframe{width:100%;height:600px;border:1px solid var(--line);border-radius:10px;background:var(--w);display:block}
.pg-palco.tablet iframe{width:768px;max-width:100%}
.pg-palco.celular iframe{width:390px;max-width:100%}