/* Questões do Zé — tema (azul/preto/branco, direção SaaS clean) */
:root {
  --azul:#2563eb; --azul-claro:#eff6ff; --ink:#0f172a; --mut:#64748b;
  --fundo:#f5f7fb; --card:#fff; --linha:#e2e8f0;
  --ok:#16a34a; --ok-bg:#ecfdf3; --bad:#dc2626; --bad-bg:#fef3f2;
  --dica-bg:#fffbeb; --dica-bd:#fde68a; --sombra:0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 Inter,system-ui,sans-serif; background:var(--fundo); color:var(--ink); }
button, input { font:inherit; }
.wrap { max-width:680px; margin:0 auto; padding:16px; }

/* Cabeçalho / marca */
header { background:var(--card); border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:5; }
.topo { display:flex; align-items:center; gap:10px; padding-top:10px; padding-bottom:10px; }
.logo { width:34px; height:34px; border-radius:9px; background:var(--azul); color:#fff;
        display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; }
.marca .overline { font-size:9px; letter-spacing:2px; color:var(--mut); font-weight:600; }
.marca .nome { font-size:16px; font-weight:800; }
nav { margin-left:auto; display:flex; gap:4px; }
.link { background:none; border:0; color:var(--azul); cursor:pointer; padding:6px 8px;
        border-radius:8px; font-weight:600; font-size:14px; }
.link:hover { background:var(--azul-claro); }

/* Cartões e blocos */
.cartao { background:var(--card); border:1px solid var(--linha); border-radius:14px;
          padding:16px; margin:12px 0; box-shadow:var(--sombra); }
.cartao h2 { font-size:16px; margin:0 0 10px; }
.sec { font-size:12px; letter-spacing:1.5px; color:var(--mut); margin:20px 0 4px; }
.tags { margin-bottom:8px; }
.tb { background:#f8fafc; border-left:3px solid var(--linha); border-radius:8px;
      padding:10px 12px; margin:8px 0; white-space:pre-wrap; font-size:15px; }
.enun { font-weight:600; margin:8px 0; white-space:pre-wrap; }
.vazio { color:var(--mut); text-align:center; padding:28px; }
.vazio.mini { padding:10px; text-align:left; }
.mut { color:var(--mut); font-size:14px; }
.centro { text-align:center; }

/* Chips (filtros/quantidade/tags) */
.label { font-size:10px; letter-spacing:1.5px; color:var(--mut); font-weight:600; margin:10px 0 4px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:1px solid var(--linha); background:var(--card); color:var(--mut);
        border-radius:16px; padding:4px 12px; font-size:13px; cursor:pointer; }
.chip.on { border:1.5px solid var(--azul); background:var(--azul-claro); color:var(--azul); font-weight:600; }
.chip.mini { padding:2px 9px; font-size:12px; cursor:default; background:var(--azul-claro);
             color:var(--azul); border:0; font-weight:600; }

/* Filtros (selects) */
.filtros { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-bottom:12px; }
.filtro { display:flex; flex-direction:column; gap:4px; }
.filtro .label { margin:0; }
.filtro select { font:inherit; padding:9px 10px; border:1px solid var(--linha); border-radius:10px;
  background:#fff; color:var(--ink); width:100%; }
.filtro select:focus { outline:2px solid var(--azul); border-color:var(--azul); }
@media (max-width:480px){ .filtros { grid-template-columns:1fr; } }

/* Botões */
.btn { border:0; border-radius:10px; padding:11px 16px; cursor:pointer; font-weight:700; font-size:15px; }
.btn.primario { background:var(--azul); color:#fff; }
.btn.fantasma { background:var(--azul-claro); color:var(--azul); }
.btn[disabled] { opacity:.5; cursor:default; }
.acoes { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.acoes.centro { justify-content:center; }
.acoes input { flex:1; border:1px solid var(--linha); border-radius:10px; padding:10px 12px; min-width:160px; }

/* Alternativas */
.alt { display:block; width:100%; text-align:left; background:var(--card);
       border:1px solid var(--linha); border-radius:10px; padding:11px 13px; margin:6px 0; cursor:pointer; }
.alt:hover { border-color:var(--azul); }
.alt.sel { border:2px solid var(--azul); background:var(--azul-claro); }
.alt.certa { border-color:var(--ok); background:var(--ok-bg); }
.alt.errada { border-color:var(--bad); background:var(--bad-bg); }

/* Sessão (modo foco) */
.sessao-topo { display:flex; align-items:center; gap:10px; margin:12px 0 0; }
.prog { flex:1; background:var(--linha); border-radius:6px; height:8px; overflow:hidden; }
.prog > div { height:100%; background:var(--azul); transition:width .25s ease; }
.cont { font-size:13px; color:var(--mut); font-weight:600; }
.notona { font-size:40px; font-weight:800; color:var(--azul); }

/* Feedback / comentário */
.banner { border-radius:10px; padding:11px 13px; font-weight:700; margin:10px 0; }
.banner.ok { background:var(--ok-bg); color:#067647; border:1px solid #a6f4c5; }
.banner.no { background:var(--bad-bg); color:#b42318; border:1px solid #fecdca; }
.rotulo-zc { font-size:11px; letter-spacing:1.5px; color:var(--azul); font-weight:700; margin:12px 0 4px; }
.bloco { background:#f8fafc; border-radius:10px; padding:12px; margin:8px 0; white-space:pre-wrap; }
.bloco.dica { background:var(--dica-bg); border:1px solid var(--dica-bd); }
.teoria summary { cursor:pointer; color:var(--mut); font-size:14px; margin:8px 0; }
.prox { width:100%; margin-top:10px; }

/* Atalhos e cadernos */
.atalhos { display:flex; gap:10px; }
.atalho { flex:1; text-align:center; cursor:pointer; font-weight:600; font-size:14px; border:1px solid var(--linha); }
.atalho span { display:block; font-size:20px; margin-bottom:4px; }
.caderno-item { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.caderno-item .acoes { margin-top:0; }

/* Modal (e-mail) e aviso */
#modal .modal-fundo { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:20; }
#modal .modal-cartao { position:fixed; left:50%; top:40%; transform:translate(-50%,-50%);
  background:var(--card); border-radius:14px; padding:20px; width:min(92vw,380px); z-index:21;
  box-shadow:0 10px 40px rgba(16,24,40,.25); display:flex; flex-direction:column; gap:10px; }
#modal input { border:1px solid var(--linha); border-radius:10px; padding:11px 12px; }
.aviso { position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; border-radius:10px; padding:10px 16px; font-size:14px;
  z-index:30; box-shadow:var(--sombra); }

/* Progresso (barras + evolução) */
.stat { display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; }
.stat .big { font-size:32px; font-weight:800; color:var(--azul); }
.barra { background:#eef2f7; border-radius:6px; height:10px; overflow:hidden; margin-top:4px; }
.barra > div { height:100%; background:var(--azul); }
.linha-assunto { margin:8px 0; }
.linha-assunto .top { display:flex; justify-content:space-between; font-size:14px; }
.evo-topo { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.evo-topo select { font:inherit; padding:4px 6px; border:1px solid var(--linha); border-radius:8px; }
.evo svg { width:100%; height:auto; display:block; }
.evo .vazio-evo { color:var(--mut); font-size:14px; }
.evo polyline { fill:none; stroke:var(--azul); stroke-width:2; }
.evo circle { fill:var(--azul); }
.evo .eixo { stroke:var(--linha); stroke-width:1; }
.evo .rotulo { fill:var(--mut); font-size:10px; }

/* Hero ilustrado */
.hero { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#eff6ff,#fff);
  border:1px solid var(--linha); border-radius:16px; padding:16px 18px; margin-bottom:14px; }
.hero-texto h2 { margin:0 0 4px; font-size:19px; }
.hero-texto p { margin:0; color:var(--mut); font-size:14px; }
.hero-img { width:220px; max-width:45%; height:auto; flex:0 0 auto; }
@media (max-width:520px){ .hero { flex-direction:column-reverse; text-align:center; } .hero-img { max-width:70%; } }

/* Animações */
.entra { animation:entra .22s ease; }
@keyframes entra { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .entra { animation:none; }
  .prog > div { transition:none; }
}