/* Layout: central de operação para TV 16:9 — faixa de indicadores, fila crítica + agenda dos técnicos em linha do tempo, gráficos de apoio (POP e por hora), letreiro de finalizadas. Visual único escuro do Nuunes CRM. */
:root {
  --bg: #131116;
  --bg-2: #17141c;
  --panel: #1b1820;
  --panel-2: #221e28;
  --line: #2f2a37;
  --grid: #27222e;
  --fg: #efecf4;
  --muted: #aca5b8;
  --dim: #746c84;
  --accent: #a38bfa;
  --accent-forte: #7c5ce8;
  --ok: #7fe090;
  --agenda: #5cc8ff;
  --warn: #ff9f43;
  --crit: #ff4d5e;
  --novo: #ffd23f;
  --exec: #ffd23f;
  --novo-fg: #1c1433;
  --s-chegaram: #b88a1e;
  --s-finalizadas: #8f72ee;
  --display: "Poppins", "Segoe UI", Arial, sans-serif;
  --body: "Mona Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(13px, 0.86vw, 22px); height: 100%; }
body {
  height: 100%; margin: 0;
  background: radial-gradient(120% 80% at 70% -10%, #1f1a2b 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--fg); font-family: var(--body); font-size: 1rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow: hidden;
}
.app {
  height: 100%; display: grid; gap: 0.85rem; padding-block: 0.9rem;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  transition: transform 2s ease;
}
.num { font-variant-numeric: tabular-nums; }
h2 {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 0.6rem;
}
h2 small { font-family: var(--body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: 0.85rem; }
.panel { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.7rem; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* ---------- topo ---------- */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.logo {
  width: 2.8rem; height: 2.8rem; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-forte), #4b2fb8); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; flex: none;
}
.brand h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.01em; line-height: 1.05; }
.brand p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.tag { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--warn); color: var(--warn); padding: 0.05rem 0.4rem; border-radius: 4px; }
.clock { display: flex; align-items: center; gap: 1.1rem; }
.clock-txt { text-align: right; }
.clock strong { display: block; font-family: var(--display); font-weight: 600; font-size: 2.5rem; line-height: 1; }
.clock small { color: var(--muted); font-size: 0.85rem; display: inline-flex; gap: 0.45rem; align-items: center; white-space: nowrap; }
.live { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ok); font-weight: 600; }
.live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); } 100% { box-shadow: 0 0 0 0.55rem transparent; } }
.controls { display: flex; flex-direction: column; gap: 0.35rem; }
button {
  font: inherit; font-size: 0.75rem; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.6rem; cursor: pointer; white-space: nowrap;
}
button:hover { border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.precisa { background: var(--novo); color: var(--novo-fg); border-color: var(--novo); font-weight: 700; }

/* ---------- indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 0.75rem; }
.kpi {
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.75rem 0.95rem 0.6rem; display: grid; grid-template-rows: auto auto 1fr; gap: 0.15rem; min-width: 0; position: relative; overflow: hidden;
}
.kpi > span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.45rem; }
.kpi > span::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--c, var(--muted)); }
.kpi strong { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1.1; }
.kpi .sub { color: var(--muted); font-size: 0.82rem; display: flex; justify-content: space-between; align-items: end; gap: 0.5rem; min-width: 0; }
.kpi .sub em { font-style: normal; color: var(--fg); font-weight: 600; }
.spark { width: 46%; max-width: 8rem; height: 1.9rem; flex: none; }
.k-abertas { --c: var(--novo); }
.k-tecnico { --c: var(--ok); }
.k-agenda { --c: var(--agenda); }
.k-final { --c: var(--accent); }
.k-atraso { --c: var(--crit); }
.k-atraso.tem { border-color: color-mix(in srgb, var(--crit) 60%, var(--line)); background: color-mix(in srgb, var(--crit) 13%, var(--panel)); animation: alerta 1.8s ease-in-out infinite; }
.k-atraso.tem strong { color: var(--crit); }
@keyframes alerta { 50% { box-shadow: inset 0 0 0 1px var(--crit), 0 0 24px -6px var(--crit); } }
.k-prazo { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 1rem; }
.ring { width: 5.6rem; height: 5.6rem; }
.k-prazo .txt { display: grid; gap: 0.2rem; min-width: 0; }
.k-prazo .txt b { font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.k-prazo .txt small { color: var(--muted); font-size: 0.82rem; }

/* ---------- miolo ---------- */
.main { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 0; }

/* fila crítica */
.fila { display: flex; flex-direction: column; gap: 0.55rem; overflow: hidden; min-height: 0; }
.os {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.8rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center;
  animation: entra 0.5s ease both;
}
@keyframes entra { from { transform: translateY(-6px); opacity: 0.4; } }
.os .sev { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 8px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1rem; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.os h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os h3 span { color: var(--dim); font-weight: 500; font-size: 0.9rem; margin-right: 0.35rem; }
.os p { margin: 0; color: var(--muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os p b { color: var(--fg); font-weight: 500; }
.os p.end, .os p.obs, .os p.larga { grid-column: 2 / 4; }
.os p.ctr { color: var(--dim); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.os p.ctr b, .lin .id small b { color: var(--warn); font-weight: 600; }
.os p.end { color: var(--fg); opacity: 0.85; }
.os p.end::before { content: "⌖ "; color: var(--dim); }
.os p.obs { color: var(--dim); font-style: italic; }
.os .tempo { grid-row: span 2; text-align: right; }
.os .tempo strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--c); white-space: nowrap; }
.os .tempo small { color: var(--dim); font-size: 0.75rem; white-space: nowrap; }
.os .barra { grid-column: 2 / 4; height: 4px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.os .barra i { display: block; height: 100%; background: var(--c); border-radius: 2px; }
.os.late { border-color: color-mix(in srgb, var(--crit) 55%, var(--line)); background: color-mix(in srgb, var(--crit) 9%, var(--panel-2)); }
.os.nova { border-color: var(--novo); background: color-mix(in srgb, var(--novo) 11%, var(--panel-2)); animation: entra 0.5s ease both, piscaNova 1s ease-in-out infinite; }
@keyframes piscaNova { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--novo) 40%, transparent); } }
.badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px; padding: 0.05rem 0.4rem; vertical-align: 0.15em; margin-left: 0.4rem; }
.badge.nova { background: var(--novo); color: var(--novo-fg); }
.badge.pend { border: 1px solid var(--warn); color: var(--warn); }
.badge.exec { border: 1px solid var(--exec); color: var(--exec); }
.fila-rodape { color: var(--dim); font-size: 0.85rem; }

