/* Simulador de calibracao — tema escuro de apresentacao (projetor/TV), celular claro como o app. */
:root {
  --fundo: #0b1416;
  --painel: rgba(17, 32, 35, 0.97);
  --painel-solido: #111d20;
  --borda: rgba(255, 255, 255, 0.10);
  --texto: #e8f0ee;
  --texto-2: #b7cbc5;
  --verde: #10b981;
  --verde-escuro: #059669;
  --ambar: #f59e0b;
  --vermelho: #ef4444;
  --azul: #60a5fa;
  --raio: 14px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* app (claro) */
  --app-fundo: #f9fafb;
  --app-texto: #1f2937;
  --app-cinza: #6b7280;
  --app-borda: #e5e7eb;
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.4; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid var(--borda); background: #0d1a1c;
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca img { border-radius: 9px; }
.marca b { display: block; font-size: 16px; letter-spacing: 0.2px; }
.marca span { display: block; font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modos { display: flex; background: rgba(255,255,255,0.06); border-radius: 999px; padding: 3px; }
.modos button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-size: 14px; color: var(--texto-2); }
.modos button[aria-pressed="true"] { background: var(--verde-escuro); color: #fff; font-weight: 600; }
.icone-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--borda); border-radius: 10px; width: 38px; height: 38px; font-size: 18px; }

/* ---------- estrutura ---------- */
.principal { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
.palco-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#palco { position: absolute; inset: 0; }
#palco canvas { display: block; width: 100%; height: 100%; }
#rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rotulo3d {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  background: #111827; color: #fde68a; font-weight: 700; font-size: 15px;
  padding: 3px 9px; border-radius: 8px; border: 1px solid #f5c518;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); font-variant-numeric: tabular-nums;
}
.rotulo3d.azul { color: #bfdbfe; border-color: #60a5fa; }
.rotulo3d.verde { color: #a7f3d0; border-color: #34d399; }
.rodape { font-size: 11px; color: #6b807b; padding: 5px 18px; border-top: 1px solid var(--borda); background: #0d1a1c; }

body[data-modo="guiado"] .so-livre, body[data-modo="livre"] .so-guiado { display: none !important; }

.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); backdrop-filter: blur(8px); }
.cartao-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--texto-2); margin: 4px 0 10px; }
.cartao-titulo small { text-transform: none; letter-spacing: 0; font-weight: 400; }

.btn { border-radius: 11px; padding: 10px 16px; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.btn.primario { background: var(--verde-escuro); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--verde); }
.btn.secundario { background: rgba(255,255,255,0.07); border-color: var(--borda); }
.btn.secundario:hover:not(:disabled) { background: rgba(255,255,255,0.12); }

