/* ============================================================
   OAB Inteligente — sistema visual
   Paleta, tipografia e componentes. Sem build, sem framework.
   ============================================================ */

:root{
  /* Encadernação */
  --oxblood:#43151E;
  --oxblood-claro:#5E2029;
  --oxblood-escuro:#2E0D14;
  --gilt:#B08A3E;
  --gilt-claro:#D4B067;

  /* Papel */
  --papel:#F2EEE4;
  --papel-alto:#FBF9F4;
  --papel-fundo:#E4DFD2;
  --papel-sombra:#D3CCBB;

  /* Tinta */
  --tinta:#191720;
  --tinta-media:#4A4551;
  --tinta-fraca:#736D78;

  /* Carimbo — segundo acento, para estados interativos */
  --carimbo:#24384F;
  --carimbo-claro:#3B5470;

  --certo:#2C6A4F;
  --certo-fundo:rgba(44,106,79,.09);
  --errado:#9C2A2A;
  --errado-fundo:rgba(156,42,42,.08);
  --marcada:#9A6B1F;

  --fio:rgba(25,23,32,.13);
  --fio-forte:rgba(25,23,32,.26);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --corpo:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --leitura:36rem;
  --rail:5.5rem;
  --sombra-papel:0 1px 0 var(--papel-sombra),0 2px 14px rgba(25,23,32,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel-fundo);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.64;
  font-variant-numeric:oldstyle-nums;
}

.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--oxblood);color:var(--papel);padding:.7rem 1.1rem}
.pular:focus{left:0}
:focus-visible{outline:2.5px solid var(--gilt);outline-offset:3px;border-radius:1px}
.oculto{display:none !important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============================================================
   LOMBADA — cabeçalho fixo
   ============================================================ */
.lombada{
  position:sticky;top:0;z-index:40;
  background:var(--oxblood);
  box-shadow:0 1px 0 var(--gilt),0 6px 20px rgba(46,13,20,.16);
}
.lombada-interna{
  max-width:72rem;margin:0 auto;padding:.75rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
}
.marca{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.marca-titulo{
  font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--papel);
  font-variation-settings:"SOFT" 0,"WONK" 1;letter-spacing:-.01em;
}
.marca-sub{
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--gilt-claro);
}
.lombada-nav{display:flex;gap:.3rem;align-items:center}
.link-nav{
  background:none;border:0;cursor:pointer;padding:.42rem .8rem;
  font-family:var(--mono);font-size:.67rem;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(242,238,228,.66);transition:color .15s,background .15s;
}
.link-nav:hover,.link-nav.ativo{color:var(--papel);background:rgba(242,238,228,.09)}

/* ============================================================
   ESTRUTURA
   ============================================================ */
main{max-width:72rem;margin:0 auto;padding:0 1.4rem 5rem}
.tela{padding-top:2.4rem;animation:entrar .26s cubic-bezier(.2,.7,.3,1)}
@keyframes entrar{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.sobrancelha{
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--tinta-fraca);margin:0 0 .9rem;
}
.titulo-secao{
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--tinta-fraca);font-weight:500;margin:0 0 .5rem;
}
.nota-secao{margin:0 0 1.5rem;font-size:.88rem;color:var(--tinta-fraca);max-width:var(--leitura)}
.linha-fina{max-width:var(--leitura);color:var(--tinta-media);font-size:1.02rem;margin:0 0 1.6rem}

/* ============================================================
   ABERTURA — o quadro de desempenho como herói
   ============================================================ */
.abertura{padding-bottom:2.4rem;margin-bottom:2.6rem;border-bottom:1px solid var(--fio)}
.abertura h1{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.6vw,3.6rem);line-height:1.04;font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  letter-spacing:-.025em;margin:0 0 1.1rem;max-width:19ch;
}
.abertura h1 em{font-style:italic;font-variation-settings:"SOFT" 8,"WONK" 1;color:var(--oxblood)}

