/* Identidade visual do prototipo-telas.html, sem nenhuma dependencia
   externa: as fontes sao as do proprio sistema. Uma folha de estilo 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. */

/* ---------------------------------------------------------------------------
   PALETA DESCUBRA

   Tirada dos prints do descubrasolucoes.com: verde-agua nos botoes e icones,
   ciano na marca, tinta azul-ardosia nos titulos, fundo branco frio e
   verde-agua palido nos chips. O creme anterior foi descartado — lia como
   antigo.

   UM AJUSTE FOI NECESSARIO, E ELE E DELIBERADO. O verde-agua vivo da Descubra
   (#0FA898) mede 2,97:1 contra branco. Texto branco em cima dele reprova na
   WCAG — a propria Descubra tem isso hoje no botao "Enviar Mensagem". Copiar
   a cor exata seria copiar o defeito junto.

   Entao a familia e a mesma, com dois papeis:

     --marca       #0A8073  4,83:1  onde HA texto: botao, link, rotulo
     --marca-viva  #0FA898  2,97:1  onde NAO ha texto: barra, chip, grafico

   Mesma leitura de marca, texto legivel. Vale igual para o ciano: #1BA8C4
   pinta, #12758A escreve.

   As cores de AREA (LC, CH, CN, MT) continuam as mesmas — foram medidas de
   novo contra o branco novo e passam todas (10,3 / 5,0 / 6,1 / 7,5).

   Medicao em scratchpad/contraste.py.
   --------------------------------------------------------------------------- */
/* ===========================================================================
   PALETA "BROADSHEET" — 10/08/2026

   Substitui a paleta Descubra. O dono mandou um layout novo (13 telas em
   `layout alterado/`, feitas a partir do PROMPT-LAYOUT.md) e decidiu:
   *"é para usar todas as cores que encaminhei do novo layout... não preocupar
   com layout da descubra"*.

   O que mudou de essencial: o verde deixou de ser verde-agua claro e virou
   VERDE-FLORESTA ESCURO, e com isso o problema dos dois tons acabou — o
   #0f3d34 mede 12,09:1 no branco e o #0f6b52 mede 6,47:1, os dois muito
   acima do piso. Nao ha mais um tom que "so pinta" na familia da marca.

   Todo par abaixo foi medido antes de entrar (scratchpad/contraste.py):

     tinta   #201e1d  sobre fundo  14,78 · sobre cartao 16,60
     grafite #605d5d  sobre fundo   5,80 · sobre cartao  6,52
     marca   #0f6b52  sobre fundo   5,76 · sobre cartao  6,47
     branco           sobre barra  12,09
     barra   #0f3d34  sobre branco 12,09  (texto da pilula ativa)

   A UNICA cor que continua so pintando e o #1f9478 (3,77:1) — barra de
   grafico e preenchimento, nunca texto.
   =========================================================================== */
