/* Receptor de Life Music: el modo ambiente en el TV.
   Todo en negro con luz de la caratula; tipografia de sala (se lee a tres
   metros); zona segura del 4 % por si el TV recorta el borde (overscan).
   Las transiciones son de opacidad y transform a proposito: son las unicas
   que un Chromecast viejo anima sin tirones. */

:root {
  --texto: #F2F5F3;
  --texto-2: rgba(242, 245, 243, 0.62);
  --texto-3: rgba(242, 245, 243, 0.34);
  --verde: #34D399;
  --seguro: 4vmin;
  --display: "Google Sans", "Product Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --suave: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--display); color: var(--texto); -webkit-font-smoothing: antialiased; }

/* El reproductor de CAF tiene que existir para que el TV reproduzca, pero no se ve. */
cast-media-player { display: none; }

/* Fondo: un lienzo pequeno escalado a toda la pantalla. Sin filtros CSS a
   proposito: un blur de pantalla completa por fotograma era lo mas caro de la
   pagina en un TV flojo, y las luces ya son degradados suaves. */
#fondo {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  image-rendering: auto;
}

#escena { position: fixed; inset: 0; padding: var(--seguro); }

.marca {
  position: absolute; top: var(--seguro); right: var(--seguro); z-index: 3;
  display: flex; align-items: center; gap: 0.8vmin;
  font-size: 2.1vmin; font-weight: 600; letter-spacing: 0.02em; color: var(--texto-2);
}
.marca img { width: 2.8vmin; height: 2.8vmin; border-radius: 0.7vmin; }

/* ── Bienvenida (sin cancion) ─────────────────────────────────────────── */
#bienvenida {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vmin;
  text-align: center;
  transition: opacity 700ms var(--suave), transform 700ms var(--suave), visibility 0s linear 700ms;
}
#escena.con-cancion #bienvenida { opacity: 0; transform: scale(1.06); visibility: hidden; }
#escena.vacia #bienvenida { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

/* El logo llega primero, con un halo que respira; el texto sube detras. */
.logo-halo { position: relative; width: 14vmin; height: 14vmin; margin-bottom: 1.6vmin; animation: aparece 900ms var(--suave) both; }
.logo-halo::before {
  content: ""; position: absolute; inset: -3vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.35) 0%, rgba(52, 211, 153, 0) 70%);
  animation: respira 3200ms ease-in-out infinite;
}
.logo-halo img { position: relative; width: 100%; height: 100%; border-radius: 3vmin; box-shadow: 0 2vmin 6vmin rgba(0,0,0,0.6); }
#bienvenida .saludo { font-size: 2.4vmin; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde); animation: sube 700ms var(--suave) 250ms both; }
#bienvenida h1 { font-size: 5.6vmin; font-weight: 700; letter-spacing: -0.02em; animation: sube 700ms var(--suave) 380ms both; }
#bienvenida .saludo-estado {
  margin-top: 1.4vmin; padding: 1vmin 2.4vmin; border-radius: 10vmin;
  font-size: 2.3vmin; color: var(--texto-2);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  animation: sube 700ms var(--suave) 520ms both;
  transition: color 400ms, border-color 400ms, background 400ms;
}
#bienvenida .saludo-estado.listo { color: var(--texto); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.12); }
#bienvenida .estado { position: absolute; bottom: 0; left: 0; right: 0; font-size: 1.6vmin; color: var(--texto-3); font-family: monospace; word-break: break-word; }

@keyframes aparece { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sube { from { opacity: 0; transform: translateY(2.4vmin); } to { opacity: 1; transform: none; } }
@keyframes respira { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }

/* ── Ambiente (con cancion) ───────────────────────────────────────────── */
#ambiente {
  position: absolute; inset: var(--seguro);
  display: grid; grid-template-columns: 40fr 60fr; gap: 6vmin; align-items: center;
  transition: opacity 800ms var(--suave) 150ms, transform 800ms var(--suave) 150ms, visibility 0s linear 950ms;
}
#escena.vacia #ambiente { opacity: 0; transform: scale(0.96); visibility: hidden; }
#escena.con-cancion #ambiente { opacity: 1; transform: none; visibility: visible; }
#escena.sin-letra #ambiente { grid-template-columns: 1fr; justify-items: center; }
#escena.sin-letra #derecha { display: none; }

#izquierda { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6vmin; min-width: 0; }
#escena.sin-letra #izquierda { align-items: center; text-align: center; }

#caratula-marco {
  position: relative; width: 52vmin; height: 52vmin; border-radius: 3vmin; overflow: hidden;
  background: #111; box-shadow: 0 3vmin 9vmin rgba(0,0,0,0.65);
  transition: transform 220ms ease-out;
}
/* Cada caratula nueva entra encima de la anterior y se funde; la vieja se retira despues. */
#caratula-marco .caratula {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 1; transform: none;
  transition: opacity 800ms var(--suave), transform 800ms var(--suave);
}
#caratula-marco .caratula.entra { opacity: 0; transform: scale(1.06); }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms; pointer-events: none; }
#caratula-marco.con-canvas #canvas { opacity: 1; }
#escena.pausa #caratula-marco { transform: scale(0.96); }