/* Quadro de desempenho: roscas de acerto e erro */
.nota-painel{
  margin:1.8rem 0 -.5rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em;color:var(--tinta-fraca);max-width:44rem;line-height:1.7;
}
.painel-desempenho{
  margin:2rem 0 1rem;padding:1.5rem 1.4rem;
  background:linear-gradient(178deg,var(--papel-alto),var(--papel));
  border:1px solid var(--fio);border-radius:2px 7px 7px 2px;
  box-shadow:var(--sombra-papel),inset 3px 0 0 var(--oxblood);
}

.rosca{display:block;flex:0 0 auto}
.rosca-trilho{stroke:var(--papel-sombra)}
.rosca circle{transition:stroke-dasharray .5s ease,stroke-dashoffset .5s ease}
.rosca-numero{
  font-family:var(--display);font-size:1.55rem;font-weight:600;
  fill:var(--tinta);font-variant-numeric:lining-nums;
}
.rosca-legenda-svg{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;
  fill:var(--tinta-fraca);text-transform:uppercase;
}

/* estado inicial */
.painel-vazio{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.painel-vazio-texto p{margin:0 0 .3rem}
.painel-vazio .rosca-numero{fill:var(--tinta-fraca)}

/* visão geral */
.painel-geral{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.painel-grafico{flex:0 0 auto}
.painel-numeros{list-style:none;margin:0;padding:0;flex:1 1 12rem;min-width:11rem}
.painel-numeros li{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.34rem 0;border-bottom:1px solid var(--fio);
  font-size:.9rem;
}
.painel-numeros li:last-child{border-bottom:0}
.num-marca{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--papel-sombra)}
.num-certo  .num-marca{background:var(--certo)}
.num-errado .num-marca{background:var(--errado)}
.num-rotulo{color:var(--tinta-media)}
.num-valor{
  margin-left:auto;font-family:var(--mono);font-size:.95rem;
  font-variant-numeric:lining-nums;color:var(--tinta);
}

/* por disciplina */
.painel-sub{
  margin:1.7rem 0 .9rem;padding-top:1.1rem;border-top:1px solid var(--fio);
  font-family:var(--mono);font-size:.65rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--tinta-fraca);
}
.painel-grade{
  display:grid;gap:1rem .8rem;
  grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr));
}
.disc-cartao{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:none;border:0;padding:.5rem .2rem;cursor:pointer;
  border-radius:3px;transition:background .15s,transform .15s;
  font-family:var(--corpo);
}
.disc-cartao:hover,.disc-cartao:focus-visible{background:var(--papel-fundo);transform:translateY(-2px)}
.disc-cartao .rosca-numero{font-size:1rem}
.disc-nome{
  font-size:.74rem;line-height:1.25;color:var(--tinta-media);text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.disc-conta{font-family:var(--mono);font-size:.62rem;color:var(--tinta-fraca)}

.abertura-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

/* ============================================================
   ÍNDICE — lista de disciplinas
   ============================================================ */
.indice{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.faixa{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;
  width:100%;text-align:left;cursor:pointer;
  background:var(--papel);border:1px solid transparent;border-left:0;
  padding:.72rem 1.1rem .72rem 0;
  font-family:var(--corpo);font-size:1rem;color:var(--tinta);
  transition:background .15s,transform .15s;
}
.faixa:hover{background:var(--papel-alto);transform:translateX(4px)}
.faixa-corte{
  width:var(--largura,10px);align-self:stretch;background:var(--cor);
  min-height:2.9rem;
}
.faixa-nome{font-weight:500;line-height:1.3}
.faixa-selo{
  display:inline-block;margin-left:.5rem;vertical-align:.1em;
  font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.12em;
  color:#8A6A2A;border:1px solid var(--gilt);padding:.1rem .35rem;
}
.faixa-medida{width:5.5rem;height:4px;background:rgba(25,23,32,.1);position:relative}
.faixa-medida span{position:absolute;inset:0 auto 0 0;background:var(--certo)}
.faixa-total{
  font-family:var(--mono);font-size:.82rem;font-variant-numeric:tabular-nums;
  color:var(--tinta-fraca);min-width:4.6rem;text-align:right;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.botao{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;
  padding:.8rem 1.5rem;cursor:pointer;border:1px solid var(--oxblood);
  transition:background .16s,color .16s,transform .1s;
}
.botao:active:not(:disabled){transform:translateY(1px)}
.botao-forte{background:var(--oxblood);color:var(--papel)}
.botao-forte:hover:not(:disabled){background:var(--oxblood-escuro)}
.botao-fraco{background:transparent;color:var(--oxblood)}
.botao-fraco:hover:not(:disabled){background:var(--oxblood);color:var(--papel)}
.botao-nu{border-color:transparent;color:var(--tinta-media);background:none}
.botao-nu:hover:not(:disabled){color:var(--oxblood);border-color:var(--fio-forte)}
.botao:disabled{opacity:.32;cursor:not-allowed}

.voltar{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--tinta-fraca);
}
.voltar::before{content:"← "}
.voltar:hover{color:var(--oxblood)}

/* ============================================================
   BARRA DE SESSÃO
   ============================================================ */
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.8rem;margin-bottom:.55rem;flex-wrap:wrap;
}
.barra-meio{display:flex;align-items:baseline;gap:.7rem;flex:1 1 auto;justify-content:center}
.barra-disciplina{font-weight:600;font-size:.98rem}
.barra-contador{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--tinta-fraca);font-variant-numeric:tabular-nums;
}
.barra-direita{display:flex;align-items:center;gap:1rem}
.placar{font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.placar b{font-weight:600}
.placar .c{color:var(--certo)}
.placar .e{color:var(--errado)}

.relogio{
  font-family:var(--mono);font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums;
  padding:.28rem .6rem;border:1px solid var(--fio-forte);color:var(--tinta);
}
.relogio.urgente{border-color:var(--errado);color:var(--errado);animation:pulsar 1.6s infinite}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.55}}

