/* reproductor.css — la barra de música.
 *
 * No define un solo color propio: usa los tokens que ya tienen los manuales,
 * como el resto de la app. La barra tiene que notarse que está y no competir
 * con lo que se está estudiando, así que es gris salvo un detalle: la
 * plataforma elegida, que es lo único con color.
 *
 * Dónde se para, que es lo que más cuesta acomodar:
 *
 *   - En el teléfono, las pestañas (Inicio/Buscar/Biblioteca/Perfil) ya están
 *     fijas abajo. El reproductor se apoya JUSTO ENCIMA de ellas, nunca
 *     encima de su lugar. Por eso el `bottom` sale de --rp-piso, que el guion
 *     mide de la barra de pestañas de verdad.
 *   - En pantalla grande (>=900px) las pestañas se acuestan bajo el
 *     encabezado y el fondo queda libre: el reproductor ocupa el ancho entero
 *     con los controles repartidos.
 *
 * Y publica su propio alto en --barra-reproductor para que el contenido de la
 * página se corra hacia arriba y no quede nada tapado por abajo.
 * ------------------------------------------------------------------------- */

.rp {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--rp-piso, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 55;                 /* debajo de las pestañas (60), encima del resto */
  background: color-mix(in srgb, var(--color-paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-body);
  color: var(--color-ink);
  transition: transform .22s var(--ease);
}

/* Mientras no haya nada elegido ni sonando, la barra no tiene por qué existir.
   Se esconde con el atributo, que en esta casa significa oculto de verdad. */
.rp[hidden] { display: none !important; }

/* El hueco al pie, para que la barra no tape el final de lo que se está
   leyendo. Lo reserva el componente y no app.css, porque los capítulos --que
   son 587 de las 614 pantallas-- no cargan app.css ni tienen pestañas: ahí la
   regla de app.css no existe y los últimos renglones quedaban detrás de la
   barra.

   --rp-piso es lo que ocupan las pestañas cuando están fijas abajo (0 si no
   hay, o si en pantalla grande se fueron arriba); lo mide el guion.
   Esta hoja se carga después de app.css, así que esta regla es la que manda. */
body {
  padding-bottom: calc(var(--rp-piso, 0px) + var(--barra-reproductor, 0px)
                       + env(safe-area-inset-bottom, 0px));
}

.rp__fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  max-width: var(--max-wide);
  margin: 0 auto;
}

/* ---- botones ------------------------------------------------------------
   Todos iguales: redondos, sin fondo, del color del texto apagado. El área
   que se toca es de 38px aunque el dibujo mida 20: en el teléfono un botón
   de 20px no se acierta. */
.rp__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.rp__btn:hover { color: var(--color-ink); background: var(--color-paper-alt); }
.rp__btn:active { background: var(--color-paper-sunken); }
.rp__btn svg { width: 20px; height: 20px; display: block; }

/* El play es el único que pesa: es lo que se busca sin mirar. */
.rp__btn--play {
  color: var(--color-ink);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-line);
}
.rp__btn--play svg { width: 17px; height: 17px; }

.rp__btn:focus-visible {
  outline: 2px solid var(--accent-brand);
  outline-offset: 2px;
}

/* ---- qué está sonando --------------------------------------------------- */
.rp__info {
  flex: 1 1 auto;
  min-width: 0;                /* sin esto el texto largo empuja y rompe la fila */
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.rp__titulo {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sin nada cargado el título es un aviso, no un nombre: se dice más callado. */
.rp[data-hay="0"] .rp__titulo { font-weight: 500; color: var(--color-ink-faint); }

.rp__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- lo que sólo se ve abierto ------------------------------------------ */
.rp[data-abierto="0"] .rp__solo-abierto { display: none; }

.rp__grupo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

/* ---- plataforma ---------------------------------------------------------
   Dos botones que se comportan como un interruptor de dos posiciones. La
   elegida es la única cosa con color de toda la barra. */
.rp__plataformas {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-full);
  background: var(--color-paper-alt);
  border: 1px solid var(--color-line);
}
.rp__plat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink-faint);
  cursor: pointer;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.rp__plat svg { width: 17px; height: 17px; display: block; }
.rp__plat:hover { color: var(--color-ink-soft); }
.rp__plat[aria-pressed="true"] {
  background: var(--color-paper-raised);
  color: var(--accent-brand-ink);
  box-shadow: var(--shadow-card);
}
.rp__plat:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 1px; }

/* ---- buscador ------------------------------------------------------------
   Colapsado es sólo la lupa. Al tocarla, el campo crece hacia la izquierda.
   Se anima el ancho y no `display`, porque de display a display no hay
   transición y el campo aparecería de golpe. */
.rp__buscador {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 1 auto;
  min-width: 0;
}
.rp__campo {
  /* flex: 0 0 auto y no el reparto normal. Es hijo de un contenedor flexible,
     asi que por omision puede encogerse: con la fila apretada el campo se
     abria --el atributo cambiaba, la animacion corria-- y quedaba de 2px de
     ancho. Se veia como que la lupa no hacia nada. */
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-paper-alt);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transition: width .2s var(--ease), opacity .16s var(--ease), padding .2s var(--ease);
}
.rp__buscador[data-abierto="1"] .rp__campo {
  width: clamp(120px, 34vw, 260px);
  padding: 7px var(--space-3);
  border-color: var(--color-line);
  opacity: 1;
  pointer-events: auto;
}
.rp__campo:focus { outline: none; border-color: var(--accent-brand); }
.rp__campo::placeholder { color: var(--color-ink-faint); }

