/* ============================================================================
   M3 · S31–S34B e S39 — o Módulo 3 (agente SBAR por dentro, demo com plano B,
   pergunte ao protocolo, alertas, indicadores, antes e depois, protocolo vivo)
   e a atividade "ache o que falta". Conteúdo de 14/11/2026.

   Duas convenções, as duas só CSS, lidas de [data-beat] (CONTRATO §2):
   · data-entra="N"  — entra na batida N e fica até o fim da cena;
   · data-tela="N"   — tela que TROCA: só aparece na batida N (o simulador da
                       S32, os grupos da S33, os trechos da S39). Toda tela
                       leva também data-exclusivo, para o lint contar uma por
                       vez (CONTRATO §2.3), e a última leva data-final, que é
                       a que sai na impressão.
   Nada aqui depende de JS. A única peça com script é a mídia OPCIONAL
   (js/demo.js): o vídeo da S32 (tecla v) e o áudio da S39 (tecla a).

   Dado da demo: todo bloco com data-ficticio mostra um .selo-ficticio
   (o build cobra; CONTRATO §2.4).
   ========================================================================== */

/* --- Moldura comum ------------------------------------------------------- */
.m3 {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  top: 9rem; bottom: var(--ref-band);
}
.m3-ico {
  width: 3.5rem; height: 3.5rem; flex: none;
  fill: none; stroke: var(--primary-soft);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.m3-seta {
  width: 3rem; height: 3rem; flex: none;
  fill: none; stroke: var(--txt-low);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.m3-cabeca {
  display: flex; align-items: center; gap: var(--sp-4);
}
.m3-cabeca > :first-child { margin-right: auto }

/* O selo do dado fictício: rótulo em caixa alta (exceção legítima ao piso de
   32px, como .t-label), sempre visível, nunca só nas notas. */
.selo-ficticio {
  flex: none;
  font: 700 var(--fs-label)/1 var(--font-body);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--accent-soft);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--accent); border-radius: var(--r-full);
}

/* Rótulo de regra (tev-01, atm-05…): monoespaçado, porque é identificador. */
.m3-regra {
  display: inline-block;
  font: 700 var(--fs-body)/1 var(--font-mono);
  color: var(--warn);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--warn); border-radius: var(--r-sm);
}
.m3-tag {
  font: 600 var(--fs-body)/1.2 var(--font-mono);
  color: var(--ai-glow);
}