#titulo {
  font-size: 4.2vmin; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  max-width: 52vmin; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1vmin;
}
#artista { font-size: 2.6vmin; color: var(--texto-2); max-width: 52vmin; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Texto que cambia: sale hacia arriba, entra desde abajo (ponerTexto en receptor.js). */
#titulo, #artista { transition: opacity 240ms ease, transform 420ms var(--suave); }
#titulo.sale, #artista.sale { opacity: 0; transform: translateY(-0.8vmin); }
#titulo.entra, #artista.entra { opacity: 0; transform: translateY(1.2vmin); transition: none; }

#progreso { width: 52vmin; height: 0.5vmin; border-radius: 1vmin; background: rgba(255,255,255,0.16); overflow: hidden; margin-top: 0.6vmin; }
#progreso-barra { width: 0; height: 100%; background: var(--texto); border-radius: 1vmin; transition: width 400ms linear; }

/* Letra: la linea viva al centro, las demas se desvanecen hacia arriba y abajo. */
#derecha { position: relative; height: 84vh; min-width: 0; }
#letra-ventana { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
/* Los paneles de vidrio solo existen en el tema Cristal. */
.vidrio { display: none; }
#letra { position: absolute; left: 0; right: 0; top: 50%; opacity: 1;
  transition: transform 420ms var(--suave), opacity 320ms ease; will-change: transform; }
#letra.oculta { opacity: 0; }
#letra .linea {
  font-size: 4.6vmin; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--texto-3); padding: 1.2vmin 0;
  transition: color 300ms ease, transform 300ms ease, opacity 300ms ease;
  transform-origin: left center;
}
#letra .linea.viva { color: var(--texto); transform: scale(1.04); }
#letra .linea.pasada { color: var(--texto-3); }
#letra .linea .p { transition: color 120ms linear; }
#letra .linea.viva .p { color: rgba(242, 245, 243, 0.45); }
#letra .linea.viva .p.dicha { color: var(--texto); }
#sin-letra { display: none; font-size: 2.6vmin; color: var(--texto-3); }

/* TV vertical o pantallas raras: apilar. */
@media (orientation: portrait) {
  #ambiente { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
  #izquierda { align-items: center; text-align: center; }
  #derecha { height: 46vh; }
  #caratula-marco { width: 40vmin; height: 40vmin; }
}

/* ── Saludo de entrada (el de la app, al conectar el telefono) ─────────── */
#saludo-pantalla {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 12vmin;
  background: radial-gradient(ellipse at 50% 42%, rgba(52, 211, 153, 0.18) 0%, rgba(52, 211, 153, 0) 60%), rgba(3, 5, 4, 0.9);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--suave), visibility 0s linear 500ms;
}
#saludo-pantalla.visible { opacity: 1; visibility: visible; transition-delay: 0s; }
#saludo-cabecera {
  font-size: 2.5vmin; font-weight: 600; letter-spacing: 0.14em; color: var(--verde);
  margin-bottom: 2.6vmin; transform: translateY(1.6vmin); transition: transform 520ms var(--suave);
}
#saludo-frase {
  font-size: 6.2vmin; font-style: italic; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em;
  max-width: 82vw; transform: translateY(1.6vmin); transition: transform 640ms var(--suave);
}
#saludo-pantalla.visible #saludo-cabecera, #saludo-pantalla.visible #saludo-frase { transform: none; }

/* ══ Temas ═══════════════════════════════════════════════════════════════
   El tema es una clase en <body>: tema-ambiente (el de siempre),
   tema-cristal y tema-escenario. Al cambiar, la escena se funde a negro y
   vuelve con el tema nuevo (receptor.js, ponerTema). */
#escena { transition: opacity 380ms var(--suave); }
#escena.cambiando-tema { opacity: 0; }

/* ── Cristal liquido ─────────────────────────────────────────────────────
   La receta del cristal de la app (la de Kyant): el fondo refractado por
   una lente, mas vivo que alrededor, con un tinte, el borde que brilla y un
   hilo de color en las orillas. El fondo refractado no es backdrop-filter
   (carisimo en un Chromecast): lo pinta receptor.js en el <canvas.vidrio>
   de cada panel a partir del lienzo del fondo, que es nuestro. */
body.tema-cristal #ambiente { gap: 4vmin; }
body.tema-cristal #izquierda,
body.tema-cristal #derecha {
  --radio-vidrio: 4.2vmin;
  position: relative;
  border-radius: var(--radio-vidrio);
  box-shadow:
    0 2.4vmin 7vmin rgba(0, 0, 0, 0.38),        /* profundidad */
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),  /* canto */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),  /* brillo de arriba */
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  isolation: isolate;
}
body.tema-cristal .vidrio {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--radio-vidrio); z-index: -1;
}
/* El canto de luz: un borde que brilla fuerte en la esquina de arriba a la
   izquierda y en la de abajo a la derecha, y casi nada en medio, como el
   cristal de la app (un degradado recortado a un anillo de 1,5 px). El
   reflejo difuso de la superficie lo pinta receptor.js dentro del vidrio. */
