/* Identidade visual da area do aluno, sem nenhuma dependencia externa: a fonte
   e AUTO-HOSPEDADA, servida do nosso proprio dominio. Uma folha que busca
   fonte num CDN e um pedido a um terceiro em toda visita — custa tempo de
   carregamento no celular, que e o aparelho principal do nosso publico
   (CONTEXTO.md 4.20), e entrega o IP do aluno de brinde.

   Escrito na ordem mobile-first: o estilo base vale para tela estreita e as
   media queries acrescentam o que sobra de espaco no desktop. */

/* ===========================================================================
   A FONTE — DM Sans, auto-hospedada. Baixada em 15/08/2026 com autorizacao do
   dono.

   Ate hoje as tres folhas PEDIAM "DM Sans" no `font-family` e nenhuma a
   servia: o navegador nao achava, caia calado na fonte do sistema, e o site
   era Segoe UI no Windows e San Francisco no iPhone. O nome no `font-family`
   sem `@font-face` nao acusa erro — so nao acontece.

   Licenca SIL Open Font License 1.1, que permite uso comercial e
   redistribuicao. A copia da licenca esta em `static/fontes/LICENCA.txt`, como
   ela exige. Os arquivos vieram do Google Fonts UMA VEZ e moram no nosso
   servidor; nao ha pedido a terceiro em tempo de execucao.

   E UM ARQUIVO SO POR SUBCONJUNTO, e nao um por peso: DM Sans e fonte
   VARIAVEL, e o mesmo arquivo cobre 400 a 700. Quatro pesos estaticos
   custariam quatro downloads.

   O `unicode-range` e o que faz o `latin-ext` sair de graca: o navegador so
   busca aquele arquivo se a pagina tiver um caractere da faixa dele. Portugues
   cabe inteiro no `latin` (os acentos vivem em U+00C0-U+00FF), entao os 31KB
   do outro quase nunca sao baixados — mas estao la se um nome proprio pedir.

   `font-display: swap`: o texto aparece na hora na fonte do sistema e troca
   quando a nossa chega. A alternativa (`block`) esconderia o texto por ate 3
   segundos, e com o servidor na Alemanha isso e tela em branco para quem esta
   no Brasil. Trocar a fonte depois incomoda menos que nao ter texto.
   =========================================================================== */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  /* Caminho RELATIVO a esta folha (`/static/css/`), e nao `url_for`: CSS nao
     passa pelo Jinja, entao o versionador de estatico nao o alcanca. Fonte nao
     muda, entao o cache de sete dias do nginx e o que se quer aqui. */
  src: url("../fontes/dm-sans-latin.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: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fontes/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   TEMA "PAINEL CLARO" — 14/08/2026

   Substitui a paleta verde-floresta. Decisao do dono, dita assim:
   *"esquece a paleta, esquece tudo. Copia esse modelo... está ficando muito
   simplório, muito arcaico. Se era pra alunos de dezesseis, vinte anos"*.

   A referencia e a linguagem visual do TailwindAdmin
   (https://nextjs.tailwind-admin.com). Nenhuma linha de codigo dela foi
   copiada — e template comercial em Next.js/React, e a nossa pilha e
   Flask/Jinja com folha escrita a mao. O que veio de la foi MEDIDO no
   navegador, token por token, e reescrito aqui:

     azul primario #5D87FF · superficie branca sobre chao #F6F9FC ·
     cartao com raio de 7px e sombra difusa · barra lateral CLARA com o item
     aceso em azul a 12% · tipografia de 14px com titulo de cartao em 18/600

   O QUE MUDOU DE ESSENCIAL, alem da cor: a barra lateral deixou de ser um
   bloco escuro e virou branca, e os raios cairam de 18-26px para 7-12px. Era
   isso o "arcaico" — canto muito arredondado e barra pintada sao o registro
   de 2015, nao o de agora.

   ---------------------------------------------------------------------------
   A REGRA DOS DOIS TONS VOLTOU, e agora ela vale para as SEIS familias.

   O verde-floresta que saiu era escuro o bastante para escrever em qualquer
   fundo claro. Este azul nao e: #5D87FF mede 3,29:1 contra branco. Texto
   branco em cima dele REPROVA na WCAG — o proprio template tem esse defeito
   no botao "Sign in". Copiar o hex exato seria copiar o defeito junto.

   Entao cada familia tem dois papeis, e os dois foram medidos:

     --X          o tom do template. PINTA: preenchimento grande, medalha,
                  barra de grafico, filete. Nunca texto pequeno.
     --X-forte    o tom de trabalho. ESCREVE em branco, ESCREVE no proprio
                  chip, e aguenta texto branco em cima quando e botao.

   Medido em scratchpad/contraste.py (venv\Scripts\python.exe):

     familia      pinta     trabalha   no branco  no chip  branco em cima
     primaria     #5D87FF   #4869C6      5,11       4,52        4,90
     secundaria   #49BEFF   #2D77A0      4,93       4,51        4,93
     sucesso      #13DEB9   #0A7E69      5,00       4,62        5,00
     aviso        #F6B51E   #916A11      4,91       4,57        4,91
     erro         #EF4444   #C33737      5,35       4,59        5,35
     info         #8754EC   #7C4DD9      5,36       4,57        5,36

   Trocar um pelo outro faz o texto sumir. O `-forte` nunca e "o hover do
   outro": e o unico dos dois que pode carregar palavra.
   =========================================================================== */
:root {

  /* --- SUPERFICIE ------------------------------------------------------- */

  --papel: #FFFFFF;          /* o cartao, e a barra lateral */
  --fundo: #F6F9FC;          /* chao das telas publicas */
  --mesa: #F6F9FC;           /* chao da area do aluno, atras dos cartoes */
  --linha: #E5E5E5;          /* fio de 1px entre blocos */

  /* Fio que precisa ser VISTO como limite de componente (WCAG 1.4.11 pede
     3:1): borda de campo em foco, contorno de botao claro. O #E5E5E5 mede
     1,26:1 e serve para dividir, nunca para delimitar o que se opera. */
  --linha-forte: #949494;    /* 3,03:1 no branco */

  /* --- TEXTO ------------------------------------------------------------ */

  --tinta: #2A3547;          /* titulo e numero — 12,36:1 no branco */
  --grafite: #5A6A85;        /* corpo e apoio — 5,48:1 no branco */
  --grafite-claro: #5A6A85;  /* aponta para o mesmo: o tom mais claro do
                                template (#737373) mede 4,74 e raspa o piso
                                assim que sai do branco puro */
  --tinta-fraca: #5A6A85;

  /* --- A MARCA ---------------------------------------------------------- */

  --marca: #4869C6;          /* o tom que TRABALHA: link, rotulo, texto */
  --marca-pintura: #5D87FF;  /* o tom que PINTA: medalha, barra, filete */
  --marca-viva: #4869C6;     /* nome antigo, ainda usado em telas publicas */
  --marca-escura: #2F4585;
  --marca-clara: #ECF1FF;    /* chip: azul a 12% sobre branco */
  --marca-no-escuro: #A8BEFF;/* escrever SOBRE bloco escuro — 8,04:1 */
  /* O azul do banner do painel. NAO foi escolhido: e a media medida da faixa
     onde o texto cai, no arquivo que o dono entregou em 18/08. Serve de chao
     enquanto a imagem carrega, de veu sobre ela, e de fundo inteiro no
     celular, onde a imagem nao entra. */
  --banner-painel: #1B32B3;

  --ciano: #2D77A0;
  --ciano-vivo: #49BEFF;

  /* --- ACAO ------------------------------------------------------------- */

  --caneta: #4869C6;
  --caneta-escura: #2F4585;
  --caneta-clara: #ECF1FF;

  /* --- A CASCA DA AREA DO ALUNO ----------------------------------------- */

  /* A barra lateral virou BRANCA, como no template. Com isso ela deixa de ser
     um bloco de tinta antes de qualquer dado e o azul passa a aparecer so
     onde ha decisao — o item aceso. Medido contra branco: item 12,36 ·
     rotulo de grupo 5,48 · item aceso 4,52 sobre o chip. */
  --barra: #FFFFFF;
  --barra-texto: #2A3547;    /* item de menu — 12,36:1 */
  --barra-fraco: #5A6A85;    /* rotulo de grupo — 5,48:1 */
  --barra-aceso: #ECF1FF;    /* fundo do item atual e do hover */
  --barra-aceso-texto: #4869C6;

  --trilho: #EFF4FA;         /* fundo das barras de progresso */

  /* os dois dias de prova */
  --caderno-azul: #4869C6;
  --caderno-amarelo: #7C4DD9;
  --caderno-rosa: #C33737;

  /* --- ESTADOS SEMANTICOS ----------------------------------------------- */
  /* Cada par foi medido: o texto sobre o proprio fundo de chip. */

  --acerto: #0A7E69;         --acerto-fundo: #E3FBF7;   /* 4,62:1 */
  --erro: #C33737;           --erro-fundo: #FDE9E9;     /* 4,59:1 */
  --aviso: #916A11;          --aviso-fundo: #FEF6E4;    /* 4,57:1 */
  --info: #7C4DD9;           --info-fundo: #F1EAFD;     /* 4,57:1 */

  /* os tons que so PINTAM desses mesmos estados */
  --acerto-pintura: #13DEB9;
  --erro-pintura: #EF4444;
  --aviso-pintura: #F6B51E;
  --info-pintura: #8754EC;

  /* --- RAIO ------------------------------------------------------------- */

  /* Cairam de 12-26px para 7-12px. E a mudanca de forma que mais pesa no
     "moderno" que o dono pediu: canto muito redondo le como aplicativo de
     celular de uma decada atras. Medidos no template: cartao 7px, botao 6px,
     campo 8px. */
  --raio: 8px;          /* botao, campo, item de menu */
  --raio-papel: 7px;    /* cartao e bloco */
  --raio-cartao: 7px;   /* cartao da area do aluno — igual ao de cima */
  --raio-casca: 12px;   /* a casca do aplicativo */
  --raio-pilula: 999px; /* SO para etiqueta de estado, nunca para botao */

  /* --- TIPOGRAFIA ------------------------------------------------------- */

  /* O template usa DM Sans (Google Fonts). Nao a buscamos de terceiro: a
     pilha abaixo e a mais proxima que ja existe no aparelho. DM Sans e
     licenca SIL OFL, entao da para auto-hospedar — precisa do aval do dono
     para baixar os arquivos, e sao ~40KB em woff2. */
  --display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --corpo: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --controle: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala medida no template. O corpo e 14px, e nao 16 — e o que da a
     densidade de painel. Titulo de tela 21, titulo de cartao 18/600,
     rotulo 14/600, auxiliar 13, miudo 12. */
  --t-corpo: 14px;
  --t-miudo: 12px;
  --t-auxiliar: 13px;
  --t-cartao: 18px;
  --t-tela: 21px;
  --t-numero: 28px;
  --t-heroi: 40px;

  /* --- ESPACO ----------------------------------------------------------- */

  /* Escala de 4. O padding interno de cartao e 24px e o vao entre cartoes e
     24px — os dois medidos no template (p-6 / gap-6). */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;
  --pad-cartao: 24px;
  --vao: 24px;

  /* --- SOMBRA ----------------------------------------------------------- */

  /* As tres do template, copiadas de valor. A `--sombra-alta` e o "relevo"
     que o dono apontou no menu: o cartao sobe e a sombra abre junto. */
  --sombra: 0 2px 4px rgba(0, 0, 0, 0.075);
  --sombra-cartao: rgba(145, 158, 171, 0.3) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
  --sombra-alta: rgba(145, 158, 171, 0.36) 0 0 3px 0, rgba(145, 158, 171, 0.22) 0 18px 36px -6px;
  --sombra-botao: rgba(0, 0, 0, 0.05) 0 9px 17.5px;

  /* O tempo e a curva do salto. Uma constante so, para todo componente subir
     do mesmo jeito — relevo que cada peca faz na sua velocidade le como
     defeito, nao como acabamento. */
  --salto: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sublinhado, e nao so cor: e o que mantem o link reconhecivel para quem nao
   distingue as duas (WCAG 1.4.1). Em texto corrido serifado ele tambem e o que
   faz o link parecer parte da pagina, e nao um botao solto. */
a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- moldura ---------- */
.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  max-width: 1080px;
  margin: 0 auto;
}
/* A BARRA ACOMPANHA A PAGINA — 20/08/2026. Nas telas de acesso o palco tem
   830px e a barra tinha 1080: o logo comecava em 189px e o cartao em 298px,
   109px de descompasso, que o dono leu como logo torto.

   So o `medio` entra aqui. Em `estreito` (460px) alinhar a barra encolheria o
   logo e o menu num naco de 460px no meio de uma tela larga — a barra pareceria
   um cartaz solto, e o remedio seria pior que a doenca. */
.topo-linha.topo-medio { max-width: 830px; padding-left: 14px; padding-right: 14px; }
/* A MARCA — imagem, e não mais o nome escrito (17/08/2026).
   `height` fixa e `width: auto` para o arquivo poder mudar de proporção sem a
   barra mudar de altura. `display: block` no <img> mata a folga de 4px que o
   navegador reserva embaixo de imagem em linha, e que desalinhava a barra. */
.marca {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.marca span { color: var(--marca); }
/* 60px, e não 44px. A marca tem três linhas visuais e precisa continuar
   legível na barra, inclusive na assinatura inferior. A 34 o dono leu como "pequeno, chocho" — e ele tinha razão:
   este logotipo tem duas linhas de texto (DECOLE / SIMULANDO) mais a assinatura,
   então a altura precisa dar conta de TRÊS linhas para a palavra ser lida. Um
   logotipo horizontal miniaturizado vira assinatura, não marca. */
.marca img { display: block; height: 60px; width: auto; }
.topo nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.topo-linha-so-acoes { justify-content: flex-end; }
.topo-linha-so-acoes nav { margin-left: 0; }

.palco {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 14px 56px;
}
.palco.estreito { max-width: 460px; }

.rodape {
  border-top: 1px solid var(--linha);
  background: var(--papel);
  color: var(--grafite-claro);
  font-size: 12.5px;
  text-align: center;
  padding: 16px;
}

/* ---------- rodape da landing ---------------------------------------------
   A arte escura serviu de direcao visual, mas os links nao moram dentro da
   imagem. Eles sao HTML real: funcionam com teclado, leitor de tela e em 375px.
   A foto mostra apenas o estudante; textos sem destino e dados ainda nao
   confirmados da arte original ficam fora do enquadramento. */
.rodape-landing {
  margin-top: 0;
  background: #020D1D;
  color: #F7FAFF;
}
.rodape-chamada {
  position: relative;
  overflow: hidden;
  background: #03152E;
  padding: 42px 20px 0;
}
.rodape-chamada-conteudo { position: relative; z-index: 2; }
.rodape-chamada-olho {
  margin: 0 0 10px;
  color: #7EE9D6;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rodape-chamada h2 {
  margin: 0;
  max-width: 660px;
  color: #FFFFFF;
  font-family: var(--display);
  font-size: clamp(32px, 7vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.rodape-chamada-texto {
  max-width: 560px;
  margin: 18px 0 0;
  color: #C7D5E6;
  font-size: 16px;
  line-height: 1.65;
}
.rodape-recursos {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: #E7EFF8;
  font-size: 14px;
}
.rodape-recursos li { display: flex; gap: 9px; align-items: baseline; }
.rodape-recursos li::before {
  content: "✓";
  color: #13DEB9;
  font-weight: 700;
}
.rodape-chamada-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.rodape-chamada .botao:not(.vazio) {
  background: #0A7E69;
  border-color: #0A7E69;
  color: #FFFFFF;
}
.rodape-chamada .botao.vazio {
  background: rgba(255, 255, 255, 0.04);
  border-color: #A8BEFF;
  color: #E4EBFF;
}
.rodape-chamada-arte {
  position: relative;
  z-index: 1;
  display: block;
  height: 270px;
  margin: 28px -20px 0;
  overflow: hidden;
}
.rodape-chamada-arte img {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  height: 180%;
  right: 0;
  top: -8%;
}
.rodape-chamada-arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #03152E 0%, rgba(3, 21, 46, 0) 42%);
}
.rodape-landing-links {
  display: grid;
  gap: 30px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 38px 20px;
  border-top: 1px solid #164A66;
}
.rodape-landing-links strong {
  display: block;
  margin-bottom: 12px;
  color: #FFFFFF;
  font-family: var(--display);
  font-size: 15px;
}
.rodape-landing-links p {
  max-width: 310px;
  margin: 0;
  color: #B9C9DB;
  font-size: 14px;
  line-height: 1.6;
}
.rodape-landing-sobre { align-content: start; }
.rodape-landing-links nav { display: grid; gap: 9px; align-content: start; }
.rodape-landing-links a {
  color: #D8E5F3;
  font-size: 14px;
  text-decoration-color: #6F8BA7;
}
.rodape-landing-links a:hover { color: #FFFFFF; }
.rodape-landing-legal {
  margin: 0;
  padding: 18px 20px;
  border-top: 1px solid #164A66;
  color: #AFC0D3;
  font-size: 12.5px;
  text-align: center;
}
.rodape-landing :focus-visible { outline-color: #13DEB9; }

@media (min-width: 700px) {
  .rodape-recursos { grid-template-columns: 1fr 1fr; max-width: 620px; }
  .rodape-landing-links { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .rodape-chamada {
    min-height: 500px;
    padding: 58px max(24px, calc((100vw - 1160px) / 2));
  }
  .rodape-chamada-conteudo { width: 56%; }
  .rodape-chamada-arte {
    position: absolute;
    inset: 0 0 0 auto;
    width: 47%;
    height: 100%;
    margin: 0;
  }
  .rodape-chamada-arte::after {
    background: linear-gradient(90deg, #03152E 0%, rgba(3, 21, 46, 0) 38%);
  }
}

/* ---------- cartao ----------
   O VOCABULARIO ANTIGO, CONVERGIDO AO TEMA EM 15/08/2026.

   A `RETOMAR.md` registrava isto como divida: *"`.painel-cartao` e `.cartao`
   convivem. O segundo e o vocabulario antigo e ainda aparece em telas de conta
   e no resultado. Cada nova tela tem de escolher um dos dois."*

   Os dois faziam a mesma coisa com aparencias diferentes: `.cartao` tinha
   BORDA de 1px e sombra curta (o registro de antes do tema); `.painel-cartao`
   nao tem borda e usa a sombra difusa, que e o que da o ar de painel moderno.
   O resultado era visivel de uma tela para a outra: o aluno saia do painel,
   entrava no resultado e os cartoes mudavam de cara.

   **A convergencia foi feita pela FOLHA, e nao trocando a classe em 21 lugares
   de 10 telas.** Renomear em massa mexeria em cadastro, login, conta, termos,
   privacidade e checkout de uma vez, sem eu conseguir olhar as dez. Aqui, uma
   regra: o nome antigo passa a desenhar o cartao novo, e as dez telas entram
   no tema juntas. O nome pode ser unificado depois, sem pressa e sem risco.

   `.cartao` de `prova.css` NAO e este: aquela folha tem a propria regra, e a
   tela de prova continua com o desenho austero dela. */
.cartao {
  background: var(--papel);
  border: 0;
  border-radius: var(--raio-cartao);
  padding: var(--pad-cartao);
  margin-bottom: var(--vao);
  box-shadow: var(--sombra-cartao);
}
/* O cabecalho perdeu o fio de baixo junto com a borda do cartao: dois fios
   dentro da mesma caixa era o que fazia o bloco parecer formulario impresso. O
   titulo passou a 17px, o mesmo do `.painel-titulo`, para as duas telas terem
   um tamanho de titulo de cartao, e nao dois. */
.cartao-cab {
  margin-bottom: 14px;
}
.cartao-cab h1, .cartao-cab h2 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.olho {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite-claro);
  margin: 0 0 3px;
}
/* O mesmo olho, com peso. Num lugar só: o cabecalho de cada questao na
   revisao. Ali ele nao e etiqueta de secao — e a linha que diz QUAL das 90
   questoes esta na tela enquanto se rola a lista, e a 10px em cinza claro ela
   se perdia entre os cartoes. O tom sobe junto com o peso (--grafite, 5,50:1):
   negrito em cor fraca continua fraco. */
.olho.forte { font-weight: 600; font-size: 11px; color: var(--grafite); }
.sub { color: var(--grafite); margin: 0 0 18px; }

/* ---------- formulario ---------- */
.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-family: var(--controle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 5px;
}
.campo input[type=text],
.campo input[type=email],
.campo input[type=password],
.campo input[type=date] {
  width: 100%;
  font-family: var(--controle);
  /* 16px e o minimo que impede o Safari do iPhone de dar zoom sozinho ao
     focar o campo — o que no meio de um cadastro parece um bug. */
  font-size: 16px;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 11px;
}
.campo input:focus {
  border-color: var(--marca);
  outline: none;
  box-shadow: 0 0 0 3px var(--marca-clara);
}
.campo input[aria-invalid="true"] { border-color: var(--erro); }

/* ---------- mostrar a senha ---------- */
/* O involucro e o botao sao criados por `static/js/senha.js`, e nao escritos
   no template: sem JavaScript o botao nao funcionaria, e botao morto e pior
   que botao ausente. As classes existem aqui de qualquer jeito — se sumirem, o
   controle aparece cru no meio do campo.

   Diz "Mostrar" e "Ocultar" POR EXTENSO, e nao com um olho riscado. O icone de
   olho e ambiguo (olho aberto significa "esta visivel" ou "clique para ver"?),
   e a palavra resolve isso sem depender de convencao nem de enxergar desenho
   pequeno. */
.campo-senha { position: relative; display: block; }
/* O espaco que a senha digitada nao pode invadir. Cabe "Ocultar", que e a
   maior das duas palavras.

   OS DOIS SELETORES DE TIPO SAO NECESSARIOS, e nao e preciosismo: `.campo
   input[type=password]` la em cima pesa mais que um `.campo-senha input`, e o
   `padding-right` era descartado — a senha passava por baixo do botao. E
   `[type=text]` entra junto porque o botao TROCA o tipo do campo: sem ele, o
   espaco sumiria no instante em que a senha fica visivel. */
.campo-senha input[type=password],
.campo-senha input[type=text] { padding-right: 72px; }
/* Encostado nas tres bordas do campo, por dentro da linha de 1px: fica com a
   altura inteira dele (43px) em vez dos 37 que sobrariam com folga — e altura
   de campo e o que faz um alvo de dedo confortavel no celular. */
.ver-senha {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  appearance: none;
  border: 0;
  background: none;
  /* Apertado de proposito. No cadastro os campos "senha" e "confirmacao" ficam
     lado a lado no desktop e sobram 223px para cada um; cada pixel que este
     botao reserva e um pixel a menos de senha visivel — que e justamente o que
     ele existe para mostrar. */
  padding: 0 10px;
  font-family: var(--controle);
  font-size: 12px;
  font-weight: 600;
  color: var(--marca);      /* 4,83:1 */
  cursor: pointer;
  border-radius: 0 11px 11px 0;
}
.ver-senha:hover { background: var(--marca-clara); }
.dica { font-size: 12px; color: var(--grafite-claro); margin: 4px 0 0; }
.erro-campo { font-size: 12.5px; color: var(--erro); margin: 5px 0 0; }

.marcador {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: var(--grafite);
  line-height: 1.45;
}
.marcador input[type=checkbox] {
  /* Alvo de toque confortavel no celular. */
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  flex: 0 0 19px;
  accent-color: var(--caneta);
}
.marcador label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grafite);
}

.dupla { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) {
  .dupla { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cartao { padding: 24px 22px; }
}

/* ---------- botoes ---------- */
/* Botao de canto vivo, sem sombra e sem gradiente: e um carimbo, nao uma
   pilula. A pilula arredondada e o sinal mais rapido de "site padrao". */
.botao {
  appearance: none;
  display: inline-block;
  border: 1px solid var(--caneta);
  border-radius: var(--raio);
  background: var(--caneta);
  color: var(--papel);
  font-family: var(--controle);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
/* O botao sobe 1px e ganha sombra curta ao passar o dedo: e o gesto que faz
   uma tela parecer viva sem enfeite nenhum. Quem pediu menos movimento nao ve
   a animacao — a regra de prefers-reduced-motion la em cima desliga a
   transicao. */
.botao:hover {
  background: var(--caneta-escura);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(30, 42, 56, 0.18);
}
.botao:active { transform: translateY(0); box-shadow: none; }
.botao.largo { display: block; width: 100%; }
/* Botao fantasma: contorno da propria marca, como o "Conheca nossos servicos"
   da referencia. Contorno em tinta fazia ele competir com o botao cheio. */
.botao.vazio { background: transparent; color: var(--marca); border-color: var(--marca); }
.botao.vazio:hover { background: var(--caneta-clara); }
.botao.discreto { background: transparent; color: var(--tinta); border-color: var(--linha); }

/* BOTAO DE PAGAR — amarelo com letra preta.
   Pedido do dono em 13/08/2026: "Liberar por Pix" e "Começar o dia 1" saiam da
   mesma cor. Eram os dois `.botao` verde, e sao decisoes de natureza diferente:
   um GASTA DINHEIRO, o outro comeca a prova. Botao que tira dinheiro do bolso
   nao pode ser igual ao que so avanca a tela.

   Medido (scratchpad/contraste.py):
     tinta #201E1D sobre #FFC300 .... 10,32:1  o texto
     borda #A87B00 sobre o cartao ...  3,73:1  a FORMA do botao

   A borda escura nao e enfeite: o amarelo mede 1,57:1 contra o cartao branco, e
   sozinho ele nao teria contorno identificavel (WCAG 1.4.11 pede 3:1 para o
   limite de um componente). Nos outros botoes o proprio preenchimento e escuro
   e resolve isso; neste, nao.

   O texto e a TINTA da paleta, e nao preto puro: preto puro sobre amarelo vibra
   e cansa, e a diferenca de contraste (10,32 contra 13,06) nao muda nada. */
.botao.pagar {
  background: #FFC300;
  border-color: #A87B00;
  color: var(--tinta);
}
.botao.pagar:hover { background: #E0A800; }
.botao.discreto:hover { background: var(--caneta-clara); }
/* Acao sem desfazer (excluir conta). Nao e enfeite: um botao que parece com
   os outros e um botao que se clica sem ler. */
.botao.perigo { background: #fff; color: var(--erro); border-color: var(--erro); }
.botao.perigo:hover { background: var(--erro-fundo); }

.barra-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.links-apoio {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 13.5px;
  color: var(--grafite);
}
.links-apoio p { margin: 0 0 6px; }
.links-apoio p:last-child { margin-bottom: 0; }

/* ---------- recados ---------- */
.recado {
  border: 1px solid var(--linha);
  border-left-width: 3px;
  border-radius: var(--raio-papel);
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.recado.sucesso { background: var(--acerto-fundo); border-left-color: var(--acerto); color: #0A6B4B; }
.recado.erro    { background: var(--erro-fundo);  border-left-color: var(--erro);   color: #94202F; }
.recado.aviso   { background: var(--aviso-fundo); border-left-color: var(--aviso);  color: #6B4500; }

.resumo-erros {
  background: var(--erro-fundo);
  border: 1px solid #F5C2C9;
  border-radius: var(--raio-papel);
  padding: 11px 13px 11px 30px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: #94202F;
}
.resumo-erros li { margin-bottom: 3px; }
.resumo-erros li:last-child { margin-bottom: 0; }

/* ---------- termos e privacidade ---------- */
/* Texto juridico e feito para ser lido, nao para cumprir tabela: largura de
   linha limitada e entrelinha generosa, como na tela de prova. */
.juridico { max-width: 42em; margin: 0 auto; }
.juridico p, .juridico li { line-height: 1.75; color: #2C2A38; }
.juridico h2 {
  font-family: var(--display);
  font-size: 15px;
  margin: 26px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.juridico ul { padding-left: 20px; margin: 0 0 12px; }
.juridico li { margin-bottom: 7px; }

.rodape p { margin: 0 0 4px; }
.rodape p:last-child { margin-bottom: 0; }
.rodape a { color: var(--grafite); }

/* ---------- pagina de erro ---------- */
.erro-pagina { text-align: center; padding: 48px 0; }
.erro-pagina .codigo {
  font-family: var(--mono);
  font-size: 46px;
  color: var(--grafite-claro);
  margin: 0;
  line-height: 1;
}
.erro-pagina h1 { font-family: var(--display); font-size: 22px; margin: 14px 0 8px; }
.erro-pagina p { color: var(--grafite); margin: 0 0 22px; }

/* Linha de dia de prova no painel do aluno. */
.linha-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--linha);
}
.linha-dia:first-of-type { border-top: 0; }

/* ---------- resultado e revisao pos-prova ---------- */
/* CONTEXTO.md 4.10: verde, vermelho e cinza SO existem aqui, depois da
   divulgacao. Durante a prova a tela e quase sem cor, e e por isso que o
   acento da marca e violeta — nao verde nem vermelho. */

.numeros-resultado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.numero-grande {
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel);
  padding: 14px 16px;
}
.numero-grande .valor {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--caneta);
}
.numero-grande.discreto .valor { color: var(--grafite); font-size: 26px; }
.numero-grande .de { font-size: 13px; color: var(--grafite-claro); margin-left: 4px; }
.numero-grande .rotulo {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grafite-claro);
  margin-top: 6px;
}

.area-linha { margin-bottom: 16px; }
/* `gap` porque `space-between` nao separa nada quando o texto ocupa a linha
   toda: o "0/5" colava no fim da habilidade e lia-se "publico alvo,0/5". */
.area-topo {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  margin-bottom: 5px;
}
.trilho { height: 8px; background: var(--trilho); border-radius: 4px; overflow: hidden; }
.trilho .preenche { height: 100%; background: var(--caneta); border-radius: 4px; }

/* ---------- barra de desempenho ---------- */
/* E um <progress>, e nao uma div com `style="width:N%"`.
   O motivo e concreto: a CSP do SEGURANCA.md secao 9 nao permite `unsafe-inline`
   em estilo, entao TODO atributo `style` desta aplicacao e descartado pelo
   navegador em silencio. As barras de desempenho por area apareceram cheias
   para todo mundo — inclusive para quem acertou duas de noventa — desde que a
   politica entrou. Nada quebra, nada avisa: o estilo simplesmente nao existe.
   `<progress>` resolve sem excecao de seguranca e ainda e anunciado pelo leitor
   de tela como o que e. */
progress.barra {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--trilho);
  margin: 4px 0 0;
}
progress.barra::-webkit-progress-bar { background: #EDEFF2; border-radius: 4px; }
progress.barra::-webkit-progress-value { background: var(--caneta); border-radius: 4px; }
progress.barra::-moz-progress-bar { background: var(--caneta); border-radius: 4px; }

/* ---------- espacamentos utilitarios ---------- */
/* Existem porque `style="margin-top:14px"` nao funciona sob a CSP. */
.espaco-acima { margin-top: 14px; }
.espaco-acima-g { margin-top: 22px; }
.linha-embutida { display: inline; }
.tema-redacao { font-size: 1.05em; }

/* ---------- cartao por area do conhecimento ---------- */
/* Ideia trazida de outra plataforma (Bernoulli) e adaptada. O que faz o layout
   funcionar la nao e a cor: e a sigla grande com o nome POR EXTENSO ao lado, e
   o numero dominante. "CH" sozinho nao diz nada a quem esta comecando.

   A cor identifica a area; ela nao carrega informacao sozinha (WCAG 1.4.1) —
   quem nao distingue cor le a sigla, o nome e os numeros do mesmo jeito. Os
   tons foram escolhidos com contraste >= 4.5:1 contra o branco.

   Vale so DEPOIS da prova. Na tela de prova a cor continua proibida (4.9). */
/* Paleta propria, e nao a da plataforma de onde veio a ideia do layout: copiar
   a estrutura de uma boa tela e util, copiar a identidade visual dela e outra
   coisa. Familia ancorada no roxo da marca (--caneta), mais saturada e mais
   escura que a referencia.

   Alem do contraste >= 4.5:1 com o branco, os quatro tons foram separados em
   LUMINANCIA (razao de 1,22 a 1,38 entre vizinhos). Isso e o que faz eles
   continuarem distinguiveis em escala de cinza e para quem nao enxerga cor —
   ainda que o significado nunca dependa disso, porque a sigla e o nome estao
   escritos ao lado. */
.area-LC { --cor-area: #24406F; }   /* indigo    · contraste 10,3 */
.area-CH { --cor-area: #B0552B; }   /* terracota · contraste  5,0 */
.area-CN { --cor-area: #0F6E62; }   /* petroleo  · contraste  6,1 */
.area-MT { --cor-area: #6D3D9E; }   /* violeta   · contraste  7,5 */

/* Era um bloco de cor cheia com texto branco. Quatro deles empilhados eram o
   destaque da tela quando o resto era branco; na paleta clara nova viram
   quatro paredes saturadas competindo com a nota, que e o assunto.

   A cor continua identificando a area — que era o ponto — mas agora na
   lombada, na sigla e na barra. E em nenhum dos casos ela carrega informacao
   sozinha (WCAG 1.4.1): a sigla e o nome estao escritos ao lado. */
/* MESMA FORMA do bloco "por area" do painel: medalha de 44px pendurada na
   margem e nome, valor, barra e detalhe pendurados da segunda margem. As duas
   telas mostram a mesma coisa e o aluno vai de uma para a outra — ver com a
   mesma cara e o que faz as duas parecerem o mesmo produto.

   Saiu daqui a lombada de 6px na cor da area: a medalha ja e a cor, e duas
   marcas da mesma cor no mesmo cartao e uma a mais.
   Saiu tambem o `auto 1fr` com o numero em `text-align: right`, que empurrava
   o valor contra a borda direita — o "duas pontas distantes" do painel. */
.cartao-area {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-content: start;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.cartao-area:last-child { margin-bottom: 0; }
.area-identidade { grid-column: 2; min-width: 0; }
/* Mesmo rotulo dos cartoes de numero: 12,5px, 600, --grafite (6,52:1 no
   branco). Era 11px em CAIXA ALTA com espacamento — a caixa alta encurta a
   altura de x e a torna mais dificil de ler justamente no tamanho menor. */
.area-identidade .nome {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--grafite);
}
/* O valor da casa: 34px, o mesmo de `.cartao-valor` e de `.area-valor`. Era
   26px, um tamanho que so existia aqui. */
.area-identidade .acertos {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  color: var(--tinta);
}
.area-identidade .acertos .unidade {
  font-size: 18px;
  letter-spacing: 0;
  color: var(--grafite);
}
/* A NOTA DO SIMULADO — a conclusao da conta que o aluno acabou de ler.
   18/08/2026: nasceu como linha de texto e o dono reprovou, com razao — as
   areas sao as PARCELAS e ela e a SOMA, e a soma estava menor que todas elas.

   56px contra os 34px do numero da area: a diferenca precisa ser obvia de
   relance, e nao "um pouco maior". O fundo e o --banner-painel, o mesmo azul
   medido no banner do painel: branco em cima da 9,75:1 e o chip 8,63:1. */
.nota-simulado {
  margin-top: var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--banner-painel);
  border-radius: var(--raio);
  text-align: center;
}
.nota-simulado-rotulo {
  margin: 0;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marca-clara);     /* 8,63:1 */
}
.nota-simulado-valor {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--papel);           /* 9,75:1 */
}
.nota-simulado-de {
  margin: 6px 0 0;
  font-size: var(--t-miudo);
  color: var(--marca-clara);     /* 8,63:1 */
}
@media (max-width: 719px) {
  .nota-simulado-valor { font-size: 46px; }
}

.area-numeros {
  grid-column: 2;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--grafite);
}
.area-numeros .brancos { color: var(--aviso); }   /* 9,40:1 no branco */
/* A barra pendura da margem do texto, e nao da margem da medalha: ela le o
   valor que esta logo acima dela. Mesma grossura do bloco do painel. */
.cartao-area progress.barra-area {
  grid-column: 2;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  margin: 2px 0 0;
}

/* Aqui morava um `.destaque` antigo — fundo lilas, texto centrado, `.numero`
   em mono — da versao da tela de resultado que foi substituida pelo bloco
   compartilhado com o painel. Nenhum template o usava mais, e o nome voltou a
   ser usado (a faixa de numeros, adiante): CSS morto nao quebra tela sozinho,
   mas um nome morto que ressuscita com outro sentido, sim. */

/* ---------- pastilhas de resultado da questao ---------- */
/* Dizem o essencial antes de qualquer leitura: qual era a resposta e qual voce
   marcou. A COR nao carrega isso sozinha — o texto ja diz "Gabarito: A" e
   "Voce marcou C" (WCAG 1.4.1). */
.pastilhas-resultado {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
/* 8px, e nao 99px: a etiqueta de gabarito da tela de resultado era a ultima
   pilula da area do aluno. Mesmo canto das demais etiquetas da area. */
.pastilha-r {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 12px;
}
.pastilha-r.certa   { background: var(--acerto-fundo); color: #0A6B4B; }
.pastilha-r.errada  { background: var(--erro-fundo);   color: #94202F; }
.pastilha-r.neutra  { background: #F2F2F5;             color: var(--grafite); }

/* ---------- distribuicao das respostas ---------- */
.distribuicao {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.dist-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.dist-letra {
  flex: 0 0 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grafite);
}
.dist-barra { flex: 1; margin: 0; }
.dist-valor { flex: 0 0 40px; text-align: right; font-size: 12.5px; color: var(--grafite); }
/* A do gabarito e a que voce marcou ganham peso; as demais ficam neutras. */
.dist-linha.correta .dist-letra,
.dist-linha.correta .dist-valor { color: var(--acerto); font-weight: 600; }
.dist-linha.correta .dist-barra::-webkit-progress-value { background: var(--acerto); }
.dist-linha.correta .dist-barra::-moz-progress-bar { background: var(--acerto); }
.dist-linha.sua .dist-letra,
.dist-linha.sua .dist-valor { color: var(--erro); font-weight: 600; }
.dist-linha.sua .dist-barra::-webkit-progress-value { background: var(--erro); }
.dist-linha.sua .dist-barra::-moz-progress-bar { background: var(--erro); }

/* ---------- diagnostico por tema ---------- */
/* O numero que resume a prova fica ao lado do titulo, e nao num cartao
   proprio: e a primeira coisa que se olha, e cartao proprio empurraria o
   resto para baixo da dobra. */
.percentual-grande {
  font-family: var(--mono);
  font-size: 0.62em;
  color: var(--grafite);
  margin-left: 6px;
}
.veredito { font-size: 15px; margin: 0 0 10px; }

.tema-linha { margin-bottom: 14px; }
.tema-linha:last-child { margin-bottom: 0; }
.tema-forte {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 14px;
}
.tema-forte .mono { font-family: var(--mono); color: var(--grafite); }

/* A dobra: o resto dos numeros, para quem quiser conferir. `<details>` do
   proprio HTML — sem JavaScript e sem estilo em atributo (que a CSP bloquearia
   de qualquer forma). */
.dobra summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--grafite);
}
.dobra summary::marker { color: var(--grafite-claro); }
.dobra h3 {
  font-size: 14px;
  margin: 20px 0 6px;
}
.dobra h3:first-of-type { margin-top: 16px; }

.tabela-tema { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-tema th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--grafite-claro);
  border-bottom: 1px solid var(--linha); padding: 7px 10px;
}
.tabela-tema td {
  border-bottom: 1px solid var(--linha); padding: 9px 10px;
  vertical-align: top;
}
.tabela-tema td:last-child, .tabela-tema th:last-child { text-align: right; }
.tabela-tema .dica { margin: 3px 0 0; }
/* A prova que o aluno esta olhando, dentro da serie. Sem cor forte: e
   referencia, nao alerta. */
.serie-atual .area-topo { font-weight: 600; }

.legenda-cores { font-size: 13px; color: var(--grafite); margin: 0 0 12px; }
.pastilha {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 3px; margin: 0 3px 0 10px; vertical-align: middle;
}
.pastilha:first-child { margin-left: 0; }
.pastilha.acerto { background: var(--acerto); }
.pastilha.erro   { background: var(--erro); }
.pastilha.branco { background: var(--linha-forte); }   /* 3,03:1 — WCAG 1.4.11 */

/* Cada celula traz numero, area e A LETRA QUE VOCE MARCOU.
   Ideia adaptada de outra plataforma, e ela conserta uma falha nossa: antes so
   a COR dizia se acertou ou errou, e cor sozinha nao pode carregar informacao
   (WCAG 1.4.1). Com a letra na celula, quem nao distingue verde de vermelho le
   o mesmo que os outros — e todo mundo ganha, porque a grade passa a ser o
   gabarito inteiro numa olhada, em vez de um mapa de cores. */
.grade-revisao { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }
.q-revisao {
  display: grid; place-items: center; align-content: center;
  min-height: 52px; padding: 4px 2px;
  border: 1px solid var(--linha); border-radius: 6px;
  font-family: var(--mono);
  text-decoration: none; color: var(--grafite);
  line-height: 1.15;
}
.q-revisao .q-num { font-size: 14px; font-weight: 600; }
.q-revisao .q-area { font-size: 9px; letter-spacing: 0.04em; opacity: 0.75; }
.q-revisao .q-letra { font-size: 13px; font-weight: 700; }
.q-revisao.acerto  { background: var(--acerto-fundo); border-color: var(--acerto); color: #0A6B4B; }
.q-revisao.erro    { background: var(--erro-fundo);   border-color: var(--erro);   color: #94202F; }
.q-revisao.branco  { background: #F2F2F5; }
.q-revisao.branco .q-letra { opacity: 0.5; font-weight: 400; }
.q-revisao.anulada { background: #F2F2F5; text-decoration: line-through; }

.revisao-item { scroll-margin-top: 16px; }
.enunciado-revisao { margin-bottom: 14px; line-height: 1.7; }
.alternativas-revisao { list-style: none; margin: 0; padding: 0; }
.alt-rev {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--raio-papel);
  border: 1px solid transparent; margin-bottom: 4px;
  line-height: 1.6;
}
.alt-rev.correta { background: var(--acerto-fundo); border-color: var(--acerto); }
.alt-rev.marcada-errada { background: var(--erro-fundo); border-color: var(--erro); }
.letra-rev {
  flex: 0 0 28px; width: 28px; height: 28px;
  border: 1.5px solid #C9C6D8; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px; background: #fff; color: var(--grafite);
}
.alt-rev.correta .letra-rev { background: var(--acerto); border-color: var(--acerto); color: #fff; }
.alt-rev.marcada-errada .letra-rev { background: var(--erro); border-color: var(--erro); color: #fff; }

/* A MESMA alternativa, no caderno de erros, quando ainda está por responder.
   Cada uma é um botão que envia a resposta: marcar e depois confirmar seriam
   dois toques para uma decisão só.

   Herda a caixa do `.alt-rev` para que a questão em branco e a questão
   respondida sejam visivelmente a mesma tela, e não duas. O que muda é ter
   borda o tempo todo (é clicável, precisa parecer), o texto alinhado à
   esquerda e o alvo de toque de 44px (4.20). */
.alt-escolha {
  display: flex; gap: 12px; align-items: flex-start;
  width: 100%; min-height: 44px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-papel);
  background: #fff; color: inherit;
  font: inherit; line-height: 1.6; text-align: left;
  cursor: pointer;
  transition: border-color var(--salto), background var(--salto);
}
@media (hover: hover) {
  .alt-escolha:hover { border-color: var(--marca); background: var(--barra-aceso); }
}
.alt-escolha:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.alt-escolha-texto { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) {
  .alt-escolha { transition: none; }
}
.marca-rev {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 6px 0 0; color: var(--grafite);
}
.justificativa-rev {
  font-size: 13.5px; color: var(--grafite);
  margin: 6px 0 0; padding-left: 10px;
  border-left: 2px solid var(--linha);
}

.tabela-confianca { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-confianca th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--grafite-claro);
  border-bottom: 1px solid var(--linha); padding: 7px 10px;
}
.tabela-confianca td { border-bottom: 1px solid var(--linha); padding: 9px 10px; }
.tabela-confianca td.mono { font-family: var(--mono); text-align: right; width: 90px; }

/* Figura de item: nunca estoura a largura da folha, nem no celular. */
.figura-item { max-width: 100%; height: auto; display: block; margin: 12px 0; }

/* Link de navegacao do topo. Nao e botao: botao promete acao, e "Meu painel"
   e deslocamento. Com tudo em botao, nada tem destaque — e a unica acao que
   merece destaque na barra e "Criar conta". */
.elo {
  color: var(--tinta);
  font-family: var(--controle);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: var(--raio);
  white-space: nowrap;
}
.elo:hover { background: var(--caneta-clara); }
.elo.apagado { color: var(--grafite-claro); }
/* Onde a pessoa esta. A cor sozinha nao carrega o recado (WCAG 1.4.1): a
   sublinha e a espessura dizem a mesma coisa sem depender de enxergar cor. */
.elo[aria-current="page"] {
  color: var(--marca);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--marca);
  border-radius: var(--raio) var(--raio) 0 0;
}

/* ==========================================================================
   PORTA DE ENTRADA — a capa do caderno

   Nada aqui e cartao branco arredondado sobre cinza. O que separa uma parte
   da outra e FIO e ESPACO, como em material impresso. Cartao so aparece onde
   representa um objeto de verdade: os dois cadernos.
   ========================================================================== */

/* ---------- a abertura ---------- */
/* ASSIMETRICA de proposito. A versao anterior era uma capa centralizada dentro
   de um cartao — e capa centralizada e a primeira coisa que faz uma pagina
   parecer template, que e a critica que o dono ja fez duas vezes. Aqui o texto
   ocupa a coluna da esquerda e a ficha tecnica encosta na direita, separada
   por fio, como o cabecalho de um caderno de verdade. */
/* O BANNER DA MARCA na porta de entrada (17/08/2026). Largura inteira do
   miolo. Ele vem ANTES da pergunta e não no lugar dela: quem segura a pessoa
   na página é "Quanto você tiraria hoje?" seguida da demonstração do TRI — o
   banner diz de quem é a casa, a pergunta diz por que ficar. */
.banner-landing {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-g, 12px);
  margin: 18px 0 0;
}

.abertura-publica {
  display: grid;
  gap: 26px;
  width: min(1160px, calc(100vw - 28px));
  left: 50%;
  transform: translateX(-50%);
  padding: 26px 4px 34px;
  border-bottom: 2px solid var(--tinta);
  position: relative;
  isolation: isolate;
}
.abertura-texto { min-width: 0; }
/* A ARTE SO EXISTE NO DESKTOP — 20/08/2026, pedido do dono olhando o site no
   celular dele: "tem como retirar essa figura do celular na versão quando
   acessado pelo celular? ela fica avulsa na tela".

   E ele tem razão sobre o que a tela mostra. No desktop a arte É a faixa: ela
   ocupa o fundo inteiro e o texto mora no azul que sobra — os dois são uma
   composição só. No celular não cabe faixa nenhuma, então ela caía embaixo dos
   botões como uma fotografia solta de um computador mostrando a mesma página,
   repetindo em miniatura ilegível os quatro recursos que acabaram de ser
   lidos em tamanho de leitura.

   O bloco de 900px devolve o `display` dela, então o desktop não muda. */
.abertura-figura {
  min-width: 0;
  display: none;
  place-items: center;
  position: relative;
}
.abertura-figura picture { display: block; width: 100%; }
/* 1536x1024, sempre reduzida no desktop. O WebP e lossless e foi conferido
   pixel a pixel contra o PNG original: menor para carregar, sem perder tinta. */
.banner-landing-direita {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 24px 54px -34px rgba(42, 53, 71, 0.48);
}

.abertura-selo {
  font-family: var(--controle);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite-claro);
  margin: 0;
}
/* TÍTULO GRANDE E LEVE — 17/08/2026, régua medida no portal da FGV a pedido do
   dono, e não copiada: lá o H1 é 42px com peso 500, e o H2 34px com peso 600.

   A troca que faz a diferença é o PESO, não o tamanho. Peso 700 em 38px grita;
   peso 500 em 42px tem autoridade. É o que separa "página de curso" de
   "instituição", e era o que faltava aqui. */
.abertura-publica h1 {
  font-family: var(--display);
  font-weight: 500;
  /* O TAMANHO ACOMPANHA A TELA. Com 42px fixos, "Sua preparação decola" pedia
     ~440px e vazava dos 390px de um celular — o título saía cortado pela
     direita. O teto continua 42px, que é a régua de 17/08. */
  font-size: clamp(29px, 8.4vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
  color: var(--tinta);
}
.abertura-publica h1 em { font-style: italic; color: var(--marca); }
.abertura-sub {
  color: var(--grafite);
  font-size: 16px;
  line-height: 1.65;
  max-width: 34em;
  margin: 16px 0 22px;
}
.abertura-publica .barra-acoes { margin-top: 28px; }

/* A ficha tecnica. Era `.ficha`, que continua existindo na tela de preparacao
   da prova — este e outro elemento e por isso tem outro nome. */
.ficha-publica {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid var(--linha);
  align-self: start;
}
.ficha-publica > div {
  padding: 14px 12px;
  border-bottom: 1px solid var(--linha);
  border-right: 1px solid var(--linha);
}
.ficha-publica > div:nth-child(2n) { border-right: 0; }
.ficha-publica dt {
  font-family: var(--controle);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite-claro);
}
/* O numero DEPOIS do rotulo na marcacao (`<dt>` antes de `<dd>`, como manda a
   lista de definicao) e ACIMA dele na tela: e o numero que se le primeiro. */
.ficha-publica dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.botao.grande { padding: 13px 26px; font-size: 15px; }
.abertura-publica .botao:not(.vazio),
.fecho .botao:not(.vazio) {
  background: linear-gradient(135deg, var(--marca) 0%, #0A7E69 100%);
  border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(72, 105, 198, 0.62);
}

/* ---------- o paradoxo do TRI ---------- */
/* O bloco que segura a pessoa na pagina. Nao e um "recurso": e a demonstracao
   de que a nota do exame nao e contagem de acertos — o fato que justifica esta
   plataforma existir. Os numeros vem de servicos/demonstracao.py, calculados
   pelo mesmo motor que corrige a prova. */
.paradoxo {
  padding: 34px 4px 0;
}
.paradoxo-olho {
  font-family: var(--controle);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 8px;
}
.paradoxo h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
}
.paradoxo-sub {
  color: var(--grafite);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 14px 0 0;
  max-width: 44em;
}

.cartelas { display: grid; gap: 16px; margin-top: 22px; }
.cartela {
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel);
  background: var(--papel);
  padding: 18px;
  box-shadow: var(--sombra);
}
.cartela-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cartela-quem { font-weight: 700; font-size: 15px; margin: 0; }
.cartela-acertos {
  margin: 0;
  font-family: var(--controle);
  font-size: 12.5px;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}

/* Cada celula e uma questao, da mais facil para a mais dificil. `auto-fit` com
   piso de 10px: no celular sao ~20 por linha, no desktop as 45 cabem em duas.
   O desenho nao carrega o recado sozinho — o `aria-label` da grade conta a
   mesma historia, e a nota esta escrita embaixo (WCAG 1.4.1). */
.cartela-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  gap: 3px;
  margin: 16px 0 6px;
}
.celula {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--mesa);
  border: 1px solid var(--linha);
}
.celula.cheia { background: var(--marca-pintura); border-color: var(--marca); }
.cartela-escala {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: var(--controle);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite-claro);
}
.cartela-nota {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.paradoxo-fecho {
  font-size: 16px;
  line-height: 1.7;
  margin: 22px 0 0;
  max-width: 44em;
  color: var(--grafite);
}
.paradoxo-fecho strong { color: var(--tinta); }
/* A ressalva anda junto com o numero, e nao no rodape da pagina: exemplo sem a
   ressalva ao lado vira dado. */
.paradoxo-nota {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--grafite-claro);
  margin: 12px 0 0;
  max-width: 44em;
}

/* ---------- o que chega quando voce entrega ---------- */
/* Lista de definicao com fio, e nao quatro cartoes brancos: os quatro cartoes
   de recurso sao a parte do template padrao que o dono nomeou. */
/* AS QUATRO ENTREGAS — uma grade editorial numerada. Sem icone decorativo e
   sem quatro cartoes iguais: o numero cria ritmo e os fios criam estrutura. */
.entrega {
  margin: 20px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha-forte);
}
.entrega > div {
  border-bottom: 1px solid var(--linha);
  padding: 24px 0;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 6px;
  align-items: start;
}
.entrega-numero {
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--marca);
  line-height: 1;
  padding-top: 2px;
}
.entrega dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  align-self: center;
}
.entrega dd {
  margin: 0;
  color: var(--grafite);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- fechamento ---------- */
/* Uma linha, e nao o bloco escuro arredondado de sempre. */
.fecho {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 2px solid var(--tinta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fecho p {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 24em;
}

/* ---------- secoes ---------- */
/* Sem caixa: titulo, filete e conteudo direto no papel. */
.secao { padding: 34px 4px 0; }
/* Mesma régua institucional do H1: sobe de tamanho e DESCE de peso. O fio
   grosso embaixo continua — é ele que dá o ar de portal, e mede 12,36:1. */
.secao-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tinta);
}
.secao-sub { color: var(--grafite); margin: 12px 0 0; font-size: 15px; }

/* Aqui moravam os "tres passos numerados" e os "quatro cartoes de recurso".
   Sairam com a reescrita da porta de entrada em 07/08/2026: sao duas das
   quatro formas que o dono nomeou como "cara de feito por AI". O conteudo
   que valia virou `.entrega`, uma lista de definicao com fio. */

/* ---------- os dois cadernos ---------- */
/* Aqui a caixa faz sentido: cada uma E um caderno. A lombada colorida e a
   unica cor forte da pagina, e vem das capas do exame. */
.cadernos { display: grid; gap: 14px; margin-top: 20px; }
/* A ARTE DOS CADERNOS. Desde 18/08/2026 os dois cartoes sao imagem do dono,
   com o texto dentro — ele preferiu assim para poder trocar a arte sem mexer
   em codigo. O cartao desenhado a mao (borda colorida a esquerda, numero
   grande em `--cor-caderno`) saiu junto com o desenho dos 90 quadradinhos.

   Sem moldura, sem sombra e sem fundo: o arquivo ja traz os tres. Colocar
   cartao em volta de uma imagem que ja e um cartao produz borda dupla. */
.caderno-arte { display: block; min-width: 0; }
.caderno-arte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio);
}
/* ---------- duvidas ---------- */
/* <details> nativo: abre e fecha sem uma linha de JavaScript, e o leitor de
   tela ja anuncia o estado. */
.duvidas { margin-top: 4px; }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary {
  cursor: pointer;
  padding: 16px 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.duvidas summary::-webkit-details-marker { display: none; }
/* O sinal de abrir vira um botao redondo pequeno — o toque de interface atual
   dentro de uma pagina de papel. Redondo porque e alvo de dedo. */
.duvidas summary::after {
  content: "+";
  font-family: var(--controle);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--linha);
  border-radius: 99px;
  color: var(--marca);
  background: var(--papel);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.duvidas summary:hover::after { background: var(--marca-clara); border-color: var(--marca); }
.duvidas details[open] summary::after { content: "–"; background: var(--marca-clara); border-color: var(--marca); }
.duvidas details p {
  margin: 0 0 16px;
  color: var(--grafite);
  font-size: 15px;
  line-height: 1.7;
  max-width: 42em;
}

/* A `.assinatura` foi embora junto: virou `.fecho`, uma linha so. */

@media (min-width: 700px) {
  /* Texto a esquerda, ficha tecnica encostada na direita. E aqui que a
     assimetria da abertura aparece — no celular as duas empilham. */
  /* A coluna da direita cresceu de 300px para 400px em 15/08, quando ela
     deixou de ser so a ficha tecnica e passou a carregar a FIGURA. Com 300px o
     desenho ficava do tamanho de um selo ao lado de uma coluna de texto de
     704px — presente na marcacao e ausente na tela, que e o oposto do
     "sensacao de portal" que o dono pediu. */
  .abertura-publica {
    grid-template-columns: minmax(0, 1fr);
    padding: 44px 4px 40px;
  }
  .abertura-texto {
    align-self: center;
    padding: 20px 0;
  }
  .abertura-publica h1 { font-size: 52px; }
  .abertura-sub { font-size: 17.5px; }
  .ficha-publica { grid-template-columns: 1fr 1fr; }

  .secao, .paradoxo { padding-top: 52px; }
  .secao-titulo { font-size: 28px; }
  .paradoxo h2 { font-size: 40px; }
  .cartelas { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cartela { padding: 22px; }

  /* O numero grande na coluna estreita, o texto na larga. */
  .fita { grid-template-columns: auto 1fr; gap: 30px; padding: 32px 30px; }
  .fita-numero { font-size: 72px; }

  .entrega { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .entrega > div:nth-child(even) {
    border-left: 1px solid var(--linha);
    padding-left: 34px;
  }
  .cadernos { grid-template-columns: 1fr 1fr; gap: 18px; }
}

@media (min-width: 900px) {
  /* DE PONTA A PONTA — 20/08/2026, pedido do dono: "verifiquei a maior parte
     das landing, utilizando banner ou imagens esticada de ponta a ponta da sua
     pagina e a nossa nao esta assim". Era um cartao de 1160px com canto
     arredondado no meio de uma pagina branca.

     A abertura nao mora mais dentro do `.palco`: ela sai pelo bloco `faixa` do
     `base.html`, logo abaixo do cabecalho, e por isso a largura e simplesmente
     `100%` do corpo. Nada de `100vw`, que conta a barra de rolagem e deixaria
     ~8px de rolagem lateral, e nada de `overflow` em ancestral para esconder
     esses 8px — isso quebraria o `position: sticky` da barra da prova, que
     esta folha ja registra em dois lugares.

     DUAS TENTATIVAS ERRADAS ANTES DESTA, em 20/08/2026, e as duas pela mesma
     causa: cortar no lugar errado. Com `overflow-x: clip` no `.palco`, a
     abertura de 1440px era cortada na largura dele, 1080px — sumiam 180px de
     cada lado e o miolo aparecia ampliado. Da tela sai "imagem esticada e
     desfigurada", e o diagnostico e o oposto: ela nao estava esticada, estava
     CORTADA.

     A IMAGEM NAO ESTICA, A COR E QUE ANDA — e o modelo que o dono apontou num
     exemplo de mercado: "a cor pode pegar todo o hero, ai no meio entra a
     imagem (com fundo igual) para nao estourar".

     O fundo da faixa e `#154699`, que nao foi escolhido: e a cor MEDIDA da
     borda direita do arquivo, cuja coluna varia so 6 em 255 — praticamente
     chapada. Por isso, onde a arte acaba, a cor segue e a emenda nao aparece.
     A arte fica ancorada a esquerda, com a ALTURA da faixa e a largura que ela
     tiver (`contain`), entao nunca deforma nem perde foco.

     Com a faixa em 2,4:1 e a arte em 1,5:1, a arte ocupa sempre os mesmos
     62,5% da esquerda, em qualquer largura de tela — e sobra sempre o mesmo
     terco de azul liso para o texto. Proporcional, e nao um numero fixo que
     quebra numa janela diferente. */
  .abertura-publica {
    display: block;
    width: 100%;
    max-width: none;
    left: auto;
    transform: none;
    background: #0D3D88;
    aspect-ratio: 24 / 10;
    max-height: 720px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* A arte come os 62,5% da esquerda; o texto mora no terco que sobra. */
  .abertura-texto {
    position: absolute;
    z-index: 2;
    width: 32%;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
  }
  .abertura-publica h1 { font-size: 44px; }

  /* O TEXTO SOBRE A ARTE ESCURA.

     A arte antiga deixava a direita CLARA e a tinta padrao servia. A do dono e
     azul de ponta a ponta: medido na faixa onde o texto cai (0,535 a 0,955 da
     largura), a cor media e #001E94 e o 1% mais claro ainda da 8,70:1 contra o
     branco. As cores da folha reprovam ali — `--marca` da 1,70:1 e `--grafite`
     1,59:1, ou seja, sumiriam.

     Os dois tons de destaque sao os DO PROPRIO ARQUIVO, colhidos dele: o ciano
     do "dados reais." e o do selo. Medidos contra o pior fundo da faixa:
     branco 8,70:1, ciano 5,57:1, selo 4,90:1 — os tres passam em AA. */
  .abertura-publica .abertura-selo { color: #47D4E7; }
  .abertura-publica h1 { color: #FFFFFF; }
  .abertura-publica h1 em { color: #26E3FB; }
  .abertura-publica .abertura-sub { color: #E4EBFF; }
  .abertura-publica .botao.vazio {
    background: rgba(255, 255, 255, 0.04);
    border-color: #A8BEFF;
    color: #E4EBFF;
  }
  .abertura-figura {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
  }
  /* A ARTE ANDA JUNTO COM O TEXTO, E O AZUL SOBRA A ESQUERDA — pedido do dono
     em 20/08/2026: "trazer a imagem do celular e as frases mais para a direita
     deixando o lado esquerdo com azul livre", com a caixa desenhada por ele
     por cima da propria tela.

     Ancorada a esquerda, a arte grudava na borda e abria um vao azul no MEIO,
     entre ela e o texto — a composicao ficava partida em duas pontas.

     A caixa que ele marcou vai de ~28% a ~62% da largura, e e assim que este
     bloco esta escrito: borda direita em 62% (onde acaba, comeca o respiro
     para a coluna de texto, que ocupa de 65% a 97%) e largura de 34%. O que
     sobra a esquerda — 28% da faixa — e o azul livre que ele pediu.

     Tudo em PORCENTAGEM de proposito: a distancia entre arte e texto fica a
     mesma em qualquer largura de janela. Em pixel isso so valeria na tela de
     quem fez, e desmontaria nas outras. */
  .abertura-figura {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 13%;
  }
  .abertura-figura picture {
    display: flex;
    height: 100%;
    width: auto;
  }
  /* NADA DE `cover`, E NADA DE ALTURA CHEIA. A arte guarda a razao dela: com
     `max-width` e `max-height` juntos e as duas medidas em `auto`, ela cabe na
     caixa pelo lado que apertar primeiro e nao ha como esticar nem cortar —
     que foi o defeito das duas primeiras tentativas. */
  .banner-landing-direita {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ==========================================================================
   PAINEL DO ALUNO

   Tres situacoes que antes tinham exatamente o mesmo peso: prova com o
   cronometro correndo, prova para comecar e prova ja feita. Agora cada uma
   pesa o que vale.
   ========================================================================== */

.saudacao { padding: 6px 4px 18px; }
.saudacao h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}

/* A `.abertura` do painel viveu algumas horas em 07/08/2026, entre a
   saudacao solta e o `.banner` da moldura nova. Saiu inteira: com a barra
   lateral dizendo em que tela voce esta, o banner faz o trabalho dela em
   todas as telas, e nao so no painel. */
/* AQUI FICAVA `.botao.claro` — branco no preenchimento E no contorno.
   Removido em 17/08/2026, com as tres telas que o usavam.

   Ele nasceu certo, quando o `.banner` era um bloco PINTADO de escuro: botao
   branco sobre azul escuro tem forma e tem texto. O banner deixou de ser
   pintado em 14/08 e a classe ficou, agora sobre o chao #F6F9FC: a forma do
   botao passou a medir 1,06:1, contra os 3:1 que a WCAG 1.4.11 pede para o
   limite de um controle. O texto continuava em 12,36:1 — por isso ele se LIA e
   nao se VIA, e foi assim que o dono o descreveu: "quase invisivel por conta
   do fundo".

   E a mesma familia de defeito da folha da prova, que continuou verde quando o
   tema virou azul: o componente sobreviveu ao container para o qual foi
   desenhado. Quem quiser um botao secundario aqui use `.botao.discreto` —
   mas MEÇA o contorno dele antes, que hoje e `--linha` e vale 1,26:1. */

/* ---------- prova ---------- */
.prova {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel);
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.prova-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
.prova-cab h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0;
}
.prova-cab .sub { margin: 6px 0 0; font-size: 14px; }
/* Aqui morava `.etiqueta-preco`, a pastilha "Gratuito / R$ X" no cabecalho de
   cada prova. Saiu com a reforma de 08/08: numa prova sem preco nao ha o que
   pagar, e escrever "Gratuito" era mais uma linha dizendo que nao ha nada a
   fazer. O preco agora aparece so onde decide alguma coisa — no cartao do
   simulado que ainda precisa ser liberado. */
.prova-janela { color: var(--grafite); font-size: 14px; margin: 12px 0 0; }

/* ---------- os dois dias ---------- */
.dias { display: grid; gap: 10px; margin-top: 14px; }
.dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--linha);
  /* A lombada e a mesma da capa: dia 1 azul, dia 2 ambar. */
  border-left: 8px solid var(--cor-caderno);
  border-radius: var(--raio-papel) var(--raio) var(--raio) var(--raio-papel);
  padding: 14px 16px;
}
.dia-1 { --cor-caderno: var(--caderno-azul); --fundo-caderno: #F0F3FA; }
.dia-2 { --cor-caderno: var(--caderno-amarelo); --fundo-caderno: #F5F1FC; }
/* Os dois fundos sao a PROPRIA cor do dia a 8% sobre branco, e nao tons
   escolhidos a olho. A 8% tudo o que se escreve em cima passa em AA com
   folga — medido: tinta 11,1:1, grafite 4,9:1, e a propria cor do caderno
   4,6:1 no azul e 4,8:1 no roxo. A 12% a cor do caderno cairia para 4,36:1 e
   reprovaria em texto de tamanho normal. */

/* Ja feita: recolhe. Continua acessivel, mas nao disputa atencao com o que
   ainda ha para fazer. */
.dia.situacao-concluida { border-left-color: var(--linha); background: transparent; }
.dia.situacao-concluida .dia-numero { color: var(--grafite); }
/* Sem acesso ou fora da janela: sem cor, porque nao ha o que fazer. */
.dia.situacao-sem_acesso,
.dia.situacao-fechada { border-left-color: var(--linha); opacity: 0.75; }

.dia-identidade { min-width: 0; }
.dia-numero {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--cor-caderno);
  margin: 0;
}
.dia-areas { font-size: 14px; color: var(--grafite); margin: 2px 0 0; }
.dia-duracao {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grafite-claro);
  margin: 3px 0 0;
}

.dia-acao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dia-nota {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1;
}
.dia-nota-rotulo {
  font-family: var(--controle);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite-claro);
  margin: 3px 0 0;
}
.dia-nota + .dia-nota-rotulo { margin-right: 4px; }
.dia-estado {
  font-family: var(--controle);
  font-size: 12.5px;
  color: var(--grafite);
  margin: 0;
}
/* Cor NAO carrega o recado sozinha (WCAG 1.4.1): o texto ja diz "Em
   andamento", e o bloco em tinta cheia la em cima diz de novo. */
.dia-estado.agora { color: var(--caderno-rosa); font-weight: 600; }

/* ---------- nada aberto ---------- */
.sem-prova {
  border: 1px dashed var(--linha);
  border-radius: var(--raio-papel);
  padding: 32px 20px;
  text-align: center;
  color: var(--grafite);
  box-shadow: var(--sombra);
}
.sem-prova-titulo {
  font-family: var(--display);
  font-size: 19px;
  color: var(--tinta);
  margin: 0 0 6px;
}
.sem-prova p:last-child { margin: 0; font-size: 14.5px; }

@media (min-width: 700px) {
  .saudacao h1 { font-size: 34px; }
  .em-curso { padding: 28px 26px; }
  .prova { padding: 24px 22px; }
  .dia { padding: 16px 18px; }
}

/* Aqui morava O QUADRO: um retangulo escuro com o numero grande de um lado
   e quatro numerinhos do outro, compartilhado entre painel e resultado.
   Foi substituido pelos `.cartao-numero` da area do aluno, que as duas
   telas agora usam. As classes velhas (`quadro-topo`, `destaque`,
   `indicadores`, `marca-numero`) sairam junto: nome morto que ressuscita
   com outro sentido ja custou um h1 invisivel nesta folha. */

/* ---------- os paineis ---------- */
/* Eram blocos colados um no outro, numa pilha unica que so terminava quando a
   pagina terminava. Agora sao cartoes separados, com largura igual e as mesmas
   margens — a regra da coluna unica esta la embaixo, junto do motivo.

   Cada cartao resume e ENTREGA UM LINK. O painel nao aprofunda; quem aprofunda
   e a tela de desempenho. Era isso que faltava para a tela virar painel, e nao
   deposito. */
.paineis {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}
/* Canto largo, como as caixas do modelo. Sobre a casca branca a borda de 1px
   e o que separa o cartao do papel — por isso ela nao pode sumir. */
.painel-cartao {
  background: var(--papel);
  border: 0;
  border-radius: var(--raio-cartao);
  padding: var(--pad-cartao);
  box-shadow: var(--sombra-cartao);
  margin-bottom: var(--vao);
}
/* O GRAFICO fica fora da caixa, direto sobre o fundo da pagina — e so ele.
   Foi o que o dono apontou comparando as duas telas: no layout aprovado o
   grafico nao tem moldura, e e isso que da leveza. Tirar a caixa de TODOS os
   blocos, como cheguei a fazer, e outra coisa: ai a pagina perde a divisao
   entre as secoes. "Por area" e "Onde voce mais perdeu ponto" continuam em
   caixa branca. */
.painel-cartao.sem-caixa {
  background: transparent;
  padding: 0;
  box-shadow: none;
  margin-bottom: 30px;
}
.painel-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}
.painel-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}
/* O `margin-bottom` nao e enfeite: sem ele a linha de apoio encostava na
   primeira linha de conteudo e as duas liam como um paragrafo so. */
.painel-sub { color: var(--grafite); font-size: 14px; margin: 4px 0 14px; }
.painel-cab .painel-sub { margin-bottom: 0; }
.painel-elo { margin: 14px 0 0; font-size: 14px; }

/* ---------- evolucao ---------- */
/* SVG puro, com os pontos calculados no servidor: sem biblioteca de grafico e
   sem `style` embutido, entao passa na CSP sem excecao. */
.grafico {
  width: 100%;
  height: 110px;
  margin: 16px 0 0;
  overflow: visible;
}
.grafico-area { fill: var(--marca-clara); }
.grafico-linha {
  fill: none;
  stroke: var(--marca);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.grafico-ponto {
  fill: none;
  stroke: var(--marca);
  stroke-width: 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* o que mantem o ponto redondo */
}

.grafico-legenda {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0;
  margin: 10px 0 0;
  overflow-x: auto;
}
.grafico-legenda li { text-align: center; flex: 1 0 auto; }
.legenda-valor {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.legenda-quando {
  display: block;
  font-family: var(--controle);
  font-size: 10.5px;
  color: var(--grafite-claro);
  white-space: nowrap;
}

/* ---------- por area -------------------------------------------------------
   Segunda forma. A primeira era uma linha de fichas: pastilha de 11px, nome em
   13,5px cinza, valor em 18px na PONTA DIREITA da linha, barra de 8px. O dono
   olhou e disse: *"os dados estao pequenos, as letras tambem, nao esta
   centralizado, nao tem harmonia com o site"*.

   As tres queixas sao uma so, e ela e de PESO. Aquele bloco nao usava nenhum
   dos tamanhos da casa: logo acima, na mesma tela, os tres numeros do painel
   sao medalha de 44px + rotulo de 12,5px + valor de 34px. Um bloco com o valor
   a 18px, na mesma tela, nao le como o mesmo produto — le como sobra.

   E "nao esta centralizado" descreve com precisao o que o `space-between`
   fazia: rotulo grudado na margem esquerda, valor jogado na direita, e um vao
   crescente entre os dois conforme a coluna alarga. Sao duas pontas distantes
   onde deveria haver UMA coisa: este numero e desta area.

   Entao o bloco passa a falar o vocabulario dos cartoes de numero, que e o da
   casa: medalha redonda de 44px com a sigla, rotulo pequeno EM CIMA, valor
   grande logo ABAIXO do rotulo (rotulo e valor colados, lendo como um par),
   barra grossa na cor da area e o detalhe embaixo. A medalha fica pendurada na
   margem, e nome, valor, barra e detalhe penduram todos da MESMA segunda
   margem — uma so linha vertical governando o bloco inteiro.
   -------------------------------------------------------------------------- */
.areas-quadro { display: grid; gap: 26px 32px; margin-top: 18px; }

/* Medalha + tres linhas penduradas na mesma margem. A medalha ocupa as tres
   linhas da grade e fica no alto: alinhada ao NOME, que e o comeco da leitura.
   Centrada verticalmente ela ficaria no meio do nada, porque o bloco tem
   quatro alturas diferentes conforme o detalhe quebre em uma ou duas linhas. */
.area-quadro {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-content: start;
}
/* A sigla dentro da medalha, na cor cheia da area com texto BRANCO. As quatro
   foram medidas contra o branco: LC 10,30 · CH 5,02 · CN 6,13 · MT 7,47.
   Mesmo desenho da medalha dos cartoes de numero (44px, redonda) — o que muda
   e so a cor, e ela ja e a identidade daquela area em toda a plataforma.
   A cor nao carrega recado nenhum: o nome da area esta escrito ao lado. */
.sigla-area {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--controle);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--cor-area);
  color: var(--papel);
}
.area-dizeres { grid-column: 2; min-width: 0; }
/* Mesmo rotulo dos cartoes de numero: 12,5px, 600, --grafite (6,52:1 no
   cartao branco). Era 13,5px em peso normal e nao coincidia com nada. */
.area-nome {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grafite);
}
/* O valor da casa: 34px em --display, o mesmo de `.cartao-valor`. Colado ao
   nome (3px), para os dois lerem como um par e nao como duas pontas. */
.area-valor {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: 3px;
  color: var(--tinta);
}
.area-valor .unidade { font-size: 18px; letter-spacing: 0; color: var(--grafite); }
/* `progress.barra` e mais especifico que `.barra-area`, entao sem repetir o
   elemento aqui a cor da marca vencia a cor da area e as quatro barras saiam
   verdes iguais — justamente o que a barra existe para diferenciar. */
progress.barra-area { width: 100%; }
progress.barra-area::-webkit-progress-bar { background: var(--trilho); border-radius: 5px; }
progress.barra-area::-webkit-progress-value { background: var(--cor-area); border-radius: 5px; }
progress.barra-area::-moz-progress-bar { background: var(--cor-area); border-radius: 5px; }
/* Dentro do quadro de areas a barra e mais grossa (10px contra 8px) e pendura
   da margem do texto, nao da margem da medalha: ela e a leitura visual do
   valor que esta logo acima dela, e nao um enfeite do bloco inteiro. */
.area-quadro progress.barra-area {
  grid-column: 2;
  height: 10px;
  border-radius: 5px;
  margin: 2px 0 0;
}
.area-detalhe {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--grafite);
  margin: 0;
  line-height: 1.4;
}

/* ---------- onde perdeu ponto ----------------------------------------------
   Terceira forma, e ela nasceu do MESMO defeito do bloco "por area". A linha
   era um `space-between`: codigo a esquerda, texto da habilidade no meio, "0 de
   7" empurrado contra a borda direita. Medido em 1707px, com o cartao ocupando
   a largura da coluna:

     caixa do texto 875px · tinta do texto 582, 565 e 722px
     -> 305, 322 e 165px de vazio entre o fim da frase e o numero

   E o mesmo "duas pontas distantes" que o dono apontou no "por area", e ficou
   pior quando o cartao passou a ocupar a linha inteira. `space-between` sempre
   produz isso: ele nao distribui, ele EMPURRA para as bordas, e o buraco cresce
   junto com a caixa.

   Agora a linha e um pendurado, o mesmo do bloco por area: marcador de 44px na
   margem, e texto e numero um embaixo do outro, pendurados da segunda margem. O
   numero deixa de flutuar longe do que ele mede, e a tela inteira — cartoes de
   numero, por area e este — passa a ter UMA so linha vertical governando o
   conteudo. De quebra, e o mesmo desenho que a lista ja tinha no celular, onde
   ela nunca coube em uma linha: um layout so, e nao dois conforme a largura.
   -------------------------------------------------------------------------- */
.atencao { list-style: none; padding: 0; margin: 16px 0 0; }
.atencao li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 3px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linha);
}
.atencao li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Teto de medida, e nao a largura toda: a 15px, 875px de caixa dao ~90
   caracteres por linha, bem acima da faixa em que se le sem perder a linha de
   volta. 72ch corta em ~660px e a frase longa passa a quebrar em duas, que e
   como texto se compoe. */
.atencao-tema { grid-column: 2; font-size: 15px; line-height: 1.45; max-width: 72ch; }
.atencao-numero {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--erro);          /* 7,26:1 no cartao branco */
  white-space: nowrap;
}

/* ---------- titulo da lista de provas ---------- */
.titulo-secao-painel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tinta);
}

