/* ============================================================
   PuraFarma · Sala (Smart TV) — 1920x1080 horizontal.
   Texto enorme para leer a 5 metros. Estilos simples en variables.
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/fraunces-latin.woff2") format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/worksans-latin.woff2") format('woff2')}

:root{
  --fondo:#1E2A26; --panel:#F6F2E9; --tinta:#0F1713; --verde:#34647A;
  --salvia:#8FA99A; --crema:#F6F2E9;
}
[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;
  font-family:'Work Sans',system-ui,sans-serif;color:var(--crema)}

/* El escenario mide 1920x1080 y se escala para entrar en la TV. */
.stage{position:absolute;top:0;left:0;width:1920px;height:1080px;background:var(--fondo);
  transform-origin:top left;display:flex;flex-direction:column;padding:48px 60px}

.top{display:flex;justify-content:space-between;align-items:center;height:110px}
.top .logo{height:70px;filter:brightness(0) invert(1) opacity(.92)}
.clock{font-family:'Fraunces',Georgia,serif;font-size:60px;color:var(--salvia);font-variant-numeric:tabular-nums}

/* Turno actual: lo más grande de la pantalla. */
.actual{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.actual-lbl{font-size:48px;letter-spacing:.3em;text-transform:uppercase;color:var(--salvia)}
.actual-code{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:440px;line-height:.9;color:var(--crema)}
.actual-puesto{font-family:'Fraunces',Georgia,serif;font-size:96px;color:#cfe0d6}
.actual.flash{animation:flash .9s ease}
@keyframes flash{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}

/* Historial de anteriores. */
.hist{height:260px}
.hist-lbl{font-size:34px;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia);margin-bottom:14px}
.hist-row{display:flex;gap:22px}
.hist-item{flex:1;background:rgba(246,242,233,.08);border:2px solid rgba(246,242,233,.18);
  border-radius:20px;padding:22px 10px;text-align:center}
.hist-item .c{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:88px;line-height:1;color:var(--crema)}
.hist-item .p{font-size:30px;color:var(--salvia);margin-top:8px}

/* Login (se tipea una vez con el control remoto). */
.login{position:fixed;inset:0;z-index:100;background:var(--fondo);display:flex;align-items:center;justify-content:center}
.loginbox{width:min(560px,90vw);background:var(--panel);border-radius:28px;padding:48px 44px;
  display:flex;flex-direction:column;gap:16px;text-align:center;color:var(--tinta)}
.loginbox .logo{height:72px;margin:0 auto 6px;filter:brightness(0) opacity(.9)}
.loginbox h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:36px}
.loginhint{margin:0 0 8px;color:var(--verde);font-size:18px}
.loginbox label{display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--verde);font-size:18px}
.loginbox input{padding:16px 18px;font-size:22px;border:2px solid var(--salvia);border-radius:12px;background:#fff;color:var(--tinta)}
.loginbox input:focus{outline:none;border-color:var(--verde)}
.loginbox button{margin-top:10px;padding:18px;font-size:22px;background:var(--tinta);color:var(--crema);
  border:none;border-radius:14px;cursor:pointer;font-family:inherit}
.loginerr{color:#b23b3b;font-size:17px;min-height:1em}

/* Botón de activar sonido (si el navegador bloquea autoplay). */
.sonido{position:fixed;inset:0;z-index:90;background:rgba(30,42,38,.92);display:flex;align-items:center;justify-content:center}
.sonido button{font-size:52px;padding:44px 70px;border:none;border-radius:28px;
  background:var(--crema);color:var(--tinta);cursor:pointer;font-family:inherit;font-weight:700}