/* ==========================================
   MODO RADIO — Overlay fullscreen estilo Platinium
   Namespace: .rmode- para evitar colisiones con style.css
   ========================================== */

/* ── Variables internas ── */
.rmode-overlay {
  --rmode-primary-rgb: var(--color-marca-rgb, 4, 184, 220);
  --rmode-primary: rgb(var(--rmode-primary-rgb));
  /* 09-sep-2026: valores exactos de Platinium (medidos en vivo del CDN
     real, cdn.solisfmdigital.com/onix/platinium/), a pedido del cliente
     de igualar el tamaño de carátula — antes eran fluidos/más grandes
     (clamp 240-280 / 330 fijo), ahora los mismos números fijos que usa
     Platinium en ambos breakpoints. */
  --rmode-size-mobile: 260px;
  --rmode-size-desktop: 290px;
  --rmode-border: 2px;
  --rmode-glow: 24px;
  --rmode-transition: 0.3s ease;
  --rmode-cover-radius: 50%;
}

/* ── Overlay contenedor ── */
.rmode-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  grid-template-areas:
    "cabecera"
    "central"
    "pie";
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  min-height: 100vh;
  background: linear-gradient(to bottom, rgba(10,12,18,0.97), rgba(10,12,18,0.93));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.rmode-overlay[data-active="true"] {
  opacity: 1;
  visibility: visible;
}

/* ── Fondo ambiental (carátula difuminada) ── */
.rmode-bg-layer {
  position: absolute;
  inset: -50px;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(50px) saturate(1.2) brightness(0.6);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.rmode-bg-layer.rmode-active {
  opacity: 0.4;
}

/* Tinte de color dinámico */
.rmode-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rmode-bg-tint, #0a0c12);
  opacity: 0.2;
  transition: background-color 1.5s ease;
  pointer-events: none;
}

/* ── Cabecera ── */
/* Móvil/vertical: marca centrada (grid de 3 columnas — la 1ra es un
   espaciador del mismo ancho que el botón cerrar, así la marca queda
   realmente centrada respecto al ancho total, no solo al espacio libre
   a la izquierda del botón). Línea separadora abajo, entre el eslogan y
   el resto del cuerpo del reproductor — a pedido explícito. */
.rmode-header {
  grid-area: cabecera;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 10;
}

