/*!
 * NowPlaying — estilos del bloque "Ahora suena"
 * Independiente, sin dependencias. Pensado como bloque destacado
 * (ej. en el hero de la página de inicio), distinto de la barra de
 * reproducción persistente (radio-player.css).
 */

.np {
  --np-bg: #10182b;
  --np-bg-2: #161f38;
  --np-accent: #e2a63b;
  --np-accent-2: #f4c469;
  --np-live: #ef4444;
  --np-text: #ffffff;
  --np-text-dim: #a9b3c9;
  --np-border: rgba(255, 255, 255, 0.1);
  --np-radius: 18px;

  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  padding: 18px 20px;
  border-radius: var(--np-radius);
  background: linear-gradient(155deg, var(--np-bg) 0%, var(--np-bg-2) 100%);
  border: 1px solid var(--np-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color: var(--np-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}
.np * { box-sizing: border-box; }

/* ---------- Portada (opcional) ---------- */
.np-cover {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(155deg, #24345c, #182342);
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-cover .np-cover-fallback { width: 28px; height: 28px; color: var(--np-accent); opacity: 0.85; }
.np-cover-fallback svg { width: 100%; height: 100%; }
.np:not(.has-cover) .np-cover { display: none; }

/* ---------- Contenido ---------- */
.np-body { flex: 1 1 auto; min-width: 0; }

.np-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--np-text-dim);
  margin-bottom: 5px;
}
.np-eyebrow .np-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-live);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: np-pulse 1.6s ease-out infinite;
}
.np:not(.is-live) .np-eyebrow .np-dot { display: none; }

/* Cuando SÍ hay metadata real de canción/programa, el eyebrow se
   destaca en dorado; cuando se muestra solo el nombre de la emisora
   (sin metadata), queda neutro — para no aparentar que hay un dato
   que en realidad no se tiene. */
.np.has-track .np-eyebrow { color: var(--np-accent-2); }

@keyframes np-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.np-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-subtitle {
  font-size: 0.8rem;
  color: var(--np-text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-subtitle:empty { display: none; }

/* Efecto "marquee" opcional para títulos largos (se activa con JS
   agregando la clase is-marquee cuando el texto no cabe). */
.np-title.is-marquee {
  display: inline-block;
  white-space: nowrap;
  animation: np-marquee 10s linear infinite;
}
@keyframes np-marquee {
  0%, 10% { transform: translateX(0); }
  90%, 100% { transform: translateX(calc(-1 * (100% - 60px))); }
}

/* ---------- Variante compacta ---------- */
.np.np-compact { max-width: none; padding: 12px 16px; gap: 12px; }
.np.np-compact .np-cover { width: 44px; height: 44px; }
.np.np-compact .np-title { font-size: 0.92rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 420px) {
  .np { padding: 14px 16px; gap: 12px; max-width: none; }
  .np-cover { width: 50px; height: 50px; }
  .np-title { font-size: 0.95rem; }
}