/* agenda dos técnicos */
.agenda { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.4rem; min-height: 0; }
.escala { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); }
.escala .horas { position: relative; height: 1.1rem; }
.escala .horas span { position: absolute; transform: translateX(-50%); color: var(--dim); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.linhas { position: relative; display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.linha { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); align-items: center; border-top: 1px solid var(--grid); min-height: 0; }
.linha:last-child { border-bottom: 1px solid var(--grid); }
.quem { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding-right: 0.6rem; }
.av { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 0.8rem; flex: none; }
.quem strong { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ct { flex: none; font-size: 0.74rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ct.sem { color: var(--dim); }
.pista { position: relative; height: 100%; }
.pista .h { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
/* o que já passou fica escurecido; o resto do dia fica em destaque */
.pista .passado { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--bg) 22%, transparent); pointer-events: none; z-index: 1; }
.pista { overflow: visible; }
.pista .corte { position: absolute; inset: 0; overflow: hidden; }
.bloco { position: absolute; border-radius: 4px; overflow: hidden; }
/* blocos com horário e, se couber, o motivo */
.bloco.ag, .bloco.atrasou, .bloco.feito {
  top: 12%; bottom: 12%; min-width: 3.4rem; z-index: 1;
  container-type: inline-size; padding: 0 0.5rem;
  white-space: nowrap; color: var(--bg);
  box-shadow: 0 0 0 2px var(--panel);
}
.linhas.compacta .bloco .l2 { display: none; }
.linhas.compacta .bloco.ag, .linhas.compacta .bloco.atrasou, .linhas.compacta .bloco.feito { top: 10%; bottom: 10%; }
.linhas.compacta .av { width: 1.4rem; height: 1.4rem; font-size: 0.7rem; }
.bloco .in { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0.08rem; min-width: 0; }
.bloco .l1 { display: flex; gap: 0.3rem; font-size: 0.76rem; font-weight: 700; line-height: 1.15; min-width: 0; }
.bloco .l2 { font-size: 0.7rem; font-weight: 500; line-height: 1.15; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 5.5rem) { .bloco .l2 { display: none; } }
/* finalizadas: roxo mais calmo, texto claro */
.bloco.feito { background: color-mix(in srgb, var(--accent) 30%, var(--panel-2)); color: var(--fg); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); z-index: 0; }
.bloco.feito .ok { color: var(--accent); }
.bloco.ag { background: var(--agenda); }
.bloco.atrasou { background: var(--warn); }
.bloco .tp { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@container (max-width: 6.5rem) { .bloco .tp { display: none; } }
.agora { position: absolute; top: -1.3rem; bottom: 0; width: 2px; background: var(--novo); z-index: 2; pointer-events: none; }
.agora span { position: absolute; top: -0.1rem; left: 50%; transform: translateX(-50%); background: var(--novo); color: var(--novo-fg); font-size: 0.68rem; font-weight: 700; padding: 0 0.35rem; border-radius: 3px; white-space: nowrap; }
.legenda { display: flex; gap: 1.1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.78rem; }
.legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda i { width: 0.85rem; height: 0.55rem; border-radius: 2px; background: var(--c); }

/* POP */
.pops { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.55rem; min-height: 0; overflow: hidden; padding-top: 0.2rem; }
.pops .resto, .fila .resto { color: var(--dim); font-size: 0.82rem; }
.pop { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 2.5rem; gap: 0.7rem; align-items: center; }
.pop span { font-size: 0.88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop .trilho { height: 0.85rem; position: relative; }
.pop .trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--accent); transition: width 0.8s ease; }
.pop .trilho i.atr { background: var(--crit); border-radius: 0; }
.pop b { font-family: var(--display); font-weight: 600; font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }

/* por hora */
.grafico { position: relative; min-height: 0; }
.grafico svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* letreiro */
.letreiro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 1rem; overflow: hidden; }
.letreiro h2 { color: var(--accent); white-space: nowrap; }
.trilha { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.trilha-in { display: inline-flex; gap: 2.5rem; white-space: nowrap; animation: rola var(--dur, 60s) linear infinite; padding-left: 2rem; }
.trilha-in span { color: var(--muted); font-size: 0.95rem; }
.trilha-in span b { color: var(--fg); font-weight: 600; }
.trilha-in span::before { content: "✓"; color: var(--accent); margin-right: 0.45rem; font-weight: 700; }
@keyframes rola { to { transform: translateX(-50%); } }

/* ---------- O.S. nova toma a tela ---------- */
.chegada { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(3px); padding: 16px; }
.chegada[hidden] { display: none; }
.chegada-card {
  background: var(--novo); color: var(--novo-fg); border-radius: 20px; padding: 2rem 3rem 2.2rem; text-align: center;
  font-family: var(--display); max-width: 100%;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--novo) 30%, transparent), 0 30px 90px rgba(0,0,0,0.6);
  animation: surge 0.55s cubic-bezier(.2,.9,.3,1.25) both, respira 1s ease-in-out 0.6s infinite;
}
.chegada-card small { display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.chegada-card strong { display: block; font-size: 3.6rem; font-weight: 800; line-height: 1.1; margin: 0.4rem 0; }
.chegada-card span { display: block; font-size: 1.5rem; font-weight: 600; }
.chegada-card span.end { font-size: 1.35rem; font-weight: 500; margin-top: 0.3rem; }
.chegada-card span.ctr { font-size: 1.2rem; font-weight: 500; opacity: 0.85; margin-bottom: 0.2rem; }
.chegada-card span.obs { font-size: 1.2rem; font-weight: 500; font-style: italic; opacity: 0.85; margin-top: 0.5rem; max-width: 40ch; margin-inline: auto; }
@keyframes surge { from { transform: scale(0.6); opacity: 0; } }
@keyframes respira { 50% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--novo) 12%, transparent), 0 30px 90px rgba(0,0,0,0.6); } }
.dica { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); z-index: 30; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.78rem; }

