/* css/components.css · componentes do PWA Passa Junto PRF.
   Portado de public/prf.css:116-572 (.wm .porta .cond .serif .kicker h1 h2 .muted .num .q .lei .card .hero .pill
   .pill-ghost .chip .ico .dots .verdict .explain .banca .toast .tabbar .tab .seg .dash .blk .kpi .tile .rule .opcao-card)
   sem a moldura .phone; acrescenta dots de 5 estados, .folha (nunca .sheet), .faixa-aviso, .cartao-fund, .install-bar
   (PLAYBOOK §3.4), .estado, .row, .campo e .modal (BLUEPRINT §4.9). */

/* Casco */
.app {
  max-width: var(--app-largura);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(90% 40% at 100% -5%, rgba(200, 168, 75, 0.09), transparent 60%),
    radial-gradient(80% 45% at 0% 105%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 60%),
    var(--bg);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
}
.tela {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: calc(24px + var(--safe-b));
  min-height: 100vh;
  min-height: 100dvh;
}
/* A barra do debugger e fixed e nao reserva espaco por conta propria: a tela precisa terminar ACIMA dela,
   senao o fim do conteudo (e o botao de acao de cada tela) fica por baixo. Antes o empurrao era no TOPO,
   porque o selo morava no canto superior; mudou de lado junto com ele em 01/11/2026 (ver .debug-selo).
   debuggerSelo.js liga/desliga tem-debug-selo, e o router liga tem-tabbar conforme a tela declara. */
body.tem-debug-selo .tela { padding-bottom: calc(24px + var(--safe-b) + var(--debug-bar-h)); }
body.tem-debug-selo .tela.com-tabbar { padding-bottom: calc(var(--tabbar-h) + 20px + var(--safe-b) + var(--debug-bar-h)); }
.tela.com-tabbar { padding-bottom: calc(var(--tabbar-h) + 20px + var(--safe-b)); }

/* ALTURA CURTA: celular deitado, ou janela baixa no computador. O espaçamento vertical do casco foi desenhado
   para tela em pé; deitado, sobram uns 360 px de altura e esses mesmos paddings comem um quinto deles -- a
   pessoa vê o cabeçalho e quase nada de conteúdo. Medido em 740x360: 76 px só no rodapé.
   A folga horizontal não muda, porque deitado é justamente o que não falta. */
@media (max-height: 560px) {
  .tela { padding-bottom: calc(12px + var(--safe-b)); }
  .tela.com-tabbar { padding-bottom: calc(var(--tabbar-h) + 10px + var(--safe-b)); }
  body.tem-debug-selo .tela { padding-bottom: calc(12px + var(--safe-b) + var(--debug-bar-h)); }
  body.tem-debug-selo .tela.com-tabbar { padding-bottom: calc(var(--tabbar-h) + 10px + var(--safe-b) + var(--debug-bar-h)); }

}


.tela > .cresce { flex: 1; }
.bloco-x { position: relative; padding: 0 20px; }
.mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.centro { text-align: center; }
.linha { display: flex; align-items: center; gap: 12px; }
.linha.base { align-items: baseline; }
.linha .cresce { flex: 1; min-width: 0; }
.coluna { display: flex; flex-direction: column; gap: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Marca (único lugar da Poppins) */
.wm {
  display: flex;
  align-items: center;
  gap: .34em;
  font-family: 'Poppins', 'Barlow', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--tx);
  text-decoration: none;
}
.wm b { color: var(--acc-tx); }
/* a marca cede espaco antes do selo PRF: em aparelho com fonte ampliada ela encolhe com reticencias em vez de empurrar */
.wm { min-width: 0; }
.wm > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm svg { flex: none; }
/* O simbolo se mede PELA palavra, nao em px solto. "passajunto" nao tem nenhuma letra alta, so o t: do topo do t
   ate a base do j da cerca de .93em. O check vai a .95em pra encostar nesse par de extremos em vez de pairar acima
   deles, que era o que fazia o simbolo dominar uma palavra baixa. Em em pra valer em toda escala do lockup. */
.wm svg { width: .95em; height: .95em; }
.wm.grande { font-size: 27px; }

/* Selo da porta (PRF): a assinatura do concurso, presente no canto superior direito de TODA tela (decisao do founder
   19/10). Mesmo tratamento do .prf-grande da Entrada, em escala de topbar: condensada italica, ouro e brilho curto.
   Escala com a largura pra dominar no celular sem estourar em tela estreita. */
.porta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(34px, 10.5vw, 46px);   /* founder 20/10: a porta manda na tela, entao o selo cresce */
  line-height: .9;
  letter-spacing: -0.5px;
  color: var(--acc-tx);
  text-shadow: 0 4px 20px rgba(248, 200, 0, 0.22);
  white-space: nowrap;
  /* Respiro optico da borda. A caixa do texto ja respeitava os 20px do header, mas o italico joga o topo do F uns
     6px pra fora dela, e um bloco pesado perto da borda precisa de MAIS folga que um icone leve, nao da mesma.
     Em em pra acompanhar o clamp do tamanho. */
  padding-right: .14em;
}

/* Tipografia */
.cond { font-family: 'Barlow Condensed', 'Barlow', sans-serif; }
.serif { font-family: 'Fraunces', 'Georgia', serif; font-optical-sizing: auto; }
.kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mut);
}
.kicker.gold { color: var(--gold); }
/* `lei` aqui e so a COR. A classe .lei sozinha e o estilo do TEXTO DE LEI (Fraunces, --letra-lei, entrelinha
   1.7) e vem depois de .kicker no arquivo com a mesma especificidade: sem reafirmar familia e tamanho, todo
   `class="kicker lei"` virava um rotulo serifado que ainda crescia junto com a letra escolhida no leitor
   (founder, 01/11/2026, no cartao da meta de leitura: 16px Fraunces onde o cartao vizinho tinha 11px). */
.kicker.lei { color: var(--lei); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; line-height: normal; }
.kicker.acc { color: var(--acc-tx); opacity: .85; }
h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
}
h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
}
.muted { color: var(--mut); }
.tx2 { color: var(--tx2); }
.num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; line-height: 1; }
.titulo-cond {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.titulo-fluxo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* nome da tela quando a marca ocupa a esquerda do topo: sai da barra e vira a primeira linha da pagina */
.titulo-pagina {
  margin: 10px 0 0;
  padding: 0 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tx2);
}
.q {
  font-size: 20px;
  line-height: 1.58;
  color: var(--branco);
  font-weight: 500;
  margin: 0;
}
.q-enunciado .q {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.q-enunciado .q + .q { margin-top: .8em; }
/* ENUNCIADO COM MARKUP (ver cartaoQuestao.js e _lib/enunciadoHtml.mjs). Treze tags, nada além.
   Existe porque texto puro não sabe dizer tabela, tecla nem expoente -- e o caderno diz as três.
   Só tokens aqui, nenhuma cor literal: tokens.css redefine a paleta no tema claro. */
.q-rico {
  /* a tabela do caderno pode ser mais larga que o telefone; rola DENTRO do bloco e a página não
     escorrega de lado, que é o defeito clássico de tabela em tela estreita */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.q-rico > p { margin: 0 0 0.62em; }
.q-rico > p:last-child { margin-bottom: 0; }
.q-rico table {
  border-collapse: collapse;
  width: max-content;
  max-width: 100%;
  margin: 0.7em 0;
  font-size: 0.82em;
  font-variant-numeric: tabular-nums; /* as colunas de números do caderno alinham */
  font-weight: 400;
}
.q-rico th,
.q-rico td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.q-rico th { color: var(--tx2); font-weight: 600; white-space: nowrap; }
/* a tecla/ícone que no caderno era caixinha: "Enter", "Ctrl", "Copiar" */
.q-rico kbd {
  font-family: inherit;
  font-size: 0.86em;
  font-weight: 600;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  white-space: nowrap;
}
/* índice e expoente sem empurrar a linha de base (line-height: 0 é o que evita o pulo) */
.q-rico sub,
.q-rico sup {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.q-rico sup { top: -0.48em; }
.q-rico sub { bottom: -0.22em; }
.q-rico strong { font-weight: 700; }
.lei {
  font-family: 'Fraunces', 'Georgia', serif;
  font-optical-sizing: auto;
  font-size: var(--letra-lei);
  line-height: 1.7;
  text-align: left;
  margin: 0;
}
.lei p { margin: 0; }
.lei p + p { margin-top: 0.5em; }
.lei mark { background: rgba(248, 200, 0, .22); color: inherit; border-radius: 3px; padding: 0 2px; }
.lei .seg { display: block; }
.lei .seg + .seg { margin-top: 0.5em; }
/* Notas de vigencia do Planalto: "(Redacao dada pela Lei n. 13.281, de 2016)", "(Vigencia)". Dizem QUANDO o trecho
   mudou, e isso importa, mas nao sao a lei: em corpo igual elas cortam a frase ao meio. Ficam, recuadas de peso. */
.lei .nota-leg { color: var(--mut); font-size: .86em; font-style: italic; }
/* Citacao de outro artigo DENTRO da lei: e um caminho, nao um botao. Sublinhado tenue pra se oferecer sem quebrar
   a leitura; a cor e a mesma de lei que o app ja usa no botao "CTB art. N".
   No HTML e um <button>, pra abrir no Enter de quem navega por teclado; aqui ele perde toda a aparencia de botao
   e herda fonte, tamanho e entrelinha do paragrafo, senao a linha da lei empena no meio da frase. */
.lei .ref-art {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; line-height: inherit; vertical-align: baseline; text-align: left;
  color: var(--lei); cursor: pointer; text-decoration: underline;
  text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.lei .ref-art:active { background: rgba(74, 158, 255, .16); border-radius: 3px; }
.lei .ref-art:focus-visible { outline: 2px solid var(--lei); outline-offset: 2px; border-radius: 3px; }
.campo-busca {
  width: 100%; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--card); color: var(--tx);
  font-family: 'Barlow', sans-serif; font-size: 15px;
}
.campo-busca::placeholder { color: var(--mut); }
/* quantas vezes o termo buscado aparece dentro de um artigo que esta fechado */
.chip.busca-n { background: rgba(248, 200, 0, .18); border-color: rgba(248, 200, 0, .4); color: var(--acc-tx); }
.campo-busca:focus { outline: 2px solid var(--lei); outline-offset: 1px; }

.lei .seg.lendo {
  background: rgba(248, 200, 0, .13);
  box-shadow: inset 3px 0 0 var(--acc);
  border-radius: 0 6px 6px 0;
  padding: 2px 6px 2px 9px;
  margin-left: -9px;
  position: relative;
}
/* ATE ONDE a voz chegou dentro do trecho. O fundo dourado diz QUAL trecho esta sendo lido; esta regua embaixo dele
   anda palavra por palavra (o `--read` vem do onboundary do aparelho, ver js/voz.js). Sem ela, num inciso longo o
   olho perde o fio: sabe o paragrafo, nao a linha. O padrao e 0% -- trecho sem leitura em curso nao mostra regua. */
.lei .seg.lendo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), var(--gold));
  clip-path: inset(0 calc(100% - var(--read, 0%)) 0 0);
  transition: clip-path .12s linear;
}
@media (prefers-reduced-motion: reduce) { .lei .seg.lendo::after { transition: none; } }
p.texto { margin: 0; font-size: 14px; line-height: 1.45; }