@media (min-width: 700px) {
  .painel-cartao { padding: 24px 22px; }
  /* DUAS colunas, e a grade tem de FECHAR com 1, 2, 3 ou 4 areas — quantas
     aparecem depende da prova que o aluno fez (Dia 1 da LC e CH, Dia 2 da CN e
     MT, e area sem item calibrado nao recebe nota). Sao quatro casos reais, e
     tres deles nao sao o de quatro.

     Duas colunas fecham 2 e 4 sozinhas. O caso impar e o que deixa buraco, e a
     regra abaixo o resolve sem contar nada no servidor: o ULTIMO bloco, quando
     esta em posicao impar, ocupa a linha inteira. Com 3 areas sai 2 + 1
     cheia; com 1 area sai uma cheia. Em nenhum dos quatro sobra celula vazia.

     Nao e `auto-fit` de proposito: com `minmax` a quantidade de colunas passa
     a depender da largura, e existe faixa de tela em que ela da TRES — e ai
     quatro areas viram 3 + 1, que e exatamente o buraco que se quer evitar. */
  .areas-quadro { grid-template-columns: 1fr 1fr; }
  .area-quadro:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grafico { height: 150px; }
}

/* UMA COLUNA, tambem no desktop — o grid de duas colunas saiu em 12/08.
   Ele era a fonte dos buracos que o dono vinha apontando, e a mecanica e
   simples: duas colunas com um numero IMPAR de cartoes deixam meia linha vazia,
   e a quantidade de cartoes aqui e variavel (o "Ja esta de pe" so aparece se
   houver area boa; a "Sua evolucao" so a partir da segunda prova; o "Por area"
   so com nota). Nao ha arranjo de duas colunas que feche em todos esses casos.
   E mesmo quando a conta fechava, dois cartoes de alturas diferentes na mesma
   linha terminam em degrau.

   Com uma coluna, todo bloco da tela tem a MESMA largura e as MESMAS margens
   dos dois lados — que e o criterio que o dono deu: "tudo simetrico e bem
   distribuido". A densidade que se perde no desktop volta por dentro dos
   blocos, que agora usam a largura inteira em vez de boiar nela.

   `.painel-largo` continua existindo e continua sendo verdade: numa grade de
   uma coluna, ocupar 1/-1 e ocupar a coluna. Se um dia voltarem as duas
   colunas, os cartoes que pedem a linha inteira ja estao marcados. */