/* ---------- telas pequenas ---------- */
@media (max-width: 1100px) {
  html { font-size: 14px; }
  body { overflow: auto; height: auto; }
  .app { height: auto; grid-template-rows: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-prazo { grid-column: 1 / -1; }
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .agenda .linhas { min-height: 18rem; }
  .grafico { height: 14rem; }
  .top { grid-template-columns: minmax(0, 1fr); }
  .clock { justify-content: space-between; }
  .clock-txt { text-align: left; }
  .controls { flex-direction: row; }
  .escala, .linha { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .pop { grid-template-columns: 6.5rem minmax(0, 1fr) 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .trilha-in { animation: none; }
}

/* troca de tela, faixa de falha, estado sem conexão */
.trocar { font-size: 0.75rem; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 6px; padding: 0.25rem 0.6rem; text-decoration: none; text-align: center; white-space: nowrap; }
.trocar:hover { border-color: var(--accent); }
.trocar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live.off { color: var(--crit); }
.live.off i { background: var(--crit); animation: none; }
.falha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--crit); color: #fff; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; padding: 0.55rem max(16px, env(safe-area-inset-right, 0px)) calc(0.55rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.falha small { font-family: var(--body); font-weight: 500; font-size: 0.85rem; opacity: 0.9; margin-left: 0.6rem; }
.vazio { color: var(--dim); font-size: 0.9rem; padding: 0.6rem 0; }
.vazio-letreiro { color: var(--dim); }
.controls { flex-direction: column; }
.linha { min-height: 3.3rem; }
.linhas { grid-auto-rows: minmax(3.3rem, 5.5rem); align-content: start; }

/* lista de todas as O.S. em aberto, rolando sozinha */
.todas { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.todas-cab, .lin { display: grid; grid-template-columns: 6.6rem minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 0.8fr) 6.8rem; gap: 0.8rem; align-items: center; }
.todas-cab { padding: 0 0.6rem 0.35rem; border-bottom: 1px solid var(--line); }
.todas-cab span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.todas-cab span:last-child { text-align: right; }
.todas-janela { overflow: hidden; min-height: 0; mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
.todas-in { animation: rolaV var(--dur, 120s) linear infinite; }
.todas-in.parado { animation: none; }
@keyframes rolaV { to { transform: translateY(-50%); } }
.lin { padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--grid); font-size: 0.9rem; }
.lin .id { color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 600; display: flex; align-items: center; gap: 0.45rem; }
.lin .id small { display: block; font-size: 0.68rem; font-weight: 500; white-space: nowrap; }
.lin .id i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); flex: none; }
.lin .mot { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin .cli, .lin .tec { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin .tec b, .lin .cli b { color: var(--fg); font-weight: 500; }
.lin .tec .ag { color: var(--agenda); font-weight: 600; }
.lin .tm { text-align: right; font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c); white-space: nowrap; }
.lin.late { background: color-mix(in srgb, var(--crit) 7%, transparent); }
.lin.nova { background: color-mix(in srgb, var(--novo) 12%, transparent); }
@media (max-width: 1100px) {
  .todas-janela { max-height: 22rem; }
  .todas-cab, .lin { grid-template-columns: 6rem minmax(0, 1fr) 5.5rem; }
  .todas-cab span:nth-child(3), .todas-cab span:nth-child(4), .lin .cli, .lin .tec { display: none; }
}
@media (prefers-reduced-motion: reduce) { .todas-janela { overflow: auto; } }

/* marca d'água do autor */
.marca {
  position: fixed; z-index: 5; pointer-events: none; user-select: none;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(0.2rem + env(safe-area-inset-bottom, 0px));
  font-family: var(--display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--fg); opacity: 0.28;
}
.app { padding-bottom: 1.3rem; }
#btn-som.som-on { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border-color: var(--ok); font-weight: 700; }
#btn-som.som-off { background: color-mix(in srgb, var(--crit) 18%, transparent); color: var(--crit); border-color: var(--crit); font-weight: 700; }

/* Impressão / PDF: mantém o fundo escuro da TV */
@media print { html, body, * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }