/* Estudo CRECI-ES 412 · mobile-first, iPhone instalado na tela de início */

:root {
  --fundo: #f6f4ef;
  --cartao: #ffffff;
  --tinta: #1b1f2a;
  --tinta-2: #4a5160;
  --tinta-3: #7a8191;
  --linha: #e3dfd6;
  --marca: #14213d;
  --marca-2: #24365f;
  --acento: #c8811a;
  --acento-suave: #fbf0dd;
  --certo: #1f7a4d;
  --certo-suave: #e3f3ea;
  --errado: #b3261e;
  --errado-suave: #fbe7e5;
  --duvida: #8a5a00;
  --info-suave: #e8eef9;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 10px rgba(20, 33, 61, .05);
  --topo-h: 52px;
  --abas-h: 58px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f131b;
    --cartao: #181e29;
    --tinta: #e9ecf2;
    --tinta-2: #b8bfcc;
    --tinta-3: #8890a0;
    --linha: #2a3242;
    --marca: #0b1220;
    --marca-2: #a9c1ff;
    --acento: #f0a94a;
    --acento-suave: #2d2312;
    --certo: #4cc38a;
    --certo-suave: #12291f;
    --errado: #ff7b72;
    --errado-suave: #331615;
    --duvida: #f0c06a;
    --info-suave: #1a2436;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
a { color: var(--marca-2); }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .6em; }
small, .fraco { color: var(--tinta-3); }