:root {
  /* superficie */
  --papel: #FFFFFF;
  --fundo: #EEF3EE;          /* verde-acinzentado muito claro, do layout novo */
  --linha: #E1E6E2;
  --tinta: #201E1D;          /* quase-preto quente — 14,78:1 no fundo */
  --grafite: #605D5D;        /* 5,80:1 no fundo */
  --grafite-claro: #605D5D;  /* virou o mesmo que --grafite: o tom antigo era
                                azulado e brigava com o verde novo */

  /* A MARCA: verde-floresta.
     Nao ha mais divisao entre "o que escreve" e "o que pinta" na familia da
     marca — os dois tons passam com folga. `--marca-viva` continua existindo
     porque telas antigas a usam, mas agora aponta para um tom que TAMBEM
     escreve, entao nao ha risco de alguem apoiar texto nela por engano. */
  --marca: #0F6B52;          /* 6,47:1 no cartao · 5,76:1 no fundo */
  --marca-escura: #0A2E24;
  --marca-viva: #0F6B52;
  --marca-clara: #E3F3ED;    /* fundo de chip */

  /* Verde de PREENCHIMENTO. 3,77:1 — o unico da paleta que nao escreve.
     Barra de grafico, area de grafico, filete. Nunca texto. */
  --marca-pintura: #1F9478;

  /* Verde para escrever SOBRE FUNDO ESCURO. A paleta nova e escura, entao ela
     nao tinha um tom que servisse aqui: o `--marca` sobre o bloco escuro da
     porta de entrada media 2,57:1 — o "5h30" praticamente sumia. Este mede
     6,72:1 sobre --tinta. Nao confundir com --marca: aquele so serve em fundo
     claro, este so em fundo escuro. */
  --marca-no-escuro: #3FB894;

  /* Cor secundaria. Era o ciano do logotipo da Descubra; virou o verde
     profundo da barra, para a tela ter uma familia so. */
  --ciano: #0F3D34;
  --ciano-vivo: #1A5C4D;

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

  /* A barra lateral do layout novo: verde-floresta profundo, com degrade.
     Branco em cima mede 12,09:1 — nao ha mais o aperto que o verde-agua
     impunha, em que cada tom de apoio raspava o piso de 4,5. */
  --barra: #0F3D34;
  --barra-alto: #1A5C4D;     /* topo do degrade */
  --barra-texto: #D4DCDA;    /* item de menu: 8,66:1 — o branco a 82% do design */
  /* O rotulo de grupo. Duas correcoes sobre o design, e a segunda so apareceu
     no navegador: (1) o branco a 45% dele da 3,73:1 e reprova; (2) a barra tem
     DEGRADE, e medir contra o verde escuro do pe nao vale nada — o que decide
     e o ponto mais CLARO, no topo (#1A5C4D), onde o rotulo do primeiro grupo
     de fato se apoia. Este tom da 5,10:1 la em cima e 7,88:1 embaixo. */
  --barra-fraco: #C8D3D0;

  --mesa: #E1E7E2;           /* atras da casca; nenhum texto em cima */

  /* Acao */
  --caneta: #0F6B52;
  --caneta-escura: #0A2E24;
  --caneta-clara: #E3F3ED;

  /* os dois dias de prova */
  --caderno-azul: #0F3D34;   /* dia 1 */
  --caderno-amarelo: #0F6B52;/* dia 2 */
  --caderno-rosa: #AA0B56;

  /* estados, do layout novo, todos medidos contra o proprio fundo */
  --erro: #AA0B56;           /* 6,62:1 sobre --erro-fundo */
  --erro-fundo: #FFF1F4;
  --acerto: #1C6B32;         /* 5,91:1 sobre --acerto-fundo */
  --acerto-fundo: #EAF6EC;
  --aviso: #5C4200;          /* 8,61:1 sobre --aviso-fundo */
  --aviso-fundo: #FFF4DD;

  /* ARREDONDA O QUE SE TOCA, MANTEM RETO O QUE SE LE.
     Continua valendo: raio macio diz "isto reage ao toque", canto discreto diz
     "isto e para ler". Os cartoes da Descubra sao bem arredondados, entao o
     raio de superficie subiu junto. */
  --raio: 12px;         /* botao, campo, menu: o que responde ao dedo */
  --raio-papel: 14px;   /* cartao e bloco, como na referencia */
  --raio-cartao: 18px;  /* cartao da area do aluno */
  --raio-casca: 26px;   /* a casca do aplicativo e a barra lateral dentro dela */

  /* SANS ARREDONDADA, a mesma pilha do layout do admin.
     Primeiro eu tinha posto serifa (Georgia), tirada do arquivo do ALUNO, que
     pede `Source Serif 4`. Errado: o dono aprovou o layout do ADMIN, e la a
     pilha e outra — sem serifa e arredondada. Duas telas do mesmo pacote com
     tipografias diferentes; segui a que ele viu e aprovou.

     Nada vem de CDN: `ui-rounded` e `SF Pro Rounded` sao do proprio sistema
     no iPhone e no Mac, e onde nao existirem cai em Segoe UI e system-ui. */
  --display: -apple-system, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --corpo: -apple-system, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --controle: -apple-system, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Duas sombras, como no layout novo: a curta para o que encosta na
     superficie, a larga para o cartao que flutua sobre o fundo. */
  --sombra: 0 1px 3px rgba(20, 30, 28, 0.08);
  --sombra-alta: 0 8px 24px rgba(20, 30, 28, 0.08);
}