/* --- Batidas: data-entra ------------------------------------------------- */
.m3 [data-entra] {
  opacity: 0; transform: translateY(1rem);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
/* Dentro de SVG não há deslocamento: o transform CSS anularia o atributo
   transform do elemento (as setas da S34B ficam num <g> por isso mesmo). */
.m3 svg [data-entra] { transform: none }

.scene:is([data-beat="1"],[data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="1"],
.scene:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="2"],
.scene:is([data-beat="3"],[data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="3"],
.scene:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="4"],
.scene:is([data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="5"],
.scene:is([data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="6"],
.scene:is([data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="7"],
.scene:is([data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3 [data-entra="8"],
.scene:is([data-beat="9"],[data-beat="10"]) .m3 [data-entra="9"],
.scene[data-beat="10"] .m3 [data-entra="10"] { opacity: 1; transform: none }

/* --- Batidas: data-tela (telas que trocam no mesmo lugar) ---------------- */
.m3-telas { display: grid; min-height: 0 }
.m3-telas > [data-tela] {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out-expo),
              visibility 0s linear var(--dur-fast);
}
.scene[data-beat="0"] .m3-telas > [data-tela="0"],
.scene[data-beat="1"] .m3-telas > [data-tela="1"],
.scene[data-beat="2"] .m3-telas > [data-tela="2"],
.scene[data-beat="3"] .m3-telas > [data-tela="3"],
.scene[data-beat="4"] .m3-telas > [data-tela="4"],
.scene:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3-telas > [data-tela="g"] {
  opacity: 1; visibility: visible; transition-delay: 0s;
}

/* ═══ S31 · o agente SBAR por dentro ═══════════════════════════════════════ */
.m3-circuito { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4) }
.m3-mapa {
  display: grid;
  /* minmax(0, …): sem ele o grid dá a cada coluna a largura do maior conteúdo
     e "SBAR + alertas" quebra em duas linhas quando uma trava muda de lugar. */
  grid-template-columns: minmax(0, 1fr) var(--sp-5) minmax(0, 1.1fr) var(--sp-5) minmax(0, 1.05fr) var(--sp-5) minmax(0, 1fr) var(--sp-5) minmax(0, .85fr);
  grid-template-rows: auto auto auto;
  row-gap: var(--sp-3);
}
.m3-no {
  grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); text-align: center;
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-800); border: 1px solid var(--stroke); border-radius: var(--r-lg);
}
.m3-no__nome { color: var(--txt-high); font-weight: 600 }
.m3-no .m3-ico { margin-bottom: var(--sp-1) }
.m3-no--fontes    { grid-column: 1 }
.m3-no--agente    { grid-column: 3; border-color: var(--ai-edge); box-shadow: var(--glow-ai) }
.m3-no--agente .m3-ico { stroke: var(--ai-glow) }
.m3-no--saida     { grid-column: 5 }
.m3-no--medico    { grid-column: 7 }
.m3-no--indicador { grid-column: 9 }
.m3-mapa > .m3-seta { grid-row: 1; align-self: center; justify-self: center }
.m3-seta--1 { grid-column: 2 } .m3-seta--2 { grid-column: 4 }
.m3-seta--3 { grid-column: 6 } .m3-seta--4 { grid-column: 8 }

.m3-ferramenta {
  grid-row: 2; grid-column: 3;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  border: 1px dashed var(--ai-edge); border-radius: var(--r-lg);
  background: var(--bg-glass);
}
.m3-ferramenta__txt { display: flex; flex-direction: column; text-align: left }
.m3-ico--vai-volta { stroke: var(--ai-glow); width: 3rem; height: 3rem }

.m3-trava {
  grid-row: 3;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-700); border: 1px solid var(--stroke-hi); border-radius: var(--r-md);
  color: var(--txt-high);
}
.m3-ico--trava { width: 2.5rem; height: 2.5rem; stroke: var(--accent-soft) }
.m3-trava--fontes { grid-column: 1 }
.m3-trava--agente { grid-column: 3 }
.m3-trava--saida  { grid-column: 5 }
.m3-trava--medico { grid-column: 7 / span 3 }  /* larga de propósito: é a trava que leva a ênfase */
.m3-trava[data-emph="accent"] { border-color: var(--accent); color: var(--accent-soft) }

/* ═══ S32 · a demo: o simulador do app ═════════════════════════════════════ */
.m3-app {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--bg-800);
  border: 1px solid var(--stroke-hi); border-radius: var(--r-xl);
  box-shadow: var(--elev-3); overflow: hidden;
}
.m3-app__barra {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-700); border-bottom: 1px solid var(--stroke);
}
.m3-app__pontos { display: flex; gap: var(--sp-1) }
.m3-app__pontos i { width: 1rem; height: 1rem; border-radius: var(--r-full); background: var(--stroke-hi) }
.m3-app__url {
  font: 500 var(--fs-body)/1 var(--font-mono); color: var(--txt-mid);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-900); border-radius: var(--r-full);
}
.m3-app__leito { margin-left: auto; color: var(--txt-high) }
.m3-app__corpo { display: grid; grid-template-columns: 19rem 1fr; min-height: 0 }