body.tema-cristal #izquierda::before,
body.tema-cristal #derecha::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radio-vidrio); pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.10) 28%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.38) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Aberracion cromatica: rojo y cian desplazados en las orillas, muy sutil. */
body.tema-cristal.aberracion #izquierda::after,
body.tema-cristal.aberracion #derecha::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radio-vidrio); pointer-events: none;
  box-shadow: inset 2px 1px 1px -1px rgba(255, 90, 110, 0.45), inset -2px -1px 1px -1px rgba(80, 210, 255, 0.45);
}
body.tema-cristal.sin-profundidad #izquierda,
body.tema-cristal.sin-profundidad #derecha {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 0.42);
}
body.tema-cristal #izquierda { padding: 3.2vmin; }
body.tema-cristal #caratula-marco { width: 46vmin; height: 46vmin; border-radius: 2.6vmin; box-shadow: 0 1.6vmin 4vmin rgba(0, 0, 0, 0.35); }
body.tema-cristal #titulo, body.tema-cristal #artista, body.tema-cristal #progreso { max-width: 46vmin; }
body.tema-cristal #progreso { width: 46vmin; }
body.tema-cristal #letra-ventana { inset: 2vmin 3.6vmin; }
body.tema-cristal #letra .linea { text-shadow: 0 0.2vmin 1.2vmin rgba(0, 0, 0, 0.25); }

/* ── Escenario ───────────────────────────────────────────────────────────
   Para fiestas: una sola linea, enorme, al centro, palabra a palabra; la
   siguiente, pequena debajo; la cancion en una esquina. El fondo golpea
   mas fuerte y hay un destello en cada beat (receptor.js). */
#escenario {
  position: absolute; inset: var(--seguro); display: none;
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: opacity 800ms var(--suave) 150ms, transform 800ms var(--suave) 150ms, visibility 0s linear 950ms;
}
body.tema-escenario #ambiente { display: none; }
body.tema-escenario #escenario { display: flex; }
#escena.vacia #escenario { opacity: 0; transform: scale(0.96); visibility: hidden; }
#escena.con-cancion #escenario { opacity: 1; transform: none; visibility: visible; }

#esc-letra { position: relative; width: 88vw; height: 36vh; will-change: transform; }
.esc-linea {
  position: absolute; left: 0; right: 0; top: 50%;
  font-size: 8.6vmin; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em;
  transform: translateY(-50%); opacity: 1;
  transition: transform 560ms var(--suave), opacity 420ms ease;
}
.esc-linea.entra { transform: translateY(-20%) scale(0.94); opacity: 0; transition: none; }
.esc-linea.sale { transform: translateY(-110%) scale(0.96); opacity: 0; }
.esc-linea .p { color: rgba(242, 245, 243, 0.30); transition: color 110ms linear, text-shadow 160ms linear; }
.esc-linea .p.dicha { color: var(--texto); text-shadow: 0 0 3.2vmin rgba(var(--acento, 52, 211, 153), 0.65); }
.esc-linea.sin-palabras { color: var(--texto); text-shadow: 0 0 3.2vmin rgba(var(--acento, 52, 211, 153), 0.5); }
.esc-linea.titulo { font-size: 9.6vmin; }
#esc-siguiente {
  margin-top: 2vmin; max-width: 80vw; min-height: 4vmin;
  font-size: 3.4vmin; font-weight: 600; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 300ms ease;
}
#esc-info {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 2vmin; max-width: 46vw;
  padding: 1.4vmin 2.4vmin 1.4vmin 1.4vmin; border-radius: 2.6vmin; text-align: left;
  background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
#esc-caratula { width: 10vmin; height: 10vmin; border-radius: 1.6vmin; object-fit: cover; background: #111; flex: none; }
#esc-textos { min-width: 0; }
#esc-titulo { font-size: 2.8vmin; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#esc-artista { font-size: 2.2vmin; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#esc-progreso { margin-top: 1vmin; width: 26vmin; height: 0.4vmin; border-radius: 1vmin; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
#esc-barra { width: 0; height: 100%; background: var(--texto); transition: width 400ms linear; }

#destello {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%);
}
body:not(.tema-escenario) #destello { display: none; }

/* Modo ligero (TV flojo): sin sombras de brillo en el texto. */
body.ligero .esc-linea .p.dicha, body.ligero .esc-linea.sin-palabras, body.ligero #letra .linea { text-shadow: none; }

/* ── Cristal en la GPU (cristal.js) ──────────────────────────────────────
   Con WebGL, el lienzo dibuja la caratula, las luces y el vidrio con su
   refraccion, canto y sombra: los paneles HTML quedan transparentes y solo
   llevan el contenido. Sin WebGL se queda el vidrio 2D de arriba. */
#fondo-cristal { position: fixed; inset: 0; width: 100vw; height: 100vh; opacity: 0; pointer-events: none; transition: opacity 500ms var(--suave); }
body.tema-cristal.gl.con-cancion #fondo-cristal { opacity: 1; }
body.tema-cristal.gl .vidrio { display: none; }
body.tema-cristal.gl #izquierda, body.tema-cristal.gl #derecha { box-shadow: none; }
body.tema-cristal.gl #izquierda::before, body.tema-cristal.gl #derecha::before,
body.tema-cristal.gl #izquierda::after, body.tema-cristal.gl #derecha::after { display: none; }

/* ── Vinilo ──────────────────────────────────────────────────────────────
   El disco gira a 33⅓ con la caratula de etiqueta; arranca y se frena como
   un plato de verdad (receptor.js), y el brazo baja al sonar y se levanta en
   pausa. El reflejo no gira: la luz de la sala esta quieta y el disco pasa
   por debajo. Letra en serif, tonos crema, grano y vineta calidos. */
