/* Base canônica compartilhada — paleta COREN (#0072BA / #0B2E4E / #00538A / #D9E3ED / #FFFFFF).
   Nunca usar preto como cor estrutural. Sem altura fixa, sem scroll interno. */
:root{
  --azul:#0072BA;
  --azul-escuro:#0B2E4E;
  --azul-medio:#00538A;
  --azul-claro:#D9E3ED;
  --branco:#FFFFFF;
  --ok-bg:#EAF7EE; --ok-bd:#1a7a3c;
  --erro-bg:#FBEAEA; --erro-bd:#B3261E;
  --texto:#0B2E4E;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;padding:18px;font-family:'Poppins','Segoe UI',Arial,sans-serif;color:var(--texto);background:var(--branco);line-height:1.58;overflow-x:hidden}
h3.ode-title{margin:0 0 4px;font-size:1.12rem;font-weight:800;color:var(--azul-escuro)}
p.ode-orientacao{margin:0 0 18px;font-size:.9rem;color:var(--azul-medio)}
h4{color:var(--azul-escuro);margin:0 0 8px}
button{font-family:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--azul-medio);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* progresso */
.progress-dots{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.progress-dots span{width:9px;height:9px;border-radius:50%;background:var(--azul-claro)}
.progress-dots span.ativo{background:var(--azul)}
.progress-texto{font-size:.82rem;color:var(--azul-medio);margin:0 0 10px;font-weight:600}
.progress-bar-track{height:8px;border-radius:99px;background:var(--azul-claro);margin:0 0 16px;overflow:hidden}
.progress-bar-fill{height:100%;background:var(--azul);border-radius:99px;transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.progress-bar-fill{transition:none}}

/* mídia / ilustração — placeholders até geração das ilustrações finais */
.cena-media{width:100%;aspect-ratio:16/9;object-fit:contain;background:repeating-linear-gradient(45deg,#eef3f7,#eef3f7 10px,var(--azul-claro) 10px,var(--azul-claro) 20px);color:var(--azul-escuro);font-size:.8rem;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;padding:14px;border-radius:8px;margin-bottom:12px}

/* passo a passo — cards de etapa */
.pp-lista{display:flex;flex-direction:column;gap:10px}
.pp-item{border:1px solid var(--azul-claro);border-radius:10px;overflow:hidden;background:var(--branco)}
.pp-rotulo{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--azul-claro);color:var(--azul-escuro);border:none;cursor:pointer;font-weight:700;font-size:.95rem}
.pp-rotulo:hover,.pp-rotulo:focus-visible{background:var(--azul);color:var(--branco)}
.pp-rotulo[disabled]{cursor:not-allowed;opacity:.55;background:#F0F3F6;color:#6B7C8C}
.pp-rotulo .pp-estado{font-size:.78rem;font-weight:700;white-space:nowrap}
.pp-corpo{padding:16px;display:grid;grid-template-columns:minmax(180px,38%) 1fr;gap:16px;align-items:start}
.pp-corpo[hidden]{display:none}
@media(max-width:720px){.pp-corpo{grid-template-columns:1fr}}
.pp-subtitulo{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--azul-medio);margin:0 0 6px}
.pp-reforco{margin-top:10px;background:var(--azul-escuro);color:var(--branco);padding:10px 12px;border-radius:8px;font-size:.88rem;font-weight:600}
.pp-fechamento{margin-top:16px;padding:16px;border:1px dashed var(--azul);border-radius:10px;background:#F7FAFD}

/* sanfona vertical ilustrada — acordeão */
.sanfona-lista{display:flex;flex-direction:column;gap:10px}
.sanfona-item{border:1px solid var(--azul-claro);border-radius:10px;overflow:hidden}
.sanfona-rotulo{width:100%;text-align:left;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--azul-claro);color:var(--azul-escuro);border:none;cursor:pointer;font-weight:700}
.sanfona-rotulo:hover,.sanfona-rotulo:focus-visible{background:var(--azul);color:var(--branco)}
.sanfona-rotulo .thumb{width:52px;height:52px;flex:0 0 auto;border-radius:8px;object-fit:contain;background:var(--branco);display:flex;align-items:center;justify-content:center;font-size:.55rem;text-align:center;color:var(--azul-medio)}
.sanfona-rotulo .rotulo-txt{flex:1}
.sanfona-rotulo .seta{transition:transform .2s ease}
.sanfona-rotulo[aria-expanded="true"] .seta{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.sanfona-rotulo .seta{transition:none}}
.sanfona-painel{padding:14px 16px;background:var(--azul-claro);color:var(--azul-escuro)}
.sanfona-painel[hidden]{display:none}
.sanfona-painel img{width:100%;height:auto;max-width:360px;object-fit:contain;border-radius:8px;margin-bottom:10px;display:block}
.sanfona-painel strong{color:var(--azul)}
.sanfona-fechamento{margin-top:16px;padding:16px;border:1px dashed var(--azul);border-radius:10px;background:#F7FAFD}

/* mídia linear — videoaula / podcast */
.player{border:1px solid var(--azul-claro);border-radius:10px;padding:16px;background:var(--branco)}
.player-nav{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.transcricao{margin-top:18px;border-top:1px solid var(--azul-claro);padding-top:12px}
.transcricao summary{cursor:pointer;font-weight:700;color:var(--azul-medio)}
.locucao{font-style:italic;color:var(--azul-escuro);margin:0 0 6px}
.audio-indicador{display:inline-flex;align-items:center;gap:8px;background:var(--azul-claro);color:var(--azul-escuro);padding:6px 10px;border-radius:99px;font-size:.78rem;font-weight:700;margin-bottom:10px}

/* HQ — grade editorial sem áreas vazias */
.hq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:720px){.hq-grid{grid-template-columns:1fr}}
.painel{display:flex;flex-direction:column;height:auto;min-height:0;border:1px solid var(--azul-claro);border-radius:10px;overflow:hidden;background:var(--branco)}
.painel img,.painel .cena-media{width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center;margin:0;border-radius:0;aspect-ratio:4/3}
.painel figcaption{position:relative;inset:auto;margin:0;border-top:1px solid var(--azul-claro);padding:10px 12px;font-size:.88rem;color:var(--azul-escuro);background:var(--branco)}
.decisao{grid-column:1/-1;border:1px solid var(--azul);border-radius:10px;padding:16px;background:#F7FAFD}
.decisao h4{margin-top:0}

/* botões de decisão / alternativas */
.opcoes{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.opcoes button{text-align:left;border:1px solid var(--azul);background:var(--branco);color:var(--azul-escuro);padding:11px 14px;border-radius:8px;cursor:pointer;font-size:.94rem}
.opcoes button:hover,.opcoes button:focus-visible{background:var(--azul);color:var(--branco)}
.opcoes button.selecionada{background:var(--azul-escuro);color:var(--branco)}
.opcoes button.marcada-correta{border-color:var(--ok-bd)}
.opcoes button.marcada-incorreta{border-color:var(--erro-bd)}
.opcoes button[disabled]{cursor:default}
.marca-resultado{font-weight:800;margin-right:6px}

/* feedback */
.feedback{margin-top:12px;padding:12px 14px;border-left:4px solid var(--azul);background:var(--azul-claro);color:var(--azul-escuro);font-size:.92rem;border-radius:0 8px 8px 0}
.feedback[hidden]{display:none}
.feedback.feedback--correta{border-left-color:var(--ok-bd)}
.feedback.feedback--incorreta{border-left-color:var(--erro-bd)}
.feedback p{margin:0 0 8px}
.feedback p:last-child{margin-bottom:0}

/* estados de conclusão / controles */
.check-feito{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ok-bd);font-size:.85rem;margin-top:10px}
.check-feito[hidden]{display:none}
.acao-linha{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{border:none;padding:11px 20px;border-radius:8px;font-weight:700;cursor:pointer;font-size:.92rem}
.btn:disabled{background:#CBD6DF;color:#6B7C8C;cursor:not-allowed}
.btn-primario{background:var(--azul-escuro);color:var(--branco)}
.btn-primario:hover:not(:disabled),.btn-primario:focus-visible:not(:disabled){background:var(--azul)}
.btn-refaca{background:var(--branco);color:var(--erro-bd);border:1px solid var(--erro-bd)}
.btn-refaca:hover,.btn-refaca:focus-visible{background:var(--erro-bg)}
.btn-refazer{background:var(--branco);color:var(--azul-medio);border:1px solid var(--azul-medio)}
.btn-refazer:hover,.btn-refazer:focus-visible{background:var(--azul-claro)}
.btn-concluido{background:var(--ok-bd);color:var(--branco)}

/* fechamento / síntese */
.fechamento-final{margin-top:18px;padding:18px;border:1px solid var(--azul);border-radius:10px;background:#F7FAFD}
.fechamento-final h4{margin-top:0}
.pontuacao{font-weight:800;color:var(--azul-escuro);margin:8px 0}

.refs{font-size:.78rem;color:var(--azul-medio);margin-top:18px;border-top:1px solid var(--azul-claro);padding-top:10px}
.pendencia{font-size:.78rem;color:var(--erro-bd);border:1px dashed var(--erro-bd);border-radius:8px;padding:8px 10px;margin-top:10px;background:var(--erro-bg)}