/* NexaSignage — estilos do player
   Alvo: TV 16:9 vista de 3–8 m. Fonte mínima 32px, contraste alto,
   transições só via opacity (CSS), nada decorativo. */

:root {
  /* Sobrescritos por tema.js com os valores da unidade */
  --cor-primaria: #F8BE06;
  --cor-secundaria: #C91B08;
  --cor-fundo: #000000;
  --fonte-titulo: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --fonte-texto: 'Montserrat', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cor-fundo);
  font-family: var(--fonte-texto);
  cursor: none;
}

/* ---- Camada de mídia ---- */

#stage {
  position: fixed;
  inset: 0;
  background: var(--cor-fundo);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}

.slide.visivel { opacity: 1; }

.slide img,
.slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* ---- Quadro de preços (slide tipo "precos") ---- */

.quadro-precos {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.06), transparent 60%), var(--cor-fundo);
}

.qp {
  width: min(72vw, 1300px);
  display: flex;
  flex-direction: column;
  gap: 4vh;
}

.qp-cabecalho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
}

.qp-logo { height: 9vh; }

.qp-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(48px, 7vh, 96px);
  color: var(--cor-primaria);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qp-lista {
  display: flex;
  flex-direction: column;
  gap: 3vh;
}

.qp-item {
  display: flex;
  align-items: baseline;
  gap: 1.5vw;
}

.qp-nome {
  font-family: var(--fonte-texto);
  font-size: clamp(36px, 5.5vh, 72px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.qp-pontos {
  flex: 1;
  border-bottom: 4px dotted rgba(255, 255, 255, 0.35);
  transform: translateY(-1vh);
}

.qp-preco {
  font-family: var(--fonte-texto);
  font-size: clamp(48px, 7.5vh, 100px);
  font-weight: 700;
  color: var(--cor-primaria);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qp-preco small {
  font-size: 0.45em;
  font-weight: 500;
  margin-right: 0.3em;
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Fallback (nenhum slide elegível) ---- */

#fallback {
  position: fixed;
  inset: 0;
  background: var(--cor-fundo);
  display: flex;
  align-items: center;
  justify-content: center;
}

#fallback[hidden] { display: none; }

#fallback img {
  max-width: 40vw;
  max-height: 40vh;
}

/* ---- Tela de erro de roteamento (legível de longe) ---- */

#erro {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #111;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  text-align: center;
  padding: 4vw;
}

#erro[hidden] { display: none; }

#erro h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(48px, 8vh, 110px);
  color: #FFD400;
  letter-spacing: 0.04em;
}

#erro p {
  font-size: clamp(32px, 4vh, 52px);
  font-weight: 600;
}

#erro ul {
  list-style: none;
  font-size: clamp(32px, 4vh, 52px);
  font-weight: 700;
  color: #7CFC9A;
  font-family: monospace, monospace;
}

#erro .erro-dica {
  font-size: clamp(32px, 3.2vh, 40px);
  color: #bbb;
}

/* ---- Barra de overlay ---- */

#overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8vh;
  min-height: 72px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 0 2vw;
  background: rgba(0, 0, 0, 0.65);
}

#overlay-logo {
  height: 5.5vh;
  min-height: 48px;
  flex: 0 0 auto;
}

#overlay-nome {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: clamp(32px, 4.5vh, 64px);
  font-weight: 500;
  color: var(--cor-primaria);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
}

#overlay-direita {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2vw;
}

#no-ar {
  font-size: clamp(32px, 3.2vh, 42px);
  font-weight: 500;
  color: #fff;
  max-width: 30vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#no-ar[hidden] { display: none; }

#clima {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  color: #fff;
}

#clima[hidden] { display: none; }

#clima-icone svg {
  width: clamp(48px, 5.5vh, 72px);
  height: clamp(48px, 5.5vh, 72px);
  display: block;
}

#clima-temp {
  font-size: clamp(48px, 5.5vh, 72px);
  font-weight: 700;
}

#relogio {
  font-size: clamp(48px, 5.5vh, 72px);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ---- Indicador de áudio mudo ---- */

#audio-mudo {
  position: fixed;
  top: 2vh;
  right: 2vh;
  z-index: 30;
  width: 4vh;
  height: 4vh;
  min-width: 36px;
  min-height: 36px;
  color: rgba(255, 255, 255, 0.55);
  align-items: center;
  justify-content: center;
}

#audio-mudo svg {
  width: 100%;
  height: 100%;
}