.rmode-brand {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rmode-close {
  grid-column: 3;
  justify-self: end;
}

.rmode-brand-name {
  font-family: 'Montserrat Black', var(--fuente-display, sans-serif);
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0;
}

.rmode-brand-slogan {
  font-family: 'Inter', var(--fuente-cuerpo, sans-serif);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
  margin: 0;
}

/* Redes de la emisora en el header de Modo Radio — MISMO estilo que
   .header-al-aire-redes-grupo del portal: etiqueta "Síguenos" + círculo
   blanco con color ÚNICO de marca por ícono (no un color distinto por
   red). Solo escritorio (ver media query ≥992px): en móvil no hay hueco
   junto al botón cerrar sin apretar el header, y la tarjeta de
   programación ya tiene sus propias redes. */
.rmode-redes-grupo {
  display: none;
  align-items: center;
  gap: 8px;
  /* Separación extra con el botón cerrar, más allá del gap del grid (16px).
     Eran 240px; bajado a 225px para correr el bloque de redes 15px hacia la
     derecha (pedido del cliente). Es un margen DERECHO: reducirlo acerca el
     bloque al botón cerrar, o sea lo desplaza a la derecha. */
  margin-right: 225px;
  position: relative;
  /* 6px (antes 8px): deja el grupo a 25px del borde superior, la misma
     altura exacta que las redes del header de la página principal.
     Medido: al pasar los círculos de 22 a 26px el grupo creció 4px y, al ir
     centrado, se corrió 2px hacia arriba — de ahí que el valor no sea 4px. */
  top: 6px;
}
.rmode-redes-grupo[hidden] { display: none; }

.rmode-redes-label {
  font-family: var(--fuente-mono, monospace);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.rmode-redes-emisora {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rmode-redes-emisora:empty { display: none; }

/* Círculo con fondo traslúcido oscuro + ícono claro — mismo lenguaje
   "glass" que el resto del overlay (ver .rmode-locutor-redes). */
/* Mismo TAMAÑO que las redes del header de la página principal
   (.header-al-aire-redes-emisora en style.css): círculo 26px, ícono 14px.
   Antes eran 22/12 y quedaban visiblemente más chicas, y además convivían
   en este mismo modal con las del locutor, que sí son de 26px.
   El fondo NO se copia a propósito: el header principal usa blanco sólido y
   acá se mantiene el blanco al 12% ("glass"), que es el lenguaje del
   overlay — sobre el fondo oscuro un círculo blanco sólido salta demasiado. */
.rmode-redes-emisora .schedule-locutor-red {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.rmode-redes-emisora .schedule-locutor-red:hover {
  background: rgba(255, 255, 255, 0.22);
}

.rmode-redes-emisora .schedule-locutor-red svg {
  width: 14px;
  height: 14px;
}

.rmode-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background var(--rmode-transition);
}

.rmode-close:hover {
  background: rgba(255,255,255,0.15);
}

.rmode-close svg {
  width: 18px;
  height: 18px;
}

/* ── Sección central ── */
.rmode-central {
  grid-area: central;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 24px);
  padding: 0 clamp(12px, 4vw, 24px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* ── Carátula circular (estilo Platinium) ── */
.rmode-cover-wrap {
  position: relative;
  width: var(--rmode-size-mobile);
  height: var(--rmode-size-mobile);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rmode-cover-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--rmode-cover-radius);
  overflow: visible;
  background: #000;
  box-shadow:
    0 0 0 var(--rmode-border) rgba(var(--rmode-primary-rgb), 0.8),
    0 0 var(--rmode-glow) rgba(var(--rmode-cover-glow-rgb, var(--rmode-primary-rgb)), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.6s ease;
}

.rmode-cover-circle.rmode-playing {
  box-shadow:
    0 0 0 var(--rmode-border) rgba(var(--rmode-primary-rgb), 1),
    0 0 30px rgba(var(--rmode-cover-glow-rgb, var(--rmode-primary-rgb)), 0.6);
}

.rmode-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--rmode-cover-radius);
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.rmode-cover-img.rmode-loaded {
  opacity: 1;
}

/* Brillo de cristal */
.rmode-cover-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rmode-cover-radius);
  pointer-events: none;
  z-index: 20;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 60%);
}

/* Control de play/pausa centrado sobre la carátula — Fase 54: réplica
   EXACTA del patrón real de Platinium, que no es el botón grande
   #playBtn (ese vive aparte, debajo de la carátula) sino el control
   integrado sobre la propia carátula: .control-overlay/.control-overlay i
   en reproductor.source.css. Es solo un ÍCONO translúcido sin círculo de
   fondo ni gradiente — se oculta casi del todo mientras suena y solo
   reaparece al pasar el mouse/dedo cerca (hover), y se ve tenue (sin
   hover) cuando está en pausa, invitando a tocar. */
.rmode-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
  cursor: pointer;
  border-radius: var(--rmode-cover-radius);
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
}

.rmode-play-btn-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rmode-play-btn-visual svg {
  /* Tamaño base de Platinium (4.5rem) +20% a pedido — en pantallas de
     celular real se seguía viendo chico comparado con Platinium. */
  width: 5.4rem;
  height: 5.4rem;
  color: #fff;
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.4));
}

.rmode-cover-circle:hover .rmode-play-btn-visual svg {
  opacity: 0.95;
  transform: scale(1) rotate(0deg);
}

.rmode-cover-circle:not(.rmode-playing) .rmode-play-btn-visual svg {
  opacity: 0.4;
  transform: scale(0.9) rotate(0deg);
}

/* Fallback cuando no hay carátula */
.rmode-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rmode-cover-radius);
  background: linear-gradient(135deg, rgba(var(--rmode-primary-rgb),0.3), rgba(var(--rmode-primary-rgb),0.1));
  z-index: 0;
}

.rmode-cover-fallback img {
  width: 50%;
  height: 50%;
  object-fit: contain;
  opacity: 0.6;
}

/* ── Volumen ── */
.rmode-volume {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  background: rgba(15,15,20,0.5);
  backdrop-filter: blur(12px) saturate(180%);
  padding: 6px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 100;
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.19,1,0.22,1), background 0.4s ease;
}

