/* ══════════════════════════════════════════════════════════════════
   ALYX v2.27 — GENRE PANEL HARDENING
   ─────────────────────────────────────────────────────────────────
   Reportado: la ventana flotante de Genres se ve mal en pantalla
   (no he podido reproducir el bug visual exacto, pero hay dos
   sospechas razonables y este parche cubre ambas).

   1. El overlay actual es 100% transparente:
        .genre-panel-overlay { background: transparent }
      Sin dimming visible, el usuario ve el panel Y el resto del UI
      al mismo nivel. Si las dos cosas son oscuras, parecen una sola
      cosa rota. Lo solucionamos con un fondo semi-oscuro + un blur
      ligero — patrón estándar de modal.

   2. Z-index del panel a 9500. Hay otro elemento del proyecto a
      9985 (atp-redesign) que en algún flujo podría tomar prioridad.
      Subimos el panel y el overlay a 99500/99499 — bien por encima
      de cualquier otra capa actual y con margen para el futuro.

   También forzamos isolation:isolate para garantizar stacking
   context propio independiente del ancestor, por si algo nuevo
   introduce transforms/filter en algún padre.

   Carga LAST en index.html.
══════════════════════════════════════════════════════════════════ */

.genre-panel-overlay {
  z-index: 99499 !important;
  background: rgba(8, 8, 14, .55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.genre-panel {
  z-index: 99500 !important;
  /* Stacking context propio — el panel se aísla. */
  isolation: isolate;
  /* Sombra más marcada para que el borde derecho sea inequívoco. */
  box-shadow: 6px 0 48px rgba(0, 0, 0, .8) !important;
}

/* Si en algún momento el panel acaba dentro de un ancestor con
   transform/filter (containing block bug), forzamos los valores
   posicionales para que sigan siendo fijos al viewport. */
.genre-panel.open {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

/* fin v2.27 — genre panel hardening */