#vinilo, #vinilo-grano { display: none; }
body.tema-vinilo { --texto: #F4E9D8; --texto-2: rgba(244, 233, 216, 0.62); --texto-3: rgba(244, 233, 216, 0.30); }
body.tema-vinilo #caratula-marco { display: none; }
body.tema-vinilo #vinilo { display: block; position: relative; width: 56vmin; height: 56vmin; margin: 0 4vmin 1vmin 0; }
#disco {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, rgba(0, 0, 0, 0) 0 38%, rgba(255, 255, 255, 0.06) 38.5% 39%, rgba(0, 0, 0, 0) 39.5% 97%, rgba(255, 255, 255, 0.05) 97.5% 98%, rgba(0, 0, 0, 0) 98.5%),
    repeating-radial-gradient(circle closest-side, #0c0c0d 0 0.55%, #19191b 0.55% 1.1%);
  box-shadow: 0 3vmin 8vmin rgba(0, 0, 0, 0.6), inset 0 0 0 0.35vmin #050505;
  will-change: transform;
}
#etiqueta { position: absolute; left: 32%; top: 32%; width: 36%; height: 36%; border-radius: 50%; object-fit: cover; background: #3a2a1a; }
#disco .eje { position: absolute; left: 48.9%; top: 48.9%; width: 2.2%; height: 2.2%; border-radius: 50%; background: #d8d8d8; box-shadow: 0 0 0 0.25vmin rgba(0, 0, 0, 0.45); }
#brillo-disco {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.11) 28deg, rgba(255, 255, 255, 0) 64deg, rgba(255, 255, 255, 0) 190deg, rgba(255, 255, 255, 0.08) 222deg, rgba(255, 255, 255, 0) 256deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 37%, #000 38%);
  mask: radial-gradient(circle closest-side, transparent 0 37%, #000 38%);
}
#brazo {
  position: absolute; right: -5vmin; top: -3vmin; width: 9vmin; height: 44vmin;
  transform-origin: 62% 7%; transform: rotate(-26deg);
  transition: transform 1400ms var(--suave);
  filter: drop-shadow(0 1.2vmin 1.4vmin rgba(0, 0, 0, 0.5));
}
body.tema-vinilo.sonando #brazo { transform: rotate(-3deg); }
#brazo .base { position: absolute; left: 34%; top: 0; width: 5.6vmin; height: 5.6vmin; margin-left: -1.6vmin; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2f2f2, #9a9a9a 55%, #5c5c5c); }
#brazo .barra { position: absolute; left: 58%; top: 2.6vmin; width: 0.9vmin; height: 34vmin; border-radius: 0.5vmin;
  background: linear-gradient(90deg, #7a7a7a, #eaeaea 45%, #8d8d8d); }
#brazo .capsula { position: absolute; left: 50%; top: 35vmin; width: 2.6vmin; height: 5vmin; border-radius: 0.5vmin;
  background: linear-gradient(90deg, #2b2b2b, #5a5a5a 50%, #2b2b2b); transform: rotate(18deg); }
body.tema-vinilo #titulo { font-family: "Noto Serif", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: 0; }
body.tema-vinilo #artista { font-style: italic; }
body.tema-vinilo #letra .linea { font-family: "Noto Serif", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: 0; }
body.tema-vinilo #vinilo-grano {
  display: block; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(rgba(255, 150, 60, 0.07), rgba(255, 150, 60, 0.07)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .66 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Galeria ─────────────────────────────────────────────────────────────
   Como un cuadro en la pared: la caratula flotando despacio, el titulo fino
   y una sola linea de letra, sobre la misma caratula difuminada a pantalla
   completa. Sin luces animadas: es el tema mas liviano. */
#galeria-fondo { position: fixed; inset: 0; display: none; overflow: hidden; }
body.tema-galeria #galeria-fondo { display: block; }
body.tema-galeria #fondo, body.tema-nocturno #fondo { visibility: hidden; }
#galeria-fondo .gf {
  position: absolute; left: -8%; top: -8%; width: 116%; height: 116%;
  opacity: 0; transition: opacity 1400ms ease;
  filter: blur(3vmin) saturate(1.3) brightness(0.52);
}
#galeria-fondo .gf.visible { opacity: 1; }
#galeria, #nocturno {
  position: absolute; inset: var(--seguro); display: none;
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: opacity 800ms var(--suave) 150ms, visibility 0s linear 950ms;
}
body.tema-galeria #ambiente, body.tema-nocturno #ambiente { display: none; }
body.tema-galeria #galeria, body.tema-nocturno #nocturno { display: flex; }
#escena.vacia #galeria, #escena.vacia #nocturno { opacity: 0; visibility: hidden; }
#escena.con-cancion #galeria, #escena.con-cancion #nocturno { opacity: 1; visibility: visible; }
#gal-caratula {
  width: 54vmin; height: 54vmin; border-radius: 1.8vmin; object-fit: cover; background: #111;
  box-shadow: 0 4vmin 11vmin rgba(0, 0, 0, 0.55);
  animation: flotar 9s ease-in-out infinite;
}
#escena.pausa #gal-caratula { animation-play-state: paused; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.3vmin); } }
#gal-titulo { margin-top: 4.4vmin; max-width: 80vw; font-size: 4.8vmin; font-weight: 300; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gal-artista { margin-top: 0.8vmin; font-size: 2.2vmin; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-2); }
#gal-linea, #noc-linea { transition: opacity 380ms ease; }
#gal-linea.cambia, #noc-linea.cambia { opacity: 0; }
#gal-linea { margin-top: 2.8vmin; min-height: 3.4vmin; max-width: 70vw; font-size: 2.7vmin; font-style: italic; color: var(--texto-2); }

/* ── Nocturno ────────────────────────────────────────────────────────────
   Negro de verdad (en un OLED, pixeles apagados), la hora grande, la fecha y
   la linea que suena. Todo se corre un poco cada minuto para no marcar la
   pantalla (receptor.js). */