.m3-passos {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-2);
  border-right: 1px solid var(--stroke);
}
.m3-passo {
  font: 600 var(--fs-body)/1.2 var(--font-body); color: var(--txt-low);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  border-left: .25rem solid transparent;
  transition: color var(--dur-fast), background var(--dur-fast);
}
/* passo atual */
#S32[data-beat="0"] .m3-passo[data-passo="0"],
#S32[data-beat="1"] .m3-passo[data-passo="1"],
#S32[data-beat="2"] .m3-passo[data-passo="2"],
#S32[data-beat="3"] .m3-passo[data-passo="3"],
#S32[data-beat="4"] .m3-passo[data-passo="4"] {
  color: var(--txt-high); background: var(--bg-600); border-left-color: var(--primary-lift);
}
/* passos já feitos */
#S32:is([data-beat="1"],[data-beat="2"],[data-beat="3"],[data-beat="4"]) .m3-passo[data-passo="0"],
#S32:is([data-beat="2"],[data-beat="3"],[data-beat="4"]) .m3-passo[data-passo="1"],
#S32:is([data-beat="3"],[data-beat="4"]) .m3-passo[data-passo="2"],
#S32[data-beat="4"] .m3-passo[data-passo="3"] { color: var(--txt-mid); border-left-color: var(--ok) }

.m3-app__telas { padding: var(--sp-5); align-content: center }
.m3-tela { display: flex; flex-direction: column; gap: var(--sp-4); justify-content: center }

/* tela 0 · documentos e anonimização */
.m3-docs__pdfs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) }
.m3-pdf {
  display: flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--fs-body)/1.2 var(--font-body); color: var(--txt-high);
  padding: var(--sp-3); overflow-wrap: anywhere;
  background: var(--bg-700); border: 1px solid var(--stroke); border-radius: var(--r-md);
}
.m3-ico--p { width: 2.5rem; height: 2.5rem }
.m3-docs__agente { color: var(--ai-glow) }
.m3-anon { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.m3-anon__de {
  font: 500 var(--fs-body)/1.2 var(--font-mono); color: var(--txt-low);
  text-decoration: line-through; text-decoration-color: var(--crit);
}
.m3-anon__para {
  font: 700 var(--fs-h2)/1.2 var(--font-mono); color: var(--txt-high);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--ok); border-radius: var(--r-md);
}

/* tela 1 · protocolos consultados (as chamadas de ferramenta) */
.m3-tools { gap: var(--sp-3) }
.m3-tool {
  font: 500 var(--fs-lg)/1.25 var(--font-body); color: var(--txt-high);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-700); border-left: .25rem solid var(--ai-core); border-radius: var(--r-sm);
}
.m3-tools__conta { font: 500 var(--fs-body)/1.2 var(--font-mono); color: var(--txt-mid) }

/* tela 2 · SBAR */
.m3-sbar__linha { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-3); align-items: start }
.m3-letra {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
  font: 800 var(--fs-h1)/1 var(--font-display); color: var(--bg-900);
  background: var(--primary-soft); border-radius: var(--r-md);
}
.m3-sbar p { color: var(--txt-high) }
.m3-sbar__recs { display: flex; flex-direction: column; gap: var(--sp-1) }
.m3-tag--prot { margin-bottom: var(--sp-2) }
.m3-junto { white-space: nowrap }

/* tela 3 · alertas */
.m3-alertas__conta { color: var(--warn) }
.m3-alerta-aberto {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  background: var(--bg-700); border: 1px solid var(--warn); border-radius: var(--r-lg);
}
.m3-alerta-aberto > div { display: flex; flex-direction: column; gap: var(--sp-2) }
.m3-ico--alerta { stroke: var(--warn) }
.m3-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) }

/* tela 4 · aprovação */
.m3-aprova__status { display: flex; align-items: center; gap: var(--sp-3) }
.m3-status {
  font: 700 var(--fs-h2)/1 var(--font-body);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
}
.m3-status--rascunho { color: var(--txt-low); border: 1px dashed var(--stroke-hi); text-decoration: line-through }
.m3-status--ok { color: var(--bg-900); background: var(--ok) }
.m3-botoes { display: flex; gap: var(--sp-3) }
.m3-botao {
  font: 600 var(--fs-body)/1 var(--font-body); color: var(--txt-high);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--stroke-hi); border-radius: var(--r-md);
}
.m3-botao--primario { background: var(--primary); border-color: var(--primary-lift); box-shadow: 0 0 0 .375rem var(--bg-600) }
/* tema claro de emergência: texto claro no botão e escuro no selo verde */
:root[data-theme="light"] .m3-botao--primario { color: var(--bg-800) }
:root[data-theme="light"] .m3-status--ok { color: var(--txt-high) }
.m3-botao--fraco { color: var(--txt-low) }
.m3-aprova__destino { color: var(--txt-mid) }