.rmode-volume:hover,
.rmode-volume.rmode-vol-open {
  width: 150px;
  background: rgba(20,22,30,0.85);
  border-color: rgba(var(--rmode-primary-rgb), 0.4);
  padding: 6px 14px;
}

.rmode-vol-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  transition: color var(--rmode-transition);
  flex-shrink: 0;
}

.rmode-volume:hover .rmode-vol-btn {
  color: var(--rmode-primary);
}

.rmode-vol-slider-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.rmode-volume:hover .rmode-vol-slider-wrap,
.rmode-volume.rmode-vol-open .rmode-vol-slider-wrap {
  opacity: 1;
  pointer-events: auto;
}

.rmode-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  height: 28px;
}

.rmode-vol-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}

.rmode-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  margin-top: -6px;
  box-shadow: 0 0 10px rgba(var(--rmode-primary-rgb), 0.7);
  border: 2px solid var(--rmode-primary);
}

/* Sin este ancho explícito, .rmode-info-stack queda con ancho "auto"
   (se ajusta al contenido) dentro del flex-column de .rmode-central; sus
   hijos con width:100%/max-width (el título, el marquee) resuelven ese
   porcentaje contra un ancho indeterminado y terminan encogidos al ancho
   de su propio texto — el título "parece" descentrado porque su caja ya
   NO tiene espacio de sobra donde centrarse. Bug real reportado: el
   título no se veía centrado en móvil. */
.rmode-info-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Información del programa ── */
.rmode-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  width: 100%;
  max-width: min(92vw, 600px);
  color: #fff;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rmode-primary);
  transition: all 0.4s ease;
}

/* El H3 exterior es el "marco fijo" — SOLO recorta (overflow:hidden) y
   nunca se mueve. Es crítico que la animación de la marquesina viva en el
   <span> interior (.rmode-program-name-text), no aquí: si se anima el
   propio contenedor con overflow:hidden, su "ventana" de recorte viaja
   con él y el texto se escapa del área visible — bug real detectado en
   producción (el título se desplazaba fuera del layout al expandirse). */
.rmode-program-name {
  font-family: 'Montserrat Black', var(--fuente-display, sans-serif);
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 2.1em;
  overflow: hidden;
  position: relative;
}
.rmode-program-name.rmode-titulo-desborda {
  white-space: nowrap;
  max-height: none;
}

/* El mask-image de bordes SOLO tiene sentido mientras el texto se mueve
   (suaviza la entrada/salida de la marquesina) — aplicarlo siempre,
   incluso con el texto estático, combinado con el drop-shadow del
   ::text de abajo producía un artefacto visual: la letra inicial se veía
   "borrosa/fantasma" (el mask cortaba a mitad la sombra difuminada de
   ese glifo). Se activa solo cuando el título realmente desborda. */
