/* UP MUSIC TV · pantalla del canal (señal a pantalla completa con gráficos de TV)
   "u" = 1 % del ancho del escenario 16:9: se ve igual en un celular, en Wix o en un televisor. */
:root {
  --u: min(1vw, 1.7778vh);
  --verde: #3DF03D;
  --magenta: #C42060;
  --blanco: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { display: grid; place-items: center; font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; color: var(--blanco); }
[hidden] { display: none !important; }

.escenario { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); overflow: hidden; background: #000; }
/* El reproductor es 3 veces más alto que la pantalla y queda centrado: el video (que se ajusta al ancho)
   se ve completo, y la barra de título, el logo y los botones de YouTube quedan por fuera del cuadro visible. */
.escenario iframe, #yt { position: absolute; left: 0; top: -100%; width: 100%; height: 300%; border: 0; pointer-events: none; }
.sin-senal iframe { visibility: hidden; }

/* Capa del toque: por encima del video, por debajo de los gráficos */
.capa { position: absolute; inset: 0; z-index: 2; cursor: pointer; }

/* Cortina entre videos */
.cortina { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1);
  background: radial-gradient(circle at 50% 42%, #10240f 0%, #000 72%); opacity: 0; pointer-events: none; transition: opacity .35s; }
.sin-senal .cortina, .cierre .cortina { opacity: 1; }
.cierre .mosca { opacity: 0; }
.cortina img { width: calc(var(--u) * 26); height: auto; animation: latido 1.6s ease-in-out infinite; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(61, 240, 61, .35)); }
@keyframes latido { 50% { transform: scale(1.05); } }
.cortina-texto { font-size: calc(var(--u) * 2.4); font-weight: 900; letter-spacing: calc(var(--u) * .4); text-transform: uppercase; text-align: center; }
.cortina-sub { font-size: calc(var(--u) * 1.7); color: var(--verde); font-weight: 700; text-align: center; max-width: 80%; }

/* Mosca: logo 3D en la mitad del lado derecho, pegado a la derecha */
.mosca { position: absolute; z-index: 5; right: calc(var(--u) * 1.4); top: 50%; transform: translateY(-50%);
  width: calc(var(--u) * 14); height: calc(var(--u) * 10.36); pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * .35) calc(var(--u) * .7) rgba(0, 0, 0, .55)); }
.sin-senal .mosca { opacity: 0; }

.en-vivo { position: absolute; z-index: 5; left: calc(var(--u) * 2); top: calc(var(--u) * 2); display: flex; align-items: center; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .3) calc(var(--u) * .9); background: rgba(196, 32, 96, .92); border-radius: calc(var(--u) * 2);
  font-weight: 900; font-size: calc(var(--u) * 1.05); letter-spacing: calc(var(--u) * .22); pointer-events: none; }