.trilho{height:3px;background:rgba(25,23,32,.11);margin-bottom:2.1rem;overflow:hidden}
.trilho span{display:block;height:100%;background:var(--oxblood);width:0;transition:width .35s cubic-bezier(.2,.7,.3,1)}

/* Filtros do modo estudo */
.filtros{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:1.4rem}
.filtro{
  background:none;border:1px solid var(--fio);cursor:pointer;padding:.34rem .75rem;
  font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-fraca);transition:all .15s;
}
.filtro:hover{border-color:var(--fio-forte);color:var(--tinta)}
.filtro.ativo{background:var(--carimbo);border-color:var(--carimbo);color:var(--papel-alto)}

/* ============================================================
   QUESTÃO — a página do código
   ============================================================ */
.folha{
  background:var(--papel-alto);
  border:1px solid var(--fio);
  box-shadow:var(--sombra-papel);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
}
.margem{
  border-right:1px solid var(--fio);
  padding:1.8rem .8rem 1.8rem 1rem;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  background:linear-gradient(90deg,rgba(25,23,32,.022),transparent);
}
.margem-numero{
  font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1;
  font-variation-settings:"WONK" 1;color:var(--oxblood);font-variant-numeric:lining-nums;
}
.margem-de{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--tinta-fraca)}
.margem-codigo{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:var(--tinta-fraca);
  word-break:break-all;margin-top:.4rem;line-height:1.4;
}
.margem-selo{
  font-family:var(--mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.1em;
  color:#8A6A2A;border:1px solid var(--gilt);padding:.12rem .3rem;margin-top:.3rem;
}
.margem-marcar{
  margin-top:auto;background:none;border:1px solid var(--fio);cursor:pointer;
  font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-fraca);padding:.3rem .4rem;width:100%;transition:all .15s;
}
.margem-marcar:hover{border-color:var(--marcada);color:var(--marcada)}
.margem-marcar.ativa{background:var(--marcada);border-color:var(--marcada);color:var(--papel-alto)}