.paineis { grid-template-columns: minmax(0, 1fr); align-items: start; }
.painel-largo { grid-column: 1 / -1; }

/* "H23" nao diz nada a um aluno. O texto da Matriz de Referencia e o que se le;
   o codigo fica no marcador, pequeno, para quem procura por ele.
   44px de largura, a mesma da medalha do bloco por area: os dois marcadores
   terminam na mesma linha vertical e o conteudo dos dois blocos pendura da
   mesma segunda margem. */
.atencao-codigo {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 44px;
  height: 24px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grafite);       /* 6,52:1 no cartao branco */
  border: 1px solid var(--linha);
  border-radius: 6px;
}

/* ==========================================================================
   AREA DO ALUNO — a casca de aplicativo

   Segunda forma desta area. A primeira (07/08, do layout `layout/Área do
   Aluno.dc.html`) resolveu o que precisava: deixou de ser UMA pagina rolante e
   virou lugar com endereco — painel, provas, desempenho, conta. O que ficou
   pesado foi o TOM: barra lateral azul-ardosia escura, banner escuro em cima
   de cada tela, dois blocos de tinta antes de qualquer dado.

   O dono mandou outro modelo (um painel chamado Veltrix) e o pedido foi
   direto: *"mais moderno e LIMPO... fica algo mais clean, gostei ate da cor"*.
   O que caracteriza aquele desenho, e o que foi trazido:

     1. A CASCA. O aplicativo inteiro e um retangulo branco de canto largo
        pousado sobre uma mesa cinza, e a barra lateral e um painel arredondado
        DENTRO dele. E isso — e nao a cor — que faz a tela parecer atual.
     2. A BARRA VERDE-AGUA no lugar da escura.
     3. CARTOES DE NUMERO PINTADOS em tom pastel, com a medalha do icone
        escura e redonda.
     4. O BANNER SEM CAIXA: o titulo da tela e texto sobre a propria superficie,
        como o "Good to see you again, Jack!" do modelo. Dois blocos escuros
        empilhados eram metade do peso que ele chamou de nao-limpo.

   O QUE NAO FOI COPIADO, e por que:

   - **O cartao "Upgrade Pro"** do pe da barra: e anuncio de outro produto.
   - **Item de menu que nao leva a lugar nenhum**, como ja valia antes.

   ATENCAO — OS ITENS 2 E 3 ACIMA ESTAO VENCIDOS desde 14/08. A barra deixou de
   ser verde-agua e virou BRANCA, e os cartoes de numero perderam o pastel: ver
   o bloco "TEMA PAINEL CLARO" no topo desta folha. O resto do texto continua
   valendo, e por isso ele nao foi apagado — o item 4 (banner sem caixa) e a
   razao de o banner ser como e ate hoje.
   ========================================================================== */

