/* ==========================================================================
   Trivoz · Demonstração interativa — estilos próprios (sem biblioteca, sem fonte externa), SÓ tema claro.
   Layout e identidade visual da versão B (gerada no Claude Design e aprovada pelo Eduardo), reescritos como classes para
   a CSP do site não precisar de estilos embutidos. Os valores de cor ficam em :root (npm run contraste mede os pares).
   Breakpoints em rem: com o texto do navegador ampliado a página vira uma coluna sozinha.
   ========================================================================== */

:root {
  color-scheme: light;
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --texto: #1f2937;
  --apoio: #556070;
  --linha: #e3e6eb;
  --linha-forte: #d5dbe3;
  --borda-campo: #7c8a9c;
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --azul-suave: #e8effd;
  --azul-halo: #dce6fc;
  --anel: #bfd3fb;
  --acao-texto: #ffffff;
  --foco: #2563eb;
  --verde: #15803d;
  --verde-texto: #ffffff;
  --cinza: #eef1f5;
  --cinza-aba: #e9ecf1;
  --cinza-barra: #e8ecf2;
  --avatar-aluno-fundo: #ffedd5;
  --avatar-aluno: #9a3412;
  --avatar-pai-fundo: #dcfce7;
  --avatar-pai: #166534;
  --avatar-ter-fundo: #ede9fe;
  --avatar-ter: #5b21b6;
  --pronto-fundo: #eef3fe;
  --cifra-fundo: #f1f3f6;
  --campo-fundo: #fafbfc;
  --cat-subst: #ea580c;
  --cat-verbo: #16a34a;
  --cat-modif: #2563eb;
  --cat-social: #7c3aed;
  --cat-pessoa: #a16207;
  --cat-lugar: #8d6e63;
  --sombra: 0 1px 2px rgba(31, 41, 55, 0.05), 0 6px 18px rgba(31, 41, 55, 0.06);
  --sombra-seg: 0 1px 2px rgba(31, 41, 55, 0.05), 0 6px 18px rgba(31, 41, 55, 0.07);
  --sombra-aparelho: 0 2px 6px rgba(31, 41, 55, 0.05), 0 30px 60px -28px rgba(31, 41, 55, 0.3);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-h: 5.5rem; /* medido pelo JavaScript: o conteúdo nunca fica embaixo do Anterior/Próximo */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(1rem, 0.45vw + 0.8rem, 1.2rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); overflow-x: hidden; }
button, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--azul-escuro); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
img { display: block; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 8px; top: -80px; z-index: 50; padding: 12px 18px; border-radius: 14px; background: var(--superficie); color: var(--azul-escuro); font-weight: 700; box-shadow: var(--sombra); }
.pular:focus { top: 8px; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- página ---------- */
.pagina {
  max-width: 1180px; margin: 0 auto; padding: 16px 16px var(--nav-h);
  display: flex; flex-direction: column; gap: 18px; min-height: 100vh;
}
.pagina.modo-inicio { max-width: min(1700px, 100%); padding-bottom: 24px; }

.aviso-versao {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--azul-suave); color: var(--azul-escuro); font-weight: 700; font-size: 0.9rem; text-align: center;
}

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marca-bloco { display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; min-width: 0; }
/* logotipo horizontal: nunca abaixo de 120 px de largura (7,5 rem = 120 px com a fonte de 16 px); área livre = 1 ponto do símbolo */
.marca { display: flex; align-items: center; min-height: 44px; padding: 4px 8px 4px 0; text-decoration: none; color: inherit; border-radius: 14px; flex: none; }
.marca-logo { width: clamp(7.5rem, 6rem + 4vw, 10rem); height: auto; }
.marca-sub { font-size: 0.85rem; line-height: 1.3; color: var(--apoio); }
.topo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selo { padding: 6px 12px; border-radius: 999px; background: var(--superficie); color: var(--apoio); font-size: 0.8rem; font-weight: 600; box-shadow: 0 1px 3px rgba(31, 41, 55, 0.08); }
.botao-qr {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--superficie); color: var(--azul-escuro); font-weight: 800; font-size: 0.9rem; text-decoration: none;
  box-shadow: 0 1px 3px rgba(31, 41, 55, 0.08);
}
.botao-qr:hover { background: var(--azul-suave); }
.botao-qr[aria-current="page"] { background: var(--azul-suave); }

/* ---------- seletor de perfil ---------- */
.perfis { display: flex; justify-content: center; }
.seg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; background: var(--superficie); border-radius: 27px; box-shadow: var(--sombra-seg); max-width: 100%; }
.seg-botao {
  min-height: 46px; padding: 0 clamp(14px, 3vw, 26px); border: 0; border-radius: 999px; background: transparent; color: var(--texto);
  font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; flex: 0 1 auto;
}
.seg-botao[aria-pressed="true"] { background: var(--azul); color: var(--acao-texto); }

main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sem-js { padding: 16px; background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra); }

/* ---------- tela inicial (QR) ---------- */
.inicio { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: clamp(8px, 3vh, 32px); gap: 28px; text-align: center; flex: 1; }
.inicio-texto { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 40rem; }
.inicio h1 { margin: 0; font-size: clamp(2rem, 0.6rem + 3.6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.inicio-frase { margin: 0; font-size: clamp(1.15rem, 0.9rem + 0.9vw, 2rem); line-height: 1.35; color: var(--apoio); text-wrap: pretty; }
.inicio-nota { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--apoio); }
.botao-grande {
  width: 100%; max-width: 22rem; min-height: 64px; padding: 0 40px; border: 0; border-radius: 20px; background: var(--azul); color: var(--acao-texto);
  font-weight: 800; font-size: 1.3rem; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.55); transition: transform 0.15s, background 0.2s;
  margin-top: 4px;
}
.botao-grande:hover { background: var(--azul-escuro); }
.botao-grande:active { transform: scale(0.98); }
.inicio-qr { margin: 0; }
.qr-cartao { background: #fff; border-radius: 28px; padding: clamp(12px, 2.2vw, 32px); box-shadow: var(--sombra-aparelho); }
.qr-cartao img { width: min(70vw, 15rem); height: auto; }

.inicio-logo { width: min(66vw, 14rem); max-width: 100%; height: auto; }
.inicio-lema { margin: -4px 0 0; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.7rem); font-weight: 800; color: var(--azul-escuro); letter-spacing: -0.01em; }

.pilula { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--azul-suave); color: var(--azul-escuro); font-size: 0.85rem; font-weight: 700; }
.inicio .pilula { align-self: center; }

@media (min-width: 46rem) {
  .inicio { flex-direction: row; justify-content: center; gap: clamp(32px, 6vw, 120px); text-align: left; }
  .inicio-texto { align-items: flex-start; flex: 1 1 0; min-width: 0; }
  .inicio .pilula { align-self: flex-start; }
  .inicio-logo { width: clamp(15rem, 6rem + 24vw, 34rem); }
  .botao-grande { width: auto; min-width: 16rem; }
  .qr-cartao img { width: min(calc((100vh - 12rem) * 0.8333), 46vw, 48rem); min-width: 12rem; }
  .inicio-qr { flex: 0 0 auto; }
}

/* ---------- palco: texto de um lado, celular do outro ---------- */
.palco { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); flex: 1; }
.coluna-aparelho { width: 100%; max-width: 34rem; min-width: 0; display: flex; justify-content: center; }
.conjunto-celular { width: 100%; max-width: 24rem; display: flex; justify-content: center; }
.coluna-texto { width: 100%; max-width: 35rem; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 46rem) {
  .palco:not(.com-tablet) { flex-direction: row; }
  .palco:not(.com-tablet) .coluna-texto { flex: 1 1 340px; }
  .palco:not(.com-tablet) .coluna-aparelho { flex: 1 1 320px; }
}
/* com o tablet (passos do aluno) as duas colunas só vêm em tela larga: em tablet e celular o aparelho fica em cima, na largura toda */
@media (min-width: 62rem) {
  .palco.com-tablet { flex-direction: row; }
  .palco.com-tablet .coluna-texto { flex: 1 1 340px; }
  .palco.com-tablet .coluna-aparelho { flex: 1 1 360px; }
}

.coluna-texto h1 { margin: 0; font-size: clamp(1.7rem, 1rem + 2.4vw, 3.3rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.passo-desc { margin: 0; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem); line-height: 1.4; color: var(--apoio); text-wrap: pretty; }
.dica {
  display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 12px 16px; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra);
  font-weight: 700; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem); color: var(--azul-escuro);
}
.dica-ponto { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 5px var(--azul-halo); }
.recolhivel { background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra); }
.recolhivel:first-of-type { margin-top: 8px; }
.recolhivel summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; cursor: pointer; font-weight: 700; border-radius: 18px; }
.mais { font-size: 1.3rem; color: var(--apoio); }
.mais::before { content: "+"; }
details[open] > summary .mais::before { content: "\2212"; }
.recolhivel-corpo { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 0.95rem; line-height: 1.45; color: var(--apoio); }
.recolhivel-corpo p { margin: 0; }
.bloco-area { display: flex; flex-direction: column; gap: 6px; }
.bloco-area strong { color: var(--texto); }
.bloco-area ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rodape-nota { margin: 0; font-size: 0.8rem; color: var(--apoio); }

/* ---------- celular ---------- */
.aparelho { width: 100%; height: clamp(35rem, 76vh, 48rem); background: var(--superficie); border: 1px solid var(--linha); border-radius: 46px; padding: 9px; box-shadow: var(--sombra-aparelho); }
.aparelho-tela { height: 100%; border-radius: 38px; background: var(--fundo); overflow: hidden; display: flex; flex-direction: column; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px 2px; font-size: 0.72rem; font-weight: 700; color: var(--texto); }
.ilha { width: 76px; height: 20px; border-radius: 12px; background: #e5e8ed; }
.app-topo { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; }
.avatar-simbolo { width: 22px; height: 22px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #e3ecfd; color: var(--azul-escuro); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.app-titulos { display: flex; flex-direction: column; min-width: 0; }
.app-titulo { font-weight: 700; font-size: 0.95rem; }
.app-sub { font-size: 0.76rem; color: var(--apoio); }
.rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 16px; }
.tela { display: flex; flex-direction: column; gap: 12px; animation: entrada 0.25s ease-out; }
@keyframes entrada { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sub { display: flex; flex-direction: column; gap: 12px; }

.voz { margin: 0 10px 10px; background: var(--superficie); border-radius: 18px; padding: 8px 8px 8px 16px; box-shadow: 0 -1px 0 #eef0f3, 0 6px 18px rgba(31, 41, 55, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.voz-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voz-rotulo { font-size: 0.7rem; font-weight: 800; color: var(--apoio); letter-spacing: 0.04em; text-transform: uppercase; }
.voz-dito { font-size: 1.1rem; font-weight: 800; color: var(--apoio); min-height: 1.4em; overflow-wrap: anywhere; }
.voz-dito.tem { color: var(--texto); }
.voz-aviso { font-size: 0.72rem; color: var(--apoio); }
.voz-aviso:empty { display: none; }

/* ---------- peças dentro do celular ---------- */
.caixa { background: var(--superficie); border-radius: 22px; box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.caixa.centro { align-items: center; text-align: center; padding: 22px 16px; gap: 10px; }
.caixa.pequena { border-radius: 20px; padding: 14px 16px; gap: 6px; }
.chip { display: inline-flex; align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--azul-suave); color: var(--azul-escuro); font-size: 0.75rem; font-weight: 700; }
.etiqueta { font-size: 0.78rem; font-weight: 700; color: var(--apoio); }
.subtitulo { font-size: 0.8rem; font-weight: 700; color: var(--apoio); padding: 4px 4px 0; }
.texto-apoio { font-size: 0.9rem; color: var(--apoio); text-wrap: pretty; }
.texto-s { font-size: 0.88rem; }
.nota-s { font-size: 0.78rem; color: var(--apoio); }
.nota-centro { font-size: 0.75rem; color: var(--apoio); text-align: center; line-height: 1.5; padding: 0 8px; }
.mensagem { font-size: 0.88rem; font-weight: 600; min-height: 1.4em; }
.centro-texto { text-align: center; text-wrap: pretty; }
.mensagem.pronto { color: var(--verde); }
.titulo-missao { font-size: 1.15rem; font-weight: 800; text-wrap: pretty; }
.titulo-pequeno { font-size: 0.95rem; font-weight: 800; }
.titulo-painel { font-size: 1.05rem; font-weight: 800; padding: 2px 2px 0; }
.numero-grande { font-size: 1.45rem; font-weight: 800; }
.numero-medio { font-size: 1.8rem; font-weight: 800; }
.ola { font-size: 1.4rem; font-weight: 800; }
.centro-linha { display: flex; justify-content: center; padding: 8px 0; }
.logo-grande { width: 64px; height: 64px; border-radius: 20px; flex: none; }

.linha-perfil { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); cursor: pointer; text-align: left; transition: transform 0.15s; }
.linha-perfil:active { transform: scale(0.98); }
.avatar-p { width: 40px; height: 40px; border-radius: 50%; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.av-aluno { background: var(--avatar-aluno-fundo); color: var(--avatar-aluno); }
.av-pai { background: var(--avatar-pai-fundo); color: var(--avatar-pai); }
.av-ter { background: var(--avatar-ter-fundo); color: var(--avatar-ter); }
.linha-textos { display: flex; flex-direction: column; flex: 1; }
.linha-titulo { font-weight: 700; }
.linha-sub { font-size: 0.8rem; color: var(--apoio); }
.seta { font-size: 1.4rem; color: var(--apoio); }

/* abas dentro do celular */
.abas { display: flex; background: var(--cinza-aba); border-radius: 14px; padding: 4px; gap: 4px; }
.aba { flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--apoio); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.aba[aria-pressed="true"] { background: var(--superficie); color: var(--azul-escuro); box-shadow: 0 1px 4px rgba(31, 41, 55, 0.12); }

/* botões */
.btn-prim, .btn-sec, .btn-falar, .btn-link-prim, .btn-link-sec { min-height: 54px; border-radius: 16px; font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: transform 0.15s; }
.btn-prim { flex: 1; border: 0; background: var(--azul); color: var(--acao-texto); padding: 0 14px; }
.btn-sec { flex: 1; border: 2px solid var(--linha-forte); background: var(--superficie); padding: 0 14px; font-weight: 700; font-size: 0.9rem; }
.btn-sec.pequeno { flex: none; min-height: 44px; border-radius: 14px; }
.btn-falar { flex: 1; min-height: 56px; border: 0; background: var(--verde); color: var(--verde-texto); font-size: 1.1rem; }
.btn-falar:disabled { opacity: 0.45; cursor: default; }
.btn-prim.bloco, .btn-sec.bloco { flex: none; width: 100%; }
.btn-prim:active, .btn-sec:active, .btn-falar:active { transform: scale(0.98); }
.btn-texto { align-self: flex-start; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--azul-escuro); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.botao-fino { min-height: 44px; padding: 0 14px; border: 2px solid var(--linha-forte); border-radius: 14px; background: var(--superficie); font-weight: 700; font-size: 0.85rem; cursor: pointer; flex: none; }
.aviso-versao .botao-fino { border-color: var(--azul); color: var(--azul-escuro); }
.linha-botoes { display: flex; gap: 8px; }
.linha-espaco { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.linha-dor { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn-link-prim, .btn-link-sec { width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 8px 14px; text-align: center; }
.btn-link-prim { background: var(--azul); color: var(--acao-texto); min-height: 60px; border-radius: 18px; }
.btn-link-prim:hover { background: var(--azul-escuro); color: var(--acao-texto); }
.btn-link-sec { border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font-weight: 700; font-size: 0.95rem; min-height: 52px; }
.btn-link-sec:hover { border-color: var(--azul); color: var(--azul-escuro); }

/* cartões (moldura na cor da categoria: chave de Fitzgerald); os tamanhos "t" (quadro) e "c" (folha) são do tablet, mais abaixo */
.cartao {
  --cor: var(--linha-forte); display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--superficie); border: 4px solid var(--cor);
  border-radius: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(31, 41, 55, 0.06); transition: transform 0.15s, box-shadow 0.2s; min-width: 0;
}
.cartao:active { transform: scale(0.96); }
.cartao[data-cat="subst"] { --cor: var(--cat-subst); }
.cartao[data-cat="verbo"] { --cor: var(--cat-verbo); }
.cartao[data-cat="modif"] { --cor: var(--cat-modif); }
.cartao[data-cat="social"] { --cor: var(--cat-social); }
.cartao[data-cat="pessoa"] { --cor: var(--cat-pessoa); }
.cartao[data-cat="lugar"] { --cor: var(--cat-lugar); }
.cartao.tocado { box-shadow: 0 0 0 5px var(--anel); }
.cartao-rotulo { overflow-wrap: anywhere; text-align: center; }
.cartao img { flex: none; }

/* o quadro do tablet (aluno): o cartão é GRANDE e ocupa quase toda a tela, como no app */
.tela .quadro-f2 .cartao.salta { animation: salta-t 0.3s ease-out; }
@keyframes salta-t { from { opacity: 0.2; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%); } }

.slot { flex: 1; min-width: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.slot.vazio { border: 2px dashed #b8c1cd; background: var(--cinza); font-size: 0.8rem; color: var(--apoio); text-align: center; padding: 4px; }
.slot.cheio { border: 3px solid var(--linha-forte); background: var(--superficie); font-weight: 800; flex-direction: column; cursor: pointer; padding: 4px; }
.slot.cheio img { flex: 1 1 0; min-height: 0; max-width: 100%; object-fit: contain; }
.slot[data-cat="subst"] { border-color: var(--cat-subst); }
.slot[data-cat="verbo"] { border-color: var(--cat-verbo); }
.slot[data-cat="modif"] { border-color: var(--cat-modif); }

/* semana e missão (pai) */
.dias { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 4px; }
.dia { width: 32px; height: 32px; border-radius: 50%; background: var(--cinza); color: var(--apoio); font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dia.feito { background: var(--azul); color: var(--acao-texto); }
.linha-miniaturas { display: flex; gap: 10px; }
.miniatura { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border: 3px solid var(--cat-subst); border-radius: 14px; font-size: 0.78rem; font-weight: 800; }
.miniatura img { width: 44px; height: 44px; }
.passos-missao { margin: 0; padding-left: 20px; font-size: 0.88rem; color: var(--apoio); display: flex; flex-direction: column; gap: 4px; }
.faixa-aviso { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--pronto-fundo); }
.faixa-msg { font-weight: 700; font-size: 0.92rem; }
.faixa-aviso .btn-texto { flex: none; align-self: center; }

/* registro (terapeuta) */
.grupo-reg { display: flex; flex-direction: column; gap: 8px; }
.btn-reg { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 10px 8px 16px; background: var(--superficie); border: 2px solid var(--linha); border-radius: 16px; font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left; transition: transform 0.15s; }
.btn-reg:active { transform: scale(0.98); }
.btn-reg.ultimo { border-color: var(--azul); }
.contagem { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 12px; background: var(--cinza); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cota-texto { font-size: 0.88rem; font-weight: 600; }
.barra { height: 8px; background: var(--cinza-barra); border-radius: 999px; overflow: hidden; }
.barra div { height: 100%; width: 0; background: var(--azul); border-radius: 999px; transition: width 0.4s; }
.barra.ok div { background: var(--verde); }
.barra.azul div { transition: width 1s linear; }

/* entrega */
.bloco-codigo { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.codigo { font-family: var(--mono); font-size: 2.1rem; font-weight: 800; letter-spacing: 0.1em; }
.codigo.expirou { color: var(--apoio); }
.bloco-codigo .barra { width: 100%; }
.bloco-codigo .linha-botoes { width: 100%; }
.bloco-codigo .btn-sec { min-height: 50px; border-radius: 14px; font-size: 0.88rem; }

/* fotos */
.rotulo-campo { font-size: 0.8rem; font-weight: 700; color: var(--apoio); }
.caixa textarea { width: 100%; min-height: 88px; padding: 12px; border: 2px solid var(--borda-campo); border-radius: 14px; background: var(--campo-fundo); font-size: 0.95rem; resize: vertical; }
.selo-tranca { padding: 5px 11px; border-radius: 999px; background: var(--cinza); color: var(--apoio); font-size: 0.75rem; font-weight: 800; }
.selo-tranca.on { background: var(--azul-suave); color: var(--azul-escuro); }
.cifra { padding: 12px; border-radius: 14px; background: var(--cifra-fundo); font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; color: var(--apoio); word-break: break-all; max-height: 110px; overflow: hidden; }
.ponto-lista { display: flex; gap: 10px; font-size: 0.88rem; line-height: 1.4; }
.quadradinho { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--azul); }

/* ---------- tablet do aluno (passos 2 a 4): em pé por padrão, com a opção de deitar ---------- */
.conjunto-tablet { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.controles-tablet { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.linha-controles { display: flex; flex-wrap: wrap; justify-content: center; }
.posicao { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px 4px 4px 14px; background: var(--superficie); border-radius: 27px; box-shadow: var(--sombra-seg); max-width: 100%; }
.posicao-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--apoio); padding-right: 6px; }
.posicao-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--texto); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; }
.posicao-botao[aria-pressed="true"] { background: var(--azul); color: var(--acao-texto); }
.controles-fase { width: 100%; display: flex; flex-direction: column; align-items: center; }
.faixa-passo { width: 100%; max-width: 30rem; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.faixa-passo .abas { width: 100%; }
.faixa-passo .texto-apoio { text-align: center; }
.chip.fase-atual { align-self: center; }

@media (max-width: 29rem) {
  .posicao { padding-left: 12px; }
  .posicao-texto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .posicao-botao { padding: 0 14px; }
}

/* a moldura: bezel fino, cantos grandes, sombra leve. Em pé = 3:4; deitado = 4:3 (a proporção anima) */
.tablet {
  --larg-pe: min(100%, 30rem, max(22rem, calc((100vh - 15rem) * 0.75)));
  --larg-deitado: min(100%, 36rem, max(26rem, calc((100vh - 15rem) * 1.3333)));
  width: var(--larg-pe); aspect-ratio: 3 / 4; min-height: 18rem; display: flex; padding: 10px; background: #1f2937; border-radius: 34px;
  box-shadow: 0 2px 6px rgba(31, 41, 55, 0.12), 0 30px 60px -28px rgba(31, 41, 55, 0.45); transition: width 0.4s ease, aspect-ratio 0.4s ease;
}
@supports (height: 100svh) {
  .tablet { --larg-pe: min(100%, 30rem, max(22rem, calc((100svh - 15rem) * 0.75))); --larg-deitado: min(100%, 36rem, max(26rem, calc((100svh - 15rem) * 1.3333))); }
}
.tablet[data-orient="deitado"] { width: var(--larg-deitado); aspect-ratio: 4 / 3; }
.tablet-tela { position: relative; flex: 1; min-width: 0; min-height: 0; border-radius: 24px; background: var(--fundo); overflow: hidden; display: flex; flex-direction: column; transition: opacity 0.17s ease; }
.tablet.girando .tablet-tela { opacity: 0; }

.t-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.t-quadro { position: relative; flex: 1; min-height: 0; min-width: 0; container-type: size; container-name: quadro; }
.t-quadro > .tela { position: absolute; inset: 0; display: block; }
.t-quadro .sub { display: block; }
/* os dois botões fixos: embaixo quando em pé, na lateral quando deitado */
.t-nec { flex: none; display: flex; gap: 8px; padding: 0 8px 8px; }
.t-botao-nec {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px; border: 2px solid var(--borda-campo); border-radius: 16px;
  background: var(--superficie); color: var(--texto); font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.t-botao-nec img { flex: none; width: 30px; height: 30px; object-fit: contain; }
.t-botao-nec:active { background: var(--azul-suave); border-color: var(--azul); }
.tablet[data-orient="deitado"] .t-corpo { flex-direction: row; }
.tablet[data-orient="deitado"] .t-nec { flex-direction: column; justify-content: center; width: clamp(5.2rem, 20%, 7.5rem); padding: 0 8px 0 0; }
.tablet[data-orient="deitado"] .t-botao-nec { flex: none; flex-direction: column; gap: 2px; min-height: 64px; padding: 6px 4px; font-size: 0.8rem; }

/* cartão do quadro: tamanho pelo quadro (cq), com cantos e borda proporcionais */
.cartao-t {
  --rot: clamp(0.95rem, 5cqmin, 2.1rem); width: 100%; height: 100%; padding: clamp(6px, 2.2cqmin, 18px); gap: clamp(2px, 1cqmin, 8px); border-width: clamp(3px, 0.9cqmin, 6px);
  border-radius: clamp(14px, 4.6cqmin, 30px); box-shadow: 0 6px 20px rgba(31, 41, 55, 0.08);
}
.cartao-t img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: contain; }
.cartao-t .cartao-rotulo { flex: none; max-width: 100%; font-size: var(--rot); font-weight: 800; line-height: 1.1; text-wrap: balance; overflow-wrap: normal; }
.cartao-t.tocado { box-shadow: 0 0 0 5px var(--anel); }

/* fase 1: um cartão enorme */
.quadro-t1 { position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; }
.quadro-t1 .cartao-t { width: 80%; aspect-ratio: 1 / 1.12; height: auto; --rot: clamp(1.2rem, 6.5cqmin, 2.6rem); }
@container quadro (min-width: 1px) {
  .quadro-t1 .cartao-t { width: min(86cqw, calc(100cqh / 1.12)); }
}

/* fase 2: o cartão muda de lugar a cada toque (mesmas posições do app) */
.quadro-f2 { position: absolute; inset: 10px; }
.quadro-f2 .cartao-t { position: absolute; transform: translate(-50%, -50%); width: 46%; height: auto; aspect-ratio: 1 / 1.12; --rot: clamp(0.9rem, 3.6cqmin, 1.6rem); }
.quadro-f2 .cartao-t:active { transform: translate(-50%, -50%) scale(0.96); }
@container quadro (min-width: 1px) {
  .quadro-f2 .cartao-t { width: min(48cqw, calc(48cqh / 1.12)); }
}

/* fase 3: dois cartões (um embaixo do outro em pé; lado a lado deitado) */
.grade-2 { position: absolute; inset: 10px; display: grid; gap: 12px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.tablet[data-orient="deitado"] .grade-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.grade-2 .cartao-t { --rot: clamp(1rem, 4.2cqmin, 1.9rem); min-height: 0; }

/* fase 4: a tira da frase e a grade de seis cartões (2 colunas em pé; 3 colunas e 2 linhas deitado) */
.quadro-f4 { position: absolute; inset: 10px; display: flex; flex-direction: column; gap: 10px; }
.tira-frase { flex: none; height: clamp(60px, 17cqh, 8rem); display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 8px; align-items: stretch; background: var(--cinza-barra); border-radius: 18px; padding: 8px; }
.tira-frase .cartao-t { --rot: clamp(0.66rem, 2.6cqmin, 1.2rem); padding: 4px; border-radius: 14px; }
.tira-frase .slot { font-size: clamp(0.8rem, 2.6cqmin, 1.2rem); }
.btn-falar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 0; border: 0; border-radius: 14px; background: var(--verde); color: var(--verde-texto); font-weight: 800; font-size: clamp(0.85rem, 2.8cqmin, 1.3rem); cursor: pointer; }
.btn-falar:disabled { opacity: 0.45; cursor: default; }
.btn-falar:active { transform: scale(0.98); }
.falar-seta { font-size: 1.2em; line-height: 1; }
.grade-4 { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.tablet[data-orient="deitado"] .grade-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grade-4 .cartao-t { --rot: clamp(0.68rem, 3.2cqmin, 1.6rem); min-height: 0; padding: clamp(4px, 1.4cqmin, 12px); }

/* folha "Eu estou…" / "Respostas" / "Onde dói?" sobre o quadro (como no app: o resto da tela fica parado e escurecido) */
.t-painel { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; background: rgba(31, 41, 55, 0.4); }
.t-folha { width: 100%; height: 90%; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; background: var(--fundo); border-radius: 22px 22px 0 0; animation: sobe 0.25s ease-out; }
@keyframes sobe { from { transform: translateY(8%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.t-folha-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t-folha-acoes { display: flex; gap: 8px; }
.t-folha-corpo { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(5.2rem, 1fr); }
.t-folha-corpo[data-modo="dor"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tablet[data-orient="deitado"] .t-folha { height: 96%; }
.tablet[data-orient="deitado"] .t-folha-corpo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tablet[data-orient="deitado"] .t-folha-corpo[data-modo="dor"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartao-c { position: relative; justify-content: center; min-height: 0; padding: 6px 4px; gap: 2px; border-width: 3px; border-radius: 16px; box-shadow: none; font-weight: 800; }
.cartao-c img { flex: 0 1 52%; min-height: 0; max-width: 78%; object-fit: contain; }
.cartao-c .cartao-rotulo { font-size: 0.88rem; line-height: 1.1; overflow-wrap: normal; max-width: 100%; }
.cartao-c.tocado { --cor: var(--azul); box-shadow: 0 0 0 4px var(--anel); }
.seta-dor { position: absolute; right: 8px; top: 4px; font-size: 1.2rem; color: var(--apoio); }
.t-folha-corpo[data-modo="dor"] .cartao-c img { flex-basis: 40%; }
.t-folha-corpo[data-modo="dor"] .cartao-c .cartao-rotulo { font-size: 1.05rem; }
/* tela estreita (320 px, ou texto do navegador a 200%): deitado, os dois botões fixos também ficam embaixo, para o quadro não ficar espremido */
@media (max-width: 20rem) {
  .tablet[data-orient="deitado"] .t-corpo { flex-direction: column; }
  .tablet[data-orient="deitado"] .t-nec { flex-direction: row; width: auto; padding: 0 8px 8px; justify-content: stretch; }
  .tablet[data-orient="deitado"] .t-botao-nec { flex: 1 1 0; min-width: 0; font-size: 0.78rem; min-height: 56px; overflow-wrap: anywhere; }
}
@media (max-width: 29rem) {
  .tablet[data-orient="deitado"] .t-folha-corpo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tablet[data-orient="deitado"] .t-folha-corpo[data-modo="dor"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablet[data-orient="deitado"] .tira-frase { gap: 4px; padding: 4px; }
  .cartao-c { padding: 6px 2px; }
  .cartao-c .cartao-rotulo { font-size: 0.7rem; overflow-wrap: break-word; hyphens: auto; }
  .t-folha-corpo[data-modo="dor"] .cartao-c .cartao-rotulo { font-size: 0.95rem; }
}

.legenda-tablet { margin: 0; max-width: 30rem; text-align: center; font-size: 0.9rem; line-height: 1.4; color: var(--apoio); text-wrap: pretty; }
.conjunto-tablet .voz { margin: 0; width: 100%; max-width: 30rem; }

/* ---------- Anterior / Próximo ---------- */
.passos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--linha); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.passos-corpo { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.botao-nav { flex: 1; max-width: 240px; min-height: 56px; border: 2px solid var(--linha-forte); border-radius: 16px; background: var(--superficie); font-weight: 800; font-size: 1.02rem; cursor: pointer; transition: transform 0.15s; }
.botao-nav.principal { border: 0; background: var(--azul); color: var(--acao-texto); }
.botao-nav:active { transform: scale(0.98); }
.botao-nav:disabled { opacity: 0.45; cursor: default; }
.passos-centro { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.passos-texto { font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.pontos { display: flex; gap: 5px; }
.ponto { width: 6px; height: 6px; border-radius: 999px; background: #c9d0da; transition: width 0.25s; }
.ponto.atual { width: 20px; background: var(--azul); }

/* texto muito grande (o navegador a 125% ou mais) ou tela muito estreita: texto do passo em cima, botões embaixo */
@media (max-width: 19rem) {
  .passos-corpo { flex-wrap: wrap; }
  .passos-centro { order: -1; flex-basis: 100%; }
  .botao-nav { flex: 1 1 7rem; max-width: none; }
  .passos-texto { white-space: normal; text-align: center; }
}
/* celular: marca e QR na primeira linha; o selo "Dados fictícios" desce */
@media (max-width: 29rem) {
  .topo-acoes, .marca-bloco { display: contents; }
  .marca { order: 1; }
  .botao-qr { order: 2; margin-left: auto; }
  .marca-sub { order: 3; flex: 1 1 12rem; }
  .selo { order: 4; }
}