* { 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;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.marca {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
}
.marca span { color: var(--marca); }
.topo nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.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;
}

/* ---------- cartao ---------- */
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-papel);
  padding: 22px 18px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
}
.cartao-cab {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
.cartao-cab h1, .cartao-cab h2 {
  font-family: var(--display);
  font-size: 19px;
  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.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: #EDEFF2; 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: #EDEFF2;
  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. */
.cartao-area {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 6px solid var(--cor-area, var(--grafite));
  border-radius: var(--raio-papel);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.cartao-area:last-child { margin-bottom: 0; }
.area-identidade {
  min-width: 96px;
  border-right: 1px solid var(--linha);
  padding-right: 16px;
}
.area-identidade .sigla {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cor-area, var(--tinta));
}
.area-identidade .nome {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--grafite);
}
.area-numeros { text-align: right; }
.area-numeros .acertos {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.area-numeros .de {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grafite);
  margin-top: 2px;
}
.area-numeros .brancos { display: block; font-size: 11.5px; color: var(--aviso); }
/* A barra ocupa a linha inteira, embaixo dos dois blocos. */
.cartao-area .barra-area { grid-column: 1 / -1; width: 100%; }

@media (max-width: 400px) {
  .area-identidade { min-width: 78px; padding-right: 12px; }
  .area-identidade .sigla { font-size: 24px; }
  .area-numeros .acertos { font-size: 22px; }
}

/* 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;
}
.pastilha-r {
  font-size: 13px;
  font-weight: 600;
  border-radius: 99px;
  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: #C9C6D8; }

/* 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; }
.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. */
.abertura-publica {
  display: grid;
  gap: 26px;
  padding: 26px 4px 34px;
  border-bottom: 2px solid var(--tinta);
}
.abertura-texto { min-width: 0; }
.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;
}
.abertura-publica h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.08;
  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-rodape {
  margin: 18px 0 0;
  font-family: var(--controle);
  font-size: 12.5px;
  color: var(--grafite-claro);
}

/* 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; }

/* ---------- 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: #EDF1F3;
  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;
}

/* ---------- a fita do cansaco ---------- */
/* Uma faixa, e nao um cartao: quebra o ritmo de blocos brancos empilhados sem
   virar "bloco escuro arredondado no fim", que e o que o dono rejeita. */
.fita {
  display: grid;
  gap: 16px;
  align-items: center;
  margin-top: 40px;
  padding: 26px 20px;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--raio-papel);
}
.fita-numero {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: var(--marca-no-escuro);   /* 6,72:1 sobre o bloco escuro */
}
.fita-texto h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--papel);
}
.fita-texto p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #A9BAC8;   /* 7,3:1 sobre a tinta */
}

/* ---------- 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. */
.entrega { margin: 0; }
.entrega > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.entrega > div:last-child { border-bottom: 0; }
.entrega dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.entrega dd {
  margin: 6px 0 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; }
.secao-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  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; }
/* Canto um pouco mais macio que o resto do papel e uma sombra muito curta: o
   caderno e o unico objeto da pagina que deve parecer que esta POUSADO sobre
   ela, e nao impresso nela. */