.corpo-area {
  background: var(--mesa);
  display: block;          /* a base.html publica usa flex-column; aqui nao */
  min-height: 100vh;
}

/* O primeiro alvo do Tab. Sem ele, quem navega por teclado percorre a barra
   lateral inteira em CADA tela antes de chegar ao conteudo. Fica fora da tela
   ate receber foco — nao e `display:none`, que o tiraria tambem do teclado. */
.pular {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 50;
  background: var(--tinta);
  color: var(--papel);
  padding: 10px 16px;
  border-radius: var(--raio);
  font-size: 14px;
}
.pular:focus { left: 8px; }

/* A casca: o aplicativo inteiro num retangulo branco de canto largo pousado
   sobre a mesa cinza. No celular a margem e de 8px — custa 16 dos 375, e e o
   que faz a mesa aparecer em volta; sem ela nao ha casca, so uma pagina
   branca. No desktop ela cresce (ver a media query no fim deste bloco). */
/* No layout de 10/08 a casca branca sumiu: quem flutua e a BARRA, e o
   conteudo fica direto sobre o fundo, com os cartoes brancos por cima. Uma
   camada a menos de superficie — e era ela que empurrava tudo para dentro. */
.area {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- barra lateral ---------- */
/* BRANCA, e nao mais um bloco verde pintado. E a mudanca que mais pesa no
   pedido do dono ("está ficando muito arcaico"): barra colorida de ponta a
   ponta e o registro de painel administrativo de uma decada atras, e ela
   punha um bloco de tinta na tela antes de qualquer dado.

   Com a barra branca o azul passa a aparecer SO onde ha decisao — o item em
   que a pessoa esta, e o item sob o dedo. O menu inteiro fica quieto e o
   trabalho e o que tem cor.

   Medido contra o branco da barra:
     item de menu      --barra-texto #2A3547   12,36:1
     rotulo de grupo   --barra-fraco #5A6A85    5,48:1
     item aceso        #4869C6 sobre #ECF1FF    4,52:1

   A barra e separada do conteudo por um fio de 1px, e nao por cor. Como as
   duas superficies sao claras, sem o fio a navegacao encostaria no trabalho
   sem limite nenhum. */
.barra-lado {
  background: var(--barra);
  color: var(--barra-texto);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--linha);
}
.barra-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}
/* O LOGOTIPO na barra (17/08/2026). Entra INTEIRO: eu tentei recortar o emblema
   e escrever o nome ao lado, e o dono reprovou — o pedido dele era de tamanho,
   nao de desenho novo. Os 34px de antes eram o que ele chamou de "chocho"; 44
   e a altura em que a palavra DECOLE SIMULANDO ainda se le.

   A ALTURA MANDA e a largura acompanha, para o arquivo poder mudar de proporcao
   sem mexer na barra. O `max-width` e o freio: numa barra estreita o logo
   encolhe junto em vez de vazar. */
.barra-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}

/* O PE DA BARRA: quem esta logado e a saida.
   ---------------------------------------------------------------------------
   REFEITO EM 15/08/2026, no molde do TailwindAdmin. O dono mandou o print do
   bloco dele e o pedido foi curto: *"TROCAR O BOTAO DE SAIR PELO BOTAO QUE
   ESTA NESSE SITE TBM.. DE AMBOS OS LUGARES, ADMIN E ALUNOS"*.

   O bloco de la, medido no navegador: retangulo de 205x72 com 16px de
   preenchimento e raio de 6px sobre um azul palido; dentro, retrato redondo de
   40px, nome em 16/600, papel em 12px apagado, e na ponta direita o simbolo de
   ENERGIA no tom da marca. O "sair" escrito por extenso saiu.

   TRES COISAS QUE MUDARAM DE PROPOSITO EM RELACAO AO MODELO:

   1. **O retrato e as INICIAIS, nao uma foto.** O modelo carrega
      `/images/profile/user-1.jpg`. Nao temos foto de aluno, e buscar uma de
      terceiro (Gravatar e afins) seria um pedido a servidor externo em toda
      tela, com o e-mail do aluno como chave — exatamente o que 4.20 e 4.36
      proibem. Inicial em circulo cheio e figura, e sai do proprio dado.

   2. **O circulo e `--marca`, e nao `--marca-pintura`.** Medido: branco sobre
      #5D87FF da 3,29:1 e REPROVA para texto; sobre #4869C6 da 4,90:1. E a
      regra dos dois tons de novo — inicial e palavra, e palavra pede o tom que
      ESCREVE. O mesmo vale para o simbolo de energia: 4,52:1 em `--marca`
      contra o chip, e 2,92:1 em `--marca-pintura`, abaixo do piso de 3:1 da
      WCAG 1.4.11 para objeto grafico.

   3. **O icone sozinho leva `aria-label` E `title`.** Aqui NAO vale a decisao
      do "Mostrar/Ocultar" por extenso dos campos de senha: aquele caso era o
      olho riscado, que e ambiguo (olho aberto significa "esta visivel" ou
      "clique para ver"?). O simbolo de energia e o IEC 5009, o mesmo de todo
      aparelho que se desliga, e nao tem segunda leitura. O `title` da o
      recado no cursor e o `aria-label` da no leitor de tela.

   O alvo continua com 44px (4.20): o icone tem 22px e quem paga a diferenca e
   o preenchimento, nao o desenho. */
.barra-pessoa {
  margin-top: auto;
  position: relative;
  border-radius: var(--raio);
  /* O ANEL VIVE DENTRO DO BLOCO, e nao um fio para fora dele.
     A primeira versao punha o `::before` em `inset: -1.5px`, transbordando o
     proprio bloco — e a barra lateral tem `overflow: auto`, entao a luz seria
     RASPADA nos dois lados. Com o preenchimento de 1,5px o anel e a moldura, e
     nada sai da caixa. O fundo cinza e o que se ve nos 78% apagados da volta:
     sem ele o bloco fica sem contorno enquanto a luz nao passa. */
  padding: 1.5px;
  background: var(--linha);
  /* Item de flex nao encolhe abaixo do proprio conteudo sem isto, e o bloco
     ficava 7px mais largo que a barra que o contem — media 275px numa coluna
     de 268px, e a barra inteira passava a rolar de lado. */
  min-width: 0;
}
.barra-pessoa-interno {
  /* `relative` sem `z-index` NAO cria contexto de empilhamento, entao ele
     pinta por cima do `::before` de z-index negativo que desenha a luz. */
  position: relative;
  background: var(--marca-clara);
  border-radius: calc(var(--raio) - 1.5px);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.barra-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;           /* circulo cheio, como o retrato do modelo */
  background: var(--marca);
  color: var(--papel);          /* 4,90:1 — ver a nota 2 acima */
  display: grid;
  place-items: center;
  font-family: var(--controle);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.barra-pessoa-dizeres { min-width: 0; flex: 1; }
.barra-pessoa-nome {
  display: block;
  font-size: 16px;              /* `text-base font-semibold` do modelo */
  font-weight: 600;
  color: var(--tinta);          /* 10,95:1 sobre o chip azul */
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-pessoa-sub {
  display: block;
  font-size: 12px;              /* `text-xs` do modelo */
  color: var(--grafite);        /* 4,85:1 sobre o chip azul */
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-sair {
  color: var(--marca);          /* 4,52:1 sobre o chip */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  text-decoration: none;
  transition: background var(--salto), color var(--salto);
}
.barra-sair svg { width: 22px; height: 22px; display: block; }
.barra-sair:hover { background: var(--papel); color: var(--marca-escura); }
.barra-sair:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* AQUI MOROU A LUZ CORRENDO ("Bordered Card Motion"), e ela foi RETIRADA em
   15/08/2026 a pedido do dono: *"pode deixar de fora essa parte da luz nos
   nomes"*.

   Ela existiu por poucas horas: ele a pediu tres vezes (12/08, 14/08 e 15/08),
   viu funcionando e decidiu que nao queria. Registro o que ela era para que
   ninguem a reimplemente achando que e novidade — e para guardar o que se
   aprendeu fazendo:

   - A tecnica era um `::before` com `conic-gradient` girando por uma
     propriedade registrada (`@property --ds-giro`), sem imagem nem
     biblioteca.
   - Ela era FINITA de proposito (tres voltas, 4,5s): a WCAG 2.2.2 pede um
     jeito de pausar movimento perpetuo que divide a tela com outro conteudo, e
     um botao de pausa ao lado do botao de sair seria um convite ao clique
     errado. Esse orcamento de 4,5s continua valendo para a batida do
     CADASTRAR.

   O que FICOU do bloco: o preenchimento de 1,5px com fundo `--linha`, que
   desenha a moldura. Ele era o "trilho" por onde a luz corria e agora e so um
   contorno — e sem ele o bloco perde o limite contra a barra branca. */

/* No celular a barra vira duas linhas: marca e saida em cima, fita de
   navegacao embaixo. O layout entregue simplesmente ESCONDE o bloco do
   usuario no celular — o que no admin passa (operador trabalha no
   computador), mas aqui deixaria o aluno sem como sair justamente no
   aparelho que ele mais usa. Aqui ele encolhe para avatar + "sair" e sobe
   para a primeira linha, sem custar altura. */
.barra-lado {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.barra-marca { grid-column: 1; grid-row: 1; }
.barra-pessoa { grid-column: 2; grid-row: 1; margin-top: 0; }
.barra-pessoa-interno { padding: 5px 5px 5px 5px; gap: 6px; }
.barra-pessoa-dizeres { display: none; }
.barra-nav { grid-column: 1 / -1; grid-row: 2; }

.barra-nav { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
/* No celular a navegacao e uma fita, sem os titulos de grupo: eles ocupariam
   metade da fita. Some da TELA, nao da arvore de acessibilidade —
   `aria-labelledby` continua alcancando elemento oculto por CSS, entao cada
   lista mantem o nome ("Simulado", "Resultados", "Conta") no leitor de tela. */
.barra-grupo {
  display: none;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barra-fraco);
  margin: 0;
}
.barra-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
/* O ITEM DE MENU, E O SALTO.
   Este e o efeito que o dono apontou: *"você passar na mão, ele dá um salto
   assim, como se fosse um relevo"*. No template sao tres coisas ao mesmo
   tempo, e as tres estao aqui:

     1. o fundo acende no azul a 12%
     2. o item ANDA 3px para a direita (`translateX`)
     3. a sombra abre embaixo dele, como se subisse da superficie

   O tempo e a curva sao os mesmos de todo componente que sobe
   (`--salto`, 0,25s), para nao haver duas velocidades de relevo na tela.

   `@media (hover: hover)` existe porque no celular nao ha hover: o dedo
   dispara o estado e ele fica PRESO no item depois do toque, como se aquele
   fosse o item atual. Num aparelho de toque o salto simplesmente nao existe;
   o que marca onde a pessoa esta e o `aria-current`.

   `prefers-reduced-motion` desliga o movimento e mantem a cor: quem pediu
   menos animacao continua vendo qual item esta sob o cursor. */
.barra-elo {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-family: var(--controle);
  font-size: 14px;
  font-weight: 500;
  color: var(--barra-texto);
  text-decoration: none;
  min-height: 44px;        /* alvo de toque (4.20) */
  transition: background var(--salto), color var(--salto),
              transform var(--salto), box-shadow var(--salto);
}
@media (hover: hover) {
  .barra-elo:hover {
    background: var(--barra-aceso);
    color: var(--barra-aceso-texto);
    transform: translateX(3px);
    box-shadow: var(--sombra);
  }
}
/* O foco de teclado NAO usa o salto: quem navega por Tab precisa de um limite
   visivel, e nao de um deslocamento. Anel de 2px, que mede 4,52:1 contra o
   branco da barra — acima do piso de 3:1 da WCAG 1.4.11. */
.barra-elo:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}
/* Onde a pessoa esta. `aria-current` e o mesmo seletor do estado visual: assim
   a marcacao para o leitor de tela nao pode divergir da que esta na tela.
   Fundo azul a 12% com o texto no tom que ESCREVE — 4,52:1. Nao e o azul
   cheio: bloco pintado no menu volta a ser o bloco de tinta que a barra
   branca acabou de tirar da tela. O que distingue o item atual do item sob o
   dedo e o peso da letra e o filete da esquerda, nao a cor. */
.barra-elo[aria-current] {
  background: var(--barra-aceso);
  color: var(--barra-aceso-texto);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--marca-pintura);
}
/* Icone desenhado, do layout entregue: SVG em linha, tracado em
   `currentColor` para acompanhar a cor do item. Nao e biblioteca de icone —
   sao seis desenhos de vinte linhas cada, dentro do proprio HTML. */
.barra-icone {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: block;
}
.barra-icone svg { width: 19px; height: 19px; display: block; }

/* Quantas questoes vencem HOJE no caderno de erros. Encostada a direita do
   item, e nao colada no texto: o nome do link nao pode mudar de largura
   conforme o numero.

   Vermelho de aviso com texto branco (--erro e #C33737, que mede 4,59:1 no
   branco; o inverso, branco sobre ele, mede o mesmo). Ela e `aria-hidden` no
   template e o numero e dito por extenso ao lado, em `.sr-apenas` — quem usa
   leitor de tela ouve "Caderno de erros, 12 para revisar hoje", e nao um "12"
   solto no fim do link. */
.barra-pastilha {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 11px;
  background: var(--erro);
  color: #FFFFFF;
  font-family: var(--controle);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .barra-elo, .barra-sair { transition: none; }
  .barra-elo:hover { transform: none; }
}

/* ---------- coluna de trabalho ---------- */
/* TETO DE LARGURA, e a coluna centrada no espaco que sobra.
   O defeito que isto conserta foi apontado pelo dono em 12/08 olhando o
   monitor dele, de 1707px: *"estes baloes estao muito esticados"*. Medido
   antes de mexer, com o painel cheio:

     .area-corpo 1414px · faixa dos tres numeros 1354px · cada coluna 451px
     conteudo real da 1a coluna: medalha 44 + vao 15 + texto 111 = 170px
     -> 241px de vazio entre o texto e o fio divisorio, dentro da MESMA coluna

   A causa nao era a faixa: era esta coluna nao ter teto. Sem teto, cada bloco
   herda a largura do monitor e o conteudo boia dentro dele — em tela larga
   vira buraco, e nenhum ajuste feito no bloco resolve, porque o problema mora
   um nivel acima.

   1080px e a MESMA medida do `.palco` das telas publicas. Nao e numero novo:
   e a largura de coluna que o produto ja usa na home, no login e no cadastro,
   entao a area do aluno passa a ler como a mesma casa em vez de uma tela de
   largura propria. Com os 30px de recuo de cada lado sobram 1020px de
   conteudo, e a faixa cai para tres colunas de 340px — 33px de folga por
   coluna em vez de 241.

   `margin-inline: auto` e o que atende ao pedido de simetria: em 1707px
   sobram 167px de margem de CADA lado, iguais. Abaixo de ~1370px o teto nao
   toca em nada e a coluna preenche, como sempre fez; no celular, idem. */
.area-corpo {
  flex: 1;
  min-width: 0;
  max-width: 1080px;
  margin-inline: auto;
  padding: 18px 16px 40px;
}
.area-rodape {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: 12.5px;
  color: var(--grafite);
}

/* ---------- o banner de cada tela ---------- */
/* Diz em que tela voce esta e qual e a acao dela. Sem isto, uma area com
   varias telas obriga a pessoa a deduzir onde chegou pelo conteudo.

   Era uma CAIXA escura. Agora e texto sobre a propria superficie, como o
   "Good to see you again, Jack!" do modelo: barra escura + banner escuro eram
   dois blocos de tinta antes de qualquer dado, e juntos respondiam por metade
   do peso que o dono chamou de nao-limpo. O banner continua inteiro — o que
   saiu foi a caixa dele. */
.banner {
  padding: 2px 2px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.banner-dizeres { flex: 1 1 300px; min-width: min(300px, 100%); }
.banner-olho {
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marca);   /* 4,83:1 no branco — o tom que ESCREVE */
  margin: 0 0 7px;
}
.banner h1 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--tinta);
}
.banner-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grafite);
  max-width: 46ch;
}
/* No celular a acao ocupa a linha inteira. Com `flex: 0 0 auto` ela media o
   proprio conteudo e nao encolhia: o botao "Retomar na questao 1" saia pela
   direita do banner em 375px. */
.banner-acao { flex: 1 1 100%; min-width: 0; }
/* O alvo da acao na LISTA de provas (provas.html). No painel ele foi
   substituido pelo bloco `.proxima`, mais abaixo. */
.banner-alvo {
  font-size: 12.5px;
  color: var(--grafite);
  margin: 0 0 10px;
}
.banner-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* A pilula do tempo restante. Era branco translucido sobre o banner escuro;
   sem o banner escuro ela precisou de fundo proprio. O ponto colorido nao
   carrega recado sozinho: o numero e a palavra "restantes" estao escritos ao
   lado (WCAG 1.4.1). */
.banner-tempo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--marca-clara);
  border: 1px solid var(--marca-pintura);   /* 3,29:1 no branco — limite de componente */
  color: var(--marca-escura);   /* 8,05:1 sobre --marca-clara */
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.banner-pisca {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--caderno-rosa);
  flex: 0 0 7px;
}

/* ---------- a proxima acao, no painel -------------------------------------
   17/08/2026. O bloco anterior era texto solto sobre o chao com um botao
   `.botao.claro` — branco #FFFFFF sobre o chao #F6F9FC, medido em 1,06:1. A
   WCAG 1.4.11 pede 3:1 para o LIMITE de um controle, e ali nao havia limite
   nenhum: so a palavra flutuando. Palavras do dono: "o botao esta quase
   invisivel por conta do fundo".

   A classe `.claro` nasceu certa, para um `.banner` PINTADO de escuro. O banner
   deixou de ser pintado em 14/08 e a classe ficou — a mesma familia de defeito
   da folha da prova, que continuou verde quando o tema virou azul.

   Agora e CARTAO, o mesmo `.painel-cartao` do resto da tela, com o botao cheio
   da casa. E ele diz de uma vez as quatro coisas que faltavam: QUAL prova (o
   titulo), QUAL dia (selo + etiqueta), QUANTO dura e ATE QUANDO a janela vai
   (os dois fatos), e o que mais esta aberto (o pe).

   De brinde, o cartao conserta um contraste que raspava: `--linha-forte`
   #949494 mede 2,87:1 sobre o chao e 3,03:1 sobre o cartao branco.
   -------------------------------------------------------------------------- */
.proxima {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 16px;
  align-items: start;
}
.proxima-selo   { grid-column: 1; grid-row: 1; }
.proxima-quem   { grid-column: 2; grid-row: 1; min-width: 0; }
.proxima-fatos  { grid-column: 1 / -1; }
.proxima-acao   { grid-column: 1 / -1; }
.proxima-tambem { grid-column: 1 / -1; }

/* O SELO, cheio na cor do caderno daquele dia. Branco medido nos dois:
   5,11 no azul do dia 1 e 5,36 no violeta do dia 2. */
.proxima-selo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  background: var(--cor-do-caderno);
  color: var(--papel);
  line-height: 1;
}
.proxima-selo.dia-1 { --cor-do-caderno: var(--caderno-azul); }     /* #4869C6 */
.proxima-selo.dia-2 { --cor-do-caderno: var(--caderno-amarelo); }  /* #7C4DD9 */
.proxima-selo-rotulo {
  font-family: var(--controle);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.proxima-selo-numero {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}

.proxima-olho {
  margin: 0 0 5px;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marca);          /* 5,11:1 no cartao — o tom que ESCREVE */
}

/* O NOME DO SIMULADO E O TITULO, e nao uma legenda: e ele que responde "de
   qual prova e este botao". Era um cinza de 15px acima do botao, e o dono leu
   o botao sem ver de que prova ele falava. */
.proxima-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--tinta);          /* 12,36:1 */
  overflow-wrap: anywhere;      /* nome longo quebra, nao vaza a lateral */
}
/* O DIA vira etiqueta. Ele e o que distingue duas provas de nome parecido, e
   era o elemento mais apagado do bloco antigo. */
.proxima-dia {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 4px;
  padding: 2px 9px;
  border-radius: 7px;
  background: var(--marca-clara);
  color: var(--marca-escura);   /* 8,05:1 sobre o chip */
  font-family: var(--controle);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* OS FATOS. Filete no lugar de caixa: caixa dentro de cartao vira cartao
   dentro de cartao. */
.proxima-fatos {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.proxima-fato {
  padding-left: 12px;
  border-left: 2px solid var(--marca-pintura);   /* 3,29:1 — objeto grafico */
  min-width: 0;
}
.proxima-fato-rotulo {
  display: block;
  font-family: var(--controle);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite);        /* 5,48:1 */
}
.proxima-fato-valor {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);          /* 12,36:1 */
}

/* O BOTAO CHEIO: #4869C6 com letra branca (5,11:1) e o proprio preenchimento
   como contorno (5,11:1 contra o cartao). No celular ocupa a linha inteira. */
.proxima-acao .botao { display: block; width: 100%; }
.proxima-nota {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--grafite);        /* 5,48:1 */
}

/* O PE: o que mais esta aberto. Deixou de ser link de 20px de altura e virou
   alvo de dedo com contorno proprio. */
.proxima-tambem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.proxima-tambem-rotulo {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--grafite);        /* 5,48:1 */
}
.proxima-outra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;             /* alvo de toque */
  padding: 8px 14px;
  border: 1px solid var(--linha-forte);   /* 3,03:1 sobre o cartao */
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--marca);          /* 5,11:1 */
  font-family: var(--controle);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background var(--salto), border-color var(--salto), color var(--salto);
}
.proxima-outra-dia { color: var(--grafite); font-weight: 700; white-space: nowrap; }
@media (hover: hover) {
  .proxima-outra:hover {
    background: var(--marca-clara);
    border-color: var(--marca);
    color: var(--marca-escura);   /* 8,05:1 sobre o chip */
  }
}
.proxima-outra:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ---------- o caso urgente: cronometro correndo ---------- */
/* Filete de 4px por DENTRO do cartao (`inset`): sem elemento extra e sem
   deslocar uma linha de texto. #EF4444 sobre o cartao mede 3,76:1. */
.proxima.urgente {
  box-shadow: inset 4px 0 0 var(--erro-pintura), var(--sombra-cartao);
}
.proxima-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--erro-fundo);
  color: var(--erro);           /* 4,59:1 sobre o chip */
  font-family: var(--controle);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* A pulsacao e FINITA — 4 ciclos, 4,4s — pelo mesmo orcamento da batida do
   CADASTRAR: movimento que comeca sozinho e passa de 5s ao lado de outro
   conteudo pediria um botao de pausa (WCAG 2.2.2). */
.proxima-pisca {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--erro-pintura);
}
.ds-anima .proxima-pisca { animation: proxima-pulso 1.1s ease-in-out 4; }
@keyframes proxima-pulso {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.45; }
}
.proxima-tambem-quieto {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grafite);        /* 5,48:1 */
}

@media (prefers-reduced-motion: reduce) {
  .ds-anima .proxima-pisca { animation: none; }
  .proxima-outra { transition: none; }
}

/* A partir de 720px o botao sobe para a direita, na altura do titulo, e os
   fatos ficam sob o nome. Abaixo disso tudo empilha. */
@media (min-width: 720px) {
  .proxima {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    column-gap: 20px;
  }
  .proxima-selo  { grid-row: 1 / span 2; }
  .proxima-quem  { grid-column: 2; grid-row: 1; }
  .proxima-fatos { grid-column: 2; grid-row: 2; }
  .proxima-acao  { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; }
  .proxima-acao .botao { display: inline-block; width: auto; }
  .proxima-titulo { font-size: 20px; }
}

/* ---------- cartoes de numero ---------- */
/* Os tres cartoes pintados do modelo Veltrix: menta, azul e areia, cada um com
   a medalha do icone escura e redonda. Antes eram brancos com um filete de cor
   na borda esquerda e uma divisoria vertical fina — desenho correto, mas
   apagado: tres retangulos brancos numa tela branca.

   O cartao inteiro pintado tambem resolve o que o filete nao resolvia: com uma
   cor por cartao, o olho separa os tres numeros antes de ler qualquer rotulo.

   A COR NAO CARREGA RECADO NENHUM (WCAG 1.4.1). Cada cartao diz por escrito o
   que e; o pastel so agrupa. E os pasteis sao FUNDO — o texto em cima deles usa
   --tinta e --grafite (6,52:1 no branco). */