/* O vídeo de contingência (tecla v): por cima do app, só quando ligado.
   <video> é elemento substituído — inset não o dimensiona; largura e altura
   explícitas. Sem o arquivo, js/demo.js nem chega a ligar a caixa. */
.m3-video { position: absolute; inset: 0; display: none; background: var(--bg-900) }
.m3-video[data-on="1"] { display: block }
.m3-video video { width: 100%; height: 100%; object-fit: contain; display: block }

/* ═══ S32B · pergunte ao protocolo ═════════════════════════════════════════ */
.m3-pergunta { display: grid; grid-template-columns: 1fr 44rem; gap: var(--sp-6); align-items: center }
.m3-pergunta__titulo { color: var(--txt-high) }
.m3-cel {
  height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--bg-900);
  border: .75rem solid var(--bg-600); border-radius: var(--r-xl);
  box-shadow: var(--elev-3); overflow: hidden;
}
.m3-cel__topo {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--primary);
}
.m3-cel__avatar {
  display: grid; place-items: center; width: 4rem; height: 4rem;
  border-radius: var(--r-full); background: var(--bg-800);
}
.m3-cel__avatar .m3-ico { width: 2.5rem; height: 2.5rem }
.m3-cel__id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1) }
.m3-cel__nome { font: 700 var(--fs-body)/1.1 var(--font-body); color: var(--txt-high) }
.m3-cel__conversa {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3); justify-content: flex-start;
}
.m3-balao {
  max-width: 92%;
  font: 500 var(--fs-lg)/1.3 var(--font-body); color: var(--txt-high);
  padding: var(--sp-3); border-radius: var(--r-lg);
}
.m3-balao--eu { align-self: flex-end; background: var(--primary); border-bottom-right-radius: var(--r-sm) }
.m3-balao--bot {
  align-self: flex-start; background: var(--bg-700); border-bottom-left-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.m3-versao-cit { font-weight: 800 }
.m3-versao-cit[data-emph="accent"] { color: var(--accent-soft) }

/* ═══ S33 · o que o agente apontou ═════════════════════════════════════════ */
.m3-apontou { display: grid; grid-template-rows: auto 1fr; gap: var(--sp-5) }
.m3-cabeca__conta { font: 600 var(--fs-body)/1 var(--font-mono); color: var(--txt-mid) }
.m3-grupo { gap: var(--sp-3); justify-content: center }
.m3-grupo__nome { font: 700 var(--fs-h2)/1.1 var(--font-body); color: var(--primary-soft) }
.m3-grupo__cartoes { display: grid; gap: var(--sp-4) }
.m3-grupo__cartoes--2 { grid-template-columns: repeat(2, 1fr) }
.m3-grupo__cartoes--3 { grid-template-columns: repeat(3, 1fr) }
.m3-alerta {
  display: grid; grid-template-columns: auto 1fr; align-content: start;
  column-gap: var(--sp-3); row-gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg-800); border: 1px solid var(--stroke); border-left: .375rem solid var(--warn);
  border-radius: var(--r-lg);
}
.m3-alerta__dia {
  grid-row: 1 / span 3;
  font: 800 var(--fs-d3)/1 var(--font-display); color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.m3-alerta .m3-regra { justify-self: start }
.m3-alerta__txt { color: var(--txt-high) }
.m3-alerta__prot { font: 500 var(--fs-body)/1.25 var(--font-body); color: var(--txt-mid) }
.m3-grupo__prot { padding-left: var(--sp-1) }

/* ═══ S33B · indicadores a cada passagem ═══════════════════════════════════ */
.m3-indic { display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-4) }
.m3-indic__grade { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--sp-3) }
.m3-ind {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
  column-gap: var(--sp-2); align-items: end;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-800); border: 1px solid var(--stroke); border-radius: var(--r-lg);
}
.m3-ind__nome { grid-column: 1 / -1; color: var(--txt-high); font-weight: 600 }
.m3-ind__fracao {
  font: 800 var(--fs-d2)/1 var(--font-display); color: var(--primary-soft);
  font-variant-numeric: tabular-nums;
}
.m3-pontos { display: flex; gap: var(--sp-1); padding-bottom: var(--sp-1) }
.m3-pontos i, .m3-legenda i {
  display: inline-block; width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
  border: .25rem solid var(--txt-dim);
}
.m3-pontos i[data-s="num"], .m3-legenda i[data-s="num"] { background: var(--ok); border-color: var(--ok) }
.m3-pontos i[data-s="den"], .m3-legenda i[data-s="den"] { border-color: var(--warn) }
.m3-pontos i[data-s="fora"], .m3-legenda i[data-s="fora"] { border-style: dashed }
/* o leito 99, o da demo, leva um anel claro em volta */
.m3-pontos i[data-leito="99"] { box-shadow: 0 0 0 .25rem var(--bg-800), 0 0 0 .5rem var(--txt-high) }
.m3-indic__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4) }
.m3-legenda {
  display: flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--fs-body)/1 var(--font-body); color: var(--txt-mid);
}
.m3-legenda i { width: 1.75rem; height: 1.75rem; margin-left: var(--sp-2) }
.m3-legenda i:first-child { margin-left: 0 }
.m3-indic__fecho[data-emph="accent"] { color: var(--accent-soft) }