.punto { width: calc(var(--u) * .65); height: calc(var(--u) * .65); border-radius: 50%; background: #fff; animation: parpadeo 1.2s infinite; }
@keyframes parpadeo { 50% { opacity: .25; } }
.aviso { position: absolute; z-index: 5; left: calc(var(--u) * 2); top: calc(var(--u) * 4.6); padding: calc(var(--u) * .3) calc(var(--u) * .9);
  background: var(--verde); color: #04120a; font-weight: 900; font-size: calc(var(--u) * 1.05); letter-spacing: calc(var(--u) * .2); border-radius: calc(var(--u) * .3); pointer-events: none; }

/* Tercio inferior: AHORA / A CONTINUACIÓN */
/* A CONTINUACIÓN: tarjeta pequeña arriba a la derecha, solo en los últimos segundos del video */
.proxima { position: absolute; z-index: 5; right: calc(var(--u) * 2); top: calc(var(--u) * 6.4); max-width: calc(var(--u) * 30);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.2); background: rgba(0, 0, 0, .72); border-left: calc(var(--u) * .3) solid var(--verde);
  border-radius: calc(var(--u) * .45); pointer-events: none; line-height: 1.15;
  opacity: 0; transform: translateX(8%); transition: opacity .6s, transform .6s; }
.proxima.visible { opacity: 1; transform: none; }
.proxima-rotulo { font-size: calc(var(--u) * .9); font-weight: 900; letter-spacing: calc(var(--u) * .25); color: var(--verde); }
.proxima-artista { font-size: calc(var(--u) * 1.6); font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proxima-cancion { font-size: calc(var(--u) * 1.1); font-weight: 600; color: #d9e4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Franja AHORA: fija abajo, a lo ancho, todo el tiempo */
.tercio { position: absolute; z-index: 5; left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 3.6); height: calc(var(--u) * 5.2);
  display: flex; align-items: stretch; pointer-events: none; border-radius: calc(var(--u) * .45); overflow: hidden; }
.tercio-datos { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cambio .tercio-datos { animation: entrar .7s ease-out; }
@keyframes entrar { from { transform: translateY(40%); opacity: 0; } }
.tercio-etiqueta { display: flex; align-items: center; padding: 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 1.3); background: var(--verde); color: #04120a;
  font-weight: 900; font-size: calc(var(--u) * 1.3); letter-spacing: calc(var(--u) * .28); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.tercio-datos { min-width: 0; padding: calc(var(--u) * .7) calc(var(--u) * 1.8) calc(var(--u) * .7) calc(var(--u) * 1); line-height: 1.1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .62)); border-bottom: calc(var(--u) * .22) solid var(--verde); }
.artista { font-size: calc(var(--u) * 2.3); font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cancion { font-size: calc(var(--u) * 1.45); font-weight: 600; color: var(--verde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sonido */
.toca-sonido { position: absolute; z-index: 6; right: calc(var(--u) * 2); bottom: calc(var(--u) * 10.2); display: flex; align-items: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.2); border: 0; border-radius: calc(var(--u) * 2); cursor: pointer;
  background: rgba(0, 0, 0, .72); color: #fff; font-family: inherit; font-weight: 800; font-size: calc(var(--u) * 1.05); letter-spacing: calc(var(--u) * .12);
  box-shadow: 0 0 0 calc(var(--u) * .15) rgba(61, 240, 61, .8); animation: llamar 2s ease-in-out infinite; }
.toca-sonido svg { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); fill: var(--verde); }
@keyframes llamar { 50% { box-shadow: 0 0 0 calc(var(--u) * .5) rgba(61, 240, 61, .25); } }
.abrir-sonido { position: absolute; z-index: 6; right: calc(var(--u) * 2); bottom: calc(var(--u) * 10.2); padding: calc(var(--u) * .6) calc(var(--u) * 1);
  background: var(--magenta); color: #fff; border-radius: calc(var(--u) * .5); text-decoration: none; font-size: calc(var(--u) * 1.05); }

/* Franja de mensajes */
.ticker { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 3); background: rgba(0, 0, 0, .62); display: flex; pointer-events: none; }
.ticker-ventana { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-pista { display: flex; white-space: nowrap; will-change: transform; animation: desplazar var(--duracion, 40s) linear infinite; }
.ticker-pista span { font-size: calc(var(--u) * 1.3); font-weight: 700; padding-right: calc(var(--u) * 6); }
.ticker-pista span::before { content: '●'; color: var(--verde); margin-right: calc(var(--u) * 1.2); font-size: .8em; }
@keyframes desplazar { to { transform: translateX(-50%); } }
.sin-ticker .tercio { bottom: calc(var(--u) * 1.6); }
.sin-ticker .toca-sonido, .sin-ticker .abrir-sonido { bottom: calc(var(--u) * 8.2); }

@media (prefers-reduced-motion: reduce) { .ticker-pista, .cortina img, .punto, .toca-sonido { animation: none; } }

/* Pantalla completa del canal: botón propio, esquina superior derecha, mismo tamaño relativo en cualquier pantalla */
.completa { position: absolute; z-index: 7; right: calc(var(--u) * 2); top: calc(var(--u) * 2); width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6);
  min-width: 34px; min-height: 34px; display: grid; place-items: center; border: 0; border-radius: calc(var(--u) * .6); cursor: pointer;
  background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 calc(var(--u) * .12) rgba(61, 240, 61, .7); transition: opacity .4s, background .2s, transform .2s; }
.completa:hover { background: rgba(0, 0, 0, .8); transform: scale(1.06); }
.completa svg { width: 62%; height: 62%; fill: var(--verde); }
.completa .cerrar, .en-completa .completa .abrir { display: none; }
.en-completa .completa .cerrar { display: block; }
.quieto .completa { opacity: 0; }
.quieto, .quieto .capa { cursor: none; }

/* Toque directo: el primer toque llega al reproductor para que el navegador permita el sonido */
.toque-directo #yt { pointer-events: auto; cursor: pointer; }
.toque-directo .capa { pointer-events: none; }
.toque-directo::after { content: attr(data-aviso); position: absolute; z-index: 6; right: calc(var(--u) * 2); bottom: calc(var(--u) * 10.2);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2); background: rgba(0, 0, 0, .72); color: #fff; font-weight: 800;
  font-size: calc(var(--u) * 1.05); letter-spacing: calc(var(--u) * .12); box-shadow: 0 0 0 calc(var(--u) * .15) rgba(61, 240, 61, .8);
  pointer-events: none; animation: llamar 2s ease-in-out infinite; }