/* UM cartao branco dividido por fios, e nao tres cartoes soltos com vao
   entre eles. Foi o que o dono apontou olhando lado a lado: *"os nossos
   estao espacados... no visual do design ele mistura os baloes mais juntos
   e isso da uma leveza"*. Menos bordas de cartao na tela, e os tres numeros
   passam a se ler como um conjunto — que e o que eles sao. */
.cartoes-numero {
  display: grid;
  gap: 0;
  margin-bottom: 24px;
  background: var(--papel);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cartao-numero {
  background: transparent;
  border: 0;
  border-radius: 0;
  /* O fio que separa um numero do outro nasce da borda do proprio bloco, e
     nao de um elemento vazio so para desenhar risco. No celular eles empilham
     e o fio vai EMBAIXO; no desktop viram colunas e ele vai na DIREITA — fio
     embaixo nao divide coisa nenhuma quando os blocos estao lado a lado. */
  border-bottom: 1px solid var(--linha);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 15px;
}
.cartao-numero:last-child { border-bottom: 0; }
a.cartao-numero:hover { background: var(--fundo); }
/* Os pasteis sairam com o layout de 10/08: agora os tres cartoes sao brancos,
   e quem separa um do outro e o ESPACO e o rotulo — nao a cor. Menos tinta na
   tela, e some junto a necessidade de um cinza especial que passasse em tres
   fundos diferentes. */
.cartao-numero.tom-marca,
.cartao-numero.tom-info,
.cartao-numero.tom-sucesso,
.cartao-numero.tom-aviso { background: var(--papel); }

/* O quadrado do icone. Esta e a forma BASE, e ela e usada tambem pelas telas
   de acesso (cadastro, login), que seguem o print dos cartoes do site do dono:
   quadrado verde-agua palido. Nao mexa aqui pensando so na area do aluno — a
   variante escura desta area esta na regra seguinte. */
.cartao-icone {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--marca-clara);
  color: var(--marca-escura);   /* 6,49:1 */
}
/* A MEDALHA DO CARTAO DE NUMERO — refeita em 15/08/2026.
   ---------------------------------------------------------------------------
   Era um CIRCULO PRETO (`--tinta`) com um glifo de dingbat dentro. O dono
   reprovou os tres de uma vez: *"nao tem nada a ver com o layout"*. Ele tinha
   razao por dois motivos, e o segundo e o que importa:

   1. Preto nao existe na paleta nova. O tema inteiro e azul com medalha
      PINTADA — a `.ds-indicador-medalha` do design system ja era assim, e os
      cartoes do painel eram o unico lugar que continuava no desenho velho.
   2. O conteudo era um CARACTERE (`◔ ⚑ ▤ ◷`), que muda de desenho conforme a
      fonte do aparelho e no celular pode virar quadrado vazio. Agora e
      `<path>`, e os desenhos moram em `componentes/ds.html`.

   O QUADRADO ARREDONDADO, e nao o circulo: e a forma da medalha do tema, a
   mesma da `.ds-indicador-medalha`. Circulo ficou sendo do retrato de pessoa,
   no pe da barra — duas formas, dois significados.

   A COR SO AGRUPA (WCAG 1.4.1): o rotulo ao lado diz por escrito o que o
   numero e. Cada par foi medido contra o piso de 3:1 da WCAG 1.4.11 para
   objeto grafico, e o branco REPROVA em dois dos tons — por isso sucesso e
   aviso levam desenho escuro. */
.cartao-numero .cartao-icone {
  border-radius: 12px;
  background: var(--marca-pintura);
  color: var(--papel);              /* 3,29:1 */
}
.cartao-numero .cartao-icone svg { width: 22px; height: 22px; display: block; }
.cartao-numero.tom-info .cartao-icone    { background: var(--info-pintura);   color: var(--papel); }  /* 4,66 */
.cartao-numero.tom-sucesso .cartao-icone { background: var(--acerto-pintura); color: #064136; }       /* 6,70 */
.cartao-numero.tom-aviso .cartao-icone   { background: var(--aviso-pintura);  color: #4A3606; }       /* 6,34 */

.cartao-dizeres {
  flex: 1;
  min-width: 0;
}
.cartao-rotulo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grafite);
  margin: 0;
}
.cartao-valor {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin: 3px 0 0;
  color: var(--tinta);
}
.cartao-valor .unidade { font-size: 18px; letter-spacing: 0; color: var(--grafite); }
.cartao-detalhe {
  display: block;
  font-size: 11.5px;
  color: var(--grafite);
  margin: 4px 0 0;
  line-height: 1.4;
}
/* O selo (variacao, percentil) vira uma linha do proprio cartao em vez de
   flutuar no canto: no formato deitado nao ha canto sobrando. */
.cartao-selo {
  display: inline-block;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  /* Branco, e nao o cinza de antes: sobre um cartao pastel o cinza claro some.
     Branco e o unico tom que se destaca dos tres pasteis igualmente. */
  background: var(--papel);
  color: var(--grafite);
  white-space: nowrap;
  margin-top: 6px;
}
.cartao-selo.sobe { background: var(--acerto-fundo); color: var(--acerto); }
.cartao-selo.desce { background: var(--erro-fundo); color: var(--erro); }

/* A sigla da area vive no bloco "por area", junto do resto do desenho dele —
   ver o bloco POR AREA acima. Ate 12/08 ela era uma pastilha palida de 11px
   com um tom de texto proprio por area, e cada um deles teve de ser medido
   contra o proprio fundo palido (o `CH` chegou a reprovar com 4,39:1). A
   medalha cheia com texto branco acabou com essa familia inteira de pares
   delicados: sao as MESMAS quatro cores de area que a plataforma ja usa, e
   branco em cima das quatro passa com folga (5,02 a 10,30).
*/

/* ---------- fila de provas: um cartao por acao ----------------------------
   Segunda forma. A primeira era um cartao por SIMULADO com os dias como
   faixas finas dentro (`.cartao-prova` + `.faixa-dia`). O dono viu no celular:
   *"esta pessimo... muita escrita, informacao solta na tela"*, e a medicao
   confirmou: 220 palavras em 2,7 telas, metade repeticao — a descricao do
   simulado impressa em cada cartao, e "Voce escolhe quando fazer, entre X e Y"
   quatro vezes na mesma rolagem.

   O erro era de ESTRUTURA. Ninguem faz "um simulado", faz UM DIA de prova. O
   simulado so agrupava, e cada agrupamento cobrava titulo, paragrafo e frase
   de janela antes de chegar ao botao. Agora cada cartao e uma acao, no formato
   dos cartoes do site do dono: selo quadrado a esquerda, titulo, uma linha de
   apoio — e um pe com o estado de um lado e o botao do outro.

   O selo leva o NUMERO DO DIA no lugar onde a referencia poe um icone: mesmo
   desenho, carregando informacao em vez de enfeite.
   -------------------------------------------------------------------------- */
.fila-provas { display: grid; gap: 14px; }

/* O cartao de prova e CLICAVEL, entao ele ganha o salto — o mesmo relevo do
   item de menu, pelo mesmo motivo: e um bloco que responde ao dedo, e o
   template usa o levantamento para dizer isso sem escrever nada. Sobe 3px e
   a sombra abre junto.

   `@media (hover: hover)` pela mesma razao da barra: no celular o estado
   ficaria preso depois do toque. */
.cartao-dia {
  background: var(--papel);
  border: 0;
  border-radius: var(--raio-cartao);
  padding: 18px;
  box-shadow: var(--sombra-cartao);
  transition: transform var(--salto), box-shadow var(--salto);
}
@media (hover: hover) {
  .cartao-dia:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cartao-dia { transition: none; }
  .cartao-dia:hover { transform: none; }
}
.cartao-dia-topo { display: flex; align-items: flex-start; gap: 14px; }

/* O selo. Cada dia tem a cor do seu caderno, que vem das capas do exame — mas
   a cor nao diz nada sozinha: o numero esta dentro dele e "Dia N" esta escrito
   por extenso ao lado (WCAG 1.4.1). */
.selo-dia {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  background: var(--marca-clara);
  color: var(--marca-escura);       /* 5,84:1 */
}
.dia-1 .selo-dia { background: var(--marca-clara); color: var(--caderno-azul); }  /* 11,0:1 */
.dia-2 .selo-dia { background: var(--marca-clara); color: var(--marca-escura); }
/* Prova que ja passou perde a cor do caderno: ela e para o que ainda da para
   fazer. O texto do estado continua dizendo o que aconteceu. */
.situacao-concluida .selo-dia,
.situacao-fechada .selo-dia { background: var(--trilho); color: var(--grafite); }   /* 4,95:1 */

.cartao-dia-quem { flex: 1; min-width: 0; }
.cartao-dia-titulo {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--tinta);
}
.cartao-dia-apoio { font-size: 13.5px; color: var(--grafite); margin: 3px 0 0; line-height: 1.45; }
.cartao-dia-tempo { font-variant-numeric: tabular-nums; font-weight: 600; }
/* De qual edicao este dia e. Fica pequeno e embaixo de proposito: o aluno tem
   uma edicao aberta por vez, e o titulo dela nao e o que ele procura aqui. */
.cartao-dia-edicao {
  font-size: 11.5px;
  color: var(--grafite-claro);
  margin: 7px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- o pe: estado de um lado, acao do outro ---------- */
/* No celular empilha, com o botao ocupando a linha inteira — que e o alvo de
   dedo que esta tela existe para oferecer. */
.cartao-dia-pe {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.cartao-dia-pe .botao { text-align: center; }

.pastilha-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: var(--controle);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--trilho);
  color: var(--grafite);          /* 4,92:1 */
}
.pastilha-estado.agora  { background: var(--aviso-fundo); color: var(--aviso); }   /* 4,59:1 */
.pastilha-estado.pronta { background: var(--acerto-fundo); color: var(--acerto); }   /* 4,62:1 */
.pastilha-estado.espera { background: var(--aviso-fundo); color: var(--aviso); }
/* O ponto so acompanha a palavra "Em andamento", que esta escrita ao lado. */
.pastilha-estado .pastilha-pisca {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--caderno-rosa);
}

/* A nota, no pe do cartao concluido: o numero grande e a unidade embaixo. */
.cartao-dia-nota {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.cartao-dia-unidade {
  display: block;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grafite-claro);
  margin-top: 4px;
}
/* Simulado ainda nao liberado: UM cartao, e nao dois dias trancados. Nao ha
   duas decisoes a tomar, ha uma. */
.cartao-dia.trancado { border: 1px solid var(--linha); background: var(--mesa); }
.trancado .selo-dia { background: var(--aviso-fundo); color: var(--aviso); font-size: 22px; }

/* ---------- a partir do desktop: a casca pousa e a barra vira coluna ------- */
@media (min-width: 860px) {
  /* A CASCA. Retangulo branco de canto largo sobre a mesa cinza, com a barra
     lateral como painel arredondado DENTRO dele — e este encaixe, mais do que
     a cor, o que faz o modelo parecer atual.
     Sem `overflow: hidden` na casca, por mais tentador que seja para cortar os
     cantos: ele quebraria o `position: sticky` da barra. Cada peca leva o
     proprio raio. */
  .area { flex-direction: row; }
  /* No desktop a barra volta a ser coluna, e o bloco do usuario desce para o
     rodape com o nome de volta. */
  /* `align-items: stretch` DESFAZ o `center` que a regra do celular deixa
     ligada. Ali ele e do GRID de duas colunas e esta certo; aqui, numa coluna
     de flex, ele mandava cada bloco encolher ao proprio conteudo e ficar
     centrado — a barra virava uma pilha de blocos de larguras diferentes, e o
     bloco do usuario, que e o mais largo, TRANSBORDAVA a coluna (medido: 276px
     numa coluna util de 236px, 4px para fora de cada lado, e a barra inteira
     passava a rolar de lado). Era defeito antigo que so aparecia quando algum
     bloco crescia. */
  .barra-lado { display: flex; align-items: stretch; }
  .barra-pessoa { margin-top: auto; }
  .barra-pessoa-interno { padding: 12px; gap: 12px; }
  .barra-pessoa-dizeres { display: block; }
  /* A barra DEIXOU DE FLUTUAR. Era um painel arredondado com margem de 14px
     de tres lados; virou uma coluna branca encostada na borda, separada do
     trabalho por um fio de 1px. E a anatomia do template, e ela resolve uma
     coisa que a versao flutuante nao resolvia: barra branca flutuando sobre
     chao quase branco precisa de sombra para se destacar, e sombra em coluna
     de tela inteira suja o canto. Encostada e com fio, o limite e nitido e
     custa 1px.

     264px era a largura antiga; 269px e a medida do template, e a diferenca
     de 5px paga o respiro do item de menu com icone. */
  .barra-lado {
    flex: 0 0 269px;
    width: 269px;
    margin: 0;
    border-radius: 0;
    border-bottom: 0;
    border-right: 1px solid var(--linha);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    padding: 22px 16px;
    gap: 22px;
  }
  /* O mesmo menu, agora em coluna: os grupos voltam a aparecer e os itens
     deixam de ser pilula. UM DOM so — se fossem dois, um deles ficaria para
     tras na proxima tela nova. */
  .barra-nav { flex-direction: column; align-items: stretch; gap: 3px; overflow: visible; }
  .barra-grupo { display: block; padding: 18px 10px 8px; }
  .barra-grupo:first-child { padding-top: 0; }
  .banner-acao { flex: 0 0 auto; }
  .barra-lista { flex-direction: column; gap: 3px; }
  .barra-elo {
    border-radius: var(--raio);
    border-color: transparent;
    padding: 11px 12px;
    min-height: 0;
  }
  /* O hover de desktop era branco translucido a 8% — desenhado para a barra
     VERDE que saiu. Sobre a barra branca ele e invisivel: branco a 8% sobre
     branco e branco. Passa a ser o mesmo azul a 12% do celular; o salto vem
     da regra base, que ja vale aqui. */
  .barra-icone { width: 19px; }

  .area-corpo { padding: 28px 30px 40px; }
  .banner { padding: 8px 2px 0; align-items: flex-start; }
  .banner h1 { font-size: 28px; }
  .banner-acao { text-align: right; }
  .banner-linha { justify-content: flex-end; }
  .cartao-numero { padding: 22px 20px; }

  /* A partir daqui cabem dois cartoes de prova lado a lado. Piso de 340px:
     abaixo disso o titulo da edicao e o botao comecam a brigar pela linha.
     TETO de 510px, que e a metade da coluna: sem ele, um aluno com UM cartao
     so recebia um cartao de 1020px, com o estado num canto e o botao no outro,
     a 800px de distancia — o mesmo "balao esticado" da faixa de numeros. Com o
     teto e `justify-content: center`, um cartao fica com 510px e margens
     iguais dos dois lados; dois preenchem a linha; tres viram 2 + 1 centrada.
     Em nenhuma contagem sobra celula vazia. */
  .fila-provas {
    grid-template-columns: repeat(auto-fit, minmax(340px, 510px));
    justify-content: center;
    gap: 16px;
  }
  /* UM CARTAO POR LINHA nas duas telas cujo cartao e dividido ao meio: "Suas
     provas", com os dois dias lado a lado, e "Simulados disponiveis", com a
     arte verde de um lado e a lista do outro. Em duas colunas cada metade cai
     para ~190px — o texto transborda e a arte e cortada antes do desenho.

     "Meus resultados" continua em duas colunas: o cartao dela e baixo, e uma
     coluna so deixaria a tela vazia pela metade. */
  .fila-provas.fila-larga {
    grid-template-columns: minmax(0, 760px);
    /* `start`, e nao `center`: a coluna e mais estreita que a area de conteudo,
       e centrada ela descolava do titulo da tela — o texto comecava numa
       vertical e o cartao noutra. O dono viu na hora: "saiu do foco". Alinhado
       a esquerda, tudo divide o mesmo eixo. */
    justify-content: start;
  }
  .cartao-dia { padding: 20px 22px; }
  /* No celular o pe empilha (estado em cima, botao ocupando a linha); aqui
     cabe lado a lado, com a acao na ponta. */
  .cartao-dia-pe {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cartao-dia-pe .pastilha-estado { align-self: center; }
}

/* ---------- a faixa dos numeros vira colunas ------------------------------
   1180px, e nao os 860px em que a barra lateral vira coluna. A conta e do
   conteudo, nao do gosto: o rotulo mais longo da faixa e "Posição entre os
   participantes" e o detalhe mais longo e "de 340 · 96% ficaram abaixo de
   você", 208px de tinta. Com a medalha (44) e o vao (15) e os recuos (40),
   uma coluna precisa de ~309px para nao picar o rotulo — tres delas pedem
   927px de conteudo, e so a partir de ~1180px de tela isso existe.

   Abaixo disso a faixa fica EMPILHADA, como no celular. Nao e desistencia: o
   arranjo intermediario era pior. Com `auto-fit` de 220px, uma tela de 900px
   dava DUAS colunas para TRES cartoes — dois em cima e um sozinho embaixo,
   com meia linha branca vazia ao lado dele. E exatamente o buraco que o dono
   aponta, e ele so aparecia nessa faixa de largura.

   `grid-auto-flow: column` no lugar de `auto-fit`: assim a faixa tem SEMPRE
   uma linha so, com tantas colunas quantos forem os cartoes. Fecha com um
   (tela de resultado sem posicao nem media), com dois e com tres, sem
   depender de a divisao dar certo. */
@media (min-width: 1180px) {
  .cartoes-numero {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }
  .cartao-numero {
    /* O fio passa a dividir COLUNA, entao ele vai a direita. Fio embaixo nao
       divide nada quando os blocos estao lado a lado. */
    border-bottom: 0;
    border-right: 1px solid var(--linha);
    /* A segunda metade do conserto dos "baloes esticados". O teto de
       `.area-corpo` tirou 111px de vazio de cada coluna; o resto e
       DISTRIBUICAO. As tres colunas tem a mesma largura, mas conteudos de
       larguras diferentes (211, 244 e 267px com a medalha): encostados a
       esquerda, a primeira ficava com todo o vazio de um lado so, contra o fio
       divisorio — que foi como o dono descreveu o defeito. Centrado, o mesmo
       vazio vira 64px de respiro de cada lado, medidos e iguais.

       So quando ha colunas. Empilhados, centrar desalinharia as medalhas, que
       e justamente o que da ordem a pilha. */
    justify-content: center;
  }
  /* `flex: 1` faria os dizeres absorverem toda a folga e o `justify-content`
     acima nao teria o que distribuir. */
  .cartao-numero .cartao-dizeres { flex: 0 1 auto; }
  .cartao-numero:last-child { border-right: 0; }
}

/* ==========================================================================
   TELAS DE ACESSO

   Cadastro e login sao a continuacao da porta de entrada, e ate 07/08/2026 nao
   pareciam: a capa e uma pagina de papel — fio, espaco e um titulo de 52px sem
   nenhuma caixa a vista — e as telas de acesso eram um formulario dentro de um
   cartao branco com titulo de 22px. A pessoa clicava em "Criar conta" e mudava
   de produto.

   Aqui vale o mesmo vocabulario da capa, e literalmente as mesmas classes onde
   o elemento e o mesmo (`.abertura-selo`, `.ficha-publica`): cabecalho
   assimetrico e uma palavra do titulo em verde.

   MAS NAO A PAGINA DE PAPEL. A primeira versao desta reforma levou tambem o
   "fio e espaco" da capa — nenhuma caixa, so texto separado por filete. O dono
   olhou e disse: *"um tanto de letras solta na tela, nao tem um bolao, caixa
   onde os textos estao"*, e mandou o print dos cartoes do descubrasolucoes.com.
   Ele tem razao, e a razao e que capa e formulario nao sao a mesma coisa: na
   capa se LE de cima a baixo, e o fio conduz; num formulario se TRABALHA, e a
   caixa e o que diz onde a tarefa comeca e onde acaba.

   Entao o conteudo volta para dentro de `.cartao`, com o quadrado de icone
   (`.cartao-icone`) que a area do aluno ja usa — que e o mesmo desenho do
   print, e ja estava na plataforma. O cabecalho da pagina fica fora das
   caixas, sobre o fundo, como na propria referencia.
   ========================================================================== */

/* Largura propria: nem os 460px do cartao antigo (estreito demais para duas
   colunas) nem os 1080 da capa (um campo de e-mail de 1000px e absurdo). Fica
   no `.palco` e nao num wrapper interno de proposito — assim o recado de erro
   do login, que o `base.html` imprime antes do conteudo, alinha com o
   formulario em vez de atravessar a tela inteira. */
.palco.medio { max-width: 830px; }

/* O cabecalho da pagina, na mesma forma da capa: selo pequeno e titulo grande
   com uma palavra em verde. Fica FORA das caixas, sobre o fundo — e o titulo
   da tela, nao conteudo de um cartao. Sem o fio de 2px que fecha a abertura da
   capa: la ele separa texto de texto; aqui embaixo dele vem a borda de um
   cartao, e as duas linhas juntas viram uma cerca. */
.acesso-cab { padding: 18px 4px 22px; }
.acesso-cab h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
  color: var(--tinta);
}
.acesso-cab h1 em { font-style: italic; color: var(--marca); }
.acesso-sub {
  color: var(--grafite);
  font-size: 16px;
  line-height: 1.65;
  max-width: 34em;
  margin: 14px 0 0;
}

.acesso-grade { display: grid; gap: 16px; padding: 4px 4px 0; }
.acesso-forma { min-width: 0; }

/* ---------- a forma do formulario ------------------------------------------
   18/08/2026, pedido do dono: *"coloca esse formulario feito em tailwind que
   fica melhor o layout"*. O que ele quer e a FORMA — e ela veio, como o resto
   desta folha, do vocabulario do Tailwind admin: linha de apoio sob o titulo,
   campos numa grade de duas colunas, e os aceites separados por fio.

   NAO veio o Tailwind. Nem por CDN (o dono ja reprovou fonte de CDN uma vez,
   com razao: o arquivo de terceiro entra e a linguagem nao) nem por build,
   que este projeto nao tem. Duas folhas de estilo na mesma tela e o comeco de
   um desenho que nao decide o que e. */
.forma-sub {
  margin: -4px 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grafite);        /* 5,48:1 no branco */
}

/* Uma coluna no celular. A grade so aparece quando ha largura para duas — o
   mesmo corte de 560px que a `.dupla` ja usava, para as duas nao brigarem. */
.forma-grade { display: grid; grid-template-columns: 1fr; }
.forma-grade > .largo { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .forma-grade { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

/* O FIO ACIMA e o que faz o bloco. Sem ele os dois marcadores parecem mais
   dois campos do cadastro, e nao sao: um e obrigacao legal e o outro e
   escolha. O respiro maior embaixo separa a escolha do botao que a executa. */
.forma-aceites {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.forma-aceites .marcador:last-child { margin-bottom: 0; }
.acesso-forma form .botao { margin-top: 18px; }

.acesso-lado { min-width: 0; display: grid; gap: 16px; align-content: start; }

/* A caixa destas telas. E o `.cartao` de sempre — mesma borda, mesmo raio,
   mesma sombra curta —, no formato do print da Descubra: quadrado de icone
   em cima, titulo, conteudo. Sem a divisoria do `.cartao-cab`: no print nao ha
   risco entre o titulo e o texto, e com o icone acima ela sobra. */
.caixa-acesso { margin-bottom: 0; }
.caixa-acesso .cartao-icone { margin-bottom: 14px; }
.caixa-acesso h2 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--tinta);
}
.caixa-acesso > p:last-child { margin-bottom: 0; }

/* A MESMA ficha tecnica da capa, e por isso a mesma classe. So a proporcao
   muda: no cadastro ela e apoio e fica ACIMA do formulario no celular, entao
   cada pixel dela empurra o primeiro campo para baixo da dobra. Como fita de
   quatro ela custa 85px em vez dos 175 do quadro 2x2. Na capa continua 2x2,
   porque la ela E o conteudo da coluna. */
/* TRES colunas desde 18/08/2026, e nao quatro: a redacao saiu da ficha e o
   grid tinha de sair com ela. Deixado em quatro, o terceiro item ficaria numa
   fileira sozinho, com um quarto de largura vazio ao lado. */
.caixa-ficha .ficha-publica { grid-template-columns: repeat(3, 1fr); }
.caixa-ficha .ficha-publica > div { padding: 10px 6px; }
.caixa-ficha .ficha-publica > div:nth-child(2n) { border-right: 1px solid var(--linha); }
.caixa-ficha .ficha-publica > div:last-child { border-right: 0; }
.caixa-ficha .ficha-publica dd { font-size: 21px; }

/* "Ja tem conta?" no fim do cadastro. Fio acima porque e outra coisa: acabou
   o formulario, comeca a saida. */
.acesso-troca {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: 14.5px;
  color: var(--grafite);
}

.caixa-acesso p { margin: 0 0 9px; font-size: 14px; line-height: 1.6; color: var(--grafite); }
.caixa-acesso .botao { margin-top: 12px; }

/* As tres linhas que sustentam a decisao no cadastro.
   Eram uma caixa verde-agua palida de cantos redondos. Na coluna de apoio, ao
   lado da ficha tecnica, aquilo virava o unico bloco pintado da tela e puxava
   o olho para longe do formulario. Fio e espaco, como no resto da pagina: o
   tique verde ja e a marca, e ele sozinho basta. */
.garantias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  font-size: 14px;
  color: var(--tinta);
}
.garantias li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  line-height: 1.5;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}
.garantias li:last-child { border-bottom: 0; }
/* O tique e decorativo — o texto ao lado ja diz tudo. O `/ ""` e o texto
   alternativo do conteudo gerado: onde o navegador suporta, o leitor de tela
   pula o simbolo em vez de anunciar "marca de selecao" tres vezes; onde nao
   suporta, ele e lido, o que e ruido mas nao impede nada. */
.garantias li::before {
  content: "✓" / "";
  color: var(--marca);
  font-weight: 700;
  line-height: 1.5;
}

/* Rodape de links das telas de acesso: era uma pilha de paragrafos soltos. */
.links-apoio { display: grid; gap: 8px; }
.links-apoio p { margin: 0; }

