/* ───────────── Tema "Red Nariño (multi-radio)" ─────────────
   Hereda el skin del tema "Red de emisoras" y agrega lo propio de esta red
   (RED SINDAMANOY). Vamos puliéndolo aquí sin tocar el tema base. */
@import url('../red/theme.css');

/* Radio destacada de la temporada (la elige la app, llega por el API) */
.red-destacada {
  margin: 10px 0 22px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(120deg, rgb(var(--primary)), rgb(var(--accent)));
  box-shadow: 0 22px 50px -26px rgb(var(--primary) / .7);
}
.red-destacada-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px 6px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.red-destacada-tag .material-symbols-outlined { font-size: 18px; }
.red-destacada-in {
  display: flex; align-items: center; gap: 16px;
  background: rgb(var(--surface)); color: rgb(var(--text));
  border-radius: 16px; padding: 16px 18px;
}
.red-destacada-logo {
  width: 72px; height: 72px; flex: 0 0 auto; border-radius: 14px;
  object-fit: cover; background: rgb(var(--bg));
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / .6);
}
.red-destacada-txt { flex: 1; min-width: 0; }
.red-destacada-txt h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.1; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.red-destacada-txt p {
  margin: 3px 0 0; font-size: 13px; font-weight: 700; color: rgb(var(--accent-text, var(--accent)));
  display: inline-flex; align-items: center; gap: 6px;
}
.red-destacada-txt p::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--accent)); box-shadow: 0 0 0 0 rgb(var(--accent) / .6);
  animation: redDotPulse 1.4s infinite;
}
@keyframes redDotPulse { 70% { box-shadow: 0 0 0 7px rgb(var(--accent) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); } }
.red-destacada-play {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgb(var(--accent)); color: rgb(var(--on-accent));
  border: 0; cursor: pointer; font-weight: 800; font-size: 15px;
  padding: 12px 22px; border-radius: 12px; transition: transform .15s ease, filter .15s ease;
}
.red-destacada-play:hover { transform: translateY(-2px); filter: brightness(1.06); }
.red-destacada-play .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; }
@media (max-width: 560px) {
  .red-destacada-in { flex-wrap: wrap; }
  .red-destacada-play { width: 100%; justify-content: center; }
}