.rmode-program-name.rmode-titulo-desborda {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* Pista de la marquesina: en reposo contiene UN solo segmento de texto
   (estático, sin loop). Cuando JS detecta desborde, agrega un segundo
   segmento idéntico (aria-hidden) y activa la animación — moviendo la
   pista exactamente -50% de su ancho total (que ahora es 2x el texto)
   hace que el segundo segmento quede pixel-perfecto donde empezó el
   primero: loop continuo real, sin el salto/parpadeo del truco anterior
   basado en translateX(100%→-100%) sobre un solo segmento. */
.rmode-program-name-track {
  display: block;
}

.rmode-program-name-track.rmode-titulo-desborda {
  display: inline-flex;
  white-space: nowrap;
  animation: rmode-marquee-loop 14s linear infinite;
}

.rmode-program-name-text {
  display: inline-block;
  padding-right: 0;
  background: linear-gradient(to bottom, #ffffff 60%, rgba(255,255,255,0.4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

/* El span que envuelve cada emoji del nombre del programa: se saca del
   degradé (background-clip:text lo volvía blanco/invisible) para que se
   vea con su color original. */
.rmode-program-name-emoji {
  -webkit-text-fill-color: initial;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.rmode-program-name-track.rmode-titulo-desborda .rmode-program-name-text {
  white-space: nowrap;
  padding-right: 2.5rem;
}

@keyframes rmode-marquee-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rmode-locutor[hidden] {
  display: none;
}
.rmode-locutor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.rmode-locutor-name {
  font-family: 'Inter', var(--fuente-cuerpo, sans-serif);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}

.rmode-locutor-foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--rmode-primary-rgb), 0.6);
}

/* Nombre del locutor + sus redes en UNA sola línea (ver envoltorio en
   index.html). Ahorra ~30px de alto respecto de tenerlos apilados —
   ese era el excedente que disparaba el scroll de .rmode-central en
   pantallas de poca altura.
   flex-wrap: si el nombre es largo y no entra junto a los íconos, las redes
   bajan a la línea siguiente en vez de desbordar horizontalmente. */
.rmode-locutor-linea {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.rmode-locutor-redes {
  display: flex;
  gap: 8px;
  /* Sin margin-top: ya no va debajo del nombre, va al lado. */
}

/* Separador "|" entre el nombre y las redes, mismo tono que el de
   .rmode-badge-vivo. Se genera por CSS y no por HTML para que aparezca
   SOLO cuando corresponde:
   · :not(:empty) → únicamente si el JS llegó a cargar íconos de redes.
   · La segunda regla lo anula si el locutor está oculto (programa sin
     locutor asignado): si no, quedaría una barra suelta al principio. */
.rmode-locutor-redes:not(:empty)::before {
  content: "|";
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  align-self: center;
}

#rmode-locutor[hidden] + .rmode-locutor-redes::before {
  content: none;
}

/* Círculo con fondo TRASLÚCIDO oscuro + ícono claro — mismo lenguaje
   "glass" que el resto del overlay de Modo Radio (sobreescribe el círculo
   blanco sólido de .schedule-locutor-red base, que se veía como un
   parche opaco flotando sobre el fondo oscuro del reproductor). */
.rmode-locutor-redes .schedule-locutor-red {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.rmode-locutor-redes .schedule-locutor-red:hover {
  background: rgba(255, 255, 255, 0.22);
}

.rmode-locutor-redes .schedule-locutor-red svg {
  width: 14px;
  height: 14px;
}

/* ── Badge EN VIVO ── */
.rmode-badge-vivo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.rmode-radar {
  position: relative;
  width: 8px;
  height: 8px;
  background: var(--rmode-primary);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(var(--rmode-primary-rgb), 0.8);
  animation: rmode-heartbeat 2s ease-in-out infinite;
}

.rmode-radar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--rmode-primary);
  border-radius: 50%;
  z-index: -1;
  animation: rmode-ripple 2s ease-out infinite;
  opacity: 0.6;
}

@keyframes rmode-ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes rmode-heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.rmode-live-text {
  font-family: 'Montserrat SemiBold', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--rmode-primary);
  font-weight: 700;
  text-transform: uppercase;
}

.rmode-separator {
  color: rgba(255,255,255,0.2);
  font-size: 10px;
}

.rmode-oyentes {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Montserrat SemiBold', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}

.rmode-oyentes svg {
  width: 12px;
  height: 12px;
  color: var(--rmode-primary);
}

/* ── Marquee de canción ── */
.rmode-marquee {
  width: 100%;
  max-width: 320px;
  background: rgba(var(--rmode-primary-rgb), 0.05);
  border-radius: 4px;
  padding: 8px 0;
  margin: 4px auto;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(var(--rmode-primary-rgb), 0.2);
  display: flex;
  justify-content: center;
}

.rmode-marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Este ticker rota SIEMPRE (a diferencia del título del programa, que
   solo entra en marquesina si desborda) — mismo criterio de loop
   continuo real: dos segmentos idénticos en una pista que se mueve
   exactamente -50% de su ancho total, así el segundo cae pixel-perfecto
   donde arrancó el primero, sin salto ni "doble pase". */
.rmode-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: rmode-marquee-loop 15s linear infinite;
}

