/**
 * =====================================================================
 *  ESTILOS — Reproductor de vídeos Stop RUIDO · CLAUDE Sep 2026
 * ---------------------------------------------------------------------
 *  Índice de este archivo:
 *    1. Variables (paleta, tipografía, espaciado)
 *    2. Reinicio ligero, limitado a esta sección
 *    3. Cabecera de la sección
 *    4. Layout: 2 columnas en escritorio, apilado en móvil
 *    5. Hero Player (vídeo + badges + texto)
 *    6. Lista / playlist de casos secundarios
 *    7. Accesibilidad (foco de teclado, movimiento reducido)
 *
 *  Cómo adaptar los colores a tu marca:
 *  Todo el color vive en las variables del punto 1. Para encajar esta
 *  sección con la identidad visual exacta de la web, solo tienes que
 *  cambiar los valores hexadecimales ahí — no hace falta tocar nada
 *  más abajo en el archivo.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
   1) VARIABLES
   Paleta pensada para un despacho de abogados serio (tinta/marino)
   con un acento "calma acústica" (verde-azulado apagado), sobre un
   fondo papel cálido — evita el azul-SaaS genérico.
--------------------------------------------------------------------- */
.sr-video-hub {
  --sr-ink: #131c24;
  /* marco del vídeo, títulos fuertes */
  --sr-navy: #1f3245;
  /* texto sobre la badge de "medio" */
  --sr-teal: #2f6f6b;
  /* acento: foco de teclado, indicador "en reproducción" */
  --sr-teal-tint: #dcebe9;
  /* fondo suave para la badge de "medio" */
  --sr-paper: #f6f4ef;
  /* fondo de toda la sección */
  --sr-card: #ffffff;
  /* superficie de la lista al pasar el ratón / activo */
  --sr-text: #1a1f24;
  /* texto principal */
  --sr-muted: #5a646d;
  /* texto secundario: fecha, medio, subtítulos */
  --sr-line: #e3dfd6;
  /* separadores sutiles */

  /* Hereda la tipografía de la página en la que se inserte esta
     sección, para integrarse con el resto de la web. El resto del
     stack es solo un respaldo por si "inherit" no encuentra nada. */
  --sr-font: inherit;

  /* Escala de espaciado fija, para no repartir números sueltos por
     todo el archivo. */
  --sr-space-1: 4px;
  --sr-space-2: 8px;
  --sr-space-3: 16px;
  --sr-space-4: 24px;
  --sr-space-5: 40px;

  --sr-radius: 10px;
  --sr-radius-sm: 6px;

  display: block;
  background: var(--sr-paper);
  color: var(--sr-text);
  font-family: var(--sr-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  padding: var(--sr-space-5) var(--sr-space-3);
}

/* ---------------------------------------------------------------------
   2) REINICIO LIGERO
   Limitado a ".sr-video-hub" para no interferir con el resto de la
   web al insertar este bloque en una página que ya existe.
--------------------------------------------------------------------- */
.sr-video-hub,
.sr-video-hub *,
.sr-video-hub *::before,
.sr-video-hub *::after {
  box-sizing: border-box;
}

.sr-video-hub ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sr-video-hub img {
  max-width: 100%;
  display: block;
}

.sr-video-hub h2,
.sr-video-hub h3,
.sr-video-hub p {
  font-family: inherit;
}

.sr-video-hub__container {
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   3) CABECERA DE LA SECCIÓN
--------------------------------------------------------------------- */
.sr-video-hub__intro {
  margin-bottom: var(--sr-space-4);
  max-width: 68ch;
  /* línea de lectura cómoda para el párrafo intro */
}

.sr-video-hub__intro h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.25;
  margin: 0 0 var(--sr-space-2);
  color: var(--sr-ink);
}

.sr-video-hub__intro p {
  margin: 0;
  color: var(--sr-muted);
  font-size: 1rem;
}

/* ---------------------------------------------------------------------
   4) LAYOUT PRINCIPAL
   Móvil (por defecto): una columna — Hero arriba, lista debajo,
   igual que YouTube en móvil.
   Escritorio (≥960px): dos columnas — lista a la derecha, igual
   que YouTube en escritorio.
--------------------------------------------------------------------- */
.sr-video-hub__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sr-space-4);
  align-items: start;
}

@media (min-width: 960px) {
  .sr-video-hub__layout {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  }
}