/* ---------- monitor da cabine ---------- */
.monitor {
  position: absolute; top: 14px; left: 14px; width: 318px;
  background: linear-gradient(180deg, #1c2326, #0f1416); border: 2px solid #2d363a; border-radius: 12px;
  padding: 10px 12px; box-shadow: var(--sombra); font-family: "Consolas", "Roboto Mono", monospace;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.monitor.destaque { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(16,185,129,0.25), var(--sombra); }
.monitor.mudando b[data-v="largura"], .monitor.mudando b[data-v="desvio"] { color: #fde68a; }
.mon-topo { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; color: #c0cdc8; margin-bottom: 8px; }
.mon-sinal { color: var(--verde); }
.mon-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mon-grade div { background: #142723; border: 1px solid #354940; border-radius: 4px; padding: 5px 8px; box-shadow: inset 0 2px 3px #081612; }
.mon-grade small { display: block; font-size: 9px; color: #c0cdc8; letter-spacing: 0.6px; }
.mon-grade b { font-size: 18px; color: #a7f3d0; font-variant-numeric: tabular-nums; }
.mon-piloto { font-size: 13px !important; }

/* ---------- narrador ---------- */
.narrador {
  position: absolute; left: 16px; bottom: 16px; width: min(640px, calc(100% - 32px));
  background: var(--painel); border: 1px solid var(--borda); border-radius: 18px; padding: 14px 18px 16px;
  box-shadow: var(--sombra); border-left: 3px solid #57b7a7;
}
.narr-topo { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-2); }
.atalhos { opacity: 0.7; }
.narr-barra { height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; margin: 8px 0 10px; overflow: hidden; }
.narr-barra i { display: block; height: 100%; background: var(--verde); transition: width 0.4s; }
.narrador h1 { font-family: "Bahnschrift", "Segoe UI", sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 8px; line-height: 1.25; text-wrap: balance; }
.narrador p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: #cfdcd8; }
.narrador p b { color: #fff; }
.narr-botoes { display: flex; gap: 10px; justify-content: flex-end; }
.narrador.ocupado #btn-avancar { animation: pulsar 1.6s infinite; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.18); } }
.tag { padding: 1px 7px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.tag.azul { background: rgba(96,165,250,0.2); color: #93c5fd; }
.tag.verde { background: rgba(52,211,153,0.2); color: #6ee7b7; }
.tag.vermelho { background: rgba(239,68,68,0.22); color: #fca5a5; }
.tag.laranja { background: rgba(245,158,11,0.22); color: #fcd34d; }

.grafico-guiado { position: absolute; top: 14px; right: 14px; width: 340px; padding: 10px 12px; }

/* ---------- graficos ---------- */
.grafico { width: 100%; height: auto; display: block; }
.grafico .faixa-tolerancia { fill: rgba(16,185,129,0.14); }
.grafico .zero { stroke: rgba(255,255,255,0.25); stroke-dasharray: 3 3; }
.grafico .eixo { fill: var(--texto-2); font-size: 11px; }
.grafico .serie { fill: none; stroke-width: 2.5; }
.grafico .serie.largura, .grafico .ponto.largura { stroke: #fbbf24; }
.grafico .serie.desvio, .grafico .ponto.desvio { stroke: #60a5fa; }
.grafico .ponto { fill: var(--painel-solido); stroke-width: 2.5; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin-top: 4px; }
.legenda span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.l-largura::before { background: #fbbf24; }
.l-desvio::before { background: #60a5fa; }
.l-tol::before { background: rgba(16,185,129,0.5); height: 9px !important; }
.grafico-vazio { color: var(--texto-2); font-size: 13px; padding: 20px 0; text-align: center; }

/* ---------- resumo final ---------- */
.resumo { position: absolute; top: 14px; right: 14px; width: min(760px, calc(100% - 360px)); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 18px; }
.custo-entradas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custo-entradas label { font-size: 11.5px; color: var(--texto-2); display: grid; gap: 3px; }
.custo-entradas input, .gravar input, .ctl select {
  background: #0a1214; border: 1px solid var(--borda); color: var(--texto); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; width: 100%;
}
.custo-saida { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.custo-col { border-radius: 10px; padding: 8px 10px; }
.custo-col small { display: block; font-size: 11px; color: var(--texto-2); }
.custo-col b { font-size: 20px; display: block; font-variant-numeric: tabular-nums; }
.custo-col span { font-size: 12px; color: var(--texto-2); }
.custo-col.ruim { background: rgba(239,68,68,0.12); }
.custo-col.ruim b { color: #fca5a5; }
.custo-col.bom { background: rgba(16,185,129,0.12); }
.custo-col.bom b { color: #6ee7b7; }
.custo-nota { grid-column: 1 / -1; font-size: 11.5px; color: var(--texto-2); margin: 2px 0 0; line-height: 1.45; }
.resumo-botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }

/* ---------- bancada livre ---------- */
.bancada { position: absolute; left: 14px; top: 162px; width: 330px; max-height: calc(100% - 162px - 130px); display: flex; flex-direction: column; padding: 8px 12px 12px; }
.abas { display: flex; gap: 4px; margin-bottom: 8px; }
.abas button { flex: 1; border: 0; background: rgba(255,255,255,0.05); padding: 7px; border-radius: 8px; font-size: 13px; color: var(--texto-2); }
.abas button[data-aba="nada"] { flex: 0 0 36px; }
.abas button[aria-selected="true"] { background: rgba(16,185,129,0.2); color: #fff; font-weight: 600; }
.painel { overflow: auto; min-height: 0; padding-right: 4px; }
.ctl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; margin-bottom: 10px; align-items: center; }
.ctl output { font-variant-numeric: tabular-nums; color: #a7f3d0; font-weight: 600; }
.ctl input[type="range"], .ctl select { grid-column: 1 / -1; width: 100%; accent-color: var(--verde); }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 5px 0; color: #cfdcd8; }
.chk input { accent-color: var(--ambar); margin-top: 2px; }
.chk.forte { margin-top: 14px; color: #fff; }
.chk.forte input { accent-color: var(--verde); }
#btn-sortear { width: 100%; margin-top: 10px; }
.tabela-testes { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.tabela-testes th { text-align: left; color: var(--texto-2); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--borda); }
.tabela-testes td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tabela-testes tr.ok td { color: #6ee7b7; }
.verdade { margin-top: 12px; font-size: 12px; color: var(--texto-2); }
.verdade summary { cursor: pointer; }

.acoes { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--painel); border: 1px solid var(--borda); border-radius: 16px; padding: 10px 14px; box-shadow: var(--sombra); backdrop-filter: blur(10px); }
.estado-livre { font-size: 13px; color: var(--texto-2); margin-bottom: 8px; }
.acoes-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gravar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 8px; border: 1px dashed var(--borda); border-radius: 12px; }
.gravar.apagado { opacity: 0.45; }
.gravar label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.gravar input { width: 92px; }
#btn-nova { margin-left: auto; }

/* ---------- carregando ---------- */
.carregando { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--fundo); color: var(--texto-2); transition: opacity 0.6s; z-index: 5; }
.carregando.sumir { opacity: 0; pointer-events: none; }
.girando { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--verde); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- celular ---------- */
.lateral { border-left: 1px solid var(--borda); background: radial-gradient(ellipse at 50% 30%, #143033, #0b1416 70%); display: grid; place-items: center; padding: 14px; min-height: 0; overflow: hidden; }
.celular { height: 100%; max-height: 760px; display: grid; place-items: center; width: 100%; }
.celular-moldura {
  --alt: min(100%, 740px);
  height: var(--alt); aspect-ratio: 9 / 19; max-width: 100%;
  background: #0a0a0a; border-radius: 44px; padding: 11px; position: relative;
  box-shadow: 0 0 0 2px #64716f, 0 0 0 5px #192222, 0 24px 48px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
.celular-entalhe { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #0a0a0a; border-radius: 14px; z-index: 3; }
.celular-status { position: absolute; top: 11px; left: 11px; right: 11px; height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; font-size: 12px; font-weight: 600; color: #fff; z-index: 2; border-radius: 34px 34px 0 0; }
.celular-tela { flex: 1; background: var(--app-fundo); border-radius: 34px; overflow: hidden; color: var(--app-texto); display: flex; flex-direction: column; min-height: 0; }
.app-tela { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app-tela.entrar { animation: entrar 0.35s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateX(14px); } }
.app-barra { background: var(--verde-escuro); color: #fff; padding: 46px 18px 14px; flex-shrink: 0; }
.app-barra-titulo { font-size: 18px; font-weight: 700; }
.app-barra-sub { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.app-corpo { padding: 14px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.app-rotulo { font-size: 11px; font-weight: 700; color: #9ca3af; letter-spacing: 1px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ajuda { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #e5e7eb; color: #374151; font-size: 11px; }
.app-cartao { background: #fff; border: 1px solid var(--app-borda); border-radius: 16px; padding: 12px 14px; }
.app-historico { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.app-calc { display: flex; gap: 12px; align-items: center; opacity: 0.55; }
.app-calc.ativa { opacity: 1; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.app-calc b { display: block; font-size: 14.5px; }
.app-calc small { color: var(--app-cinza); font-size: 12px; }
.app-calc-icone { width: 40px; height: 40px; border-radius: 12px; background: #ecfdf5; color: var(--verde-escuro); display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.app-campo { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--app-borda); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.app-campo span { color: var(--app-cinza); }
.app-campo b { font-variant-numeric: tabular-nums; }
.app-nota { font-size: 12px; color: var(--app-cinza); margin: 0; line-height: 1.4; }
.app-texto { font-size: 14px; line-height: 1.45; margin: 0 0 4px; }
.app-passo { width: 24px; height: 24px; border-radius: 50%; background: var(--verde-escuro); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.desenho-passadas { width: 100%; height: auto; background: #fff; border: 1px solid var(--app-borda); border-radius: 14px; padding: 6px; }
.desenho-passadas .linhas line { stroke: #16a34a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 4; }
.desenho-passadas .emenda { fill: none; stroke: #d1d5db; stroke-dasharray: 3 3; }
.desenho-passadas .emenda-ativa { fill: rgba(239,68,68,0.12); stroke: #ef4444; stroke-width: 1.6; }
.desenho-passadas .seta { font-size: 8px; fill: #9ca3af; }
.app-input { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: var(--app-fundo); border: 1.5px solid var(--app-borda); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.app-input span { color: var(--app-cinza); }
.app-input b { font-size: 17px; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.app-input em { font-style: normal; color: var(--app-cinza); }
.app-input.foco { border-color: var(--verde-escuro); background: #fff; }
.app-input.cheio { background: #fff; animation: digitou 0.4s; }
@keyframes digitou { from { background: #d1fae5; } }
.cursor { display: inline-block; width: 2px; height: 18px; background: var(--verde-escuro); vertical-align: middle; animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.app-botao { background: var(--verde-escuro); color: #fff; text-align: center; font-weight: 700; padding: 13px; border-radius: 16px; font-size: 14px; margin-top: auto; }
.app-botao.apagado { background: #d1d5db; }
.app-medias { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-medias div { background: #fff; border: 1px solid var(--app-borda); border-radius: 12px; padding: 8px 10px; }
.app-medias small { display: block; font-size: 11px; color: var(--app-cinza); }
.app-medias b { font-size: 17px; font-variant-numeric: tabular-nums; }
.app-erro { display: flex; justify-content: space-between; align-items: center; border-radius: 12px; padding: 11px 12px; font-size: 14px; }
.app-erro b { font-size: 19px; font-variant-numeric: tabular-nums; }
.app-erro.ruim { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.app-erro.bom { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.app-selo { background: #059669; color: #fff; font-weight: 800; text-align: center; padding: 10px; border-radius: 14px; font-size: 16px; animation: selo 0.5s ease-out; }
.app-selo.grande { font-size: 19px; padding: 16px; }
@keyframes selo { from { transform: scale(0.85); opacity: 0; } }
.app-alerta { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4; }
.app-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; border-radius: 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4; }
.app-ajuste { background: #fff; border: 1px solid var(--app-borda); border-radius: 14px; padding: 11px 13px; }
.app-ajuste small { color: var(--app-cinza); font-size: 12px; }
.app-ajuste div { font-size: 15px; margin: 2px 0; font-variant-numeric: tabular-nums; }
.app-ajuste s { color: #9ca3af; }
.app-ajuste em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--verde-escuro); }
.app-linha-teste { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; font-size: 13px; padding: 6px 4px; border-bottom: 1px solid var(--app-borda); font-variant-numeric: tabular-nums; }
.app-check { font-size: 13px; padding: 4px 0; }
.app-joinha { text-align: center; font-size: 13px; color: var(--app-cinza); margin-top: auto; }
.app-joinha span { font-size: 22px; margin-left: 10px; }

/* ---------- app real no celular ---------- */
.celular-tela:has(.app-real-palco) { padding-top: 38px; background: #059669; }
.app-real-palco { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.app-real-palco iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.app-livre .app-real-palco iframe { pointer-events: auto; }
.app-real-carregando { position: absolute; inset: 0; display: grid; place-items: center; color: #6b7280; font-size: 14px; background: #f9fafb; }
.dedo { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(17, 24, 39, 0.28); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none; z-index: 2; }
.dedo.tocando { animation: dedo 0.9s ease-out; }
@keyframes dedo {
  0% { opacity: 0; transform: scale(1.5); }
  25% { opacity: 1; transform: scale(1); }
  45% { transform: scale(0.82); }
  100% { opacity: 0; transform: scale(1.2); }
}
.aviso-app { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px));
  background: #7f1d1d; color: #fff; border: 1px solid #ef4444; border-radius: 12px; padding: 10px 14px; font-size: 14px;
  box-shadow: var(--sombra); z-index: 6; }
#versao-app { color: #9fb3ae; margin-right: 6px; }

/* ---------- celular em foco (sobe para o meio da tela na hora de digitar) ---------- */
.foco-fundo { position: fixed; inset: 0; background: rgba(4, 10, 12, 0.55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.35s; z-index: 35; }
body.celular-em-foco .foco-fundo { opacity: 1; }
body.celular-em-foco .narrador { z-index: 45; }
.celular.focado { position: fixed; z-index: 40; left: 50%; top: 50%; width: auto; max-height: none;
  height: min(88vh, 860px); transform: translate(-50%, -50%); animation: celular-sobe 0.5s cubic-bezier(.2,.8,.25,1); }
.celular.focado .celular-moldura { --alt: 100%; box-shadow: 0 0 0 2px #2a2f33, 0 40px 90px rgba(0,0,0,0.7); }
.celular.descendo { animation: celular-desce 0.36s ease-in forwards; }
@keyframes celular-sobe { from { transform: translate(-50%, -20%) scale(0.72); opacity: 0.4; } }
@keyframes celular-desce { to { transform: translate(-50%, -25%) scale(0.75); opacity: 0; } }
@media (min-width: 901px) { .celular.focado { left: calc(50% + 150px); } }
.legenda-celular { position: absolute; left: 50%; top: -14px; transform: translate(-50%, -100%); white-space: nowrap;
  background: #111827; color: #fde68a; border: 1px solid #f5c518; border-radius: 10px; padding: 6px 14px;
  font-weight: 700; font-size: 17px; box-shadow: var(--sombra); }
.celular:not(.focado) .legenda-celular { display: none; }
.celular { position: relative; }

/* teclado numerico do Android, por cima do app */
.teclado { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #e8eaed; padding: 8px 6px 14px;
  display: grid; gap: 7px; transform: translateY(105%); transition: transform 0.28s ease; pointer-events: none; }
.teclado.aberto { transform: translateY(0); }
.teclado-linha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.teclado span { background: #fff; border-radius: 9px; text-align: center; padding: 11px 0; font-size: 19px; color: #202124;
  box-shadow: 0 1px 0 rgba(0,0,0,0.18); font-family: Roboto, "Segoe UI", sans-serif; }
.teclado span.tecla-acao { background: #0b8a5f; color: #fff; }
.teclado span.apertada { animation: tecla 0.28s ease-out; }
@keyframes tecla { 0% { background: #9ad7bd; transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- telas medias ---------- */
@media (max-width: 1500px) {
  .bancada { max-height: calc(100% - 162px - 180px); }
}
@media (max-width: 1280px) {
  .principal { grid-template-columns: 1fr 340px; }
  .resumo { grid-template-columns: 1fr; width: 380px; max-height: calc(100% - 200px); overflow: auto; }
}

/* ---------- celular / tablet em pe ---------- */
@media (max-width: 900px) {
  body { overflow: auto; height: auto; display: block; }
  .topo { flex-wrap: wrap; padding: 8px 16px; }
  .modos { order: 3; width: 100%; }
  .modos button { flex: 1; padding: 7px 8px; font-size: 13px; }
  .principal { display: block; }
  .palco-wrap { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; overflow: visible; }
  #palco { position: relative; height: 56vh; margin: 0 -16px; }
  #rotulos { inset: 0 0 auto 0; height: 56vh; }
  .monitor { top: 8px; left: 8px; width: 250px; padding: 7px 9px; }
  .mon-grade b { font-size: 14px; }
  .narrador, .acoes, .bancada, .resumo, .grafico-guiado { position: static; width: auto; max-height: none; }
  .resumo { grid-template-columns: 1fr; }
  .atalhos { display: none; }
  .narrador h1 { font-size: 19px; }
  .carregando { height: 56vh; inset: 0 0 auto 0; }
  .lateral { border-left: 0; padding: 8px 16px 24px; }
  .celular { max-height: 640px; height: 640px; }
  .celular-moldura { --alt: 620px; }
  /* Celular em foco no telefone: o app em cima, o narrador fixo embaixo (Avancar sempre a mao). */
  .celular.focado { top: 8px; height: calc(100dvh - 268px); transform: translateX(-50%); }
  @keyframes celular-sobe { from { transform: translate(-50%, 30%) scale(0.8); opacity: 0.4; } }
  @keyframes celular-desce { to { transform: translate(-50%, 30%) scale(0.8); opacity: 0; } }
  body.celular-em-foco .narrador { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto;
    max-height: 250px; overflow: auto; z-index: 45; padding: 10px 14px 12px; }
  body.celular-em-foco .narrador p { font-size: 14px; margin-bottom: 8px; }
  .legenda-celular { top: 6px; transform: translate(-50%, 0); font-size: 15px; z-index: 4; }
}

/* =====================================================================================
   APRENDA A CALIBRAR — palco de video: so a cena, so o app, ou so o cartao
   ===================================================================================== */
.tut-cartao, .tut-controles, .tut-pausa, .tut-fim { display: none; }
body[data-modo="tutorial"] { overflow: hidden; height: 100dvh; }
body[data-modo="tutorial"] .topo,
body[data-modo="tutorial"] .rodape,
body[data-modo="tutorial"] .so-guiado,
body[data-modo="tutorial"] .so-livre,
body[data-modo="tutorial"] .grafico-guiado,
body[data-modo="tutorial"] .resumo { display: none !important; }
body[data-modo="tutorial"] .principal { display: block; height: 100dvh; }
body[data-modo="tutorial"] .palco-wrap { position: fixed; inset: 0; padding: 0; overflow: hidden; display: block; }
body[data-modo="tutorial"] #palco,
body[data-modo="tutorial"] #rotulos { position: absolute; inset: 0; height: auto; margin: 0; }
body[data-modo="tutorial"] .lateral { position: fixed; inset: 0; pointer-events: none; background: none; border: 0; padding: 0; }
/* position: fixed cria camada propria: sem z-index, o celular ficaria ATRAS do fundo escuro. */
body[data-modo="tutorial"][data-palco="app"] .lateral { z-index: 40; }
body[data-modo="tutorial"]:not([data-palco="app"]) .celular { visibility: hidden; }
body[data-modo="tutorial"] .monitor { display: none; }
body[data-modo="tutorial"][data-palco="campo"] .monitor { display: block; }

/* App: o celular grande, no meio, e a cena apagada atras */
body[data-modo="tutorial"][data-palco="app"] .celular.focado { left: 50%; height: min(90dvh, 900px); }
body[data-modo="tutorial"] .foco-fundo { background: rgba(4, 10, 12, 0.82); }
body[data-modo="tutorial"] .narrador { display: none !important; }

/* Cartao de explicacao: texto grande, cena borrada atras */
body[data-modo="tutorial"] .tut-cartao:not([hidden]) {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, rgba(15, 50, 46, 0.86), rgba(5, 12, 14, 0.94));
  backdrop-filter: blur(6px);
}
.tut-cartao-caixa { max-width: 980px; width: 100%; }
.tut-cartao.entrar .tut-cartao-caixa { animation: tut-entra 0.6s cubic-bezier(.2,.8,.25,1); }
@keyframes tut-entra { from { opacity: 0; transform: translateY(18px); } }
.tut-marca { display: flex; align-items: center; gap: 12px; color: #a7f3d0; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 28px; }
.tut-marca img { border-radius: 10px; }
.tut-cap { color: #6ee7b7; font-size: clamp(14px, 1.6vw, 18px); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.tut-cartao h2 { font-family: "Bahnschrift", "Segoe UI", sans-serif; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.12; margin: 0 0 22px; color: #fff; text-wrap: balance; }
.tut-cartao p { font-size: clamp(19px, 2.3vw, 30px); line-height: 1.5; margin: 0 0 34px; color: #d6e5e0; text-wrap: pretty; }
.tut-tempo { height: 4px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden; max-width: 320px; }
.tut-tempo i { display: block; height: 100%; width: 0; background: var(--verde); }

/* Holofote dentro do app (o resto escurece) */
.holofote { position: absolute; z-index: 4; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px #fbbf24, 0 0 0 9999px rgba(0, 0, 0, 0.62); transition: opacity 0.3s; }
.holofote.visivel { opacity: 1; animation: holofote-pulsa 1.4s ease-in-out infinite; }
@keyframes holofote-pulsa { 50% { box-shadow: 0 0 0 6px #fbbf24, 0 0 0 9999px rgba(0, 0, 0, 0.62); } }
.holofote span { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap;
  background: #fbbf24; color: #1f2937; font-weight: 800; font-size: 15px; padding: 6px 12px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.holofote.etiqueta-em-cima span { top: auto; bottom: calc(100% + 12px); }

/* Controles de video: aparecem ao mexer, somem sozinhos */
body[data-modo="tutorial"] .tut-controles {
  display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 18px 22px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
body.tutorial-controles .tut-controles, body.tutorial-pausado .tut-controles, body.tutorial-fim .tut-controles { opacity: 1; pointer-events: auto; }
.tut-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 17px; flex-shrink: 0; }
.tut-meio { flex: 1; min-width: 0; }
.tut-titulo { color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.tut-capitulos { display: flex; gap: 4px; }
.tut-capitulo { position: relative; height: 22px; border: 0; padding: 0; background: none; min-width: 8px; }
.tut-capitulo i { position: absolute; left: 0; right: 0; top: 9px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); }
.tut-capitulo.feito i { background: var(--verde); }
.tut-capitulo.atual i { background: linear-gradient(90deg, var(--verde), #a7f3d0); }
.tut-capitulo span { display: none; }
.tut-capitulo:hover span { display: block; position: absolute; bottom: 26px; left: 0; white-space: nowrap; background: #111827; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; }

body.tutorial-pausado .tut-pausa { display: grid; place-items: center; position: fixed; left: 50%; top: 50%; z-index: 55;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 40px; pointer-events: none; }
body.tutorial-fim .tut-fim { display: grid; place-items: center; gap: 18px; position: fixed; inset: 0; z-index: 58;
  background: rgba(5, 12, 14, 0.9); color: #fff; text-align: center; align-content: center; }
.tut-fim h2 { font-size: clamp(28px, 4vw, 48px); margin: 0; }

/* Em pe (celular, tablet): cartao e controles mais compactos */
@media (orientation: portrait) {
  body[data-modo="tutorial"][data-palco="app"] .celular.focado { top: 46%; height: min(80dvh, 820px); transform: translate(-50%, -50%); }
  .tut-marca { margin-bottom: 18px; }
  .tut-cartao h2 { font-size: clamp(28px, 7.5vw, 84px); }
  .tut-cartao p { font-size: clamp(18px, 4.6vw, 48px); }
  .tut-cap { font-size: clamp(14px, 3vw, 30px); }
  .tut-marca { font-size: clamp(14px, 2.6vw, 28px); }
  .tut-marca img { width: clamp(40px, 6vw, 72px); height: auto; }
  .tut-tempo { max-width: 60%; }
  .tut-fim h2 { font-size: clamp(28px, 8vw, 84px); }
  .tut-fim-sub { font-size: clamp(16px, 3.6vw, 36px); }
  .holofote span { font-size: clamp(15px, 2.4vw, 26px); }
  .legenda-celular { font-size: clamp(15px, 2.6vw, 28px); }
}
@media (max-width: 600px) {
  body[data-modo="tutorial"][data-palco="campo"] .monitor { transform: scale(0.62); transform-origin: 0 0; top: 10px; left: 10px; }
}

/* Grafico de convergencia no tutorial (so na cena de campo) */
body[data-modo="tutorial"][data-palco="campo"] .grafico-guiado.tut-grafico { display: block !important; top: 14px; right: 14px; }
@media (max-width: 600px) {
  body[data-modo="tutorial"][data-palco="campo"] .grafico-guiado.tut-grafico { left: 10px; right: 10px; top: auto; bottom: 18px; width: auto; }
}

/* Fim do tutorial com a marca; na gravacao, sem botao e sem cursor */
.tut-fim-logo { border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.tut-fim-sub { margin: -6px 0 6px; color: #a7f3d0; font-size: clamp(16px, 2vw, 22px); }
body.gravando, body.gravando * { cursor: none !important; }
body.gravando .tut-controles, body.gravando #tut-recomecar, body.gravando .tut-pausa { display: none !important; }

/* "Copie o monitor": o painel da cabine cresce para ser lido no video */
body[data-modo="tutorial"] .monitor { transition: transform 0.5s ease, box-shadow 0.3s, border-color 0.3s; transform-origin: 0 0; }
body[data-modo="tutorial"].monitor-em-foco .monitor { transform: scale(1.9); }
@media (max-width: 600px) { body[data-modo="tutorial"].monitor-em-foco .monitor { transform: scale(1.05); } }

/* Cartao: texto aparece palavra por palavra no ritmo de leitura */
.tut-palavra { opacity: 0; transition: opacity 0.22s ease; }
.tut-palavra.vista { opacity: 1; }

/* Botao de comecar o tutorial com som (o navegador exige um toque) */
.tut-assistir:not([hidden]) { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center;
  gap: 18px; border: 0; background: radial-gradient(ellipse at 50% 40%, rgba(15, 50, 46, 0.92), rgba(5, 12, 14, 0.97));
  color: #fff; font: inherit; cursor: pointer; padding: 24px; text-align: center; }
.tut-assistir img { border-radius: 18px; }
.tut-assistir strong { font-family: "Bahnschrift", "Segoe UI", sans-serif; font-size: clamp(24px, 4vw, 48px); max-width: 900px; }
.tut-assistir-btn { background: var(--verde-escuro); padding: 16px 30px; border-radius: 999px; font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: pulsar 1.8s infinite; }

/* Menu de capitulos na abertura do tutorial */
.tut-assistir:not([hidden]) { overflow: auto; align-content: center; }
.tut-assistir-btn { border: 0; color: #fff; cursor: pointer; font-family: inherit; }
.tut-menu { margin-top: 10px; max-width: 900px; }
.tut-menu-titulo { display: block; color: #9fb3ae; font-size: 14px; margin-bottom: 10px; }
.tut-menu-capitulos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tut-menu-capitulo { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: #e8f0ee; border-radius: 999px; padding: 8px 14px 8px 8px; font: inherit;
  font-size: 14px; cursor: pointer; }
.tut-menu-capitulo:hover { background: rgba(16,185,129,0.22); border-color: var(--verde); }
.tut-menu-capitulo span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16,185,129,0.3); font-size: 12px; font-weight: 700; }