/* ===== Sistema de design compartilhado — Bancada de Estudos Transpetro ===== */

:root{
  --paper:#eef2f1;
  --surface:#ffffff;
  --surface-2:#f4f7f6;
  --ink:#0d2126;
  --ink-2:#3a5058;
  --muted:#65797f;
  --line:#d7e0de;
  --line-2:#bfcecb;
  --accent:#0e6a72;
  --accent-2:#a8781f;
  --on-accent:#ffffff;
  --accent-soft:#dceceb;
  --accent-2-soft:#f5ecd8;
  --ok:#157a52;
  --ok-soft:#dcf2e7;
  --bad:#b23b2e;
  --bad-soft:#f8e3df;
  --shadow:0 1px 2px rgba(13,33,38,.06), 0 10px 26px -18px rgba(13,33,38,.55);
  --shadow-lift:0 4px 10px -2px rgba(13,33,38,.12), 0 18px 36px -20px rgba(13,33,38,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0a1414;
    --surface:#12201f;
    --surface-2:#172625;
    --ink:#e8f0ee;
    --ink-2:#b6c8c5;
    --muted:#87a19d;
    --line:#233937;
    --line-2:#2f4b48;
    --accent:#5bbcc0;
    --accent-2:#d8ab5c;
    --on-accent:#062223;
    --accent-soft:#173432;
    --accent-2-soft:#2c2416;
    --ok:#4fc190;
    --ok-soft:#123328;
    --bad:#e8877a;
    --bad-soft:#361c17;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px #000;
    --shadow-lift:0 6px 14px -4px rgba(0,0,0,.5), 0 22px 40px -22px #000;
  }
}
:root[data-theme="dark"]{
  --paper:#0a1414; --surface:#12201f; --surface-2:#172625;
  --ink:#e8f0ee; --ink-2:#b6c8c5; --muted:#87a19d;
  --line:#233937; --line-2:#2f4b48;
  --accent:#5bbcc0; --accent-2:#d8ab5c; --on-accent:#062223;
  --accent-soft:#173432; --accent-2-soft:#2c2416;
  --ok:#4fc190; --ok-soft:#123328;
  --bad:#e8877a; --bad-soft:#361c17;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px #000;
  --shadow-lift:0 6px 14px -4px rgba(0,0,0,.5), 0 22px 40px -22px #000;
}

*{box-sizing:border-box;}
html{background:var(--paper);}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Sans 3",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.shell{max-width:700px; margin:0 auto; padding:20px 16px 130px;}
::selection{background:var(--accent); color:var(--on-accent);}

a{color:inherit;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.voltar{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem;
  color:var(--muted); text-decoration:none; margin-bottom:14px;
}
.voltar:hover{color:var(--accent);}

h1{
  font-family:"Zilla Slab",Georgia,serif; font-weight:600; font-size:1.55rem;
  line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em;
}
h2{font-family:"Zilla Slab",Georgia,serif; font-weight:600;}
.masthead{display:flex; flex-direction:column; gap:9px; margin-bottom:16px;}
.deck-desc{color:var(--ink-2); font-size:.92rem; margin:0;}

.btn{
  min-height:48px; padding:12px 18px; border-radius:8px; background:var(--accent);
  color:var(--on-accent); border:1px solid var(--accent); font-family:"Source Sans 3",sans-serif;
  font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.01em;
}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.btn:disabled{background:var(--line-2); border-color:var(--line-2); color:var(--muted); cursor:not-allowed;}

/* ---------- cartão genérico ---------- */
.cartao{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow);
}

/* ---------- rail de progresso ---------- */
.rail{display:flex; gap:5px; margin:16px 0 20px;}
.tick{flex:1; height:5px; border-radius:99px; background:var(--line-2); transition:background .25s;}
.tick.done-ok{background:var(--ok);}
.tick.done-bad{background:var(--bad);}
.tick.now{background:var(--accent);}

