* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; font-family: system-ui, sans-serif; }

#stage { position: fixed; inset: 0; background: #000; }

.layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #000; opacity: 0;
  transition: opacity 0.6s ease;
}
.layer.visible { opacity: 1; }
img.layer, video.layer { object-fit: contain; }

/* ---------- Overlays (QR / contador) ---------- */
#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.ov { position: absolute; }
.ov.hidden { display: none !important; } /* !important: #countdown define display:flex y gana por especificidad */
/* Sin margin: con left:50% el margin descentraba los elementos "centrales" */
.ov.pos-tl { top: 2vh; left: 2vh; }
.ov.pos-tc { top: 2vh; left: 50%; transform: translateX(-50%); }
.ov.pos-tr { top: 2vh; right: 2vh; }
.ov.pos-bl { bottom: 2vh; left: 2vh; }
.ov.pos-bc { bottom: 2vh; left: 50%; transform: translateX(-50%); }
.ov.pos-br { bottom: 2vh; right: 2vh; }

/* --h = alto en vh; el ancho sigue la relación de aspecto.
   max-width/min() evitan desbordar en pantallas verticales */
#qr {
  height: min(calc(var(--h) * 1vh), 90vw); aspect-ratio: 1 / 1;
  background: #fff; padding: calc(var(--h) * 0.05vh); border-radius: calc(var(--h) * 0.06vh);
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
#qr img { width: 100%; height: 100%; display: block; }

#countdown {
  height: calc(var(--h) * 1vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 calc(var(--h) * 0.25vh); border-radius: calc(var(--h) * 0.12vh);
  font-variant-numeric: tabular-nums; box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
#countdown .num { font-size: min(calc(var(--h) * 0.55vh), 8vw); font-weight: 700; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
#countdown .lbl { font-size: min(calc(var(--h) * 0.14vh), 2vw); line-height: 1.4; opacity: .8; letter-spacing: .1em; white-space: nowrap; }

.font-sans    { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.font-serif   { font-family: Georgia, 'Times New Roman', serif; }
.font-mono    { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.font-impact  { font-family: Impact, 'Arial Black', sans-serif; }
.font-rounded { font-family: ui-rounded, 'Hiragino Maru Gothic ProN', 'Nunito', system-ui, sans-serif; }

/* ---------- Aviso tipo "live activity" ---------- */
#emergency {
  position: fixed; top: 0; left: 0; width: 100%; height: 20vh; z-index: 100;
  display: flex; align-items: center; justify-content: center; gap: 3vh; padding: 0 4vw;
  border-radius: 0 0 4vh 4vh; box-shadow: 0 1vh 4vh rgba(0,0,0,.5);
  transform: translateY(-110%); transition: transform .6s cubic-bezier(.2,.9,.3,1.2);
}
#emergency.show { transform: translateY(0); }
#em-icon { font-size: 8vh; line-height: 1; flex: none; }
#em-icon:empty { display: none; }
#em-message { font-size: 3.6vh; font-weight: 600; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }

/* ---------- Barra de conexión ---------- */
#info-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5vh 2.5vh;
  padding: 1vh 3vh; font-size: 2vh; color: #fff; background: rgba(0,0,0,.78);
  transform: translateY(100%); transition: transform .5s ease;
}
#info-bar.show { transform: translateY(0); }
#info-bar .dot { width: 1.6vh; height: 1.6vh; border-radius: 50%; background: #888; }
#info-bar .dot.online { background: #2ecc71; }
#info-bar .dot.local { background: #f1c40f; }
#info-bar .dot.none { background: #e74c3c; }