/* Componentes */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px -20px #000;
  box-sizing: border-box;
  padding: 16px;
}
.card.filete-lei { border-left: 3px solid var(--lei); }
.card.filete-red { border-left: 3px solid var(--red); }
.card.filete-green { border-left: 3px solid var(--green); }
.card.filete-dout { border-left: 3px solid var(--dout); }
.card.filete-ia { border-left: 3px solid var(--ia); }
.card.toque { cursor: pointer; }
.hero {
  background: linear-gradient(180deg, rgba(200, 168, 75, 0.14), rgba(200, 168, 75, 0.03)), var(--card);
  border: 1px solid rgba(200, 168, 75, 0.42);
  box-shadow: 0 0 0 1px rgba(200, 168, 75, 0.06), 0 12px 34px rgba(0, 0, 0, 0.35);
}
.card.verde {
  border-color: rgba(84, 185, 138, 0.4);
  background: linear-gradient(180deg, rgba(84, 185, 138, 0.13), rgba(84, 185, 138, 0.02)), var(--card);
  box-shadow: 0 0 0 1px rgba(84, 185, 138, 0.06), 0 12px 34px rgba(0, 0, 0, 0.35);
}
.card.ghost { opacity: .6; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--goldd), var(--gold));
  color: var(--pill-tx);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--pill-sombra), 0 8px 24px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform .08s, box-shadow .08s, opacity .15s;
}
.pill:active, .pill.pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--pill-sombra), 0 3px 10px rgba(0, 0, 0, 0.25);
}
.pill.sm { height: 36px; padding: 0 14px; font-size: 15px; border-radius: 11px; box-shadow: 0 3px 0 var(--pill-sombra); }
.pill.larga { width: 100%; }
/* A COR E DA META, NAO DA HIERARQUIA (founder, 02/11/2026: "continuar questoes ta dourado e o continuar leitura
   opaco, dava pra melhorar"). O botao da leitura e azul-lei cheio, como o trecho dela na linha do dia; o que
   muda entre principal e segundo e so a ordem.
   O MODIFICADOR CHAMA `azul`, NAO `lei` (03/11/2026): `.lei` nu e a classe do bloco de TEXTO de lei (Fraunces
   serif, line-height 1.7 e `margin: 0`). Um botao com ela herdava o `margin: 0` -- que ganha de `.mt-20`, por
   vir depois no arquivo com a mesma especificidade -- e colava no botao de cima: os "botoes acavalados". */
.pill.azul { background: linear-gradient(180deg, color-mix(in srgb, var(--lei) 72%, white), var(--lei)); color: #0b1a2e; box-shadow: 0 4px 0 color-mix(in srgb, var(--lei) 55%, black), 0 8px 24px rgba(0, 0, 0, 0.35); }
.pill.azul:active, .pill.azul.pressed { box-shadow: 0 1px 0 color-mix(in srgb, var(--lei) 55%, black), 0 3px 10px rgba(0, 0, 0, 0.25); }
.pill[aria-disabled="true"], .pill:disabled { opacity: .4; pointer-events: none; }
.pill.ocupada { opacity: .7; pointer-events: none; }

.pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: transparent;
  border: 1.5px solid var(--line2);
  color: var(--tx2);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform .08s, box-shadow .08s;
}
.pill-ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.08); }
.pill-ghost.sm { height: 36px; padding: 0 13px; font-size: 14px; border-radius: 11px; box-shadow: 0 3px 0 rgba(255, 255, 255, 0.08); }
.pill-ghost.larga { width: 100%; }
.pill-ghost.azul { border-color: rgba(74, 158, 255, .5); color: var(--lei); }
.pill-ghost.ia { border-color: rgba(167, 139, 250, .5); color: var(--ia); }
.pill-ghost.gold { border-color: rgba(200, 168, 75, .5); color: var(--gold); }
.pill-ghost.green { border-color: rgba(84, 185, 138, .5); color: var(--green); }
.pill-ghost.red { border-color: rgba(226, 90, 82, .5); color: var(--red); }
.pill-ghost svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-ghost[aria-disabled="true"] { opacity: .4; pointer-events: none; }
/* o solido tem .ocupada; sem o par aqui, o botao de contorno dizia "Montando tua fila..." em opacidade cheia e
   seguia aceitando toque (que o guarda do missao.js engolia em silencio) */
.pill-ghost.ocupada { opacity: .6; pointer-events: none; }

.acao-texto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  cursor: pointer;
  padding: 8px 4px;
}
.acao-texto.muted { color: var(--mut); font-weight: 600; letter-spacing: .6px; }
.acao-texto.gold { color: var(--gold); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--line2);
  color: var(--tx2);
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
  white-space: nowrap;
}
.chip.interactive { cursor: pointer; }
.chip.gold { border-color: rgba(200, 168, 75, 0.45); color: var(--gold); background: rgba(200, 168, 75, 0.09); }
.chip.lei { border-color: rgba(74, 158, 255, 0.35); color: var(--lei); }
.chip.jur { border-color: rgba(184, 154, 223, 0.4); color: var(--jur); }
.chip.dout { border-color: rgba(90, 208, 200, 0.4); color: var(--dout); }
.chip.aten { border-color: rgba(251, 146, 60, 0.45); color: var(--aten); background: rgba(251, 146, 60, 0.08); }
.chip.ok { border-color: rgba(84, 185, 138, 0.45); color: var(--green); background: rgba(84, 185, 138, 0.09); }
.chip.red { border-color: rgba(226, 90, 82, 0.45); color: var(--red); }
.chip.revisao { border-color: rgba(251, 146, 60, 0.45); color: var(--aten); background: rgba(251, 146, 60, 0.08); }
.chip.ajuda { border-color: rgba(167, 139, 250, 0.5); color: var(--ia); background: rgba(167, 139, 250, 0.08); }
.chip.fundador { border-color: rgba(248, 200, 0, 0.55); color: var(--acc-tx); background: rgba(248, 200, 0, 0.08); }
.chip.ia { border-color: rgba(167, 139, 250, 0.5); color: var(--ia); }
/* bateria de teste (20/10/2026): o selo identifica a bateria, inclusive quando ela e retomada */
.chip.teste { border-color: rgba(248, 200, 0, 0.45); color: var(--acc-tx); background: rgba(248, 200, 0, 0.07); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.escolhido { border-color: rgba(200, 168, 75, 0.45); color: var(--gold); background: rgba(200, 168, 75, 0.09); }

.ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ico svg { width: 20px; height: 20px; }
.ico.gold { background: rgba(200, 168, 75, .14); color: var(--goldd); }
.ico.lei { background: rgba(74, 158, 255, .14); color: var(--lei); }
.ico.ia { background: rgba(167, 139, 250, .14); color: var(--ia); }
.ico.green { background: rgba(84, 185, 138, .14); color: var(--green); }
.ico.aten { background: rgba(251, 146, 60, .14); color: var(--aten); }

/* Ícones de traço: sempre currentColor */
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i.sm { width: 17px; height: 17px; }
svg.i.md { width: 22px; height: 22px; }

/* Dots da bateria: 5 estados (BRIEF: certo · errado · certo com ajuda · pulada · atual) + pendente de rede */
.dots { display: flex; gap: 5px; }
.dots i {
  height: 5px;
  flex: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  font-style: normal;
  position: relative;
}
[data-tema="sepia"] .dots i, [data-tema="claro"] .dots i { background: rgba(0, 0, 0, 0.12); }
.dots i.on { background: var(--green); }
.dots i.miss { background: var(--red); }
.dots i.cur { background: var(--gold); }
.dots i.ajuda { background: var(--green); box-shadow: 0 0 0 1.5px var(--ia); }
.dots i.pulada { background: transparent; border: 1px dashed var(--line2); height: 5px; }
.dots i.pend { background: var(--gold); opacity: .55; animation: pulsa 1.4s ease-in-out infinite; }
.dots i.erro { background: var(--aten); }
@keyframes pulsa { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

.verdict {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 42px;
  letter-spacing: 1px;
  line-height: 1;
}
.verdict.ok { color: var(--green); }
.verdict.bad { color: var(--red); }

.explain {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tx2);
}
[data-tema="sepia"] .explain, [data-tema="claro"] .explain { background: rgba(0, 0, 0, 0.04); }
.explain b { color: var(--branco); }
.explain p { margin: 0; }
.explain p + p { margin-top: .6em; }

.banca {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(251, 146, 60, 0.08);
  border-left: 3px solid var(--aten);
  border-radius: 6px 12px 12px 6px;
  font-size: 13.5px;
  line-height: 1.5;
}
.banca b { color: var(--aten); }

/* Toast */
#toast { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; pointer-events: none; }
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(88px + var(--safe-b));
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px #000;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
  pointer-events: auto;
  animation: sobe .25s cubic-bezier(.22, 1, .36, 1);
}
.toast.com-acao { padding-right: 8px; }
.toast .undo {
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Tab bar inferior fixa (2 abas: Hoje · Você) */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--app-largura);
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--fundo-tabbar);
  backdrop-filter: blur(10px);
  padding: 10px 8px calc(10px + var(--safe-b));
  z-index: 50;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tabin);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
  background: none;
  border: 0;
  padding: 2px 0;
}
.tab.on { color: var(--acc-tx); }
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── CINCO ABAS (founder, 04/11/2026) ────────────────────────────────────────────────────────────────
   A régua foi feita para duas. Com cinco, o rótulo em Barlow Condensed 11.5px com 1.4px de letter-spacing
   não cabe numa tela de 360 px — "DESAFIO" tem sete letras e sobram ~68px por aba. Corpo e espaçamento
   caem SÓ quando há cinco, para não mexer na barra de duas onde ela ainda apareça. */
.tabbar.abas5 { padding-left: 2px; padding-right: 2px; }
.tabbar.abas5 .tab { font-size: 10px; letter-spacing: .6px; gap: 3px; min-width: 0; }
.tabbar.abas5 .tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar.abas5 .tab svg { width: 21px; height: 21px; }

/* O DESAFIO NÃO É BOTÃO: é item inerte. Fica legível — um fantasma de 30% pareceria falha de render —
   mas apagado, sem resposta ao toque, e com o selo que diz por quê. */
.tabbar .tab.inerte { opacity: .5; cursor: default; pointer-events: none; }
.tabbar .tab.inerte .em-breve {
  font-style: normal; font-size: 7.5px; letter-spacing: .4px; line-height: 1;
  color: var(--mut); text-transform: uppercase;
}

/* ─── TELA BAIXA E LARGA: A BARRA VAI PRO LADO E A TELA ESTICA ────────────────────────────────────────
   Pedido da debugger em 30/10 ("virar a tela... principalmente para os concurseiros que utilizam
   tablet"), afinado pelo founder hoje: "o paisagem vale mais pra leitura de obras" e "poe a barra do lado
   esq... e estica a tela".

   MEDIDO NO CELULAR DELE, deitado, lendo o CTB. Deitado, a tela tem ~435px de altura em CSS e sobra
   largura: a coluna de 620px ficava no meio com 42% de preto nas laterais, enquanto as duas barras fixas
   (tabbar 54px + barra do debugger 52px) comiam 106px de uma altura que já era pouca. Resultado: QUATRO
   linhas de lei por tela, com a barra passando por cima do texto a cada rolagem.

   A SAÍDA É TROCAR O EIXO, não esconder. Minha primeira versão escondia a tabbar no leitor -- devolvia
   altura, mas tirava a navegação de quem estava só circulando. Deitada, a barra ocupa o que já estava
   vazio (a lateral) e devolve a altura INTEIRA, sem custar nada: as cinco abas continuam na tela.

   As duas coisas se somam: a tela esticada usa a largura que sobrava, e a barra lateral devolve a altura.
   De quatro linhas por tela para a página cheia.

   `--app-largura: none` só aqui: em pé a coluna estreita é o que mantém a linha de leitura curta, e isso
   continua certo. Deitado, o limite de 620px é que estava errado. */