@media (min-width: 700px) {
  .acesso-cab { padding: 30px 4px 28px; }
  .acesso-cab h1 { font-size: 46px; }
  .acesso-sub { font-size: 17px; }
  /* Formulario na coluna larga, apoio na estreita — o mesmo desenho da capa,
     onde o texto ocupa a esquerda e a ficha tecnica encosta na direita. */
  .acesso-grade {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    /* Linha estreita, coluna larga: as duas caixas de apoio se empilham com o
       mesmo respiro que teriam no celular, e o vao ate o formulario e o que
       separa as duas colunas. */
    gap: 16px 40px;
    padding-top: 8px;
    align-items: start;
  }
  /* No cadastro as tres caixas estao escritas na ordem do celular: ficha,
     formulario, garantias. Aqui as duas de apoio voltam para a coluna da
     direita, uma sobre a outra, e o formulario ocupa a esquerda inteira.
     `order` faria o mesmo, mas nomear linha e coluna deixa escrito qual
     caixa vai onde. */
  .acesso-grade.lado-antes { align-items: start; }
  .acesso-grade.lado-antes > .caixa-ficha { grid-column: 2; grid-row: 1; }
  .acesso-grade.lado-antes > .acesso-forma { grid-column: 1; grid-row: 1 / span 2; }
  .acesso-grade.lado-antes > .caixa-garantias { grid-column: 2; grid-row: 2; }
  /* Na coluna estreita a fita CONTINUA de tres — com quatro ela nao cabia e
     virava quadro 2x2, mas tres rotulos curtos ("dias", "questoes", "de
     prova") cabem em 375px. Volta o quadro so se algum dia entrar um quarto
     numero aqui. */
  .caixa-ficha .ficha-publica > div { padding: 12px 6px; }
  .caixa-ficha .ficha-publica dd { font-size: 21px; }
}

/* O QR do Pix. Fundo branco e margem interna nao sao enfeite: leitor de QR
   precisa de zona clara em volta do desenho para achar as bordas, e num
   cartao de outra cor ele passaria a falhar em camera ruim. */
.pix-qr {
  margin: 0 0 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel);
  text-align: center;
}
.pix-qr img {
  display: block;
  margin: 0 auto;
  width: 220px;
  height: 220px;
  max-width: 100%;
  image-rendering: pixelated;   /* nao borrar o quadriculado ao redimensionar */
}
.pix-qr figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--grafite);
}

/* Aviso de "aguardando o pagamento" no checkout: o texto e trocado por
   JavaScript conforme o Pix confirma, entao ele precisa ser visivel como
   ESTADO, e nao como mais um paragrafo da pagina. */
.situacao-pagamento {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--aviso);
  border-radius: var(--raio-papel);
  background: var(--aviso-fundo);
  color: var(--aviso);          /* 4,57:1 sobre --aviso-fundo */
  padding: 11px 13px;
  font-size: 13.5px;
}

/* ---------- caixas que rolam sozinhas ----------
   Achadas em 12/08/2026 pelo teste que passou a conferir a folha CERTA: as
   duas existiam so em `admin.css`, e as telas de resultado e de desempenho do
   aluno as usam em quatro lugares. Sem `.rolagem`, a tabela de acertos por
   area nao rola dentro da propria caixa — ela empurra a PAGINA de lado, e no
   celular o aluno arrasta a tela inteira para ler a ultima coluna. */
.rolagem { overflow-x: auto; }
.previa-texto-base { margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
   TARJA DE AMBIENTE DE TESTE — 12/08/2026

   Aparece no alto de toda tela quando `AMBIENTE=teste` no `.env`. Existe para
   uma confusao concreta: sem ela, um dia alguem cadastra um item de verdade no
   lugar errado, ou tenta pagar uma cobranca que nao cobra nada.

   AS CORES SAO LITERAIS, E NAO TOKENS, DE PROPOSITO. Este ambar nao pertence a
   paleta da plataforma — ele existe justamente para nao parecer parte do
   produto. Virando `--tarja-fundo` no `:root`, ele viraria "o amarelo da casa"
   e apareceria numa etiqueta qualquer no mes que vem; ai a tarja deixa de ser
   a unica coisa daquela cor na tela, que e o que a faz funcionar.

   Medido (scratchpad/contraste.py), sobre o fundo #FFC93D:
     #3D2B00  8,86:1   o rotulo
     #5A3E00  6,44:1   a explicacao

   A COR NAO CARREGA O RECADO SOZINHA (WCAG 1.4.1): a tarja diz por escrito o
   que ela e. Em tela monocromatica ela continua se lendo.

   E ESTATICA, e nao `sticky`: a barra lateral ja e `sticky top: 14px`, e duas
   pecas grudadas no alto brigariam pelos mesmos pixels — a tarja cobriria o
   topo do menu ao rolar. Como toda navegacao aqui recarrega a pagina, a tarja
   e vista a cada tela, que e quando a confusao acontece.

   A folha da PROVA nao a tem, e isso e escolha: aquela tela foi reduzida a 49px
   de barra por medicao (CONTEXTO 4.9 e o RETOMAR de 07/08), e nenhum dos erros
   que a tarja evita — cadastrar item, pagar de mentira — esta ao alcance de
   quem esta fazendo a prova. Ele chegou ali passando por telas que a mostram.
   --------------------------------------------------------------------------- */
.tarja-teste {
  margin: 0;
  padding: 6px 14px;
  background: #FFC93D;
  color: #3D2B00;
  border-bottom: 1px solid #C99A00;
  font-size: 12px;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 1px 8px;
}
.tarja-teste strong { font-weight: 700; letter-spacing: 0.07em; }
.tarja-teste span { color: #5A3E00; }

/* ---------- credito da fonte no enunciado revisado ------------------------
   O mesmo tratamento da tela de prova (`prova.css`): fonte de figura, citacao
   e "Adaptado" saem em corpo menor, como em prova impressa. Aqui a folha e
   outra e o vocabulario tambem — `--grafite` no lugar de `--tinta-fraca` —,
   mas a regra visual e a mesma, porque o aluno acabou de ver a questao assim
   na prova e a revisao nao pode parecer outro documento.

   Medido: #605D5D sobre o cartao branco da 6,52:1; sobre `--fundo` (#F5F2EB)
   da 5,83:1. Piso de 4,5 nos dois. */
.enunciado-revisao small {
  display: block;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--grafite);
}
.enunciado-revisao p:has(> small) { margin-top: -8px; }

/* ==========================================================================
   BIBLIOTECA DE COMPONENTES — 14/08/2026

   Os componentes do tema novo, um por bloco. Toda tela nova da area do aluno
   se monta com estes; nenhum valor de cor, espaco, raio ou sombra e escrito
   aqui a mao — tudo sai dos tokens do `:root` no topo desta folha.

   PREFIXO `ds-`. Conferido antes de nascer que nenhuma classe do projeto
   comecava assim. A regra do CONTEXTO vale aqui mais que em qualquer lugar:
   nome de classe e namespace unico, e ja custou um `h1` invisivel (`.capa`)
   e um `.trilho` sobrescrito. Um prefixo proprio garante que a biblioteca
   nova conviva com o vocabulario antigo (`.cartao`, `.painel-cartao`)
   enquanto as telas migram uma a uma.

   Cada componente tem os SEIS estados escritos: normal, hover, foco, ativo,
   desabilitado e carregando. Estado que nao esta escrito e estado que a
   proxima tela inventa de um jeito diferente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTAO — quatro variantes
   O primario e `--marca` (#4869C6) e nao o azul do template (#5D87FF): com
   texto branco em cima, aquele mede 3,29:1 e reprova na WCAG para texto
   normal. Este mede 4,90:1. A diferenca de tom e pequena; a de legibilidade
   nao e.
   -------------------------------------------------------------------------- */
.ds-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--controle);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1;
  padding: 0 var(--e4);
  min-height: 40px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--salto), color var(--salto),
              border-color var(--salto), box-shadow var(--salto),
              transform var(--salto);
}
/* O alvo de toque de 44px vale no celular, onde o dedo e o apontador. No
   desktop 40px e a medida do template e sobra precisao de mouse. */
@media (max-width: 859px) {
  .ds-botao { min-height: 44px; }
}

.ds-botao-primario {
  background: var(--marca);
  color: var(--papel);          /* 4,90:1 */
  box-shadow: var(--sombra-botao);
}
.ds-botao-secundario {
  background: var(--papel);
  color: var(--marca);          /* 5,11:1 */
  border-color: var(--linha-forte);   /* 3,03:1 — limite de componente */
}
.ds-botao-perigo {
  background: var(--erro);
  color: var(--papel);          /* 5,35:1 */
  box-shadow: var(--sombra-botao);
}
/* O ghost nao tem fundo nem borda. Por isso ele NAO serve para acao
   principal: sem limite identificavel, a WCAG 1.4.11 nao se satisfaz com
   ele sozinho. E para acao terciaria dentro de um bloco que ja tem moldura. */
.ds-botao-ghost {
  background: transparent;
  color: var(--marca);
  border-color: transparent;
}

@media (hover: hover) {
  .ds-botao-primario:hover   { background: var(--marca-escura); transform: translateY(-1px); }
  .ds-botao-secundario:hover { background: var(--marca-clara); border-color: var(--marca); }
  .ds-botao-perigo:hover     { background: #9E2B2B; transform: translateY(-1px); }
  .ds-botao-ghost:hover      { background: var(--marca-clara); }
}
.ds-botao:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}
.ds-botao:active { transform: translateY(0); }

/* Desabilitado: cinza chapado, sem sombra e sem cursor de mao. NAO usa
   `opacity`, que arrastaria o texto para 2,9:1 — o botao ficaria ilegivel em
   vez de apenas inerte. */
.ds-botao:disabled,
.ds-botao[aria-disabled="true"] {
  background: var(--trilho);
  color: var(--grafite);        /* 4,95:1 sobre --trilho */
  border-color: var(--linha);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Carregando: o botao guarda a propria largura e troca o rotulo por um
   disco girando. `aria-busy` e o seletor, para o leitor de tela e a tela
   contarem a mesma coisa. */
.ds-botao[aria-busy="true"] { cursor: progress; }
.ds-botao[aria-busy="true"] .ds-botao-rotulo { visibility: hidden; }
.ds-girando {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ds-girar 0.7s linear infinite;
  position: absolute;
}
@keyframes ds-girar { to { transform: rotate(360deg); } }
.ds-botao[aria-busy="true"] { position: relative; }

/* --------------------------------------------------------------------------
   CARTAO DE CONTEUDO
   -------------------------------------------------------------------------- */
.ds-cartao {
  background: var(--papel);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-cartao);
  padding: var(--pad-cartao);
}
.ds-cartao-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e4);
}
.ds-cartao-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-cartao);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.ds-cartao-sub {
  margin: 4px 0 0;
  font-size: var(--t-auxiliar);
  color: var(--grafite);
}
/* Variante clicavel: e ela que leva o salto. Cartao que nao leva a lugar
   nenhum nao deve subir — relevo e promessa de acao. */
.ds-cartao-acionavel {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--salto), box-shadow var(--salto);
}
@media (hover: hover) {
  .ds-cartao-acionavel:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
  }
}
.ds-cartao-acionavel:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   CARTAO DE INDICADOR NUMERICO
   Medalha pintada + rotulo em cima do numero, como no template. A medalha usa
   o tom que PINTA; o numero e o rotulo usam tinta e grafite sobre branco.
   -------------------------------------------------------------------------- */
.ds-indicador {
  background: var(--papel);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-cartao);
  padding: var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.ds-indicador-medalha {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--raio);
  display: grid;
  place-items: center;
  color: var(--papel);
  background: var(--marca-pintura);
}
.ds-indicador-medalha svg { width: 22px; height: 22px; display: block; }
.ds-indicador-med-sucesso { background: var(--acerto-pintura); color: #064136; }
.ds-indicador-med-aviso   { background: var(--aviso-pintura);  color: #4A3606; }
.ds-indicador-med-erro    { background: var(--erro-pintura);   color: var(--papel); }
.ds-indicador-med-info    { background: var(--info-pintura);   color: var(--papel); }
.ds-indicador-dizeres { min-width: 0; }
.ds-indicador-rotulo {
  display: block;
  font-size: var(--t-miudo);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 2px;
}
.ds-indicador-valor {
  display: block;
  font-family: var(--display);
  font-size: var(--t-numero);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.ds-indicador-detalhe {
  display: block;
  font-size: var(--t-miudo);
  color: var(--grafite);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   TABELA DE DADOS
   No celular ela ROLA dentro da propria caixa, e nao empurra a pagina de
   lado. E o defeito do `.rolagem` de 12/08, que existia em quatro telas do
   aluno porque a classe so morava no admin.css. Aqui o contentor e parte do
   componente, entao nao ha como esquecer.
   -------------------------------------------------------------------------- */
.ds-tabela-caixa {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-corpo);
  min-width: 520px;
}
.ds-tabela th {
  text-align: left;
  font-size: var(--t-miudo);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grafite);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.ds-tabela td {
  padding: var(--e4);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
  vertical-align: middle;
}
.ds-tabela tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) {
  .ds-tabela tbody tr:hover td { background: var(--mesa); }
}
.ds-tabela-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-tabela-vazia {
  padding: var(--e10) var(--e4);
  text-align: center;
  color: var(--grafite);
}

/* --------------------------------------------------------------------------
   CAMPO DE FORMULARIO
   -------------------------------------------------------------------------- */
.ds-campo { display: block; margin-bottom: var(--e5); }
.ds-campo-rotulo {
  display: block;
  font-size: var(--t-corpo);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: var(--e2);
}
.ds-campo-obrigatorio { color: var(--erro); }
.ds-campo-entrada {
  display: block;
  width: 100%;
  font-family: var(--corpo);
  font-size: 16px;   /* 16px evita o zoom automatico do iOS ao focar */
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 10px var(--e3);
  min-height: 44px;
  transition: border-color var(--salto), box-shadow var(--salto);
}
.ds-campo-entrada::placeholder { color: var(--grafite); }
.ds-campo-entrada:hover { border-color: var(--marca); }
.ds-campo-entrada:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-clara);
}
.ds-campo-entrada:disabled {
  background: var(--trilho);
  color: var(--grafite);
  cursor: not-allowed;
}
.ds-campo-entrada[aria-invalid="true"] { border-color: var(--erro); }
.ds-campo-entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--erro-fundo); }
.ds-campo-ajuda {
  display: block;
  font-size: var(--t-auxiliar);
  color: var(--grafite);
  margin-top: 6px;
}
/* O recado de erro NAO e so vermelho: ele comeca com um simbolo e uma
   palavra. Cor sozinha nao carrega recado (WCAG 1.4.1). */
.ds-campo-erro {
  display: block;
  font-size: var(--t-auxiliar);
  font-weight: 600;
  color: var(--erro);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   ETIQUETA (badge)
   Unico lugar da plataforma onde pilula e permitida: e um rotulo de estado,
   nao um controle. O dono reprovou pilula em BOTAO, e a regra continua.
   -------------------------------------------------------------------------- */
.ds-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--controle);
  font-size: var(--t-miudo);
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}
.ds-etiqueta-neutra  { background: var(--trilho);      color: var(--grafite); }
.ds-etiqueta-marca   { background: var(--marca-clara); color: var(--marca); }
.ds-etiqueta-sucesso { background: var(--acerto-fundo); color: var(--acerto); }
.ds-etiqueta-aviso   { background: var(--aviso-fundo);  color: var(--aviso); }
.ds-etiqueta-erro    { background: var(--erro-fundo);   color: var(--erro); }
.ds-etiqueta-info    { background: var(--info-fundo);   color: var(--info); }
/* O ponto e decorativo: a palavra ao lado ja diz o estado. */
.ds-etiqueta-ponto {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}

/* --------------------------------------------------------------------------
   ALERTA
   Filete de 3px na esquerda + icone + texto. O filete usa o tom que PINTA e
   o texto o que ESCREVE.
   -------------------------------------------------------------------------- */
.ds-alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  font-size: var(--t-corpo);
  line-height: 1.5;
  margin-bottom: var(--e4);
}
.ds-alerta-icone { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.ds-alerta-icone svg { width: 20px; height: 20px; display: block; }
.ds-alerta-titulo { display: block; font-weight: 700; margin-bottom: 2px; }
.ds-alerta-sucesso { background: var(--acerto-fundo); color: var(--acerto); box-shadow: inset 3px 0 0 var(--acerto-pintura); }
.ds-alerta-aviso   { background: var(--aviso-fundo);  color: var(--aviso);  box-shadow: inset 3px 0 0 var(--aviso-pintura); }
.ds-alerta-erro    { background: var(--erro-fundo);   color: var(--erro);   box-shadow: inset 3px 0 0 var(--erro-pintura); }
.ds-alerta-info    { background: var(--info-fundo);   color: var(--info);   box-shadow: inset 3px 0 0 var(--info-pintura); }

/* --------------------------------------------------------------------------
   MODAL
   `<dialog>` do proprio navegador: ele ja prende o foco dentro, fecha no Esc
   e devolve o foco ao voltar. Uma biblioteca de modal refaria isso pior — e a
   nossa CSP nao aceitaria o script embutido que a maioria delas pede.
   -------------------------------------------------------------------------- */
.ds-modal {
  border: 0;
  padding: 0;
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-alta);
  background: var(--papel);
  color: var(--tinta);
  width: min(520px, calc(100vw - 32px));
}
.ds-modal::backdrop { background: rgba(42, 53, 71, 0.45); }
.ds-modal-corpo { padding: var(--pad-cartao); }
.ds-modal-titulo {
  margin: 0 0 var(--e2);
  font-family: var(--display);
  font-size: var(--t-cartao);
  font-weight: 700;
  color: var(--tinta);
}
.ds-modal-texto { margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--grafite); }
.ds-modal-pe {
  display: flex;
  gap: var(--e2);
  justify-content: flex-end;
  padding: var(--e3) var(--pad-cartao) var(--pad-cartao);
  flex-wrap: wrap;
}
/* No celular os botoes do rodape ocupam a linha inteira, em vez de dois
   alvos apertados na ponta direita. */
@media (max-width: 479px) {
  .ds-modal-pe { flex-direction: column-reverse; }
  .ds-modal-pe .ds-botao { width: 100%; }
}

/* --------------------------------------------------------------------------
   CABECALHO DE TELA
   -------------------------------------------------------------------------- */
.ds-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--vao);
}
.ds-cabecalho-olho {
  margin: 0 0 6px;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marca);
}
.ds-cabecalho-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-tela);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.ds-cabecalho-sub {
  margin: 6px 0 0;
  font-size: var(--t-corpo);
  line-height: 1.55;
  color: var(--grafite);
  max-width: 60ch;
}
.ds-cabecalho-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
/* No celular a acao ocupa a linha inteira: com `flex: 0 0 auto` ela media o
   proprio conteudo e vazava pela direita em 375px. */
@media (max-width: 639px) {
  .ds-cabecalho-acoes { flex: 1 1 100%; }
  .ds-cabecalho-acoes .ds-botao { flex: 1 1 auto; }
}
@media (min-width: 860px) {
  .ds-cabecalho-titulo { font-size: var(--t-numero); }
}

/* --------------------------------------------------------------------------
   GRADE
   -------------------------------------------------------------------------- */
.ds-grade { display: grid; gap: var(--vao); }
.ds-grade-2 { grid-template-columns: 1fr; }
.ds-grade-3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .ds-grade-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ds-grade-3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   A PAGINA DE AMOSTRA (/_styleguide)

   Estilo da propria pagina de amostra, nao dos componentes. Fica separado e
   com prefixo proprio para que ninguem a use por engano numa tela de
   produto — o que esta aqui e andaime.
   ========================================================================== */
.sg-corpo { background: var(--mesa); min-height: 100vh; }
.sg-palco { max-width: 1080px; margin-inline: auto; padding: 24px 16px 64px; }
.sg-secao { margin-bottom: 44px; }
.sg-secao-titulo {
  font-family: var(--display);
  font-size: var(--t-tela);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--linha);
}
.sg-secao-nota {
  font-size: var(--t-auxiliar);
  color: var(--grafite);
  margin: 10px 0 20px;
  max-width: 72ch;
  line-height: 1.6;
}
.sg-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sg-amostras { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sg-legenda {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grafite);
  margin-bottom: 8px;
}
/* A ficha de cor: o retangulo pintado, o hex e o contraste MEDIDO. O numero
   nao e enfeite — e ele que diz onde aquele tom pode carregar texto. */
.sg-cores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.sg-cor { border-radius: var(--raio-papel); overflow: hidden; box-shadow: var(--sombra-cartao); background: var(--papel); }
.sg-cor-chapa { height: 62px; }
.sg-cor-dizeres { padding: 10px 12px; }
.sg-cor-nome { display: block; font-size: var(--t-auxiliar); font-weight: 700; color: var(--tinta); }
.sg-cor-hex { display: block; font-family: var(--mono); font-size: 11px; color: var(--grafite); margin-top: 2px; }
.sg-cor-medida { display: block; font-size: 11px; color: var(--grafite); margin-top: 4px; }

.sg-c-marca      { background: var(--marca); }
.sg-c-pintura    { background: var(--marca-pintura); }
.sg-c-escura     { background: var(--marca-escura); }
.sg-c-chip       { background: var(--marca-clara); }
.sg-c-tinta      { background: var(--tinta); }
.sg-c-grafite    { background: var(--grafite); }
.sg-c-mesa       { background: var(--mesa); }
.sg-c-linha      { background: var(--linha); }
.sg-c-acerto     { background: var(--acerto); }
.sg-c-acertop    { background: var(--acerto-pintura); }
.sg-c-aviso      { background: var(--aviso); }
.sg-c-avisop     { background: var(--aviso-pintura); }
.sg-c-erro       { background: var(--erro); }
.sg-c-errop      { background: var(--erro-pintura); }
.sg-c-info       { background: var(--info); }
.sg-c-infop      { background: var(--info-pintura); }

/* A escada tipografica, mostrada no proprio tamanho. */
.sg-tipo-linha { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.sg-tipo-ficha { font-family: var(--mono); font-size: 11px; color: var(--grafite); flex: 0 0 190px; }
.sg-t-tela    { font-family: var(--display); font-size: var(--t-tela);    font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; }
.sg-t-cartao  { font-family: var(--display); font-size: var(--t-cartao);  font-weight: 600; color: var(--tinta); }
.sg-t-numero  { font-family: var(--display); font-size: var(--t-numero);  font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; }
.sg-t-corpo   { font-size: var(--t-corpo);   color: var(--tinta); }
.sg-t-rotulo  { font-size: var(--t-corpo);   font-weight: 600; color: var(--tinta); }
.sg-t-aux     { font-size: var(--t-auxiliar);color: var(--grafite); }
.sg-t-miudo   { font-size: var(--t-miudo);   color: var(--grafite); }

/* Espaco e raio, desenhados no tamanho real. */
.sg-espacos { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.sg-espaco-bloco { background: var(--marca-pintura); border-radius: 3px; }
.sg-e1 { width: var(--e1); height: 34px; }
.sg-e2 { width: var(--e2); height: 34px; }
.sg-e3 { width: var(--e3); height: 34px; }
.sg-e4 { width: var(--e4); height: 34px; }
.sg-e5 { width: var(--e5); height: 34px; }
.sg-e6 { width: var(--e6); height: 34px; }
.sg-e8 { width: var(--e8); height: 34px; }
.sg-e10 { width: var(--e10); height: 34px; }
.sg-raios { display: flex; gap: 18px; flex-wrap: wrap; }
.sg-raio-bloco { width: 74px; height: 74px; background: var(--papel); box-shadow: var(--sombra-cartao); display: grid; place-items: end center; padding-bottom: 6px; font-family: var(--mono); font-size: 10px; color: var(--grafite); }
.sg-r-botao  { border-radius: var(--raio); }
.sg-r-papel  { border-radius: var(--raio-papel); }
.sg-r-casca  { border-radius: var(--raio-casca); }
.sg-r-pilula { border-radius: var(--raio-pilula); }
.sg-sombras { display: flex; gap: 24px; flex-wrap: wrap; }
.sg-sombra-bloco { width: 130px; height: 74px; background: var(--papel); border-radius: var(--raio-papel); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--grafite); }
.sg-s-curta  { box-shadow: var(--sombra); }
.sg-s-cartao { box-shadow: var(--sombra-cartao); }
.sg-s-alta   { box-shadow: var(--sombra-alta); }

/* A replica da barra lateral, para o salto ser visto sem entrar no sistema. */
.sg-barra { max-width: 269px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-papel); padding: 16px 14px; }
.sg-barra .barra-grupo { display: block; padding: 0 10px 8px; }
.sg-barra .barra-lista { flex-direction: column; gap: 3px; }
.sg-barra .barra-nav { flex-direction: column; align-items: stretch; gap: 3px; overflow: visible; }

/* ==========================================================================
   MOVIMENTO — cascata e batida
   14/08/2026. Pedido do dono: *"está cheio de animação... ao aparecer,
   informações aparecem em cascata"*, e batida de coração no botão CADASTRAR.

   O padrao foi tirado da pagina de referencia: as pecas entram com
   `opacity 0 -> 1` e um deslocamento de baixo para cima, escalonadas.

   TRES DECISOES QUE SUSTENTAM ISTO, e as tres sao de robustez:

   1. **O estado escondido so existe se houver JavaScript.** Ele mora atras de
      `.ds-anima`, classe que `static/js/animacao.js` poe no <html>. Sem o
      script — bloqueado, com erro, aparelho antigo — nada e escondido e a
      pagina aparece inteira. O contrario e a armadilha classica da animacao
      de entrada: o conteudo fica invisivel para sempre e ninguem descobre,
      porque na maquina de quem fez funcionou.

   2. **O script vai no <head> SEM `defer`.** E um arquivo de 700 bytes, do
      mesmo dominio, na conexao que ja esta aberta. Com `defer` ele rodaria
      depois do parse, o navegador ja teria pintado o conteudo visivel, e a
      pagina daria um PISCAO — tudo aparece e some para reaparecer animado.

   3. **`prefers-reduced-motion` desliga tudo**, e nao so amortece. Quem pediu
      menos movimento no sistema operacional recebe a pagina estatica, com o
      conteudo no lugar. Isso nao e enfeite de norma: movimento repetido
      dispara enxaqueca e nausea em quem tem desordem vestibular.
   ========================================================================== */

/* ---------- cascata ---------- */
/* O contentor recebe `.ds-cascata`; os filhos entram um depois do outro. O
   atraso sai do `nth-child`, e nao de um `style=` calculado no template — a
   CSP descarta atributo de estilo em silencio, e um atraso perdido faria a
   cascata virar um bloco so, sem ninguem entender por que. */