.corpo-questao{padding:1.9rem 2.1rem 2rem}

.enunciado{
  font-size:1.08rem;line-height:1.74;margin:0 0 1.7rem;max-width:var(--leitura);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.enunciado::first-line{letter-spacing:.005em}

.alternativas{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.6rem}
.alt{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;
  width:100%;text-align:left;cursor:pointer;position:relative;
  background:transparent;border:1px solid var(--fio);
  padding:.85rem 1rem;
  font-family:var(--corpo);font-size:.99rem;line-height:1.58;color:var(--tinta);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.alt:hover:not(:disabled){border-color:var(--carimbo-claro);background:#fff}
.alt-letra{
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  width:1.7rem;height:1.7rem;display:grid;place-items:center;flex:none;
  border:1px solid var(--fio-forte);color:var(--tinta-media);transition:all .15s;
}
.alt.escolhida{border-color:var(--carimbo);background:#fff;box-shadow:inset 3px 0 0 var(--carimbo)}
.alt.escolhida .alt-letra{background:var(--carimbo);color:var(--papel-alto);border-color:var(--carimbo)}
.alt:disabled{cursor:default}
.alt.certa{border-color:var(--certo);background:var(--certo-fundo);box-shadow:inset 3px 0 0 var(--certo)}
.alt.certa .alt-letra{background:var(--certo);color:#fff;border-color:var(--certo)}
.alt.errada{border-color:var(--errado);background:var(--errado-fundo);box-shadow:inset 3px 0 0 var(--errado)}
.alt.errada .alt-letra{background:var(--errado);color:#fff;border-color:var(--errado)}
.alt-veredito{
  position:absolute;top:.5rem;right:.7rem;
  font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.11em;
}
.alt.certa .alt-veredito{color:var(--certo)}
.alt.errada .alt-veredito{color:var(--errado)}
.alt-nota{
  grid-column:2;font-size:.88rem;line-height:1.6;color:var(--tinta-media);
  margin-top:.65rem;padding-top:.6rem;border-top:1px dotted var(--fio-forte);
  animation:abrir .3s ease-out;
}
@keyframes abrir{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.acoes{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.dica-teclado{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--tinta-fraca);
  margin-left:auto;
}
.dica-teclado kbd{
  font-family:var(--mono);border:1px solid var(--fio-forte);padding:.08rem .3rem;
  font-size:.58rem;background:var(--papel);
}

/* Resolução */
.resolucao{margin-top:1.7rem;padding-top:1.4rem;border-top:2px solid var(--fio)}
.resolucao-faixa{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
}
.resolucao-faixa .marca-veredito{
  width:1.5rem;height:1.5rem;display:grid;place-items:center;color:#fff;font-size:.8rem;
}
.acertou .marca-veredito{background:var(--certo)}
.errou .marca-veredito{background:var(--errado)}
.acertou{color:var(--certo)}
.errou{color:var(--errado)}
.resolucao-texto{margin:0 0 1rem;max-width:var(--leitura);line-height:1.72}
.fundamento{
  margin:0;font-family:var(--mono);font-size:.76rem;line-height:1.6;
  color:var(--tinta-media);padding:.5rem 0 .5rem .9rem;border-left:2px solid var(--gilt);
}
.fundamento:empty{display:none}

/* ============================================================
   NAVEGADOR DE QUESTÕES (simulado)
   ============================================================ */
.navegador{
  margin-top:1.6rem;padding:1.1rem 1.2rem;
  background:var(--papel);border:1px solid var(--fio);
}
.navegador-titulo{
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--tinta-fraca);margin:0 0 .8rem;
}
.grade{display:flex;flex-wrap:wrap;gap:3px}
.celula{
  width:1.85rem;height:1.85rem;display:grid;place-items:center;cursor:pointer;
  background:var(--papel-alto);border:1px solid var(--fio);
  font-family:var(--mono);font-size:.66rem;font-variant-numeric:tabular-nums;
  color:var(--tinta-fraca);transition:all .12s;
}
.celula:hover{border-color:var(--tinta)}
.celula.feita{background:var(--carimbo);border-color:var(--carimbo);color:var(--papel-alto)}
.celula.marcada{border-color:var(--marcada);box-shadow:inset 0 0 0 2px var(--marcada)}
.celula.atual{outline:2px solid var(--oxblood);outline-offset:1px}
.navegador-legenda{
  display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.9rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--tinta-fraca);
}
.navegador-legenda i{width:.65rem;height:.65rem;display:inline-block;vertical-align:-.03em;margin-right:.3rem;border:1px solid var(--fio)}
.i-feita{background:var(--carimbo);border-color:var(--carimbo)}
.i-marcada{box-shadow:inset 0 0 0 2px var(--marcada)}

/* ============================================================
   SIMULADO — escolha
   ============================================================ */
.opcoes{display:grid;gap:.45rem;max-width:30rem;margin:0 0 1.7rem}
.opcao{display:block;cursor:pointer}
.opcao input{position:absolute;opacity:0;width:0;height:0}
.opcao-corpo{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  background:var(--papel);border:1px solid var(--fio);
  padding:.9rem 1.1rem;transition:all .15s;
}
.opcao-corpo strong{display:block;font-weight:600;font-size:1rem}
.opcao-corpo small{
  font-family:var(--mono);font-size:.63rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--tinta-fraca);
}
.opcao-corpo em{
  font-family:var(--mono);font-style:normal;font-size:1.3rem;font-weight:500;
  color:var(--tinta-fraca);font-variant-numeric:tabular-nums;
}
.opcao input:checked + .opcao-corpo{
  border-color:var(--oxblood);background:var(--papel-alto);box-shadow:inset 4px 0 0 var(--oxblood);
}
.opcao input:checked + .opcao-corpo em{color:var(--oxblood)}
.opcao input:focus-visible + .opcao-corpo{outline:2.5px solid var(--gilt);outline-offset:3px}

/* ============================================================
   RESULTADO
   ============================================================ */
.placa{
  display:grid;grid-template-columns:auto 1fr;gap:2.2rem;align-items:center;
  background:var(--papel-alto);border:1px solid var(--fio);
  border-top:3px solid var(--oxblood);box-shadow:var(--sombra-papel);
  padding:1.8rem 2rem;margin-bottom:2.4rem;
}
.placa-nota{text-align:center}
.nota-valor{
  font-family:var(--display);font-size:4.6rem;font-weight:600;line-height:.9;
  font-variation-settings:"WONK" 1;font-variant-numeric:lining-nums;display:block;
}
.nota-de{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--tinta-fraca);text-transform:uppercase}
.placa-texto p{margin:0 0 .6rem;max-width:30rem}
.placa-texto p:last-child{margin-bottom:0}
.corte-linha{
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  padding:.3rem .65rem;display:inline-block;
}
.corte-linha.passou{background:var(--certo);color:#fff}
.corte-linha.nao{background:var(--errado);color:#fff}

.quadro{list-style:none;margin:0;padding:0}
.quadro li{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;
  padding:.6rem 0;border-bottom:1px solid var(--fio);
}
.quadro-cor{width:4px;height:1.6rem;background:var(--cor,#666)}
.quadro-nome{font-size:.95rem}
.quadro-barra{width:6.5rem;height:5px;background:rgba(25,23,32,.1)}
.quadro-barra span{display:block;height:100%;background:var(--certo)}
.quadro-barra span.fraco{background:var(--errado)}
.quadro-fracao{
  font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums;
  color:var(--tinta-fraca);min-width:3.2rem;text-align:right;
}

/* ============================================================
   SOBRE
   ============================================================ */
.prosa{max-width:var(--leitura)}
.prosa p{margin:0 0 1.1rem}
.nota-apagar{
  display:inline-block;margin-left:.8rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;color:var(--certo);
}
.aviso{
  background:var(--papel-alto);border-left:3px solid var(--gilt);
  padding:1.1rem 1.3rem;font-size:.92rem;line-height:1.68;
}

/* ============================================================
   ESTADOS
   ============================================================ */
.estado{
  padding:3.5rem 1rem;text-align:center;font-family:var(--mono);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-fraca);
}

.rodape{border-top:1px solid var(--fio);padding:2.2rem 1.4rem;text-align:center}
.rodape p{margin:0 0 .4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--tinta-fraca)}
.rodape-fino{font-size:.6rem !important;opacity:.72;max-width:40rem;margin:0 auto !important;line-height:1.7}

/* ============================================================
   TELAS ESTREITAS
   ============================================================ */
@media (max-width:820px){
  body{font-size:16px}
  main{padding:0 1rem 3.5rem}
  .tela{padding-top:1.7rem}
  .lombada-interna{padding:.65rem 1rem}
  .marca-sub{display:none}
  .link-nav{padding:.4rem .55rem;font-size:.62rem;letter-spacing:.1em}
  .folha{grid-template-columns:1fr}
  .margem{
    flex-direction:row;align-items:center;gap:.7rem;flex-wrap:wrap;
    border-right:0;border-bottom:1px solid var(--fio);padding:.8rem 1.1rem;
  }
  .margem-numero{font-size:1.25rem}
  .margem-marcar{margin:0 0 0 auto;width:auto}
  .margem-codigo{word-break:normal}
  .corpo-questao{padding:1.3rem 1.15rem 1.5rem}
  .enunciado{text-align:left;font-size:1.03rem}
  .placa{grid-template-columns:1fr;gap:1.2rem;padding:1.4rem 1.2rem}
  .nota-valor{font-size:3.4rem}
  .quadro-barra{display:none}
  .painel-desempenho{padding:1.2rem 1rem}
  .painel-geral{gap:1.2rem;justify-content:center}
  .painel-grade{grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.9rem .5rem}
  .dica-teclado{display:none}
  .faixa-medida{display:none}
  .barra-meio{justify-content:flex-start;order:3;flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .faixa:hover,.disc-cartao:hover{transform:none}
}

/* ============================================================
   Conta, assinatura e Pix
   ============================================================ */

.link-conta{margin-left:.35rem;border:1px solid var(--fio-forte);border-radius:2px;padding:.28rem .7rem}
.link-conta:hover{border-color:var(--gilt)}

/* Aviso de amostra, dentro da sessão */
.aviso-amostra{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin:.9rem auto 0;max-width:var(--leitura);
  padding:.6rem .9rem;
  background:var(--papel-alto);
  border-left:3px solid var(--gilt);
  font-size:.92rem;color:var(--tinta-media);
  box-shadow:var(--sombra-papel);
}
.aviso-amostra .botao{margin:0;padding:.3rem .7rem;font-size:.86rem}

/* Tela de conta */
#conta-corpo{max-width:var(--leitura);margin:0 auto}

.abas{display:flex;gap:.4rem;border-bottom:1px solid var(--fio);margin-bottom:1.4rem}
.aba{
  background:none;border:0;cursor:pointer;
  font-family:var(--corpo);font-size:1rem;color:var(--tinta-fraca);
  padding:.55rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.aba:hover{color:var(--tinta)}
.aba.ativa{color:var(--oxblood);border-bottom-color:var(--oxblood);font-weight:600}

.form-conta{display:flex;flex-direction:column;gap:1rem;margin:1.2rem 0}
.form-conta .botao{align-self:flex-start}
.form-conta h4{font-family:var(--display);font-size:1.1rem;margin:1.4rem 0 0}

.campo{display:flex;flex-direction:column;gap:.32rem}
.campo span{font-size:.86rem;color:var(--tinta-media);letter-spacing:.02em}
.campo input{
  font-family:var(--corpo);font-size:1rem;color:var(--tinta);
  padding:.6rem .7rem;
  background:var(--papel-alto);
  border:1px solid var(--fio-forte);border-radius:2px;
}
.campo input:focus{outline:2px solid var(--carimbo);outline-offset:1px;border-color:var(--carimbo)}
.campo-nota{font-size:.86rem;color:var(--tinta-fraca);margin:.1rem 0}

.recados{min-height:0}
.recado{
  font-size:.92rem;margin:.5rem 0;padding:.6rem .8rem;border-left:3px solid var(--fio-forte);
  background:var(--papel-alto);
}
.recado.ruim{border-left-color:var(--errado);background:var(--errado-fundo);color:var(--errado)}
.recado.bom{border-left-color:var(--certo);background:var(--certo-fundo);color:var(--certo)}

.conta-topo{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-bottom:.8rem;border-bottom:1px solid var(--fio);margin-bottom:1.2rem;
}
.conta-email{font-family:var(--mono);font-size:.9rem;color:var(--tinta-media);margin:0}

/* Pix */
.caixa-pix{
  background:var(--papel-alto);
  border:1px solid var(--fio);
  box-shadow:var(--sombra-papel);
  padding:1.3rem;margin:1.2rem 0;
}
.pix-valor{
  font-family:var(--display);font-size:1.9rem;color:var(--oxblood);
  margin:0 0 .3rem;line-height:1.1;
}
.pix-rotulo{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--tinta-fraca);margin:1.1rem 0 .35rem;
}
.pix-codigo{
  font-family:var(--mono);font-size:.74rem;line-height:1.5;
  word-break:break-all;white-space:pre-wrap;
  background:var(--papel-fundo);
  border:1px dashed var(--fio-forte);
  padding:.7rem;margin:0 0 .8rem;
  max-height:8rem;overflow:auto;
  -webkit-user-select:all;user-select:all;
}

.lista-pag{list-style:none;padding:0;margin:.6rem 0}
.lista-pag li{
  font-size:.9rem;padding:.45rem 0;border-bottom:1px solid var(--fio);
  color:var(--tinta-media);
}
.lista-pag li::before{content:"·  ";color:var(--tinta-fraca)}
.pag-confirmado{color:var(--certo)}
.pag-recusado{color:var(--errado)}

/* ============================================================
   Painel da administradora
   ============================================================ */
.admin-secao{max-width:52rem;margin:0 auto 2.6rem}
.tabela-admin{width:100%;border-collapse:collapse;font-size:.9rem}
.tabela-admin th,.tabela-admin td{
  text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--fio);vertical-align:middle;
}
.tabela-admin th{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tinta-fraca);font-weight:500;
}
.tabela-admin td.acoes-linha{white-space:nowrap;text-align:right}
.tabela-admin .botao{padding:.25rem .6rem;font-size:.82rem;margin:0 0 0 .3rem}
.email-cel{font-family:var(--mono);font-size:.82rem;word-break:break-all}
.selo{
  display:inline-block;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.15rem .45rem;border:1px solid currentColor;border-radius:2px;
}
.selo-ativa{color:var(--certo)}
.selo-vencendo{color:var(--marcada)}
.selo-vencida,.selo-sem{color:var(--tinta-fraca)}
.selo-cancelada{color:var(--errado)}

@media (max-width:640px){
  .tabela-admin,.tabela-admin tbody,.tabela-admin tr,.tabela-admin td{display:block;width:100%}
  .tabela-admin thead{display:none}
  .tabela-admin tr{border-bottom:2px solid var(--fio-forte);padding:.7rem 0}
  .tabela-admin td{border:0;padding:.2rem 0}
  .tabela-admin td.acoes-linha{text-align:left;margin-top:.5rem}
  .tabela-admin .botao{margin:.3rem .3rem 0 0}
}
