/* Pantalla gigante (TV/LED) · Cubic · concepto «Transmisión»
   Escala con el ancho (1vw ≈ 19 px en 1920). Se ve a 3 metros: textos de 2,5vw o más en lo importante,
   márgenes seguros del 4 % en los lados, animaciones lentas y nada interactivo. */
body.tv { overflow: hidden; height: 100dvh; font-size: clamp(14px, 1.15vw, 26px); background: #000; }
body.tv > .ambiente { z-index: 0; }
.fondo-tv { position: fixed; inset: 0; z-index: 0; }
.fondo-tv .senal { opacity: .42; }
body.tv .banner-demo { position: fixed; left: auto; right: 2vw; bottom: 3.4vw; z-index: 6; height: auto; padding: .4vw .8vw; font-size: .75vw; line-height: 1.3; opacity: .85; }
#tv { position: relative; z-index: 2; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 1.2vw; padding: 1.4vw 4vw 0; }
#pantalla-completa { position: fixed; right: 12px; bottom: 7vw; opacity: .2; z-index: 5; }
#pantalla-completa:hover { opacity: 1; }

/* Cabecera */
.tv-cab { display: flex; align-items: center; gap: 2.4vw; }
.tv-cab .logo { font-size: 3.4vw; }
.tv-cab .temp { box-shadow: -1px 0 0 var(--line-2); padding-left: 2.2vw; }
.tv-cab .temp b { display: block; font: 800 4.2vw/.84 var(--f-display); font-stretch: 50%; text-transform: uppercase; color: #fff; text-shadow: .2vw 0 0 var(--primary); }
.tv-cab .temp span { display: flex; align-items: center; gap: .8vw; margin-top: .5vw; color: #e0dcd6; font-size: 1.15vw; }
.tv-cab .temp .eq { height: 1vw; }
.tv-cab .reloj { margin-left: auto; font: 800 5vw/1 var(--f-display); font-stretch: 52%; letter-spacing: .01em; }
.tv-cab .qr-cta { display: flex; align-items: center; gap: 1vw; padding: .7vw 1vw; background: var(--papel); color: var(--tinta); }
.tv-cab .qr-cta .q { width: 6.4vw; background: #fff; padding: .25vw; }
.tv-cab .qr-cta p { font: 700 1.5vw/1.05 var(--f-display); font-stretch: 64%; text-transform: uppercase; letter-spacing: .03em; max-width: 9vw; }
.tv-cab .qr-cta p b { color: var(--primary); }

/* Pedidos listos: números gigantes con el corrimiento rojo de la señal */
.tv-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 1vw; min-height: 0; }
.listos { background: rgba(0, 0, 0, .78); box-shadow: inset 0 0 0 1px var(--line); padding: 1.6vw; display: flex; flex-direction: column; min-height: 0; backdrop-filter: blur(3px); }
.listos > h1 { font-size: 6.4vw; line-height: .84; }
.listos .sub-listos { margin-top: .6vw; color: #e0dcd6; font-size: 1.3vw; }
.cols-barra { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.6vw; margin-top: 1.4vw; flex: 1; min-height: 0; }
.col-barra { box-shadow: -2px 0 0 var(--line-2); padding-left: 1.4vw; display: flex; flex-direction: column; min-height: 0; }
.col-barra h2 { font: 800 3.4vw/.86 var(--f-display); font-stretch: 50%; text-transform: uppercase; color: var(--text); }
.col-barra .ubi { font-size: 1.05vw; color: var(--muted); margin: .4vw 0 1.2vw; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: .8vw; align-content: start; }
.numero { font: 800 7.6vw/.86 var(--f-display); font-stretch: 50%; text-align: center; padding: .6vw 0 .4vw; color: #fff; background: color-mix(in srgb, var(--primary) 16%, #000); box-shadow: inset 0 0 0 .14vw var(--primary);
  text-shadow: .3vw 0 0 var(--primary), -.18vw 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
.numero.nuevo { animation: pop 1s cubic-bezier(.2, 1.4, .4, 1) both, brilloN 1.6s 1s 4; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes brilloN { 50% { background: var(--primary); } }
.prep { margin-top: auto; padding-top: 1vw; font-size: 1.3vw; color: var(--muted); }
.prep b { font: 800 2.6vw/1 var(--f-display); font-stretch: 52%; color: var(--text); margin-right: .7vw; }
.vacio-tv { grid-column: 1 / -1; color: var(--muted); font-size: 1.2vw; padding: 1vw 0; }

/* Columna lateral */
.lado-tv { display: flex; flex-direction: column; gap: 1vw; min-height: 0; overflow: hidden; }
.tv-card { position: relative; background: rgba(0, 0, 0, .8); box-shadow: inset 0 0 0 1px var(--line); padding: 1.3vw; overflow: hidden; backdrop-filter: blur(3px); }
.tv-card .eyebrow { font-size: 1vw; color: #e0dcd6; }
.tv-card h3 { font: 800 2.8vw/.86 var(--f-display); font-stretch: 50%; text-transform: uppercase; margin-top: .4vw; }
.aforo-tv { display: flex; align-items: center; gap: 1.4vw; }
.anillo { width: 8.4vw; height: 8.4vw; flex: none; }
.anillo circle { fill: none; stroke-width: 10; }
.anillo .fondo { stroke: var(--surface-2); }
.anillo .valor { stroke: var(--primary); stroke-linecap: butt; transition: stroke-dasharray 1s; }
.anillo text { font: 800 30px var(--f-display); font-stretch: 52%; fill: var(--text); text-anchor: middle; dominant-baseline: central; }
.aforo-tv p { color: var(--muted); font-size: 1.05vw; margin-top: .3vw; }
.promo-tv { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, #000), rgba(0, 0, 0, .85)); box-shadow: inset 0 0 0 .12vw var(--primary); }
.promo-tv h3 { font-size: 3vw; }
.promo-tv .cuenta { font: 800 2.6vw var(--f-display); font-stretch: 52%; color: #fff; }
.sorteo-tv .cuenta { font: 800 2.6vw var(--f-display); font-stretch: 52%; color: #fff; text-shadow: .15vw 0 0 var(--primary); }
.cubo-tv { display: flex; align-items: center; gap: 1.6vw; }
.cubo-tv .pista-tv { font-weight: 700; font-size: 1.2vw; margin: .3vw 0; }
.cubo-tv .cuenta { font: 800 2.4vw var(--f-display); font-stretch: 52%; color: #fff; text-shadow: .15vw 0 0 var(--primary); }
.looks-tv { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5vw; margin-top: .7vw; }
.looks-tv figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.looks-tv img { width: 100%; height: 100%; object-fit: cover; }
.looks-tv figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .4vw; font-size: .85vw; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.looks-tv figcaption b { color: var(--accent); }

/* Cinta roja inferior (la misma de la web y la app, en grande) */
.ticker { margin: 0 -4vw; min-width: 0; overflow: hidden; }
.ticker .marquesina { height: 3.8vw; }
.ticker .marquesina span { font-size: 2vw; }
.ticker .marquesina .cinta-pista { gap: 2.4vw; padding-left: 2.4vw; }
.ticker .marquesina .sep-c svg { width: 1.6vw; height: 1.6vw; }

/* Superposiciones de la TV */
.ov-tv { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vw; text-align: center; padding: 3vw 5vw; background: radial-gradient(60% 55% at 50% 40%, color-mix(in srgb, var(--primary) 34%, #000), #000 72%); animation: aparecer .4s; }
.ov-tv .eyebrow { font-size: 1.5vw; color: #e8e2da; }
.ov-tv h1 { font: 800 6vw/.84 var(--f-display); font-stretch: 50%; text-transform: uppercase; }
.ov-tv .premio { font-size: 1.8vw; color: #e0dcd6; }
.ov-tv .escena3d { margin: 2.6vw auto 3.2vw; }
.ov-tv .giro { font: 800 9vw/.86 var(--f-display); font-stretch: 50%; text-transform: uppercase; min-height: 1em; }
.ov-tv .giro.ganador { color: #fff; text-shadow: .5vw 0 0 var(--primary), 0 0 4vw color-mix(in srgb, var(--primary) 60%, transparent); animation: latido 1.6s ease-in-out infinite; }
.ov-tv .promo-g { font: 800 9vw/.86 var(--f-display); font-stretch: 50%; color: #fff; text-transform: uppercase; text-shadow: .5vw 0 0 var(--primary); }
.ov-tv .ded { font: 700 3.6vw/1.25 var(--f-body); max-width: 80vw; }
.ov-tv .podio { display: flex; gap: 2vw; align-items: flex-end; }
.ov-tv .podio figure { margin: 0; text-align: center; }
.ov-tv .podio img { object-fit: cover; box-shadow: 0 0 0 .25vw var(--papel); }
.ov-tv .podio .p1 img { width: 15vw; height: 20vw; box-shadow: 0 0 0 .25vw var(--primary); }
.ov-tv .podio .p2 img, .ov-tv .podio .p3 img { width: 10vw; height: 13.3vw; opacity: .9; }
.ov-tv .podio figcaption { font: 700 1.3vw var(--f-body); margin-top: .8vw; }
.ov-tv .titulo-rev { font-size: 9vw; }
/* Señal viva en la TV: el cubo de la tarjeta, el sorteo y la revelación */
.cubo-sv { flex: none; width: 9vw; height: 9vw; display: grid; place-items: center; }
.sorteo-sv { width: 70vw; height: 46vh; display: grid; place-items: center; }
.sorteo-sv .giro { position: relative; z-index: 2; text-shadow: 0 .3vw 2vw #000; }
.revelar-sv { width: 76vw; height: 56vh; display: grid; place-items: center; }
.confeti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 81; }
.confeti i { position: absolute; top: -20px; width: 14px; height: 14px; background: var(--c); animation: caer var(--d) linear forwards; transform: rotate(45deg); }
@keyframes caer { to { transform: translateY(110vh) rotate(540deg); } }
.estallido { animation: estallar 1.1s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes estallar { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.6) rotate(25deg); opacity: 1; } 100% { transform: scale(3) rotate(60deg); opacity: 0; } }