/* ═══ S34 · antes e depois ═════════════════════════════════════════════════ */
.m3-antes { display: flex; flex-direction: column; justify-content: center }
.m3-antes__selo { position: absolute; top: 0; right: 0 }
.m3-antes__grade {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-6); row-gap: var(--sp-3);
}
.m3-antes__cab {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--stroke-hi);
  color: var(--txt-high);
}
.m3-antes__cab .m3-ico { stroke: var(--txt-mid) }
.m3-antes__cab--depois .m3-ico { stroke: var(--ai-glow) }
.m3-antes__fala, .m3-antes__dado {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  display: flex; align-items: center; min-height: 6rem;
}
.m3-antes__fala { font-style: italic; color: var(--txt-mid); background: var(--med-surface) }
.m3-antes__fala--nada { color: var(--txt-low) }
.m3-antes__dado { color: var(--txt-high); font-weight: 600; background: var(--bg-700); border-left: .375rem solid var(--ok) }
.m3-antes__dado[data-emph="accent"] { color: var(--accent-soft); border-left-color: var(--accent) }

/* ═══ S34B · protocolo vivo ════════════════════════════════════════════════ */
.m3-ciclo { display: grid; grid-template-columns: 34rem 71rem; gap: var(--sp-5); align-items: center }
.m3-ciclo__texto { display: flex; flex-direction: column; gap: var(--sp-6) }
.m3-ciclo__texto .t-d2 { color: var(--txt-high) }
.m3-ciclo__fecho[data-emph="accent"] { color: var(--accent-soft) }
.m3-anel { position: relative; width: 71rem; height: 50rem }
.m3-anel__linha { position: absolute; inset: 0; width: 100%; height: 100% }
.m3-anel__linha ellipse { fill: none; stroke: var(--stroke-hi); stroke-width: 3; stroke-dasharray: 10 12 }
.m3-anel__seta { fill: none; stroke: var(--primary-soft); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round }
.m3-anel__centro {
  position: absolute; left: 35.5rem; top: 25rem; translate: -50% -50%;
  display: grid; justify-items: center; text-align: center;
}
.m3-anel__prot { font: 600 var(--fs-body)/1 var(--font-body); color: var(--txt-mid) }
.m3-anel__v {
  grid-area: 2 / 1;
  font: 800 var(--fs-d1)/1 var(--font-display); color: var(--primary-soft);
  transition: opacity var(--dur-base);
}
.m3-anel__v--2 { opacity: 0; color: var(--accent-soft) }
#S34B[data-beat="4"] .m3-anel__v--1 { opacity: 0 }
#S34B[data-beat="4"] .m3-anel__v--2 { opacity: 1 }
.m3-etapa {
  position: absolute; width: 24rem; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-800); border: 1px solid var(--stroke-hi); border-radius: var(--r-lg);
}
.m3-etapa__linha { display: flex; align-items: center; gap: var(--sp-2) }
.m3-etapa__nome { color: var(--txt-high); font-weight: 600 }
.m3-etapa .m3-ico { width: 2.5rem; height: 2.5rem }
.m3-etapa--1 { left: 35.5rem;  top: 5.625rem }
.m3-etapa--2 { left: 58.09rem; top: 19.01rem }
.m3-etapa--3 { left: 49.46rem; top: 40.67rem }
.m3-etapa--4 { left: 21.54rem; top: 40.67rem }
.m3-etapa--5 { left: 12.91rem; top: 19.01rem }
.m3-etapa--5 .m3-ico { stroke: var(--accent-soft) }