body.tema-nocturno .marca { visibility: hidden; }
#nocturno { transition: opacity 800ms var(--suave) 150ms, transform 2400ms ease, visibility 0s linear 950ms; }
#noc-hora { font-size: 21vmin; font-weight: 200; line-height: 1; letter-spacing: -0.02em; color: rgba(242, 245, 243, 0.86); font-variant-numeric: tabular-nums; }
#noc-hora small { font-size: 0.22em; font-weight: 400; letter-spacing: 0.04em; margin-left: 1.4vmin; color: rgba(242, 245, 243, 0.5); }
#noc-fecha { margin-top: 1.6vmin; font-size: 2.6vmin; letter-spacing: 0.04em; color: rgba(242, 245, 243, 0.42); }
#noc-fecha::first-letter { text-transform: uppercase; }
#noc-linea { margin-top: 7vmin; min-height: 5vmin; max-width: 80vw; font-size: 3.8vmin; font-weight: 500; color: rgba(242, 245, 243, 0.72); }
#noc-cancion { margin-top: 1.8vmin; font-size: 2vmin; color: rgba(242, 245, 243, 0.32); }

/* ── Paisaje real (temas pro) ────────────────────────────────────────────
   Un video real a pantalla completa (receptor.js funde dos copias en el
   empalme). Se amplia un poco para que no se vean los bordes del clip, y
   una sombra abajo deja leer la cancion sin tapar el paisaje. */
#paisaje { position: fixed; inset: 0; display: none; overflow: hidden; background: #000; }
body.tema-atardecer #paisaje { display: block; }
body.tema-atardecer #fondo { visibility: hidden; }
#paisaje .pj {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 45%; /* el zoom de cada clip lo pone receptor.js */
  opacity: 0; transition: opacity 1600ms linear;
}
#paisaje .pj.visible { opacity: 1; }
#paisaje .pj-sombra {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.42) 24%, rgba(0, 0, 0, 0) 52%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 16%);
}

/* ── Atardecer ───────────────────────────────────────────────────────────
   Como un reproductor de sala: el paisaje manda; abajo a la izquierda la
   caratula, el titulo y el artista; debajo, la barra a todo lo ancho con
   los tiempos; encima, la linea de letra que suena. */
#atardecer {
  position: absolute; inset: var(--seguro); padding: 0 2vmin 1vmin; display: none;
  flex-direction: column; justify-content: flex-end;
  transition: opacity 900ms var(--suave) 150ms, visibility 0s linear 1050ms;
  text-shadow: 0 0.3vmin 2.4vmin rgba(0, 0, 0, 0.45);
}
body.tema-atardecer #ambiente { display: none; }
body.tema-atardecer #atardecer { display: flex; }
#escena.vacia #atardecer { opacity: 0; visibility: hidden; }
#escena.con-cancion #atardecer { opacity: 1; visibility: visible; transition-delay: 0s; }
#atd-linea {
  min-height: 4.4vmin; max-width: 72vw; margin-bottom: 3.2vmin;
  font-size: 3.6vmin; font-weight: 500; line-height: 1.25; color: rgba(255, 246, 236, 0.92);
  transition: opacity 380ms ease;
}
#atd-linea.cambia { opacity: 0; }
#atd-info { display: flex; align-items: center; gap: 2.6vmin; }
#atd-caratula {
  width: 12vmin; height: 12vmin; flex: none; border-radius: 1.1vmin; object-fit: cover; background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1.2vmin 4vmin rgba(0, 0, 0, 0.5);
}
#atd-textos { min-width: 0; }
#atd-titulo {
  max-width: 70vw; font-size: 5.4vmin; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#atd-artista { margin-top: 0.7vmin; font-size: 2.6vmin; font-weight: 500; color: rgba(255, 246, 236, 0.74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#atd-fila { display: flex; align-items: center; gap: 2vmin; margin-top: 3.4vmin; font-size: 1.9vmin; font-weight: 500; color: rgba(255, 246, 236, 0.78); font-variant-numeric: tabular-nums; }
#atd-tiempo, #atd-duracion { min-width: 5vmin; }
#atd-duracion { text-align: right; }
#atd-progreso { flex: 1; height: 0.55vmin; border-radius: 0.3vmin; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
#atd-barra { width: 0%; height: 100%; border-radius: inherit; background: rgba(255, 250, 244, 0.94); transition: width 260ms linear; }
#escena.pausa #atd-fila { opacity: 0.55; }

/* ── Tocadiscos (pro) ────────────────────────────────────────────────────
   La foto manda; la escena va en pixeles de la foto y #td-marco la escala
   para cubrir la pantalla (receptor.js). La caratula es un circulo que gira
   dentro de #td-etiqueta, aplanado a la elipse medida en la foto; encima, la
   luz del papel multiplicada y el eje por delante. */
