/* =========================================================================
   controles — Selector desplegable, calendario de cortes y páginas legales.

   Tramo 14 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.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Selector desplegable (hoja que sube desde abajo)

   El mecanismo es genérico: lo usan el selector de fecha y el de región. Es un
   `<details>` nativo — se abre con teclado, funciona sin JavaScript y no
   arrastra ninguna biblioteca.
-------------------------------------------------------------------------- */
.selector { position: relative; margin-top: 14px; }

.selector__boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  cursor: pointer; list-style: none;
  transition: background .15s, border-color .15s;
}
/* Safari dibuja su propio triángulo si no se le quita el marcador. */
.selector__boton::-webkit-details-marker { display: none; }
.selector__boton:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .35); }
.selector__boton:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

.selector__icono { width: 17px; height: 17px; color: var(--oro-luz); flex: 0 0 auto; }
.selector__texto { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.selector__eti {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.selector__texto strong { font-size: .92rem; white-space: nowrap; }
.selector__flecha { width: 15px; height: 15px; color: var(--texto-3); transition: transform .2s; }
.selector[open] .selector__flecha { transform: rotate(180deg); }

/* El velo es el ::after del propio summary: así, tocar fuera cierra la hoja
   sin una línea de JavaScript — el clic sigue cayendo en el disparador. */
.selector[open] .selector__boton::after {
  content: ''; position: fixed; inset: 0; z-index: 130;
  background: rgba(0, 0, 0, .6);
}

/* La hoja se queda en el DOM aunque esté cerrada (el navegador la ocultaría
   con display:none) para poder animar el deslizamiento. Oculta de verdad:
   sin eventos y fuera del árbol de accesibilidad. */
.selector__hoja {
  display: block;
  /* Por encima de la cabecera (90), los flotantes (92), el mini reproductor
     (95) y el reproductor grande (120): mientras la hoja está abierta es lo
     único con lo que se puede interactuar. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 131;
  background: var(--sup-1);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  transform: translateY(101%);
  visibility: hidden; pointer-events: none;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), visibility .24s;
}
.selector[open] .selector__hoja {
  transform: translateY(0); visibility: visible; pointer-events: auto;
}
/* El asa: dice «esto se arrastra desde abajo» sin escribirlo. */
.selector__hoja::before {
  content: ''; display: block; width: 38px; height: 4px; margin: 2px auto 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .22);
}

.selector__titulo {
  margin: 0 0 6px; font-size: .7rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.selector__lista { list-style: none; margin: 0; padding: 0; }
.selector__op {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 6px; border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: .95rem;
}
.selector__lista li:last-child .selector__op { border-bottom: 0; }
.selector__op:hover { background: rgba(255, 255, 255, .05); }
.selector__op--activa { color: var(--oro-luz); font-weight: 700; }
.selector__marca {
  font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--negro); background: var(--oro-luz); border-radius: 999px; padding: 3px 9px;
}

/* En pantallas grandes no hay «abajo» que valga: la hoja se ancla al botón. */
@media (min-width: 720px) {
  .selector__hoja {
    position: absolute; left: 0; right: auto; top: calc(100% + 8px); bottom: auto;
    min-width: 300px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14);
    padding: 12px 14px; transform: translateY(-6px); opacity: 0;
    transition: transform .16s ease, opacity .16s ease, visibility .16s;
  }
  .selector[open] .selector__hoja { transform: translateY(0); opacity: 1; }
  .selector__hoja::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .selector__hoja, .selector__flecha { transition: none; }
}

/* --------------------------------------------------------------------------
   Calendario de cortes

   Sustituye a las tiras de fechas de la portada y de las páginas de archivo.
   Una lista crece con el archivo —siete días hoy, noventa en tres meses— y un
   calendario ocupa lo mismo siempre. Además dice algo que la lista no puede:
   qué días hay y cuáles faltan.
-------------------------------------------------------------------------- */
.cal { max-width: 340px; }

.cal__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal__mes {
  margin: 0; font-weight: 700; font-size: .92rem;
  text-align: center; flex: 1;
}
/* Sólo la primera letra: `capitalize` subía también la preposición y dejaba
   «Septiembre De 2026». */
.cal__mes::first-letter { text-transform: uppercase; }
.cal__salto {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--linea); color: var(--texto-2);
  font-size: 1.1rem; line-height: 1; flex: 0 0 auto;
}
.cal__salto:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
/* El mes sin cortes no se enlaza, pero el hueco se conserva para que el
   nombre del mes no baile al pasar de un mes a otro. */
