/* =========================================================================
   dial — El reproductor fijo: ecualizador, lectura, mandos, aguja y cadena.

   Tramo 5 de 8 de la hoja que antes era una sola (1 468 líneas). Los
   tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
   cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
   nada falle — se comprueba con `npm run huella`, no razonando.
   ========================================================================= */

/* ============================================================== el dial
   El reproductor fijo de todo el sitio. Estética de dial: rejilla de puntos,
   lectura en gris claro sobre negro y aguja roja. Los puntos son los de la
   rejilla del micrófono del logo, no una cita a un aparato genérico.
   ====================================================================== */

.dial {
  position: fixed;
  isolation: isolate;
  /* Empieza donde empieza el contenido, no en el borde de la ventana: la
     barra lateral tiene z-index mayor y le tapaba el ecualizador y medio
     titular. Subirle el z-index al dial arreglaría el recorte y taparía el pie
     del menú, que es peor. En móvil el menú es un cajón y no estorba. */
  left: var(--lateral); right: 0; bottom: 0;
  z-index: 50;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "eq lectura mandos" "aguja aguja aguja";
  align-items: center;
  gap: .25rem 1rem;
  padding: .7rem 1.25rem .55rem;

  /* Del negro-suave al negro, por variables. Antes eran dos hex escritos a
     mano de la paleta vieja, así que al aclarar el fondo del sitio el dial se
     quedó atrás y parecía otro material pegado abajo. */
  background: linear-gradient(180deg, var(--negro-suave) 0%, var(--negro) 100%);
  border-top: 1px solid var(--linea-oscura);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
  color: #fff;
  overflow: hidden;
}

.dial__rejilla {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.1) 1.3px, transparent 1.4px);
  background-size: 13px 13px;
  mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 55%);
  pointer-events: none;
}

/* ------------------------------------------------------------ ecualizador
   Diez columnas de puntos que suben y bajan. Es la señal de vida del aparato:
   con el audio quieto se quedan planas, así que basta mirarlas para saber si
   suena, sin leer nada. */

.dial__ecualizador {
  grid-area: eq;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 2.1rem;
  width: 4.6rem;
}

.dial__ecualizador span {
  flex: 1;
  height: 100%;
  background-image: radial-gradient(circle at center, var(--rojo-claro) 1.6px, transparent 1.7px);
  background-size: 7px 7px;
  background-position: bottom;
  background-repeat: repeat-y;
  transform: scaleY(.18);          /* quieto: sólo la fila de abajo */
  transform-origin: bottom;
  transition: transform .25s ease;
  opacity: .75;
}

.dial[data-estado="sonando"] .dial__ecualizador span {
  animation: barra 1.1s ease-in-out infinite alternate;
  opacity: 1;
}

