/* ---------- Reproductor global de podcast (barra flotante + overlay
   "Now Playing") ----------
   Vive en el chrome global (footer.php), no en front-page.php — presente en
   toda plantilla. Mismo mecanismo que .koi-drawer (base.css): fixed,
   transform+visibility, var(--koi-ease) — solo cambia el eje (Y en vez de X)
   y el z-index (por encima del drawer, que usa 45). */

.koi-flotante {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  display: flex; align-items: center; gap: 16px;
  padding: 10px clamp(16px, 3vw, 32px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--koi-color-marca); color: #fff;
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  transform: translateY(100%); visibility: hidden;
  transition: transform .35s var(--koi-ease), visibility .35s;
}
.koi-flotante.koi-flotante--visible { transform: translateY(0); visibility: visible; }

.koi-flotante__cuerpo {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: inherit; cursor: pointer; padding: 0; text-align: left;
}
.koi-flotante__punto {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #FF6B4A, #2FBFA0 50%, #FFD166);
}
.koi-flotante--reproduciendo .koi-flotante__punto { animation: koi-pulso 1.6s ease-in-out infinite; }
@keyframes koi-pulso { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.2); opacity: 1; } }

.koi-flotante__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.koi-flotante__titulo { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.koi-flotante__controles { flex: none; display: flex; align-items: center; gap: 14px; }
.koi-flotante__controles button { background: none; border: none; color: #CFCBC4; cursor: pointer; font-family: var(--koi-fuente-mono); font-size: 11px; }
.koi-flotante__controles button:hover { color: #fff; }
#koi-flotante-playpause {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--koi-color-marca);
  display: flex; align-items: center; justify-content: center; font-size: inherit;
}
.koi-flotante__cerrar { font-size: 16px; padding: 4px; }

.koi-flotante__progreso { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.15); cursor: pointer; }
.koi-flotante__progreso-relleno { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #fff; }

.koi-overlay {
  position: fixed; inset: 0; z-index: 47;
  /* Fondo claro (pedido de Carlos) — antes negro (var(--koi-color-marca)),
     ahora el blanco del sistema de diseño (var(--koi-color-fondo)), con
     texto/íconos oscuros en vez de blancos. */
  background: var(--koi-color-fondo); color: var(--koi-color-texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 48px); padding: clamp(24px, 5vw, 64px);
  transform: translateY(100%); visibility: hidden;
  transition: transform .45s var(--koi-ease), visibility .45s;
}
.koi-overlay.koi-overlay--abierto { transform: translateY(0); visibility: visible; }

.koi-overlay__cabecera {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(16px, 3vw, 32px);
}
#koi-overlay-meta { color: var(--koi-color-gris); }
.koi-overlay__cerrar { background: none; border: none; color: var(--koi-color-texto); font-size: 20px; cursor: pointer; }
/* Minimiza a la barrita SIN detener el audio — antes cualquier toque en el
   reproductor minimizaba (patrón "tocar el fondo"), pero Carlos lo encontró
   demasiado fácil de disparar sin querer; ahora es un botón explícito,
   solo esto minimiza. */
.koi-overlay__minimizar { background: none; border: none; color: var(--koi-color-gris); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.koi-overlay__minimizar:hover { color: var(--koi-color-texto); }

.koi-overlay__blob-wrap { width: min(70vw, 60vh, 520px); aspect-ratio: 1/1; }
.koi-overlay__blob { width: 100%; height: 100%; }
#koi-blob-grupo { transform-origin: 100px 100px; }
/* La mancha gira lentamente sobre su propio eje (ver reproductor.js).
   Origen en el centro real del viewBox (200×200), no en la esquina — si no,
   "girar" se ve como "orbitar". */
#koi-blob-mancha {
  transform-origin: 100px 100px;
  fill: #FF2E9A; /* color por defecto — JS lo sobreescribe por episodio en koi:trackchange */
}

.koi-overlay__titulo { font-size: clamp(20px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; text-align: center; max-width: 60ch; }

.koi-overlay__transporte { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.koi-overlay__botones { display: flex; align-items: center; gap: 18px; }
.koi-overlay__botones button { background: none; border: none; color: var(--koi-color-gris); cursor: pointer; font-family: var(--koi-fuente-mono); font-size: 11px; }
.koi-overlay__botones button:hover { color: var(--koi-color-texto); }
#koi-overlay-playpause {
  width: 36px; height: 36px; border-radius: 50%; background: var(--koi-color-marca); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: inherit;
}
.koi-overlay__progreso { display: flex; align-items: center; gap: 10px; width: 100%; font-family: var(--koi-fuente-mono); font-size: 10px; color: var(--koi-color-gris); }
.koi-overlay__progreso-pista { position: relative; width: 100%; height: 3px; border-radius: 2px; background: var(--koi-color-linea); cursor: pointer; }
.koi-overlay__progreso-relleno { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 2px; background: var(--koi-color-marca); }

@media (prefers-reduced-motion: reduce) {
  .koi-flotante, .koi-overlay { transition: opacity .3s ease, visibility .3s; transform: none !important; }
  .koi-flotante:not(.koi-flotante--visible), .koi-overlay:not(.koi-overlay--abierto) { opacity: 0; }
  .koi-flotante.koi-flotante--visible, .koi-overlay.koi-overlay--abierto { opacity: 1; }
  .koi-flotante__punto { animation: none; }
}

@media (max-width: 639px) {
  .koi-flotante { gap: 10px; }
  .koi-flotante__info .koi-meta { display: none; }
  #koi-flotante-back, #koi-flotante-fwd { display: none; }
}