#tocadiscos { position: fixed; inset: 0; display: none; overflow: hidden; background: #0b0705; }
body.tema-tocadiscos #tocadiscos { display: block; }
body.tema-tocadiscos #fondo { visibility: hidden; }
#td-marco { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; opacity: 0; transition: opacity 1200ms ease; }
#tocadiscos.listo #td-marco { opacity: 1; }
#td-escena { position: absolute; left: 0; top: 0; }
#td-foto { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#td-etiqueta { position: absolute; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; transform-origin: 50% 50%; }
#td-caratula {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  transition: opacity 300ms ease;
}
#td-caratula.cambia, #td-caratula:not([src]) { opacity: 0; }
#td-sombreado { position: absolute; mix-blend-mode: multiply; }
#td-eje { position: absolute; }
#td-luz {
  position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: 0.25; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 176, 92, 0.55) 0%, rgba(255, 150, 70, 0.18) 45%, rgba(255, 140, 60, 0) 70%);
}
#td-polvo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#tocadiscos .td-sombra {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(8, 4, 2, 0.55) 0%, rgba(8, 4, 2, 0.25) 30%, rgba(8, 4, 2, 0) 46%);
}

body.tema-tocadiscos #ambiente { display: none; }
#td-ui { position: absolute; inset: var(--seguro); display: none; transition: opacity 900ms var(--suave) 150ms, visibility 0s linear 1050ms; }
body.tema-tocadiscos #td-ui { display: block; }
#escena.vacia #td-ui { opacity: 0; visibility: hidden; }
#escena.con-cancion #td-ui { opacity: 1; visibility: visible; transition-delay: 0s; }
#td-letra {
  position: absolute; left: 59vw; right: 1vw; top: 50%; transform: translateY(-50%);
  color: rgba(255, 241, 222, 0.97);
}
#td-linea {
  font-size: 6.4vmin; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em;
  text-shadow: 0 0 2.2vmin rgba(255, 170, 80, 0.55), 0 0.3vmin 1.2vmin rgba(0, 0, 0, 0.5);
  transition: opacity 360ms ease, transform 360ms var(--suave);
}
#td-linea span { opacity: 0.42; transition: opacity 260ms ease; }
#td-linea span.dicha { opacity: 1; }
#td-siguiente {
  margin-top: 2.6vmin; font-size: 3vmin; font-weight: 600; line-height: 1.25; color: rgba(255, 236, 210, 0.42);
  text-shadow: 0 0.3vmin 1.2vmin rgba(0, 0, 0, 0.5);
  transition: opacity 360ms ease;
}
#td-linea.cambia { opacity: 0; transform: translateY(-1vmin); }
#td-siguiente.cambia { opacity: 0; }
#td-info { position: absolute; right: 1vw; bottom: 0.5vmin; width: 30vw; text-align: right; text-shadow: 0 0.3vmin 1.2vmin rgba(0, 0, 0, 0.6); }
#td-titulo { font-size: 2.5vmin; font-weight: 700; color: rgba(255, 241, 222, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#td-artista { margin-top: 0.4vmin; font-size: 2vmin; font-weight: 500; color: rgba(255, 236, 210, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#td-progreso { margin-top: 1.4vmin; margin-left: auto; width: 100%; height: 0.45vmin; border-radius: 0.3vmin; background: rgba(255, 236, 210, 0.2); overflow: hidden; }
#td-barra { width: 0%; height: 100%; background: rgba(255, 228, 190, 0.9); transition: width 260ms linear; }
#escena.pausa #td-progreso { opacity: 0.5; }

/* ── TV con navegador (lifemusic.pages.dev/tv): enlace por codigo o QR ──────
   Diseno 1.3.2 (maqueta aprobada por CG): aurora verde menta, el codigo en
   fichas, el QR en cristal con un anillo que se vacia en los 5 minutos de
   vigencia, el estado del servidor y los mandos con icono.
   Sin inset, sin gap y con colores literales antes de cada var(): esta parte
   la tiene que pintar bien hasta un navegador de TV muy viejo. */
#enlace {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; overflow: hidden;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  padding: 5vmin 7vmin 4vmin;
  background: #070A09;
  opacity: 1; transition: opacity 600ms ease, visibility 0s linear 0s;
}
#enlace.oculto { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 600ms ease, visibility 0s linear 600ms; }

/* Aurora: tres manchas de luz que derivan. Son degradados (sin blur): baratos. */
.enl-aurora { position: absolute; top: -20%; left: -20%; right: -20%; bottom: -20%; z-index: -1; pointer-events: none; }
.enl-aurora i { position: absolute; display: block; border-radius: 50%; -webkit-animation: enl-deriva 22s ease-in-out infinite alternate; animation: enl-deriva 22s ease-in-out infinite alternate; }
.enl-aurora i:nth-child(1) { width: 80vmin; height: 80vmin; left: 6%; top: 4%; background: radial-gradient(circle, rgba(52, 211, 153, 0.42), rgba(52, 211, 153, 0) 68%); }
.enl-aurora i:nth-child(2) { width: 70vmin; height: 70vmin; right: 6%; top: 28%; background: radial-gradient(circle, rgba(248, 187, 208, 0.20), rgba(248, 187, 208, 0) 68%); -webkit-animation-duration: 28s; animation-duration: 28s; }
.enl-aurora i:nth-child(3) { width: 64vmin; height: 64vmin; left: 38%; bottom: 0; background: radial-gradient(circle, rgba(144, 202, 249, 0.16), rgba(144, 202, 249, 0) 68%); -webkit-animation-duration: 34s; animation-duration: 34s; }
@-webkit-keyframes enl-deriva { to { -webkit-transform: translate(6vmin, -5vmin) scale(1.12); } }
@keyframes enl-deriva { to { transform: translate(6vmin, -5vmin) scale(1.12); } }
body.ligero .enl-aurora i { -webkit-animation: none; animation: none; }

