/* App de gravação · identidade da Físico Turista School (16/10/2026).
   Tokens copiados de marca/identidade-visual.css (fonte da verdade): navy de fundo, azul elétrico
   como destaque (1 por tela), ciano pra metadado, verde só no "gravado"/check.
   Archivo 800 em caixa alta nos títulos, JetBrains Mono nos metadados, Anton pra número isolado. */
:root {
  --navy-950: #060F26;
  --navy-900: #0A1A3A;
  --navy-800: #0C1E45;
  --navy-700: #0F2553;
  --navy-200: #9DB1D2;
  --navy-100: #CFD9EC;
  --blue-700: #1B469E;
  --blue-600: #2257C2;
  --blue-500: #2D6BE0;
  --blue-300: #5E97F4;
  --cyan-400: #5BB8FF;
  --white: #FFFFFF;
  --bone: #F4F7FB;
  --success: #3DCFA8;
  --danger: #E5484D;
  --warning: #F5A524;
  --font-display: 'Archivo', Arial, sans-serif;
  --font-impact: 'Anton', sans-serif;
  --font-sans: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 9999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--navy-900); color: var(--white); font-family: var(--font-sans); }
a { color: var(--navy-100); }
button { font-family: inherit; cursor: pointer; }
kbd { font-family: var(--font-mono); font-size: .85em; background: var(--navy-700); color: var(--navy-100); padding: 1px 6px; border-radius: var(--r-sm); }

/* ---------- peças comuns ---------- */
.marca { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.marca img { width: 30px; height: 30px; }
.marca span { color: var(--navy-200); font-weight: 500; text-transform: none; }
.rotulo { font-family: var(--font-mono); font-size: 12px; color: var(--navy-200); }
.chip { border: 1px solid var(--navy-700); background: transparent; color: var(--navy-100); padding: 7px 12px; border-radius: var(--r-md); font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.btn { border: 0; border-radius: var(--r-md); padding: 10px 16px; font-weight: 700; font-size: 15px; background: var(--blue-500); color: var(--white); text-decoration: none; }
.btn:hover { background: var(--blue-600); }
.btn.sec { background: transparent; border: 1px solid var(--navy-700); color: var(--navy-100); font-weight: 500; }
.btn.sec:hover { border-color: var(--navy-200); }
.btn.ok { background: var(--success); color: var(--navy-900); }
.btn.alerta { background: var(--warning); color: var(--navy-900); }

.pecas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.peca { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); background: var(--navy-900); }
.peca .cod { font-family: var(--font-mono); font-weight: 500; }
.peca .txt { color: var(--navy-100); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peca .txt small { color: var(--navy-200); display: block; font-size: 12px; }
/* status: única exceção do pill (tag de status, como manda o guia) */
.status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); border: 0; }
.status.a-gravar { background: var(--navy-700); color: var(--navy-100); }
.status.gravado { background: var(--success); color: var(--navy-900); }
.status.regravar { background: var(--warning); color: var(--navy-900); }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--navy-200); font-size: 14px; }
.briefing { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 12px 0; font-size: 14px; }
.briefing dt { color: var(--navy-200); }
.briefing dd { margin: 0; color: var(--navy-100); }
.corpo-texto { white-space: pre-wrap; color: var(--navy-100); font-size: 15px; line-height: 1.6; background: var(--navy-900); padding: 14px; border-radius: var(--r-md); }
.refs { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.vazio { color: var(--navy-200); text-align: center; padding: 64px 16px; line-height: 1.6; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.login::before { content: ''; position: absolute; right: -10vw; bottom: -10vw; width: 60vw; max-width: 640px; aspect-ratio: 1; background: url('/atomo.svg') center / contain no-repeat; opacity: .06; }
.login form { position: relative; background: var(--navy-800); border: 1px solid var(--navy-700); padding: 32px; border-radius: var(--r-lg); width: min(380px, 100%); display: grid; gap: 14px; }
.login input { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--navy-700); background: var(--navy-900); color: var(--white); font-size: 16px; font-family: var(--font-sans); }
.login input:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.erro { color: var(--danger); font-size: 14px; min-height: 1em; }

/* ---------- teleprompter ---------- */
body.prompter { background: var(--navy-950); overflow: hidden; }
.tp-barra { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; background: rgba(10, 26, 58, .97); border-bottom: 1px solid var(--navy-700); transition: opacity .25s; }
body.rodando .tp-barra, body.rodando .tp-info { opacity: 0; pointer-events: none; }
.tp-barra label { font-size: 13px; color: var(--navy-200); display: flex; align-items: center; gap: 6px; }
.tp-barra input[type=range] { width: 100px; accent-color: var(--blue-500); }
.tp-progresso { display: flex; align-items: center; gap: 12px; }
#fila-txt { font-family: var(--font-mono); font-size: 12px; color: var(--cyan-400); white-space: nowrap; }
.tp-ajustes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tp-ajustes[hidden] { display: none; }
.tp-pecas { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-pecas button { font-family: var(--font-mono); font-size: 13px; padding: 5px 9px; border-radius: var(--r-sm); border: 1px solid var(--navy-700); background: transparent; color: var(--navy-100); }
.tp-pecas button.atual { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.tp-pecas button.gravado::after { content: ' ✓'; color: var(--success); }
.tp-pecas button.regravar::after { content: ' ↺'; color: var(--warning); }
.tp-espaco { flex: 1; }
.tp-info { position: fixed; left: 16px; bottom: 16px; z-index: 9; max-width: 460px; font-size: 13px; color: var(--navy-200);
  background: rgba(10, 26, 58, .94); border: 1px solid var(--navy-700); padding: 10px 12px; border-radius: var(--r-md); transition: opacity .25s; }
.tp-atalhos { font-size: 12px; color: var(--navy-200); }

.tp-palco { position: fixed; inset: 0; overflow: hidden; z-index: 1; }
.tp-palco.espelho { transform: scaleX(-1); }
.tp-guia { position: fixed; left: 0; right: 0; z-index: 0; pointer-events: none; background: rgba(45, 107, 224, .10);
  border-top: 1px solid rgba(45, 107, 224, .4); border-bottom: 1px solid rgba(45, 107, 224, .4); }
.tp-guia::before { content: '▶'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--blue-500); font-size: 20px; }
.tp-texto { margin: 0 auto; color: var(--white); font-weight: 500; line-height: 1.35; padding-bottom: 100vh; }
.tp-texto p { margin: 0 0 1.1em; cursor: pointer; transition: color .15s; }
.tp-texto p.atual { color: #FFD43B; }
.tp-texto p.item { margin-bottom: .5em; padding-left: 1.1em; position: relative; }
.tp-texto p.item::before { content: '•'; position: absolute; left: .2em; color: var(--blue-500); }
.tp-texto p + p.item { margin-top: -.5em; }
.tp-texto .marca-prova { color: var(--success); font-weight: 700; }
.tp-texto .marca-pausa { color: var(--warning); }
.tp-texto .marca-cena { color: var(--navy-200); font-style: italic; font-weight: 400; }
.tp-titulo { font-family: var(--font-mono); color: var(--cyan-400); font-size: .32em; font-weight: 500; display: block; margin-bottom: .6em; letter-spacing: .04em; text-transform: uppercase; }

.tp-contagem { position: fixed; inset: 0; display: none; place-items: center; font-family: var(--font-impact); font-size: 30vh; color: var(--blue-500); z-index: 20; background: rgba(6, 15, 38, .7); }
.tp-contagem.on { display: grid; }

.tp-fim { position: fixed; inset: auto 0 0 0; z-index: 15; display: none; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 18px; background: rgba(10, 26, 58, .98); border-top: 1px solid var(--navy-700); }
.tp-fim.on { display: flex; }
.tp-fim input { flex: 1; min-width: 240px; max-width: 480px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--navy-700); background: var(--navy-900); color: var(--white); font-size: 15px; font-family: var(--font-sans); }

/* ficha antes do take e resumo do fim */
.tp-ficha, .tp-resumo { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(6, 15, 38, .85); }
.tp-ficha[hidden], .tp-resumo[hidden] { display: none; }
.tp-ficha-cartao { width: min(640px, 100%); background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--r-lg); padding: 32px 36px; box-shadow: 0 24px 60px rgba(2, 8, 22, .6); }
.tp-ficha-cod { font-family: var(--font-mono); font-size: 12px; color: var(--cyan-400); text-transform: uppercase; letter-spacing: .04em; }
.tp-ficha-cartao h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: 34px; line-height: 1.02; margin: 10px 0 22px; }
.tp-ficha-cartao dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 18px; margin: 0 0 26px; font-size: 15px; line-height: 1.5; }
.tp-ficha-cartao dt { color: var(--navy-200); }
.tp-ficha-cartao dd { margin: 0; color: var(--navy-100); }
.tp-ficha-cartao .btn { padding: 13px 24px; font-size: 16px; display: inline-flex; gap: 10px; align-items: center; }
.tp-ficha-cartao .btn kbd { background: rgba(255, 255, 255, .18); color: var(--white); }
#resumo-txt { color: var(--navy-100); font-size: 17px; line-height: 1.6; margin: 0 0 26px; }
@media (max-width: 640px) { .tp-ficha-cartao dl { grid-template-columns: 1fr; } }