.caderno {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 10px solid var(--cor-caderno);
  border-radius: var(--raio-papel) var(--raio) var(--raio) var(--raio-papel);
  padding: 22px 20px;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.05);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.caderno:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 42, 56, 0.10);
}
.caderno.azul { --cor-caderno: var(--caderno-azul); }
.caderno.amarelo { --cor-caderno: var(--caderno-amarelo); }
.caderno-rotulo {
  font-family: var(--controle);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite-claro);
  margin: 0;
}
.caderno-tempo {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--cor-caderno);
  margin: 4px 0 2px;
  line-height: 1;
}
.caderno-areas {
  font-family: var(--controle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 10px 0 6px;
}
.caderno p.detalhe { margin: 0; color: var(--grafite); font-size: 14.5px; line-height: 1.6; }

/* ---------- 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. */
  .abertura-publica {
    grid-template-columns: 1fr minmax(240px, 300px);
    gap: 40px;
    align-items: center;
    padding: 44px 4px 40px;
  }
  .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; }
  .cadernos { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ==========================================================================
   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. */
.botao.claro {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}
.botao.claro:hover { background: #fff; }

/* ---------- 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); }
.dia-2 { --cor-caderno: var(--caderno-amarelo); }

/* 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 de um grid: no celular continuam em
   coluna, e a partir de 900px ficam lado a lado — e o aluno enxerga evolucao,
   areas e o que estudar sem rolar tres telas.

   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: 20px 18px;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
}
/* 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 ---------- */
.areas-quadro { display: grid; gap: 16px; margin-top: 16px; }
.area-quadro-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.area-sigla {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cor-area);
  flex: 0 0 auto;
}
.area-nome { font-size: 13.5px; color: var(--grafite); flex: 1 1 auto; }
.area-valor {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
/* `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(--marca-clara); }
progress.barra-area::-webkit-progress-value { background: var(--cor-area); }
progress.barra-area::-moz-progress-bar { background: var(--cor-area); }
.area-detalhe { font-size: 12px; color: var(--grafite-claro); margin: 5px 0 0; }

/* ---------- onde perdeu ponto ---------- */
.atencao { list-style: none; padding: 0; margin: 14px 0 0; }
.atencao li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}
.atencao li:last-child { border-bottom: 0; padding-bottom: 0; }
.atencao-tema { font-size: 15px; }
.atencao-numero {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--erro);
  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; }
  .areas-quadro { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .grafico { height: 150px; }
}

@media (min-width: 900px) {
  /* Duas colunas de painel. O grafico de evolucao pede a linha inteira: ele e
     uma serie no tempo, e espremido em meia largura vira rabisco. */
  .paineis { grid-template-columns: 1fr 1fr; align-items: start; }
  .painel-largo { grid-column: 1 / -1; }
}

/* "H23" nao diz nada a um aluno. O texto da Matriz de Referencia vem na
   frente e o codigo fica ao lado, pequeno, para quem procura por ele. */
.atencao li { flex-wrap: wrap; }
.atencao-tema { flex: 1 1 auto; line-height: 1.45; }
.atencao-codigo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grafite-claro);
  border: 1px solid var(--linha);
  border-radius: 99px;
  padding: 1px 7px;
}

/* ==========================================================================
   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 verde exato da barra.** O do modelo mede 2,07:1 com o texto branco que
     ele mesmo poe em cima. Aqui a barra e `--barra` #0A7568, o verde mais claro
     que ainda aguenta branco (5,59:1). Se alguem clarear isso para ficar igual
     ao print, o menu inteiro sai de norma — e a barra e a unica coisa que
     aparece em TODAS as telas da area.
   - **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.
   ========================================================================== */

.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 ---------- */
/* Verde-agua, e nao mais azul-ardosia. Ela separa a navegacao do trabalho por
   COR, e nao por um risco de 1px: o olho sabe onde termina o menu sem procurar
   a borda — e agora sabe tambem, pela cor, que esta na area do ALUNO. (O admin
   continua com a barra dele; distinguir as duas antes da leitura foi decisao
   de 07/08 e nao mudou.)

   Todo tom de texto que anda em cima dela foi medido contra #0A7568:
   branco 5,59 · --barra-texto 5,01 · --barra-fraco 4,50, que e o piso. */
/* No celular a barra e a faixa de cima da casca, e por isso o raio dela repete
   o raio da casca nos dois cantos superiores. Com canto reto o verde vazaria
   por cima do arredondado do pai. */
.barra-lado {
  background: linear-gradient(180deg, var(--barra-alto), var(--barra));
  color: var(--papel);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.barra-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--papel);
}
/* Quadrado branco com a sigla em verde. Era verde sobre a barra escura; numa
   barra verde ele sumiria dentro dela. */
.barra-sigla {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: var(--papel);
  color: var(--marca);      /* 4,83:1 */
  display: grid;
  place-items: center;
  font-family: var(--controle);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.barra-nome {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.barra-nome .ponto { color: var(--marca-clara); }

/* O PE DA BARRA: quem esta logado e a saida.
   Mesmo bloco do admin. Cartao claro sobre o verde — e o contraste do cartao
   contra a barra que destaca a saida sem ela precisar gritar. `margin-top:
   auto` gruda no rodape, entao ele fica no mesmo lugar em toda tela,
   independentemente de quantos itens a navegacao tenha naquela. */
.barra-pessoa {
  margin-top: auto;
  background: var(--papel);
  border-radius: var(--raio-papel);
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.barra-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  background: var(--marca-clara);
  color: var(--marca-escura);   /* 13,9:1 sobre o verde palido */
  display: grid;
  place-items: center;
  font-family: var(--controle);
  font-weight: 700;
  font-size: 12.5px;
}
.barra-pessoa-dizeres { min-width: 0; flex: 1; }
.barra-pessoa-nome {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);          /* 16,6:1 no cartao branco */
}
.barra-pessoa-sub {
  display: block;
  font-size: 10.5px;
  color: var(--grafite);        /* 6,52:1 */
  margin-top: 1px;
}
/* A palavra tem 19px de largura; o ALVO precisa ter 44. A area de toque vem
   do preenchimento, e nao do texto — sem isto, sair do sistema no celular
   depende de acertar um alvo de menos de 20px. */
.barra-sair {
  font-family: var(--controle);
  font-size: 12px;
  font-weight: 700;
  color: var(--marca);          /* 6,47:1 no branco */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border-radius: var(--raio);
}
.barra-sair:hover { background: var(--marca-clara); }

/* 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; padding: 6px 10px 6px 6px; }
.barra-pessoa-dizeres { display: none; }
.barra-nav { grid-column: 1 / -1; grid-row: 2; }

.barra-nav { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
/* No celular a navegacao e uma fita de pilulas, 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: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--barra-fraco);
  margin: 0;
}
.barra-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.barra-elo {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--controle);
  font-size: 15px;
  font-weight: 500;
  color: var(--barra-texto);
  text-decoration: none;
  min-height: 44px;        /* alvo de toque (4.20) */
}
.barra-elo:hover { background: rgba(255, 255, 255, 0.08); color: var(--papel); }
/* 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.
   Bloco BRANCO cheio sobre o verde, como no modelo — o item ativo la e a unica
   coisa branca da barra, e e o que faz o olho achar onde esta sem procurar. */
/* O item atual e um bloco VERDE MAIS CLARO que a barra, com texto branco
   (6,47:1) — nao uma pilula branca. A diferenca importa: a pilula branca
   gritava mais que o conteudo da tela, e o dono reparou na hora. Verde sobre
   verde destaca sem roubar a atencao. */
.barra-elo[aria-current] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--papel);
  font-weight: 600;
}
/* Icone desenhado, do layout entregue: SVG em linha, tracado em
   `currentColor` para acompanhar a cor do item (apagado quando inativo,
   branco quando ativo). 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; }

/* ---------- coluna de trabalho ---------- */
.area-corpo {
  flex: 1;
  min-width: 0;
  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; }
.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: 99px;
  background: var(--marca-clara);
  border: 1px solid #BFE4DC;
  color: var(--marca-escura);   /* 5,84: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;
}

/* ---------- 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. As classes de variante ficam sem cor propria, mas
   continuam existindo porque os templates as usam. */
