/* ============================================================
   assets/css/publico/en_vivo.css — Pantalla EN VIVO (proyector / celular)
   Pensada para verse de lejos: tipografía grande, alto contraste.
   ============================================================ */
:root {
    --fondo: #060a14;
    --panel: rgba(15, 23, 42, 0.72);
    --borde: rgba(148, 163, 184, 0.18);
    --oro: #f5b301;
    --oro-suave: rgba(245, 179, 1, 0.16);
    --cian: #22d3ee;
    --texto: #f8fafc;
    --gris: #94a3b8;
    --ok: #4ade80;
    --rojo: #f43f5e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(245, 179, 1, 0.10), transparent 60%),
        var(--fondo);
    background-attachment: fixed;
    color: var(--texto);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
}
body.sin-cursor, body.sin-cursor * { cursor: none !important; }
[hidden] { display: none !important; }

.vivo { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: clamp(12px, 1.6vw, 26px); padding: clamp(14px, 2vw, 34px); }

/* ---------- Cabecera ---------- */
.vivo-cab { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); }
.vivo-logo-sc { width: clamp(56px, 6.5vw, 120px); height: clamp(56px, 6.5vw, 120px); object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.vivo-titulo { flex: 1; min-width: 0; }
.vivo-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(244, 63, 94, 0.16); color: #fda4af; font-size: clamp(0.7rem, 0.85vw, 0.95rem); font-weight: 800; letter-spacing: 0.18em; }
.vivo-chip .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); animation: latido 1.8s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); } }
.vivo-titulo h1 { margin-top: 6px; font-size: clamp(1.3rem, 2.6vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo-titulo p { margin-top: 4px; color: var(--gris); font-size: clamp(0.8rem, 1.1vw, 1.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo-reloj { display: flex; align-items: center; gap: 12px; }
.vivo-reloj strong { font-size: clamp(1.3rem, 2.6vw, 3rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--oro); }
.vivo-pantalla { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font-size: 1.2rem; cursor: pointer; }
.vivo-pantalla:hover { border-color: var(--cian); }

/* ---------- Cuerpo: en escena + orden ---------- */
.vivo-cuerpo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 26px); min-height: 0; }
.vivo-escena {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: clamp(18px, 3vw, 54px);
    border-radius: clamp(16px, 1.6vw, 30px);
    background:
        linear-gradient(160deg, rgba(245, 179, 1, 0.14), transparent 45%),
        var(--panel);
    border: 1px solid rgba(245, 179, 1, 0.35);
    box-shadow: inset 0 0 120px rgba(245, 179, 1, 0.06);
}
.vivo-escena.entra { animation: entra 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.vivo-etiqueta { position: absolute; top: clamp(14px, 1.6vw, 28px); left: clamp(14px, 1.6vw, 28px); padding: 6px 14px; border-radius: 999px; background: var(--oro); color: #1a1200; font-weight: 900; font-size: clamp(0.75rem, 1vw, 1.1rem); letter-spacing: 0.14em; text-transform: uppercase; }
.vivo-escena.vacia .vivo-etiqueta { background: #334155; color: var(--texto); }
.vivo-escena-logo { width: clamp(110px, min(17vw, 30vh), 330px); aspect-ratio: 1; flex-shrink: 0; margin-bottom: clamp(12px, 1.6vw, 26px); }
.vivo-escena-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: #fff; padding: 6%; box-shadow: 0 0 0 6px rgba(245, 179, 1, 0.55), 0 20px 60px rgba(0, 0, 0, 0.55); }
.vivo-escena.vacia .vivo-escena-logo { display: none; }
.vivo-escena h2 { font-size: clamp(1.6rem, 4.2vw, 5.2rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.015em; text-transform: uppercase; max-width: 100%; overflow-wrap: anywhere; }
.vivo-escena.vacia h2 { font-size: clamp(1.4rem, 3vw, 3.4rem); color: var(--gris); }
.vivo-escena > p { margin-top: 10px; color: var(--cian); font-size: clamp(0.9rem, 1.5vw, 1.7rem); font-weight: 600; }
.vivo-escena-pie { display: flex; gap: clamp(20px, 4vw, 70px); margin-top: clamp(16px, 2.4vw, 40px); }
.vivo-escena-pie div { display: flex; flex-direction: column; gap: 2px; }
.vivo-escena-pie small { color: var(--gris); font-size: clamp(0.7rem, 0.9vw, 1rem); text-transform: uppercase; letter-spacing: 0.12em; }
.vivo-escena-pie strong { font-size: clamp(1.1rem, 2vw, 2.4rem); font-weight: 800; font-variant-numeric: tabular-nums; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#v-escena-tiempo { color: var(--oro); }

.vivo-orden { display: flex; flex-direction: column; min-height: 0; padding: clamp(14px, 1.4vw, 26px); border-radius: clamp(16px, 1.6vw, 30px); background: var(--panel); border: 1px solid var(--borde); }
.vivo-orden h3 { font-size: clamp(0.8rem, 1vw, 1.15rem); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gris); margin-bottom: 12px; }
.vivo-orden ol { list-style: none; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: calc(100vh - 300px); scrollbar-width: thin; }
.vivo-orden li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; padding: clamp(8px, 0.8vw, 14px) 12px; border-radius: 12px; background: rgba(148, 163, 184, 0.06); border: 1px solid transparent; transition: background 0.3s, border-color 0.3s; }
.vivo-orden .num { width: 2em; text-align: center; font-weight: 900; font-size: clamp(0.95rem, 1.2vw, 1.4rem); color: var(--gris); font-variant-numeric: tabular-nums; }
.vivo-orden .mini, .vivo-tabla .mini { width: clamp(30px, 2.6vw, 48px); height: clamp(30px, 2.6vw, 48px); border-radius: 50%; object-fit: contain; background: #fff; padding: 2px; flex-shrink: 0; }
.vivo-orden .info { min-width: 0; }
.vivo-orden .info strong { display: block; font-size: clamp(0.85rem, 1.15vw, 1.35rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo-orden .info small { color: var(--gris); font-size: clamp(0.7rem, 0.8vw, 0.95rem); }
.vivo-orden .estado { padding: 4px 10px; border-radius: 999px; font-size: clamp(0.65rem, 0.78vw, 0.9rem); font-weight: 800; white-space: nowrap; background: rgba(148, 163, 184, 0.14); color: var(--gris); }
.vivo-orden .est-escena { background: var(--oro-suave); border-color: rgba(245, 179, 1, 0.55); }
.vivo-orden .est-escena .num { color: var(--oro); }
.vivo-orden .est-escena .estado { background: var(--oro); color: #1a1200; }
.vivo-orden .est-calificando .estado { background: rgba(34, 211, 238, 0.16); color: var(--cian); }
.vivo-orden .est-ok { opacity: 0.78; }
.vivo-orden .est-ok .estado { background: rgba(74, 222, 128, 0.15); color: var(--ok); }
.vivo-iniciales { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: #0f172a; background: #e2e8f0 !important; font-size: 0.8em; }
.vivo-escena-img.vivo-iniciales { font-size: clamp(2.4rem, 5vw, 6rem); }

/* ---------- Resultados ---------- */
.vivo-resultados { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 34px); }
.vivo-res-titulo { font-size: clamp(1.4rem, 3vw, 3.6rem); font-weight: 900; text-transform: uppercase; color: var(--oro); letter-spacing: 0.04em; }
.vivo-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(10px, 2vw, 34px); width: min(1300px, 100%); }
.vivo-podio > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; animation: entra 0.8s both; }
.vivo-podio .podio-1 { animation-delay: 0.5s; }
.vivo-podio .podio-3 { animation-delay: 0.25s; }
.vivo-podio .medalla { font-size: clamp(2rem, 4vw, 4.6rem); line-height: 1; }
.vivo-podio .podio-img { width: clamp(80px, 10vw, 190px); height: clamp(80px, 10vw, 190px); border-radius: 50%; object-fit: contain; background: #fff; padding: 5%; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.vivo-podio .podio-1 .podio-img { width: clamp(100px, 13vw, 240px); height: clamp(100px, 13vw, 240px); box-shadow: 0 0 0 6px var(--oro), 0 18px 50px rgba(0, 0, 0, 0.55); }
.vivo-podio strong { font-size: clamp(0.95rem, 1.7vw, 2rem); font-weight: 900; text-transform: uppercase; line-height: 1.08; overflow-wrap: anywhere; }
.vivo-podio small { color: var(--cian); font-size: clamp(0.9rem, 1.4vw, 1.6rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.vivo-podio .base { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 14px 14px 0 0; font-size: clamp(1.6rem, 3vw, 3.6rem); font-weight: 900; color: rgba(255, 255, 255, 0.9); background: linear-gradient(180deg, rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.08)); }
.vivo-podio .podio-1 .base { height: clamp(90px, 12vw, 220px); background: linear-gradient(180deg, rgba(245, 179, 1, 0.6), rgba(245, 179, 1, 0.08)); }
.vivo-podio .podio-2 .base { height: clamp(66px, 8.5vw, 160px); }
.vivo-podio .podio-3 .base { height: clamp(50px, 6vw, 120px); background: linear-gradient(180deg, rgba(205, 127, 50, 0.5), rgba(205, 127, 50, 0.08)); }
.vivo-tabla { width: min(1000px, 100%); border-collapse: separate; border-spacing: 0 6px; }
.vivo-tabla td { padding: 10px 14px; background: var(--panel); font-size: clamp(0.85rem, 1.2vw, 1.4rem); font-variant-numeric: tabular-nums; }
.vivo-tabla td:first-child { border-radius: 10px 0 0 10px; width: 4.5em; font-weight: 900; color: var(--gris); text-align: center; }
.vivo-tabla td:last-child { border-radius: 0 10px 10px 0; text-align: right; color: var(--cian); font-weight: 700; }
.vivo-tabla .col-nombre { display: flex; align-items: center; gap: 12px; font-weight: 700; }

/* ---------- Pie ---------- */
.vivo-pie { display: flex; flex-direction: column; gap: 8px; }
.vivo-progreso { height: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); overflow: hidden; }
.vivo-progreso span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cian), var(--ok)); transition: width 0.8s ease; }
.vivo-pie > p { color: var(--gris); font-size: clamp(0.75rem, 0.95vw, 1.05rem); }
.vivo-anuncio { overflow: hidden; border-radius: 12px; background: var(--oro); color: #1a1200; font-weight: 800; font-size: clamp(0.95rem, 1.5vw, 1.8rem); white-space: nowrap; padding: 10px 0; }
.vivo-anuncio span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.vivo-sin-conexion { position: fixed; right: 16px; bottom: 16px; padding: 8px 14px; border-radius: 10px; background: rgba(244, 63, 94, 0.9); color: #fff; font-weight: 700; font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
    .vivo-escena.entra, .vivo-podio > div { animation: none; }
    .vivo-anuncio span { animation-duration: 60s; }
    .vivo-chip .punto { animation: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
    .vivo-cuerpo { grid-template-columns: 1fr; }
    .vivo-orden ol { max-height: none; }
    .vivo-titulo h1 { white-space: normal; }
    .vivo-escena-pie strong { max-width: 60vw; }
    .vivo-podio { gap: 8px; }
}

/* ---------- Proyector: todo en una sola pantalla, sin barra de desplazamiento ---------- */
@media (min-width: 821px) {
    .vivo:not(.modo-resultados) { height: 100vh; overflow: hidden; }
    .vivo:not(.modo-resultados) .vivo-orden ol { max-height: none; flex: 1; min-height: 0; }
}
@media (max-width: 520px) {
    .vivo-reloj strong { font-size: 1.05rem; }
    .vivo-escena-pie { flex-direction: column; gap: 10px; }
    .vivo-escena-pie strong { max-width: 80vw; }
    .vivo-orden li { grid-template-columns: auto auto 1fr; }
    .vivo-orden .estado { grid-column: 3; justify-self: start; }
}

/* =================== v2.7: nuevos elementos y modos =================== */
/* Temas de la banda en escena */
.vivo-temas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(10px, 1.2vw, 20px); }
.vivo-tema { padding: 6px 14px; border-radius: 999px; font-size: clamp(0.75rem, 1vw, 1.15rem); font-weight: 700; background: rgba(148, 163, 184, 0.12); color: var(--gris); border: 1px solid transparent; }
.vivo-tema.hecho { color: var(--ok); background: rgba(74, 222, 128, 0.1); }
.vivo-tema.hecho::before { content: '✓ '; }
.vivo-tema.actual { color: #1a1200; background: var(--oro); box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.25); }

/* Tiempo límite */
.vivo-tiempo { width: min(620px, 100%); margin-top: clamp(12px, 1.4vw, 24px); }
.vivo-tiempo-barra { height: clamp(10px, 1vw, 16px); border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.vivo-tiempo-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ok), #a3e635); transition: width 1s linear; }
.vivo-tiempo-texto { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; gap: 12px; }
.vivo-tiempo-texto strong { font-size: clamp(1.4rem, 2.6vw, 3rem); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--oro); }
.vivo-tiempo-texto span { color: var(--gris); font-size: clamp(0.8rem, 1vw, 1.15rem); font-variant-numeric: tabular-nums; }
.vivo-tiempo.aviso .vivo-tiempo-barra span { background: linear-gradient(90deg, #facc15, #f97316); }
.vivo-tiempo.aviso .vivo-tiempo-texto span { color: #fdba74; }
.vivo-tiempo.excedido .vivo-tiempo-barra span { background: var(--rojo); }
.vivo-tiempo.excedido strong, .vivo-tiempo.excedido .vivo-tiempo-texto span { color: #fda4af; }
.vivo-tiempo.excedido { animation: alerta 1.2s ease-in-out infinite; }
@keyframes alerta { 50% { opacity: 0.65; } }

/* Avance de cada jurado */
.vivo-jurados { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(10px, 1.2vw, 18px); }
.vivo-jurado { padding: 5px 12px; border-radius: 10px; font-size: clamp(0.72rem, 0.9vw, 1rem); font-weight: 700; background: rgba(148, 163, 184, 0.12); color: var(--gris); }
.vivo-jurado.calificando { background: rgba(34, 211, 238, 0.14); color: var(--cian); }
.vivo-jurado.listo { background: rgba(74, 222, 128, 0.14); color: var(--ok); }
.vivo-escena-pie { margin-top: clamp(12px, 1.6vw, 26px); }

/* Orden agrupado por categoría */
.vivo-orden .vivo-orden-cat { display: block; padding: 10px 4px 2px; background: none; border: 0; color: var(--oro); font-size: clamp(0.7rem, 0.85vw, 0.95rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

/* QR para el público (en la cabecera) */
.vivo-qr { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: #fff; color: #0f172a; font-weight: 800; font-size: clamp(0.62rem, 0.75vw, 0.85rem); line-height: 1.15; flex-shrink: 0; }
.vivo-qr canvas { width: clamp(58px, 5.4vw, 96px) !important; height: auto !important; display: block; }

/* «En escena» siempre cabe en la pantalla */
.vivo-escena { justify-content: space-evenly; gap: clamp(4px, 0.8vh, 12px); padding-top: clamp(40px, 6vh, 70px); }
.vivo-escena-logo { width: clamp(80px, min(13vw, 22vh), 300px); margin-bottom: 0; }
.vivo-escena h2 { font-size: clamp(1.4rem, min(3.8vw, 7vh), 5rem); }
.vivo-escena > p { margin-top: 0; }
.vivo-temas, .vivo-tiempo, .vivo-jurados, .vivo-escena-pie { margin-top: 0; }
.vivo-tiempo-texto strong { font-size: clamp(1.2rem, min(2.4vw, 4.4vh), 3rem); }

/* Intermedio */
.vivo-intermedio { position: relative; display: flex; flex-direction: column; min-height: 0; }
.vivo-slide { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.slide { width: min(1300px, 100%); text-align: center; animation: entra 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slide h2 { font-size: clamp(1.4rem, 3vw, 3.4rem); font-weight: 900; color: var(--oro); margin-bottom: clamp(14px, 2vw, 30px); text-transform: uppercase; letter-spacing: 0.02em; }
.slide-vacio p { color: var(--gris); font-size: clamp(1rem, 1.8vw, 2rem); }
.slide-tabla { list-style: none; display: flex; flex-direction: column; gap: 10px; width: min(1000px, 100%); margin: 0 auto; }
.slide-tabla li { display: grid; grid-template-columns: 4em auto 1fr auto; align-items: center; gap: 16px; padding: clamp(10px, 1vw, 16px) 18px; border-radius: 14px; background: var(--panel); text-align: left; font-size: clamp(1rem, 1.6vw, 1.9rem); }
.slide-tabla li.top1 { border: 1px solid rgba(245, 179, 1, 0.6); background: var(--oro-suave); }
.slide-tabla .pos { font-weight: 900; text-align: center; color: var(--gris); }
.slide-tabla .pts { font-weight: 900; color: var(--cian); font-variant-numeric: tabular-nums; }
.slide-tabla .mini { width: clamp(36px, 3vw, 56px); height: clamp(36px, 3vw, 56px); border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
.slide-foto { max-width: 100%; max-height: calc(100vh - 260px); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); object-fit: contain; }
.slide-noticias article { max-width: 1000px; margin: 0 auto 18px; padding: 16px 22px; border-radius: 14px; background: var(--panel); text-align: left; }
.slide-noticias h3 { font-size: clamp(1.1rem, 1.8vw, 2rem); }
.slide-noticias p { color: var(--gris); margin-top: 6px; font-size: clamp(0.9rem, 1.2vw, 1.3rem); }
.slide-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 50px); }
.slide-logos img { max-height: clamp(70px, 10vw, 170px); max-width: clamp(140px, 18vw, 320px); object-fit: contain; background: #fff; border-radius: 14px; padding: 12px; }
.vivo-slide-puntos { display: flex; justify-content: center; gap: 8px; padding: 10px; }
.vivo-slide-puntos span { width: 10px; height: 10px; border-radius: 50%; background: rgba(148, 163, 184, 0.35); }
.vivo-slide-puntos span.activo { background: var(--oro); width: 26px; border-radius: 999px; }

/* Revelación */
.vivo-revelacion { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(14px, 2vw, 30px); min-height: 0; }
.vivo-rev-titulo { grid-column: 1 / -1; text-align: center; font-size: clamp(1.4rem, 3vw, 3.4rem); font-weight: 900; text-transform: uppercase; }
.vivo-rev-titulo span { color: var(--gris); font-weight: 700; }
.vivo-rev-titulo strong { color: var(--oro); }
.vivo-rev-destacado { display: flex; align-items: center; justify-content: center; }
.rev-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: clamp(20px, 3vw, 50px); border-radius: 24px; background: var(--panel); border: 1px solid var(--borde); width: 100%; }
.rev-card.top1 { border-color: var(--oro); box-shadow: 0 0 80px rgba(245, 179, 1, 0.35); background: linear-gradient(180deg, rgba(245, 179, 1, 0.18), var(--panel)); }
.rev-card.aparece { animation: revela 1.1s cubic-bezier(0.2, 0.9, 0.2, 1.2); }
@keyframes revela { 0% { opacity: 0; transform: scale(0.6) rotateX(60deg); filter: blur(10px); } 60% { opacity: 1; transform: scale(1.06); filter: none; } 100% { transform: none; } }
.rev-puesto { font-size: clamp(1.1rem, 2.2vw, 2.6rem); font-weight: 900; color: var(--oro); text-transform: uppercase; }
.rev-logo { width: clamp(110px, 14vw, 260px); height: clamp(110px, 14vw, 260px); border-radius: 50%; background: #fff; object-fit: contain; padding: 6%; box-shadow: 0 0 0 6px rgba(245, 179, 1, 0.5); }
.rev-nombre { font-size: clamp(1.4rem, 3.4vw, 4rem); font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.rev-pts { font-size: clamp(1.1rem, 2vw, 2.4rem); font-weight: 800; color: var(--cian); font-variant-numeric: tabular-nums; }
.rev-espera { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rev-espera span { font-size: clamp(3rem, 7vw, 8rem); animation: latido 1.2s infinite; }
.rev-espera strong { font-size: clamp(1.6rem, 3.4vw, 4rem); }
.rev-espera small { color: var(--gris); font-size: clamp(1rem, 1.4vw, 1.6rem); }
.vivo-rev-lista { list-style: none; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.vivo-rev-lista li { display: grid; grid-template-columns: 3.4em auto 1fr auto; align-items: center; gap: 12px; padding: clamp(8px, 0.9vw, 14px) 14px; border-radius: 12px; background: var(--panel); font-size: clamp(0.95rem, 1.4vw, 1.6rem); }
.vivo-rev-lista li.oculto { grid-template-columns: 3.4em 1fr; color: #475569; background: rgba(15, 23, 42, 0.45); border: 1px dashed rgba(148, 163, 184, 0.2); }
.vivo-rev-lista li.revelado { animation: entra 0.6s both; }
.vivo-rev-lista li.top1 { border: 1px solid var(--oro); background: var(--oro-suave); }
.vivo-rev-lista .pos { font-weight: 900; text-align: center; }
.vivo-rev-lista .pts { color: var(--cian); font-weight: 800; font-variant-numeric: tabular-nums; }
.vivo-rev-lista .mini { width: clamp(32px, 2.6vw, 48px); height: clamp(32px, 2.6vw, 48px); border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
.vivo-confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }

/* Resultados: pestañas de categoría */
.vivo-res-titulo span { color: var(--texto); }
.vivo-res-pestanas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vivo-res-pestanas span { padding: 6px 16px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: var(--gris); font-weight: 700; font-size: clamp(0.8rem, 1vw, 1.1rem); }
.vivo-res-pestanas span.activo { background: var(--oro); color: #1a1200; }

@media (min-width: 821px) {
    .vivo[data-modo="intermedio"], .vivo[data-modo="revelacion"] { height: 100vh; overflow: hidden; }
}
@media (max-width: 820px) {
    .vivo-revelacion { grid-template-columns: 1fr; }
    .vivo-qr { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .rev-card.aparece, .vivo-rev-lista li.revelado, .slide, .vivo-tiempo.excedido { animation: none; }
}

/* Revelación e intermedio: siempre dentro de la pantalla */
.vivo-revelacion { grid-template-rows: auto minmax(0, 1fr); }
.vivo-rev-titulo { font-size: clamp(1.2rem, min(3vw, 5.5vh), 3.4rem); }
.vivo-rev-destacado { min-height: 0; overflow: hidden; }
.rev-card { padding: clamp(12px, 2.6vh, 44px); gap: clamp(4px, 1.2vh, 14px); max-height: 100%; }
.rev-logo { width: clamp(80px, min(14vw, 24vh), 260px); height: clamp(80px, min(14vw, 24vh), 260px); }
.rev-nombre { font-size: clamp(1.2rem, min(3.4vw, 6vh), 4rem); }
.rev-puesto { font-size: clamp(1rem, min(2.2vw, 4vh), 2.6rem); }
.rev-pts { font-size: clamp(1rem, min(2vw, 3.6vh), 2.4rem); }
.vivo-rev-lista { min-height: 0; }
.vivo-rev-lista li { padding: clamp(6px, 1.1vh, 14px) 14px; font-size: clamp(0.9rem, min(1.4vw, 2.6vh), 1.6rem); }
.slide { max-height: 100%; }
.slide h2 { font-size: clamp(1.2rem, min(3vw, 5.4vh), 3.4rem); margin-bottom: clamp(8px, 2vh, 30px); }
.slide-tabla { gap: clamp(4px, 1vh, 10px); }
.slide-tabla li { padding: clamp(6px, 1.2vh, 16px) 18px; font-size: clamp(0.95rem, min(1.6vw, 3.2vh), 1.9rem); }
.slide-tabla .mini { width: clamp(30px, min(3vw, 5.5vh), 56px); height: clamp(30px, min(3vw, 5.5vh), 56px); }
.vivo-rev-destacado { overflow: visible; }
.rev-card.top1 { box-shadow: 0 0 50px rgba(245, 179, 1, 0.28); }
.vivo-podio { display: flex; justify-content: center; align-items: flex-end; }
.vivo-podio > div { flex: 0 1 33%; max-width: 420px; }

/* ===== Favorito del público y transmisión ===== */
.vivo-qr.votar { background: linear-gradient(135deg, #fff1f2, #ffffff); box-shadow: 0 0 0 3px #f43f5e, 0 0 30px rgba(244, 63, 94, 0.45); }
.vivo-qr.votar span b { color: #e11d48; font-size: 1.15em; }
.vivo-tv { margin: 0 0 12px; }
.vivo-tv-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(148, 163, 184, 0.2); }
.vivo-tv-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vivo-votar { display: block; margin: 0 0 12px; padding: 14px; border-radius: 14px; text-align: center; text-decoration: none; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 10px 24px rgba(244, 63, 94, 0.3); }
.vivo-votar[hidden], .vivo-tv[hidden], .vivo-favorito[hidden] { display: none; }
.vivo-favorito { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 14px auto 0; padding: 12px 22px; max-width: 520px; border-radius: 16px; background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(190, 18, 60, 0.15)); border: 1px solid rgba(244, 63, 94, 0.5); text-align: center; }
.vivo-favorito span { color: #fda4af; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.vivo-favorito strong { font-size: min(2.2vw, 3.2vh, 1.6rem); color: #fff; }
.vivo-favorito small { color: #fecdd3; }
@media (max-width: 819px) { .vivo-favorito strong { font-size: 1.2rem; } }

/* ===== Interacción del público ===== */
.vivo-encuesta { position: fixed; right: max(16px, 1.6vw); bottom: calc(min(9vh, 90px) + 10px); z-index: 30; width: min(34vw, 560px); padding: min(1.6vw, 22px); border-radius: 18px; background: rgba(8, 13, 26, 0.95); border: 1px solid rgba(245, 179, 1, 0.5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: vivo-encuesta-entra 0.4s ease-out; }
.vivo-encuesta[hidden] { display: none; }
@keyframes vivo-encuesta-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.vivo-encuesta-tipo { display: block; color: #fcd34d; font-weight: 800; font-size: min(1vw, 0.85rem); letter-spacing: 0.12em; text-transform: uppercase; }
.vivo-encuesta strong { display: block; margin: 4px 0 10px; font-size: min(1.6vw, 2.2vh, 1.5rem); line-height: 1.2; }
.vivo-enc-fila { margin-bottom: 8px; }
.vivo-enc-txt { display: flex; justify-content: space-between; gap: 10px; font-size: min(1.15vw, 1.7vh, 1.05rem); }
.vivo-enc-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivo-enc-barra { height: min(1vw, 12px); margin-top: 4px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.vivo-enc-barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #6366f1); transition: width 0.6s ease; }
.vivo-enc-fila.lider .vivo-enc-barra span { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.vivo-encuesta small { display: block; margin-top: 6px; color: #94a3b8; font-size: min(1vw, 1.5vh, 0.9rem); }
.vivo-aplausos { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: min(1vh, 10px) 0; padding: min(0.9vh, 10px) 16px; border-radius: 999px; background: rgba(245, 179, 1, 0.12); border: 1px solid rgba(245, 179, 1, 0.4); }
.vivo-aplausos[hidden] { display: none; }
.vivo-aplausos-t { color: #fcd34d; font-weight: 800; font-size: min(0.9vw, 1.4vh, 0.85rem); letter-spacing: 0.12em; text-transform: uppercase; }
.vivo-aplausos-n { display: flex; gap: 16px; font-size: min(1.6vw, 2.4vh, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.vivo-aplausos.latido { animation: vivo-latido 0.5s ease-out; }
@keyframes vivo-latido { 30% { transform: scale(1.08); box-shadow: 0 0 30px rgba(245, 179, 1, 0.5); } }
.vivo-aplaudida { background: linear-gradient(135deg, rgba(245, 179, 1, 0.2), rgba(180, 83, 9, 0.15)); border-color: rgba(245, 179, 1, 0.5); }
.vivo-aplaudida span { color: #fcd34d; }
.vivo-min-cel { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(148, 163, 184, 0.16); }
.vivo-min-cel[hidden] { display: none; }
.vivo-min-cel h3 { margin: 0 0 6px; font-size: 0.95rem; }
.vivo-min-cel ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vivo-min-cel li { display: flex; gap: 8px; font-size: 0.88rem; line-height: 1.35; }
.vivo-min-cel time { color: #fcd34d; font-weight: 800; flex-shrink: 0; }
.vivo-min-cel a { display: inline-block; margin-top: 8px; color: #67e8f9; font-weight: 700; font-size: 0.85rem; }
@media (max-width: 819px) {
    .vivo-encuesta { position: static; width: auto; margin: 0 0 12px; padding: 14px; }
    .vivo-encuesta-tipo { font-size: 0.72rem; } .vivo-encuesta strong { font-size: 1.05rem; }
    .vivo-enc-txt { font-size: 0.9rem; } .vivo-enc-barra { height: 10px; } .vivo-encuesta small { font-size: 0.8rem; }
    .vivo-aplausos-t { font-size: 0.72rem; } .vivo-aplausos-n { font-size: 1.15rem; }
}
@media (min-width: 820px) {
    .vivo-votar { display: none !important; }            /* en el proyector se usa el QR */
    .vivo-escena { position: relative; }
    .vivo-aplausos { position: absolute; top: min(1.6vh, 18px); right: min(1.2vw, 18px); margin: 0; z-index: 2; }
}

/* Transmisión: botón para activar el sonido (los navegadores no permiten sonido automático) */
.tv-sonido { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px; background: rgba(220, 38, 38, 0.95); color: #fff; font: 800 1rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); animation: tv-sonido-latido 1.6s ease-in-out infinite; white-space: nowrap; }
.tv-sonido span { font-size: 1.2rem; }
@keyframes tv-sonido-latido { 50% { transform: translateX(-50%) scale(1.06); } }

/* Hora aproximada de cada banda pendiente */
.vivo-orden .info small.hora { display: block; color: #fcd34d; font-weight: 700; }