/* =====================================================================
   FaroJus INSS — visual "de loja"
   Dourado e marrom da marca, cartões grandes e arredondados, barra de
   navegação inferior no celular, tela de abertura, modo escuro.
   Todos os seletores usados pelo app.js estão preservados.
   ===================================================================== */

:root {
  --tinta: #23180e; --tinta-suave: #5c4a37; --tinta-fraca: #8a7761;
  --papel: #faf7f1; --papel-alto: #ffffff; --papel-fundo: #f3efe8;
  --borda: #e8e0d3; --borda-forte: #cbbca2;
  --ouro: #9a6f18; --ouro-claro: #c79a33; --ouro-fundo: #fbf3de; --ouro-escuro: #6e4e0f;
  --acerto: #2f6b43; --acerto-fundo: #e8f3ec; --erro: #a3302b; --erro-fundo: #fbecea;
  --aviso: #8a5a12; --aviso-fundo: #fdf3e0; --ia: #4a4392; --ia-fundo: #eeedf8;
  --raio: 18px; --raio-p: 12px;
  --sombra: 0 2px 6px rgba(35,24,14,.06), 0 12px 32px rgba(35,24,14,.07);
  --sombra-p: 0 1px 3px rgba(35,24,14,.08);
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fonte-serif: Georgia, "Times New Roman", serif;
  --barra-inferior: 0px;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --tinta: #f0e7d9; --tinta-suave: #c3b6a2; --tinta-fraca: #8d8272;
  --papel: #1a1611; --papel-alto: #241f18; --papel-fundo: #131009;
  --borda: #3a3228; --borda-forte: #514637;
  --ouro: #d9ae51; --ouro-claro: #e8c878; --ouro-fundo: #2e2513; --ouro-escuro: #b8902f;
  --acerto: #7bc496; --acerto-fundo: #17261c; --erro: #e8908a; --erro-fundo: #2c1615;
  --aviso: #e0b26a; --aviso-fundo: #2a2011; --ia: #a9a3e6; --ia-fundo: #1e1c33;
  --sombra: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35); --sombra-p: 0 1px 3px rgba(0,0,0,.4);
}}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel-fundo); color: var(--tinta); font-family: var(--fonte); font-size: 15.5px; line-height: 1.6; padding-bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom)); }