.rmode-marquee-text {
  display: inline-block;
  white-space: nowrap;
  padding-right: 2.5rem;
  font-family: 'Montserrat SemiBold', sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* ── Botón instalar PWA (estilo Platinium "btn-pwa-shimmer") ──
   Solo dentro del modo radio expandido — el menú lateral ya tiene su
   propio botón de instalación; este es adicional, mismo criterio visual
   glassmorphism oscuro con shimmer sutil. Oculto por defecto: JS lo
   muestra cuando el navegador dispara beforeinstallprompt. */
.rmode-btn-pwa[hidden] {
  display: none;
}
.rmode-btn-pwa {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin: 6px auto 0;
  /* En desktop (ver media query ≥992px) se alinea a la izquierda, igual
     que el título del programa; en móvil el margin:auto lo sigue
     centrando (mismo comportamiento de siempre ahí). */
  cursor: pointer;
  background: rgba(20, 22, 30, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1.5px solid rgba(var(--rmode-primary-rgb), 0.4);
  border-radius: 16px;
  padding: 10px 16px 10px 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(var(--rmode-primary-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.rmode-btn-pwa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--rmode-primary), rgba(var(--rmode-primary-rgb), 0.7));
  box-shadow: 0 4px 14px rgba(var(--rmode-primary-rgb), 0.45);
}

.rmode-btn-pwa-icon svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.rmode-btn-pwa-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.rmode-btn-pwa-top {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.rmode-btn-pwa-main {
  font-family: 'Montserrat Black', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
}

.rmode-btn-pwa-arrow {
  width: 13px;
  height: 13px;
  color: rgba(var(--rmode-primary-rgb), 0.85);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.rmode-btn-pwa::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: rmode-pwa-shimmer 4s ease-in-out infinite;
}

.rmode-btn-pwa:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rmode-primary-rgb), 0.75);
}

.rmode-btn-pwa:hover .rmode-btn-pwa-arrow { transform: translateX(3px); }

.rmode-btn-pwa:active { transform: translateY(-1px) scale(0.98); }

@keyframes rmode-pwa-shimmer {
  0% { left: -120%; }
  35% { left: 160%; }
  100% { left: 160%; }
}

/* ── Zona de aliados dentro del modo radio ── (a pedido: ahora vive
   dentro de .rmode-info-stack, justo debajo del botón de instalar, en
   vez de una fila propia pegada al fondo del overlay) */
.rmode-aliados {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  min-height: 56px;
  z-index: 10;
  margin: 6px 0 0;
}