.cal__salto--nulo { opacity: .22; border-color: transparent; }

.cal__tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__tabla th {
  padding: 4px 0 8px; font-size: .68rem; font-weight: 700;
  color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em;
}
.cal__tabla td { padding: 2px; text-align: center; }

.cal__dia {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1; max-height: 40px;
  border-radius: 10px; font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
a.cal__dia {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  font-weight: 700; color: var(--texto);
}
a.cal__dia:hover { background: rgba(255, 255, 255, .14); border-color: var(--linea-fuerte); }
/* Los días sin corte quedan legibles pero apagados: se ve que el mes sigue
   ahí, y que ese día no hay nada que enseñar. */
.cal__dia--vacio { color: var(--texto-3); opacity: .5; }
.cal__dia--activa,
a.cal__dia--activa { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.cal__dia--activa:hover { background: var(--rojo-claro); }
/* Hoy se marca con un punto, no con color: el color ya significa «lo que
   estás viendo» y dos significados en la misma señal no se distinguen. */
.cal__dia--hoy { position: relative; }
.cal__dia--hoy::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--oro-luz);
}
.cal__dia--activa.cal__dia--hoy::after { background: #fff; }

.cal__leyenda {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0; font-size: .74rem; color: var(--texto-3);
}
.cal__punto {
  width: 12px; height: 12px; border-radius: 4px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}

/* Dentro de la hoja que sube ocupa todo el ancho disponible. */
.selector__hoja .cal { max-width: none; }

/* --- Selector de región ---------------------------------------------------
   En móvil se pliega como el de fecha: las cinco pastillas no caben y la
   última salía cortada. En pantallas anchas sí caben, y ahí dos toques serían
   peor que uno: el disparador se esconde y la lista vuelve a ser una fila.
   Mismo marcado en los dos casos — no hay copias de los enlaces compitiendo
   por el foco ni por el lector de pantalla. */
.selector--region { margin: 0; }
.selector--region .selector__boton { width: 100%; justify-content: flex-start; }
.selector--region .selector__hoja .regiones__pista {
  display: flex; flex-direction: column; gap: 4px; overflow: visible;
}
.selector--region .selector__hoja .ficha {
  width: 100%; justify-content: flex-start; border-radius: 10px;
}

@media (min-width: 720px) {
  .selector--region .selector__boton { display: none; }
  /* Sin `position: fixed` ni transformación: aquí la hoja no es una hoja, es
     la propia fila de pastillas de siempre. */
  .selector--region .selector__hoja {
    position: static; transform: none; opacity: 1;
    visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none;
    padding: 0; max-height: none; min-width: 0; overflow: visible;
  }
  .selector--region .selector__titulo { display: none; }
  .selector--region .selector__hoja .regiones__pista {
    flex-direction: row; flex-wrap: wrap; gap: 8px;
  }
  .selector--region .selector__hoja .ficha { width: auto; border-radius: 999px; }
  /* El velo tampoco: no hay nada que velar si la lista está siempre a la vista. */
  .selector--region[open] .selector__boton::after { display: none; }
}

/* ==========================================================================
   Cargador

   Un anillo de barras de ecualizador recorrido por una onda, con una aguja
   roja→oro girando por encima como sobre un chart. Reusa el lenguaje visual
   que ya tiene el sitio en el disco de «sonando ahora» en vez de traer un
   spinner genérico que podría ser de cualquiera.

   Todo el movimiento es CSS y las barras vienen dibujadas del servidor: si el
   cargador dependiera de JavaScript, la única pantalla donde de verdad hay que
   esperar sería justo la que aparecería vacía.
   ========================================================================== */

.cargador {
  --tam: 132px;
  --barras: 44;
  --grosor: 2.5px;
  --vuelta: 2.6s;      /* lo que tarda una onda en dar la vuelta */
  --ondas: 3;          /* cuántas crestas hay a la vez en el anillo */
  --giro: 3.4s;        /* lo que tarda la aguja */

  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cargador--chico { --tam: 78px; --barras: 44; --grosor: 2px; gap: 9px; }

.cargador__anillo {
  position: relative;
  width: var(--tam); height: var(--tam);
  display: grid; place-items: center;
}

/* --- Las barras ---------------------------------------------------------
   Cada una se rota a su ángulo y se empuja al radio. El desfase del pulso es
   proporcional al índice, así que la animación no es un parpadeo a la vez:
   es una onda que recorre el anillo. */
.cargador__barras { position: absolute; inset: 0; }
.cargador__barras i {
  /* El ángulo y el radio se guardan en variables porque los fotogramas
     necesitan repetirlos: la escala TIENE que ir dentro del mismo `transform`.
     Con la propiedad `scale` aparte, el navegador la aplica después de
     `transform` —así se compone la matriz— y acababa escalando también la
     POSICIÓN de cada barra: el anillo se deformaba en pera con una onda y en
     triángulo con tres. */
  --a: calc(var(--i) * (360deg / var(--barras)));
  --r: calc(var(--tam) * -.34);

  position: absolute; top: 50%; left: 50%;
  width: var(--grosor); height: calc(var(--tam) * .12);
  margin: calc(var(--tam) * -.06) calc(var(--grosor) / -2);
  border-radius: 999px;
  background: linear-gradient(to top, var(--rojo), var(--oro-luz));
  transform: rotate(var(--a)) translateY(var(--r));
  transform-origin: 50% 50%;
  animation: cargador-pulso var(--vuelta) ease-in-out infinite;
  /* El desfase multiplicado por `--ondas` reparte varias crestas por el
     anillo en vez de una sola cresta enorme dando la vuelta. */
  animation-delay: calc(var(--i) * (var(--vuelta) / var(--barras)) * var(--ondas) * -1);
  will-change: transform, opacity;
}

/* El mínimo no baja de .55: por debajo, las barras cortas desaparecen y el
   anillo se rompe. Lo que late es la cresta, no la existencia del aro. */
@keyframes cargador-pulso {
  0%, 100% { transform: rotate(var(--a)) translateY(var(--r)) scaleY(.55); opacity: .45; }
  50%      { transform: rotate(var(--a)) translateY(var(--r)) scaleY(1.45); opacity: 1; }
}

/* --- La aguja -----------------------------------------------------------
   Un barrido cónico recortado a un aro con `mask`: es un degradado, no un
   elemento girando, así que no hay borde que se vea pixelado al rotar. */
.cargador__aguja {
  position: absolute; inset: calc(var(--tam) * .06);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 70%,
    rgba(228, 18, 58, .35) 82%,
    var(--rojo) 92%,
    var(--oro-luz) 99%,
    transparent 100%);
  /* Aro fino: la aguja pasa POR ENCIMA de las barras, no las tapa. */
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 89%);
          mask: radial-gradient(closest-side, transparent 86%, #000 89%);
  animation: cargador-giro var(--giro) linear infinite;
}
@keyframes cargador-giro { to { transform: rotate(1turn); } }

/* --- El núcleo ----------------------------------------------------------
   El resplandor del centro. Late a contratiempo de la onda (la mitad de
   rápido) para que el conjunto no parezca un solo latido. */
.cargador__nucleo {
  position: absolute;
  width: calc(var(--tam) * .34); height: calc(var(--tam) * .34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 18, 58, .55) 0%, rgba(212, 172, 43, .18) 45%, transparent 70%);
  filter: blur(6px);
  animation: cargador-latido calc(var(--vuelta) * 2) ease-in-out infinite;
}
@keyframes cargador-latido {
  0%, 100% { transform: scale(.85); opacity: .55; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.cargador__texto {
  margin: 0; font-size: .84rem; color: var(--texto-2);
  letter-spacing: .02em; text-align: center;
}

/* Sin movimiento: el anillo se queda quieto y late muy despacio. Un cargador
   inmóvil del todo parecería colgado, y un latido lento no dispara a nadie. */
@media (prefers-reduced-motion: reduce) {
  .cargador__barras i { animation: none; opacity: .55; }
  .cargador__aguja { animation: none; opacity: .8; }
  .cargador__nucleo { animation: cargador-latido 3.2s ease-in-out infinite; }
}

/* El cargador dentro de la fachada: sólo mientras se busca el video. */
.fachada__cargando { display: none; }
.fachada--buscando .fachada__cargando {
  display: grid; place-items: center;
  position: absolute; inset: 0; z-index: 2;
  background: rgba(11, 11, 13, .72);
  backdrop-filter: blur(2px);
}
/* Mientras se busca, el play y la nota sobran: el cargador ya dice qué pasa,
   y dos mensajes a la vez compiten. */
.fachada--buscando .fachada__play,
.fachada--buscando .fachada__nota { opacity: 0; }

/* Velo de navegación. Aparece sólo si la página siguiente tarda; hasta
   entonces no existe visualmente, para no meter un parpadeo en cada clic. */
.velo-carga {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(11, 11, 13, .82);
  backdrop-filter: blur(3px);
  opacity: 0;
  animation: velo-entra .18s ease forwards;
}
.velo-carga[hidden] { display: none; }
@keyframes velo-entra { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .velo-carga { animation: none; opacity: 1; }
}

/* Marcador de movimiento dentro de una fila de video. Va bajo el canal, no en
   la columna de acciones: en la lista de videos esa columna ya lleva hype,
   guardar y compartir, y una cuarta cosa la volvía ilegible. */
/*
 * La fila del movimiento se RESERVA aunque no haya movimiento.
 *
 * Idea tomada del otro arreglo de este mismo bug (be9cede), que llegó por otra
 * vía: con `display: none` las filas sin ▲/▼ medían menos que las vecinas y el
 * listado perdía el pulso — una lista que se recorre con la vista necesita que
 * todas sus filas midan igual. Con `visibility: hidden` el hueco se queda y la
 * fila no se encoge.
 *
 * Aquí sí aplica y en las tarjetas del cinema no: ahí el marcador va EN LÍNEA
 * con el artista, así que estar vacío no cambia el alto de nada.
 */
.pista__movimiento { margin-top: 6px; min-height: 22px; }
.pista__movimiento:empty { visibility: hidden; }

/*
 * El movimiento va JUNTO al artista, no debajo.
 *
 * Estaba como tercera fila (`display: block; margin-top: 6px`) dentro de una
 * tarjeta con **alto fijo de 82px**, puesto cuando el cuerpo tenía dos filas:
 * título a dos líneas y subtítulo. La insignia se añadió después y nadie
 * volvió a mirar la altura, así que se salía **18px por debajo del borde** —y
 * como la tarjeta no recorta (`overflow: visible`), colgaba fuera del borde
 * redondeado, encima de la tarjeta de al lado.
 *
 * Crecer la tarjeta era la otra salida, y se descartó: son 20px más en un
 * carrusel horizontal, en todas las tarjetas, para un dato de dos caracteres.
 * El subtítulo ya se recorta con puntos suspensivos; ahora cede el ancho que
 * haga falta y la insignia nunca se corta, que es lo correcto — el artista se
 * adivina por la portada, el «▲ 1» no.
 */
.cinema-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cinema-card__sub { min-width: 0; flex: 1 1 auto; }
.cinema-card__delta { flex: none; }
.cinema-card__delta:empty { display: none; }

/* Más chica que en las listas: aquí compite con un subtítulo de .72rem y a
   tamaño completo se comía la fila. */
.cinema-card__delta .delta { font-size: .68rem; padding: 2px 6px; }

/* Aviso de que ese mercado no tiene corte de esta fecha y el enlace salta a
   otra: cambiar de mercado Y de fecha sin avisar desorienta. */
.filtro__nota {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  opacity: .6; margin-left: 4px;
}

/* --------------------------------------------------------------------------
   Cabecera: las dos grietas que rompían la fila

   `.cabecera__fila` tiene alto fijo (64px) y no envuelve. Con once apartados
   en el menú pasaban dos cosas a la vez:

   1. Las etiquetas de dos palabras —«Estados Unidos», «Notas propias»— se
      partían en dos renglones y reventaban el alto de la fila.
   2. El buscador no tenía `flex-shrink: 0`, así que el flex lo aplastaba hasta
      dejarlo en un círculo vacío: seguía ahí, ocupando sitio, sin poder usarse.

   Las dos se tapan aquí. Lo que NO se arregla con CSS es que once apartados no
   caben en un portátil: eso está anotado en docs/registro-peticiones.md como
   decisión de qué agrupar.
   -------------------------------------------------------------------------- */

/* Una etiqueta de menú nunca se parte en dos renglones. */
.nav a { white-space: nowrap; }

/* O tiene su ancho, o no está. Aplastado no le sirve a nadie. */
.buscador--cabecera { flex: 0 0 190px; }

/*
 * Entre 1500 y 1750 el menú va apretado: cuerpo algo menor y menos aire a los
 * lados. Con las medidas de siempre la fila pide 1682px y en ese tramo no los
 * hay. Apretarlo cabe en 1486 — feo sería partirlo en dos renglones, no que
 * las pastillas midan cuatro píxeles menos.
 */
@media (min-width: 1550px) and (max-width: 1749px) {
  .nav { gap: 3px; }
  .nav a { padding: 8px 11px; font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   Páginas legales (/privacidad, /terminosycondiciones)

   Medida de lectura corta y jerarquía clara: son documentos que se consultan
   buscando un dato concreto, no que se leen de corrido. Si el ojo no encuentra
   el apartado de un vistazo, da igual lo bien escrita que esté la política.
   -------------------------------------------------------------------------- */
.legal { max-width: 68ch; padding-block: 2.5rem 4rem; }
.legal__fecha {
  color: var(--texto-3); font-size: .85rem; margin: 0 0 2.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--linea);
}
.legal section { margin-bottom: 2.6rem; }
.legal h2 {
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.6rem;
  letter-spacing: .01em; margin: 0 0 .9rem;
}
.legal h3 { font-size: 1rem; font-weight: 900; margin: 1.6rem 0 .6rem; color: var(--texto); }
.legal p { margin: 0 0 1rem; color: var(--texto-2); line-height: 1.75; }
.legal strong { color: var(--texto); }
.legal a { color: var(--oro-luz); text-decoration: underline; text-underline-offset: 3px; }
.legal ul { margin: 0 0 1.2rem; padding-left: 1.2rem; color: var(--texto-2); line-height: 1.75; }
.legal li { margin-bottom: .5rem; }
.legal code {
  background: var(--sup-2); border-radius: 6px; padding: .1rem .4rem;
  font-size: .88em; color: var(--texto);
}

.tabla-legal { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .92rem; }
.tabla-legal th {
  text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 900; padding: 0 .7rem .6rem;
  border-bottom: 1px solid var(--linea);
}
.tabla-legal td { padding: .7rem; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--texto-2); }
.tabla-legal tr:last-child td { border-bottom: 0; }

@media (max-width: 560px) {
  /* La tabla de cookies no cabe en un teléfono: se desplaza en vez de aplastarse. */
  .tabla-legal { display: block; overflow-x: auto; white-space: nowrap; }
}