/* ------------------------- tela de abertura ------------------------- */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: linear-gradient(160deg, #6e4e0f, #9a6f18 55%, #c79a33); color: #fff; transition: opacity .45s ease, visibility .45s; }
#splash.sumir { opacity: 0; visibility: hidden; }
#splash .logo { width: 96px; height: 96px; border-radius: 24px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; font-family: var(--fonte-serif); font-size: 44px; font-weight: 700; letter-spacing: 1px; animation: pulsar 1.4s ease-in-out infinite; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
#splash .nome { margin-top: 18px; font-size: 21px; font-weight: 650; letter-spacing: -.2px; }
#splash .sub { font-size: 13px; opacity: .8; margin-top: 2px; }
@keyframes pulsar { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ------------------------------ topo -------------------------------- */
.topo { position: sticky; top: 0; z-index: 20; background: linear-gradient(135deg, var(--ouro-escuro), var(--ouro) 60%, var(--ouro-claro)); color: #fff; padding: calc(12px + env(safe-area-inset-top)) 18px 0; box-shadow: 0 6px 24px rgba(110,78,15,.25); }
.marca { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.selo { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 700; font-family: var(--fonte-serif); letter-spacing: .5px; }
.topo h1 { margin: 0; font-size: 16.5px; font-weight: 650; letter-spacing: -.2px; }
.topo p { margin: 0; font-size: 12px; opacity: .85; }
.abas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button { appearance: none; border: 0; border-bottom: 3px solid transparent; background: none; color: rgba(255,255,255,.78); font: inherit; font-size: 14px; padding: 8px 13px 10px; cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0; }
.abas button:hover { color: #fff; background: rgba(255,255,255,.1); }
.abas button.ativa { color: #fff; border-bottom-color: #fff; font-weight: 600; }

/* --------------------------- barra inferior ------------------------- */
.barra-inferior { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--papel-alto); border-top: 1px solid var(--borda); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(35,24,14,.08); }
.barra-inferior button { appearance: none; border: 0; background: none; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 10.5px; font-weight: 560; color: var(--tinta-fraca); padding: 4px 0; cursor: pointer; border-radius: 10px; }
.barra-inferior button svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.barra-inferior button.ativa { color: var(--ouro); }
.barra-inferior button.ativa svg { fill: var(--ouro-fundo); }
.barra-inferior button:active { transform: scale(.94); }
@media (max-width: 720px) {
  :root { --barra-inferior: 66px; }
  .abas { display: none; }
  .barra-inferior { display: flex; }
  .topo { padding-bottom: 0; }
  .marca { padding-bottom: 12px; }
  .rodape { padding-bottom: 20px; }
}

/* ------------------------------ layout ------------------------------ */
main { max-width: 900px; margin: 0 auto; padding: 18px 16px 60px; }
.vista { display: none; } .vista.ativa { display: block; animation: surge .22s ease-out; }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bloco { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.bloco h2 { margin: 0 0 4px; font-size: 16px; font-weight: 680; letter-spacing: -.2px; }
.bloco-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dica { font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.5; }
.vazio { color: var(--tinta-fraca); font-size: 14px; padding: 8px 0; }

/* -------------------------- painel: herói ---------------------------- */
.heroi { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, var(--ouro-escuro), var(--ouro) 55%, var(--ouro-claro)); color: #fff; border-radius: var(--raio); padding: 20px; margin-bottom: 14px; box-shadow: 0 14px 36px rgba(110,78,15,.3); }
.anel { position: relative; width: 108px; height: 108px; }
.anel svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.anel .fundo { stroke: rgba(255,255,255,.22); }
.anel .valor { stroke: #fff; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.anel .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05; }
.anel .centro b { font-size: 24px; font-weight: 720; }
.anel .centro small { font-size: 10px; opacity: .85; }
.heroi h2 { margin: 0 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.heroi p { margin: 0 0 12px; font-size: 13px; opacity: .9; }
.heroi .btn-heroi { appearance: none; border: 0; background: #fff; color: var(--ouro-escuro); font: inherit; font-weight: 680; font-size: 14px; padding: 10px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.heroi .btn-heroi:active { transform: scale(.97); }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.chip { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px 10px; text-align: center; box-shadow: var(--sombra-p); }
.chip .n { font-size: 22px; font-weight: 720; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ouro-escuro); }
.chip .r { font-size: 11px; color: var(--tinta-fraca); margin-top: 3px; }
.chip.fogo .n { color: #d9642a; }
@media (max-width: 420px) { .heroi { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* cartões antigos (ainda usados no resultado do simulado) */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cartao { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 14px 16px; box-shadow: var(--sombra-p); }
.cartao .numero { font-size: 26px; font-weight: 720; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cartao .rotulo { font-size: 12px; color: var(--tinta-fraca); margin-top: 2px; }
.cartao.destaque { background: var(--ouro-fundo); border-color: var(--borda-forte); }
.cartao.destaque .numero { color: var(--ouro); }

/* ----------------------------- botões ------------------------------- */
.btn { appearance: none; border: 1px solid var(--borda-forte); background: var(--papel-alto); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 560; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .12s, transform .06s; min-height: 42px; }
.btn:hover:not(:disabled) { background: var(--papel-fundo); border-color: var(--ouro); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: linear-gradient(135deg, var(--ouro), var(--ouro-claro)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(154,111,24,.3); }
.btn-primario:hover:not(:disabled) { filter: brightness(1.05); color: #fff; }
.btn-ia { background: var(--ia-fundo); border-color: transparent; color: var(--ia); }
.btn-ia:hover:not(:disabled) { background: var(--ia); color: #fff; }
.btn-perigo { border-color: var(--erro); color: var(--erro); }
.btn-perigo:hover:not(:disabled) { background: var(--erro); color: #fff; }
.btn-arquivo { display: inline-block; }
.linha-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ----------------------------- filtros ------------------------------ */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filtros label, .campo-largo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tinta-fraca); }
.campo-largo { margin: 12px 0; }
select, input[type="text"], input[type="number"] { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: var(--papel-alto); color: var(--tinta); min-width: 120px; }
.campo-largo input { width: 100%; }
select:focus, input:focus { outline: 2px solid var(--ouro-claro); outline-offset: 1px; }
.filtros label.check { flex-direction: row; align-items: center; gap: 6px; }
.barra-modo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--sombra-p); }
.barra-modo .filtros { margin-bottom: 0; }

/* ----------------------------- questão ------------------------------ */
.questao { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 18px; box-shadow: var(--sombra); margin-bottom: 14px; }
.questao-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11px; margin-bottom: 14px; }
.etiqueta { padding: 3px 9px; border-radius: 999px; background: var(--papel-fundo); color: var(--tinta-suave); border: 1px solid var(--borda); font-weight: 600; }
.etiqueta.banca { background: var(--ouro-fundo); color: var(--ouro-escuro); border-color: transparent; }
.etiqueta.base { background: var(--acerto-fundo); color: var(--acerto); border-color: transparent; }
.etiqueta.intermediaria { background: var(--aviso-fundo); color: var(--aviso); border-color: transparent; }
.etiqueta.pegadinha { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
.etiqueta.ia { background: var(--ia-fundo); color: var(--ia); border-color: transparent; }
.etiqueta.id { font-family: ui-monospace, Consolas, monospace; letter-spacing: -.3px; }
.enunciado { font-family: var(--fonte-serif); font-size: 17px; line-height: 1.6; margin-bottom: 16px; }
.alternativas { display: flex; flex-direction: column; gap: 8px; }
.alternativa { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1.5px solid var(--borda); border-radius: 14px; cursor: pointer; background: var(--papel-alto); transition: border-color .12s, background .12s, transform .06s; text-align: left; font: inherit; font-size: 15px; color: inherit; width: 100%; }
.alternativa:hover:not(:disabled) { border-color: var(--ouro); background: var(--ouro-fundo); }
.alternativa:active:not(:disabled) { transform: scale(.99); }
.alternativa:disabled { cursor: default; }
.alternativa .letra { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--papel-fundo); border: 1px solid var(--borda-forte); font-size: 12.5px; font-weight: 700; }
.alternativa.marcada { border-color: var(--ouro); background: var(--ouro-fundo); }
.alternativa.marcada .letra { background: var(--ouro); border-color: var(--ouro); color: #fff; }
.alternativa.correta { border-color: var(--acerto); background: var(--acerto-fundo); }
.alternativa.correta .letra { background: var(--acerto); border-color: var(--acerto); color: #fff; }
.alternativa.marcada-errada { border-color: var(--erro); background: var(--erro-fundo); }
.alternativa.marcada-errada .letra { background: var(--erro); border-color: var(--erro); color: #fff; }
.alternativa.apagada { opacity: .55; }
.por-alternativa { font-size: 12.5px; color: var(--tinta-suave); margin-top: 6px; padding-left: 40px; line-height: 1.55; }

/* --------------------------- resultado ------------------------------ */
.veredito { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: 14px; }
.veredito.ok { background: var(--acerto-fundo); color: var(--acerto); }
.veredito.nok { background: var(--erro-fundo); color: var(--erro); }
.veredito strong { display: block; margin-bottom: 3px; font-size: 15px; }
.explicacao { margin-top: 14px; }
.explicacao h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-fraca); margin: 16px 0 6px; font-weight: 700; }
.explicacao p { margin: 0 0 8px; font-size: 14px; line-height: 1.62; }
.fundamento { font-size: 13px; color: var(--tinta-suave); background: var(--papel-fundo); padding: 10px 12px; border-radius: 10px; }
.resposta-ia { background: var(--ia-fundo); border-radius: 14px; padding: 14px 16px; margin-top: 14px; font-size: 14px; line-height: 1.62; white-space: pre-wrap; }
.resposta-ia .rotulo-ia { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ia); font-weight: 700; margin-bottom: 7px; }
.acoes-questao { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* --------------------------- cobertura ------------------------------ */
.item-cobertura { display: grid; grid-template-columns: 2.2fr 3fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.item-cobertura:last-child { border-bottom: 0; }
.item-cobertura .nome { color: var(--tinta-suave); }
.item-cobertura .nome b { color: var(--tinta); font-weight: 650; }
.barra { height: 8px; background: var(--papel-fundo); border-radius: 6px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--ouro); border-radius: 6px; transition: width .6s ease; }
.barra > i.pouco { background: var(--erro); } .barra > i.medio { background: var(--aviso); } .barra > i.muito { background: var(--acerto); }
.item-cobertura .conta { font-size: 12px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }

/* ----------------------------- diversos ----------------------------- */
.aviso { background: var(--aviso-fundo); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.58; margin: 10px 0 16px; }
.status { padding: 10px 13px; border-radius: 12px; font-size: 13.5px; background: var(--papel-fundo); }
.status.ok { background: var(--acerto-fundo); color: var(--acerto); }
.status.nok { background: var(--aviso-fundo); color: var(--aviso); }
.cronometro { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--ouro-fundo); color: var(--ouro-escuro); }
.cronometro.acabando { background: var(--erro-fundo); color: var(--erro); }
.progresso-sim { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.grade-gabarito { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.grade-gabarito span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--borda); }
.grade-gabarito span.ok { background: var(--acerto-fundo); color: var(--acerto); border-color: var(--acerto); }
.grade-gabarito span.nok { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); }
.linha-erro { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.linha-erro:last-child { border-bottom: 0; }
.linha-erro .trecho { color: var(--tinta-suave); flex: 1; }
.linha-erro .placar { font-size: 12px; color: var(--erro); font-weight: 700; white-space: nowrap; }
.carregando { color: var(--tinta-fraca); font-size: 13.5px; }
.carregando::after { content: '·'; animation: pontos 1.2s steps(4, end) infinite; }
@keyframes pontos { 0% { content: '·'; } 33% { content: '··'; } 66% { content: '···'; } }
.notificacao { position: fixed; bottom: calc(var(--barra-inferior) + 18px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 160px); visibility: hidden; background: var(--tinta); color: var(--papel); padding: 12px 20px; border-radius: 999px; font-size: 13.5px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .22s ease-out; max-width: 88vw; }
.notificacao.visivel { transform: translate(-50%, 0); visibility: visible; }

/* ----------------------------- aulas -------------------------------- */
.grupo-aulas { border-bottom: 1px solid var(--borda); padding: 4px 0; }
.grupo-aulas:last-child { border-bottom: 0; }
.grupo-aulas summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; padding: 12px 2px; font-size: 14.5px; list-style: none; }
.grupo-aulas summary::-webkit-details-marker { display: none; }
.grupo-aulas summary::before { content: '▸'; color: var(--ouro); margin-right: 6px; }
.grupo-aulas[open] summary::before { content: '▾'; }
.grupo-aulas summary > span:first-child { flex: 1; }
.linha-aula { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 12px; margin: 0 0 8px; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel-alto); color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.linha-aula:hover { border-color: var(--ouro); background: var(--ouro-fundo); }
.marca-vista { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--ouro-fundo); color: var(--ouro-escuro); }
#playerAula, .grupo-aulas { scroll-margin-top: 150px; }
.quadro-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; margin: 10px 0 4px; }
.quadro-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------- acesso -------------------------------- */
.acesso { max-width: 460px; margin: 30px auto; text-align: center; }
.acesso input { flex: 1; min-width: 180px; text-align: center; font-size: 17px; letter-spacing: .5px; }
.acesso .linha-botoes { justify-content: center; }

.rodape { text-align: center; font-size: 12px; color: var(--tinta-fraca); padding: 0 16px 28px; }
.rodape a { color: var(--tinta-fraca); }
[oculto] { display: none !important; }

@media (max-width: 620px) {
  main { padding: 14px 12px 60px; }
  .bloco, .questao { padding: 16px 14px; }
  .item-cobertura { grid-template-columns: 1.6fr 2fr auto; font-size: 12px; }
}