/* pergunta livre */
.tp-livre { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 11vh 8vw 20vh; overflow: auto; z-index: 1; }
.tp-livre[hidden] { display: none; }
.tp-livre.espelho { transform: scaleX(-1); }
.tp-livre-obj { font-family: var(--font-mono); font-size: 12px; color: var(--cyan-400); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 18px; }
.tp-livre-pergunta { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; margin: 0; }
.tp-livre-relogio { font-family: var(--font-mono); font-size: 32px; color: var(--navy-200); margin: 30px 0 22px; font-variant-numeric: tabular-nums; }
body.rodando .tp-livre-relogio { color: var(--success); }
.tp-livre-apoio { max-width: 640px; text-align: left; font-size: 18px; line-height: 1.6; color: var(--navy-100); }
.tp-livre-apoio summary { text-align: center; }
.tp-livre-apoio ul { margin: 14px 0 0; padding-left: 22px; }
.tp-livre-fechar { margin-top: 34px; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--navy-200); }
.tp-livre-fechar .rotulo-fechar { display: block; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--cyan-400); margin-bottom: 6px; }
.tp-livre-fechar p { margin: 0 0 8px; }
.tp-livre-fechar .ponte { color: var(--white); }

/* link do bruto no resumo do fim da sessão (24/10/2026) */
.tp-bruto { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 22px; text-align: left; }
.tp-bruto label { grid-column: 1 / -1; font-size: 14px; color: var(--navy-100); }
.tp-bruto input { background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--r-md); color: var(--white); padding: 10px 12px; font: inherit; min-width: 0; }
#bruto-st { grid-column: 1 / -1; font-size: 13px; color: var(--success); min-height: 18px; }