/* Estilos específicos que Tailwind no cubre limpio.
   El grueso de estilos va vía clases utility en el HTML. */

/* Clase utility .is-hidden para ocultar chips y elementos puntuales que
   no se pueden ocultar con utilidades Tailwind sin generar overrides.
   Usada por el filtro "Ocultar juegos +18" (esconde el chip de modo +18
   en el panel cuando el usuario activa el filtro).
   IMPORTANTE: se llama .is-hidden (no .hidden) para no chocar con la
   utility `.hidden` de Tailwind. Si la renombramos a `.hidden` pisaríamos
   el botón `id="filters-toggle"` que usa `class="hidden lg:flex"` y se
   quedaría oculto en desktop. */
.is-hidden { display: none !important; }

/* Sidebar plegable: cuando el layout tiene data-filters-collapsed,
   la columna de filtros se oculta y el grid pasa a 1 columna. */
[data-layout] { transition: all 0.2s; }
[data-layout][data-filters-collapsed="true"] {
  grid-template-columns: minmax(0, 1fr) !important;
}
[data-layout][data-filters-collapsed="true"] [data-sidebar] {
  display: none !important;
}
[data-filters-toggle] {
  transition: left 0.2s, color 0.15s, border-color 0.15s, background 0.15s;
}
[data-filters-toggle] [data-arrow] {
  transition: transform 0.2s;
}
[data-layout][data-filters-collapsed="true"] [data-filters-toggle] [data-arrow] {
  transform: rotate(180deg);
}

/* ── Panel lateral: scroll vertical cuando el contenido desborda ─────────── */

/* Estilos compartidos del scrollbar personalizado. Aplican a [data-sidebar]
   en cualquier tamaño (escritorio o drawer móvil). El scrollbar solo aparece
   cuando el contenido realmente desborda, gracias a overflow-y: auto. */
[data-sidebar] {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #2a3142 transparent;
  /* Truco RTL: ponemos la dirección del contenedor a rtl para que la
     scrollbar aparezca a la IZQUIERDA (en LTR estaría a la derecha).
     direction es una propiedad heredable, así que con restaurar `direction:
     ltr` en los hijos directos el contenido se sigue leyendo y colocando
     de izquierda a derecha (texto, flex, grid, etc.). */
  direction: rtl;
}
/* Webkit (Chrome, Edge, Vivaldi, Safari): barra fina, track transparente,
   thumb con el color de borde de la app y hover un poco más claro. */