/* ---- resultados de la búsqueda -------------------------------------------
   Se abre encima de la barra, no la reemplaza: mientras elegís sigue sonando
   lo de antes y ves qué está sonando. */
.rp__lista {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-paper-raised);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-hover);
}
.rp__lista[hidden] { display: none !important; }
.rp__lista-int { max-width: var(--max-wide); margin: 0 auto; padding: var(--space-2) 0; }

.rp__rot {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.rp__res {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px var(--space-4);
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-ink);
  cursor: pointer;
}
.rp__res:hover, .rp__res:focus-visible { background: var(--color-paper-alt); outline: none; }
.rp__res:focus-visible { box-shadow: inset 2px 0 0 var(--accent-brand); }
.rp__res__txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.rp__res__t {
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp__res__s {
  font-size: 11px; color: var(--color-ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp__res__dur { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* El que está sonando se marca, para no elegirlo dos veces sin darse cuenta. */
.rp__res[aria-current="true"] .rp__res__t { color: var(--accent-brand-ink); font-weight: 600; }

.rp__vacio { padding: var(--space-4); font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* ---- el recuadro de YouTube ----------------------------------------------
   Se ve a propósito: dejar sólo el audio y esconder el reproductor va contra
   las condiciones de uso de YouTube, que piden que esté a la vista. Así que
   cuando la barra está abierta, el video se ve chiquito al lado del título.
   Sólo aparece cuando hay algo cargado; si no, dejaría un rectángulo negro. */
.rp__video {
  flex: 0 0 auto;
  width: 132px; height: 74px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.rp__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.rp[data-hay="0"] .rp__video { display: none; }

@media (max-width: 759px) {
  /* En el teléfono la fila ya va apretada: el video va más chico y se pone
     primero, del lado donde empieza a leerse la barra. */
  .rp__video { width: 96px; height: 54px; order: -1; }
}

/* ---- volumen -------------------------------------------------------------
   El nativo se ve distinto en cada navegador, así que se dibuja la barra y el
   tirador a mano en los dos motores. */
.rp__vol {
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.rp__vol::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-line-strong);
}
.rp__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink-soft);
}
.rp__vol::-moz-range-track {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-line-strong);
}
.rp__vol::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink-soft);
}
.rp__vol:hover::-webkit-slider-thumb { background: var(--color-ink); }
.rp__vol:hover::-moz-range-thumb { background: var(--color-ink); }
.rp__vol:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 4px; }

/* ---- fuera del camino mientras se lee ------------------------------------
   Bajando, la barra se va; subiendo, vuelve. Es lo que hacen los navegadores
   del teléfono con su propia barra, y por el mismo motivo: leer es la tarea,
   la música es el acompañamiento.

   Se corre con transform y no con display, para que no se mueva el texto: el
   hueco al pie sigue reservado, así que el final del capítulo nunca queda
   detrás de la barra ni salta cuando vuelve. */
.rp[data-fuera="1"] {
  transform: translateY(calc(100% + var(--rp-piso, 0px)));
  pointer-events: none;
}

/* La flecha de abrir/cerrar gira; no cambia de dibujo. */
.rp__chev { transition: transform .22s var(--ease); }
.rp[data-abierto="1"] .rp__chev { transform: rotate(180deg); }

/* ---- teléfono y tablet ---------------------------------------------------
   Abierto pasa a dos renglones: arriba qué suena, abajo los controles. En una
   sola fila no entran seis cosas sin que el título quede en tres letras --y
   antes de arreglarlo, el que se quedaba sin lugar era el campo de búsqueda,
   que se abría con 2px de ancho. El corte está en 760 y no en 600 porque a
   629px ya no entraba. */
@media (max-width: 759px) {
  .rp__fila { flex-wrap: wrap; row-gap: var(--space-2); padding: 7px var(--space-3); }
  .rp[data-abierto="1"] .rp__controles {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .rp[data-abierto="1"] .rp__buscador { flex: 1 1 auto; justify-content: flex-end; }
  .rp__vol { width: 68px; }
}

/* ---- pantalla grande ----------------------------------------------------
   Las pestañas se van arriba, así que abajo queda todo el ancho para la
   barra y los controles pueden respirar. */
@media (min-width: 900px) {
  .rp__fila { padding: 9px var(--space-6); gap: var(--space-4); }
  .rp__controles { gap: var(--space-2); }
  .rp__vol { width: 110px; }
  .rp__info { flex: 0 1 320px; }
  /* un separador flexible para que los controles queden centrados y la
     plataforma se vaya al borde */
  .rp__empuje { flex: 1 1 auto; }
}

@media (max-width: 899px) {
  .rp__empuje { display: none; }
}

/* El aviso flotante de las marcas vive a 32px del piso; con la barra puesta
   caía justo detrás. Se sube lo que ocupen las dos barras. */
.ann-toast {
  bottom: calc(32px + var(--rp-piso, 0px) + var(--barra-reproductor, 0px)
               + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .rp, .rp__campo, .rp__chev, .rp__btn, .rp__plat { transition: none; }
}