/* ---------- ficha da questão ---------- */
.ficha{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:22px 20px; margin-bottom:18px;
}
.ficha-top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:15px;
}
.qnum{font-family:"Zilla Slab",Georgia,serif; font-weight:700; font-size:1.08rem; color:var(--accent); letter-spacing:.01em;}
.pag{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; color:var(--muted); letter-spacing:.04em; white-space:nowrap;}
.banca{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.71rem; line-height:1.45;
  color:var(--muted); letter-spacing:.01em; margin:0 0 13px;
}
.enunciado{margin:0 0 14px; color:var(--ink); white-space:pre-line;}
.itens{
  margin:0 0 15px; padding:12px 14px; background:var(--surface-2);
  border-left:3px solid var(--accent-2); border-radius:0 6px 6px 0;
  display:flex; flex-direction:column; gap:9px;
}
.itens p{margin:0; font-size:.95rem; color:var(--ink-2);}
.itens b{color:var(--ink); font-weight:600;}
.pergunta{margin:0 0 14px; font-weight:600;}

/* ---------- alternativas: cartão-resposta (bolhas) ---------- */
.alts{display:flex; flex-direction:column; gap:9px;}
.alt{
  display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  min-height:50px; padding:11px 14px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:9px; font:inherit; font-size:.95rem;
  cursor:pointer; transition:border-color .15s, background .15s, transform .1s;
}
.alt:hover:not(:disabled){border-color:var(--accent); transform:translateX(2px);}
.alt:active:not(:disabled){transform:translateX(2px) scale(.995);}
.alt:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.alt .letra{
  flex:none; width:28px; height:28px; border-radius:50%;
  border:1.75px solid var(--line-2); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:700; font-size:.8rem;
  color:var(--muted); transition:all .18s cubic-bezier(.34,1.56,.64,1);
}
.alt[aria-pressed="true"] .letra{
  border-color:var(--accent); background:var(--accent); color:var(--on-accent);
  transform:scale(1.08);
}
.alt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);}
.alt:disabled{cursor:default;}
.alt:disabled:hover{transform:none;}
.alt.is-right{border-color:var(--ok); background:var(--ok-soft);}
.alt.is-right .letra{border-color:var(--ok); background:var(--ok); color:#fff; transform:scale(1.1);}
.alt.is-wrong{border-color:var(--bad); background:var(--bad-soft);}
.alt.is-wrong .letra{border-color:var(--bad); background:var(--bad); color:#fff;}
.alt .marca{
  margin-left:auto; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; flex:none; align-self:center; font-weight:600;
}
.alt.is-right .marca{color:var(--ok);}
.alt.is-wrong .marca{color:var(--bad);}

/* ---------- risca alternativa (técnica de eliminação) ---------- */
.alt-linha{display:flex; gap:8px; align-items:stretch;}
.alt-linha .alt{flex:1;}
.alt.riscada .alt-texto{text-decoration:line-through; text-decoration-thickness:1.5px;}
.alt.riscada{opacity:.55;}
.tesoura{
  flex:none; width:44px; min-height:50px; border-radius:9px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--muted); font-size:1rem; cursor:pointer; transition:all .15s;
}
.tesoura:hover:not(:disabled){border-color:var(--bad); color:var(--bad);}
.tesoura[aria-pressed="true"]{background:var(--bad-soft); border-color:var(--bad); color:var(--bad);}
.tesoura:disabled{cursor:default; opacity:.4;}
.tesoura:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- correção ---------- */
.correcao{display:flex; flex-direction:column; gap:0; margin-top:18px; animation:surge .35s ease both;}
.veredito{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 15px;
  border-radius:9px; margin-bottom:16px; font-family:"Zilla Slab",Georgia,serif;
  font-weight:600; font-size:1.08rem;
}
.veredito.ok{background:var(--ok-soft); color:var(--ok);}
.veredito.bad{background:var(--bad-soft); color:var(--bad);}
.veredito .gab{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.78rem; letter-spacing:.06em; opacity:.85; font-weight:500;}
.faixa{padding:0 0 0 14px; border-left:2px solid var(--line-2); margin-bottom:16px;}
.faixa h3{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 7px; font-weight:600;
}
.faixa p{margin:0 0 9px; font-size:.95rem; color:var(--ink-2);}
.faixa p:last-child{margin-bottom:0;}
.faixa strong{color:var(--ink); font-weight:600;}
.faixa em{font-style:italic;}
.faixa.tecnica{border-left-color:var(--accent);}
.faixa.pendente{border-left-color:var(--accent-2);}
.faixa.pendente p{color:var(--muted); font-style:italic;}
.macete{background:var(--accent-2-soft); border:1px solid var(--accent-2); border-radius:9px; padding:14px 16px; margin-bottom:4px;}
.macete h3{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); margin:0 0 7px; font-weight:600;
}
.macete p{margin:0; font-size:.95rem; color:var(--ink);}