.ds-anima .ds-cascata > * {
  opacity: 0;
  transform: translateY(20px);
}
/* MAIS LENTA E MAIS MACIA — 15/08/2026, a pedido do dono: *"a cascata está
   sendo feita muito rápida; no site que te mandei ela acontece suavemente"*.

   O QUE MUDOU, E POR QUE NAO E O NUMERO DELES.
   Fui medir o site de referencia antes de mexer, e o `fadeIn` de la e de
   **0,15s** — TRES VEZES MAIS RAPIDO que o nosso era. Ou seja, a suavidade que
   ele viu la nao vem da entrada: vem das animacoes ambientes longas daquela
   pagina (flutuar 3s, brilho 3s, giro 3s). Copiar o 0,15s teria deixado a
   nossa ainda mais seca — o oposto do pedido.

   Entao a mudanca foi de sensacao, e sao tres coisas juntas:

     duracao   0,55s -> 0,9s    a peca demora mais para assentar
     passo     70ms  -> 110ms   uma espera antes da proxima comecar
     curva     ease-out forte -> suave

   A CURVA E A QUE MAIS PESA, e era a real culpada. A anterior
   `cubic-bezier(0.16, 1, 0.3, 1)` dispara quase toda a distancia nos primeiros
   milissegundos e freia de supetao: le como "estalo", nao como "deslize" — por
   isso 0,55s pareciam menos que isso. A nova distribui o movimento ao longo do
   tempo.

   Oito pecas agora levam 0,9 + 7x0,11 = **1,67s** para terminar, contra 1,04s
   antes. Continua abaixo dos 5s da WCAG 2.2.2 com folga. */
.ds-anima .ds-cascata.ds-visivel > * {
  animation: ds-entrar 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.ds-anima .ds-cascata.ds-visivel > *:nth-child(1) { animation-delay: 0ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(2) { animation-delay: 110ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(3) { animation-delay: 220ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(4) { animation-delay: 330ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(5) { animation-delay: 440ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(6) { animation-delay: 550ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(7) { animation-delay: 660ms; }
.ds-anima .ds-cascata.ds-visivel > *:nth-child(8) { animation-delay: 770ms; }
/* Do nono em diante todos entram junto com o oitavo. E deliberado: uma
   cascata de doze pecas a 110ms cada passaria de dois segundos, e a ultima
   peca chegaria depois de a pessoa ja ter comecado a ler. */
.ds-anima .ds-cascata.ds-visivel > *:nth-child(n+9) { animation-delay: 770ms; }

/* Peca solta, fora de contentor. */
.ds-anima .ds-revelar { opacity: 0; transform: translateY(20px); }
.ds-anima .ds-revelar.ds-visivel {
  animation: ds-entrar 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes ds-entrar {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- a batida do botao CADASTRAR ---------- */
/* Duas batidas rapidas e uma pausa, como um coracao — nao um pulso unico
   regular, que le como "carregando".

   ELA E FINITA: TRES CICLOS, ~4,4s, e para. E a diferenca entre chamar
   atencao e virar papel de parede — mas a razao principal e outra, e e norma:
   a WCAG 2.2.2 pede um jeito de pausar movimento que comeca sozinho e dura
   MAIS de cinco segundos ao lado de outro conteudo. Batendo para sempre, o
   botao precisaria de um botao de pausa do lado, o que e absurdo. Batendo
   tres vezes, ele fica dentro da norma sem precisar de nada.

   Ela recomeca quando o botao volta a entrar na tela (o observador tira e
   repoe a classe), entao o botao la embaixo bate quando a pessoa chega nele.

   O halo e um `box-shadow` que abre junto. Nao e `outline`: outline e do
   foco de teclado, e dois aneis no mesmo elemento confundem quem navega por
   Tab. */
.ds-anima .ds-bate.ds-visivel {
  animation: ds-batida 1.45s ease-in-out 3;
}
@keyframes ds-batida {
  0%   { transform: scale(1);     box-shadow: var(--sombra-botao); }
  10%  { transform: scale(1.045); box-shadow: 0 0 0 6px var(--marca-clara), var(--sombra-botao); }
  20%  { transform: scale(1);     box-shadow: var(--sombra-botao); }
  30%  { transform: scale(1.045); box-shadow: 0 0 0 10px rgba(93, 135, 255, 0); }
  45%  { transform: scale(1);     box-shadow: var(--sombra-botao); }
  100% { transform: scale(1);     box-shadow: var(--sombra-botao); }
}
/* Sob o dedo ou sob o foco, a batida para: quem ja achou o botao nao precisa
   ser chamado, e o movimento atrapalharia a mira. */
.ds-anima .ds-bate:hover,
.ds-anima .ds-bate:focus-visible { animation: none; }

/* ---------- a regra que manda em todas as de cima ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-anima .ds-cascata > *,
  .ds-anima .ds-revelar {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .ds-anima .ds-bate.ds-visivel { animation: none; }
}

/* ---------- a tabela entra linha a linha ---------- */
/* Pedido do dono, apontando `tailwind-admin.com/animated-components/tables`.
   La o efeito e o `fadeIn`: `opacity 0 -> 1` com 4px de subida, uma linha
   depois da outra.

   O DESLOCAMENTO E DE 4px, E NAO OS 14px DA CASCATA DE BLOCO. Numa tabela as
   linhas sao vizinhas e baixas; 14px faria cada uma passar por cima da outra
   na entrada, e a tabela pareceria embaralhar em vez de aparecer. Foi por
   isso que a pagina de referencia usa 4px aqui e mais nos blocos.

   O passo e de 45ms, menor que os 70ms da cascata de bloco, pela mesma razao
   de escala: dez linhas a 70ms levariam 700ms so para terminar de aparecer, e
   quem veio ler o numero da terceira linha esperaria por ele. */
.ds-anima .ds-tabela-anima tbody tr { opacity: 0; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr {
  animation: ds-linha-entra 0.4s ease-out forwards;
}
@keyframes ds-linha-entra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(1)  { animation-delay: 0ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(2)  { animation-delay: 45ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(3)  { animation-delay: 90ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(4)  { animation-delay: 135ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(5)  { animation-delay: 180ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(6)  { animation-delay: 225ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(7)  { animation-delay: 270ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(8)  { animation-delay: 315ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(9)  { animation-delay: 360ms; }
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(10) { animation-delay: 405ms; }
/* Da decima primeira em diante todas entram junto com a decima. Uma tabela de
   quarenta linhas escalonada ate o fim levaria 1,8s, e a ultima linha chegaria
   depois de a pessoa ja ter rolado para longe dela. */
.ds-anima .ds-tabela-anima.ds-visivel tbody tr:nth-child(n+11) { animation-delay: 405ms; }

@media (prefers-reduced-motion: reduce) {
  .ds-anima .ds-tabela-anima tbody tr,
  .ds-anima .ds-tabela-anima.ds-visivel tbody tr {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ==========================================================================
   BANNER DE SAUDACAO — o bloco pintado com o nome de quem entrou
   Pedido do dono, apontando `tailwind-admin.com/ui-blocks/banner#greetingbanner`.

   Medido na referencia: bloco pintado com a primaria a ~15%, raio grande,
   24px de preenchimento, saudacao com o NOME, dois numeros ao lado e um
   desenho na direita.

   O DESENHO E NOSSO. O da referencia e um arquivo do template comercial
   (`/images/backgrounds/welcome-bg.svg`); copia-lo seria levar o asset junto,
   e nao a linguagem. O nosso e SVG desenhado a mao, no HTML, sem pedido a
   terceiro — e fala do nosso produto: uma folha de respostas com a curva
   subindo.

   OS DOIS NUMEROS SAO REAIS. Saem de `dados_do_painel`, o mesmo servico que
   alimenta o resto da tela. Aluno sem historico nao ganha numero nenhum: o
   bloco troca de texto. Numero de enfeite numa tela de desempenho e mentira
   com cara de dado.

   O FUNDO FICOU ESCURO em 14/08, a pedido do dono: *"poderia ser um azul mais
   escuro, parecido com o azul que esta no SE ao lado de SIMULADOS ENEM"*.

   O selo SE e `--marca-pintura` #5D87FF. Ele NAO pode ser o fundo aqui: com
   texto branco em cima mede 3,29:1 e reprova. O selo aguenta porque tem duas
   letras grandes e curtas, e nao um paragrafo. `--marca` #4869C6 e o mesmo
   azul um passo mais fundo, e com branco em cima mede 5,11:1.

   Medido sobre #4869C6: branco 5,11:1 · --marca-clara 4,52:1. O DESENHO
   tambem foi remedido, porque objeto grafico pede 3:1 (WCAG 1.4.11): a folha
   branca da 5,11, os pontos claros 4,07 e o verde precisou clarear de
   #13DEB9 (2,96 — reprovava) para #7DF0DC (3,74).
   ========================================================================== */
/* O BANNER DO PAINEL. Ate 18/08 era chapado de --marca com um desenho a mao
   ao lado; o dono trocou pelo arquivo dele, "mais moderno".

   A imagem carrega DUAS armadilhas de contraste, e as duas foram medidas no
   proprio arquivo, nao estimadas:

   1. as formas decorativas claras (a grade de pontos e as ondas) vivem no
      alto e no pe da imagem. Sobre elas o branco cai a 2,13:1 — reprova. O
      MIOLO, de 25% a 75% da altura, e escuro: 7,60:1 no pior ponto.
   2. o texto do painel nao tem altura fixa (o subtitulo muda de tamanho), e
      por isso nao da para confiar so no miolo.

   Dai o veu do ::before, e o TETO DE 52% no texto: os dois numeros sao o
   mesmo numero de proposito. O veu e opaco ate 52% da largura e o texto
   nunca passa dos 52% — entao, por construcao, o texto cai sempre sobre
   #1B32B3 cheio: 9,75:1 no branco e 8,63:1 no chip, em QUALQUER altura.

   O teto nao e enfeite. Medido no navegador com a imagem composta: sem ele,
   um bloco de 360px de altura mostra a faixa clara do alto da imagem e o
   branco cai a 2,19:1 — reprova. Com `cover`, quanto mais ALTO o bloco, mais
   da imagem aparece na vertical; e no alto e no pe dela que mora a
   decoracao clara. Se mexer num dos dois numeros, mexa no outro. */
.ds-saudacao {
  position: relative;
  overflow: hidden;
  background: var(--banner-painel);
  border-radius: var(--raio-casca);
  padding: var(--pad-cartao);
  margin-bottom: var(--vao);
  display: flex;
  align-items: center;
  gap: var(--e5);
}
/* A ORDEM DE PINTURA E EXPLICITA, e precisa ser. No macro a <picture> vem
   DEPOIS dos dizeres; com todo mundo em `z-index: auto`, quem vem por ultimo
   no HTML pinta por cima — e a imagem cobria a saudacao inteira. Aconteceu
   aqui em 18/08 e so apareceu na foto. Fundo 0, veu 1, texto 2. */
.ds-saudacao-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.ds-saudacao-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A ilustracao mora na direita do arquivo: ancorando ali, o que o corte
     come em tela estreita e o azul vazio da esquerda, e nao o grafico. */
  object-position: right center;
  display: block;
}
.ds-saudacao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--banner-painel) 0%,
    var(--banner-painel) 52%,
    rgba(27, 50, 179, 0.82) 61%,
    rgba(27, 50, 179, 0) 72%
  );
}
.ds-saudacao-dizeres {
  position: relative;
  z-index: 2;           /* acima da imagem e do veu */
  flex: 1 1 auto;
  min-width: 0;
  /* O TETO. Casa com os 52% opacos do veu, acima. Sem ele o texto sai da
     zona pintada e cai sobre a decoracao clara da imagem. */
  max-width: 52%;
}
.ds-saudacao-olho {
  margin: 0 0 6px;
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marca-clara);     /* 8,63:1 sobre o banner (era 4,52:1) */
}
.ds-saudacao h1 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-tela);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--papel);           /* 9,75:1 sobre o banner (era 5,11:1) */
}
.ds-saudacao-sub {
  margin: 8px 0 0;
  font-size: var(--t-corpo);
  line-height: 1.55;
  color: var(--marca-clara);     /* 8,63:1 */
  max-width: 52ch;
}
/* Os dois numeros. Fio divisorio a ESQUERDA de cada um, e nao caixa propria:
   caixa dentro de bloco pintado vira cartao dentro de cartao. */
.ds-saudacao-numeros {
  display: flex;
  gap: var(--e5);
  margin-top: var(--e4);
  flex-wrap: wrap;
}
.ds-saudacao-numero { padding-left: var(--e3); border-left: 2px solid var(--papel); }
.ds-saudacao-valor {
  display: block;
  font-family: var(--display);
  font-size: var(--t-numero);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--papel);           /* 9,75:1 */
  font-variant-numeric: tabular-nums;
}
.ds-saudacao-rotulo {
  display: block;
  font-size: var(--t-miudo);
  font-weight: 600;
  color: var(--marca-clara);     /* 8,63:1 */
  margin-top: 2px;
}
/* NO CELULAR A IMAGEM SAI, e a mesma razao de sempre: o painel do aluno abre
   no celular, e ali a ilustracao rouba altura do primeiro dado real. Fica o
   --banner-painel cheio, que e a cor tirada da propria imagem — o bloco
   escurece um pouco em relacao ao que era, e o texto ganha contraste.

   Some tambem o veu e o teto de 62%: sem ilustracao, o texto tem a largura
   toda de volta. */
@media (max-width: 719px) {
  .ds-saudacao { gap: 0; }
  .ds-saudacao-fundo { display: none; }
  .ds-saudacao::before { display: none; }
  .ds-saudacao-dizeres { max-width: none; }
  .ds-saudacao h1 { font-size: 19px; }
  .ds-saudacao-numeros { gap: var(--e4); }
}

/* ==========================================================================
   SUAS PROVAS — a ficha, no formato da pagina de precos
   14/08/2026. Pedido do dono: *"ao inves de ser medalha, pegar um icone de uma
   prova e colocar os detalhes dela abaixo... e logo abaixo, LIBERAR COM PIX.
   Quando liberar, no mesmo banner ter a opcao do dia 1 e 2"*.

   O desenho vem de `theme-pages/pricing`: icone no alto, preco grande, lista
   de caracteristicas com tique ou X, e a acao ocupando a largura inteira no
   pe. O X importa tanto quanto o tique — recurso que aquela prova NAO tem
   aparece riscado, em vez de sumir. Sumindo, o aluno nao sabe que existe;
   riscado, ele ve o que esta comprando e o que nao esta.
   ========================================================================== */

.fila-provas { display: grid; gap: var(--vao); }

.cartao-prova {
  background: var(--papel);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-cartao);
  padding: var(--pad-cartao);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  transition: transform var(--salto), box-shadow var(--salto);
}
@media (hover: hover) {
  .cartao-prova:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
}

/* O icone da prova, no lugar da medalha. Desenhado, e nao o boneco 3D da
   referencia: aquele e asset do template comercial. Este e uma folha de prova
   com o cronometro em cima — as duas coisas que a tela esta vendendo. */
.cartao-prova-icone {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: var(--raio);
  background: var(--marca-clara);
  color: var(--marca);
  display: grid; place-items: center;
}
.cartao-prova-icone svg { width: 30px; height: 30px; display: block; }
.cartao-prova-topo { display: flex; align-items: center; gap: var(--e4); }
.cartao-prova-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-cartao);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.cartao-prova-janela { margin: 3px 0 0; font-size: var(--t-auxiliar); color: var(--grafite); }

/* O PRECO, grande como na referencia. Prova gratuita nao mostra "R$ 0,00":
   mostra a palavra, porque zero em campo de preco le como erro de sistema. */
.cartao-prova-preco {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--tinta);
  line-height: 1;
}
.cartao-prova-preco .unidade { font-size: 15px; font-weight: 600; color: var(--grafite); letter-spacing: 0; }

/* A FICHA. Tique no que a prova tem, X no que ela nao tem. O X nao e
   vermelho: nao e erro, e ausencia — vermelho gastaria o alarme que a tela
   usa para o que de fato deu errado. A cor tambem nao carrega o recado
   sozinha, porque o desenho do simbolo ja difere (WCAG 1.4.1). */
.cartao-prova-ficha { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cartao-prova-ficha li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-corpo); line-height: 1.45; }
.ficha-marca { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.ficha-marca svg { width: 18px; height: 18px; display: block; }
.ficha-tem { color: var(--acerto); }        /* 5,00:1 */
.ficha-tem + span { color: var(--tinta); }
.ficha-nao { color: var(--grafite); }       /* 5,48:1 */
.ficha-nao + span { color: var(--grafite); }

/* O PE. A acao ocupa a largura inteira, como na referencia. Separado por um
   fio, porque e a linha entre "o que e" e "o que eu faco". */
.cartao-prova-pe {
  border-top: 1px solid var(--linha);
  padding-top: var(--e4);
  display: grid;
  gap: var(--e2);
}
.cartao-prova-pe .botao, .cartao-prova-pe .ds-botao { width: 100%; }

/* Os dois dias, lado a lado a partir de 460px. No celular empilham: dois
   botoes de prova dividindo 343px dariam 160px cada, e "Comecar o dia 1"
   quebra em duas linhas nessa largura. */
/* OS DOIS DIAS LADO A LADO. Eu tinha empilhado por conta propria, achando que
   a faixa com arte e notas nao caberia em meia largura; o dono olhou no site e
   corrigiu — "e para deixar um do lado do outro mesmo". Cabe: o nome da area
   quebra em duas linhas e nada mais muda.

   Abaixo de 640px elas voltam a empilhar, porque ai a arte ficaria do tamanho
   de um selo ao lado de um texto espremido. */
.cartao-prova-dias { display: grid; gap: var(--e2); }
@media (min-width: 640px) { .cartao-prova-dias { grid-template-columns: 1fr 1fr; } }

/* O CARTAO DE CADA DIA — 20/08/2026, pedido do dono: "libera dia 1 e dia 2...
   ter algo mais visual dos dias de prova", com as areas escritas dentro.

   Antes eram dois botoes iguais, e a unica diferenca entre eles era o numero
   no meio da frase: "Comecar o dia 1" e "Comecar o dia 2". Quem chega para
   estudar precisa reconhecer QUAL prova vai fazer antes de ler.

   A cor nao e nova nem decorativa: e a mesma dos cadernos da landing e do selo
   do painel — azul no dia 1, roxo no dia 2 —, agora virando identidade do dia.
   Ela entra pela barra da esquerda e pelo numero grande do tempo.

   Os dois tons PASSAM em AA no branco — medido: azul 5,11:1 e roxo 5,36:1 —,
   entao a escolha de manter o corpo do texto em `--tinta` (12,36:1) nao e de
   contraste, e de hierarquia: se tudo fosse colorido, nada seria destaque. */
/* Uma faixa por dia, EMPILHADAS — e nao duas colunas. A forma veio da maquete
   do dono: arte a esquerda com o botao embaixo, e a direita o campo que troca
   de conteudo quando a prova e entregue. */
.dia-faixa {
  display: grid;
  /* 168px, e nao 132: com a ficha tecnica fora do cartao (20/08/2026) sobrou
     altura, e o dono pediu a arte maior. Acima disso o "5h30" desenhado nela
     comeca a competir com o botao, que e o que a tela quer que se aperte. */
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  /* Cada dia no seu tom, a pedido do dono em 20/08/2026: "colocar cor de fundo
     azul claro" no dia 1 e "roxo claro" no dia 2. O fundo faz o que a barra
     lateral fazia e faz melhor — o dia inteiro vira um bloco reconhecivel, em
     vez de um fio de 4px que so se ve de perto. */
  background: var(--fundo-caderno, var(--papel));
}
.dia-faixa-arte { display: grid; gap: 10px; }
/* A arte JA traz a lombada colorida, o "PRIMEIRO DIA", a duracao e as areas.
   Por isso a faixa nao repete nada disso em texto: seria a mesma informacao
   duas vezes, e a segunda em letra menor. */
.dia-faixa-arte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-p, 8px);
  border: 1px solid var(--linha);
}
.dia-faixa-arte .botao { width: 100%; }
.dia-faixa-corpo { min-width: 0; padding-top: 2px; }
/* "DIA 1" cresceu de 10,5px para 15px em 20/08/2026 — "aumentar escrito DIA 1",
   marcado por ele em cima da propria tela. Em 10,5px ele era um rotulo de
   sistema; e a primeira coisa que o aluno precisa ler no bloco. Ganhou a cor
   do dia junto (4,60:1 no azul claro, 4,81:1 no roxo claro). */
.dia-faixa-titulo {
  font-family: var(--controle);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-caderno);
  margin: 0 0 10px;
}
.dia-faixa-areas { font-size: 14px; font-weight: 600; color: var(--tinta); margin: 0 0 4px; }
.dia-faixa-apoio { font-size: 13px; color: var(--grafite); margin: 0; }
.dia-faixa-sem-nota {
  font-family: var(--display);
  font-size: 22px; font-weight: 600; color: var(--tinta);
  margin: 0 0 4px;
}
/* AS NOTAS DAS DUAS AREAS, o nome EM CIMA e o numero embaixo.

   Na primeira versao os dois dividiam a linha, com `space-between`. Com os dois
   dias lado a lado (20/08/2026) a coluna de texto caiu para ~165px, e
   "Linguagens e Codigos" mais "430,0" nao cabem nisso: o numero saia por cima
   da borda do cartao, cortado ao meio. Empilhado, cabe em qualquer largura.

   O numero em tabular para as duas notas alinharem pela unidade: sem isso
   "430,0" e "1.000,0" saem tortos um sobre o outro. */
.dia-faixa-notas { margin: 0; display: grid; gap: 10px; }
.dia-faixa-notas > div {
  display: grid; gap: 0;
  border-bottom: 1px solid var(--linha); padding-bottom: 8px;
}
.dia-faixa-notas > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dia-faixa-notas dt { font-size: 13px; color: var(--grafite); line-height: 1.35; }
.dia-faixa-notas dd {
  margin: 0;
  font-family: var(--display);
  font-size: 25px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cor-caderno);
}
/* No celular a arte encolhe, mas nao vira selo: e ela que diz que dia e. */
@media (max-width: 460px) {
  .dia-faixa { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .dia-faixa-notas dd { font-size: 22px; }
}


/* A linha de estado de cada dia, quando ele nao esta disponivel para comecar.
   Ela substitui o botao, e nao acompanha: um botao apagado ao lado de um
   texto dizendo a mesma coisa e a mesma informacao duas vezes. */
.cartao-prova-dia-estado {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border-radius: var(--raio);
  background: var(--mesa);
  border: 1px solid var(--linha);
  font-size: 13px; font-weight: 600; color: var(--grafite);
  text-align: center;
}

@media (min-width: 860px) {
  .fila-provas { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}

/* ---------- meus resultados ---------- */
/* A tela "o que eu ja fiz", de 17/08/2026. Reaproveita o cartao de prova
   inteiro — mesma moldura, mesmo topo, mesmo icone — e acrescenta so o que ela
   tem de proprio: o numero do simulado fechado e a linha de cada dia.

   Nao ha cor nova aqui, e isso e de proposito: a tela nova nao pode parecer de
   outra casa. Tudo sai dos tokens ja medidos. */
.resultado-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 var(--e2);
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--marca-clara);
}
.resultado-total-valor {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--marca-escura);   /* 8,05:1 sobre --marca-clara */
  font-variant-numeric: tabular-nums;
}
.resultado-total-rotulo { font-size: 13px; color: var(--grafite); }

.resultado-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* Uma linha por dia. Os dados a esquerda e as acoes a direita; no celular a
   linha quebra e as acoes descem inteiras, em vez de espremer o botao. */
/* CADA DIA NO SEU TOM — 20/08/2026, marcado pelo dono em cima desta tela:
   "colocar fundo azul claro" no dia 1, "roxo claro" no dia 2. E a mesma
   identidade de "Suas provas", e os mesmos dois tons: a cor do caderno a 8%
   sobre branco, onde tudo o que se escreve em cima passa em AA.

   As linhas viraram blocos separados por espaco, e nao por fio: com fundo
   proprio, o fio entre elas empilharia duas divisorias no mesmo lugar. */
.linha-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--fundo-caderno, var(--papel));
}
/* A miniatura do caderno. 84px basta: aqui ela e reconhecimento, nao leitura —
   o "5h30" desenhado nela nao precisa ser lido, precisa ser reconhecido. */
.linha-resultado-arte { flex: none; display: block; width: 84px; }
.linha-resultado-arte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--linha);
}
.linha-resultado-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.linha-resultado-dia {
  font-size: 15px;
  font-weight: 700;
  /* O "Dia 1" leva a cor do caderno, como em "Suas provas". No branco a
     `--tinta` dava 12,36:1; sobre o azul claro a cor do dia da 4,60:1 e sobre
     o roxo claro 4,81:1 — as duas passam em AA. */
  color: var(--cor-caderno, var(--tinta));
}
.linha-resultado-numero {
  font-size: 13px;
  color: var(--grafite);        /* 5,48:1 no branco */
  font-variant-numeric: tabular-nums;
}
.linha-resultado-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Texto so para leitor de tela. Nao e `display: none` nem `visibility:
   hidden` — as duas tirariam o texto da arvore de acessibilidade junto, que e
   o oposto do que se quer. A caixa de 1px com `clip-path` e a receita que
   deixa o conteudo legivel para quem ouve e invisivel para quem ve.

   Nasceu na ficha de "Suas provas": o tique e o X sao `aria-hidden`, entao
   sem esta palavra a lista soaria IGUAL para o que a prova tem e para o que
   ela nao tem — e a diferenca entre as duas coisas e o que o aluno esta
   decidindo comprar. */
.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   AREA DO ALUNO — CAMADA FUTURISTA

   O painel apresentou a nova direcao visual primeiro. Esta camada leva o
   mesmo vocabulario para provas, vitrine, resultados e conta sem alterar a
   estrutura ou a logica dessas telas: profundidade azul, luz turquesa, grade
   tecnica discreta e cartoes claros para leitura longa.
   ========================================================================== */
.corpo-area-futuro {
  background:
    radial-gradient(circle at calc(100% - 120px) 72px, rgba(49, 224, 202, 0.11), transparent 300px),
    radial-gradient(circle at 38% 18%, rgba(93, 135, 255, 0.11), transparent 360px),
    var(--mesa);
}

/* A navegacao continua clara para nao competir com o conteudo. A pagina
   atual recebe apenas uma superficie azulada leve: o aluno passa muito tempo
   aqui e um menu escuro permanente aumentaria o peso visual. */
