/* ===========================================================================
   LEITOR DE LIÇÕES — My ECG Academy
   Coluna de leitura focada; blocos de ECG como "monitores" vivos no texto;
   quiz interativo. Tema escuro clínico (tokens do projeto).
   =========================================================================== */

.licao {
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg-base, #070A0F);
  color: var(--text-hi, #ECF1F8);
  display: flex; flex-direction: column;
}

/* Barra de progresso de leitura (topo, fina) */
.licao-progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: transparent;
}
.licao-progresso span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent, #00E6A0), var(--ecg, #3DF58A));
  transition: width 0.12s linear;
}

/* Cabeçalho */
.licao-topo {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
  position: sticky; top: 0; background: rgba(7,10,15,0.86); backdrop-filter: blur(8px); z-index: 40;
}
.licao-voltar { font-size: 0.86rem; color: var(--text-mid, #9AA7B8); text-decoration: none; white-space: nowrap; }
.licao-voltar:hover { color: var(--text-hi, #ECF1F8); }
.licao-migalha { font-size: 0.8rem; color: var(--text-lo, #5E6C7E); display: flex; gap: 6px; min-width: 0; }
.licao-migalha b { color: var(--text-mid, #9AA7B8); font-weight: 600; }

/* Corpo — coluna de leitura */
.licao-corpo { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 20px 40px; }
.licao-eyebrow {
  display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent, #00E6A0); margin-bottom: 10px;
}
.licao-titulo {
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em; margin: 0 0 28px;
}

/* Blocos */
.licao-blocos { display: flex; flex-direction: column; gap: 26px; }

/* Bloco de texto — leitura editorial confortável */
.bloco-texto { font-size: 1.06rem; line-height: 1.72; color: #D6DEE9; }
.bloco-texto p { margin: 0 0 14px; }
.bloco-texto p:last-child { margin-bottom: 0; }
.bloco-texto strong { color: var(--text-hi, #ECF1F8); font-weight: 700; }
.bloco-texto em { color: #BFE9D8; font-style: italic; }
.bloco-texto a { color: var(--accent, #00E6A0); }

/* Bloco de destaque — nota / aviso / dica */
.bloco-destaque {
  display: flex; gap: 13px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid; font-size: 0.98rem; line-height: 1.6;
}
.bloco-destaque .bd-ic { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
.bloco-destaque.nota   { background: rgba(0,230,160,0.07); border-color: rgba(0,230,160,0.25); }
.bloco-destaque.dica   { background: rgba(95,160,255,0.07); border-color: rgba(95,160,255,0.25); }
.bloco-destaque.aviso  { background: rgba(255,92,102,0.07); border-color: rgba(255,92,102,0.28); }
.bloco-destaque.aviso .bd-ic { filter: saturate(1.3); }

/* Bloco de imagem */
.bloco-imagem figure { margin: 0; }
.bloco-imagem img {
  width: 100%; border-radius: 14px; display: block;
  border: 1px solid var(--line, #1C242F); background: #0E131B;
}
.bloco-imagem figcaption, .bloco-ecg figcaption, .bloco-video figcaption {
  margin-top: 9px; font-size: 0.84rem; color: var(--text-lo, #5E6C7E); line-height: 1.45;
}

/* Bloco de ECG — "monitor" vivo embebido (a assinatura) */
.bloco-ecg .ecg-moldura {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,230,160,0.22);
  background:
    repeating-linear-gradient(0deg, rgba(255,80,90,0.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,80,90,0.05) 0 1px, transparent 1px 14px),
    #05080c;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
.bloco-ecg canvas { display: block; width: 100%; height: 200px; }
.bloco-ecg .ecg-etiqueta {
  position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ecg, #3DF58A);
  background: rgba(0,0,0,0.4); padding: 3px 9px; border-radius: 999px;
}
.bloco-ecg .ecg-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ecg, #3DF58A); animation: ecg-pisca 1.1s ease-in-out infinite; }
@keyframes ecg-pisca { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.bloco-ecg .ecg-fc {
  position: absolute; top: 10px; right: 12px; font-variant-numeric: tabular-nums;
  font-size: 0.78rem; color: var(--text-mid, #9AA7B8);
}
.bloco-ecg .ecg-fc b { color: var(--ecg, #3DF58A); font-size: 1rem; }

/* Bloco de vídeo */
.bloco-video video { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--line, #1C242F); background: #05080c; }

/* Bloco de quiz — momento interativo */
.bloco-quiz {
  border: 1px solid rgba(0,230,160,0.22); border-radius: 18px; padding: 22px;
  background: linear-gradient(180deg, rgba(0,230,160,0.04), rgba(255,255,255,0.01));
}
.quiz-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent, #00E6A0); margin-bottom: 4px;
}
.quiz-titulo { font-size: 1.2rem; font-weight: 700; margin: 0 0 18px; }
.quiz-pergunta { margin-bottom: 22px; }
.quiz-pergunta:last-of-type { margin-bottom: 0; }
.quiz-num { font-size: 0.74rem; color: var(--text-lo, #5E6C7E); }
.quiz-enunciado { font-size: 1.05rem; font-weight: 600; margin: 4px 0 14px; line-height: 1.4; }

/* média dentro da pergunta */
.quiz-media { display: grid; gap: 10px; margin-bottom: 14px; }
.quiz-media.duas { grid-template-columns: 1fr 1fr; }
.quiz-media img { width: 100%; border-radius: 10px; border: 1px solid var(--line, #1C242F); }
.quiz-media .ecg-moldura { border-radius: 10px; }
.quiz-media canvas { height: 130px; width: 100%; display: block; }

/* opções */
.quiz-opcoes { display: flex; flex-direction: column; gap: 9px; }
.quiz-op {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 13px 15px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line, #1C242F); background: rgba(255,255,255,0.02);
  color: var(--text-hi, #ECF1F8); font-size: 0.96rem; transition: border-color 0.15s, background 0.15s;
}
.quiz-op:hover:not(:disabled) { border-color: rgba(0,230,160,0.4); background: rgba(0,230,160,0.05); }
.quiz-op:focus-visible { outline: 2px solid var(--accent, #00E6A0); outline-offset: 2px; }
.quiz-op .quiz-letra {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center;
  font-size: 0.82rem; font-weight: 700; background: rgba(255,255,255,0.05); color: var(--text-mid, #9AA7B8);
}
.quiz-op.certa { border-color: var(--accent, #00E6A0); background: rgba(0,230,160,0.12); }
.quiz-op.certa .quiz-letra { background: var(--accent, #00E6A0); color: #04130D; }
.quiz-op.errada { border-color: var(--crit, #FF4D5E); background: rgba(255,77,94,0.1); }
.quiz-op.errada .quiz-letra { background: var(--crit, #FF4D5E); color: #fff; }
.quiz-op:disabled { cursor: default; }

/* explicação após responder */
.quiz-explica {
  margin-top: 13px; padding: 13px 15px; border-radius: 11px;
  background: rgba(255,255,255,0.03); border-left: 3px solid var(--accent, #00E6A0);
  font-size: 0.9rem; line-height: 1.55; color: #C7D2DF;
}
.quiz-explica.incorreta { border-left-color: var(--crit, #FF4D5E); }
.quiz-explica b { color: var(--text-hi, #ECF1F8); }

/* Rodapé */
.licao-rodape {
  border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
  padding: 20px; display: flex; justify-content: center;
}
.licao-rodape .btn { min-width: 280px; }

/* Estado de erro */
.licao-erro { text-align: center; padding: 60px 20px; }
.licao-erro-ic { font-size: 2.6rem; margin-bottom: 12px; }
.licao-erro h2 { font-size: 1.3rem; margin: 0 0 8px; }
.licao-erro p { color: var(--text-mid, #9AA7B8); margin: 0 0 20px; }

/* Esqueleto */
.licao-skeleton { display: flex; flex-direction: column; gap: 16px; }
.sk { border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07), rgba(255,255,255,0.03)); background-size: 200% 100%; animation: sk-brilho 1.4s infinite; }
.sk-titulo { height: 40px; width: 70%; }
.sk-linha { height: 16px; }
.sk-bloco { height: 180px; }
@keyframes sk-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Responsivo */
@media (max-width: 640px) {
  .licao-corpo { padding: 24px 16px 32px; }
  .bloco-texto { font-size: 1.02rem; }
  .quiz-media.duas { grid-template-columns: 1fr; }
  .licao-rodape .btn { min-width: 0; width: 100%; }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .sk, .ecg-ponto, .licao-progresso span { animation: none !important; transition: none !important; }
}

/* ---------- Modal de fim de lição (avançar / voltar) ---------- */
.licao-fim{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.66); padding:20px; opacity:0; transition:opacity .25s; }
.licao-fim.on{ opacity:1; }
.licao-fim-caixa{ width:100%; max-width:440px; text-align:center; padding:30px 26px;
  background:var(--bg-sunken,#05070B); border:1px solid var(--accent-line,rgba(0,230,160,.40)); border-radius:var(--r-xl,22px);
  transform:translateY(10px); transition:transform .25s; }
.licao-fim.on .licao-fim-caixa{ transform:translateY(0); }
.licao-fim-ic{ width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  font-size:1.5rem; background:var(--accent,#00E6A0); color:#04130D; }
.licao-fim-caixa h2{ font-size:1.4rem; margin-bottom:6px; }
.licao-fim-caixa p{ color:var(--text-mid,#9AA7B8); font-size:.92rem; margin-bottom:22px; }
.licao-fim-caixa .btn{ display:block; width:100%; margin-bottom:10px; text-decoration:none; }
/* O botão "Avançar" leva o título da lição numa 2ª linha: o .btn base tem
   white-space:nowrap e altura fixa, que cortavam títulos longos. Aqui a caixa
   quebra linha e cresce em altura, e o título fica em linha própria. */
.licao-fim-caixa .btn{ white-space:normal; height:auto; min-height:44px; padding-top:10px; padding-bottom:10px; }
.licao-fim-prox{ display:flex; flex-direction:column; gap:2px; }
.licao-fim-prox-rot{ font-weight:600; }
.licao-fim-prox-tit{ font-size:.85rem; font-weight:500; opacity:.85; line-height:1.35; overflow-wrap:anywhere; }
.licao-fim-caixa .btn b{ font-weight:700; }
.licao-fim-ultima{ color:var(--ecg,#3DF58A); font-size:.92rem; margin-bottom:16px; }

/* --- Quiz: estados de seleção, submissão e resultado (v83) --- */
.quiz-op.sel{ border-color:var(--accent,#00E6A0); background:rgba(0,230,160,.08); }
.quiz-op.sel .quiz-letra{ background:var(--accent,#00E6A0); color:#04130D; }
.quiz-acoes{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.quiz-resp-conta{ font-size:.8rem; color:var(--text-lo,#5E6C7E); }
.quiz-submeter, .ac-submeter{ min-width:150px; }
.quiz-repetir, .ac-fechar-quiz{ margin-top:12px; }
.quiz-resultado{ margin-top:18px; padding:16px 18px; border-radius:var(--r-md,12px);
  border:1px solid var(--line,#1C242F); background:var(--bg-elev,#0C111A); }
.quiz-resultado.ok{ border-color:var(--accent,#00E6A0); background:rgba(0,230,160,.07); }
.quiz-resultado.falhou{ border-color:var(--crit,#FF4D5E); background:rgba(255,77,94,.06); }
.quiz-res-pont{ font-size:2rem; font-weight:800; line-height:1; color:var(--text-hi,#ECF1F8); }
.quiz-res-pont span{ font-size:1rem; color:var(--text-lo,#5E6C7E); font-weight:600; }
.quiz-resultado p{ color:var(--text-mid,#9AA7B8); font-size:.92rem; margin:8px 0 4px; line-height:1.55; }
.btn.bloqueado{ opacity:.5; cursor:not-allowed; }

/* Mensagem de incentivo/dica no popup de conclusão da lição */
.licao-fim-msg {
  margin: 4px auto 14px; max-width: 440px;
  padding: 12px 16px;
  background: var(--accent-soft, rgba(0,230,160,0.08));
  border: 1px solid var(--accent-line, rgba(0,230,160,0.3));
  border-radius: var(--r-md, 12px);
  color: var(--text-hi); font-size: 14px; line-height: 1.55;
}
.licao-fim-msg strong { color: var(--accent); font-weight: 700; }