[data-sidebar]::-webkit-scrollbar { width: 6px; }
[data-sidebar]::-webkit-scrollbar-track { background: transparent; }
[data-sidebar]::-webkit-scrollbar-thumb {
  background: #2a3142;
  border-radius: 3px;
}
[data-sidebar]::-webkit-scrollbar-thumb:hover { background: #3a4456; }

/* Restaura LTR en los hijos directos del sidebar. Necesario por el truco RTL
   anterior: si no, el contenido (texto, flex, grid) se invertiría. Como
   direction es heredable, basta con ponerla en los hijos directos. */
[data-sidebar] > * {
  direction: ltr;
}

/* Escritorio (lg+): el panel se queda fijo en su sitio (sticky) y, si su
   contenido es más alto que la ventana, muestra la barra de scroll. */
@media (min-width: 1024px) {
  [data-sidebar] {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    /* Pequeño padding izquierdo para que el contenido no toque la barra
       (que ahora está a la izquierda gracias al truco RTL). */
    padding-left: 4px;
  }
}

/* Móvil (<lg): el panel se convierte en un drawer a pantalla completa.
   Aparece oculto (translateX -100%) y entra deslizándose al abrir.
   El scroll del drawer es independiente del scroll de la página. */
@media (max-width: 1023px) {
  /* En móvil, el data-filters-collapsed="true" (que en escritorio oculta el
     panel con display: none) NO debe aplicarse. El drawer en móvil se
     controla con la clase .is-open, no con el atributo de colapso. */
  [data-layout] {
    display: block !important;   /* Sobrescribe el grid del escritorio para
                                    que el aside (position:fixed) no deje
                                    hueco en el flujo del main. */
  }
  [data-layout][data-filters-collapsed="true"] [data-sidebar] {
    display: block !important;
  }
  [data-sidebar] {
    position: fixed;
    top: 0;
    left: 0;
    width: 85vw;
    max-width: 320px;
    height: 100vh;
    z-index: 40;
    background: #0b0d12;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    /* Padding interno suficiente para que el contenido no toque los bordes */
    padding: 1rem;
    /* Evita que el scroll "se filtre" a la página principal */
    overscroll-behavior: contain;
  }
  [data-sidebar].is-open {
    transform: translateX(0);
  }
  /* Backdrop: oscurece el resto de la pantalla cuando el drawer está abierto.
     Aparece con transición de opacidad. */
  #filters-backdrop {
    z-index: 39;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #filters-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Puntito de notificación cuando hay filtros activos Y el panel está
   plegado. El JS aplica la clase .has-filters solo en ese caso (ver
   updateFiltersBadge): con panel desplegado, el panel ya muestra los
   filtros y el punto sería redundante. Por eso este selector no necesita
   mirar el estado de plegado: si la clase está, es que aplica.

   Color: #66c0f4 (accent-500) para que combine con el resto de la UI
   (botones de tienda, "Próximo lanzamiento", "Limpiar" cuando hay
   filtros). Antes era rojo (#ef4444), lo cambiamos en sept 2026 para
   un look más coherente con la paleta del proyecto. */
[data-filters-toggle].has-filters::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #66c0f4;
  box-shadow: 0 0 0 2px #10141c;
}

html, body { scroll-behavior: smooth; }

/* Chips de filtro (plataformas, modos) */
.chip {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid #2a3142;
  background: #1d2330;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: #475569; color: #fff; }
.chip.active {
  background: #66c0f4;
  color: #0b0d12;
  border-color: #66c0f4;
  font-weight: 600;
}

/* Cabecera de día en el listado */
.day-header {
  position: sticky;
  top: 73px;
  z-index: 10;
  background: rgba(11, 13, 18, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #222836;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
}

/* Card de juego */
.game-card {
  background: #10141c;
  border: 1px solid #222836;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.game-card:hover {
  transform: translateY(-2px);
  border-color: #66c0f4;
}
/* Parpadeo de la card al cerrar el modal. La clase .blink se añade en
   closeModal() (app.js) cuando se hace scroll a la card tras cerrar. */
@keyframes card-blink {
  0%, 100% {
    border-color: #222836;
    box-shadow: 0 0 0 0 rgba(102, 192, 244, 0);
  }
  50% {
    border-color: #66c0f4;
    box-shadow: 0 0 0 4px rgba(102, 192, 244, 0.35);
  }
}
.game-card.blink {
  animation: card-blink 0.4s ease-in-out 2;
}
.game-card .capsule {
  width: 100%;
  aspect-ratio: 231 / 87;
  object-fit: cover;
  background: #161b25;
}

/* Modal: imagen de cabecera a pantalla completa */
.modal-hero {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  background: #161b25;
}

/* Modal: overlay inferior (título + fecha + tiendas) sobre la imagen de
   cabecera. Empieza semitransparente (alpha 0.5) para no tapar la imagen
   y, al pasar el ratón por encima, se aplica un blur (16px) al fondo para
   que el texto sea más legible. La transición de 200 ms hace el cambio suave. */
.modal-header-overlay {
  background-color: rgb(16 20 28 / 0.5);
  transition: background-color 200ms ease, backdrop-filter 200ms ease;
}
.modal-header-overlay:hover {
  backdrop-filter: blur(16px);
}

/* Galería de capturas (scroll horizontal, barra personalizada al tema) */
.screens-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.5rem 0;
  scroll-snap-type: x mandatory;
  position: relative;

  /* Firefox: color del thumb y del track */
  scrollbar-color: #2a3142 #161b25;
  scrollbar-width: thin;
}

/* Chrome / Safari / Opera */
.screens-strip::-webkit-scrollbar {
  height: 8px;                       /* horizontal, así que altura */
}
.screens-strip::-webkit-scrollbar-track {
  background: #161b25;               /* bg-800 */
  border-radius: 4px;
}
.screens-strip::-webkit-scrollbar-thumb {
  background: #2a3142;               /* un poco más claro que el track */
  border-radius: 4px;
  border: 2px solid #161b25;         /* "gap" alrededor del thumb */
  background-clip: padding-box;
}
.screens-strip::-webkit-scrollbar-thumb:hover {
  background: #66c0f4;               /* accent Steam al hover */
  border-color: #161b25;
  background-clip: padding-box;
}

.screens-strip img {
  flex: 0 0 auto;
  height: 140px;
  width: auto;
  border-radius: 0.5rem;
  scroll-snap-align: start;
  border: 1px solid #222836;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.screens-strip img:hover {
  border-color: #66c0f4;
  transform: scale(1.02);
}

/* Sombras de fade en los extremos del strip (indican que hay más contenido) */
.screens-strip-wrap {
  position: relative;
}
.screens-strip-wrap::before,
.screens-strip-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s;
}
.screens-strip-wrap::before {
  left: 0;
  background: linear-gradient(to right, #10141c, transparent);
}
.screens-strip-wrap::after {
  right: 0;
  background: linear-gradient(to left, #10141c, transparent);
}
.screens-strip-wrap.at-start::before { opacity: 0; }
.screens-strip-wrap.at-end::after   { opacity: 0; }

/* Lightbox de captura ampliada */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  user-select: none;
}
.lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  display: block;
}
.lightbox-counter {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: #cbd5e1;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20, 24, 32, 0.85);
  border: 1px solid #2a3142;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.lightbox-btn:hover { background: #1d2330; border-color: #66c0f4; }
.lightbox-btn:disabled { opacity: 0.3; cursor: default; }
.lightbox-btn.prev { left: 16px; }
.lightbox-btn.next { right: 16px; }
.lightbox-btn svg { width: 22px; height: 22px; fill: currentColor; }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 24, 32, 0.85);
  border: 1px solid #2a3142;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.lightbox-close:hover { background: #1d2330; border-color: #ef4444; }

/* Trailer thumbnail con play */
.trailer {
  position: relative;
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #222836;
  cursor: pointer;
  transition: border-color 0.15s;
}
.trailer:hover { border-color: #66c0f4; }
.trailer img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.trailer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.trailer .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.trailer .play svg {
  width: 64px;
  height: 64px;
  fill: rgba(255,255,255,0.9);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Calendario del panel de filtros */
.cal-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: #161b25;            /* bg-bg-900, un poco más oscuro que el contenedor */
  color: #cbd5e1;
  border: 1px solid #2a3142;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cal-nav-btn:hover:not(:disabled) {
  background: #1d2330;
  border-color: #66c0f4;
}
.cal-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cal-day {
  padding: 0.25rem 0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #cbd5e1;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.2;
}
.cal-day.enabled:hover {
  background: #1d2330;
  border-color: #66c0f4;
}
.cal-day.today {
  border-color: #66c0f4;
  font-weight: 600;
}
.cal-day.disabled {
  color: #475569;
  cursor: not-allowed;
  background: transparent;
}
/* Las secciones de día del listado tienen un margen superior al hacer scroll
   para que el day-header no quede tapado por la cabecera sticky. */
section[data-day] {
  scroll-margin-top: 80px;
}

/* Plataformas (badges) */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background: #1d2330;
  color: #cbd5e1;
  font-size: 0.75rem;
  border: 1px solid #2a3142;
}

/* Links de atribución en el footer (IGDB). Mismo color que el resto del
   footer pero con subrayado para que sean clicables. */
#footer-attribution a {
  color: #94a3b8;
  text-decoration: underline;
}
#footer-attribution a:hover {
  color: #cbd5e1;
}

