/* ============================================================
   vervotaciones.php — pantalla externa de votación (1920×1080)
   Estética synthwave coherente con el resto del sistema.
   ============================================================ */
:root{ --neon:#ff2fd0; --cyan:#00e6ff; --violet:#8a5cff; --bg:#05030f; --fondo-oscuro:.5; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:'Rajdhani','Segoe UI',system-ui,sans-serif}
#stage{position:fixed;inset:0;overflow:hidden}

/* Fondo */
.bg-layer{position:absolute;inset:0;z-index:0}
.bg-synth{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 8%,rgba(138,92,255,.35),transparent 55%),
  radial-gradient(90% 60% at 50% 100%,rgba(255,47,208,.30),transparent 60%),
  linear-gradient(180deg,#12002e,#1a0140 40%,#2a0a5e 60%,#05030f)}
.stars{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 20% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 30%,rgba(0,230,255,.8),transparent),
  radial-gradient(1px 1px at 75% 15%,#fff,transparent);opacity:.5}
.grid-floor{position:absolute;left:-25%;right:-25%;bottom:-10%;height:52%;
  background-image:linear-gradient(rgba(0,230,255,.32) 2px,transparent 2px),linear-gradient(90deg,rgba(0,230,255,.32) 2px,transparent 2px);
  background-size:60px 60px;transform:perspective(320px) rotateX(68deg);transform-origin:bottom center;
  animation:gridmove 2.4s linear infinite;opacity:.6;mask-image:linear-gradient(to top,#000 30%,transparent)}
@keyframes gridmove{from{background-position-y:0}to{background-position-y:60px}}
.bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-overlay{position:absolute;inset:0;background:rgba(5,3,15,var(--fondo-oscuro))}
.scanlines{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.10) 3px 4px);opacity:.55}

/* Cabecera */
.logo-top{position:absolute;top:2.6vh;left:0;right:0;z-index:11;display:flex;justify-content:center;pointer-events:none}
.logo-top img{max-height:11vh;max-width:34vw;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,230,255,.5))}
.logo-top:empty{display:none}
.vv-name{position:absolute;top:15vh;left:0;right:0;z-index:11;text-align:center;
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:4.4vh;text-transform:uppercase;letter-spacing:.3vw;
  color:#fff;text-shadow:0 0 14px var(--neon),0 0 40px rgba(255,47,208,.5)}
.counter{position:absolute;top:2.8vh;right:2.6vw;z-index:12;text-align:right}
.counter .n{font-family:'Orbitron',sans-serif;font-weight:900;font-size:4vh;color:#eafcff;text-shadow:0 0 12px var(--cyan)}
.counter .l{font-size:1.7vh;color:#bfe9ff;text-transform:uppercase;letter-spacing:.2vw}

/* Contenido */
.content{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:23vh 5vw 12vh}
.view{display:none;width:100%}
.view.on{display:block}

/* Espera */
#waitView{text-align:center}
.wait-msg{font-size:4vh;color:#e7f7ff;margin-bottom:3vh;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
.qr-box{display:inline-flex;flex-direction:column;align-items:center;gap:1.4vh;background:rgba(255,255,255,.06);
  border:1px solid rgba(0,230,255,.35);border-radius:20px;padding:2.4vh 2.4vw}
.qr-box img{width:26vh;height:26vh;background:#fff;padding:1.4vh;border-radius:14px}
.qr-box .hint{font-size:2.2vh;letter-spacing:.2vw;text-transform:uppercase;color:#bfe9ff}

/* En vivo: ranking + panel derecho */
.live-cols{display:grid;grid-template-columns:1fr 30vw;gap:3vw;align-items:center}
.live-cols.no-qr{grid-template-columns:1fr}
.rank{display:flex;flex-direction:column;gap:1.8vh}
.rrow{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:1.4vh 1.6vw;overflow:hidden}
.rrow .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(255,47,208,.5),rgba(0,230,255,.35));
  width:0;transition:width .8s cubic-bezier(.2,.8,.2,1);z-index:0}
.rrow .fg{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1vw}
.rrow .pos{font-family:'Orbitron',sans-serif;font-weight:900;font-size:3.2vh;color:var(--cyan);min-width:2.2vw}
.rrow .nm{flex:1;font-size:3.2vh;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 1vw}
.rrow .vt{font-family:'Orbitron',sans-serif;font-weight:800;font-size:2.8vh;color:#fff}
.rrow .pc{font-size:2.2vh;color:#bfe9ff;min-width:5vw;text-align:right}
.rrow:first-child .nm{color:#fff;text-shadow:0 0 14px var(--neon)}

/* Estado pausada / finalizada */
#pausedBadge{position:absolute;top:9vh;left:0;right:0;text-align:center;z-index:13;font-size:2.6vh;color:#ffe08a;letter-spacing:.2vw}
#finalView,#pauseView{text-align:center}
.final-msg{font-family:'Orbitron',sans-serif;font-weight:700;font-size:4.2vh;text-transform:uppercase;color:#e7f7ff;text-shadow:0 0 16px var(--cyan)}

/* Ganadores (podio) */
#winnersView{text-align:center}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:2vw;margin-top:2vh}
.pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:2vh 2vw;min-width:20vw;
  animation:rise .6s cubic-bezier(.2,1.4,.4,1)}
.pcard .lugar{font-size:2.4vh;letter-spacing:.2vw;text-transform:uppercase;color:#bfe9ff}
.pcard .nm{font-family:'Orbitron',sans-serif;font-weight:900;text-transform:uppercase;line-height:1.05;margin:1vh 0}
.pcard .vt{font-size:2.6vh;color:#fff}
.pcard.p1{order:2;transform:scale(1.12)}
.pcard.p1 .nm{font-size:5.4vh;color:#fff;text-shadow:0 0 16px var(--neon),0 0 44px rgba(255,47,208,.6)}
.pcard.p2{order:1}.pcard.p2 .nm{font-size:3.6vh}
.pcard.p3{order:3}.pcard.p3 .nm{font-size:3.4vh}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{opacity:1}}
#winTitle{font-family:'Orbitron',sans-serif;font-weight:900;font-size:4vh;letter-spacing:.4vw;text-transform:uppercase;color:#ffe9fb;text-shadow:0 0 14px var(--neon)}

/* Actividad reciente: un mensaje centrado, con entrada y salida (no se apila) */
.actividad{position:absolute;bottom:3.2vh;left:0;right:0;z-index:12;display:flex;justify-content:center;pointer-events:none}
.act-item{background:rgba(10,4,28,.62);border:1px solid rgba(0,230,255,.35);border-radius:999px;
  padding:1.1vh 2.4vw;font-size:2.4vh;font-weight:600;color:#eafcff;box-shadow:0 0 24px rgba(0,230,255,.25);
  white-space:nowrap;opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,1.2,.3,1)}
.act-item.show{opacity:1;transform:translateY(0) scale(1)}

.fs-btn{position:fixed;bottom:2.4vh;right:2.6vw;z-index:30;width:6vh;height:6vh;border-radius:50%;
  border:2px solid rgba(0,230,255,.5);background:rgba(10,4,28,.6);color:#fff;font-size:2.4vh;cursor:pointer;opacity:.25}
.fs-btn:hover{opacity:1}
.conn-warn{position:fixed;bottom:2.4vh;left:2.6vw;z-index:31;background:rgba(255,84,112,.85);color:#fff;padding:.6vh 1.2vw;border-radius:10px;font-size:1.7vh;display:none}
.conn-warn.show{display:block}