@media (max-height: 560px) and (min-width: 700px) {
  /* A BARRA DAS ABAS VIRA COLUNA NA ESQUERDA (founder: "poe a barra do lado esq", "o menu tem que ser
     verticalisado na view hosiontal", "o menu devia ter um bt embaixo do outra no modo paisagem").
     Deitado sobra largura e falta altura: a barra deixa de comer 75px dos ~346px uteis e passa a ocupar
     a lateral, que estava vazia. A altura inteira volta para o conteudo.

     SEIS TENTATIVAS FALHARAM AQUI, e a causa nao era nenhuma das que eu testei (ordem no arquivo,
     especificidade, cascata, cache do service worker, wrapper no HTML): a barra computava `display: grid`,
     herdado da classe `.cinco` da barra de convite, e em grid o `flex-direction: column` nao existe. A
     medicao que mostrou isso foi um harness com Selenium lendo `getComputedStyle` -- depurar CSS no
     celular, sem inspetor, foi o que me manteve errando. A classe virou `.abas5` e a barra e flex de novo. */
  body.tem-tabbar .tabbar {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    transform: none;
    width: var(--tabbar-lateral);
    max-width: var(--tabbar-lateral);
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-top: 0;
    border-right: 1px solid var(--line);
    padding: 8px 2px;
  }
  /* cada aba fica do tamanho do seu conteudo e o grupo centraliza: com `flex: 1` as cinco esticariam para
     preencher 346px de altura e o alvo de toque viraria uma faixa de 69px sem relacao com o icone. */
  body.tem-tabbar .tabbar .tab { flex: 0 0 auto; padding: 9px 0; }

  /* o conteudo e o selo saem de baixo da barra e passam a andar ao lado dela */
  body.tem-tabbar .tela { padding-left: var(--tabbar-lateral); }
  body.tem-tabbar .tela.com-tabbar { padding-bottom: calc(12px + var(--safe-b)); }
  /* A faixa do debugger encosta na barra e desce ao rodape. Dois detalhes que ja me custaram caro hoje:
     o seletor precisa de 0,3,0 porque `body.tem-tabbar .debug-selo` (0,2,0) aparece DE NOVO mais abaixo no
     arquivo, subindo a faixa acima das abas, e la ela venceria por ordem; e `transform` tem que ser zerado,
     senao o translateX(-50%) da regra base arrasta a faixa meia tela para a esquerda. */
  body.tem-tabbar.tem-debug-selo .debug-selo {
    left: var(--tabbar-lateral);
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  /* FAIXA DO DEBUGGER MAIS FOLGADA (founder: "mais espacamento na faixa de debuger... e linha verm
     embaixo tbm"). Deitada ela ficava apertada contra o rodape, e a borda vermelha so existia em cima --
     o que a fazia parecer encostada na beirada em vez de pousada na tela. Ganha ar dentro e fecha com a
     mesma linha embaixo. Isto nao depende da barra lateral: fica. */
  .debug-selo { padding: 9px 14px calc(9px + var(--safe-b)); gap: 14px; border-bottom: 1px solid rgba(226, 90, 82, .34); }

  /* e o conteúdo usa a largura que sobrava */
  :root { --app-largura: none; }
  .bloco-x { max-width: 1100px; margin-left: auto; margin-right: auto; }
}

/* Extras da Porta PRF: asfalto, faixas e blocos */
/* JANELA DE 10 DIAS: uma linha de dez circulos, um por dia, inicial do dia embaixo (02/11/2026, founder, ja com as
   duas linhas no ar: "nao to gostando da janela de 10 dias"). Cheio com check = as duas metas; so o aro = teve
   estudo; apagado = nada; o ultimo, tracejado, e hoje. E o calendario de sequencia de app de habito: responde
   "eu apareci?" de relance. O detalhe questoes/leitura fica no title/aria de cada dia. */
.janela-dias { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.janela .jd { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.janela .jd-cel { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2); background: transparent; box-sizing: border-box; color: #1a1400; }
.janela .jd-cel.contou { border-color: var(--acc-tx); }
.janela .jd-cel.meta { background: var(--acc); border-color: var(--acc); }
.janela .jd-check { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* hoje: tracejado, e diz "hoje" embaixo no lugar da inicial */
.janela .jd.hoje .jd-cel { border-style: dashed; border-color: var(--tx2); }
.janela .jd.hoje .jd-cel.contou { border-color: var(--acc-tx); }
.janela .jd.hoje .jd-cel.meta { border-style: solid; border-color: var(--acc); }
.janela .jd-dia { font: 700 10px/1 'Barlow Condensed', sans-serif; letter-spacing: .4px; text-transform: uppercase; color: var(--mut); }
.janela .jd.hoje .jd-dia { color: var(--tx2); }
/* LINHA AMARELA TRACEJADA (21/10/2026). Antes era hachura inclinada a 114 graus sobre uma linha continua, e isso
   tem significado na via: hachura inclinada e ZEBRADO DE CANALIZACAO, area neutra onde nao se trafega; e
   tracejado somado a continua e a marcacao que libera a ultrapassagem de um lado so. A marca de um app chamado
   passajunto, que diz "ninguem passa sozinho", estava desenhada com o simbolo de NAO PASSE. E quem estuda pra PRF
   decora exatamente isso.
   Agora e a linha amarela simples seccionada: divide fluxos de sentidos opostos e PERMITE a ultrapassagem.
   Amarela e nao branca de proposito: a branca divide fluxos do MESMO sentido e so autoriza mudar de faixa; quem
   autoriza passar pro outro lado e a amarela.
   Horizontal, porque marcacao longitudinal corre paralela a via, e com o vao maior que o traco (1:2), que e a
   cadencia real: meio a meio le como pontilhado de interface, nao como pista. */
.dash {
  height: 5px;
  opacity: 0.75;
  /* 14px de traco para 28px de vao: mantem a relacao 1:2 e, na largura que a faixa tem na tela, rende seis ou
     sete tracos. Na escala maior cabiam quatro, e quatro tracos soltos leem como pontilhado, nao como pista. */
  background: repeating-linear-gradient(to right, var(--acc) 0 14px, transparent 14px 42px) 0 50% / 100% 5px no-repeat;
}
.blk { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
[data-tema="sepia"] .blk, [data-tema="claro"] .blk { background: rgba(0, 0, 0, 0.10); }
.blk i { display: block; height: 100%; border-radius: 5px; background: var(--lei); transition: width .25s; }
.kpi { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 42px; line-height: 0.92; letter-spacing: 0.5px; }
.tile {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-tema="sepia"] .tile, [data-tema="claro"] .tile { background: rgba(0, 0, 0, 0.03); }
.tile .num { font-size: 26px; }
.tile .kicker { line-height: 1.25; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent); }
[data-tema="sepia"] .rule, [data-tema="claro"] .rule { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.13), transparent); }

/* Opções de questão clicáveis */
.opcao-card {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  width: 100%;
  text-align: left;
}
.opcao-card.selected { border-color: var(--line2); background: rgba(255, 255, 255, 0.08); }
[data-tema="sepia"] .opcao-card.selected, [data-tema="claro"] .opcao-card.selected { background: rgba(0, 0, 0, 0.06); }
.opcao-card .rotulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.opcao-card.errado .rotulo { color: var(--tx2); }
.opcao-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
[data-tema="sepia"] .opcao-radio, [data-tema="claro"] .opcao-radio { border-color: rgba(0, 0, 0, 0.25); }
.opcao-card.selected .opcao-radio { border-color: var(--tx2); }
.opcao-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--tx2); display: none; }
.opcao-card.selected .opcao-dot { display: block; }

/* Rows de lista (Você, Ajustes, Cumprida) */
.rows { padding: 2px 15px; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 15.5px;
  color: var(--tx);
}
.row .cresce { flex: 1; min-width: 0; }
.row .sub { display: block; font-size: 12.5px; color: var(--mut); line-height: 1.3; }
.row.red { color: var(--red); }
.row svg.i { color: var(--tx2); }
.row.red svg.i { color: var(--red); }
.row .seta { color: var(--mut); width: 17px; height: 17px; }
.row.estatica { cursor: default; }

/* Campos */
.campo {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--tx);
  font-size: 16px;
  outline: none;
}
.campo:focus { border-color: var(--gold); }
.campo::placeholder { color: var(--mut); }
textarea.campo { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.campo-linha { display: flex; gap: 8px; }
.campo-linha .campo { flex: 1; min-width: 0; }
.rotulo-campo { display: block; font-size: 12.5px; color: var(--mut); margin: 0 0 6px 2px; }

/* Segmentado (tema) */
.segmentado { display: flex; border: 1.5px solid var(--line2); border-radius: 12px; overflow: hidden; }
.segmentado button {
  flex: 1;
  height: 38px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--tx2);
}
.segmentado button + button { border-left: 1.5px solid var(--line2); }
.segmentado button.on { background: rgba(200, 168, 75, 0.14); color: var(--gold); }

/* Tamanho da letra dentro do leitor, ao lado do tema: mesmo peso visual, mesma linha. */
.controles-leitor { gap: 10px; flex-wrap: wrap; }
.letra-leitor-controle {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  border: 1px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
}
.letra-leitor-controle button {
  min-width: 44px;
  min-height: 36px;
  background: none;
  border: 0;
  color: var(--tx);
  font: 700 15px/1 'Barlow', sans-serif;
}
.letra-leitor-controle button:active { background: var(--bg); }
.letra-leitor-controle button.morto { color: var(--mut); opacity: .45; }
.letra-leitor-valor {
  min-width: 26px;
  text-align: center;
  font: 700 12px/1 'Barlow Condensed', sans-serif;
  color: var(--mut);
}
.tema-leitor-controle { display: flex; gap: 3px; border: 1px solid var(--line2); border-radius: 10px; padding: 3px; }
.tema-leitor-controle button { flex: 1; min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--mut); font: 700 12px 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.tema-leitor-controle button.on { background: rgba(200, 168, 75, .16); color: var(--acc-tx); }
.tema-leitor-controle.compacto { max-width: 360px; }
input[type="range"].faixa { width: 100%; accent-color: var(--gold); }

/* Folha (bottom sheet) · nunca .sheet */
#folha:empty { display: none; }
.folha-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 80;
  animation: aparece .2s ease;
}
.folha {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--app-largura);
  max-height: calc(100dvh - 56px);
  background: var(--card);
  border: 1px solid var(--line2);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 48px -8px #000;
  z-index: 90;
  display: flex;
  flex-direction: column;
  animation: sobeFolha .28s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: var(--safe-b);
}
.folha.ia { border-color: rgba(167, 139, 250, .45); }
.folha.alta { height: calc(100dvh - 56px); }
.folha-cabeca { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.folha-cabeca .cresce { flex: 1; min-width: 0; }
.folha-cabeca .titulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .6px; text-transform: uppercase; line-height: 1.1; }
.folha-cabeca .sub { font-size: 12.5px; color: var(--mut); line-height: 1.3; }
.folha-x { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--mut); border: 1px solid var(--line); }
.folha-corpo { padding: 16px 20px 20px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.folha-pe { padding: 12px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--line); flex-shrink: 0; display: flex; gap: 10px; }
.folha-pe .pill, .folha-pe .pill-ghost { flex: 1; }
@keyframes sobeFolha { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* Modal (confirmações curtas) */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px);
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 20px;
  z-index: 90;
  box-shadow: 0 24px 60px -12px #000;
  animation: aparece .18s ease;
}
.modal .titulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: .4px; text-transform: uppercase; }
.modal .texto { margin-top: 8px; font-size: 14px; color: var(--tx2); line-height: 1.45; }
.modal .acoes { display: flex; gap: 10px; margin-top: 18px; }
.modal .acoes > * { flex: 1; }

/* Faixa de aviso (auth expirada, sem rede) */
.faixa-aviso {
  margin: 10px 20px 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(251, 146, 60, .4);
  background: rgba(251, 146, 60, .08);
  color: var(--tx);
  font-size: 13.5px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faixa-aviso svg.i { color: var(--aten); }
.faixa-aviso .cresce { flex: 1; }
.faixa-aviso.muted { border-color: var(--line2); background: rgba(255, 255, 255, .03); color: var(--tx2); }
.faixa-aviso.muted svg.i { color: var(--mut); }

/* Cartão de fundamento (D4): fund (a) · apoio (b) · res (c) · rev (d) */
.cartao-fund { padding: 13px 15px; }
.cartao-fund.fund { border-left: 3px solid var(--lei); }
.cartao-fund.apoio { border-left: 3px dashed var(--lei); }
.cartao-fund.res { border-left: 3px solid var(--dout); }
.cartao-fund.rev { border: 1px dashed var(--line2); }
.cartao-fund .rotulo-fund { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.cartao-fund.fund .rotulo-fund, .cartao-fund.apoio .rotulo-fund { color: var(--lei); }
.cartao-fund.res .rotulo-fund { color: var(--dout); }
.cartao-fund.rev .rotulo-fund { color: var(--mut); }
.cartao-fund .art-num { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--lei); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cartao-fund .art-rubrica { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: .3px; }
.cartao-fund .lei { font-size: calc(var(--letra-lei) - 1px); line-height: 1.6; margin-top: 6px; }
.cartao-fund .mais { margin-top: 8px; font-size: 12.5px; color: var(--mut); }
.cartao-fund .rev-texto { margin: 6px 0 0; font-size: 13.5px; color: var(--tx2); line-height: 1.45; }
.cartao-fund .faixa { font-size: 12.5px; color: var(--tx2); margin-top: 3px; }
.cartao-fund .res-item { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; }
.cartao-fund .res-item .cresce { flex: 1; min-width: 0; }
.cartao-fund .res-item .nome { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); }
.cartao-fund .res-item .ementa { font-size: 12.5px; color: var(--mut); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-fund .art-link { color: var(--mut); }

/* Cartão de artigo (bloco de lei e peek) */
/* Respiro de quem chega rolando: `scrollIntoView({block:'start'})` encosta o titulo na beirada de cima, e
   "Art. 61" colado no topo da tela parece corte, nao comeco. Declarativo aqui em vez de conta no JS porque
   serve aos dois caminhos que trazem alguem para um artigo: a busca (rolarPara) e a voz (aoTrocar). */
.cartao-art { padding: 14px 15px; scroll-margin-top: 12px; }
.cartao-art.lido { opacity: .78; border-left: 3px solid var(--green); }
.cartao-art.ativo { border-color: rgba(74, 158, 255, .3); background: linear-gradient(180deg, rgba(74, 158, 255, .07), rgba(74, 158, 255, .01)), var(--card); }
.cartao-art .cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cartao-art .num-art { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 800; color: var(--lei); letter-spacing: .5px; }
.cartao-art .rubrica { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: .3px; }
.cartao-art .lei { margin-top: 8px; }
.cartao-art.lido .lei { color: var(--tx2); }
.cartao-art .btn-lido { height: 30px; font-size: 13px; padding: 0 12px; margin-left: auto; }
.cartao-art .btn-lido.on { border-color: var(--green); color: var(--green); }
.cartao-art .nota { margin-top: 8px; font-size: 12.5px; color: var(--mut); line-height: 1.4; }
.cartao-art .infracao { margin-top: 8px; font-size: 12.5px; color: var(--aten); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
/* O CABEÇALHO DO COMENTÁRIO VIRA BOTÃO quando a tela pede recolher (founder, 05/11/2026: "os comentarios
   e juris e contran comecar recolhidos mas ele expande se quiser"). Linha inteira clicável, não só a
   setinha: o alvo de dedo tem que ser a frase, e o rótulo já diz o que há dentro. */
.comentario-abre {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 4px 0;
  min-height: 32px;        /* alvo de dedo: o kicker sozinho tem 14px de altura */
}
.comentario-abre .comentario-titulo { margin: 0; }
.comentario-abre .chev { opacity: .6; font-size: 13px; line-height: 1; }
.comentario-abre[aria-expanded="true"] .chev { opacity: .9; }
.cartao-art .comentario { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 14px; color: var(--tx2); line-height: 1.5; }
[data-tema="sepia"] .cartao-art .comentario, [data-tema="claro"] .cartao-art .comentario { background: rgba(0, 0, 0, .04); }
.cartao-art .comentario p { margin: 0; }
.cartao-art .comentario p + p { margin-top: .5em; }
/* A VOZ TAMBEM LE O COMENTARIO (preferencia dos Ajustes, ligada por padrao), e ele e a parte MAIS LONGA de muitos
   artigos: medido no art. 12 em 03/11/2026, 12 de 16 amostras da leitura estavam no comentario. Sem isto, nesse
   trecho todo o destaque simplesmente desaparecia da tela e o olho perdia o fio. Mesma regua dos trechos de lei,
   na cor da doutrina pra nao se confundir com a lei. */
.cartao-art .comentario.lendo { position: relative; box-shadow: inset 3px 0 0 var(--dout); }
.cartao-art .comentario.lendo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dout), var(--acc));
  clip-path: inset(0 calc(100% - var(--read, 0%)) 0 0);
  transition: clip-path .12s linear;
}
@media (prefers-reduced-motion: reduce) { .cartao-art .comentario.lendo::after { transition: none; } }
/* bloco de lei em passos (R3 do estudo NoahPrep 19/10): colapsados ao cabecalho, o ativo aberto com o botao unico de avancar */
.cartao-art.colapsado { padding: 11px 15px; }
.cartao-art .cabeca.toque { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }
/* CABECALHO COM ACAO AO LADO (06/11/2026): quando o cartao tem o botao de ouvir, o cabecalho e um <div> com
   dois botoes IRMAOS -- `.cabeca-toque` cobre a identidade do artigo e abre/fecha, o `.btn-ouvir` fica a
   direita. `nowrap` aqui e `wrap` dentro do toque: em tela de 360px a rubrica longa quebra DENTRO do grupo
   da esquerda, e o ouvir nao e empurrado sozinho para uma segunda linha. */
/* `flex-start` + `min-height` do tamanho do botao: medido em 360px, a rubrica longa do art. 67-A quebra em
   tres linhas e, com o alinhamento centrado, o ouvir flutuava no meio delas -- ao lado da rubrica, nao do
   numero. No topo ele fica JUNTO DO ARTIGO, que foi o pedido; e o min-height mantem os cartoes de uma linha
   (a grande maioria) com o botao e o numero na mesma altura, sem degrau. */
.cartao-art .cabeca.com-acao { flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
.cartao-art .cabeca-toque {
  flex: 1 1 auto; min-width: 0; min-height: 30px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer;
}
/* a seta fica COLADA ao conteudo, nao empurrada ao fim da linha: dentro do toque ela e o que diz "este grupo
   abre e fecha", e no extremo direito ela encostaria no ouvir e pareceria pertencer a ele */
.cartao-art .cabeca-toque .seta { margin-left: 4px; }
.cartao-art .cabeca .btn-ouvir { flex: none; margin-top: 0; height: 30px; padding: 0 11px; font-size: 13px; white-space: nowrap; }
.cartao-art .cabeca .chip.ok { margin-left: auto; }
.cartao-art .seta { flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg); transition: transform .15s; }
.cartao-art .cabeca .chip.ok + .seta { margin-left: 6px; }
.cartao-art .seta.aberta { transform: rotate(-135deg); }
.cartao-art .avancar { margin-top: 14px; }
.tag-vig { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line2); color: var(--mut); }
.tag-vig.vigente { border-color: rgba(84, 185, 138, .45); color: var(--green); }
.tag-vig.redacao { border-color: rgba(251, 146, 60, .45); color: var(--aten); }
.tag-vig.revogado { border-color: rgba(226, 90, 82, .45); color: var(--red); }

/* Estado honesto (fila indisponível, sem rede, auth expirada) */
.estado {
  margin: 14px 20px 0;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px dashed var(--line2);
  text-align: center;
}
.estado .titulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .4px; text-transform: uppercase; line-height: 1.15; }
.estado .texto { margin: 6px 0 0; font-size: 14px; color: var(--tx2); line-height: 1.45; }
.estado .acao { margin-top: 14px; display: flex; justify-content: center; }
.estado.aten { border-color: rgba(251, 146, 60, .45); }
/* confirmacao de envio (Reportar, 02/11/2026): check verde no lugar do formulario; sem margem lateral porque mora
   dentro de .folha-corpo ou .bloco-x, que ja tem a sua */
.estado.ok { margin: 0; border-style: solid; border-color: rgba(84, 185, 138, .45); background: rgba(84, 185, 138, .06); }
.estado.ok .titulo { color: var(--green); }
.estado .estado-icone { display: block; width: 34px; height: 34px; margin: 0 auto 8px; color: var(--green); }
/* texto obrigatorio no Reportar: o campo diz o que falta, em vez de o botao ignorar o toque */
.campo[aria-invalid="true"] { border-color: rgba(226, 90, 82, .7); }
.campo-erro { margin: 6px 0 0; font-size: 13px; color: var(--red); line-height: 1.3; }

/* Spinner discreto */
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line2); border-top-color: var(--gold); animation: gira .8s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.carregando { display: flex; align-items: center; justify-content: center; padding: 28px; }

/* Linha e cartão "Guardar progresso" */
.linha-guardar { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); font-size: 13px; color: var(--tx2); cursor: pointer; width: calc(100% - 40px); text-align: left; }
.linha-guardar .cresce { flex: 1; }
.linha-guardar b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--gold); font-size: 14px; }
.card-guardar .titulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .4px; text-transform: uppercase; }
.card-guardar .texto { margin: 6px 0 0; font-size: 13.5px; color: var(--tx2); line-height: 1.45; }
.card-guardar .acoes { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.card-guardar .depois { font-size: 13px; color: var(--mut); }
.card-guardar .depois b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tx2); }

/* Bolhas do tutor */
.bolhas { display: flex; flex-direction: column; gap: 10px; }
/* a regra do tutor, dita antes da primeira fala (R4 do estudo 19/10) */
.regra-tutor { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid rgba(167, 139, 250, .5); border-radius: 0 10px 10px 0; background: rgba(167, 139, 250, .07); font-size: 13.5px; color: var(--tx2); line-height: 1.45; }
[data-tema="sepia"] .regra-tutor, [data-tema="claro"] .regra-tutor { background: rgba(120, 90, 220, .07); }
.bolha { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.bolha.tutor { align-self: flex-start; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .3); border-bottom-left-radius: 6px; }
.bolha.aluno { align-self: flex-end; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); border-bottom-right-radius: 6px; }
[data-tema="sepia"] .bolha.aluno, [data-tema="claro"] .bolha.aluno { background: rgba(0, 0, 0, .05); }
.bolha.preparando { display: flex; align-items: center; gap: 10px; color: var(--mut); }

/* Barra de instalação (PLAYBOOK §3.4, paleta oficial) */
.install-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(88px + var(--safe-b));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 430px;
  max-width: calc(100vw - 20px);
  padding: 13px 13px 13px 16px;
  border-radius: 18px;
  background: #101749;
  border: 1px solid rgba(248, 200, 0, .35);
  color: #F5F7FA;
  box-shadow: 0 16px 48px -8px #000, 0 0 44px -10px rgba(248, 200, 0, .45);
  animation: installSlide .3s cubic-bezier(.22, 1, .36, 1);
}
.install-bar .install-ico { flex: none; line-height: 1; color: #F8C800; display: flex; }
.install-bar .install-ico svg { width: 26px; height: 26px; }
.install-bar .install-txt { flex: 1; min-width: 0; line-height: 1.35; }
.install-bar .install-txt b { display: block; font: 800 15px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.install-bar .install-txt small { color: #98a1c6; font-size: 12px; }
.install-bar .btn-ouro { padding: 9px 17px; background: #F8C800; color: #12131a; border: 0; border-radius: 11px; white-space: nowrap; font: 700 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.install-bar .install-x { flex: none; background: none; border: 0; color: rgba(245, 247, 250, .55); padding: 4px 6px; display: flex; }
.install-bar .install-x svg { width: 16px; height: 16px; }

/* Barra do modo debugger (01/11/2026, founder). Era um selo flutuante no canto superior direito, e dois
   defeitos apareceram juntos no uso real:
   1. COLISAO. O selo e `fixed` e a topbar NAO e. Bastava a tela rolar pro brasao PRF passar por baixo dele -
      e a tela Hoje passou a rolar justamente quando ganhou o segundo cartao de meta. O empurrao de 84px no
      topo so protegia a tela PARADA; nenhuma medida de folga resolve, porque o problema e um elemento preso
      competindo com uma faixa que anda.
   2. AFORDANCIA. "DEBUGGER · 0:10" lia como relogio. Ninguem descobria que era tocavel, e REPORTAR - a
      razao de ela estar aqui - ficava dois toques fundo, dentro da folha de explicacao.
   O rodape resolve os dois de uma vez: nao disputa faixa com topbar nenhuma, nao depende de rolagem, fica no
   alcance do polegar de quem passa horas no app, e la cabe o verbo escrito ao lado do estado. */
.debug-selo {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--safe-b);
  width: 100%;
  max-width: var(--app-largura);              /* mesma caixa da tabbar, pra barra e abas terminarem alinhadas */
  z-index: 55;                   /* acima do conteudo e da tabbar (50), abaixo da install-bar (70) e do toast */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border-top: 1px solid rgba(226, 90, 82, .34);
  background: rgba(10, 11, 16, .92);
  backdrop-filter: blur(10px);
}
/* Quando a tela declara abas, a barra sobe pra ficar ACIMA delas - nunca por cima. Os 6px de folga nao sao
   enfeite: --tabbar-h e uma RESERVA de layout (64px), e a tabbar medida em producao em 01/11/2026 da 66px,
   porque a altura real sai do conteudo (icone + rotulo) e da fonte. Sem folga, a barra encostaria 2px por
   cima das abas e qualquer mudanca de rotulo pioraria isso em silencio. */
body.tem-tabbar .debug-selo { bottom: calc(var(--tabbar-h) + var(--safe-b) + 6px); }

/* MODO DORMINDO: tem o link, falta a conta (04/11/2026). Dourado e não vermelho de propósito — vermelho é a
   cor do defeito nesta barra, e aqui nada quebrou: falta um passo. A barra inteira é o botão, porque é a
   única coisa a fazer neste estado, e ocupa a largura toda para não ser confundida com um aviso passivo. */
.debug-selo.dormindo { border-top-color: rgba(200, 168, 75, .45); padding: 0; }
.debug-selo.dormindo .ds-acender {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 800 11.5px/1.25 'Barlow Condensed', system-ui, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.debug-selo-estado {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 2px;
  background: none;
  border: 0;
  color: #e2a5a0;
  font: 700 10.5px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
}
.debug-selo-questoes {
  flex: none;
  min-height: 36px;
  padding: 9px 14px;
  border-radius: 20px;
  border: 1px solid var(--line2);
  background: none;
  color: var(--tx2);
  font: 900 12px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.debug-selo-questoes:active { background: rgba(255, 255, 255, .07); }
/* Quatro pecas na barra: num aparelho estreito o estado (flex: 1) e o que encolhe, e o texto DEBUGGER nao
   pode vazar por baixo do Reportar. O chevron e o primeiro a sair; o texto nunca. */
.debug-selo-estado { overflow: hidden; }
@media (max-width: 380px) { .debug-selo-abre { display: none; } }
/* Na propria landing o Menu nao leva a lugar nenhum: some, em vez de ficar ali como controle morto. */
/* os tres caminhos dentro da folha do selo: o botao "Menu" que levava a landing saiu em 09/11/2026 */
.debug-caminhos { display: flex; flex-wrap: wrap; gap: 8px; }
.debug-selo-reportar {
  flex: none;
  /* 36px de altura: alvo de dedo de quem reporta varias vezes por turno, sem engordar a barra inteira -
     ela fecha em 45px porque o botao e a peca mais alta aqui dentro. */
  min-height: 36px;
  padding: 9px 18px;
  border-radius: 20px;
  border: 1px solid rgba(226, 90, 82, .55);
  background: rgba(226, 90, 82, .16);
  color: #f0b8b3;
  font: 900 12px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.debug-selo-reportar:active { background: rgba(226, 90, 82, .3); }
/* O chevron diz que ali ABRE algo. Sem o relogio, "DEBUGGER" sozinho parecia etiqueta morta - e o toque
   nele e justamente o outro caminho pra dar retorno, nao so pra ler o que o modo registra. */
.debug-selo-abre { margin-left: 2px; opacity: .65; font-size: 13px; line-height: 1; }
.debug-selo .debug-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #e25a52; box-shadow: 0 0 6px 1px rgba(226, 90, 82, .7); }
/* Tudo que ja morava no rodape sobe a mesma altura, senao a barra cobre o aviso ou o convite de instalar. */
body.tem-debug-selo .toast,
body.tem-debug-selo .install-bar { bottom: calc(88px + var(--safe-b) + var(--debug-bar-h)); }
.debug-explica { padding-top: 4px; }
.debug-lista { margin: 10px 0; padding-left: 18px; color: #c3c8d6; font-size: 14px; line-height: 1.6; }
.debug-lista li { margin-bottom: 4px; }
@keyframes installSlide { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Barra de 5 segmentos (convite) -- NAO E A TAB BAR. A tab bar de cinco abas usa `.abas5`, e o
   motivo e uma colisao que custou seis publicacoes (04/11/2026): ela nasceu com `class="tabbar cinco"`
   e herdou daqui `display: grid` -- `.cinco` (0,1,0) empata com `.tabbar` (0,1,0) e vence por vir
   depois no arquivo. Em grid, `flex-direction` e inerte: a barra aceitava largura e posicao e
   ignorava a coluna, e `grid-template-columns: repeat(5, 1fr)` enfiava as cinco abas EM LINHA dentro
   dos 76px da lateral. Quem der nome de quantidade a uma classe aqui, confira este bloco. */
.cinco { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cinco i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); display: block; }
[data-tema="sepia"] .cinco i, [data-tema="claro"] .cinco i { background: rgba(0, 0, 0, .12); }
.cinco i.on { background: var(--green); }

/* Código de convite */
.codigo-convite { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 44px; letter-spacing: 6px; text-transform: uppercase; color: var(--acc-tx); line-height: 1; }

/* Botão Google (contêiner do GIS) */
/* separador entre as duas portas. O zap vem inteiro em cima (botao verde, largura toda) e o Google embaixo com a
   sua dica: a hierarquia precisa ser legivel sem ler, porque e o zap que leva a notificacao (founder, 21/10). */
.ou-portas { display: flex; align-items: center; gap: 12px; color: var(--mut); font-size: 12.5px; }
.ou-portas::before, .ou-portas::after { content: ''; flex: 1; height: 1px; background: var(--lin, rgba(245,247,250,.12)); }
/* Escada de carreira (tela Voce). A barra mede o degrau ATUAL, nao a carreira inteira: 18 degraus numa barra so
   dariam fatias de 5%, e ninguem ve progresso em 5%. O numero do degrau fica no canto, em texto. */
.card.carreira .carreira-barra { margin-top: 10px; height: 6px; border-radius: 3px; background: rgba(245,247,250,.1); overflow: hidden; }
.card.carreira .carreira-barra span { display: block; height: 100%; border-radius: 3px; background: var(--gold); transition: width .3s ease; }
/* Barra de patente (XP): mesma mecanica da barra de carreira, cor diferente (--green) pra nunca se confundir
   com o degrau de verdade mesmo quando as duas aparecem juntas na tela Voce. */
.card.patente .patente-barra { margin-top: 10px; height: 6px; border-radius: 3px; background: rgba(245,247,250,.1); overflow: hidden; }
.card.patente .patente-barra span { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width .3s ease; }
.gsi-slot { min-height: 44px; display: flex; justify-content: center; }
.gsi-slot:empty { display: none; }

/* "Entrar pelo WhatsApp" (20/10): o caminho que funciona no navegador do Instagram, no iPhone e no app instalado */
.pill.zap { background: linear-gradient(180deg, #2bb24c, #1f9c40); color: #fff; box-shadow: 0 4px 0 #16803180, 0 8px 22px rgba(37, 211, 102, .18); text-decoration: none; gap: 10px; }
.pill.zap:active { transform: translateY(3px); box-shadow: 0 1px 0 #16803180, 0 3px 10px rgba(0, 0, 0, .25); }
.pill.zap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A tela de entrada respira pelo CONTEINER, nao por margens avulsas que se somam e grudam (print do founder 20/10).
   .conta-via mantem o botao colado na sua propria dica/campo; o gap de fora separa os caminhos. */
.conta-corpo { display: flex; flex-direction: column; gap: 16px; }
.conta-corpo > p.texto { margin: 0; }
.conta-corpo .faixa-aviso { margin: 0; }
.conta-via { display: flex; flex-direction: column; gap: 8px; }
.dica-via { margin: 0; font-size: 12.5px; text-align: center; line-height: 1.4; }
.conta-corpo .acao-texto { align-self: center; }
.ou { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--mut); }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ou span { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- bateria de teste ---------- */
/* faixa do topo: selo + barra das 10 + contagem. Substitui os pontinhos, que contam acerto e erro e por isso
   pertencem ao fim da bateria, nao ao caminho. */
.teste-faixa { display: flex; align-items: center; gap: 10px; }
.teste-faixa .blk { min-width: 60px; }
.teste-faixa .num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* botao do tutor com o marcador de uso (1/2) */
.pill-ghost .selo-uso {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.45); color: var(--ia);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
/* desligado mas VISIVEL: a pessoa precisa saber que o tutor existe antes de poder usar */
.pill-ghost.apagada { opacity: 0.45; cursor: default; }
.pill-ghost.apagada .selo-uso { opacity: 0.8; }

.teste-obrigatorio .pill { margin-top: 12px; }
.teste-dica-artigo { border-left: 3px solid var(--lei); }

/* cronometro da bateria: discreto de proposito. Conta pra cima, nunca pra baixo, e nao muda de cor: ele informa,
   nao cobra. Numeros tabulares pra nao dancar a cada segundo. */
.cronometro { font-variant-numeric: tabular-nums; letter-spacing: .5px; white-space: nowrap; }
.linha-dots { display: flex; align-items: center; gap: 10px; }
.tempo-linha { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tempo-linha .cond { font-variant-numeric: tabular-nums; }

/* Botao de atualizar: aparece quando ha versao nova no ar. Flutua acima de tudo, fora do caminho do polegar
   (topo), e nunca cobre o conteudo principal. Discreto de proposito: e um convite, nao um alarme. */
/* Saiu do topo pro MEIO da tela (founder, 20/10). No topo ele caia exatamente sobre a faixa mais cheia do app, a
   marca de um lado e o selo PRF do outro, e um aviso que disputa lugar com a assinatura nao e lido como aviso. No
   meio nao disputa com nada: e um elemento efemero, que so existe quando ha versao nova e some no toque. */
/* DE OURO PRA AZUL (founder, 26/10). A chapa de ouro com texto blau era o par oficial da marca, e era esse o
   problema: num app em que a barra, o selo PRF, a janela de dez dias e todo botao principal sao ouro, o aviso
   usava a mesma cor de tudo e era lido como parte da marca, nao como aviso. O azul e a unica cor forte que o
   app ja usa com outro sentido (lei, artigo), entao nao briga com o ouro e nao se confunde com ele.
   O par esta pinado em tokens.css e nao vira com o tema: 6,6:1 nos tres. */
.btn-atualizar {
  position: fixed; z-index: 60;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 13px 26px; border-radius: 999px;
  border: 0; background: var(--atualiza); color: var(--atualiza-tx);
  font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer;
  /* respira: o brilho cresce e diminui. E o unico elemento do app que pulsa, de proposito. */
  animation: atualizarEntra .22s cubic-bezier(.2, .9, .3, 1), atualizarRespira 2.4s ease-in-out .22s infinite;
}
.btn-atualizar.ocupada { opacity: .6; pointer-events: none; }
/* Na questao e na corrigida o meio da tela e das alternativas: o botao sobe pro topo, que ali e area de barra.
   Ver o porque em public/js/main.js (ondeCabe). */
.btn-atualizar.no-topo {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  transform: translate(-50%, 0);
  padding: 9px 18px; font-size: 13px;
}
@keyframes atualizarEntraTopo { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.btn-atualizar.no-topo { animation: atualizarEntraTopo .22s cubic-bezier(.2, .9, .3, 1), atualizarRespira 2.4s ease-in-out .22s infinite; }
@keyframes atualizarEntra { from { opacity: 0; transform: translate(-50%, -50%) scale(.88); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* o brilho acompanha a chapa: halo de ouro em botao azul deixaria a borda esverdeada */
@keyframes atualizarRespira {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 0 rgba(var(--atualiza-brilho), .42); }
  50%      { box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 26px 8px rgba(var(--atualiza-brilho), .42); }
}
/* quem pediu menos movimento recebe o botao parado, mas ainda destacado */
@media (prefers-reduced-motion: reduce) {
  .btn-atualizar { animation: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 20px 4px rgba(var(--atualiza-brilho), .36); }
}

/* Folha guiada de instalação (screens/instalar.js, 23/10/2026).
   Passo numerado com ícone: o número carrega a ordem da mão da pessoa, então ele é o elemento forte, e o ícone
   é apoio. `align-items: start` porque o texto quebra em duas ou três linhas no celular e o número tem que
   continuar alinhado com a PRIMEIRA linha, não centralizado no bloco todo. */
.lista-instalar { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.passo-instalar { display: grid; grid-template-columns: 26px 22px 1fr; align-items: start; gap: 10px; }
.passo-n {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(248, 200, 0, .14); border: 1px solid rgba(248, 200, 0, .4);
  color: #F8C800; font: 800 13px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums;
}
.passo-ic { display: grid; place-items: center; height: 26px; color: #98a1c6; }
.passo-ic .i { width: 19px; height: 19px; }
.passo-txt { font-size: 14.5px; line-height: 1.5; padding-top: 3px; }
/* A nota de rodapé da folha explica a REGRA da Apple, não um passo: separada da lista e alinhada com ela, senão
   lê como se fosse o passo 4 e, centralizada sob passos à esquerda, parece desalinho. */
.lista-instalar + .dica-via { margin-top: 16px; text-align: left; padding-top: 12px; border-top: 1px solid rgba(152, 161, 198, .16); }
/* A dica da barra virou caminho (main.js liga o clique à folha), então ela tem que PARECER tocável. */
#installHint { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(152, 161, 198, .5); }

/* ---------- obras (Fase A, 30/10/2026) ---------- */
/* As PARTES do livro no sumario e no cabecalho do capitulo (01/11/2026). Antes nao existiam na tela: a
   abertura de cada parte estava presa no fim do capitulo anterior (ver comPartes em netlify/functions/obra.mjs). */
.obra-parte-titulo {
  margin: 26px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-tx);
}
.obra-parte-titulo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.obra-parte-kicker { color: var(--acc-tx); }

/* O que ja foi lido, na entrada da obra (founder, 01/11/2026). ABERTO e LIDO aparecem diferentes de
   proposito: quem esta sendo paga pra revisar o livro inteiro nao pode ver "lido" num capitulo que ela so
   abriu. O estado vem dos eventos que o app ja gravava (ver leituraDe em netlify/functions/obra.mjs). */
.obra-cap-linha { display: flex; align-items: flex-start; gap: 10px; }
.obra-cap-selo {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 'Barlow', sans-serif;
  color: transparent;
}
.obra-cap-linha.lido .obra-cap-selo { border-color: var(--green); background: var(--green); color: #fff; }
.obra-cap-linha.aberto .obra-cap-selo { border-color: var(--acc-tx); border-style: dashed; }
.obra-cap-linha.lido .texto { color: var(--mut); }
.obra-cap-estado {
  flex: none;
  align-self: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc-tx);
}
.obra-progresso .leitor-progresso { height: 6px; }
.obra-progresso .kicker { text-align: left; }

/* Barra de leitura: onde estou, o que vem antes, o que vem depois. Fica DENTRO de .s-obra pra herdar o tema
   do leitor (claro/sepia/escuro sao variaveis escopadas naquela tela), mesmo sendo `fixed` - heranca segue a
   arvore do DOM, nao o layout. */
.leitor-barra {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--safe-b);
  width: 100%;
  max-width: var(--app-largura);
  z-index: 40;                   /* abaixo da barra do debugger (55), do install-bar (70) e do toast (100) */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px calc(7px + var(--safe-b));
  border-top: 1px solid var(--line);
  background: var(--card);
}
/* No modo debugger as duas barras convivem: a de leitura sobe pra ficar acima da do debugger. */
body.tem-debug-selo .leitor-barra { bottom: calc(var(--debug-bar-h) + var(--safe-b)); padding-bottom: 7px; }
.leitor-nav {
  flex: none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: none;
  color: var(--tx);
  font: 700 22px/1 'Barlow', sans-serif;
}
.leitor-nav:active { background: var(--bg); }
.leitor-nav.vazio { opacity: .25; }      /* primeiro e ultimo capitulo: o lugar continua ocupado, sem pular */
.leitor-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.leitor-progresso { height: 4px; border-radius: 99px; background: var(--line2); overflow: hidden; }
/* A BARRA NASCE FRACA E VAI FICANDO FORTE (founder, 05/11/2026). Chapada, ela era um dado: 23%. Com o ouro
   ganhando corpo da esquerda pra direita, a ponta -- onde a pessoa esta agora -- e sempre o ponto mais vivo,
   e o trecho ja andado fica atras dela como rastro. O mesmo numero, lido como avanco.
   E MASCARA, nao gradiente de cor, por dois motivos: `--acc-tx` muda nos tres temas do leitor (ouro no
   escuro, #6b5010 no claro e no sepia) e a mascara acompanha os tres de graca; e onde `mask` nao existir a
   barra volta a ser ouro chapado -- exatamente o que ela era ate hoje, nunca uma barra invisivel. */
.leitor-progresso i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--acc-tx);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 85%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 85%);
  transition: width .1s linear;
}
/* SAIR DA LEITURA (founder, 05/11/2026: "ta faltando um bt voltar / ou encerrar leitura"). "Voltar aos
   capitulos" so existia no TOPO do capitulo: rolou tres telas e a unica saida era rolar tudo de volta --
   deitado, com ~440px de altura, isso e muita rolagem. As setas ao lado trocam de capitulo, que e outra
   coisa; por isso o icone e um LIVRO, nao um X nem uma terceira seta: ele leva ao sumario da obra. */
.leitor-sair svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.leitor-sair { display: flex; align-items: center; justify-content: center; }
.leitor-pos {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  text-align: center;
}
/* O fim do texto nao pode terminar atras da barra - e justamente ali que a pessoa procura o "proximo". */
.s-obra { padding-bottom: calc(24px + var(--safe-b) + var(--leitor-bar-h)); }
body.tem-debug-selo .s-obra { padding-bottom: calc(24px + var(--safe-b) + var(--debug-bar-h) + var(--leitor-bar-h)); }
.debugger-casa-cartao, .obra-cap-linha { display: block; width: 100%; text-align: left; }
/* O turno em uma linha, na landing do debugger: discreto, nao e cartao de acao - e o placar dela. */
.debug-desempenho { padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.debug-desempenho .kicker { color: var(--mut); }
.debug-desempenho .texto { font-weight: 600; }
.debugger-casa-cartao.com-capa { display: flex; gap: 14px; align-items: flex-start; }
.debugger-casa-cartao .capa-mini { width: 60px; height: 87px; object-fit: cover; border-radius: 6px; flex: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
/* O cartao "Debugar o app" era o unico sem imagem e ficava solto, com o texto comecando numa coluna diferente
   da dos dois livros (founder, 01/11/2026). O icone do proprio app e a imagem honesta pra ele: mesma largura
   das capas, pra as tres linhas de texto alinharem; canto de icone, nao de livro. */
.debugger-casa-cartao .capa-mini.quadrada { height: 60px; border-radius: 14px; object-fit: contain; background: #0f1016; }
.obra-capa-topo { width: 96px; height: 139px; object-fit: cover; border-radius: 8px; float: right;
  margin: 0 0 12px 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.obra-titulo-secao { font-weight: 700; }
.obra-caixa { border-left: 3px solid var(--line2); padding: 4px 0 4px 12px; margin: 0; color: var(--tx2); font-style: italic; }
/* O TEXTO DO LIVRO SEGUE A MESMA PREFERENCIA DA LEI. Ate 01/11/2026 `.obra-paragrafo` nao tinha regra
   nenhuma: herdava o corpo da pagina e ignorava o tamanho que a pessoa escolheu. Um leitor com dois textos
   e um controle so que funciona na metade deles e pior do que nenhum controle. */
.obra-paragrafo, .obra-lista, .obra-caixa { font-size: var(--letra-lei); line-height: 1.65; }
.obra-lista { padding-left: 20px; }
.obra-lista li { margin-bottom: 4px; }
.obra-figura { margin: 16px 0; }
.obra-figura-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.obra-figura-legenda { display: block; margin: 8px 0; font-size: 13px; font-style: italic; color: var(--mut); }
.obra-figura .obra-figura-legenda { margin: 8px 0 0; text-align: center; }
.obra-tabela { overflow-x: auto; }
.obra-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.obra-tab th, .obra-tab td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
/* NUNCA absoluto por cima do paragrafo (achado pela sessao Debuggers em producao, 30/10/2026): cobria a
   primeira linha de cada paragrafo, bem onde o olho entra - grave num livro. Fica abaixo, no fluxo normal. */
.obra-trecho-linha { display: flex; flex-direction: column; align-items: flex-end; }
.obra-trecho-linha > *:first-child { align-self: stretch; }

/* SELINHO DO TRECHO ANOTADO (founder, 05/11/2026: "se voce faz alguma anotacao, tem que aparecer um selinho
   vermelho"). Anotar era um ato sem rastro: anotava, saía do capítulo, voltava, e a página estava igual.
   NA MARGEM, NAO NO FUNDO, e a distincao importa: fundo ja significa "este trecho esta aceso agora", e dois
   fundos competindo no mesmo texto viram ruido. Margem diz outra coisa -- "existe algo seu aqui" -- e
   continua legivel quando o trecho tambem esta aceso, que e o caso comum (a pessoa toca pra reler o que
   anotou). Fica na esquerda, onde o olho entra na linha.
   Vermelho porque e a cor do modo debugger no app inteiro (a faixa, o REPORTAR): esta nota e revisao da
   obra, nao grifo de estudo. Quando a nota de estudo existir, ela pede marca propria. */
.obra-trecho-linha.anotado { position: relative; }
.obra-trecho-linha.anotado::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: #e25a52;
  box-shadow: 0 0 5px 0 rgba(226, 90, 82, .55);
}
/* O botao do trecho aceso precisa PARECER a acao daquele trecho, nao um enfeite no canto. Ele era uma
   pilula de 11px cor de texto apagado - "todo timido", nas palavras do founder - e isso funcionava enquanto
   ele estava sempre la; sob demanda, ele tem que se anunciar no momento em que aparece. */
.obra-marcar {
  align-self: stretch;
  margin-top: 8px;
  padding: 10px 14px;
  font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--acc-tx);
  border: 1px solid var(--acc-tx); border-radius: 12px; background: var(--card);
}
.obra-marcar:active { background: rgba(255, 255, 255, .06); }
/* O ANOTAR APARECE NO TRECHO TOCADO, nao em todos (founder, 01/11/2026). Um botao por paragrafo, num
   capitulo de 400 trechos, e um muro que compete com o texto - e sobrava ate no fim da assinatura do autor
   e do nome da cidade. Mostrar so no trecho aceso mantem a precisao (a nota continua sendo DAQUELE trecho)
   e devolve a pagina pra leitura. A dica no cabecalho existe pra isso nao virar segredo. */
.obra-marcar { display: none; }
.obra-trecho-linha.aceso .obra-marcar { display: inline-flex; }
/* O TRECHO TOCADO ACENDE EM OURO FRACO (founder, 05/11/2026: "quando voce clica, a hachura amarela fica
   ativada"). Era cinza neutro -- honesto, e mudo: cinza sobre cinza nao diz "este e o trecho que voce
   escolheu", diz "alguma coisa mudou aqui". O ouro a 13% e o mesmo gesto do marca-texto que a selecao ja
   usa (::selection, tokens.css), entao acender e selecionar passam a falar a mesma lingua.
   Fica em 13% e nao mais porque isto e FUNDO de texto corrido: a 20% o corpo do livro perde contraste no
   tema claro, e e justamente no claro que a pessoa le de dia. */
.obra-trecho-linha.aceso > *:first-child {
  background: rgba(248, 200, 0, .13);
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(248, 200, 0, .13);   /* respiro sem mexer no fluxo do texto */
}
/* A dica nao pode ser rodape apagado: ela e a unica coisa que explica onde o botao foi parar. */
.obra-dica-anotar .texto { font-size: 13px; line-height: 1.45; }
.obra-dica-anotar {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  border-left: 3px solid var(--acc-tx);
  background: rgba(127, 127, 127, .08);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.45; color: var(--tx2);
}
mark { background: var(--acc, #c8a84b); color: #0a0b10; border-radius: 2px; padding: 0 1px; }

/* FOLHA "LINK ENVIADO" (01/11/2026) · substitui o toast do Confirmar meu e-mail. Era um toast de 3 s para a
   unica acao do app que manda a pessoa SAIR dele pra terminar: ela troca de aplicativo, o toast morre no
   caminho e quem volta sem achar o e-mail fica sem nada a que recorrer. A folha fica ate ser fechada.
   O endereco vem primeiro porque e o que a pessoa esquece: qual e-mail foi mesmo que eu cadastrei. */
.email-destino { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
/* quebra-no-meio: endereco longo nao estoura a folha em tela de 360 px, e tambem nao vira reticencias --
   a pessoa precisa LER o endereco inteiro pra saber em qual caixa procurar. */
.quebra { overflow-wrap: anywhere; word-break: break-word; }
.email-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.email-passo { display: flex; gap: 10px; align-items: flex-start; }
.email-passo-ico { flex-shrink: 0; color: var(--tx2); line-height: 0; padding-top: 2px; }

/* Numeral dos passos da troca de número (01/11/2026). Aqui a ORDEM importa de verdade: pegar o outro aparelho
   antes de mandar a mensagem é o que faz a troca funcionar, e ícone igual em três linhas não diz sequência. */
.troca-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--line2); color: var(--tx2);
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; line-height: 1;
}

/* PAREAMENTO POR QR (01/11/2026) · entrar num aparelho sem WhatsApp, autorizando pelo que tem.
   O QR precisa ser GRANDE: quem lê está com outro aparelho na mão, a uns 30 cm, e câmera de celular antigo
   erra em código pequeno. Quadrado, centralizado, com fundo branco sempre -- QR em tema escuro não lê, porque
   leitor nenhum espera módulos claros sobre fundo escuro. */
.qr-caixa {
  width: min(280px, 72vw); aspect-ratio: 1; margin: 4px auto 0;
  background: #fff; border-radius: 12px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
}
.qr-caixa svg { width: 100%; height: 100%; display: block; }
.qr-codigo { text-align: center; }
/* O código é lido em voz alta ou digitado olhando pra outra tela: espaçamento entre letras evita trocar
   caracteres vizinhos, e o tabular-nums impede a largura de dançar entre dígitos. */
.qr-codigo-valor {
  font-size: 22px; letter-spacing: 3px; font-variant-numeric: tabular-nums;
  color: var(--tx); margin-top: 2px;
}
/* Pontinho que pulsa enquanto espera a confirmação: diz "ainda estou aqui" sem spinner, que num card parado
   pareceria travamento. Respeita quem pediu menos movimento. */
.pontinho-espera {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
  animation: pulsa-espera 1.4s ease-in-out infinite;
}
@keyframes pulsa-espera { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pontinho-espera { animation: none; opacity: .7; } }

/* A FIGURA DA QUESTÃO (02/11/2026) · o recorte do caderno que o item manda julgar.
   Até aqui a figura virava DESCRIÇÃO em texto dentro do enunciado — muleta medida na migração 0021: custava
   +939 caracteres em média, e o maior enunciado assim ficou a NOVE caracteres do teto do portão. Passando
   disso, a questão saía do ar em silêncio. Agora a imagem é a imagem. */
.q-figuras { display: grid; gap: 12px; margin-top: 14px; }
/* FUNDO BRANCO SEMPRE, e não é descuido com o tema escuro: recorte de caderno é traçado preto sobre papel,
   com o entorno transparente. Sem o branco, no tema escuro o desenho simplesmente some. */
.q-figura {
  margin: 0; background: #fff; border-radius: 8px; padding: 10px;
  border: 1px solid var(--line);
}
/* `height: auto` anula o atributo `height` do HTML, que existe só para o navegador reservar o espaço antes
   do byte chegar. Sem a dupla, ou a imagem distorce, ou o enunciado pula na cara de quem está lendo. */
.q-figura img { display: block; width: 100%; height: auto; max-width: 100%; }

/* ─── TELA BAIXA E LARGA: A FIGURA FICA AO LADO DO ENUNCIADO (pedido da debugger, 30/10/2026) ──────────
   "aquela que já comentei sobre virar a tela. Principalmente para os concurseiros que utilizam tablet,
   fica bem melhor."

   O app NUNCA esteve travado em retrato: o manifest não declara a orientação, então ele já gira. O
   problema é o que acontece DEPOIS -- e é a ALTURA. Num tablet deitado sobram ~768px, e as barras fixas
   (topo, abas, barra do debugger) comem perto de 150px. Com a figura EMPILHADA sobre o enunciado, a pessoa
   rola entre a imagem e a pergunta a cada releitura: olha o esquema, rola, lê o item, rola de volta. Numa
   questão de Certo/Errado isso se repete cinco, seis vezes.

   Onde falta altura costuma sobrar largura. A figura vai para o lado e os dois ficam visíveis juntos, que
   é a única coisa que importa quando a pergunta fala sobre o desenho.

   MEDE ALTURA E LARGURA, NUNCA A ORIENTAÇÃO -- e isso é regra do projeto, não preferência minha: o
   tests/ui.largura_adaptativa.mjs recusa a media feature de orientação neste arquivo, com a razão certa
   ("o que atrapalha é a altura curta, venha de celular deitado ou de janela baixa no computador"). Escrevi
   assim na primeira versão e o teste me pegou -- duas vezes, porque na segunda a palavra proibida ainda
   estava CITADA neste comentário, e o teste varre o arquivo inteiro. Ele está certo em varrer: comentário
   que ensina o padrão errado é o rascunho de quem vai copiá-lo.
   Por altura, a regra também alcança a janela baixa e larga no desktop, que tem o mesmo problema.

   O 820px de teto convive com o `max-height: 560px` que já existe: lá a tabbar e os rodapés encolhem, aqui
   o conteúdo se reorganiza. São camadas do mesmo cuidado, não regras concorrentes.

   `align-items: start` para a figura não esticar até a altura do enunciado. A ordem no HTML continua
   enunciado-depois-figura: quem usa leitor de tela ouve a pergunta antes da descrição da imagem. */
@media (max-height: 820px) and (min-width: 700px) {
  .q-enunciado:has(.q-figuras) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 16px;
    align-items: start;
  }
  .q-enunciado:has(.q-figuras) .q-figuras { margin-top: 0; }
  /* a figura pode ser alta (tabela de alcoolemia tem seis linhas): o teto evita que ela empurre os botões
     de resposta para fora da tela, que é o defeito que esta regra existe para não criar. */
  .q-enunciado:has(.q-figuras) .q-figura img { max-height: 58vh; width: auto; margin: 0 auto; }
}

/* ─── MEDALHAS DAS CONQUISTAS (02/11/2026) ─────────────────────────────────────────────────────────────
   Grade, não fila de chips. `auto-fill` com mínimo de 92px resolve o pedido antigo de adaptatividade sem
   media query: 3 colunas no celular, 4 ou 5 quando a largura do app cresce (--app-largura sobe para 560 e
   620 no tablet e no computador). Sem isso, uma grade de 3 fixas deixaria metade da faixa vazia no tablet,
   que foi a reclamação original ("a view nao ta adaptativa"). */
.medalhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
}
/* A célula tem altura livre: título de duas linhas e dica de três não podem cortar texto. */
.medalhao {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 15px 9px 13px; border-radius: 18px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}
/* Conquistada ganha o ouro da corporação na borda e um brilho curto por dentro. O não conquistado não
   ganha borda vermelha nem cadeado: ele não é um erro, é o que ainda dá para buscar. */
.medalhao.feita {
  border-color: rgba(248, 200, 0, .42);
  background: linear-gradient(180deg, rgba(248, 200, 0, .10), rgba(248, 200, 0, .02));
}

/* A peça completa fica no SVG para o aro, o miolo e o brilho responderem juntos a cada família de cor. */
.medalha {
  --badge-1: #e5a93a; --badge-2: #a35c23;
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  color: #737783; filter: saturate(.15); opacity: .62;
}
.medalha svg {
  width: 76px; height: 76px; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.medalha.feita {
  color: #fff8db; filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--badge-1) 22%, transparent)); opacity: 1;
}
.medalha-halo { fill: rgba(255, 255, 255, .025); stroke: #343741; stroke-width: 2; }
.medalha-aro { fill: #17191f; stroke: #4a4d57; stroke-width: 3; }
.medalha-miolo { fill: #202229; stroke: #555963; stroke-width: 1.2; }
.medalha-marcas { stroke: #555963; stroke-width: 2.4; }
.medalha-icone { stroke: currentColor; stroke-width: 1.75; }
.medalha-luz { stroke: rgba(255, 255, 255, .12); stroke-width: 2.2; }
.medalha.feita .medalha-halo { fill: color-mix(in srgb, var(--badge-1) 14%, transparent); stroke: color-mix(in srgb, var(--badge-1) 58%, #fff); }
.medalha.feita .medalha-aro { fill: color-mix(in srgb, var(--badge-2) 42%, #17191f); stroke: var(--badge-1); }
.medalha.feita .medalha-miolo { fill: color-mix(in srgb, var(--badge-2) 28%, #101116); stroke: color-mix(in srgb, var(--badge-1) 72%, #fff); }
.medalha.feita .medalha-marcas { stroke: var(--badge-1); }
.medalha.feita .medalha-luz { stroke: rgba(255, 255, 255, .42); }
/* pontaria e marcos: ouro, a cor da identidade */
.medalha.arte-mira, .medalha.arte-cone, .medalha.arte-placa, .medalha.arte-marco { --badge-1: var(--badge-ouro-1); --badge-2: var(--badge-ouro-2); }
/* constancia (voltar todo dia): verde */
.medalha.arte-amanhecer, .medalha.arte-calendario, .medalha.arte-galao { --badge-1: var(--badge-verde-1); --badge-2: var(--badge-verde-2); }
/* servico/carreira: laranja */
.medalha.arte-brasao { --badge-1: var(--badge-laranja-1); --badge-2: var(--badge-laranja-2); }
/* estudo da lei: azul, a mesma familia da leitura no placar */
.medalha.arte-codigo, .medalha.arte-marcador { --badge-1: var(--badge-azul-1); --badge-2: var(--badge-azul-2); }
/* dupla (trouxe alguem junto): roxo */
.medalha.arte-dupla { --badge-1: var(--badge-roxo-1); --badge-2: var(--badge-roxo-2); }

.medalhao .mtitulo { font: 750 13px/1.18 'Barlow Condensed', sans-serif; letter-spacing: .15px; color: var(--tx2); }
.medalhao.feita .mtitulo { color: var(--tx); font-weight: 800; }
/* O estado é a linha que o chip cinza não tinha: "61/100" enquanto falta, "Conquistada" depois. */
.medalhao .mestado {
  font-size: 11px; line-height: 1.3; color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.medalhao .mestado.ok { color: var(--acc-tx); }

/* Quem prefere menos movimento não perde nada aqui: não há animação a desligar, mas o brilho do disco é
   degradê, e em alto contraste o degradê some e a borda sustenta sozinha o estado. */
@media (prefers-contrast: more) {
  .medalha.feita { background: none; }
  .medalhao.feita { background: none; }
}

/* ─── TELA DESEMPENHO · por matéria e por tema (02/11/2026) ────────────────────────────────────────────
   Linha única por item: nome, barra, percentual e a fração. A fração fica porque percentual sem volume
   engana — 100% de uma questão e 100% de quarenta são a mesma cor e a mesma largura, e só o "1/1" ao lado
   separa as duas. */
.dlista { display: flex; flex-direction: column; gap: 10px; }
/* Grade em vez de flex: as quatro colunas alinham de uma linha para a outra, e é esse alinhamento que
   deixa a lista legível de relance. A barra é a única coluna elástica. */
.dlinha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.1fr auto auto;
  align-items: center; gap: 8px;
}
.dnome {
  font-size: 13px; color: var(--tx2); line-height: 1.25;
  overflow-wrap: anywhere;   /* "Normas gerais de circulação e conduta (arts. 26 a 67)" não pode estourar */
}
.dbarra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.dbarra i { display: block; height: 100%; border-radius: 99px; background: var(--acc); }
/* Três faixas, não um degradê: a pessoa precisa CLASSIFICAR ("isto está ruim"), não medir o tom. */
.dbarra.bom i { background: var(--green); }
.dbarra.meio i { background: var(--acc); }
.dbarra.ruim i { background: var(--red); }
.dpct { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.dpct.bom { color: var(--green); }
.dpct.meio { color: var(--acc-tx); }
.dpct.ruim { color: var(--red); }
.dfrac { font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
/* O número grande do acerto geral herda a mesma faixa de cor do resto da tela. */
.s-desempenho .titulo-cond.bom { color: var(--green); }
.s-desempenho .titulo-cond.meio { color: var(--acc-tx); }
.s-desempenho .titulo-cond.ruim { color: var(--red); }

/* No celular estreito o nome do tema é longo e as quatro colunas espremem a barra até ela não dizer nada.
   Abaixo de 380px o nome sobe para a própria linha e as outras três dividem a de baixo. */
@media (max-width: 379px) {
  .dlinha { grid-template-columns: 1fr auto auto; row-gap: 4px; }
  .dnome { grid-column: 1 / -1; }
}
/* "ainda poucas": abaixo do piso de amostra não há taxa nem veredito. Barra cinza (zero de largura útil) e
   a palavra no lugar do percentual; a fração continua ao lado, porque "1/1" é informação e "100%" é mentira.
   Veio da auditoria externa de 02/11, que achou "Geopolítica 100%" verde com uma resposta. */
.dbarra.pouca i { background: var(--line2); }
.dpct.pouca { color: var(--mut); font-weight: 500; font-size: 11px; }
/* MAPA DO EDITAL (02/11/2026): barra de cobertura em tres estados -- firme (verde), em fixacao (amarelo), o resto
   vazio (ainda nao vista). Mesma grade .dlinha do acerto por materia. */
.dcob { display: flex; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.dcob i { display: block; height: 100%; }
.dcob .f { background: var(--green); }
.dcob .x { background: var(--acc); }
.dpct.firme, .titulo-cond.firme { color: var(--green); }
.s-desempenho .titulo-cond.pouca { color: var(--mut); font-size: 18px; }

/* O Resumo tático reutiliza a régua visual de desempenho, mas explicita acertos e erros: aqui a lista é
   ordem de estudo, não apenas placar. */
.s-resumo .resumo-linha { align-items: center; }
.s-resumo .dnome small { display: block; margin-top: 2px; color: var(--mut); font-size: 10px; font-weight: 500; line-height: 1.2; }
.s-resumo .resumo-erros { color: var(--red); }
.s-resumo .resumo-tend { padding: 9px 11px; border-radius: 10px; background: var(--bg2); color: var(--mut); font-size: 12px; line-height: 1.4; }

/* ─── MÚLTIPLA ESCOLHA (02/11/2026) ─────────────────────────────────────────────────────────────────────
   O mesmo card de opção do Certo/Errado, empilhado, com a letra num disco à esquerda. A letra é desenhada
   pelo ÍNDICE: serve.mjs tira o "A)"/"(A)" da string antes de mandar, para "A)" de 2013 e "(A)" do Codex
   chegarem iguais. Texto longo quebra ao lado do disco, nunca por baixo dele. */
.opcoes.mc { flex-direction: column; }
.opcao-card.mc { align-items: flex-start; text-align: left; }
.opcao-card.mc .rotulo { font-weight: 500; font-size: 15px; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.opcao-letra {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line2); color: var(--tx2);
  font: 800 14px/1 'Barlow Condensed', sans-serif; letter-spacing: .5px;
}
.opcao-card.mc.selected .opcao-letra { border-color: var(--acc); background: rgba(248, 200, 0, .14); color: var(--acc-tx); }

/* Origem da questão: "CEBRASPE · PRF 2021", acima da matéria. Tom de legenda, não de título — é contexto,
   e o olho tem de pousar no enunciado. (02/11/2026, founder: "banca - prova - ano nas questões") */
.q-origem { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }

/* ── linha de função EXTRA trancada (04/11/2026) ────────────────────────────────────────────────────────
   Ela NÃO some quando está trancada, e isso é o ponto: quem não vê a função não sabe que ela existe, e o
   convite perde o motivo de ser. Fica legível, com o que falta dito no lugar do subtítulo, e sem resposta
   ao toque — não é botão, é um <div>, pela mesma razão que o Desafio não é botão na tabbar. */
.row.trancada { opacity: .62; cursor: default; }
.row.trancada .sub { color: var(--gold); }
.row.trancada .cadeado { font-size: 14px; opacity: .8; flex: none; }

/* ── o bloco da escada de destrave (04/11/2026) ─────────────────────────────────────────────────────────
   Substitui a linha "Convidar um colega · 0 de 5", que era placar de fracasso sem dizer o que os 5 abriam.
   Aqui cada degrau tem o número e o que ele destrava; o conquistado acende em ouro. É botão inteiro: abre a
   mesma folha de convite que já existia, nada duplicado. */
.destrave {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(248, 200, 0, .06), rgba(255, 255, 255, 0)), var(--card);
  border: 1px solid var(--line2); border-radius: 16px; padding: 15px 16px;
}
.destrave:active { background: rgba(255, 255, 255, .05); }
.destrave-cab { display: flex; align-items: center; gap: 9px; }
.destrave-cab b { font: 800 14.5px/1 'Barlow Condensed', sans-serif; letter-spacing: .7px; text-transform: uppercase; }
.destrave-cab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; color: var(--gold); }
.destrave-n { margin-left: auto; font: 800 12.5px/1 'Barlow Condensed', sans-serif; letter-spacing: .5px; color: var(--mut); }
.destrave-degraus { display: flex; gap: 6px; margin-top: 12px; }
.destrave-degraus i {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border-radius: 10px; font-style: normal;
  background: rgba(255, 255, 255, .04); border: 1px dashed var(--line2);
}
.destrave-degraus i b { font: 900 15px/1 'Barlow Condensed', sans-serif; color: var(--mut); }
.destrave-degraus i span {
  font: 700 9.5px/1.15 'Barlow Condensed', sans-serif; letter-spacing: .3px; text-transform: uppercase;
  color: var(--mut); text-align: center;
}
/* o degrau conquistado acende; os outros ficam legíveis, não apagados -- é o que a pessoa vai buscar */
.destrave-degraus i.on {
  background: linear-gradient(180deg, rgba(248, 200, 0, .2), rgba(248, 200, 0, .06));
  border: 1px solid rgba(248, 200, 0, .5);
}
.destrave-degraus i.on b, .destrave-degraus i.on span { color: var(--acc-tx); }
.destrave-pe { display: block; margin-top: 10px; font-size: 12.5px; color: var(--mut); line-height: 1.4; }

/* A ETIQUETA DA SESSÃO na barra do fluxo (06/11/2026): EXTRA / REVISÃO. Só aparece quando a sessão não é
   a missão do dia -- a missão é o padrão e não se anuncia. Discreta de propósito: ela informa onde a
   pessoa está, não disputa com o "3 de 10" que é o que ela olha enquanto responde. */
.topbar-fluxo .etiqueta-fluxo {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 800 10.5px/1.5 'Barlow Condensed', sans-serif;
  letter-spacing: 1.1px;
  color: var(--tx2);
  vertical-align: 1px;
}

/* ── A ARTE COLORIDA DAS CONQUISTAS (06/11/2026) ──────────────────────────────────────────────────────
   Os distintivos passaram a ser SVG PREENCHIDO (components/badgesArte.js): disco de cor, arcos de luz e
   sombra, miolo escuro, brilhos e o desenho em 4 a 7 tons da família. A cor vem do próprio SVG, então as
   regras de `--badge-1/2` abaixo valem só para o traço legado, que continua como fallback.

   NÃO CONQUISTADA = DESSATURADA, não escondida. É o que o Delta faz e é o certo: a peça continua na
   grade, reconhecível, só sem cor -- a pessoa vê o que ainda dá pra buscar. Esconder tiraria o rumo.
   `grayscale` em vez de uma segunda arte cinza: uma arte só, um arquivo só, e nada para dessincronizar. */
.medalha > svg { width: 100%; height: 100%; display: block; }
.medalha:not(.legado) {
  filter: grayscale(1) brightness(.62) contrast(.92);
  opacity: .55;
  transition: filter .18s ease, opacity .18s ease;
}
.medalha:not(.legado).feita {
  filter: none;
  opacity: 1;
  /* o halo é o que separa a peça conquistada do fundo do cartão sem precisar de borda */
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .45));
}
@media (prefers-reduced-motion: reduce) { .medalha:not(.legado) { transition: none; } }

/* ── A PISTA DA BATERIA (08/11/2026) ──────────────────────────────────────────────────
   Um traço por questão, não uma barra de porcentagem. Os segmentos SÃO as questões: numa bateria de 10 há
   10 traços, e o olho conta. A barra de % respondia "quanto do caminho" com uma precisão que ninguém usa --
   não existe 23% da questão 3 --, e a pista responde "qual é a minha agora", que é a pergunta de quem parou
   no meio. De quebra, morre o curativo: a trilha antiga tinha uma ponta branca de 3px porque "2% de barra
   é indistinguível de 0%", que era sintoma de medir dez coisas com instrumento contínuo.

   ANATOMIA DE PISTA, e ela não é enfeite (founder: "pra parecer pista tem que ter as linhas de borda").
   Uma rodovia vista de cima tem DUAS CONTÍNUAS nas laterais e a tracejada no eixo. A primeira volta só
   desenhou a tracejada, e traço solto no vazio lê como segmento de barra. Com o bordo fechando em cima e
   embaixo, o asfalto existe e os traços viram o que são: a faixa central. O bordo ainda paga um segundo
   dividendo -- dando ALTURA à pista, o disco cabe DENTRO dela, carro na estrada, sem alargar traço nenhum.

   LARGURA FIXA, NÃO ESTICADA. Com `flex:1` os traços preenchem a largura toda, e aí uma bateria de 8 fica
   do mesmo comprimento de uma de 10 -- indistinguíveis. Com largura fixa a pista ocupa só o que precisa e
   a de 8 é visivelmente mais curta, que é informação verdadeira e de graça. O número saiu de conta, não de
   gosto: traço 20 + gap 4 + padding 4 = 244px para dez questões, e cabe nos 248px úteis de uma tela de
   320px (iPhone SE). Com traço de 26 estouraria em 48px. */
.pista-wrap { margin-top: 14px; }
.pista {
  display: flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 4px;            /* border-box: 26 - 2 - 2 = 22px úteis, e o disco tem 20 */
  border-top: 2px solid rgba(255, 255, 255, .34);
  border-bottom: 2px solid rgba(255, 255, 255, .34);
  background: rgba(0, 0, 0, .28);
}
/* a faixa do eixo é FINA: é marcação de pista, não barra de progresso empilhada.
   `flex:1` DE VOLTA (founder, no aparelho: "a trilha não está seguindo a extensão da tela"). A largura
   fixa de 20px foi erro meu: o bordo é um bloco e vai até a borda do cartão, mas os traços paravam na
   metade -- pista vazia na metade direita, que na minha prova de 390px quase não aparecia e no aparelho
   real salta aos olhos. Eu tinha trocado isso pela comparação 8 × 10, que é ganho teórico: as duas nunca
   aparecem lado a lado. E o motivo que me levou à largura fixa -- o disco não caber -- morreu quando o
   bordo deu altura à pista: agora o disco mora na altura, não na largura do traço. */
.pista-seg {
  flex: 1 1 0; height: 5px; border-radius: 1px; position: relative;
  background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: background .35s ease;
}
.pista-seg.feito { background: var(--acc); box-shadow: none; }
/* A VEZ NÃO É DOURADA CHEIA. Tentei `background: var(--acc)` e o defeito apareceu na hora de contar: com
   5 feitas a pista mostrava SEIS traços dourados, porque a da vez parecia feita. Ela ainda não foi
   respondida -- então aro dourado e miolo translúcido. O que a destaca é a altura e o disco em cima. */
.pista-seg.vez { height: 7px; background: rgba(248, 200, 0, .3); box-shadow: inset 0 0 0 1px var(--acc); }
.pista-carro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: var(--pill-tx);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; line-height: 1;
  /* `<i>` E ITALICO POR PADRAO (founder: "o numero da bola nao deve ser italico"). O segmento e um
     `<i class="pista-seg">` -- escolha minha, seguindo o padrao do projeto para elemento decorativo --
     e o disco mora DENTRO dele, herdando o italico do user-agent. Nao veio de regra nossa nenhuma: veio
     da tag. O numero inclinado dentro de um circulo perde o eixo vertical e fica torto. */
  font-style: normal;
  /* SEM `tabular-nums` (founder: "parece um 7... muito mais alinhado para a direita que no meio"). Os
     dois defeitos eram a mesma causa: tabular dá a TODO dígito a largura do mais largo, e o "1", que é
     estreito, fica encostado à direita da própria célula -- alinhamento feito para colunas de números,
     exatamente errado para um dígito centralizado. Com a largura proporcional ele volta ao meio.
     E o peso 800 do Barlow em 10px fechava a serifa diagonal do "1" até virar "7": 11,5px e peso 700
     abrem o glifo. `padding-right: 1px` compensa o lado direito óptico da serifa. */
  padding-right: 1px;
  /* anel fino: com 3px ele avançava sobre os traços vizinhos e deixava um entalhe visível dos dois lados */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5);
}
/* sem numero o disco e so posicao: encolhe, porque nao precisa mais caber digito nenhum */
.pista-carro.mudo { width: 14px; height: 14px; }
.pista.completa .pista-seg { background: var(--acc); box-shadow: none; }
/* legenda curta sob a pista: nomeia a escala quando o numero grande fala de outra */
.pista-legenda {
  display: block; margin-top: 7px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--mut);
}
.pista-rot {
  display: block; margin-top: 8px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--mut);
}
@media (prefers-reduced-motion: reduce) { .pista-seg { transition: none; } }