/* =========================================================================
   acciones — Hype, guardar y compartir; cuenta atrás, buscador de notas y crédito de foto.

   Tramo 11 de 14 de la hoja que antes era una sola (`tendencias.css`, 4 671
   líneas). Los tramos son CONTIGUOS y se cargan en este mismo orden: el
   orden de carga es la cascada, así que mover una hoja de sitio puede
   cambiar qué regla gana sin que nada falle. Si hace falta reordenar, se
   comprueba con `npm run huella` y no razonando.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Llamada de atención del botón de modo reproductor.

   Dos anillos que salen del botón en bucle, como las ondas de un altavoz. Es
   el único control del sitio que abre algo nuevo, y sin la animación pasaba
   por un icono más de la interfaz.
   -------------------------------------------------------------------------- */
.flotante--play { position: fixed; }
.flotante--play::before,
.flotante--play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--rojo);
  /* Sin relleno y sin capturar el clic: el anillo se expande hacia afuera y
     nunca tapa el icono. Un z-index negativo aquí no serviría — el botón crea
     contexto de apilamiento y los anillos quedarían detrás de su propio
     fondo, invisibles. */
  background: transparent;
  pointer-events: none;
  animation: onda-play 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
.flotante--play::after { animation-delay: 1.3s; }

@keyframes onda-play {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* Latido muy leve del propio botón, sincronizado con las ondas. */
.flotante--play { animation: latido-play 2.6s ease-in-out infinite; }
@keyframes latido-play {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.06); }
  16%      { transform: scale(1); }
}
/* Al pasar el ratón o enfocar, el llamado se calla: ya tiene la atención. */
.flotante--play:hover,
.flotante--play:focus-visible { animation-play-state: paused; }
.flotante--play:hover::before,
.flotante--play:hover::after,
.flotante--play:focus-visible::before,
.flotante--play:focus-visible::after { animation-play-state: paused; opacity: 0; }

/* Respeta a quien pidió menos movimiento: se queda el botón, sin ondas. */
@media (prefers-reduced-motion: reduce) {
  .flotante--play,
  .flotante--play::before,
  .flotante--play::after { animation: none; }
  .flotante--play::before,
  .flotante--play::after { display: none; }
}

/* --------------------------------------------------------------------------
   Cuenta atrás de la portada: cuánto falta para la próxima corrida.
   Ocupa el hueco que quedaba entre los botones y el play grande.
   -------------------------------------------------------------------------- */
/* Play de la destacada y cuenta atrás, uno junto al otro. En móvil se apilan
   y la cuenta pasa primero, que es lo que se quiere mirar de un vistazo. */
.portada__derecha {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 26px);
  flex-wrap: wrap;
}
@media (max-width: 899px) {
  .portada__derecha { flex-direction: row-reverse; justify-content: flex-end; }
}

.cuenta {
  display: inline-grid;
  gap: 2px;
  padding: 14px 20px 15px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cuenta__eti {
  margin: 0;
  font: 900 .62rem/1 var(--texto-fuente);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.cuenta__reloj {
  margin: 4px 0 2px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  /* Cifras de ancho fijo: sin esto el reloj se mueve a cada segundo. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cuenta__nota {
  margin: 0;
  font-size: .72rem;
  color: rgba(255, 255, 255, .68);
}

/* --------------------------------------------------------------------------
   Acciones sobre una canción: hype, guardar y compartir.
   -------------------------------------------------------------------------- */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}
.accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  /* Rectángulo con las esquinas redondeadas, no cápsula: el pill hacía que
     los tres botones se leyeran como etiquetas y no como controles. */
  border-radius: var(--r-sm);
  border: 1px solid var(--linea-fuerte);
  background: var(--sup-1);
  color: var(--texto-2);
  font-weight: 900;
  font-size: .82rem;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.accion:hover { background: var(--sup-2); color: var(--texto); border-color: var(--texto-3); }
.accion:active { transform: scale(.96); }
.accion[disabled] { opacity: .6; cursor: progress; }
.accion svg { width: 17px; height: 17px; flex: none; }
.accion__num { font-variant-numeric: tabular-nums; }

/* Activa = ya diste hype, o ya está guardada. */
.accion--activa { color: var(--texto); border-color: currentColor; }
/* Hype: la guitarra empieza roja y de contorno, y al hypear se PRENDE — se
   rellena de dorado. El cambio de color además de la forma es lo que hace que
   se lea de un vistazo si ya diste hype o no.

   Sin hypear late despacio para pedir el clic; en cuanto está dada, la
   animación se apaga: ya cumplió y seguir moviéndose sería ruido. */
.accion--hype { color: var(--rojo-claro); position: relative; }

/* La guitarra es una máscara: el archivo sólo tiene la silueta y el color lo
   pone `background`, así que roja y dorada son el mismo archivo. */
.hype-guitarra {
  display: block;
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transition: background .25s ease-out;
}
.acciones--compacta .hype-guitarra { width: 18px; height: 18px; }

.accion--hype .hype-rayo { fill: none; transition: fill .25s ease-out; }
.accion--hype.accion--activa .hype-rayo { fill: currentColor; }

.accion--hype:not(.accion--activa) .hype-guitarra,
.accion--hype:not(.accion--activa) .hype-rayo {
  animation: guitarra-latido 2.4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.accion--hype:not(.accion--activa)::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--rojo);
  animation: guitarra-onda 2.4s ease-out infinite;
  pointer-events: none;
}
.accion--hype:hover { color: var(--oro-luz); border-color: var(--oro); }

.accion--hype.accion--activa {
  color: var(--oro-luz);
  background: rgba(153, 129, 25, .16);
  border-color: var(--oro);
}

@keyframes guitarra-latido {
  0%, 62%, 100% { transform: scale(1) rotate(0deg); }
  70%           { transform: scale(1.16) rotate(-6deg); }
  78%           { transform: scale(1.06) rotate(4deg); }
  86%           { transform: scale(1.11) rotate(-2deg); }
}
@keyframes guitarra-onda {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}
@media (prefers-reduced-motion: reduce) {
  .accion--hype:not(.accion--activa) .hype-guitarra { animation: none; }
  .accion--hype:not(.accion--activa)::after { animation: none; opacity: .4; }
}
.accion--fav.accion--activa {
  color: var(--oro-luz);
  background: rgba(153, 129, 25, .16);
  border-color: var(--oro);
}
.accion--fav.accion--activa svg { fill: var(--oro-luz); stroke: var(--oro-luz); }

/* Pulso corto al sumar hype: confirma que quedó registrado. */
.accion--pulso { animation: pulso-hype .42s ease-out; }
@keyframes pulso-hype {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .accion--pulso { animation: none; }
}

/* ---------------------------------------------------- lista guardadas */
.guardada {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
  margin-bottom: 10px;
}
.guardada__link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
}
.guardada__cover {
  width: 54px; height: 54px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
  background: var(--rojo-osc);
}
.guardada__cover--vacia { display: block; }
.guardada__datos { display: grid; gap: 2px; min-width: 0; }
.guardada__titulo {
  font-weight: 900; font-size: .92rem; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guardada__artista {
  font-size: .8rem; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guardada__link:hover .guardada__titulo { color: var(--rojo-claro); }

.nota-local {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--oro);
  background: var(--sup-1);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--texto-2);
  font-size: .86rem;
}

