/* ==========================================================================
   Maqueta · Ilustre Municipalidad de Pica
   radio.css — sección Radio Lagar de la portada: título "Sintoniza",
   reproductor de la señal en vivo y programación.
   La carga partials/home/radio.php.
   ========================================================================== */

.radio {
  --radio-live: #e5484d;
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(41, 191, 203, .38) 0%, transparent 45%),
    radial-gradient(circle at 92% 88%, rgba(93, 204, 163, .22) 0%, transparent 40%),
    linear-gradient(135deg, var(--pm-navy-900) 0%, var(--pm-navy-800) 55%, #1a6f92 100%);
  border-top: 4px solid var(--pm-teal-500);
}

/* --------------------------------------------------------------------------
   Título: "Sintoniza" + nombre de la radio
   -------------------------------------------------------------------------- */
.radio__brand {
  margin-bottom: 1.25rem;
}

.radio__eyebrow {
  margin-bottom: .3rem;
  color: var(--pm-gold-300);
  font-family: var(--pm-font-condensed);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.radio__eyebrow i {
  display: inline-block;
  margin-right: .3rem;
}

.radio.is-playing .radio__eyebrow i {
  animation: radio-signal 1.2s ease-in-out infinite alternate;
}

@keyframes radio-signal {
  0% {
    opacity: .45;
  }

  100% {
    opacity: 1;
  }
}

.radio__title {
  margin-bottom: .5rem;
  color: var(--pm-gold-400);
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.015em;
}

.radio__title-pre {
  display: block;
  color: var(--pm-text);
  font-size: .5em;
  font-weight: 300;
  letter-spacing: .02em;
}

.radio__tagline {
  margin: 0;
  color: var(--pm-blue-400);
  font-size: 1rem;
  font-weight: 600;
}

.radio__lead {
  max-width: 58ch;
  margin-bottom: 1.75rem;
  color: var(--pm-text-soft);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Reproductor
   -------------------------------------------------------------------------- */
.radio-player {
  padding: 1.25rem 1.35rem 1rem;
  border: 3px solid var(--pm-blue-400);
  border-radius: 16px;
  background: var(--pm-navy-850);
  box-shadow: var(--pm-shadow);
  transition: border-color .3s ease;
}

.radio.is-playing .radio-player {
  border-color: var(--pm-gold-500);
}

.radio-player__native {
  width: 100%;
}

.radio-player__ui {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
}

.radio-player__ui[hidden] {
  display: none;
}

.radio-player__toggle {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
  font-size: 2.1rem;
  box-shadow: 0 0 0 8px rgba(247, 209, 56, .16);
  transition: scale .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.radio-player__toggle .bi-play-fill {
  margin-left: .15em;
}

.radio-player__toggle:hover {
  background: var(--pm-gold-400);
  box-shadow: 0 0 0 11px rgba(247, 209, 56, .22);
  scale: 1.05;
}

.radio-player__toggle:disabled {
  cursor: progress;
  opacity: .75;
}

.radio-player__info {
  min-width: 0;
}

.radio-player__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .2rem;
  color: var(--pm-gold-300);
  font-family: var(--pm-font-condensed);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.radio-player__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pm-text-soft);
}

.radio.is-playing .radio-player__dot {
  background: var(--radio-live);
  animation: radio-dot 1.6s ease-out infinite;
}

.radio.is-playing .radio-player__badge {
  color: #ff9a9d;
}

@keyframes radio-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 72, 77, .6);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(229, 72, 77, 0);
  }
}

.radio-player__status {
  margin: 0;
  overflow: hidden;
  color: var(--pm-text);
  font-size: .95rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-player.has-error .radio-player__status {
  color: #ffb4a8;
  white-space: normal;
}

/* Ecualizador: se mueve solo mientras suena */
.radio-player__eq {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
}

.radio-player__eq span {
  width: 5px;
  height: 25%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--pm-gold-300), var(--pm-gold-600));
  transition: height .3s ease;
}

.radio.is-playing .radio-player__eq span {
  animation: radio-eq 1s ease-in-out infinite alternate;
}

.radio.is-playing .radio-player__eq span:nth-child(2) {
  animation-duration: .7s;
}

.radio.is-playing .radio-player__eq span:nth-child(3) {
  animation-duration: 1.2s;
}

.radio.is-playing .radio-player__eq span:nth-child(4) {
  animation-duration: .85s;
}

.radio.is-playing .radio-player__eq span:nth-child(5) {
  animation-duration: 1.05s;
}

@keyframes radio-eq {
  0% {
    height: 20%;
  }

  100% {
    height: 100%;
  }
}

.radio-player__volume {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.radio-player__mute {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pm-gold-300);
  font-size: 1.3rem;
}

.radio-player__mute:hover {
  background: rgba(247, 209, 56, .12);
}

.radio-player__range {
  width: 96px;
  accent-color: var(--pm-gold-500);
}

.radio-player__source {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(174, 191, 216, .15);
  color: var(--pm-text-soft);
  font-size: .8rem;
}

.radio-player__source a {
  color: var(--pm-gold-300);
  text-decoration: underline;
}

.radio-player__source i {
  font-size: .7rem;
}

/* --------------------------------------------------------------------------
   Programación
   -------------------------------------------------------------------------- */
.radio-schedule {
  padding: 1.75rem 1.75rem 1.25rem;
  border: 3px solid var(--pm-blue-400);
  border-radius: 16px;
  background: rgba(8, 33, 66, .85);
}

.radio-schedule__title {
  margin-bottom: 1rem;
  color: var(--pm-gold-400);
  font-size: 1.3rem;
  font-weight: 800;
}

.radio-schedule__title i {
  margin-right: .45rem;
  color: var(--pm-gold-500);
}

.radio-schedule__list {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--pm-text-soft);
  --bs-accordion-border-color: rgba(174, 191, 216, .15);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: .95rem;
  --bs-accordion-btn-color: var(--pm-text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--pm-gold-300);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(247, 209, 56, .35);
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  /* Flecha dorada (mismo ícono de Bootstrap, en el dorado del sitio) */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f6c65b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f6c65b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.radio-schedule__list .accordion-item + .accordion-item {
  border-top: 1px solid rgba(174, 191, 216, .15);
}

.radio-schedule__list .accordion-button {
  gap: 1rem;
  font-weight: 700;
}

.radio-schedule__time {
  flex: none;
  min-width: 64px;
  padding: .4rem .6rem;
  border-radius: 6px;
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
  font-family: var(--pm-font-condensed);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
}

.radio-schedule__name {
  font-size: 1.05rem;
}

.radio-schedule__list .accordion-body {
  padding-bottom: 1rem;
  padding-left: calc(64px + 1rem);
  font-size: .93rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .radio {
    padding: 3rem 0;
  }

  .radio-player__ui {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .85rem;
  }

  .radio-player__status {
    font-size: .9rem;
    white-space: normal;
  }

  .radio-player__volume {
    grid-column: 1 / -1;
  }

  .radio-player__range {
    flex: 1;
    width: auto;
  }

  .radio-schedule {
    padding: 1.25rem 1.25rem 1rem;
  }

  .radio-schedule__list .accordion-body {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radio.is-playing .radio__eyebrow i,
  .radio.is-playing .radio-player__dot,
  .radio.is-playing .radio-player__eq span {
    animation: none;
  }

  .radio.is-playing .radio-player__eq span {
    height: 60%;
  }
}