/* ═══ S39 · ache o que falta ═══════════════════════════════════════════════ */
.m3-falta { display: grid; grid-template-rows: auto 1fr; gap: var(--sp-5) }
.m3-falta .t-d3 { color: var(--txt-high) }
.m3-falta__corpo { display: grid; grid-template-columns: 28rem 1fr; gap: var(--sp-6); min-height: 0 }
.m3-audio {
  align-self: start;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  column-gap: var(--sp-3); row-gap: var(--sp-2); align-items: center;
  padding: var(--sp-4);
  background: var(--bg-700); border-radius: var(--r-xl); border-bottom-left-radius: var(--r-sm);
}
.m3-audio__play {
  grid-row: 1 / span 2;
  display: grid; place-items: center; width: 5rem; height: 5rem;
  border-radius: var(--r-full); background: var(--primary-lift);
}
.m3-audio__play svg { width: 2.5rem; height: 2.5rem; fill: var(--txt-high) }
.m3-audio__onda { display: flex; align-items: center; gap: .375rem; height: 3.5rem }
.m3-audio__onda i { flex: 1; border-radius: var(--r-full); background: var(--txt-low); height: 40% }
.m3-audio__onda i:nth-child(3n+1) { height: 70% }
.m3-audio__onda i:nth-child(4n+2) { height: 95% }
.m3-audio__onda i:nth-child(5n+3) { height: 55% }
.m3-audio__tempo { font: 600 var(--fs-body)/1 var(--font-mono); color: var(--txt-mid) }
.m3-audio[data-on="1"] .m3-audio__onda i { background: var(--primary-soft) }
.m3-audio__trechos { grid-column: 1 / -1; display: flex; gap: var(--sp-1); padding-top: var(--sp-2) }
.m3-audio__trechos i { flex: 1; height: .5rem; border-radius: var(--r-full); background: var(--bg-600) }
#S39[data-beat="0"] .m3-audio__trechos i[data-p="0"],
#S39[data-beat="1"] .m3-audio__trechos i:is([data-p="0"],[data-p="1"]),
#S39[data-beat="2"] .m3-audio__trechos i:is([data-p="0"],[data-p="1"],[data-p="2"]),
#S39:is([data-beat="3"],[data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"],[data-beat="10"]) .m3-audio__trechos i { background: var(--primary-soft) }

.m3-falta__telas { align-content: start }
.m3-falta__telas > .m3-trecho { align-self: center }
.m3-trecho {
  font: 500 var(--fs-h2)/1.38 var(--font-body); font-style: italic; color: var(--txt-high);
  padding-left: var(--sp-4); border-left: .375rem solid var(--txt-dim);
}
.m3-gabarito { gap: var(--sp-3); justify-content: flex-start }
.m3-gabarito__titulo { color: var(--accent-soft) }
.m3-gabarito__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-3) }
.m3-falta__item {
  font: 600 var(--fs-lg)/1.2 var(--font-body); color: var(--txt-high);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-800); border: 1px solid var(--stroke); border-left: .375rem solid var(--warn);
  border-radius: var(--r-md);
}

/* ═══ MODO DE LEITURA (celular, < 900px) ══════════════════════════════════
   O palco vira rolagem (stage.css §mobile): tudo em fluxo, tudo visível, as
   telas que trocam viram uma lista na ordem das batidas. */
@media (max-width: 900px) {
  .m3 { position: static; display: flex; flex-direction: column; gap: 1rem }
  .m3 [data-entra] { opacity: 1; transform: none }
  .m3-telas { display: flex; flex-direction: column; gap: 1rem }
  .m3-telas > [data-tela] { opacity: 1; visibility: visible }
  .m3-cabeca { flex-wrap: wrap; gap: .5rem }
  .m3-ico { width: 1.75rem; height: 1.75rem }
  .m3-seta { width: 1.5rem; height: 1.5rem }
  .selo-ficticio, .m3-regra, .m3-tag { font-size: .8125rem }

  .m3-mapa { display: flex; flex-direction: column; gap: .5rem }
  .m3-mapa > .m3-seta { transform: rotate(90deg) }
  .m3-no { flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: .75rem }

  .m3-app { position: static; display: block }
  .m3-app__barra { flex-wrap: wrap; padding: .5rem .75rem }
  .m3-app__url { font-size: .8125rem }
  .m3-app__corpo { display: block }
  .m3-passos { display: none }
  .m3-app__telas { padding: .75rem }
  .m3-docs__pdfs, .m3-grupo__cartoes--2, .m3-grupo__cartoes--3,
  .m3-indic__grade, .m3-antes__grade, .m3-gabarito__grade { grid-template-columns: 1fr }
  .m3-pdf, .m3-passo, .m3-anon__de, .m3-tools__conta, .m3-botao,
  .m3-cel__nome, .m3-balao, .m3-cabeca__conta, .m3-alerta__prot,
  .m3-legenda, .m3-anel__prot, .m3-audio__tempo { font-size: 1rem }
  .m3-anon__para, .m3-status, .m3-tool, .m3-grupo__nome, .m3-trecho, .m3-falta__item { font-size: 1.125rem }
  .m3-letra { width: 2.5rem; height: 2.5rem; font-size: 1.25rem }
  .m3-sbar__linha { grid-template-columns: 2.5rem 1fr }
  .m3-botoes, .m3-aprova__status { flex-wrap: wrap }

  .m3-pergunta { display: flex }
  .m3-cel { height: auto; border-width: .375rem }

  .m3-alerta__dia { font-size: 1.75rem }
  .m3-ind__fracao { font-size: 2.125rem }
  .m3-pontos i { width: 1.25rem; height: 1.25rem }
  .m3-indic__pe { flex-direction: column; align-items: flex-start }
  .m3-antes__selo { position: static; align-self: flex-start }
  .m3-antes__fala, .m3-antes__dado { min-height: 0 }

  .m3-ciclo { display: flex }
  .m3-anel { width: auto; height: auto; display: flex; flex-direction: column; gap: .5rem }
  .m3-anel__linha { display: none }
  .m3-anel__centro, .m3-etapa { position: static; translate: none; width: auto }
  .m3-anel__v { font-size: 2.125rem }
  .m3-anel__v--2 { opacity: 1 }

  .m3-falta__corpo { display: flex; flex-direction: column }
  .m3-audio { align-self: stretch }
  .m3-audio__play { width: 3rem; height: 3rem }
}

/* ═══ IMPRESSÃO: cada cena no estado final ═════════════════════════════════ */
@media print {
  .m3 [data-entra] { opacity: 1 !important; transform: none !important }
  .m3 svg [data-entra] { transform: none !important }
  .m3-telas > [data-tela] { opacity: 0 !important; visibility: hidden !important }
  .m3-telas > [data-final] { opacity: 1 !important; visibility: visible !important }
  .m3-anel__v--1 { opacity: 0 !important }
  .m3-anel__v--2 { opacity: 1 !important }
  .m3-video { display: none !important }
}