/* ---------------------------------------------------------------------
   5) HERO PLAYER
--------------------------------------------------------------------- */
.sr-hero__player-wrap {
  position: relative;
  width: 100%;
  /* aspect-ratio reserva el hueco del vídeo ANTES de que cargue,
     para que el resto de la página no "salte" (evita CLS). */
  aspect-ratio: 16 / 9;
  background: var(--sr-ink);
  border-radius: var(--sr-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(19, 28, 36, 0.18);
}

.sr-hero__video {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--sr-ink);
  /* "contain" y no "cover": son piezas de televisión que a menudo
     llevan rótulos o subtítulos incrustados; recortar con "cover"
     podría cortar texto en pantalla. Con "contain" nunca se pierde
     nada, aunque a veces se vean bandas laterales/superiores. */
  object-fit: contain;
}

.sr-hero__info {
  margin-top: var(--sr-space-3);
  transition: opacity 0.15s ease;
}

.sr-hero__info.is-fading {
  opacity: 0;
}

.sr-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sr-space-2);
  margin-bottom: var(--sr-space-2);
}

.sr-hero__fecha {
  color: var(--sr-muted);
  font-size: 0.875rem;
}

.sr-hero__titulo {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.3;
  margin: 0 0 var(--sr-space-2);
  color: var(--sr-ink);
}

.sr-hero__resumen {
  margin: 0;
  color: var(--sr-text);
  max-width: 68ch;
}

/* Badge de categoría: muestra el año (2026, 2025...) o "Hemeroteca"
   tal cual viene del campo "year" de cada vídeo. */
.sr-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sr-space-1) var(--sr-space-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.4;
}

.sr-badge--categoria {
  background: var(--sr-teal-tint);
  color: var(--sr-navy);
}

/* ---------------------------------------------------------------------
   6) LISTA / PLAYLIST DE CASOS SECUNDARIOS
--------------------------------------------------------------------- */
.sr-playlist__heading {
  font-size: 1rem;
  margin: 0 0 var(--sr-space-2);
  color: var(--sr-ink);
}

.sr-playlist__list {
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-1);
}

@media (min-width: 960px) {
  .sr-playlist__list {
    /* Si algún día hay muchos vídeos, la lista se desplaza en su
       propia columna en vez de alargar infinitamente la página. */
    max-height: 640px;
    overflow-y: auto;
    padding-right: var(--sr-space-1);
  }
}

.sr-playlist__item {
  display: flex;
  gap: var(--sr-space-2);
  padding: var(--sr-space-2);
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease;
}

.sr-playlist__item:hover {
  background: var(--sr-card);
}

.sr-playlist__item.is-active {
  background: var(--sr-card);
  border-color: var(--sr-teal);
}

.sr-playlist__thumb {
  position: relative;
  flex-shrink: 0;
  width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: var(--sr-radius-sm);
  overflow: hidden;
  background: var(--sr-ink);
}

.sr-playlist__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Indicador "en reproducción": barras de ecualizador. Es el único
   elemento animado de toda la sección — coherente con la temática
   acústica del sitio y, además, funcional: solo se muestra cuando
   el vídeo de ESTE caso se está reproduciendo de verdad (lo activa
   JavaScript con la clase "is-playing", basada en los eventos
   play/pause reales del <video>, no en un simple hover). */
.sr-playlist__playing-indicator {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(19, 28, 36, 0.55);
}

.sr-playlist__item.is-active.is-playing .sr-playlist__playing-indicator {
  display: flex;
}

.sr-playlist__playing-indicator span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--sr-teal-tint);
  animation: sr-eq 0.9s ease-in-out infinite;
}

.sr-playlist__playing-indicator span:nth-child(1) {
  height: 9px;
  animation-delay: 0s;
}

.sr-playlist__playing-indicator span:nth-child(2) {
  height: 16px;
  animation-delay: 0.2s;
}

.sr-playlist__playing-indicator span:nth-child(3) {
  height: 11px;
  animation-delay: 0.4s;
}

@keyframes sr-eq {

  0%,
  100% {
    transform: scaleY(0.4);
  }

  50% {
    transform: scaleY(1);
  }
}

.sr-playlist__meta {
  min-width: 0;
  /* permite que el texto largo trunque en vez de desbordar la fila */
}

.sr-playlist__titulo {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-playlist__sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sr-muted);
}

/* ---------------------------------------------------------------------
   7) ACCESIBILIDAD
--------------------------------------------------------------------- */
.sr-playlist__item:focus-visible {
  outline: 3px solid var(--sr-teal);
  outline-offset: 2px;
}

.sr-hero__video:focus-visible {
  outline: 3px solid var(--sr-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sr-hero__info {
    transition: none;
  }

  .sr-playlist__item {
    transition: none;
  }

  .sr-playlist__playing-indicator span {
    animation: none;
    transform: scaleY(0.7);
  }
}