/* ---------- barra de ação fixa ---------- */
.acao{
  position:fixed; left:0; right:0; bottom:0; z-index:5; background:var(--surface);
  border-top:1px solid var(--line); padding:11px 15px calc(11px + env(safe-area-inset-bottom));
}
.acao-in{max-width:700px; margin:0 auto; display:flex; gap:11px; align-items:center;}
.placar{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.73rem; color:var(--muted);
  letter-spacing:.04em; flex:none; font-variant-numeric:tabular-nums;
}
.acao .btn{flex:1;}

/* ---------- fechamento de sessão ---------- */
.fim{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px 20px; box-shadow:var(--shadow);}
.fim h2{font-size:1.3rem; margin:0 0 5px;}
.fim .score{
  font-family:"Zilla Slab",Georgia,serif; font-size:2.8rem; font-weight:700; color:var(--accent);
  line-height:1; margin:14px 0 4px; font-variant-numeric:tabular-nums;
}
.fim ul{margin:14px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:7px;}
.fim li{font-size:.93rem; color:var(--ink-2);}
.fim li b{color:var(--ink);}
.sync{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem; color:var(--muted);
  letter-spacing:.03em; margin-top:18px; padding-top:12px; border-top:1px solid var(--line);
}
.vazio{color:var(--muted); font-size:.92rem; padding:20px 0;}

/* ---------- revisão de erradas (inspirado em listas de banco de questões) ---------- */
.filtros{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.filtros::-webkit-scrollbar{display:none;}
.pilula{
  flex:none; padding:7px 14px; border-radius:99px; border:1.5px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); font-size:.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:all .15s;
}
.pilula:hover{border-color:var(--accent);}
.pilula.ativa{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.pilula .contagem{opacity:.75; font-weight:500; margin-left:4px;}

.tag{
  display:inline-flex; align-items:center; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem; letter-spacing:.03em; padding:2px 8px; border-radius:5px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}

.lista-erros{display:flex; flex-direction:column; gap:8px;}
.erro-item{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.erro-cabeca{
  display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;
  background:none; border:0; width:100%; text-align:left; font:inherit; color:inherit;
}
.erro-bolhas{display:flex; gap:5px; flex:none;}
.erro-bolha{
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.65rem; font-weight:700;
}
.erro-bolha.sua{background:var(--bad-soft); color:var(--bad); border:1.5px solid var(--bad);}
.erro-bolha.certa{background:var(--ok-soft); color:var(--ok); border:1.5px solid var(--ok);}
.erro-corpo{flex:1; min-width:0;}
.erro-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px;}
.erro-preview{
  font-size:.9rem; color:var(--ink); margin:0; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.erro-seta{flex:none; color:var(--muted); transition:transform .2s; font-size:.85rem;}
.erro-item.aberto .erro-seta{transform:rotate(90deg);}
.erro-detalhe{padding:0 18px 18px; display:none;}
.erro-item.aberto .erro-detalhe{display:block; animation:surge .3s ease both;}
.erro-detalhe .enunciado{font-size:.92rem;}

.resumo-tema{
  display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line);
}
.resumo-tema:first-child{border-top:none;}
.resumo-tema .nome{flex:1; font-size:.9rem; font-weight:600;}
.resumo-tema .barra{width:80px; height:6px; border-radius:99px; background:var(--line); overflow:hidden; flex:none;}
.resumo-tema .barra-fill{height:100%; background:var(--bad); border-radius:99px;}
.resumo-tema .fracao{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; color:var(--muted); flex:none; width:44px; text-align:right;
}

@keyframes surge{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }