/* Mosaico Sala — estilos compartilhados (condução no celular, telão na TV, participante no celular) */
:root {
  --fundo: #0b0f17;
  --fundo-2: #121826;
  --cartao: #182033;
  --cartao-2: #1f2a42;
  --linha: #2c3a57;
  --texto: #eef2fa;
  --texto-2: #a9b4c9;
  --acento: #ff8a3d;
  --acento-2: #3ddcff;
  --ok: #4dffb0;
  --alerta: #ffd23d;
  --erro: #ff6b6b;
  --raio: 14px;
  --toque: 52px;
  --fonte-titulo: 'Archivo', system-ui, sans-serif;
  --fonte: 'Source Sans 3', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo) radial-gradient(1200px 600px at 80% -10%, #1c2a4a 0%, transparent 60%) fixed;
  color: var(--texto); font: 17px/1.5 var(--fonte); min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 .8em; }
small, .sutil { color: var(--texto-2); }
a { color: var(--acento-2); }
[hidden] { display: none !important; }

/* Marca */
.marca { font-family: var(--fonte-titulo); font-weight: 900; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .45em; }
.marca .ladrilhos { display: inline-grid; grid-template-columns: repeat(2, .55em); gap: .09em; }
.marca .ladrilhos i { width: .55em; height: .55em; border-radius: .12em; display: block; }
.marca .ladrilhos i:nth-child(1) { background: #ff8a3d; } .marca .ladrilhos i:nth-child(2) { background: #3ddcff; }
.marca .ladrilhos i:nth-child(3) { background: #c6ff45; } .marca .ladrilhos i:nth-child(4) { background: #ff5fa8; }

/* Botões e campos — alvos de toque grandes */
.btn {
  min-height: var(--toque); padding: 0 20px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--cartao-2); color: var(--texto); font: 600 1rem var(--fonte); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--acento-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--acento); color: #1a0d00; border-color: transparent; font-weight: 800; }
.btn.perigo { border-color: var(--erro); color: var(--erro); background: transparent; }
.btn.discreto { background: transparent; }
.btn.bloco { width: 100%; }
.btn.pequeno { min-height: 40px; padding: 0 12px; font-size: .9rem; }
/* Campo de arquivo: botão em português + arrastar e soltar */
.arq-zona { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 12px; font-weight: 400;
  border: 1.5px dashed var(--linha); border-radius: 12px; cursor: pointer; }
.arq-zona:hover, .arq-zona.arrastando { border-color: var(--acento-2); }
.arq-zona:focus-within { outline: 3px solid var(--acento-2); outline-offset: 2px; }
.arq-nome { color: var(--texto-2); overflow-wrap: anywhere; }
.arq-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
label { display: block; font-weight: 600; margin: 12px 0 6px; }
input[type=text], input[type=number], input[type=email], input:not([type]), select, textarea {
  width: 100%; min-height: var(--toque); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--fundo-2); color: var(--texto); font: 1.05rem var(--fonte);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 2px; }

/* Cartões */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; margin: 14px 0; }
.cartao.destaque { border-color: var(--acento); }
.peca { background: #f6f1e7; color: #1b1b1b; border-radius: 10px; padding: 14px 16px; margin: 10px 0; font-size: 1.05rem; box-shadow: 0 2px 0 rgba(0,0,0,.35); position: relative; }
.peca.sintetico::after { content: ''; }
.peca label.marcar { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-weight: 600; color: #3a2a10; }
.peca input[type=checkbox] { width: 26px; height: 26px; flex: none; accent-color: #ff8a3d; }

/* Opções (hipóteses, alternativas) */
.opcoes { display: grid; gap: 10px; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 2px solid var(--linha); background: var(--fundo-2); cursor: pointer; font-weight: 500; }
.opcao input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--acento); }
.opcao:has(input:checked) { border-color: var(--acento); background: #2a1d12; }
.opcao.leitura { cursor: default; }

/* Chips de grupo */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--cartao-2); font-weight: 600; font-size: .95rem; }
.chip i { width: 18px; height: 18px; border-radius: 5px; display: block; }
.estado { font-size: .85rem; padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.estado.ok { background: #0f3b2a; color: var(--ok); }
.estado.pend { background: #3b330f; color: var(--alerta); }
.estado.vazio { background: #3b1414; color: var(--erro); }

/* Avisos */
.aviso { padding: 12px 14px; border-radius: 12px; background: #13263d; border-left: 4px solid var(--acento-2); margin: 12px 0; }
.aviso[data-tipo=erro] { background: #3b1414; border-color: var(--erro); }
.aviso[data-tipo=ok] { background: #0f3b2a; border-color: var(--ok); }
.aviso[data-tipo=alerta] { background: #3b330f; border-color: var(--alerta); }
.diag { list-style: none; padding: 0; margin: 8px 0; }
.diag li { padding: 8px 10px; border-radius: 8px; margin: 6px 0; background: var(--fundo-2); font-size: .95rem; }
.diag li.erro { border-left: 4px solid var(--erro); }
.diag li.aviso { border-left: 4px solid var(--alerta); }
.diag li.info { border-left: 4px solid var(--acento-2); }
.diag code { color: var(--texto-2); font-size: .8rem; display: block; }

/* Escala de desempenho (sem pontos) */
.escala { display: inline-flex; flex-direction: column; gap: 6px; }
.escala-barras { display: flex; gap: 6px; }
.escala-barras span { width: 44px; height: 14px; border-radius: 4px; background: var(--linha); }
.escala-barras span.cheia { background: var(--ok); }

/* Janela explicativa */
dialog.explica { max-width: 520px; width: calc(100% - 32px); background: var(--cartao); color: var(--texto); border: 1px solid var(--acento); border-radius: var(--raio); padding: 22px; }
dialog::backdrop { background: rgba(5, 8, 14, .75); }
dialog.explica .btn { width: 100%; margin-top: 8px; }

/* Layout de página no celular */
.pagina { max-width: 720px; margin: 0 auto; padding: 0 16px 96px; }
.topo { position: sticky; top: 0; z-index: 10; background: rgba(11, 15, 23, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo .barra { max-width: 720px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo .status { font-size: .9rem; color: var(--texto-2); text-align: right; }
.abas { display: flex; gap: 4px; max-width: 720px; margin: 0 auto; padding: 0 8px 8px; overflow-x: auto; }
.abas button { flex: 1; min-height: 46px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2); font: 700 .95rem var(--fonte); white-space: nowrap; padding: 0 12px; cursor: pointer; }
.abas button[aria-selected=true] { background: var(--cartao-2); color: var(--texto); box-shadow: inset 0 -3px 0 var(--acento); }

/* Grade de grupos */
.grade-grupos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grupo { border-radius: var(--raio); padding: 14px; background: var(--cartao); border-top: 6px solid var(--cor, #888); }
.grupo h3 { margin-bottom: 6px; }
.grupo ul { margin: 0; padding-left: 0; list-style: none; }
.grupo li { padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grupo li .rep { font-size: .78rem; font-weight: 800; color: var(--acento); }
.grupo select { min-height: 38px; padding: 4px 8px; font-size: .9rem; width: auto; }

/* Etapas na condução */
.etapa-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.etapa-linha.atual { outline: 2px solid var(--acento); }
.etapa-linha .tipo { font-size: .85rem; color: var(--texto-2); }

/* QR */
.qr { background: #fff; border-radius: 14px; padding: 10px; width: min(70vw, 280px); }
.qr svg { display: block; width: 100%; height: auto; }
.codigo { font-family: var(--fonte-titulo); font-weight: 900; letter-spacing: .12em; font-size: 2rem; }

/* Telão (TV) */
/* --ajuste: encolhe tudo junto quando o conteúdo não cabe (js/telao.js, caber()) — o telão nunca corta. */
body.telao { font-size: calc(clamp(15px, min(1.55vw, 2.75vh), 72px) * var(--ajuste, 1)); overflow: hidden; }
.btn-tela-cheia { min-height: 0; width: 2.2em; height: 2.2em; padding: 0; font-size: .8em; }
body.telao:fullscreen .btn-tela-cheia, :fullscreen .btn-tela-cheia { opacity: .35; }
.telao-palco { height: 100vh; height: 100dvh; width: 100%; padding: 3vh 4vw; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: 2vh; }
:fullscreen .telao-palco, .telao-palco:fullscreen { height: 100vh; }
.telao-palco header { display: flex; justify-content: space-between; align-items: center; gap: 1em; min-width: 0; }
.telao-palco header #cabecalho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.telao-palco header > span:last-child { min-width: 0; }
.telao-palco h1 { font-size: 2.4em; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; }
.telao-palco .marca { font-size: 1.3em; }
.telao-centro { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; gap: 2vh; min-height: 0; min-width: 0; overflow: hidden; }
.telao-entrada { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4vw; align-items: center; }
.telao-entrada .qr { width: calc(min(34vh, 34vw) * var(--ajuste, 1)); }
.telao-entrada p { overflow-wrap: anywhere; }
.telao .faixa-simulacao { font-size: .8em; margin: 0; }
.telao-entrada .codigo { font-size: 3.2em; }
.telao .grade-grupos { grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); }
.telao .grupo { font-size: .9em; }
.telao .progresso { display: flex; flex-wrap: wrap; gap: .6em; }
.telao .progresso .chip { font-size: .9em; padding: .3em .8em .3em .4em; }
.telao .relogio { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2em; }
.telao footer { color: var(--texto-2); font-size: .7em; display: flex; justify-content: space-between; }
.telao .escala-barras span { width: 3em; height: .7em; }
.telao .explicacao { background: var(--cartao); border-radius: var(--raio); padding: 1em 1.2em; font-size: .85em; }

/* Impressão */
@media print { .nao-imprimir { display: none !important; } }

/* =====================================================================
   Identidade 3D (23/10/2026): logo em peças de quebra-cabeça, ícones 3D
   por grupo e profundidade em cartões, botões, chips e opções.
   ===================================================================== */
.marca .logo { width: 1.9em; height: 1.9em; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.marca { gap: .5em; }

/* cartões com volume */
.cartao, .grupo {
  background: linear-gradient(180deg, #1d2740 0%, #172034 100%);
  border: 1px solid #2c3a57;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 0 #0d1220, 0 14px 28px rgba(0,0,0,.35);
}
.cartao.destaque { border-color: var(--acento); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 0 #6b3510, 0 14px 30px rgba(255,138,61,.18); }
.grupo { border-top: 0; position: relative; }
.grupo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: var(--raio) var(--raio) 0 0; background: var(--cor, #888); box-shadow: 0 0 18px var(--cor, transparent); }

/* botões que afundam ao toque */
.btn { box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 4px 0 #0c111d; transition: transform .06s, box-shadow .06s; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 1px 0 #0c111d; }
.btn.primario { background: linear-gradient(180deg, #ffa25c 0%, #ff8a3d 55%, #f5741f 100%); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 4px 0 #a84a10, 0 8px 18px rgba(255,138,61,.25); }
.btn.primario:active:not(:disabled) { box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 1px 0 #a84a10; }
.btn.perigo { box-shadow: 0 4px 0 #5a1b1b; }
.btn.discreto { box-shadow: none; }

/* ícones e etiquetas de grupo */
.icone-grupo { object-fit: contain; flex: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.chip { padding: 4px 14px 4px 6px; background: linear-gradient(180deg, #24304b, #1b2439); border: 1px solid #33425f; box-shadow: 0 3px 0 #0c111d; }
.chip i { display: none; }
.titulo-grupo { display: flex; align-items: center; gap: .45em; }
.grupo-destaque { display: flex; justify-content: center; margin: 4px 0 8px; }
.grupo-destaque .icone-grupo { animation: flutuar 3.2s ease-in-out infinite; }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .grupo-destaque .icone-grupo { animation: none; } .btn { transition: none; } }

/* opções e peças com profundidade */
.opcao { box-shadow: 0 3px 0 #0c111d; transition: transform .06s; }
.opcao:has(input:checked) { box-shadow: 0 3px 0 #6b3510, 0 0 0 1px var(--acento) inset; }
.opcao:active { transform: translateY(2px); }
.peca { box-shadow: 0 3px 0 #b9ab92, 0 10px 18px rgba(0,0,0,.35); }

/* abas da condução em relevo */
.abas button[aria-selected=true] { background: linear-gradient(180deg, #26324f, #1d2740); box-shadow: inset 0 -3px 0 var(--acento), 0 3px 0 #0c111d; }

/* telão: ícones maiores e cartões de grupo com o mesmo volume */
.telao .chip { gap: .5em; }
.telao .chip .icone-grupo { width: 1.6em; height: 1.6em; }
.telao .titulo-grupo .icone-grupo { width: 2.2em; height: 2.2em; }
.telao .marca .logo { width: 2.2em; height: 2.2em; }
.telao .escala-barras span { box-shadow: 0 3px 0 #0c111d; }

/* representante: nome e etiqueta na cor da equipe */
.grupo li.eh-rep { color: var(--cor, var(--acento)); font-weight: 700; }
.grupo li .rep { color: var(--cor, var(--acento)); border: 1px solid var(--cor, var(--acento)); border-radius: 999px; padding: 1px 8px; }

/* Montagem em peças: peça de quebra-cabeça em tela cheia no celular */
.peca-qc { display: block; width: 100%; height: auto; max-height: 68vh; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.peca-qc-texto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #1b1b1b; font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; padding: 2px; }
.pecas-carrossel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 6px 8px; }
.pecas-carrossel > div { flex: 0 0 92%; scroll-snap-align: center; }
.pecas-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.pecas-fila .peca-qc { width: 120px; max-height: none; }
.montagem-aviso { text-align: center; font-size: 1.05rem; }
.telao .pecas-fila .peca-qc { width: 100%; }

/* ---------- Cadeado do grupo ---------- */
.cadeado-placa { display: flex; gap: 12px; align-items: center; background: var(--cartao-2, rgba(255,255,255,.05)); border: 2px solid var(--cor, #ff8a3d); border-radius: var(--raio, 14px); padding: 10px 14px; margin: 10px 0; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.cadeado-placa.aberto { border-color: #3ddc84; }
.cadeado-icone { font-size: 2.2em; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.cadeado-placa > div:last-child { flex: 1; display: grid; gap: 4px; }
.cadeado-barra { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.cadeado-barra span { display: block; height: 100%; background: var(--cor, #ff8a3d); border-radius: 99px; transition: width .4s; }
.aberto .cadeado-barra span { background: #3ddc84; }
.cadeado-pergunta { border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; margin-top: 12px; }
.cadeado-pergunta.estado-certa h3::after { content: ' ✔'; color: #3ddc84; }
.fragmento { text-align: center; background: linear-gradient(#fffaf0, #efe4cf); color: #1b1b1b; border: 3px dashed var(--cor, #ff8a3d); border-radius: 14px; padding: 10px; margin: 8px 0; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.fragmento small { display: block; color: #6b5b3e; font-weight: 600; }
.fragmento div { font-family: var(--fonte-titulo, 'Archivo'), system-ui, sans-serif; font-weight: 800; font-size: 2em; overflow-wrap: anywhere; }
.cadeado-codigo { margin-top: 14px; padding: 12px; border-radius: var(--raio, 14px); border: 2px solid #f3bf0a; background: rgba(243,191,10,.08); }
.cadeado-codigo input { font-size: 1.4em; text-align: center; letter-spacing: .05em; }
.cadeado-mensagem { margin: 10px 0; padding: 14px; border-radius: var(--raio, 14px); background: rgba(61,220,132,.12); border: 2px solid #3ddc84; font-size: 1.1em; font-weight: 600; }
.telao .cadeados { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: .8em; }
.cadeado-telao { background: var(--cartao); border: 3px solid var(--cor); border-radius: var(--raio); padding: .7em; text-align: center; display: grid; gap: .35em; justify-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.4); transition: transform .3s; }
.cadeado-telao .cadeado-barra { width: 100%; height: .6em; }
.cadeado-telao.aberto { border-color: #3ddc84; transform: translateY(-4px); }
.cadeado-telao .cadeado-icone { font-size: 2.6em; }

/* ---------- Quiz entre grupos ---------- */
.quiz-vez { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--raio, 14px); border: 2px solid var(--cor, rgba(255,255,255,.2)); margin: 8px 0; }
.quiz-vez.minha { border-color: #f3bf0a; background: rgba(243,191,10,.1); }
.quiz-placar { display: flex; flex-wrap: wrap; gap: 6px; }
.telao .quiz-vez-telao { display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: center; background: var(--cartao); border: 4px solid var(--cor); border-radius: var(--raio); padding: .6em 1em; box-shadow: 0 8px 0 rgba(0,0,0,.4); }
.telao .quiz-vez-telao .icone-grupo { width: 4em; height: 4em; }
.telao .quiz-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.2em; line-height: 1.1; }
.telao .quiz-sinal { font-size: 3em; font-weight: 800; }
.telao .relogio.acabando { color: #ff5d5d; }
.telao .telao-placar { justify-content: center; }
.telao .telao-placar .chip { font-size: 1em; }

/* ---------- Cartões de arrastar ---------- */
.quadro-cartoes { display: grid; gap: 12px; margin: 12px 0; -webkit-user-select: none; user-select: none; }
.cartao-arr { background: linear-gradient(180deg, #fffaf0, #efe4cf); color: #1b1b1b; border-radius: 12px; padding: 12px 14px; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font-weight: 700; line-height: 1.2; box-shadow: 0 3px 0 #b9ab92, 0 8px 14px rgba(0,0,0,.3); border: 2px solid transparent; overflow-wrap: anywhere; }
.cartao-arr.movel { cursor: grab; }
.cartao-arr.preso { opacity: .78; box-shadow: 0 2px 0 #9c907a; }
.cartao-arr.meu { border-color: var(--cor, var(--acento)); }
.cartao-arr.selecionado { outline: 4px solid var(--acento-2); outline-offset: 2px; transform: translateY(-2px); }
.cartao-arr.origem { opacity: .3; }
.cartao-arr .dono { font-weight: 600; color: #6b5b3e; font-size: .8rem; }
.cartao-arr.fantasma { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: .95; box-shadow: 0 16px 30px rgba(0,0,0,.5); }
.cartoes-mao { border: 2px dashed var(--linha); border-radius: var(--raio); padding: 10px; background: rgba(255,255,255,.03); }
.cartoes-rotulo { font-size: .9rem; color: var(--texto-2); font-weight: 700; margin-bottom: 8px; }
.cartoes-lista { display: grid; gap: 8px; }
.cartoes-mao .cartoes-lista { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cartoes-trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cartoes-slot { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; min-height: 60px; border: 2px dashed var(--linha); border-radius: 12px; padding: 4px 6px; background: var(--fundo-2); }
.cartoes-slot .num { font-family: var(--fonte-titulo); font-weight: 900; font-size: 1.2rem; color: var(--texto-2); text-align: center; }
.cartoes-slot.cheio { border-style: solid; }
.cartoes-slot .vazio, .cartoes-coluna .vazio { color: var(--texto-2); font-size: .85rem; }
.cartoes-coluna .cartoes-lista:has(.cartao-arr) .vazio { display: none; }
.cartoes-colunas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cartoes-coluna { border: 2px dashed var(--linha); border-radius: 12px; padding: 8px; min-height: 120px; background: var(--fundo-2); }
.cartoes-coluna h4 { margin: 0 0 8px; font-family: var(--fonte-titulo); text-align: center; }
[data-alvo].sobre { border-color: var(--acento-2) !important; background: rgba(61,220,255,.1) !important; }
.termo-polos { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; font-size: .9rem; }
.termo-polos span:first-child { color: #ff8f8f; } .termo-polos span:last-child { color: #7dffbe; text-align: right; }
.termo-linha { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.termo-rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; }
.termo-rotulo .dono { font-weight: 600; }
.termo-trilha { position: relative; height: 44px; border-radius: 999px; }
.termo-trilha.movel { cursor: pointer; }
.termo-faixa { position: absolute; left: 0; right: 0; top: 50%; height: 12px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, #ff6b6b, #ffd23d, #4dffb0); box-shadow: 0 3px 0 #0c111d; }
.termo-marcador { position: absolute; top: 50%; width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--cor, var(--acento)); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.termo-linha.vazia .termo-faixa { opacity: .5; }
.termo-trilha:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 4px; }
.termo-dica { font-size: .85rem; }
/* telão */
.telao .cadeia-telao { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; justify-content: center; }
.telao .cadeia-telao .seta { font-size: 1.5em; font-weight: 800; color: var(--acento); }
.telao .cartao-arr { font-size: .9em; padding: .5em .8em; min-height: 0; }
.telao .telao-colunas { grid-template-columns: repeat(var(--n), 1fr); }
.telao .termo-telao { display: grid; gap: .5em; }
.telao .termo-linha-telao { display: grid; grid-template-columns: 16em 1fr; gap: 1em; align-items: center; }
.telao .termo-linha-telao .termo-trilha { height: 2.6em; }
.telao .termo-esperado { position: absolute; top: 15%; bottom: 15%; border-radius: 999px; background: rgba(255,255,255,.22); border: 2px dashed #fff; }
.telao .termo-ponto { position: absolute; transform: translate(-50%, 0); top: 0; }
.telao .termo-ponto .icone-grupo { width: 1.5em; height: 1.5em; }
.telao .termo-linha-telao .termo-rotulo { display: block; }
.telao .etiqueta-div { display: inline-block; white-space: nowrap; vertical-align: middle; font-size: .55em; background: var(--alerta); color: #1a1300; border-radius: 999px; padding: .1em .6em; margin-left: .5em; }

/* pares para ligar: o lugar mostra o outro lado */
.cartoes-slot.com-rotulo { grid-template-columns: minmax(0, 42%) 1fr; }
.rotulo-par { font-weight: 800; display: flex; justify-content: space-between; gap: 6px; align-items: center; padding: 0 4px; overflow-wrap: anywhere; min-width: 0; }
.rotulo-par i { font-style: normal; color: var(--acento); }
/* marcar na imagem */
.marcar-itens { display: flex; flex-wrap: wrap; gap: 8px; }
.marcar-item { min-height: 44px; border-radius: 999px; border: 2px solid var(--linha); background: var(--fundo-2); color: var(--texto); font: 600 .95rem var(--fonte); padding: 4px 12px 4px 4px; display: inline-flex; gap: 6px; align-items: center; }
.marcar-item .n, .marcar-pino span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cor, var(--acento)); color: #1a0d00; font-weight: 900; }
.marcar-item.ativo { border-color: var(--acento-2); background: rgba(61,220,255,.12); }
.marcar-item.feito { opacity: .7; }
.marcar-foto { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #000; touch-action: manipulation; }
.marcar-foto img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; pointer-events: none; }
.marcar-pino { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.marcar-pino span { width: 34px; height: 34px; border: 3px solid #fff; }
.marcar-pino.selecionado span { outline: 3px solid var(--acento-2); }

/* ---------- tipos novos: corrida, memória, cruzadas, quiz que faz pensar, análise de imagem ---------- */
.corrida-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 8px 0; font-weight: 700; }
.corrida-item h3 { margin: 6px 0 10px; } .corrente-de { font-weight: 700; background: var(--fundo-2); border-left: 4px solid var(--acento); padding: 8px 12px; border-radius: 8px; }
.corrida-alts { display: grid; gap: 10px; }
.corrida-alt { min-height: 58px; border-radius: 14px; border: 2px solid var(--linha); background: linear-gradient(180deg, #24304b, #1b2439); color: var(--texto); font: 700 1.05rem var(--fonte); text-align: left; padding: 10px 14px; box-shadow: 0 4px 0 #0c111d; cursor: pointer; }
.corrida-alt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #0c111d; }
.corrida-alt.ativo { border-color: var(--acento); }
.conf-botoes { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.conf-botoes .btn { min-height: 60px; padding: 0 6px; font-size: .9rem; }
.pu-lista { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.pu { min-height: 46px; border-radius: 999px; border: 2px solid #f3bf0a; background: rgba(243,191,10,.12); color: var(--texto); font: 700 .95rem var(--fonte); padding: 0 14px; display: inline-flex; gap: 6px; align-items: center; }
.feed-pu { display: grid; gap: 2px; margin: 6px 0; color: #f3bf0a; }
.flash { animation: flash .6s ease-out; } @keyframes flash { from { transform: scale(1.03); } to { transform: none; } }
.direcoes { display: grid; gap: 10px; margin-bottom: 10px; }
.direcao-linha { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-weight: 700; }
.direcao-botoes { display: flex; gap: 6px; }
.direcao { width: 54px; height: 54px; border-radius: 12px; border: 2px solid var(--linha); background: var(--fundo-2); color: var(--texto); font: 900 1.4rem var(--fonte-titulo); }
.direcao.ativo { border-color: var(--acento); background: #2a1d12; }
.memoria { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin: 10px 0; }   /* minmax(0): texto longo não alarga o tabuleiro além do cartão */
.carta { min-width: 0; hyphens: auto; -webkit-hyphens: auto; aspect-ratio: 3 / 4; border-radius: 12px; border: 2px solid var(--linha); background: linear-gradient(135deg, #2b3a5c, #1b2439); color: var(--texto); font: 700 .9rem var(--fonte); padding: 4px; overflow-wrap: break-word; display: grid; place-items: center; box-shadow: 0 4px 0 #0c111d; }
.carta .verso { font-family: var(--fonte-titulo); font-weight: 900; opacity: .5; }
.carta.aberta { background: linear-gradient(180deg, #fffaf0, #efe4cf); color: #1b1b1b; }
.carta.achada { border-color: var(--cor, #3ddc84); box-shadow: 0 0 0 3px var(--cor, #3ddc84) inset; }
.carta.errada { border-color: var(--erro); }
.cruz-grade { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 2px; max-width: 100%; margin: 10px 0; }
.cruz-cel, .cruz-vazio { aspect-ratio: 1; }
.cruz-cel { background: #fffaf0; color: #1b1b1b; border-radius: 3px; position: relative; display: grid; place-items: center; font: 900 clamp(10px, 3.4vw, 18px) var(--fonte-titulo); }
.cruz-cel small { position: absolute; top: 1px; left: 2px; font: 700 clamp(7px, 1.8vw, 10px) var(--fonte); color: #6b5b3e; }
.cruz-cel.cheia { background: #d9f7e5; }
.dicas { display: grid; gap: 10px; }
.dica { background: var(--fundo-2); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.dica.feita { opacity: .7; }
.dica-resp { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dica-resp input { text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.dist { display: grid; gap: 6px; margin: 8px 0; }
.dist-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; gap: 8px; align-items: center; }
.dist-barra { height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.dist-barra i { display: block; height: 100%; background: var(--acento-2); }
.cenario { background: var(--fundo-2); border-left: 6px solid var(--acento-2); padding: 12px 14px; border-radius: 12px; font-size: 1.08rem; }
.cenario.final.bom { border-color: var(--ok); } .cenario.final.ruim { border-color: var(--erro); } .cenario.final.neutro { border-color: var(--alerta); }
.analise-img { display: block; width: 100%; border-radius: 12px; margin: 8px 0; }
.modelo-3d { display: block; width: 100%; height: 340px; background: #000; border-radius: 12px; }
/* telão */
.telao .telao-midia-caixa { display: flex; justify-content: center; min-height: 0; }
.telao .telao-midia { max-height: 42vh; max-width: 100%; border-radius: 12px; }
.telao .telao-midia-caixa.pequena .telao-midia { max-height: 30vh; }
.telao .telao-3d { width: 60vw; height: 42vh; background: #000; border-radius: 12px; }
.telao .telao-feed { display: grid; gap: .2em; color: #f3bf0a; text-align: center; font-size: .9em; }
.telao .telao-memoria { width: min(70vw, 95vh); margin: 0 auto; gap: .4em; }
.telao .telao-memoria .carta { font-size: .7em; aspect-ratio: 5 / 3; }
.telao .telao-cruz { max-width: min(60vh, 50vw); margin: 0 auto; }
.telao .telao-cruz .cruz-cel { font-size: 1.1em; } .telao .telao-cruz .cruz-cel small { font-size: .5em; }
.telao .cruz-final { display: grid; grid-template-columns: auto 1fr; gap: 1.2em; align-items: start; }
.telao .cruz-dicas { font-size: .75em; columns: 2; margin: 0; padding: 0; list-style: none; }
.telao .explicacao li.certa { color: var(--ok); font-weight: 800; }
.telao .quem-marcou { margin-left: .5em; display: inline-flex; gap: .2em; vertical-align: middle; }
.telao .pares-telao { display: grid; grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); gap: .5em; }
.telao .pares-telao > div { display: flex; gap: .4em; align-items: center; }
.telao .trecho { display: inline-flex; gap: .3em; align-items: center; padding: .3em; border: 3px solid var(--cor); border-radius: 14px; }
.telao .caminhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: .6em; }
.telao .caminho { background: var(--cartao); border-top: 6px solid var(--cor); border-radius: var(--raio); padding: .6em .8em; font-size: .85em; }
.telao .caminho .desfecho { margin-left: auto; font-size: .8em; padding: .1em .6em; border-radius: 999px; background: var(--alerta); color: #1a1300; }
.telao .caminho.bom .desfecho { background: var(--ok); } .telao .caminho.ruim .desfecho { background: var(--erro); }
.telao .observacoes { display: grid; grid-template-columns: auto 1fr; gap: 1em; align-items: start; }
.telao .telao-marcar { margin: 0 auto; }
.marcar-esperado { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border: 3px dashed #fff; border-radius: 50%; background: rgba(255,138,61,.25); display: grid; place-items: center; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.telao .marcar-esperado { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border: 3px dashed #fff; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; font-weight: 900; }

/* ---------- Sequência (Genius): painel de laboratório, luz e som ---------- */
.seq-jogo {
  --painel: #0a141d; margin: .6em 0; padding: 12px; border-radius: 20px;
  background: var(--painel) linear-gradient(transparent 23px, rgba(61, 220, 255, .05) 24px) 0 0 / 100% 24px;
  border: 1px solid #1d3344; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.seq-visor {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center;
  padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; background: #050b10; border: 1px solid #16303f;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #7fe7ff;
}
.seq-visor small { display: block; font-size: .62rem; letter-spacing: .14em; color: #4f8aa0; }
.seq-visor strong { font-size: 1.5rem; line-height: 1; text-shadow: 0 0 8px rgba(127, 231, 255, .55); font-variant-numeric: tabular-nums; }
.seq-msg { justify-self: center; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: #a9c6d2; text-align: center; }
.seq-jogo.sua-vez .seq-msg { color: var(--ok); text-shadow: 0 0 10px rgba(77, 255, 176, .5); }
.seq-som { background: none; border: 1px solid #1d3344; color: #a9c6d2; border-radius: 10px; min-width: 44px; min-height: 44px; font-size: 1.15rem; cursor: pointer; }
.seq-painel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seq-btn {
  --cor: #2dd4bf; position: relative; min-height: clamp(96px, 28vw, 170px); padding: 10px; border-radius: 16px; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--cor) 45%, transparent);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cor) 16%, #0b1720) 0%, #08121a 75%);
  color: color-mix(in srgb, var(--cor) 55%, #dfe9ee); font: 700 clamp(1rem, 4.4vw, 1.45rem)/1.15 var(--fonte-titulo);
  overflow-wrap: anywhere; hyphens: auto; touch-action: manipulation;
  transition: background 70ms, box-shadow 70ms, color 70ms, transform 70ms, border-color 70ms;
}
.seq-btn::after { content: ''; position: absolute; top: 9px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--cor) 40%, #1a2a33); }
.seq-btn.aceso {
  background: radial-gradient(100% 100% at 50% 40%, #fff 0%, var(--cor) 38%, color-mix(in srgb, var(--cor) 70%, #000) 100%);
  color: #04131a; border-color: var(--cor); transform: scale(1.025);
  box-shadow: 0 0 14px var(--cor), 0 0 42px color-mix(in srgb, var(--cor) 70%, transparent), 0 0 90px color-mix(in srgb, var(--cor) 35%, transparent), inset 0 0 18px rgba(255, 255, 255, .6);
}
.seq-btn.aceso::after { background: #fff; box-shadow: 0 0 8px #fff; }
.seq-btn.errado { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro), 0 0 30px rgba(255, 107, 107, .6); }
.seq-btn:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 3px; }
.seq-painel[data-n="6"] .seq-btn { min-height: clamp(78px, 21vw, 130px); font-size: clamp(.92rem, 3.8vw, 1.25rem); }
.seq-jogo:not(.sua-vez) .seq-btn { cursor: default; }
.seq-acoes { display: grid; gap: 6px; margin-top: 12px; text-align: center; }
.seq-fim:empty { display: none; }
.seq-fim { margin-top: 10px; padding-top: 10px; border-top: 1px solid #16303f; }
.seq-resultado { font-family: var(--fonte-titulo); font-size: 1.1rem; margin: 0 0 .3em; text-align: center; }
.seq-resultado strong { font-size: 2.2rem; color: #7fe7ff; text-shadow: 0 0 10px rgba(127, 231, 255, .5); }
.seq-recorde { display: inline-block; margin-left: .6em; padding: 2px 10px; border-radius: 99px; background: var(--alerta); color: #1a1400; font-size: .85rem; font-weight: 800; vertical-align: middle; }
.seq-defs { margin: .4em 0 0; display: grid; gap: 2px; }
.seq-defs dt { font-weight: 700; margin-top: .4em; }
.seq-defs dd { margin: 0; color: var(--texto-2); font-size: .95rem; }
.seq-rodape { text-align: center; margin-top: .4em; }
@media (prefers-reduced-motion: reduce) { .seq-btn, .seq-btn.aceso { transition: none; transform: none; } }
/* telão */
.telao .seq-ranking { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: .3em .8em; width: min(100%, 46em); grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
.telao .seq-ranking:has(li:nth-child(-n+4):last-child) { grid-template-columns: 1fr; width: min(100%, 26em); }
.telao .seq-ranking li { display: grid; grid-template-columns: 2.2em auto 1fr auto; gap: .5em; align-items: center; padding: .15em .7em; font-size: .95em; border-radius: 12px; background: var(--cartao); border-left: 6px solid var(--cor); }
.telao .seq-ranking li:first-child { background: color-mix(in srgb, var(--alerta) 14%, var(--cartao)); }
.telao .seq-ranking .pos { font-weight: 800; text-align: center; }
.telao .seq-ranking strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.3em; color: #7fe7ff; }
.telao .seq-ranking.final { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; width: 100%; }
.telao .seq-final { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 1em; align-items: start; }
.telao .seq-final-tit { font-weight: 700; margin: 0 0 .4em; text-align: center; }
.telao .seq-final .seq-defs dd { font-size: .85em; }
.seq-enfeite { display: flex; justify-content: center; gap: .5em; }
.seq-enfeite i { width: 2.2em; height: 1.1em; border-radius: 6px; background: color-mix(in srgb, var(--cor) 25%, #0a141d); border: 1px solid color-mix(in srgb, var(--cor) 50%, transparent); animation: seq-pisca 3.2s calc(var(--k) * .8s) infinite; }
@keyframes seq-pisca { 0%, 12%, 100% { background: color-mix(in srgb, var(--cor) 25%, #0a141d); box-shadow: none; } 4%, 8% { background: var(--cor); box-shadow: 0 0 14px var(--cor), 0 0 34px var(--cor); } }
@media (prefers-reduced-motion: reduce) { .seq-enfeite i { animation: none; } }

/* ---------- Rodapé de autoria e licença (todas as páginas) ---------- */
.rodape-licenca { margin: 32px auto 18px; padding: 0 16px; text-align: center; font-size: .82rem; color: var(--texto-2); line-height: 1.5; }
.rodape-licenca a { color: var(--texto-2); text-decoration: underline; text-underline-offset: 2px; }
.rodape-licenca a:hover { color: var(--acento-2); }

/* ---------- Ícones próprios (js/icones.js) ---------- */
.ico { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.ico svg { width: 100%; height: 100%; }
.btn .ico { width: 1.2em; height: 1.2em; }
.ilu { display: inline-flex; width: var(--tam, 56px); height: var(--tam, 56px); flex: none; }
.ilu svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }

/* ---------- Navegação: do planejamento à execução ---------- */
.fluxo { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 10px 0 4px; margin: 0 0 4px; scrollbar-width: none; }
.fluxo::-webkit-scrollbar { display: none; }
.fluxo a, .fluxo button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha);
  background: linear-gradient(180deg, #1f2a42, #182033); color: var(--texto-2); font: 700 .9rem var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 #0c111d; }
.fluxo a:hover, .fluxo button:hover { color: var(--texto); border-color: var(--acento-2); }
.fluxo a[aria-current=page] { color: #042028; background: linear-gradient(180deg, #8af0ff, #3ddcff); border-color: transparent; box-shadow: 0 3px 0 #0b6a80; }
.fluxo .sep { color: var(--linha); font-weight: 800; flex: none; }
.fluxo .num { font-family: var(--fonte-titulo); font-weight: 900; opacity: .75; }
.fluxo .inicio { padding: 0 12px; }
.fluxo .inicio .rot { display: none; }
@media (min-width: 560px) { .fluxo .inicio .rot { display: inline; } }
/* voltar / anterior / próxima */
.passos-nav { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.passos-nav .btn { min-height: 48px; }
.passos-nav .btn .rot-curto { display: none; }
.passos-nav .proximo { margin-left: auto; }
@media (max-width: 480px) { .passos-nav .btn { flex: 1; } .passos-nav .btn .rot-longo { display: none; } .passos-nav .btn .rot-curto { display: inline; } }
.voltar-link { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); text-decoration: none; font-weight: 700; min-height: 44px; }
.voltar-link:hover { color: var(--texto); }
.marca-link { color: inherit; text-decoration: none; }
/* abas da condução com ícone */
.abas button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.abas button .ico { width: 1.25em; height: 1.25em; }
@media (max-width: 420px) { .abas button { padding: 0 6px; font-size: .86rem; gap: 4px; } }
/* etapa com ilustração */
.etapa-cab { display: flex; align-items: center; gap: 12px; }
.etapa-cab > div { min-width: 0; flex: 1; }
.tarefa-ilu { float: right; margin: -4px 0 6px 10px; }

/* ---------- Textos justificados (parágrafos de leitura; títulos, botões e telão ficam como estão) ---------- */
:where(body:not(.telao)) :where(.cartao, .licenca, dialog, .plan-editor) :where(p, dd) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.telao .titulo-etapa { display: flex; align-items: center; gap: .4em; }
.telao .titulo-etapa .ilu { width: 1.35em; height: 1.35em; }
.telao .cartao .fluxo { margin-bottom: 10px; }
#status .linha-botoes { align-items: center; }
#status .ilu svg { filter: none; }
.embutida .fluxo, .embutida .voltar-link, .embutida .passos-nav a[href] { display: none !important; }
img.ilu { width: var(--tam, 56px); height: var(--tam, 56px); object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
img.ico { width: 1.25em; height: 1.25em; object-fit: contain; }
.telao .titulo-etapa img.ilu { width: 1.35em; height: 1.35em; }

/* Condução no celular: com as abas da aula visíveis, a barra de fluxo some (uma navegação só). */
@media (max-width: 720px) { body:has(#abas:not([hidden])) .fluxo { display: none; } }

/* Condução: roteiro da aula em uma linha por etapa */
.roteiro { margin: 12px 0 16px; padding-left: 1.4em; display: grid; gap: 6px; }
.roteiro small { display: block; }
.aviso-rede { position: sticky; top: 0; z-index: 30; }

/* Escala padronizada: celular */
.escala-legenda { display: grid; gap: 2px; font-size: .85rem; color: var(--texto-2); margin: 8px 0 12px; }
.escala-itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: item; }
.escala-item { padding: 12px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--linha); counter-increment: item; }
.escala-item > p { margin: 0 0 10px; text-align: left; font-weight: 600; }
.escala-item > p::before { content: counter(item) ". "; color: var(--texto-2); }
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.likert-op { min-height: 48px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao-2); color: var(--texto); font: 800 1.1rem var(--fonte); cursor: pointer; }
.likert-op.ativo { background: var(--acento); color: #1a0d00; border-color: transparent; }
.likert-op:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 2px; }
.escala-contador { text-align: center; margin: 12px 0 6px; }
.perfil { display: grid; gap: 12px; margin-top: 8px; }
.perfil-linha { display: flex; justify-content: space-between; align-items: baseline; }
.perfil-linha span { font: 800 1.2rem var(--fonte-titulo); color: var(--acento); }
.perfil-barra { height: 12px; border-radius: 999px; background: var(--fundo-2); border: 1px solid var(--linha); overflow: hidden; margin: 4px 0; }
.perfil-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--acento-2), var(--acento)); }
.perfil small, .perfil p { text-align: left; }

/* Jogo econômico: celular */
.jogo-campos { display: grid; gap: 16px; margin: 12px 0; }
.jogo-campo { display: grid; gap: 8px; margin: 0; }
.jogo-campo output { font: 800 1.3rem var(--fonte-titulo); color: var(--acento); }
.jogo-campo input[type=range] { width: 100%; min-height: 44px; accent-color: var(--acento); }
.jogo-ganho { display: grid; justify-items: center; padding: 16px; border-radius: 16px; background: var(--fundo-2); margin: 10px 0; }
.jogo-ganho strong { font: 900 3rem var(--fonte-titulo); color: var(--acento); }

/* Telão: escala e jogo (só a turma) */
.telao-contagem { text-align: center; font-size: 1.6em; margin: .2em 0; }
.telao-contagem strong { font-size: 1.6em; color: var(--acento); }
.escala-telao { display: grid; gap: .7em; max-width: 1000px; margin: 0 auto; width: 100%; }
.escala-telao-linha { display: grid; grid-template-columns: minmax(8em, 14em) 1fr 3em; gap: 1em; align-items: center; font-size: 1.25em; }
.escala-telao-trilho { position: relative; height: 1.1em; border-radius: 999px; background: var(--fundo-2); border: 1px solid var(--linha); }
.escala-telao-trilho .faixa { position: absolute; top: 0; bottom: 0; background: rgba(61, 220, 255, .35); border-radius: 999px; }
.escala-telao-trilho .ponto { position: absolute; top: 50%; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--acento); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--fundo); }
.jogo-telao { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5em; align-items: end; }
.hist-barras { display: flex; align-items: flex-end; gap: 4px; height: clamp(110px, 22vh, 200px); }
.hist-col { flex: 1; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; height: 100%; }
.hist-col i { display: block; width: 100%; background: var(--acento); border-radius: 6px 6px 0 0; min-height: 2px; }
.hist-col span, .hist-col small { font-size: .85em; color: var(--texto-2); }
.hist-eixo { text-align: center; margin: .4em 0 0; color: var(--texto-2); }
.relacao-telao .dispersao { width: 100%; max-height: clamp(130px, 26vh, 240px); color: var(--texto-2); }
.relacao-telao p { margin: .3em 0 0; }
/* A aula concentra a atenção na etapa atual. */
.roteiro-docente { margin: 12px 0; padding: 12px; border-radius: 10px; border-left: 3px solid var(--acento-2); background: var(--fundo-2); }
.roteiro-docente summary { cursor: pointer; font-weight: 700; }
.roteiro-docente p { margin: 10px 0 0; }
.etapa-concluida { opacity: .86; }
.etapa-concluida > summary { cursor: pointer; }
.grupo-atencao summary { cursor: pointer; padding: 7px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grupo-atencao details[open] { border-left: 3px solid var(--acento-2); padding-left: 10px; }
.controles-tempo small { flex-basis: 100%; }
.barra-etapa { position: fixed; z-index: 15; bottom: 0; left: 50%; transform: translateX(-50%); width: min(720px, 100%); padding: 8px 16px max(12px, env(safe-area-inset-bottom)); background: rgba(11,15,23,.97); border-top: 1px solid var(--linha); box-shadow: 0 -8px 20px #0004; display: grid; gap: 6px; }
.barra-etapa small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-etapa .btn { width: 100%; }
body.com-barra-etapa .pagina { padding-bottom: 150px; }
.sinal-conexao { font-size: .78rem; margin: 6px 0; color: var(--texto-2); }
.sinal-conexao[data-tipo=alerta] { color: var(--alerta); }
.fechar-aula { border-top: 1px solid var(--linha); margin-top: 16px; padding-top: 16px; }
.fechar-aula .btn { width: 100%; margin-top: 10px; }
@media(max-width:520px) { .topo .status { font-size: .72rem; max-width: 62%; } .abas button { padding: 0 8px; font-size: .85rem; } .controles-tempo .btn { flex: 1; padding: 0 10px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
/* Percurso docente: passos visíveis e imagens 3D fornecidas pelo titular. */
.guia-selo { display:block; color:var(--acento-2,var(--acento)); font-size:.72rem; font-weight:800; letter-spacing:.12em; line-height:1.5; }
.ico.em-3d { object-fit:contain; background:transparent; border-radius:0; padding:0; box-sizing:border-box; width:1.15em; height:1.15em; flex-shrink:0; filter:none; }
.ilu.em-3d { object-fit:contain; background:transparent; border-radius:0; padding:0; box-sizing:border-box; filter:drop-shadow(0 4px 6px #0003); }
.ilu.em-3d, .ico.em-3d { max-width:100%; }
.hero { padding:26px 0 8px; }
.hero .marca { font-size:2rem; }
.docente-abertura { margin:14px 0 18px; }
.docente-abertura h2 { font-size:clamp(1.65rem,3vw,2.25rem); margin:6px 0; }
.docente-abertura p { color:var(--texto-2); margin:6px 0; }
.jornada-docente { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; }
.jornada-card { position:relative; padding:24px; border:1px solid var(--linha); border-radius:24px; background:linear-gradient(145deg,var(--cartao),var(--fundo-2)); box-shadow:inset 0 1px #ffffff1c,0 12px 24px #0002; display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0; }
.jornada-card.principal { border:2px solid var(--acento); box-shadow:inset 0 1px #ffffff25,0 0 28px #ff8a3d14; }
.numero-passo { position:absolute; right:18px; top:18px; display:grid; place-items:center; width:40px; height:40px; color:var(--fundo); background:var(--acento); border-radius:50%; box-shadow:inset 0 2px 2px #fff7,0 3px 0 #0004; font:900 1.25rem var(--fonte-titulo,var(--fonte)); }
.jornada-card h3 { font-size:1.4rem; margin:0 0 8px; }
.jornada-card p { color:var(--texto-2); line-height:1.5; margin:0; }
.jornada-card .btn { width:100%; margin-top:auto; white-space:normal; text-align:center; min-height:52px; }
.jornada-card small { color:var(--texto-2); }
.atalho-discreto { color:var(--texto-2); text-underline-offset:3px; font-size:.88rem; }
.apoios-inicio { margin:22px 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.apoio-turma { grid-column:1/-1; display:flex; align-items:center; gap:18px; }
.apoio-turma > div { flex:1; }
.apoio-turma h2,.apoio-card h2 { font-size:1.15rem; margin:4px 0; }
.apoio-turma p,.apoio-card p { color:var(--texto-2); margin:4px 0 12px; }
.apoio-card { display:flex; gap:16px; align-items:flex-start; }
.fluxo { flex-wrap:wrap; }
@media(max-width:820px) { .jornada-docente { grid-template-columns:1fr; }.jornada-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; padding:20px; }.jornada-card > [data-ilu] { grid-column:1; }.jornada-card > div { grid-column:2; padding-right:24px; }.jornada-card > .btn,.jornada-card > small,.jornada-card > .atalho-discreto { grid-column:1/-1; }.jornada-card .ilu { --tam:72px!important; }.numero-passo { width:30px;height:30px;top:10px;right:10px;font-size:1rem; }.jornada-card h3 { font-size:1.18rem; }.jornada-card p { font-size:.95rem; }.apoios-inicio { grid-template-columns:1fr; }.apoio-turma { flex-wrap:wrap; }.apoio-turma > .btn { width:100%; }.hero .marca { font-size:1.6rem; }.hero p { font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.pagina:has(.boas-vindas-docente) { max-width:1160px; }
.boas-vindas-docente p,.apoios-inicio p,.escolhas-autoria p { text-align:left; }

.jornada-card > [data-ilu] .ilu,.jornada-card.principal > [data-ilu] .ilu { --tam:72px!important; }
.btn .ico.em-3d { width:1.2em; height:1.2em; }
/* Sequência única do professor, do login à aplicação em sala. */
.numero-fluxo { display:inline-grid; place-items:center; width:28px; height:28px; min-width:28px; border-radius:50%; background:var(--acento); color:var(--fundo); font:900 .95rem var(--fonte); box-shadow:inset 0 2px 2px #fff6,0 2px 0 #0004; flex-shrink:0; vertical-align:middle; margin-right:7px; }
.btn .numero-fluxo { width:25px; height:25px; min-width:25px; font-size:.85rem; }
.btn.primario .numero-fluxo { background:var(--fundo); color:var(--acento); }
.percurso-docente { margin:18px 0; padding:16px; border:1px solid var(--linha); border-radius:18px; background:var(--fundo-2); }
.percurso-docente h2 { font-size:1.1rem; margin:0 0 5px; }
.percurso-docente > p { margin:4px 0 14px; color:var(--texto-2); font-size:.92rem; text-align:left; }
.percurso-lista { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:0; }
.percurso-lista li { display:flex; align-items:flex-start; gap:3px; min-width:0; padding:10px; border:1px solid var(--linha); border-radius:12px; }
.percurso-lista li[aria-current=step] { border-color:var(--acento); background:#ff8a3d0d; }
.percurso-lista strong { display:block; font-size:.88rem; line-height:1.3; }
.percurso-lista small { display:block; margin-top:5px; color:var(--texto-2); font-size:.77rem; line-height:1.35; }
.percurso-docente.compacto { padding:10px 14px; margin:12px 0; }
.percurso-docente summary { cursor:pointer; display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-height:34px; }
.percurso-docente summary .numero-fluxo { margin-right:4px; }
.percurso-ver { font-size:.78rem; color:var(--texto-2); text-decoration:underline; text-underline-offset:3px; margin-left:auto; }
.percurso-docente.compacto .percurso-lista { margin-top:12px; }
.plan-login .percurso-docente h2 { font-size:1rem; }
@media(min-width:1100px) { .boas-vindas-docente .percurso-lista { grid-template-columns:repeat(8,minmax(0,1fr)); }.boas-vindas-docente .percurso-lista li { flex-direction:column;gap:8px; } }
@media(max-width:640px) { .percurso-lista { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.percurso-lista li { padding:8px; }.percurso-lista .numero-fluxo { width:24px;height:24px;min-width:24px;font-size:.8rem; }.percurso-lista small { font-size:.73rem; }.percurso-ver { margin-left:37px; }.percurso-docente.compacto { padding:9px; }.percurso-docente summary > strong { font-size:.87rem; } }

/* ---------- Ícones grandes (padrão docente) ----------
   Os 3D vêm recortados e com o mesmo tamanho óptico (assets/ilustracoes/3d), então podem crescer sem desalinhar.
   No menu, cada ícone ocupa a coluna inteira (até 104 px). Nas três portas do início, até 200 px. */
img.ico.em-3d, .btn img.ico.em-3d, .abas button img.ico.em-3d, .plan-nav button img.ico.em-3d, .plan-acoes .btn img.ico.em-3d { width: 1.75em; height: 1.75em; margin-block: -.25em; }
.ico:not(.em-3d), .btn .ico:not(.em-3d) { width: 1.4em; height: 1.4em; }
img.ilu.em-3d { width: min(calc(var(--tam, 56px) * 1.35), 140px) !important; height: min(calc(var(--tam, 56px) * 1.35), 140px) !important; }
/* Menu do professor: ícone em cima do nome, no maior tamanho que as 6 colunas aguentam. */
nav.fluxo[data-fluxo-docente] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: stretch; overflow: visible; padding: 8px 0 12px; }
nav.fluxo[data-fluxo-docente] > a,
nav.fluxo[data-fluxo-docente] > button { flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px; min-width: 0; min-height: 0; padding: 8px 2px 7px; border-radius: 16px; white-space: normal; text-align: center; font-size: clamp(.62rem, 2.5vw, .82rem); line-height: 1.05; }
nav.fluxo[data-fluxo-docente] .rot,
nav.fluxo[data-fluxo-docente] .inicio .rot { display: block; }
nav.fluxo[data-fluxo-docente] .inicio { padding: 8px 2px 7px; }
nav.fluxo[data-fluxo-docente] > a > .ico,
nav.fluxo[data-fluxo-docente] > button > .ico { width: min(100%, 104px) !important; height: auto !important; aspect-ratio: 1; max-height: 104px; margin: 0 !important; }
.acao-professor > img.ilu.em-3d { width: min(42vw, 200px) !important; height: min(42vw, 200px) !important; }
@media (max-width: 759px) { .acao-professor > img.ilu.em-3d { width: min(28vw, 128px) !important; height: min(28vw, 128px) !important; } }
@media (max-height: 520px) {
  nav.fluxo[data-fluxo-docente] > a > .ico,
  nav.fluxo[data-fluxo-docente] > button > .ico { max-height: 44px; width: min(100%, 44px) !important; }
}
.telao .titulo-etapa img.ilu.em-3d { width: 1.8em !important; height: 1.8em !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Entrar na sala (participante) ---------- */
.entrada-sala { max-width: 560px; margin: 24px auto; display: grid; gap: 10px; }
.entrada-cab { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.entrada-cab h1 { margin: 0; font-size: 2rem; }
.entrada-sala label { font-size: 1.1rem; font-weight: 700; margin-top: 6px; }
.entrada-sala .campo-codigo { text-align: center; font: 800 2.2rem/1 var(--fonte-titulo); letter-spacing: .32em; padding-left: calc(12px + .32em); min-height: 72px; border-color: var(--acento-2); }
.entrada-sala .campo-codigo::placeholder { letter-spacing: .05em; font: 600 1.15rem var(--fonte); }
.entrada-sala .campo-nome { font-size: 1.3rem; min-height: 64px; }
.entrada-sala #entrar { min-height: 62px; font-size: 1.2rem; }
.sala-escolhida { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--raio); border: 2px solid var(--acento-2); background: #3ddcff14; font-size: 1.15rem; }
.sala-escolhida strong { font: 800 1.6rem var(--fonte-titulo); letter-spacing: .12em; }
.sala-escolhida .btn { margin-left: auto; }
.entrada-privacidade { font-size: .92rem; margin: 4px 0 0; }

/* ---------- Imagem ampliada (celular): tela cheia, zoom por botões e arraste ---------- */
.analise-midia { display: grid; gap: 8px; justify-items: center; }
.analise-img.ampliavel { cursor: zoom-in; }
.ampliar-botao { justify-self: center; min-height: 44px; }
dialog.ampliar-imagem { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--texto); display: grid; grid-template-rows: auto 1fr; }
dialog.ampliar-imagem::backdrop { background: #000c; }
.ampliar-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--fundo-2); }
.ampliar-zoom { display: flex; gap: 6px; }
.ampliar-zoom .btn[aria-pressed=true] { background: var(--acento-2); color: #04121a; }
.ampliar-barra .btn { min-height: 44px; min-width: 52px; font-size: 1rem; }
.ampliar-area { overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; display: block; }
.ampliar-area img { width: 100%; height: auto; max-width: none; display: block; margin: auto; background: #fff; }

/* 26/10/2026 · palavras longas quebram com hífen, na sílaba, e não no meio ("Vasoconstriçã/o") */
.cartao-arr, .rotulo-par, .fragmento div, .seq-btn { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
/* Telão: o tabuleiro da memória cabe na altura da TV (cartas 5:3; a grade ocupa no máximo ~36% da altura) */
.telao .telao-memoria { width: min(70vw, calc(36vh * var(--n, 4) * 5 / (3 * var(--l, 3)))); }

/* ---------- Aplicar em sala: conferência e começar ---------- */
.btn.grande { min-height: 60px; font-size: 1.15rem; }
.conferencia-grupos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.comecar-aula h2 { margin: 0 0 10px; }
.salas-abertas { border: 2px solid var(--alerta, #f5b14c); }
.salas-abertas h2 { display: flex; align-items: center; gap: 8px; }
.sim-modo .etiqueta { font: 700 .72rem var(--fonte); letter-spacing: .06em; text-transform: uppercase; background: var(--acento); color: #1a0d00; border-radius: 999px; padding: 2px 10px; }