/* Duraciones distintas y sin múltiplos entre sí, para que no laten todas a la
   vez — que es lo que delata una animación falsa. */
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(1)  { animation-delay: 0s;   animation-duration: .90s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(2)  { animation-delay: .17s; animation-duration: 1.30s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(3)  { animation-delay: .07s; animation-duration: .70s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(4)  { animation-delay: .29s; animation-duration: 1.10s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(5)  { animation-delay: .13s; animation-duration: .80s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(6)  { animation-delay: .23s; animation-duration: 1.50s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(7)  { animation-delay: .03s; animation-duration: .95s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(8)  { animation-delay: .31s; animation-duration: 1.20s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(9)  { animation-delay: .11s; animation-duration: .75s; }
.dial[data-estado="sonando"] .dial__ecualizador span:nth-child(10) { animation-delay: .19s; animation-duration: 1.35s; }

@keyframes barra {
  from { transform: scaleY(.18); }
  to   { transform: scaleY(1); }
}

/* ---------------------------------------------------------------- lectura */

.dial__lectura { grid-area: lectura; min-width: 0; position: relative; }

/* La etiqueta va en gris y no en rojo: sobre el carbón el rojo da 3.5:1, y
   para texto de 10 px eso es ilegible para mucha gente. El rojo se queda donde
   sí cumple —los mandos y el ecualizador, que son controles y no texto. */
.dial__estado {
  margin: 0;
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris-claro);
  font-weight: 700;
}

.dial__titulo {
  margin: .1rem 0 0;
  font-size: .98rem;
  color: var(--gris-claro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- mandos */

.dial__mandos {
  grid-area: mandos;
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.dial__boton {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--linea-oscura);
  background: #201c1c;
  color: #dbd8d8;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, transform .15s ease;
}
.dial__boton:hover { background: #2f292a; transform: scale(1.06); }
.dial__boton svg { width: .95rem; height: .95rem; fill: currentColor; }

.dial__boton--grande {
  width: 2.9rem; height: 2.9rem;
  background: linear-gradient(140deg, var(--rojo), var(--rojo-claro));
  border-color: transparent;
  /* Blanco, no `--negro`. El icono heredaba el color de fondo del sitio y
     sobre el extremo oscuro del degradado daba 1.34:1 — o sea, invisible: el
     botón parecía un disco gris sin símbolo. En blanco da 10.9:1. */
  color: #fff;
}
.dial__boton--grande svg { width: 1.15rem; height: 1.15rem; }

/* Sonando, el botón lleva un halo. El ecualizador ya dice que hay audio, pero
   quien mira el botón para pausar necesita ver en el BOTÓN que hay algo que
   pausar — si no, play y pausa se ven igual de disponibles. */
.dial[data-estado="sonando"] .dial__boton--grande {
  box-shadow: 0 0 0 3px rgba(201, 65, 77, .3), 0 0 18px rgba(201, 65, 77, .35);
}

.dial__vivo {
  border: 1px solid var(--rojo-claro);
  background: transparent;
  color: var(--gris-claro);
  border-radius: 999px;
  padding: .32rem .8rem;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.dial__vivo:hover { background: rgba(201, 65, 77, .18); }

/* ------------------------------------------------------------------ aguja */

.dial__aguja {
  grid-area: aguja;
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.dial__transcurrido,
.dial__total {
  font-variant-numeric: tabular-nums;    /* el número no baila al avanzar */
  font-size: .68rem;
  color: #8e8384;
  min-width: 2.4rem;
}
.dial__total { text-align: right; }

.dial__linea {
  flex: 1;
  accent-color: var(--rojo);
  height: .9rem;
}

/* --------------------------------------------------------------- la cadena */

.cadena { display: flex; flex-direction: column; }

.cadena__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem .6rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--linea);
  border-radius: .5rem;
}
.cadena__fila:hover { background: #fafafa; }

.cadena__num {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--tinta-tenue);
  min-width: 1.7rem;
}

.cadena__texto { flex: 1; min-width: 0; }

.cadena__titulo {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.25;
}

.cadena__meta {
  display: block;
  font-size: .74rem;
  color: var(--tinta-tenue);
  margin-top: .15rem;
}

.cadena__dura {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--tinta-tenue);
}

/* El que suena. Lleva barra roja además del color de texto: el color solo no
   basta para quien no lo distingue. */
.cadena__fila--sonando {
  background: #fdf3f4;
  box-shadow: inset 3px 0 0 var(--rojo);
}
.cadena__fila--sonando .cadena__titulo { font-weight: 700; color: var(--rojo); }
.cadena__fila--sonando .cadena__num { color: var(--rojo); }

.cargar {
  display: block;
  width: 100%;
  margin: 1.75rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.cargar:hover { background: #fafafa; }
.cargar[disabled] { opacity: .6; cursor: default; }

.cadena__fin {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: .82rem;
  color: var(--tinta-tenue);
}

/* ------------------------------------------------- el botón de oír la nota */

.episodio__boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.2rem .7rem .9rem;
  border: 0;
  border-radius: 999px;
  background: var(--negro);
  color: var(--gris-claro);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .15s ease;
}
.episodio__boton:hover { transform: scale(1.03); }
.episodio__boton svg { width: 1rem; height: 1rem; fill: var(--rojo-claro); }

.episodio__crudo { font-size: .88rem; color: var(--tinta-tenue); }

/* Mientras se trae la página siguiente, el cursor avisa. Es lo único que se
   nota de la navegación sin recarga, y algo tiene que notarse. */
.navegando { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .dial__ecualizador span { animation: none !important; }
}

/* --------------------------------------------------------------------- pie */

.pie {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding: 2rem 2.5rem 8.5rem;   /* hueco del dial, que tapa el final */
  color: var(--tinta-tenue);
  font-size: .85rem;
}
.pie a { color: var(--tinta-tenue); }