/* Etiqueta de tipo de producto (Juego/Demo/DLC/...) y "GRATIS".
   Fondo coloreado, texto blanco, bordes redondeados.
   Aparece como overlay en la esquina inferior derecha de la imagen,
   tanto en la card del listado como en la imagen del modal. */
.type-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;          /* 11px */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  border-radius: 0.375rem;        /* rounded */
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Botones de búsqueda en tiendas (logos sin texto) */
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  background: transparent;
  transition: transform 0.15s, opacity 0.15s;
  opacity: 0.85;
}
.store-btn:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.store-btn img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.5rem;
}
/* Variante con texto: mismo estilo que el icono, pero rectangular para
   alojar el label ("Buscar en Xbox", etc.). Se usa para los botones de
   búsqueda en tiendas que no tienen logo (Xbox, PlayStation, GOG, etc.). */
.store-btn--text {
  width: auto;
  height: 48px;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  font-weight: 500;
  color: #e2e8f0;
  text-decoration: none;
  white-space: nowrap;
}
.store-btn--text:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(102, 192, 244, 0.4);
  color: #66c0f4;
}

/* Modo badges */
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.mode-pill.on  { background: rgba(102, 192, 244, 0.15); color: #66c0f4; border: 1px solid rgba(102, 192, 244, 0.3); }
.mode-pill.off { background: #1d2330; color: #64748b; border: 1px solid #2a3142; }

/* Botón "Limpiar" del header de Filtros (#f-clear). Tiene dos estados
   visuales según haya o no filtros aplicados (controlado por JS con la
   clase `.has-active-filters`):
   - Estado base (sin filtros): gris sutil, SIN hover destacado. Cuando
     no hay nada que limpiar, no hace falta llamar la atención sobre el
     botón.
   - Estado activo (con filtros): color accent (igual que el botón
     "Próximo lanzamiento" del header del calendario) con hover más
     intenso. Indica que hay filtros que se pueden limpiar. */
.btn-clear {
  color: #94a3b8;             /* text-slate-400, sin hover */
  border-color: #2a2f3a;      /* border-line, sin hover */
}
.btn-clear.has-active-filters {
  color: #66c0f4;             /* text-accent-500 */
  border-color: rgba(102, 192, 244, 0.3);  /* border-accent-500/30 */
}
.btn-clear.has-active-filters:hover {
  color: #4fa8db;             /* text-accent-400 */
  border-color: rgba(102, 192, 244, 0.6);  /* border-accent-500/60 */
}

/* Estrellas de popularidad. Por defecto vacías (gris), al pasar el ratón se
   rellenan de accent-500 (#66c0f4). El estado "active" lo controla JS
   comparando data-pop con state.filters.minPopularity. */
.pop-star {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #475569;            /* slate-600, estrella vacía */
  transition: color 0.1s, transform 0.1s;
  line-height: 0;
}
.pop-star:hover { color: #66c0f4; transform: scale(1.1); }
.pop-star.active { color: #66c0f4; }
.pop-star.active svg { filter: drop-shadow(0 0 4px rgba(102, 192, 244, 0.4)); }

/* Descripción HTML limpia */
.game-description {
  color: #cbd5e1;
  line-height: 1.6;
  font-size: 0.9rem;
}
.game-description h1, .game-description h2, .game-description h3 {
  color: #fff; font-weight: 600; margin: 1rem 0 0.5rem;
}
.game-description h1 { font-size: 1.05rem; }
.game-description h2 { font-size: 1rem; }
.game-description h3 { font-size: 0.95rem; }
.game-description p { margin: 0 0 0.75rem; }
.game-description ul, .game-description ol { margin: 0 0 0.75rem 1.5rem; }
.game-description li { margin-bottom: 0.25rem; }
.game-description img, .game-description video {
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
.game-description a { color: #66c0f4; text-decoration: underline; }

/* ── Capas de fondo del modal con la imagen del juego ──────────────────
   Cada `.modal-bg` ocupa todo el modal. El juego activo se muestra en la
   capa con clase `.active` (opacity 0.25) y la capa anterior queda con
   opacity 0. Esto produce un cross-fade suave al cambiar de juego. */
.modal-bg {
  position: absolute;
  inset: 0;
  background-color: #0D0D0D;   /* fallback si la imagen no carga */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;        /* no bloquea clicks al modal */
}
.modal-bg.active {
  opacity: 0.25;
}
/* El contenido del modal (panel lateral, contenido, botones) debe estar
   por encima de las capas de fondo. El overlay (data-modal-close) sigue
   siendo el receptor de clicks para cerrar. El panel lateral y el wrapper
   del modal usan z-index 1. */
#modal-sidebar, #modal-scroll { position: relative; z-index: 1; }
/* Botones de navegación (móvil) también por encima */
.lightbox-btn { z-index: 2; }

/* ── Panel lateral del modal (listado de juegos) ────────────────────────
   Muestra todos los lanzamientos visibles en una sola columna. El juego
   actualmente abierto en el modal está resaltado. La barra de scroll se
   coloca a la IZQUIERDA con un truco de RTL: el contenedor lleva
   `direction: rtl` y los hijos `direction: ltr` para invertir el scrollbar
   sin afectar al texto (sigue siendo LTR). El scroll es solo vertical. */
.modal-sidebar-rtl {
  direction: rtl;
  scrollbar-width: thin;
}
.modal-sidebar-rtl > * {
  direction: ltr;
}
#modal-sidebar {
  /* overflow-y-scroll ya en el HTML; aquí afina scrollbar */
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
#modal-sidebar::-webkit-scrollbar { width: 8px; }
#modal-sidebar::-webkit-scrollbar-track { background: transparent; }
#modal-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
#modal-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
/* Card compacto del panel: imagen a la izquierda + texto a la derecha */
.modal-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  /* Margen izquierdo: indenta los items respecto a las cabeceras de día
     (.modal-sidebar-day), que están pegadas al borde del sidebar. Esto crea
     una jerarquía visual que ayuda a distinguir de un vistazo dónde empieza
     y termina cada día, ya que las cabeceras hacen de "ancla" y los items
     se "anidan" hacia dentro. */
  margin-left: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
  width: calc(100% - 1.1rem);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: inherit;
  font: inherit;
  /* Margen que se respeta al hacer scrollIntoView({block:'start'}). Cubre
     la cabecera del panel (~32px) + la cabecera de día sticky (~28px) +
     un pequeño hueco visual (~8px) = 68px. Sin esto, el item activo
     quedaría tapado por las cabeceras. */
  scroll-margin-top: 68px;
}
.modal-sidebar-item:hover { background: rgba(255,255,255,0.05); }
.modal-sidebar-item.active {
  background: rgba(102, 192, 244, 0.15);
  border-left: 3px solid #66c0f4;
  padding-left: calc(0.75rem - 3px);
}
.modal-sidebar-item img {
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}
.modal-sidebar-item .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.modal-sidebar-item .title {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-sidebar-item .date {
  font-size: 0.7rem;
  color: #94a3b8;
}
/* Cabecera de día dentro del panel lateral. Mismo formato que el listado
   principal pero más compacto (sin el separador de 8px, padding ajustado
   al ancho del aside). El texto es la versión corta de formatDayHeader
   ("Lun · 15 sep 2026"). */
.modal-sidebar-day {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-sidebar-day-header {
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* Header del panel lateral (contador "N lanzamientos") — fijo arriba para
   que no se pierda al hacer scroll. Como el panel tiene direction: rtl
   (truco del scrollbar a la izquierda), sticky funciona en este contexto
   porque el scroll vertical es el normal. */
#modal-sidebar > div:first-child {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #0a0c11;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0;
}
/* Cabeceras de día: se enganchan debajo del header del panel. Usamos
   `top: 33px` (altura aprox. del header). El fondo semitransparente con
   blur deja entrever el contenido que pasa por debajo, igual que el
   .day-header del listado principal. */
.modal-sidebar-day {
  position: sticky;
  top: 33px;
  z-index: 20;
  background: rgba(11, 13, 18, 0.92);
  backdrop-filter: blur(8px);
}