/* ---------- topo e abas ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: calc(var(--topo-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 8px;
  background: var(--marca); color: #fff;
}
.topo-titulo { flex: 1; font-size: 1.05rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-voltar { background: none; border: 0; padding: 6px; margin-left: -6px; color: #fff; }
.topo-voltar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.topo-sync { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 0; border-radius: 999px; padding: 5px 10px; color: #fff; font-size: .78rem; }
.sync-ponto { width: 8px; height: 8px; border-radius: 50%; background: #5ad19a; }
.topo-sync[data-estado="salvando"] .sync-ponto { background: #f0c06a; }
.topo-sync[data-estado="offline"] .sync-ponto { background: #9aa3b5; }
.topo-sync[data-estado="erro"] .sync-ponto { background: #ff7b72; }

.abas {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  height: calc(var(--abas-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--cartao); border-top: 1px solid var(--linha);
}
.aba { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--tinta-3); font-size: .7rem; }
.aba svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aba[aria-current="page"] { color: var(--acento); font-weight: 600; }

.tela {
  padding: calc(var(--topo-h) + env(safe-area-inset-top) + 14px) max(14px, env(safe-area-inset-right)) calc(var(--abas-h) + env(safe-area-inset-bottom) + 24px) max(14px, env(safe-area-inset-left));
  max-width: 760px; margin: 0 auto; outline: none;
}

/* ---------- blocos ---------- */
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--linha); }
.cartao.destaque { border-color: var(--acento); background: var(--acento-suave); }
.cartao h2 { margin-bottom: 6px; }
.secao-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 20px 4px 8px; font-weight: 650; }
.linha { display: flex; align-items: center; gap: 10px; }
.linha .cresce { flex: 1; min-width: 0; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-top: 1px solid var(--linha); }
.lista > li:first-child { border-top: 0; }
.item-lista { display: flex; align-items: center; gap: 12px; padding: 12px 2px; text-decoration: none; color: inherit; width: 100%; background: none; border: 0; text-align: left; }
.item-lista .cresce { flex: 1; min-width: 0; }
.item-lista .sub { display: block; font-size: .84rem; color: var(--tinta-3); }
.seta { color: var(--tinta-3); }
.chip { display: inline-block; font-size: .72rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--info-suave); color: var(--tinta-2); white-space: nowrap; }
.chip.certo { background: var(--certo-suave); color: var(--certo); }
.chip.errado { background: var(--errado-suave); color: var(--errado); }
.chip.alerta { background: var(--acento-suave); color: var(--duvida); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.numero-grande { font-size: 2.1rem; font-weight: 750; line-height: 1; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; }
.kpi b { display: block; font-size: 1.35rem; }
.kpi span { font-size: .78rem; color: var(--tinta-3); }

.barra { height: 8px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.barra.certo > i { background: var(--certo); }

/* ---------- botões e campos ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); font-weight: 600; text-decoration: none; color: var(--tinta); cursor: pointer; }
.botao.cheio { background: var(--marca); border-color: var(--marca); color: #fff; }
.botao.acento { background: var(--acento); border-color: var(--acento); color: #1b1305; }
.botao.largo { width: 100%; }
.botao.peq { min-height: 36px; padding: 0 12px; font-size: .88rem; border-radius: 10px; }
.botao:disabled { opacity: .5; }
.link { background: none; border: 0; padding: 0; color: var(--marca-2); text-decoration: underline; cursor: pointer; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: .84rem; color: var(--tinta-2); margin-bottom: 4px; }
.inp, select.inp, textarea.inp { width: 100%; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta); }
textarea.inp { min-height: 120px; line-height: 1.5; }
.seg { display: flex; background: var(--linha); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 4px; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--tinta-2); }
.seg button[aria-pressed="true"] { background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra); }
.erro { color: var(--errado); min-height: 1.2em; font-size: .9rem; }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--marca); }
.entrar-caixa { width: 100%; max-width: 380px; background: var(--cartao); border-radius: 18px; padding: 24px 20px; }
.entrar-marca { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); font-weight: 700; margin-bottom: 6px; }
.entrar-titulo { font-size: 1.5rem; margin-bottom: 4px; }
.entrar-texto { color: var(--tinta-2); margin-bottom: 16px; }
.entrar-rodape { font-size: .85rem; color: var(--tinta-3); margin-top: 14px; }

/* ---------- questão ---------- */
.q-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.q-contexto { background: var(--info-suave); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: .95rem; color: var(--tinta-2); }
.q-contexto p:last-child { margin-bottom: 0; }
.q-contexto details summary { cursor: pointer; font-weight: 600; color: var(--tinta); }
.q-afirmacao { font-size: 1.08rem; line-height: 1.55; margin: 6px 0 16px; }
.q-numero { font-weight: 750; color: var(--acento); margin-right: 6px; }
.q-certeza { margin-bottom: 10px; }
.q-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-botoes .botao { min-height: 56px; font-size: 1.05rem; }
.q-botoes .c { border-color: var(--certo); color: var(--certo); }
.q-botoes .e { border-color: var(--errado); color: var(--errado); }
.q-botoes .marcado { color: #fff; }
.q-botoes .c.marcado { background: var(--certo); }
.q-botoes .e.marcado { background: var(--errado); }
.q-pular { margin-top: 8px; width: 100%; }
.q-nav { flex-wrap: nowrap; }
.q-nav .botao:not(.cheio) { padding: 0 12px; }
.q-resultado { border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.q-resultado.ok { background: var(--certo-suave); }
.q-resultado.nao { background: var(--errado-suave); }
.q-resultado.neutro { background: var(--info-suave); }
.q-resultado h3 { margin-bottom: 6px; }
.fundamento { border-left: 3px solid var(--acento); padding: 4px 0 4px 10px; margin: 8px 0; font-size: .92rem; color: var(--tinta-2); }
.fundamento b { color: var(--tinta); }
.selo { font-size: .78rem; font-weight: 650; padding: 2px 8px; border-radius: 6px; background: var(--acento-suave); color: var(--duvida); }
.q-progresso { font-size: .84rem; color: var(--tinta-3); margin-bottom: 6px; }
.rodape-fixo { position: sticky; bottom: calc(var(--abas-h) + env(safe-area-inset-bottom) + 8px); margin-top: 14px; }

/* folha de respostas do simulado */
.folha { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.folha button { min-height: 40px; border-radius: 8px; border: 1px solid var(--linha); background: var(--cartao); font-size: .8rem; font-weight: 600; }
.folha button.resp { background: var(--info-suave); }
.folha button.atual { outline: 2px solid var(--acento); }
.folha button.ok { background: var(--certo-suave); color: var(--certo); }
.folha button.nao { background: var(--errado-suave); color: var(--errado); }
.cronometro { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- lei ---------- */
.lei-art { padding: 10px 0; border-top: 1px solid var(--linha); white-space: pre-wrap; font-size: .97rem; }
.lei-art:first-child { border-top: 0; }
.lei-art.alvo { background: var(--acento-suave); border-radius: 8px; padding: 10px; }
.lei-art .nota { display: block; font-size: .78rem; color: var(--tinta-3); }
mark.num { background: none; color: var(--acento); font-weight: 700; }
mark.org { background: none; color: var(--marca-2); font-weight: 700; }
.busca-lei { position: sticky; top: calc(var(--topo-h) + env(safe-area-inset-top) + 6px); z-index: 2; margin-bottom: 8px; }

/* ---------- flashcard ---------- */
.fc { min-height: 220px; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 1.08rem; cursor: pointer; }
.fc .verso { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linha); }

/* ---------- vídeo ---------- */
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-capa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #fff; background: linear-gradient(135deg, #14213d, #3a2a12); border: 0; width: 100%; padding: 16px; text-align: center; }

/* ---------- texto corrido ---------- */
.texto h3 { margin: 14px 0 6px; }
.texto ul, .texto ol { padding-left: 1.2em; margin: 0 0 .7em; }
.texto li { margin-bottom: .3em; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { border-bottom: 1px solid var(--linha); padding: 7px 4px; text-align: left; vertical-align: top; }
.tabela th { font-size: .78rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }

.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--abas-h) + env(safe-area-inset-bottom) + 14px); z-index: 30; max-width: 92vw; background: var(--tinta); color: var(--fundo); padding: 10px 16px; border-radius: 12px; font-size: .9rem; box-shadow: 0 6px 24px rgba(0,0,0,.25); }

.vazio { text-align: center; color: var(--tinta-3); padding: 30px 10px; }
.dia-hoje { border-color: var(--acento); }
.feito { color: var(--certo); }
.check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); display: inline-flex; align-items: center; justify-content: center; flex: none; background: none; padding: 0; }
.check.on { border-color: var(--certo); background: var(--certo); color: #fff; }
.check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; }