.cartao-numero.ciano,
.cartao-numero.terra { 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 */
}
/* Dentro do cartao pintado ela vira a MEDALHA do modelo: circulo escuro, glifo
   branco. Sobre pastel, o quadrado verde-agua palido praticamente sumiria; e a
   medalha e o que da peso ao numero ao lado. */
.cartao-numero .cartao-icone {
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);      /* 14,55:1 */
}

.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: 99px;
  /* 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, no formato do layout ---------- */
/* Aqui nasceu tambem um `.trilho` proprio, que ninguem usou e que — por vir
   depois na folha — sobrescrevia o `.trilho` do desempenho por tema. As barras
   desta area sao `<progress class="barra">`, que ja existia. */
.sigla-area {
  font-family: var(--controle);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--marca-clara);
  color: var(--marca-escura);
}
.area-LC .sigla-area { background: #E2F1F5; color: var(--caderno-azul); }
/* NAO e o --caderno-rosa: aquele mede 4,39:1 sobre este fundo e reprova em
   texto de 11px. Este tom escuro da 5,42:1. A sigla e pequena e e a unica
   coisa escrita dentro da pastilha — nao ha onde apoiar a leitura se ela
   falhar. Achado por varredura de contraste em 07/08/2026. */
.area-CH .sigla-area { background: #FBEDE4; color: #9A4A25; }
.area-MT .sigla-area { background: #E2F1F5; color: var(--ciano); }

/* ---------- 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; }

.cartao-dia {
  background: var(--papel);
  border: 0;
  border-radius: var(--raio-cartao);
  padding: 18px;
  box-shadow: var(--sombra-alta);
}
.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: #F2F2F5; color: var(--grafite); }

.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: 99px;
  background: #F2F2F5;
  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: #0A7550; }       /* 5,09: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-color: #E8DCC4; background: #FEFCF7; }
.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. */
  .barra-lado { display: flex; }
  .barra-pessoa { margin-top: auto; padding: 11px 12px; }
  .barra-pessoa-dizeres { display: block; }
  /* A barra e a unica coisa que flutua. Encostada nas bordas de cima e de
     baixo por uma margem so, e arredondada nos quatro cantos: e o desenho do
     layout de 10/08. Sem casca por tras, entao a margem daqui e a unica —
     nao ha mais duas medidas para manter em sincronia. */
  .barra-lado {
    flex: 0 0 264px;
    width: 264px;
    margin: 14px 0 14px 14px;
    border-radius: var(--raio-casca);
    height: calc(100vh - 28px);
    position: sticky;
    top: 14px;
    overflow-y: auto;
    padding: 20px 15px;
    gap: 24px;
  }
  /* 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: 12px;
    border-color: transparent;
    padding: 11px 12px;
    min-height: 0;
  }
  .barra-elo:hover { background: rgba(255, 255, 255, 0.08); border-color: transparent; }
  .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; }
  /* `minmax(0, ...)` e nao `1fr`: o minimo automatico de uma coluna de grid e
     o conteudo, entao os cartoes empurravam a pagina para o lado em vez de
     encolher. Com 220px de piso eles quebram para duas linhas antes de ficarem
     estreitos demais para o rotulo. */
  .cartoes-numero { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
  .cartao-numero {
    padding: 22px 20px;
    border-bottom: 0;
    border-right: 1px solid var(--linha);
  }
  .cartao-numero:last-child { border-right: 0; }

  /* 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. */
  .fila-provas { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
  .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; }
}

/* ==========================================================================
   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; }
.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. */
.caixa-ficha .ficha-publica { grid-template-columns: repeat(4, 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 de quatro nao cabe: volta a ser o quadro 2x2 da
     capa, que e a forma original desta ficha. */
  .caixa-ficha .ficha-publica { grid-template-columns: 1fr 1fr; }
  .caixa-ficha .ficha-publica > div { padding: 13px 10px; }
  .caixa-ficha .ficha-publica > div:nth-child(2n) { border-right: 0; }
  .caixa-ficha .ficha-publica dd { font-size: 24px; }
}

/* 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: #6B4500;
  padding: 11px 13px;
  font-size: 13.5px;
}