.corpo-area-futuro .barra-lado {
  background:
    linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
  border-color: #D9E6F7;
}
.corpo-area-futuro .barra-elo[aria-current] {
  color: #274A96;
  border-color: #C9DAF4;
  background: linear-gradient(135deg, #EDF3FF 0%, #E9F8F6 100%);
  box-shadow: 0 8px 18px rgba(27, 64, 118, 0.09);
}
.corpo-area-futuro .barra-elo[aria-current] .barra-icone { color: #0B6872; }

/* Cabecalho das paginas internas. O painel guarda o grande momento escuro com
   o foguete; as telas de uso prolongado ficam claras. A grade e os aneis
   mantem a linguagem tecnologica sem transformar toda pagina em banner. */
.corpo-area-futuro .banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 168px;
  padding: 24px 26px;
  margin-bottom: 24px;
  align-items: center;
  border: 1px solid #D9E6FA;
  border-radius: var(--raio-casca);
  background:
    radial-gradient(circle at 84% 10%, rgba(49, 224, 202, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(242, 247, 255, 0.97));
  box-shadow: 0 18px 40px rgba(27, 64, 118, 0.10);
}
.corpo-area-futuro .banner::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(72, 105, 198, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 105, 198, 0.045) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000);
  mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000);
}
.corpo-area-futuro .banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  right: 42px;
  top: -94px;
  border: 1px solid rgba(72, 105, 198, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(72, 105, 198, 0.035),
    0 0 70px rgba(49, 224, 202, 0.08);
}
.corpo-area-futuro .banner > * { position: relative; z-index: 1; }
.corpo-area-futuro .banner-dizeres { max-width: 620px; }
.corpo-area-futuro .banner-olho { color: #4869C6; }
.corpo-area-futuro .banner h1 { color: var(--tinta); font-size: 30px; }
.corpo-area-futuro .banner-sub { color: var(--grafite); max-width: 55ch; }
.corpo-area-futuro .banner-acao {
  padding: 14px;
  border: 1px solid #D9E6FA;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 24px rgba(27, 64, 118, 0.07);
}
.corpo-area-futuro .banner-alvo { color: var(--grafite); }
.corpo-area-futuro .banner-tempo {
  color: #0B6872;
  border-color: #A9DDD7;
  background: #ECF9F7;
}
.corpo-area-futuro .banner .botao {
  color: #071A38;
  border-color: #31E0CA;
  background: #31E0CA;
  box-shadow: 0 10px 22px rgba(49, 224, 202, 0.20);
}

/* Cartoes de conteudo: a leitura permanece em fundo claro, com profundidade
   e borda fria suficientes para se separar da mesa azulada. */
.corpo-area-futuro .cartao-prova,
.corpo-area-futuro .painel-cartao,
.corpo-area-futuro .cartao {
  border: 1px solid #D9E6FA;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(243, 248, 255, 0.96));
  box-shadow: 0 18px 42px rgba(27, 64, 118, 0.10);
}
.corpo-area-futuro .cartao-prova { position: relative; }
.corpo-area-futuro .cartao-prova::before {
  content: "";
  position: absolute;
  left: var(--pad-cartao);
  right: var(--pad-cartao);
  top: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #4869C6, #31E0CA, transparent 90%);
}
@media (hover: hover) {
  .corpo-area-futuro .cartao-prova:hover {
    transform: translateY(-4px);
    border-color: #B9D6F4;
    box-shadow: 0 24px 54px rgba(27, 64, 118, 0.16);
  }
}
.corpo-area-futuro .cartao-prova-icone {
  color: var(--papel);
  border: 1px solid rgba(140, 240, 227, 0.28);
  background: linear-gradient(145deg, #173F7B, #0B6872);
  box-shadow: 0 10px 24px rgba(23, 70, 122, 0.20);
}
.corpo-area-futuro .cartao-prova-preco { color: #0B6872; }
.corpo-area-futuro .cartao-prova-pe { border-color: #DCE8F8; }
.corpo-area-futuro .cartao-prova-dia-estado {
  border-color: #D9E6FA;
  background: #F2F7FE;
}
.corpo-area-futuro .resultado-total {
  border: 1px solid #CFE4F5;
  background: linear-gradient(135deg, #EDF4FF, #E5FBF7);
}
.corpo-area-futuro .linha-resultado { border-color: #DCE8F8; }

/* Acoes mantem hierarquia: gradiente na principal, superficie clara na
   secundaria e vermelho apenas na acao destrutiva. */
.corpo-area-futuro .botao:not(.discreto):not(.perigo) {
  border-color: #4869C6;
  background: linear-gradient(135deg, #4869C6, #0B6872);
  box-shadow: 0 10px 22px rgba(23, 70, 122, 0.18);
}
.corpo-area-futuro .botao.discreto {
  color: #3658B0;
  border-color: #B9CDF2;
  background: #F4F8FF;
}
.corpo-area-futuro .botao.discreto:hover {
  color: #0B6872;
  border-color: #75CFC6;
  background: #EDFAF8;
}

/* Minha conta: dados em um cartao principal; seguranca e privacidade formam
   duas acoes de mesmo peso visual no desktop e empilham no celular. */
.conta-dados { position: relative; }
.conta-dados::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad-cartao);
  right: var(--pad-cartao);
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #4869C6, #31E0CA, transparent 85%);
}
.conta-grade { display: grid; gap: var(--vao); }
.conta-atalho {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.conta-atalho h2 { margin: 14px 0 7px; }
.conta-atalho-icone {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--papel);
  border-radius: 14px;
  background: linear-gradient(145deg, #173F7B, #0B6872);
  box-shadow: 0 10px 22px rgba(23, 70, 122, 0.18);
}
.conta-atalho-icone svg { width: 24px; height: 24px; display: block; }
.conta-atalho-acao { margin: auto 0 0; padding-top: var(--e3); }

@media (min-width: 760px) {
  .conta-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .corpo-area-futuro .banner {
    min-height: 0;
    padding: 20px;
    align-items: flex-start;
  }
  .corpo-area-futuro .banner h1 { font-size: 25px; }
  .corpo-area-futuro .banner::after { right: -74px; top: -104px; opacity: 0.74; }
  .corpo-area-futuro .banner-acao { width: 100%; }
  .corpo-area-futuro .banner-linha { align-items: stretch; }
  .corpo-area-futuro .banner-linha .botao { flex: 1 1 100%; text-align: center; }
  .corpo-area-futuro .linha-resultado-acoes { width: 100%; }
  .corpo-area-futuro .linha-resultado-acoes .botao { flex: 1 1 150px; text-align: center; }
  .conta-atalho { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .corpo-area-futuro .cartao-prova { transition: none; }
  .corpo-area-futuro .cartao-prova:hover { transform: none; }
}

/* ==========================================================================
   O CARTÃO DE OFERTA — "Simulados disponíveis", 20/08/2026

   Desenho do dono: a arte verde ocupa a metade esquerda com o nome e o preço
   por cima; a metade direita, branca, leva o que a prova inclui e o botão.

   A ARTE É SÓ O PAINEL VERDE do arquivo que ele gerou. A metade branca dele
   vinha com seis linhas de tique DESENHADAS, e ficaram de fora: a ficha tem
   linhas de "inclui" e de "não inclui", e o número delas muda de prova para
   prova. Tique desenhado marcaria como incluso o que a prova não tem — o mesmo
   erro do "90 questões" na arte dos cadernos, em outra tela.

   A ARTE É AZUL, E NÃO VERDE, e a escolha tem número: na faixa onde o nome
   cai, o pior 1% do fundo dá 11,56:1 contra o branco na versão azul e 6,10:1
   na verde. As duas passam; a azul passa com o dobro de folga, e é a cor da
   casa.

   O PREÇO SAIU DAQUI. Sobre a arte ele caía em cima do livro branco desenhado
   e media 1,6:1 — ilegível, e nenhum véu resolvia sem apagar o desenho
   inteiro. Ele foi para o lado do papel, onde dá 12,36:1 e pode ser grande.
   ========================================================================== */
.cartao-oferta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
@media (min-width: 620px) {
  /* 44% para a arte: abaixo disso o livro desenhado nela perde o pé, e acima
     a lista de "o que inclui" começa a quebrar linha em toda entrada. */
  .cartao-oferta { grid-template-columns: 44% minmax(0, 1fr); }
}

.cartao-oferta-arte {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 400px, e não 300: com 300 o `cover` cortava a arte antes do LIVRO ABERTO,
     que é o desenho que dá sentido a ela. Medido no arquivo (615x821): na
     largura da metade do cartão a arte é reduzida a ~0,545, e são precisos
     ~400px de altura para o livro entrar inteiro. */
  min-height: 400px;
  padding: 22px 24px 24px;
  color: #FFFFFF;
  background-color: #012270;
  background-image: url("../marca/cartao-oferta.webp");
  background-size: cover;
  /* `top center`, e a razão é de legibilidade, não de gosto. O arquivo é
     retrato e a metade do cartão é quase quadrada, então `cover` corta bastante
     na vertical. A única faixa LISA da arte é o topo — abaixo dela vêm foguete,
     alvo e livro. Ancorado embaixo, o corte comia justamente essa faixa e o
     nome caía em cima do foguete. Ancorado no topo, o nome tem chão liso e o
     que se perde é o pé do livro. */
  background-position: top center;
  background-repeat: no-repeat;
}
.cartao-oferta-marca { display: flex; align-items: flex-start; gap: 12px; }
/* Sobre o verde, o ladrilho do ícone e o texto trocam de cor: os tons de papel
   e tinta são feitos para fundo claro e sumiriam aqui. */
.cartao-oferta-arte .cartao-prova-icone {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border-color: transparent;
}
.cartao-oferta-arte .cartao-prova-titulo { color: #FFFFFF; }
.cartao-oferta-arte .cartao-prova-janela { color: rgba(255, 255, 255, 0.82); }
.cartao-oferta-lista .cartao-prova-preco { margin: 0; }
/* O "R$" um pouco menor que o número: a moeda é contexto, o valor é a decisão.
   Sem isso os dois competem, e a tela demora a responder "quanto custa". */
.cartao-prova-preco .moeda { font-size: 0.62em; font-weight: 600; margin-right: 2px; }

.cartao-oferta-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 22px;
  background: var(--papel);
}
.cartao-oferta-lista .cartao-prova-ficha { margin: 0; }
/* O botão encosta no pé mesmo quando uma prova tem menos linhas de ficha que
   a vizinha — sem isso, dois cartões lado a lado terminam desalinhados. */
.cartao-oferta-lista .cartao-prova-pe { margin-top: auto; }

/* O MOSAICO DA FICHA — 20/08/2026. O dono perguntou por que eu não usava a
   metade branca do arquivo dele, que traz seis faixas arredondadas desenhadas:
   "essa tem tipo um mosaico que está bonito para adicionar os tópicos dentro".

   A resposta é que a ficha NÃO TEM SEMPRE SEIS LINHAS. Em
   `servicos/ficha_da_prova.py` as linhas de "prova oficial" e "inéditas" viram
   uma só quando a prova é toda de um tipo — cinco linhas, e a sexta faixa
   desenhada ficaria vazia. O mesmo motivo pelo qual os tiques ficaram de fora.

   Então o mosaico é desenhado aqui, e acompanha o número de linhas. A cor é a
   MEDIDA do arquivo dele: #F3F6FD, onde a tinta dá 11,43:1 e o grafite 5,06:1. */
.cartao-oferta-lista .cartao-prova-ficha { display: grid; gap: 7px; }
.cartao-oferta-lista .cartao-prova-ficha li {
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F3F6FD;
}

/* ==========================================================================
   OS WIDGETS DO PAINEL — 20/08/2026

   Pedido do dono, com exemplos de painel de dashboard na mão: "e se o painel
   principal você fizer em widgets? Acho que isso vai dar um tchan a mais".

   ISTO CONTRARIA UMA DECISÃO DELE DE 14/08 — a de que o gráfico ficasse FORA
   da caixa, "é isso que dá leveza". Contraria com autorização: ele viu a tela
   sem os blocos repetidos, achou "sem vida", e pediu a grade. Fica registrado
   para ninguém "consertar" isto de volta achando que foi descuido.

   A REGRA QUE SEGURA A GRADE: cada widget carrega um dado que NÃO existe em
   outro widget. Foi a repetição que deixou o painel confuso da primeira vez —
   os mesmos dois números no banner e nos cartões. Widget bonito repetindo
   número é o mesmo defeito com moldura melhor.
   ========================================================================== */
.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: var(--vao, 26px);
}
.widget {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel, 14px);
  min-width: 0;
}
/* O widget que ocupa a linha inteira: os que têm lista ou gráfico dentro. */
.widget.largo { grid-column: 1 / -1; }

.widget-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.widget-icone {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--marca-clara);
  color: var(--marca-escura);
}
.widget-icone svg { width: 18px; height: 18px; }
.widget-rotulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grafite);
  margin: 0;
  min-width: 0;
}
.widget-valor {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  margin: 6px 0 0;
}
.widget-valor .unidade { font-size: 0.55em; font-weight: 600; color: var(--grafite); }
.widget-pe { font-size: 12.5px; color: var(--grafite); margin: 6px 0 0; }

/* O SELO DE VARIAÇÃO. A cor não carrega o recado sozinha: o sinal está no
   número e a palavra está escrita ao lado (WCAG 1.4.1). */
.widget-selo {
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--marca-clara);
  color: var(--marca-escura);
}
.widget-selo.sobe { background: #E6F6EE; color: #0A6B45; }   /* 5,74:1 */
.widget-selo.desce { background: #FCECEC; color: #A32020; }  /* 5,93:1 */

/* A LINHA DA EVOLUÇÃO dentro do widget. O SVG é esticado na largura de
   propósito (`preserveAspectRatio="none"`), e por isso o ponto é desenhado
   como traço de comprimento zero com ponta redonda — sob o estica, um
   `<circle>` viraria elipse. */
/* 62px, e nao 92: o widget da evolucao passou a ter a largura dos outros
   (20/08, a noite) e a linha precisa caber sem empurrar o pe para fora. */
.widget-linha { display: block; width: 100%; height: 62px; margin-top: 12px; }
.widget-legenda {
  display: flex; justify-content: space-between; gap: 10px;
  list-style: none; margin: 8px 0 0; padding: 0;
  font-size: 12px; color: var(--grafite);
}
.widget-legenda b { display: block; font-size: 14px; color: var(--tinta); }

/* AS CORES DOS WIDGETS — 20/08/2026, pedido do dono com exemplos de dashboard
   coloridos na mão.

   Um tom por widget, todos tirados da paleta que a casa já usa, e todos a 7%
   sobre branco. MEDIDO antes de entrar, com o texto que cai em cima:

   Um tom por widget, todos da paleta da casa, todos a 12% sobre branco:

     widget          fundo     tinta      grafite
     aproveitamento  #E9EDF8   10,56:1    4,68:1
     nota            #E2F0ED   10,55:1    4,67:1
     simulados       #EFEAFA   10,49:1    4,65:1
     posição         #F8EEE4   10,80:1    4,78:1

   Doze por cento, e não catorze: a 14% o pior caso cai para 4,51:1, que passa
   raspando os 4,5 exigidos. A 12% sobra margem para o dia em que alguém mexer
   num tom.

   O âmbar da posição dá 3,45:1 — passa como ELEMENTO GRÁFICO (a WCAG 1.4.11
   pede 3:1) e reprova como texto. Por isso a regra da casa vale aqui inteira:
   a cor pinta o fundo e o ladrilho do ícone, e o texto continua em `--tinta`.
   Colorir o número seria ganhar um tom e perder a leitura. */
.widget.tom-aproveitamento { background: #E9EDF8; border-color: #D8E0F3; }
.widget.tom-aproveitamento .widget-icone { background: #DDE4F7; color: #2F4585; }

.widget.tom-nota { background: #E2F0ED; border-color: #CFE6E0; }
.widget.tom-nota .widget-icone { background: #D7EDE6; color: #075C4C; }

.widget.tom-simulados { background: #EFEAFA; border-color: #E1D7F6; }
.widget.tom-simulados .widget-icone { background: #E9E0FA; color: #5B34A6; }

.widget.tom-posicao { background: #F8EEE4; border-color: #EFDFCC; }
.widget.tom-posicao .widget-icone { background: #F7E8D5; color: #8A4F12; }

.widget.tom-evolucao { background: var(--papel); }

/* OS EXTREMOS DA LINHA — 20/08/2026. O dono viu o widget encolhido e disse
   "vejo apenas as retas e não tem nada nos eixos". Tinha razão: ao encolher o
   gráfico eu levei junto a legenda com os percentuais, e sobrou uma linha sem
   escala. Linha sem ponta escrita é desenho, não informação. */
.widget-extremos {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--grafite);
}
.widget-extremos .direita { text-align: right; }
.widget-extremos b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* A ABERTURA COM OS QUATRO RECURSOS — 20/08/2026, texto novo do dono.

   O conteúdo triplicou: eram selo, título, uma frase e dois botões; agora há
   também quatro recursos com ícone e a linha de condições. Nos 32% de coluna
   que a abertura tinha, isso não cabe de jeito nenhum.

   Então o lado inverteu: o TEXTO passou para a esquerda, com 54%, e a arte foi
   empurrada para a direita. É a forma da própria arte que ele mandou de
   referência — texto à esquerda, foguete à direita. */
@media (min-width: 900px) {
  /* O TEXTO FICA À DIREITA DA ARTE, como sempre esteve — 20/08, correção do
     dono: "é para o texto ficar do lado direito da arte igual já está".

     Eu tinha invertido os lados achando que o conteúdo novo (quatro recursos e
     a linha de condições) não caberia nos 32% de antes. Cabe em 36%, com os
     ícones em 2x2 em vez de quatro em fila. Inverter era resolver por fora um
     problema que era de arrumação. */
  .abertura-publica.abertura-recursos-tem .abertura-texto {
    right: 3%;
    left: auto;
    width: 36%;
  }
  /* QUATRO EM FILA — 20/08, pedido do dono olhando a arte dele: "olha como
     estão os ícones aqui, uns ao lado dos outros".

     De manhã eu tinha posto 2x2 dizendo que em fila o quarto passaria por
     baixo do celular da arte. Isso era verdade com a descrição comprida que eu
     havia escrito; com o texto curto da arte dele, cada coluna fica com ~160px
     e as quatro cabem na coluna de texto sem encostar no aparelho. */
  .abertura-publica.abertura-recursos-tem .abertura-recursos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 14px;
  }
  /* A arte encosta no fim da faixa, e o respiro para o texto vem do
     `padding-left`. Em porcentagem, como o resto: distância em pixel só vale
     numa largura de tela. */
  /* A arte volta ao lugar dela: conteúdo entre ~28% e ~62% da faixa. */
  .abertura-publica.abertura-recursos-tem .abertura-figura {
    padding-right: 13%;
    padding-left: 0;
  }
}

.abertura-recursos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* A arte encosta no fim da faixa, e o respiro para o texto vem do
     `padding-left`. Em porcentagem, como o resto: distância em pixel só vale
     numa largura de tela. */
  /* A arte volta ao lugar dela: conteúdo entre ~28% e ~62% da faixa. */
  .abertura-publica.abertura-recursos-tem .abertura-figura {
    padding-right: 13%;
    padding-left: 0;
  }
}

/* O selo virou pastilha, com o contorno que a arte dele tem. */
.abertura-selo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: #E4EBFF;
}
.abertura-selo-chip span { color: #FFC24D; font-size: 13px; }

.abertura-recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 20px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.abertura-recursos li { display: grid; gap: 3px; min-width: 0; align-content: start; }
/* SEM CAIXA E COLORIDO, como na arte: o ícone é o desenho, e não um quadrado
   com um desenho dentro.

   SAO DOIS JOGOS DE COR, porque são dois fundos. Até 900px a abertura é clara,
   como qualquer outra tela; a partir dali ela vira a faixa azul com a arte. A
   cor que se lê num não se lê no outro, e escrever só a do azul foi o defeito
   que apareceu na primeira foto no celular: nome branco sobre papel branco.

   Medidas, no branco: verde 3,20 · roxo 4,70 · laranja 3,19 · azul 5,56.
   Medidas, no azul #0D3D88: verde 5,57 · roxo 3,81 · laranja 5,78 · azul 4,68.
   Todas acima do 3:1 que a WCAG pede para gráfico. */
.recurso-icone {
  display: block;
  margin-bottom: 9px;
  color: var(--tinta);
}
.recurso-icone svg { width: 30px; height: 30px; display: block; }
.recurso-icone.tom-verde   { color: #0FA37F; }
.recurso-icone.tom-roxo    { color: #7C5CE0; }
.recurso-icone.tom-laranja { color: #D97706; }
.recurso-icone.tom-azul    { color: #2B5CE6; }
.recurso-nome { font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.recurso-texto { font-size: 12.5px; line-height: 1.42; color: var(--grafite); }


/* AS QUEBRAS DE LINHA DO TÍTULO só existem no desktop: no celular a coluna é
   estreita e o texto quebra sozinho, e forçar ali daria linhas de duas
   palavras. */
.so-largo { display: none; }
@media (min-width: 900px) {
  .so-largo { display: inline; }

  /* PESO 700 NESTA ABERTURA, e isto contraria a régua de 17/08 — "peso 700 em
     38px grita; peso 500 em 42px tem autoridade", medida por ele no portal da
     FGV. Contraria a pedido dele: a arte que ele mandou em 20/08 traz o título
     em negrito, e ele pediu "a mesma letra e o mesmo tamanho".

     A família é a MESMA (DM Sans, `--display`) nos dois casos: o que muda é o
     peso. Fica escrito para não parecer que a régua foi esquecida. */
  .abertura-publica.abertura-recursos-tem h1 {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
  }

  /* OS QUATRO NOMES OCUPAM DOIS RENDIMENTOS DE LINHA, cabendo em um ou em
     dois. Numa tela de 1440 as colunas ficam com ~118px e só "Provas
     reelaboradas" quebra em duas linhas: sem esta altura mínima, a descrição
     dela começava 15px abaixo das outras três e a fila ficava dentada. */
  .abertura-publica .recurso-nome { line-height: 1.25; min-height: 2.5em; }

  /* Sobre a faixa azul, o jogo de cor vira o claro. */
  .abertura-publica .recurso-nome  { color: #FFFFFF; }
  .abertura-publica .recurso-texto { color: #E4EBFF; }
  .abertura-publica .recurso-icone.tom-verde   { color: #3DD6A6; }
  .abertura-publica .recurso-icone.tom-roxo    { color: #A78BFF; }
  .abertura-publica .recurso-icone.tom-laranja { color: #FFB347; }
  .abertura-publica .recurso-icone.tom-azul    { color: #7FB0FF; }
  .abertura-publica .botao.botao-branco { border-color: #FFFFFF; }
}


/* OS DOIS BOTÕES DA ABERTURA — 20/08, pedido do dono: "mude a cor dos botões,
   uma fundo branco e outra fundo azul".

   O AZUL LEVA CONTORNO CLARO, e não é enfeite. Fundo azul sobre faixa azul
   mede 2,23:1, abaixo do 3:1 que a WCAG pede para a borda de um controle — a
   pessoa precisa ver ONDE o botão começa. O contorno branco resolve isso e o
   texto branco sobre o azul mede 4,62:1, acima do 4,5:1 de texto.
   O botão branco mede 10,29:1 contra a faixa, e o texto azul-escuro dentro
   dele, os mesmos 10,29:1. */
.abertura-publica .botao.botao-azul {
  background: #3A6BF0;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
.abertura-publica .botao.botao-azul:hover { background: #2F5FE0; }
/* O CONTORNO AZUL NAO E ENFEITE: até 900px este botão branco fica sobre papel
   branco, e sem borda não há botão nenhum na tela — só um texto solto. É o
   mesmo contorno que a arte do dono tem. */
.abertura-publica .botao.botao-branco {
  background: #FFFFFF;
  border: 1px solid #3A6BF0;
  color: #16337A;
}
.abertura-publica .botao.botao-branco:hover { background: #EAF0FF; }


/* O CABECALHO DE "SUAS PROVAS" SO NO DESKTOP — 20/08/2026, pedido do dono.
   860px e a mesma dobra em que a area do aluno troca a fita de menu pela
   coluna lateral; abaixo dela, "celular".

   A secao continua no DOM e perde toda a altura. O H1 fica invisivel mas
   presente: quem navega por leitor de tela usa o titulo da pagina para saber
   onde entrou, e uma tela sem H1 nenhum nao tem esse aviso. */
@media (max-width: 859px) {
  .banner.banner-so-desktop {
    display: block;
    padding: 0;
    margin: 0;
    gap: 0;
  }
  .banner-so-desktop .banner-olho,
  .banner-so-desktop .banner-sub,
  .banner-so-desktop .banner-acao { display: none; }
  .banner-so-desktop h1 {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .elo-so-desktop { display: none; }
}

/* ============================================================
   O BANNER DE CONSENTIMENTO DA MEDICAO DE CAMPANHA

   Gemeo do que existe em `site.css`, e gemeo de proposito: as duas cascas
   publicas tem chao diferente (esta e CLARA, a de `site.css` e escura), entao
   o desenho e o mesmo e a paleta nao. Copiar aqui e o que impede que um ajuste
   de cor numa superficie vaze para a outra — regra 2 do CLAUDE.md.

   Nesta casca o banner alcanca `/termos`, `/privacidade` e a pagina de erro.
   Ver `app/templates/_consentimento.html`.
   ============================================================ */
.consentimento[hidden] { display: none; }

.consentimento {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: 16px; width: min(680px, calc(100% - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha-forte);
  box-shadow: 0 18px 44px rgba(42, 53, 71, .18);
}
/* Sem `min-width: 0` o texto longo nao deixa a faixa encolher e empurra os
   botoes para fora da tela no celular — regra 1 do CLAUDE.md. */
.consentimento-texto { flex: 1 1 260px; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--grafite); }
.consentimento-texto strong { color: var(--tinta); }
.consentimento-texto a { color: var(--marca); text-decoration: underline; }
.consentimento-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.consentimento-botao {
  flex: 0 1 auto; min-width: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 10px; font: inherit; font-size: .9rem; font-weight: 600;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linha-forte);
}
.consentimento-botao:hover { border-color: var(--marca); }
.consentimento-botao-sim { background: var(--caneta); color: #FFFFFF; border-color: var(--caneta); }
.consentimento-botao-sim:hover { background: var(--caneta-escura); border-color: var(--caneta-escura); }

@media (max-width: 520px) {
  .consentimento { bottom: 8px; padding: 14px; }
  .consentimento-botoes { width: 100%; margin-left: 0; }
  .consentimento-botao { flex: 1 1 0; text-align: center; }
}