/* Cabecera: marca y estado del servidor */
.enl-cabecera { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.enl-marca { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 2.8vmin; font-weight: 800; color: #F2F5F3; }
.enl-marca img { width: 5vmin; height: 5vmin; margin-right: 1.6vmin; border-radius: 1.2vmin; }
.enl-marca small { display: block; font-size: 1.5vmin; font-weight: 600; letter-spacing: 0.16em; color: rgba(242, 245, 243, 0.45); }
.enl-chip {
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  padding: 1vmin 2vmin; border-radius: 10vmin; font-size: 1.8vmin; font-weight: 600; color: rgba(242, 245, 243, 0.72);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.enl-punto { width: 1.1vmin; height: 1.1vmin; margin-right: 1.1vmin; border-radius: 50%; background: #6F7B75; }
.enl-chip.ok .enl-punto { background: #34D399; -webkit-animation: enl-late 1.8s infinite; animation: enl-late 1.8s infinite; }
.enl-chip.mal .enl-punto { background: #F87171; }
.enl-chip.mal { color: #FCA5A5; }
@-webkit-keyframes enl-late { 70% { box-shadow: 0 0 0 1.2vmin rgba(52, 211, 153, 0); } 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } }
@keyframes enl-late { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 70% { box-shadow: 0 0 0 1.2vmin rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* Cuerpo: texto y codigo a la izquierda, QR a la derecha */
.enl-cuerpo { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.enlace-texto { -webkit-flex: 1 1 auto; flex: 1 1 auto; max-width: 64vw; margin-right: 6vmin; }
.enlace-marca { font-size: 1.9vmin; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #34D399; }
#enlace h1 { margin: 1.6vmin 0 4vmin; font-size: 8vmin; line-height: 1; font-weight: 800; letter-spacing: -0.035em; color: #F2F5F3; }
#enlace h1 i { color: #34D399; font-style: italic; }
.enl-pasos { margin: 0 0 4.6vmin; padding: 0; list-style: none; }
.enl-pasos li { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 1.6vmin; font-size: 2.5vmin; color: rgba(242, 245, 243, 0.72); }
.enl-pasos b { color: #F2F5F3; font-weight: 700; }
.enl-ico {
  -webkit-flex: none; flex: none; width: 5vmin; height: 5vmin; margin-right: 2vmin; border-radius: 1.6vmin;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.enl-ico svg, .boton-ico svg { width: 2.7vmin; height: 2.7vmin; fill: none; stroke: #34D399; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enl-codigo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 12vmin; }
.enl-ficha {
  width: 9.6vmin; height: 12vmin; margin-right: 1.4vmin; border-radius: 2.2vmin;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  font-family: "JetBrains Mono", "Roboto Mono", "DejaVu Sans Mono", Consolas, monospace; font-size: 7vmin; font-weight: 700; color: #F2F5F3;
  background: rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2vmin 4vmin rgba(0, 0, 0, 0.35);
  -webkit-animation: enl-entra 0.5s both; animation: enl-entra 0.5s both;
}
.enl-separa { width: 2vmin; height: 0.6vmin; margin-right: 1.4vmin; border-radius: 1vmin; background: rgba(242, 245, 243, 0.3); }
@-webkit-keyframes enl-entra { from { opacity: 0; -webkit-transform: translateY(1.6vmin) scale(0.9); } }
@keyframes enl-entra { from { opacity: 0; transform: translateY(1.6vmin) scale(0.9); } }
.enl-vigencia { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 2.8vmin; font-size: 1.9vmin; color: rgba(242, 245, 243, 0.62); }
.enl-vigencia.oculto { visibility: hidden; }
.enl-barra { width: 38vmin; height: 0.8vmin; margin-right: 1.8vmin; border-radius: 1vmin; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.enl-barra i { display: block; height: 100%; width: 100%; background: #34D399; background: linear-gradient(90deg, #0F5C43, #34D399); transition: width 1s linear; }
#enl-vence b { font-family: "JetBrains Mono", "Roboto Mono", Consolas, monospace; color: #F2F5F3; }
.enlace-estado { min-height: 3.4vmin; margin-top: 2vmin; font-size: 2.4vmin; color: #34D399; }
.enlace-nota { margin-top: 0.6vmin; font-size: 1.9vmin; color: rgba(242, 245, 243, 0.5); }

/* QR en cristal con el anillo de vigencia */
.enlace-qr-marco {
  -webkit-flex: 0 0 auto; flex: 0 0 auto; text-align: center; padding: 3.4vmin; border-radius: 4vmin;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 5vmin 10vmin rgba(0, 0, 0, 0.45);
}
.enl-anillo { position: relative; width: 44vmin; height: 44vmin; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.enl-aro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.enl-aro circle { fill: none; }
.enl-aro-fondo { stroke: rgba(255, 255, 255, 0.08); stroke-width: 2; }
.enl-aro-vivo { stroke: #34D399; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 295.3; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
#enlace-qr { display: block; width: 29vmin; height: 29vmin; border-radius: 2.4vmin; background: #FFFFFF; }
.enlace-qr-marco p { margin-top: 2vmin; font-size: 2vmin; color: rgba(242, 245, 243, 0.62); }
.enlace-compat { margin-top: 1vmin; font-family: monospace; font-size: 1.6vmin; color: rgba(242, 245, 243, 0.38); }

#activar {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 40;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: rgba(0, 0, 0, 0.74);
}
#activar.oculto { display: none; }
#activar-boton {
  padding: 2.8vmin 6.4vmin; border: 0; border-radius: 10vmin; cursor: pointer;
  font: inherit; font-size: 3.8vmin; font-weight: 700; color: #062016; background: #34D399;
  box-shadow: 0 2vmin 6vmin rgba(52, 211, 153, 0.35);
}

/* Mandos con icono: el nombre aparece en una etiqueta solo con el foco. */
#mandos-tv { display: none; }
body.modo-tv #mandos-tv { display: -webkit-flex; display: flex; position: fixed; right: 5vmin; bottom: 4vmin; z-index: 35; opacity: 0; transition: opacity 400ms ease; }
body.modo-tv #escena.vacia ~ #mandos-tv, body.modo-tv.mandos #mandos-tv, body.modo-tv.enlazando #mandos-tv { opacity: 1; }
.boton-ico {
  position: relative; width: 7vmin; height: 7vmin; margin-left: 1.8vmin; border-radius: 50%; cursor: pointer; padding: 0;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  color: #F2F5F3; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 200ms ease, background 200ms ease;
}
.boton-ico svg { stroke: #F2F5F3; }
.boton-ico:focus, .boton-ico:hover { outline: none; -webkit-transform: scale(1.1); transform: scale(1.1); background: rgba(52, 211, 153, 0.2); box-shadow: 0 0 0 0.5vmin #34D399; }
.boton-ico .etiqueta {
  position: absolute; bottom: 125%; right: 0; white-space: nowrap; padding: 0.9vmin 1.8vmin; border-radius: 1.2vmin;
  font-size: 1.9vmin; font-weight: 600; color: #F2F5F3; background: #0F1512; border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.boton-ico:focus .etiqueta, .boton-ico:hover .etiqueta { opacity: 1; }
#activar-boton:focus { outline: 0.5vmin solid #34D399; outline-offset: 0.4vmin; }

/* Dialogos del TV (1.3.2) */
.tv-capa {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 45;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: rgba(4, 6, 5, 0.8);
}
.tv-capa.oculto { display: none; }
.tv-dialogo {
  width: 78vmin; padding: 5.4vmin; border-radius: 4vmin; text-align: center;
  background: #111814; background: linear-gradient(180deg, #141C17, #0D1310);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 6vmin 14vmin rgba(0, 0, 0, 0.6);
  -webkit-animation: enl-entra 0.35s both; animation: enl-entra 0.35s both;
}
.tv-dialogo-ico {
  width: 9vmin; height: 9vmin; margin: 0 auto 2.6vmin; border-radius: 2.6vmin;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: rgba(52, 211, 153, 0.14);
}
.tv-dialogo-ico svg { width: 4.6vmin; height: 4.6vmin; fill: none; stroke: #34D399; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-dialogo.alerta .tv-dialogo-ico { background: rgba(248, 113, 113, 0.14); }
.tv-dialogo.alerta .tv-dialogo-ico svg { stroke: #F87171; }
.tv-dialogo h2 { margin: 0 0 1.6vmin; font-size: 4vmin; line-height: 1.15; letter-spacing: -0.02em; color: #F2F5F3; }
.tv-dialogo p { margin: 0 0 4vmin; font-size: 2.3vmin; line-height: 1.5; color: rgba(242, 245, 243, 0.72); }
.tv-dialogo p b { color: #F2F5F3; }
.tv-dialogo-acciones { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.tv-dialogo-acciones button {
  margin: 0 1vmin; padding: 1.8vmin 4vmin; border-radius: 10vmin; cursor: pointer;
  font: inherit; font-size: 2.2vmin; font-weight: 700; color: #F2F5F3;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.tv-dialogo-acciones button.primario { color: #062016; background: #34D399; border-color: #34D399; }
.tv-dialogo-acciones button:focus { outline: none; box-shadow: 0 0 0 0.5vmin #34D399; }
.tv-dialogo-acciones button[hidden] { display: none; }

/* Sin video H.264: el Atardecer se queda con un cielo pintado, quieto. */
body.sin-video #paisaje {
  background: #2A1A2E;
  background: linear-gradient(180deg, #1C2748 0%, #6B3F6E 38%, #D9746A 58%, #F2B26B 66%, #3A2433 67%, #140E18 100%);
}

/* Pantalla vertical (alguien abre /tv en un celular o una tablet parada): uno debajo del otro. */
@media (orientation: portrait) {
  #enlace { overflow-y: auto; padding: 5vmin 6vmin; }
  .enl-cuerpo { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-flex: none; flex: none; margin-top: 6vmin; }
  .enlace-texto { -webkit-flex: none; flex: none; max-width: none; width: 100%; margin: 0 0 6vmin; }
  #enlace h1 { font-size: 11vmin; }
  .enl-pasos li { font-size: 4vmin; }
  .enl-ico { width: 8vmin; height: 8vmin; }
  .enl-ico svg { width: 4.4vmin; height: 4.4vmin; }
  .enl-ficha { width: 12.6vmin; height: 16vmin; font-size: 9.6vmin; margin-right: 1.6vmin; }
  .enl-barra { width: 50vmin; }
  .enl-vigencia, .enlace-estado, .enlace-marca { font-size: 3.2vmin; }
  .enl-anillo { width: 74vmin; height: 74vmin; }
  #enlace-qr { width: 50vmin; height: 50vmin; }
  .enlace-qr-marco p, .enl-chip { font-size: 3vmin; }
  .enlace-compat { font-size: 2.6vmin; }
  .tv-dialogo { width: 88vmin; }
}