.rmode-aliados .aliados-strip {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.rmode-aliados .aliados-eyebrow {
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
}

.rmode-aliados .aliado-banner-wrap {
  background: #0a0c12;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  aspect-ratio: 640 / 120;
}

.rmode-aliados .aliado-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge interno oculto — su texto se refleja en el eyebrow */
.rmode-aliados .aliado-badge {
  display: none !important;
}

.rmode-aliados .aliados-eyebrow {
  font-family: 'Montserrat SemiBold', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: color 200ms ease;
  text-align: center;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.rmode-aliados .aliados-eyebrow.is-cta {
  color: #fff;
  cursor: pointer;
  letter-spacing: 1px;
}

.rmode-aliados .aliados-eyebrow.is-cta svg {
  flex-shrink: 0;
  color: var(--rmode-primary);
}

.rmode-aliados .aliados-eyebrow.is-cta[data-cta-tipo="whatsapp"] svg {
  color: #25D366;
}

.rmode-aliados .aliados-eyebrow.is-cta:hover {
  color: var(--rmode-primary);
}

.rmode-aliados .aliados-progreso-relleno {
  background: var(--rmode-primary);
  box-shadow: 0 0 10px rgba(var(--rmode-primary-rgb), 0.5);
}

@media (min-width: 768px) {
  .rmode-aliados {
    padding: 0;
    min-height: 116px;
  }
}

/* ── Créditos del pie — misma estructura minimalista que Platinium
   (#credits-container): texto + separador + link a la marca, fade-in
   suave. A pedido: ahora hay espacio de sobra abajo (carátula subida,
   aliados reubicado), así que se agrega igual que en Platinium. ── */
.rmode-creditos {
  grid-area: pie;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  /* 09-sep-2026: borde superior sutil, igual que #footer-credits de
     Platinium — antes faltaba, era el único detalle visual que no
     coincidía con el pie de Platinium en este bloque. */
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  /* 09-sep-2026: fondo "vidrio esmerilado" + sticky, igual que .pie-pagina
     de Platinium (confirmado con getComputedStyle en turisticafm.com en
     vivo: position:sticky, bottom:0, background:rgba(10,12,18,.85),
     backdrop-filter:blur(10px)) — en Platinium hace falta el sticky porque
     TODA la página es una sola columna que scrollea; acá el pie ya vive en
     su propia fila fija del grid (fuera de .rmode-central, que es la única
     zona con scroll), así que sticky no es necesario para que se quede
     fijo — pero si el pie llegara a superponerse con .rmode-central en
     algún caso límite, sticky+bottom:0 no está de más. El fondo/blur sí
     se replica siempre, para el mismo look "vidrio" en cualquier caso. */
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(10, 12, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Montserrat SemiBold', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.rmode-creditos.rmode-visible { opacity: 1; }

.rmode-creditos-divisor {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.rmode-creditos a {
  color: var(--rmode-primary);
  text-decoration: none;
  font-weight: 900;
  opacity: 0.7;
  transition: all 0.4s ease;
}
.rmode-creditos a:hover {
  opacity: 1;
  letter-spacing: 4px;
}

/* ── Botón flotante de WhatsApp (esquina inferior derecha, solo Modo Radio) ──
   Fase 52: pill expandible — arranca como círculo con solo el ícono y,
   tras unos segundos, revela un texto invitando a escribirle al locutor
   (ver JS en app.js, ciclarMensajeWhatsappFloat). El ancho lo decide el
   propio contenido flex (icono + texto), no una animación de width
   directa (no animable en la mayoría de navegadores) — se anima el
   max-width/opacity del span de texto, que sí es animable y produce el
   mismo efecto visual de "revelado". */
.rmode-whatsapp-float[hidden] {
  display: none;
}
.rmode-whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  height: 52px;
  padding: 0 13px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 9010;
  text-decoration: none;
  transition: transform var(--rmode-transition), box-shadow var(--rmode-transition);
}

.rmode-whatsapp-float-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.rmode-whatsapp-float-text {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Montserrat SemiBold', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rmode-whatsapp-float--expandido .rmode-whatsapp-float-text {
  max-width: 220px;
  margin-left: 10px;
  opacity: 1;
}

/* Anillo pulsante — llama la atención sin ser invasivo (dos ondas
   desfasadas, mismo criterio que .rmode-radar del badge EN VIVO). Solo
   mientras el botón está colapsado (círculo perfecto): con el texto
   expandido el pill deja de ser circular y el anillo se ve deformado. */
.rmode-whatsapp-float::before,
.rmode-whatsapp-float::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: rmode-whatsapp-pulso 2.2s ease-out infinite;
}
.rmode-whatsapp-float::after {
  animation-delay: 1.1s;
}
.rmode-whatsapp-float--expandido::before,
.rmode-whatsapp-float--expandido::after {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes rmode-whatsapp-pulso {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

.rmode-whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.rmode-whatsapp-float[hidden] { display: none; }

/* ── Responsive ── */

@media (min-width: 768px) {
  .rmode-cover-wrap {
    width: var(--rmode-size-desktop);
    height: var(--rmode-size-desktop);
  }
  .rmode-overlay {
    --rmode-border: clamp(2px, 2.4vw, 8px);
  }
  .rmode-marquee {
    max-width: 400px;
  }
}

@media (min-width: 992px) {
  .rmode-header {
    grid-template-columns: 1fr auto auto;
    justify-content: space-between;
    gap: 16px;
  }
  .rmode-brand {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
  }
  /* A pedido: redes junto al botón cerrar, no bajo la marca. */
  .rmode-redes-grupo {
    grid-column: 2;
  }
  .rmode-redes-grupo:not([hidden]) {
    display: flex;
  }
  .rmode-close {
    grid-column: 3;
  }
  .rmode-central {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    grid-template-areas:
      "reproductor info-area"
      "aliados-full aliados-full";
    grid-template-rows: auto auto;
    max-width: 1000px;
    margin: 0 auto;
    column-gap: 40px;
    row-gap: 24px;
    align-items: center;
    /* Centra el bloque completo (carátula+info y la fila de aliados
       debajo) como una sola unidad dentro del alto disponible — a
       diferencia de align-items (que solo alinea DENTRO de cada fila),
       esto mantiene aliados pegado al contenido de arriba en vez de
       empujarlo al fondo del overlay. */
    align-content: center;
  }
  .rmode-cover-wrap {
    grid-area: reproductor;
    /* A pedido: más cerca de la columna de info (antes centrada en su
       columna) y arriba, a la altura del título (antes quedaba centrada
       verticalmente en toda la fila). */
    justify-self: end;
    align-self: start;
    margin-top: 4px;
  }
  /* Aliados: fila propia de ANCHO COMPLETO (ambas columnas), centrada en
     el ancho total del reproductor — mismo criterio que Platinium
     (.seccion-socios), no confinada a la columna angosta de info.
     09-sep-2026: margen superior igualado al de Platinium en este mismo
     breakpoint (antes heredaba el margin:6px de la base, pensado para
     mobile con poco espacio — en desktop sobra alto y Platinium separa
     más el banner del bloque de arriba). */
  .rmode-aliados {
    grid-area: aliados-full;
    justify-content: center;
    margin-top: clamp(20px, 4vh, 60px);
  }
  .rmode-info-stack {
    grid-area: info-area;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .rmode-info {
    align-items: flex-start;
    text-align: left;
    border-bottom: none;
    border-left: 5px solid var(--rmode-primary);
    padding-left: 20px;
    padding-bottom: 0;
  }
  .rmode-program-name {
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  }
  .rmode-marquee {
    margin: 8px 0 0;
    max-width: 400px;
  }
  .rmode-badge-vivo {
    justify-content: flex-start;
  }
  /* Botón de instalar alineado a la izquierda, en la misma línea que el
     título/marquee (antes quedaba centrado con margin:auto, "suelto"
     respecto al resto de la columna). */
  .rmode-btn-pwa {
    margin: 6px 0 0;
  }
}

@media (min-width: 1200px) {
  .rmode-central {
    grid-template-columns: 4fr 6fr;
    max-width: 1250px;
    column-gap: 30px;
  }
}

/* Landscape bajo */
@media (max-height: 600px) and (orientation: landscape) {
  .rmode-central {
    flex-direction: row;
    gap: 20px;
    padding: 10px;
  }
  .rmode-cover-wrap {
    width: clamp(140px, 40vh, 220px);
    height: clamp(140px, 40vh, 220px);
  }
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .rmode-cover-circle,
  .rmode-cover-circle.rmode-playing,
  .rmode-radar,
  .rmode-radar::after,
  .rmode-btn-pwa::before,
  .rmode-whatsapp-float::before,
  .rmode-whatsapp-float::after {
    animation: none;
  }
  .rmode-overlay {
    transition: none;
  }
}

/* Smartphone ≤575 — empujar contenido arriba */
@media (max-width: 575.98px) {
  .rmode-overlay {
    grid-template-rows: auto auto 1fr;
  }
  .rmode-central {
    justify-content: flex-start;
    padding-top: 8px;
  }
  .rmode-cover-wrap {
    width: var(--rmode-size-mobile);
    height: var(--rmode-size-mobile);
  }
}

/* Teléfonos muy bajos */
@media (orientation: portrait) and (max-height: 680px) {
  .rmode-cover-wrap {
    width: clamp(200px, 40vh, 250px);
    height: clamp(200px, 40vh, 250px);
  }
}

@media (orientation: portrait) and (max-height: 600px) {
  .rmode-cover-wrap {
    width: clamp(165px, 32vh, 205px);
    height: clamp(165px, 32vh, 205px);
  }
}

/* Botón de WhatsApp — en smartphone vertical se saca de la esquina
   inferior (ahí compite con el pie/créditos) y se centra verticalmente
   pegado al borde derecho, como un acceso rápido siempre a la vista sin
   importar cuánto scroll tenga el overlay. Solo aplica en portrait
   angosto — en desktop y tablet se queda en la esquina inferior. */
@media (max-width: 767px) and (orientation: portrait) {
  .rmode-whatsapp-float {
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + 70px));
  }
  .rmode-whatsapp-float:hover,
  .rmode-whatsapp-float:active {
    transform: translateY(calc(-50% + 70px)) scale(1.08);
  }
}