:root {
  --bg: #0a0f1c; --painel: #121a2e; --borda: #22304f;
  --texto: #eaf0ff; --suave: #93a4c8;
  --ok: #2ecc71; --atencao: #f5b942; --critico: #ff5d5d; --info: #4da3ff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 1.05vw; font-size: max(12px, 1.05vw); } /* escala com a largura da TV (1ª linha: reserva p/ TVs antigas) */
body {
  background: var(--bg); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  height: 100vh; overflow: hidden; cursor: none;
}
@keyframes entra { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }

/* ================= RECEPÇÃO ================= */
body.recepcao { background: #000; }
#palco { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } /* sem "inset": navegadores de Smart TV antigos não entendem */
#palco > * { animation: entra .6s ease; }
.midia { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Vídeo ainda carregando fica invisível (sem a animação de entrada, que mudaria a opacidade):
   assim o botão de play/carregando que algumas TVs desenham nesse intervalo não aparece. */
#palco > .midia.carregando { opacity: 0; animation: none; } /* "#palco >" para vencer a regra de animação acima */
/* Esconde o botão de play e os controles que alguns navegadores (Smart TV, Android) desenham sobre o vídeo.
   Uma regra por seletor: se o navegador não conhecer um deles, só aquela regra é ignorada. */
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-panel { display: none !important; }
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls-overlay-play-button { display: none !important; }
video::-webkit-media-controls-enclosure { display: none !important; }
.cartao {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #1b2f5f, #0a0f1c 70%);
  font-size: 4rem; font-weight: 800; text-align: center; padding: 3rem; letter-spacing: .02em;
}
.faixa {
  position: fixed; left: 2rem; bottom: 2rem; padding: .6rem 1.2rem; border-radius: .6rem;
  background: rgba(0, 0, 0, .55); font-size: 1.2rem; font-weight: 600; backdrop-filter: blur(4px);
}
#aviso-som {
  position: fixed; right: 1.5rem; top: 1.5rem; padding: .7rem 1.1rem; border-radius: .6rem;
  background: rgba(245, 185, 66, .92); color: #231800; font-weight: 700; font-size: 1rem; cursor: pointer;
}
#aviso-som[hidden] { display: none; }
#debug { position: fixed; left: .6rem; top: .6rem; font: 12px monospace; color: #9fb3d9; background: rgba(0,0,0,.6); padding: .3rem .5rem; }

/* ---- Layout "lateral": anúncio à esquerda + barra com logo, relógio, música e QR codes ----
   Cores vêm de config.js (layout.corFundo / corDestaque). Sem "gap" em flex: TVs antigas não entendem. */
:root {
  --marca-fundo: #00313D; --marca-destaque: #B89747; --marca-texto: #F3EEDF; --marca-suave: #C9C1A8;
  --marca-linha: rgba(184, 151, 71, .45); --faixa-texto: #F3EEDF;
  --not-fundo: #00222B; --not-texto: var(--marca-texto); --not-suave: var(--marca-suave);
  --not-rotulo-fundo: var(--marca-destaque); --not-rotulo-texto: var(--marca-fundo);
}
body.com-lateral { background: var(--marca-fundo); }
body.com-lateral #palco { right: 27%; }
body.com-lateral .midia { background: var(--marca-fundo); }
body.com-lateral .cartao { background: var(--marca-fundo); color: var(--marca-destaque); font-weight: 300; }
body.com-lateral .faixa {
  background: rgba(0, 0, 0, .45); border-left: .25rem solid var(--marca-destaque); border-radius: 0;
  color: var(--faixa-texto); font-weight: 500; letter-spacing: .03em;
}
.lateral {
  position: fixed; top: 0; right: 0; bottom: 0; width: 27%;
  background: var(--marca-fundo); border-left: .12rem solid var(--marca-destaque);
  padding: 2.2rem 1.6rem 1.8rem; display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--marca-texto);
}
.lat-logo { width: 92%; display: block; }
.lateral.duas-logos .lat-logo { width: 80%; }
.lateral.duas-logos .lat-hora { margin-top: 1.2rem; font-size: 3.5rem; } /* com duas logos sobra menos altura */
.lat-logo-sep { width: 40%; height: 1px; margin: 1.1rem 0; background: var(--marca-destaque); }
.lat-hora {
  margin-top: 1.6rem; font-size: 4.4rem; font-weight: 300; line-height: 1;
  color: var(--marca-destaque); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.lat-data { margin-top: .5rem; font-size: 1.1rem; color: var(--marca-suave); }
.lat-data::first-letter { text-transform: uppercase; } /* "Terça-feira, 03 de novembro" */
.lat-musica { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--marca-linha); width: 100%; }
.lat-rotulo { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--marca-destaque); }
.lat-titulo { margin-top: .5rem; font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.lat-artista { margin-top: .2rem; font-size: 1.05rem; color: var(--marca-suave); }
/* margin-top: auto empurra os QR codes para o pé da barra; o padding garante um respiro mínimo acima deles */
.lat-qrs { margin-top: auto; padding-top: 1.8rem; width: 100%; display: flex; justify-content: space-between; }
.lat-qr { width: 47%; }
.lat-qr img {
  width: 100%; height: 12.5rem; object-fit: contain; display: block;
  background: #fff; padding: .5rem; border-radius: .5rem;
}
.lat-qr figcaption {
  margin-top: .55rem; font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: var(--marca-destaque);
}
/* 3 QR codes lado a lado: colunas mais estreitas, imagens quadradas e legenda menor */
.lat-qrs.n3 .lat-qr { width: 31.5%; }
.lat-qrs.n3 .lat-qr img { height: auto; padding: .35rem; }
.lat-qrs.n3 .lat-qr figcaption { font-size: .66rem; letter-spacing: .03em; white-space: nowrap; }

/* ---- Letreiro de notícias no rodapé (vale para os dois layouts) ---- */
body.com-noticias #palco, body.com-noticias .lateral { bottom: 4.4rem; }
body.com-noticias .faixa { bottom: 6.4rem; }
.noticias {
  position: fixed; left: 0; right: 0; bottom: 0; height: 4.4rem; display: flex;
  background: var(--not-fundo); border-top: .12rem solid var(--marca-destaque); color: var(--not-texto);
}
.not-rotulo {
  display: flex; align-items: center; padding: 0 1.6rem; background: var(--not-rotulo-fundo); color: var(--not-rotulo-texto);
  font-size: 1rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.not-janela { flex: 1; position: relative; overflow: hidden; }
/* padding-left 100% faz o texto começar fora da tela à direita; translateX(-100%) leva até sumir à esquerda */
.not-trilho {
  position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center;
  white-space: nowrap; padding-left: 100%; will-change: transform;
}
.not-item { font-size: 1.5rem; font-weight: 500; }
.not-sep { margin: 0 1.6rem; font-size: .9rem; color: var(--marca-destaque); }
.not-credito { margin-left: 2.4rem; margin-right: 4rem; font-size: 1rem; color: var(--not-suave); letter-spacing: .05em; }
@keyframes rolar { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ================= OPERAÇÕES ================= */
body.ops { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1.2rem 1.6rem; }
.topo { display: flex; align-items: center; justify-content: space-between; }
.topo h1 { font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
.marca { font-size: 1.2rem; color: var(--suave); font-weight: 600; min-width: 14rem; }
.relogio { text-align: right; min-width: 14rem; }
#hora { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
#data { color: var(--suave); font-size: 1rem; text-transform: capitalize; margin-top: .2rem; }

.grade { display: grid; grid-template-columns: 1.05fr 1.5fr; grid-template-rows: 1.25fr 1fr; gap: 1rem; min-height: 0; }
.painel { background: var(--painel); border: 1px solid var(--borda); border-radius: 1rem; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.painel h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); margin-bottom: .8rem; }
.painel h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .5rem; }
.obr { grid-row: 1 / span 2; }

#obrigacoes { list-style: none; overflow: hidden; }
#obrigacoes li { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .9rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--borda); }
.dia { text-align: center; border-radius: .6rem; padding: .3rem 0; background: #0d1426; border: 2px solid var(--ok); }
.dia b { display: block; font-size: 1.6rem; line-height: 1.1; }
.dia span { font-size: .8rem; color: var(--suave); text-transform: uppercase; }
li.atencao .dia { border-color: var(--atencao); } li.critico .dia { border-color: var(--critico); }
.nome { font-size: 1.25rem; font-weight: 600; }
.resp { font-size: .95rem; color: var(--suave); }
.prazo { font-size: 1.1rem; font-weight: 700; color: var(--ok); }
li.atencao .prazo { color: var(--atencao); } li.critico .prazo { color: var(--critico); }
.vazio { color: var(--suave); font-size: 1.2rem; padding: 1rem 0; }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; flex: 1; min-height: 0; }
.kpi-card { background: #0d1426; border-radius: .8rem; padding: .8rem 1rem; border-left: .35rem solid var(--suave); display: flex; flex-direction: column; justify-content: center; }
.kpi-card.ok { border-color: var(--ok); } .kpi-card.atencao { border-color: var(--atencao); } .kpi-card.critico { border-color: var(--critico); }
.kpi-nome { font-size: 1.05rem; color: var(--suave); }
.kpi-valor { font-size: 3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-card.ok .kpi-valor { color: var(--ok); } .kpi-card.atencao .kpi-valor { color: var(--atencao); } .kpi-card.critico .kpi-valor { color: var(--critico); }
.kpi-valor small { font-size: 1.2rem; font-weight: 600; margin-left: .25rem; color: var(--texto); }
.kpi-meta { font-size: .95rem; color: var(--suave); }

.avisos { justify-content: space-between; }
#aviso { flex: 1; display: flex; }
.aviso-card { flex: 1; border-left: .4rem solid var(--info); padding: .4rem 1.2rem; display: flex; flex-direction: column; justify-content: center; animation: entra .5s ease; }
.aviso-card.alerta { border-color: var(--atencao); } .aviso-card.critico { border-color: var(--critico); }
.aviso-card h3 { font-size: 2rem; margin-bottom: .5rem; }
.aviso-card p { font-size: 1.5rem; line-height: 1.35; color: #cfdaf5; }
.pontos { display: flex; gap: .4rem; justify-content: center; }
.ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--borda); }
.ponto.ativo { background: var(--info); }

#rodape { font-size: .85rem; color: var(--suave); text-align: right; }
#rodape.erro { color: var(--atencao); }