/* IBETP AVA — folha de estilo do ambiente de estudo.
   ---------------------------------------------------------------------------------------
   Sobre os tokens: a auditoria mandou usar apenas as variáveis do tema (--ibetp-navy-900 e
   companhia). Conferi as páginas publicadas e essas variáveis NUNCA são declaradas — o tema
   as consome com var(--ibetp-navy-900,#12283E), ou seja, vive dos fallbacks; três delas
   (--ibetp-emerald-600, --ibetp-radius-lg, --ibetp-shadow-sm) são usadas sem fallback
   nenhum e hoje não resolvem para valor algum.
   Então fazemos as duas coisas ao mesmo tempo: consumimos o token do tema e declaramos o
   valor observado como fallback. O AVA combina com o site hoje e passa a herdar sozinho no
   dia em que o tema definir as variáveis de verdade. Nada aqui inventa cor nova.
   ---------------------------------------------------------------------------------------
   Contraste: todo par texto/fundo abaixo foi medido pelo algoritmo WCAG 2.1 de luminância
   relativa. Nenhum fica abaixo de 4,5:1; nenhum texto grande abaixo de 3:1. */

.prep {
  /* --- cores da marca, herdadas do tema quando ele as declarar --- */
  --navy-900: var(--ibetp-navy-900, #12283E);
  --navy-800: var(--ibetp-navy-800, #1C3854);
  --navy-700: #27496B;
  --navy-50:  #EEF3F8;
  /* Tinta de texto sobre o tom --navy-50. Existe porque no modo escuro --navy-900
     continua sendo SUPERFÍCIE (barra do topo, botão de marca) e não serve como cor de
     texto: usá-lo nos dois papéis deixava a barra branca com letra branca. */
  --tinta:    var(--ibetp-navy-800, #1C3854);
  --verde-700: var(--ibetp-green-700, #0F7654);
  --verde-800: #0B5C41;
  --verde-50:  #E9F6F0;
  --ouro-600:  #916500;
  --ouro-50:   #FDF4E3;

  /* --- superfícies e traço --- */
  --surf:   #FFFFFF;
  --surf-2: #F6F8FB;
  --surf-3: #EDF2F7;
  --linha:  var(--ibetp-border, #E2E8F0);
  --linha-f: #CBD5E1;

  /* --- texto --- */
  --txt:   var(--ibetp-navy-900, #12283E);   /* 15,1:1 sobre branco */
  --txt-2: #4A5A6E;                          /*  7,2:1 sobre branco */
  --txt-3: #5F6E84;                          /* 4,9:1 sobre branco; 4,6:1 sobre surf-3 */
  --txt-inv: #FFFFFF;

  /* --- estados --- */
  --ok: var(--ibetp-green-700, #0F7654); --ok-fraco: #E9F6F0;
  --perigo: #B3261E;                     --perigo-fraco: #FDECEA;
  --aviso: #8A5300;                      --aviso-fraco: #FDF3E2;
  --foco: #B45309;

  /* --- raio, sombra, escala de 8pt --- */
  --r-s: var(--ibetp-radius-sm, 8px);
  --r:   var(--ibetp-radius-lg, 12px);
  --r-g: var(--ibetp-radius-xl, 16px);
  --pill: 999px;
  --som:   var(--ibetp-shadow-sm, 0 1px 2px rgba(18,40,62,.06), 0 2px 8px rgba(18,40,62,.05));
  --som-f: 0 2px 6px rgba(18,40,62,.09), 0 12px 28px rgba(18,40,62,.10);
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px;
  --trilho: 240px;
  --topo-h: 56px;
  --leitura: 72ch;

  /* --- tipografia do tema --- */
  --f-tit: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-txt: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;

  color: var(--txt);
  background: var(--surf-2);
  font: 400 16px/1.65 var(--f-txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.prep *, .prep *::before, .prep *::after { box-sizing: border-box; }
.prep h1, .prep h2, .prep h3, .prep h4 {
  font-family: var(--f-tit); font-weight: 700; line-height: 1.25;
  letter-spacing: -.012em; color: var(--txt); margin: 0 0 var(--e1);
}
.prep h1 { font-size: clamp(22px, 2.6vw, 30px); }
.prep h2 { font-size: clamp(19px, 2.1vw, 23px); font-weight: 600; }
.prep h3 { font-size: 17px; font-weight: 600; }
.prep p  { margin: 0 0 var(--e2); }
.prep a  { color: var(--verde-800); }

/* Modo escuro segue a preferência do sistema. Todos os pares foram remedidos: o verde e o
   vermelho da versão clara não passam sobre fundo escuro, então invertem de luminosidade. */
@media (prefers-color-scheme: dark) {
  .prep:not([data-tema="claro"]) {
    --surf: #0D1F31; --surf-2: #081726; --surf-3: #13293D;
    --linha: #1E364C; --linha-f: #2A4761;
    --txt: #E8F1F8; --txt-2: #AFC4D6; --txt-3: #93AABF; --txt-inv: #081726;
    --navy-900: #0A1B2B; --navy-800: #16304A; --navy-50: #142C42;
    --tinta: #E8F1F8;
    --verde-700: #4ADE9E; --verde-800: #6EE7B7; --verde-50: #0A2B20;
    --ouro-600: #FCD34D; --ouro-50: #2C2004;
    --ok: #4ADE9E; --ok-fraco: #0A2B20;
    --perigo: #FCA5A1; --perigo-fraco: #2C100E;
    --aviso: #FBBF4A; --aviso-fraco: #2B1E05;
    --foco: #FBBF24;
    --som: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
    --som-f: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.45);
  }
}

/* ============================================================== acessibilidade */
.prep-sr, .prep-pular {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.prep-pular:focus {
  position: fixed; top: 8px; left: 8px; z-index: 60; width: auto; height: auto;
  clip: auto; margin: 0; padding: 10px 16px; background: var(--navy-900);
  color: #fff; border-radius: var(--r-s); font: 600 15px var(--f-txt);
}
.prep :focus-visible {
  outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r-s);
}
@media (prefers-reduced-motion: reduce) {
  .prep *, .prep *::before, .prep *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ===================================================================== casca */
.prep[data-casca] { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.prep-topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e2);
  height: var(--topo-h); padding: 0 var(--e2);
  background: var(--navy-900); color: #fff;
}
.prep-marca { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-tit); }
.prep-marca-n { font-weight: 800; font-size: 17px; letter-spacing: .01em; }
.prep-marca-s { font-weight: 500; font-size: 13px; color: #B9CDE0; }
@media (max-width: 420px) { .prep-marca-s { display: none; } }

.prep-cargo {
  flex: 1 1 auto; min-width: 0; max-width: 460px;
  /* 40px de altura: no celular este é o botão de trocar de cargo, e 30px era apertado
     para o dedo. A barra tem 56px, então 40 cabe com folga. */
  display: flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--pill);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  font: 500 14px var(--f-txt); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prep-cargo::after { content: '⌄'; margin-left: auto; opacity: .8; }
.prep-cargo:hover { background: rgba(255,255,255,.16); }

.prep-eu { margin-left: auto; display: flex; align-items: center; gap: var(--e1); }
.prep-eu-nome {
  font-size: 14px; color: #D7E5F1; max-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) { .prep-eu-nome { display: none; } }
/* Três classes para vencer `.prep .btn-ghost`, que vem depois no arquivo. Sem isto o
   "Sair" fica cinza-azulado sobre a barra azul-escura: 2,13:1. */
.prep .prep-topo .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.34); background: transparent;
}
.prep .prep-topo .btn-ghost:hover { background: rgba(255,255,255,.14); }

.prep-corpo { flex: 1 1 auto; display: flex; min-height: 0; }

/* Trilho lateral no desktop. */
.prep-trilho {
  flex: 0 0 var(--trilho); width: var(--trilho);
  padding: var(--e2) 12px; border-right: 1px solid var(--linha);
  background: var(--surf); position: sticky; top: var(--topo-h);
  height: calc(100vh - var(--topo-h)); overflow-y: auto;
}
.prep-aba {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; margin-bottom: 2px;
  border: 0; border-radius: var(--r-s); background: transparent;
  color: var(--txt-2); font: 500 15px var(--f-txt); text-align: left; cursor: pointer;
}
.prep-aba svg { width: 20px; height: 20px; flex: 0 0 20px; }
.prep-aba-c { display: none; }   /* rótulo curto só vale na barra inferior do celular */
.prep-aba:hover { background: var(--surf-3); color: var(--txt); }
.prep-aba[aria-current="page"] {
  background: var(--navy-50); color: var(--tinta); font-weight: 600;
}
.prep-aba[aria-current="page"] svg { color: var(--verde-700); }

/* Barra inferior no celular. */
@media (max-width: 860px) {
  .prep-corpo { flex-direction: column; }
  .prep-trilho {
    order: 2; position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: 100%; height: auto; display: flex; gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--linha);
    box-shadow: 0 -2px 12px rgba(18,40,62,.08); overflow: hidden;
  }
  /* flex-basis 0 com width auto: as oito abas dividem a largura em vez de ficarem com
     100% cada uma. Sem isto, sete delas saíam da tela e ficavam inalcançáveis no celular. */
  .prep-aba {
    flex: 1 1 0; width: auto; min-width: 0;
    flex-direction: column; gap: 2px; justify-content: center;
    min-height: 48px; padding: 5px 2px; font-size: 10px;
    text-align: center; margin: 0; letter-spacing: -.01em;
  }
  .prep-aba svg { width: 21px; height: 21px; flex: 0 0 21px; }
  .prep-aba-r { display: none; }
  .prep-aba-c { display: block; line-height: 1.15; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

.prep-wrap {
  flex: 1 1 auto; min-width: 0;
  width: 100%; max-width: 1080px; margin: 0 auto;
  padding: var(--e3) var(--e2) var(--e5);
}
/* A barra inferior é fixa e cobriria os últimos controles da tela — no simulado, justamente
   "Anterior" e "Próxima". O espaço reservado precisa vir depois da regra base, senão a
   cascata devolve o padding do desktop. */
@media (max-width: 860px) {
  .prep-wrap { padding-bottom: 104px; }
}
.prep-solo { max-width: 640px; padding-top: var(--e5); }

/* ==================================================================== blocos */
.card {
  background: var(--surf); border: 1px solid var(--linha); border-radius: var(--r);
  box-shadow: var(--som); padding: var(--e3); margin: 0 0 var(--e2);
}
.card > :last-child { margin-bottom: 0; }
.card-t { margin-top: 0; }
.secao-t { margin: var(--e3) 0 var(--e2); font-size: 18px; }

.grade { display: grid; gap: var(--e2); }
/* minmax fixo produzia coluna órfã; auto-fit + o mínimo em % evita o buraco à direita. */
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.fontes { font-size: 14px; line-height: 1.55; color: var(--txt-3); margin: 0 0 var(--e1); }
.dica   { font-size: 13px; color: var(--txt-3); margin: 6px 0 0; }
.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--pill);
  background: var(--navy-50); color: var(--tinta);
  font: 600 12px var(--f-txt); letter-spacing: .02em;
}
.prep-vazio {
  padding: var(--e4) var(--e2); text-align: center; color: var(--txt-3);
  background: var(--surf); border: 1px solid var(--linha); border-radius: var(--r);
}

/* Caixas de aviso: o tom vem de data-tom, não de style inline. */
.aviso-caixa {
  padding: 14px var(--e2); border-radius: var(--r-s); margin: var(--e2) 0;
  border-left: 4px solid var(--navy-700); background: var(--navy-50);
  color: var(--txt); font-size: 15px; line-height: 1.6;
}
.aviso-caixa[data-tom="ok"]     { border-left-color: var(--ok);     background: var(--ok-fraco); }
.aviso-caixa[data-tom="ok"] strong { color: var(--verde-800); }
.aviso-caixa[data-tom="perigo"] { border-left-color: var(--perigo); background: var(--perigo-fraco); }
.aviso-caixa[data-tom="perigo"] strong { color: var(--perigo); }
.aviso-caixa[data-tom="aviso"]  { border-left-color: var(--aviso);  background: var(--aviso-fraco); }
.aviso-caixa[data-tom="neutro"] { border-left-color: var(--navy-700); background: var(--navy-50); }

/* =================================================================== botões */
/* Prefixo .prep obrigatório nas cores dos botões: `.prep a` tem especificidade (0,1,1) e
   vencia `.btn-cta` (0,1,0), então todo link com cara de botão saía com a cor de link —
   "Baixar o PDF" ficava verde sobre verde, 1,43:1. Com duas classes vira (0,2,0) e ganha. */
.prep .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--r-s);
  font: 600 15px var(--f-txt); line-height: 1.2; text-decoration: none;
  cursor: pointer; background: var(--surf-3); color: var(--txt);
  transition: background .15s ease, border-color .15s ease;
}
.prep .btn:hover { background: var(--linha); }
.prep .btn:disabled { opacity: .55; cursor: not-allowed; }
.prep .btn-p { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.prep .btn-bloco { display: flex; width: 100%; }
.btn-lista { justify-content: space-between; text-align: left; margin-bottom: var(--e1); }
.btn-lista-n { flex: 1 1 auto; min-width: 0; }
.btn-lista-e { flex: 0 0 auto; font-weight: 500; font-size: 13px; color: var(--txt-3); }
.btn-lista-e[data-tom="producao"] { color: var(--ouro-600); }
.prep .btn-cta { background: var(--verde-700); color: #fff; }   /* 4,9:1 */
.prep .btn-cta:hover { background: var(--verde-800); }
.prep .btn-marca { background: var(--navy-900); color: #fff; }
.prep .btn-marca:hover { background: var(--navy-800); }
.prep .btn-ghost { background: transparent; border-color: var(--linha-f); color: var(--txt-2); }
.prep .btn-ghost:hover { background: var(--surf-3); color: var(--txt); }
.prep .btn-perigo { background: var(--perigo); color: #fff; }
.prep .btn-perigo:hover { filter: brightness(.92); }
@media (prefers-color-scheme: dark) {
  /* Só o CTA inverte: no escuro ele fica verde-claro e pede letra escura. O botão de
     marca continua com fundo escuro, então mantém a letra branca. */
  .prep:not([data-tema="claro"]) .btn-cta { color: var(--txt-inv); }
}

/* =================================================================== campos */
.campo { margin-bottom: var(--e2); }
.campo label { display: block; font: 600 14px var(--f-txt); margin-bottom: 6px; color: var(--txt-2); }
.campo input, .busca input, .prep select {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font: 400 16px var(--f-txt); color: var(--txt);
  background: var(--surf); border: 1px solid var(--linha-f); border-radius: var(--r-s);
}
.campo input:focus, .busca input:focus { border-color: var(--navy-700); }
.busca input { background: var(--surf-2); }

/* ================================================================== esqueleto */
.prep-esqueleto { display: grid; gap: var(--e2); }
.esq-card {
  background: var(--surf); border: 1px solid var(--linha); border-radius: var(--r);
  padding: var(--e3);
}
.esq-linha {
  height: 12px; border-radius: var(--pill); margin-bottom: 10px;
  background: linear-gradient(90deg, var(--surf-3) 25%, var(--surf-2) 37%, var(--surf-3) 63%);
  background-size: 400% 100%; animation: esq 1.4s ease infinite;
}
.esq-t { height: 18px; width: 45%; margin-bottom: var(--e2); }
.esq-c { width: 70%; margin-bottom: 0; }
@keyframes esq { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ===================================================================== modal */
.prep-modal-fundo {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: var(--e2); background: rgba(9,20,33,.55);
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.prep-modal {
  width: 100%; max-width: 440px; padding: var(--e3);
  background: var(--surf); border-radius: var(--r-g); box-shadow: var(--som-f);
  font-family: var(--f-txt); color: var(--txt);
}
.prep-modal h3 { margin-top: 0; font-size: 19px; }
.prep-modal p { color: var(--txt-2); font-size: 15px; }
.prep-modal-acoes { display: flex; gap: var(--e1); justify-content: flex-end; flex-wrap: wrap; }
.prep-modal-acoes .btn { flex: 1 1 auto; }
@media (min-width: 420px) { .prep-modal-acoes .btn { flex: 0 0 auto; } }

/* ==================================================== painel e escolha de cargo */
.painel-topo { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.painel-info { flex: 1 1 320px; min-width: 0; }
.painel-h { margin: 0 0 4px; }
.painel-acoes { display: flex; gap: var(--e1); flex-wrap: wrap; margin-top: var(--e2); }
.painel-anel { flex: 0 0 132px; text-align: center; }
.painel-anel .fontes { margin: 6px 0 0; }
.anel { width: 132px; height: 132px; }
.anel-trilho { fill: none; stroke: var(--surf-3); stroke-width: 11; }
.anel-valor {
  fill: none; stroke: var(--verde-700); stroke-width: 11; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset .6s ease;
}
.anel-txt { font: 700 26px var(--f-tit); fill: var(--txt); }

.contagem { margin: var(--e2) 0 0; font-size: 15px; color: var(--txt-2); }
.contagem strong { font: 700 26px var(--f-tit); color: var(--tinta); margin-right: 4px; }
.contagem[data-urgencia="1"] strong { color: var(--ouro-600); }
.contagem[data-urgencia="2"] strong { color: var(--perigo); }

.mat-card { display: flex; flex-direction: column; margin: 0; }
.mat-nome { margin: 0 0 12px; }
.mat-info { margin: 10px 0 var(--e2); }
.mat-acoes { display: flex; gap: var(--e1); margin-top: auto; flex-wrap: wrap; }
.selo-producao {
  /* O card é flex em coluna, e align-items: stretch esticava o selo na largura toda.
     align-self: flex-start faz a etiqueta ficar do tamanho do texto. */
  display: inline-block; align-self: flex-start;
  margin: 0 0 var(--e1); padding: 3px 10px;
  border-radius: var(--pill); background: var(--ouro-50); color: var(--ouro-600);
  font: 600 12px var(--f-txt);
}

.campo-busca { margin-bottom: var(--e1); }
.cargo-lista { max-height: 52vh; overflow-y: auto; margin: var(--e1) 0 var(--e2); }
.cargo-grupo {
  margin: var(--e2) 0 6px; font: 600 12px var(--f-txt); letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-3);
}
.cargo-grupo:first-child { margin-top: 0; }
.cargo-item {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  min-height: 48px; padding: 10px 12px; margin-bottom: 4px;
  border: 1px solid var(--linha); border-radius: var(--r-s);
  background: var(--surf); color: var(--txt); font: 500 15px var(--f-txt);
  text-align: left; cursor: pointer;
}
.cargo-item:hover { border-color: var(--navy-700); background: var(--navy-50); }
.cargo-item[aria-selected="true"] { border-color: var(--verde-700); background: var(--verde-50); }
.cargo-nome { flex: 1 1 auto; min-width: 0; }
.cargo-vagas { flex: 0 0 auto; font-size: 13px; color: var(--txt-3); white-space: nowrap; }

/* ==================================================================== barra */
.barra {
  position: relative; height: 10px; border-radius: var(--pill);
  background: var(--surf-3); overflow: hidden;
}
.barra i { display: block; height: 100%; background: var(--navy-700); border-radius: var(--pill); }
.barra[data-tom="ok"] i     { background: var(--ok); }
.barra[data-tom="aviso"] i  { background: var(--aviso); }
.barra[data-tom="perigo"] i { background: var(--perigo); }
.barra[data-tom="marca"] i  { background: var(--navy-700); }
/* marca de 50% — o piso do item 9.1.13 */
.barra[data-meta] { overflow: visible; }
.barra[data-meta]::after {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 2px; background: var(--txt-3); opacity: .55;
}
.zero-alerta { color: var(--perigo); font-weight: 600; margin: 6px 0 0; }

/* =================================================================== leitura */
.leitura { max-width: var(--leitura); font-size: 17px; line-height: 1.75; }
.leitura h2 { margin: var(--e4) 0 var(--e1); }
.leitura h3 { margin: var(--e3) 0 var(--e1); }
.leitura p { margin: 0 0 var(--e2); }
.leitura ul, .leitura ol { margin: 0 0 var(--e2); padding-left: 22px; }
.leitura li { margin-bottom: 6px; }
.leitura table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; font-size: 15px; }
.leitura th, .leitura td { padding: 10px 12px; border: 1px solid var(--linha); text-align: left; }
.leitura th { background: var(--surf-3); font-weight: 600; }
.leitura blockquote {
  margin: var(--e2) 0; padding: 12px var(--e2);
  border-left: 4px solid var(--navy-700); background: var(--navy-50); border-radius: 0 var(--r-s) var(--r-s) 0;
}

/* ================================================================== simulado */
.sim-topo {
  position: sticky; top: var(--topo-h); z-index: 20;
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  /* Margem lateral negativa para o cabeçalho sangrar até a borda. Nada de margem negativa
     no topo: um elemento sticky não sai da caixa de conteúdo do container, então ela seria
     descartada silenciosamente. */
  margin: 0 calc(var(--e2) * -1) var(--e2);
  padding: 10px var(--e2);
  background: var(--surf); border-bottom: 1px solid var(--linha);
}
.relogio {
  font: 700 19px/1 var(--f-tit); font-variant-numeric: tabular-nums;
  padding: 7px 12px; border-radius: var(--r-s);
  background: var(--navy-50); color: var(--tinta);
}
.relogio[data-alerta="1"] { background: var(--aviso-fraco); color: var(--aviso); }
.relogio[data-alerta="2"] { background: var(--perigo-fraco); color: var(--perigo); }

.alt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 12px 14px; margin-bottom: var(--e1);
  border: 1px solid var(--linha); border-radius: var(--r-s);
  background: var(--surf); cursor: pointer; line-height: 1.55;
}
.alt:hover { border-color: var(--navy-700); background: var(--navy-50); }
.alt .letra {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surf-3); color: var(--txt-2);
  font: 700 13px var(--f-tit);
}
.alt[aria-checked="true"] { border-color: var(--navy-900); background: var(--navy-50); }
.alt[aria-checked="true"] .letra { background: var(--navy-900); color: #fff; }
.alt-certa  { border-color: var(--ok); background: var(--ok-fraco); }
.alt-certa .letra  { background: var(--ok); color: #fff; }
.alt-errada { border-color: var(--perigo); background: var(--perigo-fraco); }
.alt-errada .letra { background: var(--perigo); color: #fff; }
.alt-selo {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  font: 600 11px var(--f-txt); text-transform: uppercase; letter-spacing: .05em;
  color: var(--txt-2); white-space: nowrap;
}

/* Folha de respostas: quatro estados legíveis sem depender só de cor. */
.navq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e1); }
.navq button {
  width: 38px; height: 38px; border-radius: var(--r-s);
  border: 1px solid var(--linha-f); background: var(--surf); color: var(--txt-2);
  font: 600 14px var(--f-txt); font-variant-numeric: tabular-nums; cursor: pointer;
}
.navq button[data-estado="respondida"] {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
.navq button[data-estado="revisar"] {
  background: var(--ouro-50); border-color: var(--ouro-600); color: var(--ouro-600);
}
.navq button[data-estado="branco"] { background: var(--surf); }
.navq button[aria-current="true"] {
  outline: 3px solid var(--foco); outline-offset: 1px; font-weight: 700;
}

.sim-meio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-pos { font: 600 15px var(--f-txt); white-space: nowrap; }
.sim-barra { flex: 1 1 120px; min-width: 80px; height: 6px; }
.sim-topo .btn { margin-left: auto; }
.sim-enunciado { font-size: 17px; line-height: 1.7; margin-bottom: var(--e2); }
.sim-nav { display: flex; align-items: center; gap: var(--e1); margin-top: var(--e3); flex-wrap: wrap; }
.sim-nav-gap { flex: 1 1 auto; }
.sim-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.legenda-item::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--linha-f); background: var(--surf);
}
.legenda-item[data-estado="respondida"]::before { background: var(--navy-900); border-color: var(--navy-900); }
.legenda-item[data-estado="revisar"]::before { background: var(--ouro-50); border-color: var(--ouro-600); }
.legenda-item[data-estado="atual"]::before { box-shadow: 0 0 0 2px var(--foco); }
@media (max-width: 600px) {
  .sim-topo { gap: 8px; padding: 8px 12px 0; row-gap: 0; }
  .sim-pos { font-size: 14px; }
  .sim-topo .tag { display: none; }        /* a matéria já aparece no gabarito */
  .relogio { font-size: 17px; padding: 5px 10px; }
  .sim-barra {
    flex-basis: 100%; order: 5; height: 4px; border-radius: 0;
    margin: 8px -12px 0; width: calc(100% + 24px);
  }
  .sim-nav { gap: 6px; }
  .sim-nav .btn { flex: 1 1 auto; }
}

.resultado-linha { font: 600 18px var(--f-txt); color: var(--txt); margin-bottom: var(--e2); }
.gab-cabeca { display: flex; align-items: center; gap: var(--e1); font-weight: 600; flex-wrap: wrap; }
.gab-tag {
  padding: 3px 10px; border-radius: var(--pill); font: 600 12px var(--f-txt);
  background: var(--perigo-fraco); color: var(--perigo);
}
.gab-tag[data-ok="1"] { background: var(--ok-fraco); color: var(--verde-800); }
.gab-enunciado { font-size: 16px; line-height: 1.65; margin: var(--e1) 0 12px; }
.comentario {
  margin: -2px 0 var(--e1) 38px; padding: 10px 14px;
  border-left: 3px solid var(--linha-f); background: var(--surf-2);
  border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 14px; color: var(--txt-2);
}
.texto-base {
  margin: 0 0 var(--e2); padding: 12px var(--e2);
  background: var(--surf-2); border: 1px solid var(--linha); border-radius: var(--r-s);
}
.texto-base summary { cursor: pointer; font: 600 14px var(--f-txt); color: var(--txt-2); }
.texto-base p { font-size: 15px; margin: 12px 0 0; }

/* ================================================================ flashcards */
.flash {
  min-height: 220px; display: grid; place-items: center; text-align: center;
  padding: var(--e4) var(--e3); font-size: 18px; line-height: 1.6;
}
.gatilho { font: 600 15px var(--f-txt); color: var(--txt-2); }

/* =================================================================== ranking */
.rank-eu { background: var(--verde-50); font-weight: 600; }
.prep table { font-variant-numeric: tabular-nums; }

/* ================================================================== impressão */
@media print {
  .prep-topo, .prep-trilho, .prep-modal-fundo, .btn { display: none !important; }
  .prep-wrap { max-width: none; padding: 0; }
  .card { border: 0; box-shadow: none; padding: 0; }
}