/* Reproductor desplegable dentro del mini reproductor. Antes el botón de play
   era un enlace a la ficha: tocar play te sacaba de la lista. */
.mini-player__marco {
  padding: 0 var(--gutter) 12px;
  max-width: var(--ancho);
  margin-inline: auto;
  width: 100%;
}
.mini-player__marco iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  background: #000;
}
.mini-player__marco[hidden] { display: none; }
/* Reproductor "cebado": está en el DOM e inicializado (para que iOS permita el
   sonido al tocar play) pero colapsado e invisible hasta que se reproduce. No
   se usa display:none porque entonces iOS no lo inicializaría. */
.mini-player__marco.mp-marco--cebado {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
}
.control--principal[disabled] { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Buscador y filtros del listado de notas.
   -------------------------------------------------------------------------- */
.buscador {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 460px;
  margin: 18px 0 14px;
}
.buscador__icono {
  position: absolute;
  left: 14px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .6);
  pointer-events: none;
}
.buscador__icono svg { width: 17px; height: 17px; }
.buscador__campo {
  width: 100%;
  padding: 12px 40px 12px 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font: 700 .88rem var(--texto-fuente);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.buscador__campo::placeholder { color: rgba(255, 255, 255, .55); font-weight: 400; }
.buscador__campo:focus { outline: none; border-color: #fff; background: rgba(0, 0, 0, .34); }
/* La X nativa del type=search duplica nuestro botón de limpiar. */
.buscador__campo::-webkit-search-cancel-button { display: none; }
.buscador__limpiar {
  position: absolute;
  right: 8px;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
  color: rgba(255, 255, 255, .75);
}
.buscador__limpiar:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.filtros-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  font-weight: 700;
}
.filtro span {
  font-size: .68rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.filtro:hover { border-color: #fff; color: #fff; }
.filtro--activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.filtro--activo span { opacity: .85; }

/* Las dos marcas de tiempo de cada nota. */
.noticia__tiempos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--texto-3);
}
.noticia__tiempos time { display: inline-flex; align-items: center; gap: 5px; }
.noticia__tiempos .icono { width: 13px; height: 13px; opacity: .75; }

/* --------------------------------------------------------------------------
   Analítica: resumen de cabecera y leyendas de cada dato.
   -------------------------------------------------------------------------- */
.resumen-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.resumen-cifra {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  min-width: 160px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.resumen-cifra__eti {
  font: 900 .6rem/1 var(--texto-fuente);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.resumen-cifra__num {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
}
a.resumen-cifra__num:hover { color: var(--oro-luz); }
.resumen-cifra__nota { font-size: .74rem; color: rgba(255, 255, 255, .7); }

/* La explicación va junto al dato, no al final de la página: es donde surge
   la duda de qué significa lo que se está mirando. */
.leyenda-dato {
  max-width: 74ch;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--oro);
  background: var(--sup-1);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--texto-2);
}
.leyenda-dato strong { color: var(--texto); }
.leyenda-dato em { color: var(--oro-luz); font-style: normal; }

/* --------------------------------------------------------------------------
   Crédito de la foto.

   Las imágenes de las notas son del medio que las publicó, no nuestras. El
   crédito va sobre la propia imagen y no en un pie discreto: quien la ve
   tiene que poder saber de quién es sin buscarlo.
   -------------------------------------------------------------------------- */
.credito-foto {
  position: absolute;
  z-index: 3;
  margin: 0;
  font: 700 11px/1 var(--texto-fuente);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 999px;
  pointer-events: auto;
}
/* En la ficha, abajo a la derecha de la portada. */
.nota__portada .credito-foto { right: 14px; bottom: 14px; }
.nota__portada .credito-foto a { text-decoration: underline; text-underline-offset: 2px; }
.nota__portada .credito-foto a:hover { color: var(--oro-luz); }

/* En las tarjetas, sobre la miniatura y más discreto. */
.credito-foto--mini {
  right: 8px;
  bottom: 8px;
  font-size: 9.5px;
  padding: 3px 7px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .82);
}
/* La miniatura ya es position:relative por el recorte; se asegura aquí. */
.noticia__miniatura { position: relative; }