/* ===== Estructura general: sidebar + contenido (legado, sin uso activo hoy) ===== */
.app {
  display: flex;
  height: 100vh;
}

/* ===== Menú lateral ===== */
.sidebar {
  width: 260px;
  background: var(--panel-grad);
  border-right: 1px solid var(--borde);
  padding: 1rem;
  overflow-y: auto;
}

.sidebar-inicio {
  font-weight: bold;
  margin-bottom: 1rem;
}

.sidebar-buscar {
  width: 100%;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie-clara);
  color: var(--texto);
  margin-bottom: 1rem;
}

.item-lista {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0.3rem;
}

.item-lista:hover,
.item-lista.activo {
  background: var(--superficie-clara);
}

.item-lista .miniatura {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--acento);
  flex-shrink: 0;
}

.item-lista span {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Contenido principal ===== */
.contenido {
  flex: 1;
  overflow-y: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, rgba(var(--superficie-rgb), 0.9), rgba(var(--bg-rgb), 0.7));
  border-bottom: 1px solid var(--acento-suave);
  border-image: var(--linea-metalica) 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.topbar-buscar {
  width: 320px;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}

.topbar-buscar:focus {
  outline: none;
  border-color: var(--acento-suave);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--acento-glow);
}

.topbar-iconos { display: flex; align-items: center; gap: 1rem; }

/* ===================================================================
   Fase A, punto 1: agrupa "New" + el menú de 3 puntos en la orilla
   derecha del topbar, con una separación notable entre ellos (el menú
   de 3 puntos queda literalmente en la esquina de la página).
   =================================================================== */
.topbar-acciones {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.avatar {
  background: linear-gradient(180deg, var(--acento-suave), var(--acento));
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ===== Menú de 3 puntos (arriba a la derecha del detalle de película) ===== */
.menu-opciones {
  position: relative;
}

.boton-menu-puntos {
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  color: var(--texto);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.boton-menu-puntos:hover { border-color: var(--acento-suave); box-shadow: var(--panel-relieve-suave), 0 0 10px var(--acento-glow); }
.boton-menu-puntos:active { box-shadow: var(--boton-relieve-activo); }

.menu-desplegable {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  box-shadow: var(--panel-relieve);
  overflow: hidden;
  z-index: 50;
}

.menu-desplegable.abierto { display: flex; }

.menu-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--texto);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.menu-item:last-child { border-bottom: none; }

.menu-item:hover { background: rgba(var(--acento-suave-rgb), 0.1); color: var(--acento-suave); }

.menu-item.oculto { display: none; }

/* ===== Detalle de película ===== */
.detalle-pelicula { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 1.5rem 1.5rem; }

.seccion {
  position: relative;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: var(--panel-relieve);
}

/* Punto 9: esquinas tipo "corchete técnico" (HUD) en vez de solo
   redondeadas — refuerzan la sensación de panel industrial. Puramente
   decorativo (pseudo-elementos, no ocupan espacio real). */
.seccion::before,
.seccion::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.5;
}
.seccion::before {
  top: 7px; left: 7px;
  border-top: 2px solid var(--acento-suave);
  border-left: 2px solid var(--acento-suave);
}
.seccion::after {
  bottom: 7px; right: 7px;
  border-bottom: 2px solid var(--acento-suave);
  border-right: 2px solid var(--acento-suave);
}

.seccion h3 {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  color: var(--texto);
  letter-spacing: 0.3px;
  text-shadow: 0 0 12px var(--acento-glow);
  background-image: var(--linea-decorativa);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 64px 2px;
}

.review-texto {
  font-style: italic;
  color: var(--texto-tenue);
  margin-top: 1rem;
  border-top: 1px dashed var(--borde);
  padding-top: 0.8rem;
}

/* ===== Galería: carrusel horizontal, contenedores 16:9 (para imágenes
   1920x1080). Sin scroll-snap: con 2+ imágenes en modo vista el scroll
   lo mueve JS (activarGaleriaAutoScroll, render.js) de forma continua —
   snap pelearía con eso. Scrollbar nativa oculta, pero overflow-x:auto
   sigue permitiendo scroll manual (drag/wheel/touch) normal. ===== */
.galeria-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

/* Barra de scroll visible (pedido explícito: poder desplazarse a mano
   con la barra, no solo con el auto-scroll) — mismo estilo fino que ya
   usa .cast-lista, para consistencia visual. */
.galeria-grid::-webkit-scrollbar { height: 8px; }
.galeria-grid::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.galeria-grid::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 4px; }
.galeria-grid::-webkit-scrollbar-thumb:hover { background: var(--acento-suave); }

.galeria-grid .marco-imagen {
  flex: 0 0 320px;
}

/* ===== Distribución horizontal equilibrada (js/datos.js:
   ajustarDistribucionHorizontal) — Cast/Characters, Best Scene,
   Gallery: por default quedan centradas (1 tarjeta al centro exacto,
   2-3 simétricas, 4+ centradas como bloque). Si no caben todas y hace
   falta scroll, esta clase las regresa al alineado normal a la
   izquierda — más específica que la regla base, así gana sin necesitar
   !important. ===== */
.galeria-grid.distribucion-desbordada,
.cast-lista.distribucion-desbordada,
.best-scene-carrusel.distribucion-desbordada {
  justify-content: flex-start;
}

.marco-imagen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--borde);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  font-size: 1.5rem;
  cursor: pointer;
  background: var(--superficie);
}

/* ===== Imagen dentro del marco de galería — metal oscuro › bisel ›
   imagen › bisel, para que se sienta incrustada y no solo recortada. */
.marco-imagen.con-imagen {
  border: 1px solid var(--panel-borde-ext);
  padding: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--panel-grad);
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.marco-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* ===== Botón "✕" sobre cada foto de la galería (solo visible en modo edición) ===== */
.boton-quitar-imagen-galeria {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.boton-quitar-imagen-galeria:hover { background: rgba(220, 38, 38, 0.85); }

/* Punto 9: insignia "▶ Video" sobre la miniatura de un video en la cuadrícula */
.marco-video-badge {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  pointer-events: none;
}

/* ===== Casilla especial de Gallery para subir varias fotos a la vez ===== */
.marco-imagen.marco-multiple {
  font-size: 0.95rem;
  text-align: center;
  padding: 0.5rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.marco-imagen.marco-multiple.arrastrando {
  border-color: var(--acento-suave);
  background: rgba(var(--acento-suave-rgb), 0.08);
}

/* ===== Cuadrícula de imágenes para Story Summary / Ending Explained / Alternative Final ===== */
.escena-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

@media (max-width: 640px) {
  .escena-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Página de lista (cuadrícula de posters) ===== */
.pagina-lista, .pagina-detalle {
  min-height: 100vh;
}

.topbar-buscar { flex: 1; max-width: 500px; }

.mensaje-carga {
  padding: 2rem;
  color: var(--texto-tenue);
  grid-column: 1 / -1;
}

/* ===================================================================
   Fase A, punto 2: barra reservada para los futuros botones de filtro
   por género. Vacía por ahora — solo deja el "marco" listo, con
   suficiente separación respecto al buscador de arriba y a la grilla
   de abajo, para que cuando se agreguen los botones no haya que tocar
   el espaciado general de la página.
   =================================================================== */
.barra-filtros-generos {
  min-height: 52px;
  margin: 1.4rem 1.5rem 0;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--borde-suave);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barra-filtros-generos-etiqueta {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

.grid-posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

.poster-tarjeta {
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--texto);
  display: block;
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.poster-tarjeta:hover {
  border-color: var(--acento-suave);
  box-shadow: var(--panel-relieve-suave), 0 0 16px var(--acento-glow);
  transform: translateY(-2px);
}

/* Punto 3 (corregido): el "colchón" grueso quedó muy pesado — ahora es
   solo un borde/línea fina de definición, la imagen rellena TODO el
   espacio disponible (cover, sin padding que revele color de fondo). */
.poster-imagen {
  aspect-ratio: 2 / 3;
  background-color: var(--superficie-clara);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.3),
    inset 0 2px 8px rgba(0, 0, 0, 0.35);
}

.poster-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===================================================================
   Fase A, punto 4: la info de la tarjeta ahora es una fila — a la
   izquierda título + rating (apilados), a la derecha una columna con
   las banderas de país, separadas por una línea azul sutil con brillo.
   Si hay 2+ banderas, se apilan hacia abajo en esa misma columna —
   nunca empujan el título ni el rating.
   =================================================================== */
.poster-info {
  padding: 0.8rem;
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  border-top: 1px solid var(--acento-suave);
  border-image: var(--linea-metalica) 1;
}

.poster-info-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Alto fijo = exactamente 2 líneas (line-height × 2), sin importar
   cuánto texto tenga el título — así todas las tarjetas del catálogo
   terminan con la misma altura total y el rating arranca siempre a la
   misma altura, sin JS ni alturas por tarjeta. 1 línea: queda el hueco
   de la segunda reservado. 2 líneas: se ve completo. 3+: se corta con
   "..." (line-clamp). El ancho del póster/catálogo no cambia — esto
   solo afecta el alto reservado para el texto del título. */
.poster-titulo {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.3;
  height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Punto 3: mismo "look" que los botones de navegación (panel oscuro +
   borde/brillo azul) para CUALQUIER calificación — ya no cambia de
   color según el rating. El tamaño del contenedor se mantiene igual
   que antes (mismo padding/font-size). Las estrellas ⭐ son un emoji a
   color, así que siguen viéndose amarillas sin necesidad de estilo. */
.badge-rating {
  display: inline-block;
  width: fit-content;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--texto);
  background: var(--panel-grad);
  border: 1px solid var(--acento-suave);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 8px var(--acento-glow);
}

.poster-info-banderas {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--acento-suave);
  border-image: linear-gradient(180deg, rgba(var(--acento-suave-rgb), 0) 0%, var(--acento-suave) 50%, rgba(var(--acento-suave-rgb), 0) 100%) 1;
}

.poster-bandera {
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--acento-glow));
}

/* ===================================================================
   HERO + METADATOS COMBINADOS (vista final de la película)
=================================================================== */
/* Punto 2: el hero ahora se arma como "monitor" — marco metálico grueso
   (border), bisel interior (box-shadow inset con línea azul + sombra),
   y encima el wallpaper como si fuera la pantalla encendida dentro. */
.hero-completo {
  position: relative;
  border: 3px solid var(--panel-borde-ext);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 -2px 8px rgba(0, 0, 0, 0.5),
    0 18px 44px rgba(0, 0, 0, 0.65);
  background-color: var(--superficie-clara);
}

/* Viñeta muy sutil encima del wallpaper, como el vidrio de una pantalla
   — puramente decorativa (no toca el degradado original del hero, que
   sigue exactamente igual, ver .hero-overlay más abajo). */
.hero-completo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.28), transparent 55%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}

/* Punto 9: esquinas técnicas en las 2 esquinas superiores del "monitor". */
.hero-completo::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-top: 2px solid rgba(255, 255, 255, 0.55);
  border-left: 2px solid rgba(255, 255, 255, 0.55);
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
}

/* El degradado lateral/inferior del wallpaper (fondoEstilo, inline en
   render.js) NO se toca — sigue exactamente igual, solo se le agregó
   el marco de arriba (borde + sombra) alrededor de todo el hero. */
.hero-completo .hero-overlay {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,11,15,0) 0%, rgba(11,11,15,0.55) 100%);
  padding: 2rem 2rem 1.5rem 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  min-height: 240px;
}

.hero-completo .hero-poster {
  position: relative;
  z-index: 2;
  width: 140px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background-color: var(--superficie);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--panel-borde-ext);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ===================================================================
   fase w: edición directa sobre el hero (poster, wallpaper, título,
   name, quote, "based on a true story") — todo se ve igual que en modo
   vista, solo que ahora se puede tocar/escribir directo encima.
=================================================================== */

/* poster editable: cursor de "puedes tocar aquí" + borde punteado si
   todavía no tiene imagen (para invitar a tocarlo) */
.hero-poster-editable {
  cursor: pointer;
}

.hero-poster-editable.hero-imagen-vacia {
  border: 2px dashed var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  font-size: 2rem;
}

/* botón ✕ siempre visible (no hace falta pasar el mouse) sobre el
   poster mientras está desbloqueada — así funciona igual en windows y
   en la tablet android (que no tiene "hover"). */
.boton-quitar-imagen-hero {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.boton-quitar-imagen-hero:hover { background: rgba(220, 38, 38, 0.85); }

/* botón 🌐 "elegir del catálogo" (TMDB/IGDB/Open Library) sobre el
   poster en modo edición — esquina opuesta al ✕, mismo tamaño/estilo. */
.boton-elegir-proveedor-hero {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.boton-elegir-proveedor-hero:hover { background: rgba(var(--acento-rgb), 0.7); }

/* botoncitos flotantes del wallpaper (cambiar / quitar), arriba a la
   derecha del hero completo. */
.hero-wallpaper-controles {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  gap: 6px;
}

.boton-mini-hero {
  width: 32px;
  height: 32px;
  border: 1px solid var(--panel-borde-ext);
  border-radius: 50%;
  /* Fijo (no var(--bg-rgb)): flota sobre la foto del wallpaper, no sobre
     la página — en Modo Claro var(--bg-rgb) sería casi blanco y el botón
     se volvería invisible. */
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--boton-relieve), inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.25);
}

.boton-mini-hero:hover { background: rgba(var(--acento-rgb), 0.7); border-color: var(--acento-suave); }
.boton-mini-hero-quitar:hover { background: rgba(220, 38, 38, 0.8); }

/* campos de texto editables (title, name, quote) que se ven exactamente
   igual que el texto normal — sin marco visible hasta que los toques. */
.hero-campo-editable {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(var(--acento-suave-rgb), 0.35);
  color: inherit;
  font: inherit;
  padding: 2px 0;
  outline: none;
}

.hero-campo-editable:focus {
  border-bottom: 1px solid var(--acento-suave);
}

input.hero-titulo.hero-campo-editable {
  font-family: georgia, serif;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-shadow:
    0 0 10px rgba(0,0,0,0.95),
    0 0 22px rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.9);
}

input.hero-quote.hero-campo-editable {
  font-style: italic;
  font-family: georgia, "times new roman", serif;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(0,0,0,0.95),
    0 0 16px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,0.9);
  margin: 6px 0;
  max-width: 640px;
}

.campo-grupo input.hero-campo-editable {
  margin-top: 0.2rem;
}

/* "based on a true story" editable: tocable para prender/apagar */
.leyenda-historia-real-editable {
  cursor: pointer;
}

.leyenda-historia-real-editable.leyenda-apagada {
  opacity: 0.45;
}

.hero-completo .hero-info { flex: 1; }
.hero-completo .hero-badges { margin-bottom: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

/* Punto 5: título más grande + "halo" oscuro difuminado detrás del texto
   (varias capas de text-shadow con distinto blur) — así se separa del
   fondo sin importar qué tan claro o "ruidoso" sea el wallpaper. */
.hero-completo .hero-titulo {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  /* Fijo blanco a propósito (no var(--texto)): este título vive SIEMPRE
     sobre la foto de fondo del hero, con su propio scrim oscuro (ver
     .hero-overlay arriba) — igual que .hero-quote/.leyenda-historia-real,
     no debe seguir el texto de la página cuando cambia Modo Claro/Oscuro. */
  color: #fff;
  text-shadow:
    0 0 10px rgba(0,0,0,0.95),
    0 0 22px rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.9);
}

.badge-sub {
  background: linear-gradient(180deg, var(--acento), color-mix(in srgb, var(--acento) 65%, black));
  color: white;
  border-color: var(--acento);
}

/* Badges del Hero: Genre toma el acabado metálico del control de música
   y Subgenre el brillo azul del control de índice. Se conservan sus
   fondos y colores originales; solo cambia el relieve visual. */
.hero-completo .badge {
  font-size: 0.9rem;
  padding: 0.28rem 0.75rem;
  box-shadow:
    0 0 0 1px rgba(var(--acento-rgb), 0.42),
    0 0 10px rgba(var(--acento-suave-rgb), 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.1),
    inset 0 -3px 5px rgba(0, 0, 0, 0.62);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.hero-completo .badge-sub {
  font-size: 0.9rem;
  padding: 0.14rem 0.45rem;
  box-shadow:
    0 0 0 1px rgba(var(--acento-suave-rgb), 0.45),
    0 0 11px rgba(var(--acento-rgb), 0.42),
    inset 0 1px 1px rgba(var(--acento-suave-rgb), 0.48),
    inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.1),
    inset 0 -3px 5px rgba(0, 0, 0, 0.62);
}

.hero-completo .badge:hover {
  filter: brightness(1.12);
}

/* Punto 5: mismo halo que el título, pero SIN agrandar la letra */
.hero-quote {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(0,0,0,0.95),
    0 0 16px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,0.9);
  margin: 6px 0;
  max-width: 640px;
}

.leyenda-historia-real {
  font-size: 0.8rem;
  font-style: italic;
  color: #ffffff;
  margin-top: 0.3rem;
  text-shadow:
    0 0 8px rgba(0,0,0,0.95),
    0 0 16px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,0.9);
}

/* ===================================================================
   FASE 2: chips y badges clicables (Country/Release/Watched Date/
   Version Type/Rating/Genre/Subgenre) y el sistema de popovers anclados
   que se abre al tocarlos — nunca tapan toda la pantalla, se cierran
   tocando afuera.
=================================================================== */
.campo-grupo-editable {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.campo-grupo-editable:hover {
  border-color: var(--acento-suave);
  background: rgba(var(--acento-suave-rgb), 0.1);
}

.hero-badges-editable {
  cursor: pointer;
  border-radius: 8px;
  padding: 2px;
  margin: -2px;
  transition: background 0.15s ease;
}
.hero-badges-editable:hover {
  background: rgba(var(--acento-suave-rgb), 0.12);
}

.hero-badges-vacio {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  font-style: italic;
  border: 1px dashed rgba(var(--acento-suave-rgb), 0.35);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
}

/* ===================================================================
   TRAILER — tarjeta 16:9 justo debajo del Hero, mismo lenguaje visual
   de "monitor" (marco metálico + bisel) que .hero-completo, para que se
   sienta como una extensión de la cabecera y no como un iframe pegado.
   Ver js/trailer.js.
=================================================================== */
.trailer-marco {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 1.5rem auto 0;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--panel-borde-ext);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-grad);
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 -2px 8px rgba(0, 0, 0, 0.5),
    0 18px 44px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: scale(0.99);
  max-height: 2000px;
  transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.45s ease, margin-top 0.45s ease;
}

.trailer-marco.trailer-visible {
  opacity: 1;
  transform: scale(1);
}

/* Rediseño Quick/Complete: el tráiler ya no vive incrustado en la ficha —
   permanece oculto hasta que el usuario presiona "▶ Trailer" (topbar), que
   abre este overlay. .trailer-marco (arriba) se reutiliza tal cual como
   contenido del modal, solo cambia dónde vive. Ver js/trailer.js:
   _asegurarModalTrailer/_abrirModalTrailer. */
.trailer-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 220;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.trailer-modal-overlay.abierto { display: flex; }

.trailer-modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.88);
  backdrop-filter: blur(3px);
}

.trailer-modal-cuerpo {
  position: relative;
  width: 100%;
  max-width: 860px;
}
.trailer-modal-cuerpo .trailer-marco { margin: 0; max-width: none; }

.trailer-modal-cerrar {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--panel-borde-ext);
  background: rgba(4, 8, 16, 0.6);
  /* Fijo (no var(--texto)): el fondo de este botón es siempre oscuro
     (rgba(4,8,16,...) arriba, fijo a propósito) — en Modo Claro
     var(--texto) se vuelve oscuro y el ✕ desaparecería sobre este fondo. */
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.trailer-modal-cerrar:hover { background: rgba(4, 8, 16, 0.85); }

.trailer-marco:fullscreen {
  max-width: none;
  margin: 0;
  border-radius: 0;
  border: none;
}

.trailer-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  background-color: var(--superficie-clara);
  transition: opacity 0.8s ease;
}

.trailer-cover-vacia { background: var(--panel-grad); }

.trailer-cover-oculta {
  opacity: 0;
  pointer-events: none;
}

/* El SDK de YouTube reemplaza este <div> directamente por su <iframe>
   (conservando esta misma clase) — por eso el selector cubre ambos casos
   sin necesitar un descendiente. */
.trailer-yt-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Capa transparente que intercepta TODA la interacción — el iframe de
   YouTube nunca recibe un clic directo, así podemos decidir nosotros
   cuándo mostrar controles en vez de dejar que YouTube dibuje los suyos. */
.trailer-captura {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
  background: transparent;
}

.trailer-controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.trailer-controles.trailer-controles-visibles {
  opacity: 1;
  pointer-events: auto;
}

.trailer-barra-inferior {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.trailer-boton {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.trailer-boton:hover {
  border-color: var(--acento-suave);
  background: rgba(0, 0, 0, 0.75);
}

.trailer-tiempo {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #fff;
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.trailer-progreso {
  flex: 1;
  min-width: 40px;
  accent-color: var(--acento);
  cursor: pointer;
}

.trailer-volumen {
  width: 70px;
  flex-shrink: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

@media (max-width: 640px) {
  .trailer-volumen { display: none; }
  .trailer-barra-inferior { gap: 0.4rem; }
}

.popover-edicion {
  position: fixed;
  z-index: 260;
  width: 300px;
  max-width: calc(100vw - 20px);
  max-height: min(520px, calc(100vh - 20px));
  display: flex;
  flex-direction: column;
  background: var(--panel-grad);
  border: 2px solid var(--panel-borde-ext);
  border-radius: 10px;
  box-shadow: var(--panel-relieve), 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.popover-edicion-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--acento-suave);
  border-image: var(--linea-metalica) 1;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--texto);
  flex-shrink: 0;
}

.popover-edicion-cerrar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--panel-borde-ext);
  background: var(--panel-grad-clara);
  color: var(--texto);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
}
.popover-edicion-cerrar:hover { border-color: var(--acento-suave); }

.popover-edicion-cuerpo {
  padding: 0.9rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.boton-quitar-widget-completo {
  border-color: var(--alerta-fuerte) !important;
  color: #ffb3ab;
}
.boton-quitar-widget-completo:hover {
  background: rgba(239, 68, 68, 0.15);
}

.metadatos-sobre-imagen {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  /* Fijo (no var(--bg-rgb)): es el scrim que hace legibles los metadatos
     sobre la foto del hero — debe quedar oscuro siempre, sin importar el
     modo, igual criterio que .boton-mini-hero de arriba. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.92));
  border-top: 1px solid var(--acento-suave);
  border-image: var(--linea-metalica) 1;
  padding: 0.9rem 2rem;
}

/* PUNTO 6: antes TODO (campos + widget) vivía en el mismo flex-wrap, y
   cuando había muchos campos el widget (con margin-left:auto) se caía
   solo a una fila nueva, pegado a la derecha con un hueco enorme a su
   izquierda — se veía roto. Ahora los campos envuelven ADENTRO de su
   propio contenedor flexible, y el widget es un hermano aparte que solo
   se acomoda verticalmente al centro de ese bloque (sin importar cuántas
   líneas ocupen los campos) — nunca queda huérfano en su propia fila. */
.metadatos-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Punto 4: cada campo_grupo dentro de la barra es su propio "módulo"
   — como los paneles de instrumentos de una cabina — en vez de solo
   texto separado por una línea. */
.metadatos-campos > .campo-grupo {
  /* Fijo — mismo motivo que .metadatos-sobre-imagen arriba (vive sobre
     la foto del hero, no sobre la página). */
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 6px;
  padding: 0.35rem 0.9rem;
  box-shadow:
    inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.14),
    inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.metadatos-sobre-imagen .campo {
  font-size: 0.7rem;
  /* --acento-foto (no --acento-suave): sobre el scrim fijo de arriba
     necesita SIEMPRE la versión brillante del acento, sin importar el
     modo — --acento-suave se oscurece en Modo Claro para leerse sobre
     blanco, lo que se leería mal sobre este fondo oscuro fijo. */
  color: var(--acento-foto);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.85;
}

.metadatos-sobre-imagen .valor {
  font-size: 0.9rem;
  color: #fff;
  margin-top: 0.2rem;
}

/* ===================================================================
   Punto 6: tarjeta compacta del Music Widget, integrada como una
   "columna" más dentro de la barra de metadatos (Name/Country/Release/
   Watched Date/Version Type/Rating), pegada a la derecha con
   margin-left:auto. Nunca flota — se va con el scroll como todo lo
   demás, así nunca tapa la vista.
=================================================================== */
.music-widget-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(var(--superficie-rgb), 0.8), rgba(var(--bg-rgb), 0.85));
  border: 1px solid var(--panel-borde-ext);
  border-radius: 9px;
  padding: 6px 12px 6px 6px;
  max-width: 260px;
  box-shadow: var(--panel-relieve-suave);
}

.widget-musica-arte {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-color: var(--superficie-clara, #16273f);
  border: 1px solid rgba(var(--panel-borde-int-rgb), 0.25);
  flex-shrink: 0;
}

.widget-musica-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.widget-musica-textos {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.widget-musica-cancion {
  font-size: 0.8rem;
  font-weight: 600;
  /* var(--texto) (no #fff fijo): .music-widget-inline tiene fondo
     adaptativo (rgba(--superficie-rgb)/rgba(--bg-rgb)) — en Modo Claro se
     vuelve claro, y el texto fijo blanco quedaría ilegible sobre él. */
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.widget-musica-artista {
  font-size: 0.7rem;
  color: var(--acento-suave);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.widget-musica-progreso-fila {
  display: flex;
  align-items: center;
  gap: 6px;
}

.widget-musica-play {
  background: linear-gradient(180deg, var(--acento-suave), var(--acento));
  color: #fff;
  border: 1px solid var(--panel-borde-ext);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--boton-relieve);
}

.widget-musica-progreso {
  width: 100px;
  height: 3px;
  accent-color: var(--acento-suave, #60a5fa);
  cursor: pointer;
}

@media (max-width: 640px) {
  .music-widget-inline { max-width: 180px; }
  .widget-musica-progreso { width: 60px; }
}

/* ===================================================================
   Pila de 3 botones flotantes en la esquina inferior derecha, de abajo
   hacia arriba: índice → Asistente de IA → play/pause de música (aquí
   abajo). Los 3 viven tanto en la vista normal como en modo edición.
=================================================================== */
.widget-musica-mini-play {
  position: fixed;
  bottom: 7rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(139, 157, 190, 0.8) 0%, rgba(82, 98, 128, 0.34) 24%, transparent 48%),
    radial-gradient(circle at 50% 48%, #293549 0%, #101722 58%, #05080d 100%);
  color: #ffffff;
  border: 1px solid #b7cbed;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(132, 163, 207, 0.5),
    0 0 12px rgba(122, 177, 255, 0.38),
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 0 0 2px rgba(211, 228, 255, 0.12),
    inset 0 -4px 7px rgba(0, 0, 0, 0.68);
  z-index: 150;
  transition: opacity 0.2s ease, filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.widget-musica-mini-play:hover {
  filter: brightness(1.14);
  box-shadow:
    0 0 0 1px rgba(186, 210, 247, 0.72),
    0 0 17px rgba(151, 196, 255, 0.58),
    inset 0 1px 1px rgba(255, 255, 255, 0.82),
    inset 0 0 0 2px rgba(211, 228, 255, 0.16),
    inset 0 -4px 7px rgba(0, 0, 0, 0.68);
}

.widget-musica-mini-play:active { transform: translateY(1px); }

.widget-musica-mini-play.oculto-widget {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* ===== Índice horizontal ===== */
.indice-horizontal {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 1rem 0;
  margin-top: 1rem;
  border-bottom: 1px solid var(--acento-suave);
  border-image: var(--linea-metalica) 1;
}

.indice-boton {
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  color: var(--texto);
  padding: 0.5rem 1rem;
  border-radius: 9px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.indice-boton:hover { border-color: var(--acento-suave); color: var(--acento-suave); }

/* ===== Botón flotante (subir hasta el índice) — Punto 6: más chico y
   más pegado a la esquina, para que no estorbe la vista ===== */
.boton-flotante-indice {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(111, 211, 255, 0.7) 0%, rgba(39, 148, 243, 0.22) 29%, transparent 52%),
    radial-gradient(circle at 50% 50%, #126fc6 0%, #063d82 58%, #021c43 100%);
  color: #eaf7ff;
  border: 1px solid #5fc5ff;
  font-size: 1rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(86, 184, 255, 0.5),
    0 0 13px rgba(37, 165, 255, 0.5),
    inset 0 1px 1px rgba(214, 245, 255, 0.7),
    inset 0 0 0 2px rgba(171, 224, 255, 0.12),
    inset 0 -4px 7px rgba(0, 11, 44, 0.7);
  z-index: 100;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.boton-flotante-indice:hover {
  filter: brightness(1.13);
  box-shadow:
    0 0 0 1px rgba(131, 210, 255, 0.74),
    0 0 18px rgba(49, 176, 255, 0.7),
    inset 0 1px 1px rgba(229, 249, 255, 0.82),
    inset 0 0 0 2px rgba(171, 224, 255, 0.16),
    inset 0 -4px 7px rgba(0, 11, 44, 0.7);
}

.boton-flotante-indice:active { transform: translateY(1px); }

/* botón flotante del asistente de ia — vive en medio de la pila (índice
   abajo, música arriba). morado a propósito: distinto de los otros 2
   botones y es el color que la mayoría de asistentes de ia usan, así
   se reconoce de inmediato qué hace. siempre visible, en vista y en
   edición. */
.boton-flotante-ia {
  display: flex;
  position: fixed;
  bottom: 4.25rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  background: radial-gradient(circle at 32% 28%, #1c2e57 0%, #060a16 75%);
  color: transparent;
  border: 1px solid #6a5ff0;
  font-size: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(139, 106, 232, 0.45),
    0 0 16px rgba(139, 106, 232, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
  z-index: 100;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.boton-flotante-ia::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff4a3' d='M12 1l2.4 8.6L23 12l-8.6 2.4L12 23l-2.4-8.6L1 12l8.6-2.4L12 1z'/%3E%3Cpath fill='%23fff4a3' d='M24.5 15l1.3 4.2L30 20.5l-4.2 1.3-1.3 4.2-1.3-4.2-4.2-1.3 4.2-1.3 1.3-4.2zM5 22l.8 2.7 2.7.8-2.7.8L5 29l-.8-2.7-2.7-.8 2.7-.8L5 22z'/%3E%3C/svg%3E");
}
.boton-flotante-ia:hover {
  filter: brightness(1.2);
  box-shadow:
    0 0 0 1px rgba(139, 106, 232, 0.7),
    0 0 22px rgba(139, 106, 232, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}
.boton-flotante-ia:active { transform: translatey(1px); }

/* ===== Story Summary / Ending Explained / Alternative Final: 2 columnas —
   texto ancho a la izquierda, un carrusel de tamaño fijo a la derecha.
   Ver FASE Y en render.js para la lógica del carrusel. ===== */
.story-flex {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.story-texto {
  flex: 2 1 320px;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Punto 7: el espacio ENTRE párrafos ahora lo da este margin chico (ver
   formatearParrafos en render.js — separa el texto en <p>, uno por
   párrafo) en vez de líneas en blanco + white-space:pre-wrap, que se
   sentía con demasiado espacio de sobra. Los saltos de línea sueltos
   dentro de un mismo párrafo ya vienen como <br> desde formatearParrafos. */
.story-texto p {
  margin: 0 0 0.6em;
}
.story-texto p:last-child {
  margin-bottom: 0;
}

/* Alternative Final sin texto (Extras opcional, solo imágenes/videos):
   el carrusel queda como único hijo de .story-flex — en vez de dejarlo
   crecer al 100% del ancho, se le da un tamaño razonable (igual que
   cuando SÍ hay texto al lado) y .story-flex ya lo centra solo. */
.story-flex .story-carrusel-wrap:only-child {
  flex-grow: 0;
  width: 100%;
  max-width: 640px;
}

/* ===== Modo cinematográfico (texto corto) — SOLO Story Summary/Ending
   Explained, nunca Alternative Final (esa sección nunca recibe la clase
   .modo-corto, ver activarModosAdaptativosStory en render.js). Se activa
   con JS según la altura REAL del texto ya renderizado, comparada contra
   la altura del carrusel en el layout de dos columnas normal — nunca por
   conteo de caracteres. El propio nodo .story-texto se mueve dentro de
   .story-carrusel (mismo contenedor position:relative que ya usan los
   slides), así que no hace falta duplicar el texto ni tocar la lógica de
   rotación del carrusel. ===== */
.story-flex.modo-corto {
  justify-content: center;
}

.story-flex.modo-corto .story-carrusel-wrap {
  flex: 0 1 auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  position: static;
  border-left: none;
  padding-left: 0;
}

/* Dentro de .story-carrusel (16:9, overflow:hidden, ya position:relative
   para los slides) el texto queda anclado abajo, centrado, con un
   degradado detrás para que se lea sin importar la imagen — la imagen
   sigue siendo 16:9 y object-fit:cover sin ningún cambio. */
.story-flex.modo-corto .story-carrusel .story-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  max-height: 82%;
  overflow-y: auto;
  padding: 3rem 1.75rem 1.35rem;
  color: #fff;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.55;
  background: linear-gradient(to top, rgba(6, 8, 14, 0.92), rgba(6, 8, 14, 0.55) 60%, transparent 100%);
  border-radius: 0 0 7px 7px;
}

@media (max-width: 960px) {
  .story-flex.modo-corto .story-carrusel-wrap {
    max-width: 100%;
  }
}

/* ===== misma idea de 2 columnas que .story-flex, pero para el modo
   edición de story summary / ending explained / alternative final:
   textarea a la izquierda, cuadrícula de imágenes editable a la
   derecha — así el modo edición ya no se ve "desacomodado" respecto a
   la vista final que ves después de guardar. ===== */
.story-flex-editar {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.story-flex-editar .story-columna-texto {
  flex: 2 1 320px;
}

.story-flex-editar .story-columna-imagenes {
  flex: 1 1 220px;
  border-left: 1px solid var(--borde);
  padding-left: 1.5rem;
}

/* la columna lateral es más angosta que la página completa, así que
   aquí siempre usamos 2 columnas de miniaturas (no 4) sin importar el
   tamaño de la pantalla. */
.story-flex-editar .escena-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Contenedor que se "pega" (sticky) mientras el texto de al lado es más
   largo que él — así la imagen siempre está a la vista mientras lees,
   sin importar qué tan largo sea el resumen. Si el texto es corto, no
   hay espacio de sobra y sticky simplemente no hace nada (se queda
   quieta desde el principio, como pediste). */
.story-carrusel-wrap {
  flex: 1 1 220px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  border-left: 1px solid var(--borde); /* división sutil entre columnas */
  padding-left: 1.5rem;
}

/* El carrusel en sí: tamaño FIJO 16:9 (el mismo que ya usaban las
   imágenes), nunca cambia de tamaño según el texto. */
.story-carrusel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-grad);
  border: 2px solid var(--panel-borde-ext);
  padding: 4px;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    var(--panel-relieve-suave);
}

/* Cada "slide" ocupa TODO el carrusel, uno encima del otro; solo el que
   tiene .activa se ve — el cambio entre ellos es un fundido suave. */
.carrusel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.carrusel-slide.activa {
  opacity: 1;
  pointer-events: auto;
}

.carrusel-slide img,
.carrusel-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 7px;
  display: block;
  cursor: zoom-in;
}

.carrusel-slide iframe { cursor: default; }

/* Puntitos debajo del carrusel — solo aparecen si hay 2+ imágenes/videos. */
.carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.7rem;
}

.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--borde);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.punto.activo {
  background: var(--acento-suave);
  box-shadow: 0 0 6px var(--acento-glow);
  transform: scale(1.25);
}

/* En pantallas angostas (tablet vertical), .story-flex ya apila el texto
   arriba y la columna de imagen abajo por su cuenta (flex-wrap). Ahí, la
   línea divisoria y el "pegado" ya no aplican — se ven raros solos en su
   propia fila. */
@media (max-width: 960px) {
  .story-flex,
  .story-flex-editar {
    flex-direction: column;
  }
  .story-carrusel-wrap,
  .story-flex-editar .story-columna-imagenes {
    position: static;
    border-left: none;
    padding-left: 0;
    width: 100%;
  }
  /* Corrección: ".story-texto{flex:2 1 320px}" fue pensado como ancho
     mínimo para el layout de dos columnas (fila) — pero al apilarse en
     columna aquí, ese mismo "320px" se reinterpreta como una ALTURA
     mínima (el eje principal de un flex en columna es el vertical), y el
     texto queda con un piso de 320px de alto aunque el contenido real
     ocupe mucho menos, dejando espacio en blanco de sobra debajo. Se
     corrige a "auto" solo en este breakpoint apilado — el layout de dos
     columnas de escritorio no se toca. */
  .story-texto {
    flex-basis: auto;
  }
}

/* ===================================================================
   COUPLES (Series, sección opcional en Extras): mismo lenguaje visual
   que .story-flex, pero invertido (imagen a la izquierda, texto a la
   derecha) y repetido en contenedores independientes — uno por pareja,
   cada uno con su propio botón "✕" para borrarlo.
   =================================================================== */
.parejas-lista {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pareja-contenedor {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1.25rem;
  border-radius: 10px;
  background: var(--panel-grad);
  border: 2px solid var(--panel-borde-ext);
  box-shadow: var(--panel-relieve-suave);
}

.pareja-imagen-wrap {
  flex: 0 0 140px;
  width: 140px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-sizing: border-box;
}

.pareja-imagen-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.pareja-texto-wrap {
  flex: 1 1 200px;
  min-width: 0;
}

/* Modo vista (dibujarParejas en render.js) usa un <p class="pareja-texto">
   suelto, sin el div "-wrap" de arriba — necesita su PROPIO flex-basis,
   igual que .story-texto, o si no el navegador lo manda a una fila
   nueva en vez de dejarlo al lado de la imagen. */
.pareja-texto {
  flex: 1 1 200px;
  min-width: 0;
}

.pareja-texto-wrap .form-textarea,
.pareja-texto {
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pareja-contenedor .boton-quitar-imagen-galeria {
  top: 0.6rem;
  right: 0.6rem;
}

/* Igual que .story-flex/.story-flex-editar: en tablet vertical y celular
   se apila (imagen arriba, texto abajo). */
@media (max-width: 960px) {
  .pareja-contenedor {
    flex-direction: column;
  }
  .pareja-imagen-wrap {
    width: 100%;
  }
}

/* ===================================================================
   Rediseño Series (Fase D) — FAVORITE EPISODES: mismo lenguaje visual
   que .pareja-contenedor (Couples) — imagen a la izquierda, campos a la
   derecha — con 2 inputs numéricos + título arriba de la nota.
   =================================================================== */
.episodio-favorito-contenedor {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1.25rem;
  border-radius: 10px;
  background: var(--panel-grad);
  border: 2px solid var(--panel-borde-ext);
  box-shadow: var(--panel-relieve-suave);
  margin-bottom: 1.5rem;
}

.episodio-favorito-imagen-wrap {
  flex: 0 0 140px;
  width: 140px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-sizing: border-box;
}
.episodio-favorito-imagen-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.episodio-favorito-campos-wrap {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.episodio-favorito-fila-numeros {
  display: flex;
  gap: 0.6rem;
}
.episodio-favorito-fila-numeros input { flex: 1 1 0; }

.episodio-favorito-contenedor .boton-quitar-imagen-galeria {
  top: 0.6rem;
  right: 0.6rem;
}

@media (max-width: 960px) {
  .episodio-favorito-contenedor {
    flex-direction: column;
  }
  .episodio-favorito-imagen-wrap {
    width: 100%;
  }
}

/* ===================================================================
   VIDEOGAMES — CHARACTERS: lista de protagonistas (nombre + imagen),
   manual en esta fase (en el futuro se podrá autocompletar con IGDB).
   Mismo lenguaje visual que .cast-item (foto 100x150), pero editable:
   cada tarjeta es su propia caja de subida + input de nombre + botón
   para quitarla.
   =================================================================== */
.personajes-lista {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.personaje-contenedor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 110px;
}

.personaje-foto-caja {
  width: 100px;
  height: 150px;
  border-radius: 6px;
}

.personaje-nombre-input {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  text-align: center;
  padding: 0.3rem 0.4rem;
}

.personaje-contenedor .boton-quitar-imagen-galeria {
  top: -6px;
  right: -6px;
}

/* ===================================================================
   VIDEOGAMES — PLATFORM: mismas pastillas de siempre, con un ícono SVG
   propio (js/plataformas-iconos.js) antes del texto. Lista fija (sin
   +Add), selección múltiple.
   =================================================================== */
.plataformas-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.8rem;
}

.pastilla-icono {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pastilla-icono svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===================================================================
   VIDEOGAMES — PLAYTIME: dos campos numéricos cortos (horas/minutos)
   en vez de texto libre, para no depender de parsear un formato a mano.
   =================================================================== */
.tiempo-juego-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tiempo-juego-input {
  width: 5rem;
  flex: 0 0 auto;
}

.tiempo-juego-unidad {
  color: var(--texto-tenue);
  font-size: 0.85rem;
}

/* ===== Visor de pantalla completa (lightbox) con marco y animación ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 8, 0.88);
  z-index: 200;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox-overlay.activo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-marco {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--panel-grad);
  border: 2px solid var(--panel-borde-ext);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--panel-relieve), 0 20px 60px rgba(0, 0, 0, 0.7);
  transform: scale(0.92);
  transition: transform 0.25s ease;
}

.lightbox-overlay.activo .lightbox-marco {
  transform: scale(1);
}

.lightbox-marco img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 24px);
  border-radius: 10px;
}

.lightbox-cerrar {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--panel-borde-ext);
  background: linear-gradient(180deg, var(--acento-suave), var(--acento));
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
}

/* ===== Best Scene: cover-flow tipo catálogo. Tamaño/marco del video
   central copiado tal cual de .story-carrusel (aspect-ratio 16:9,
   border-radius, borde, padding, box-shadow — ver más arriba en este
   archivo) para que se sienta parte del mismo sistema visual que Story
   Summary/Ending Explained en modo cinematográfico — si se cambia ahí,
   cambiar acá también. No se aplica .story-carrusel directamente porque
   tiene selectores hijos propios (.story-flex.modo-corto .story-carrusel
   .story-texto) que no corresponden acá.
   .best-scene-marco tiene el aspect-ratio; .best-scene-carrusel (el
   contenedor de afuera) solo aporta el padding lateral para que las
   flechas y los laterales asomando tengan lugar — mismo anidamiento que
   .wizard-viewport-envoltura > .wizard-nav-flecha + .wizard-viewport
   (css/formulario.css) ===== */
.best-scene-carrusel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 5.5rem;
}

.best-scene-marco {
  position: relative;
  aspect-ratio: 16 / 9;
}

.best-scene-item {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid var(--panel-borde-ext);
  padding: 4px;
  box-sizing: border-box;
  background: var(--panel-grad);
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    var(--panel-relieve-suave);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Con un solo video no hay roles ni animación — se centra estático. */
.best-scene-carrusel.best-scene-unico-wrap { padding: 0; }
.best-scene-carrusel.best-scene-unico-wrap .best-scene-item { position: relative; transition: none; }

.best-scene-item.rol-centro     { transform: translateX(0)    scale(1);    opacity: 1;   z-index: 3; pointer-events: auto; }
.best-scene-item.rol-anterior   { transform: translateX(-58%) scale(0.76); opacity: 0.5; z-index: 2; pointer-events: auto; cursor: pointer; }
.best-scene-item.rol-siguiente  { transform: translateX(58%)  scale(0.76); opacity: 0.5; z-index: 2; pointer-events: auto; cursor: pointer; }
.best-scene-item.rol-oculto-izq { transform: translateX(-88%) scale(0.6);  opacity: 0;   z-index: 1; pointer-events: none; }
.best-scene-item.rol-oculto-der { transform: translateX(88%)  scale(0.6);  opacity: 0;   z-index: 1; pointer-events: none; }

.best-scene-thumb,
.best-scene-live-host,
.best-scene-live-host iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 7px;
  display: block;
}

/* Mientras el rol es centro, el reproductor en vivo (activarBestScene-
   Coverflow, js/render.js) reemplaza la miniatura estática. */
.best-scene-item.rol-centro .best-scene-thumb {
  display: none;
}

.best-scene-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  z-index: 4;
}
.best-scene-flecha:hover { border-color: var(--acento-suave); box-shadow: var(--panel-relieve-suave), 0 0 10px var(--acento-glow); }
.best-scene-flecha-prev { left: 0.5rem; }
.best-scene-flecha-next { right: 0.5rem; }

@media (max-width: 760px) {
  .best-scene-carrusel { padding: 0 2.5rem; }
  .best-scene-item.rol-anterior, .best-scene-item.rol-siguiente { transform: translateX(48%) scale(0.68); }
  .best-scene-flecha { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
}

.best-scene-print-link {
  display: none;
}

/* ===== Trivia / Key Highlights / Theories: tarjetas individuales —
   fondo/borde sutil + glow discreto (mismo lenguaje que .punto.activo/
   .trailer-modal-cerrar), alto SIEMPRE dinámico según el contenido
   (nunca fijo, nunca overflow:hidden). ===== */
.lista-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bullet-item:hover {
  border-color: var(--acento-suave);
  box-shadow: var(--panel-relieve-suave), 0 0 12px var(--acento-glow);
}

.bullet-marca {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--acento-suave);
  box-shadow: 0 0 6px var(--acento-glow);
}

.bullet-texto {
  flex: 1 1 auto;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

.bullet-texto p {
  margin: 0 0 0.5em;
}

.bullet-texto p:last-child {
  margin-bottom: 0;
}

/* ===================================================================
   CAST — reparto traído directo de TMDB (ya no depende de ningún sitio
   externo). Fila horizontal de tarjetas foto+nombre+personaje; se usa
   tanto en la sección Cast de la ficha final (#cast-lista-contenedor)
   como en los paneles de referencia del formulario
   (.cast-referencia-cuerpo / .cast-paso-cuerpo) — un solo diseño,
   coloreado con las variables del tema de cada categoría.
   =================================================================== */
.cast-lista {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 6px;
}

.cast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 100px;
}

.cast-foto {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: var(--superficie);
  border: 1px solid var(--panel-borde-ext);
  box-shadow: inset 0 0 0 1px var(--panel-borde-int);
}

.cast-foto-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cast-info {
  width: 100%;
  overflow: hidden;
  margin-top: 6px;
}

.cast-nombre {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
}

.cast-nombre:hover {
  text-decoration: underline;
  color: var(--acento-suave);
}

/* Videogames — Characters en la FICHA final (#characters, tanto vista
   como edición): pedido explícito del usuario, tarjetas más grandes que
   el Cast de Movies/Series (que comparte .cast-item — por eso el ajuste
   va scopeado a .tema-videogames, nunca toca Movies/Series) y que la
   caja chica del wizard de creación (esa se queda igual, son solo de
   referencia). Vista usa .cast-item/.cast-foto; edición reutiliza
   .personaje-contenedor/.personaje-foto-caja del wizard. */
.tema-videogames #characters .cast-item {
  flex: 0 0 150px;
}
.tema-videogames #characters .cast-foto {
  width: 150px;
  height: 225px;
}
.tema-videogames #characters .cast-nombre {
  font-size: 0.85rem;
}
.tema-videogames #characters .personaje-contenedor {
  flex: 0 0 150px;
}
.tema-videogames #characters .personaje-foto-caja {
  width: 150px;
  height: 225px;
}
.tema-videogames #characters .personaje-nombre-input {
  font-size: 0.85rem;
}

/* ===================================================================
   Ficha de actor — popup liviano al hacer clic en un nombre de cast
   (ver abrirFichaActor en cast.js). Reutiliza el mismo look de ventana
   que ia-ventana (ia-asistente.js), solo con su propio cuerpo.
=================================================================== */
.ficha-actor-ventana { max-width: 420px; }

.ficha-actor-cuerpo {
  padding: 1rem;
  overflow-y: auto;
}

.ficha-actor-encabezado {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.ficha-actor-foto {
  width: 80px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}
.ficha-actor-foto-vacia {
  background: var(--superficie);
}

.ficha-actor-dato {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: var(--texto);
}

.ficha-actor-bio {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-line;
}

.ficha-actor-link {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--acento-suave);
}

.cast-personaje {
  display: block;
  font-size: 0.68rem;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cast-lista::-webkit-scrollbar { height: 8px; }
.cast-lista::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.cast-lista::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 4px; }
.cast-lista::-webkit-scrollbar-thumb:hover { background: var(--acento-suave); }

/* ===================================================================
   FASE K: EXPORTAR A PDF (window.print → "Guardar como PDF")
=================================================================== */
@media print {
  html, body {
    background: var(--bg) !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .sidebar,
  .topbar,
  .indice-horizontal,
  .boton-flotante-indice,
  .boton-flotante-ia,
  .widget-musica-mini-play,
  .menu-opciones,
  .lightbox-overlay,
  #cast,
  .marco-multiple,
  .boton-quitar-imagen-galeria,
  .best-scene-item iframe,
  .video-embed {
    display: none !important;
  }

  .app {
    display: block;
    height: auto;
    background: var(--bg) !important;
  }

  .contenido {
    overflow: visible;
    background: var(--bg) !important;
  }

  .detalle-pelicula {
    padding: 0;
  }

  .seccion {
    margin-top: 0.6rem;
    padding: 1rem;
    border-radius: 0;
  }

  .seccion:first-of-type {
    margin-top: 0;
  }

  .seccion h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  .galeria-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    overflow: visible;
  }

  .galeria-grid .marco-imagen {
    flex: none;
  }

  .marco-imagen,
  .carrusel-slide {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* el carrusel en pantalla solo muestra 1 imagen a la vez (con sticky y
     fundido) — pero en el pdf impreso queremos todas las imágenes/videos
     visibles, apiladas normalmente, sin animación ni sticky. */
  .story-carrusel-wrap {
    position: static !important;
  }

  .story-carrusel {
    position: static !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }

  .carrusel-slide {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .carrusel-slide img {
    aspect-ratio: 16 / 9;
  }

  .carrusel-puntos {
    display: none !important;
  }

  .best-scene-carrusel {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    overflow: visible;
    max-width: none !important;
    padding: 0 !important;
  }

  /* Cover-flow (pantalla): los items ahora viven dentro de
     .best-scene-marco — "display:contents" lo saca de la jerarquía
     visual para que .best-scene-item vuelva a ser hijo directo del
     grid de arriba, igual que antes del rediseño. */
  .best-scene-marco {
    display: contents;
  }

  .best-scene-item {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    aspect-ratio: auto;
    background: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .best-scene-flecha {
    display: none !important;
  }

  .best-scene-print-link {
    display: block !important;
  }

  .best-scene-print-link img {
    width: 100%;
    border-radius: 8px;
    display: block;
  }
}

/* ===================================================================
   BOOKS: sin wallpaper — el Hero es la portada grande + un panel de
   datos elegante, sobre el fondo del tema (los gradientes radiales que
   ya pinta <body>), no una foto subida. Solo se ajusta el Hero — el
   resto de layout.css (secciones, chips, galería...) ya es genérico.

   Estructura: .hero-completo pasa a ser un grid de 2 columnas (portada |
   contenido). .hero-overlay (que en el resto de categorías es la fila
   "portada + info" sobre la foto de fondo) se vuelve "display:contents"
   aquí — dejar de generar su propia caja para que portada e info
   participen directo del grid del padre, y así la portada pueda ocupar
   las 2 filas (info arriba, panel de datos abajo) mientras se mantiene
   pegada a su lado. Así se evita el hueco vacío enorme que dejaba la
   barra de metadatos a todo el ancho de la página cuando pocos campos
   no la llenaban (reportado por el usuario con captura).
   =================================================================== */
.tema-books .hero-completo {
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0.5rem 0 1.5rem 0;
}

.tema-books .hero-completo::before,
.tema-books .hero-completo::after {
  display: none;
}

.tema-books .hero-completo .hero-overlay {
  display: contents;
}

.tema-books .hero-completo .hero-poster {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  width: 100%;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--panel-borde-int);
}

.tema-books .hero-completo .hero-info {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.tema-books .hero-completo .hero-titulo,
.tema-books .hero-quote {
  text-shadow: none;
}

.tema-books .metadatos-sobre-imagen {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  background: transparent;
  border-top: none;
  border-image: none;
  box-shadow: none;
  padding: 0;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Sin la portada a lo ancho ni un Music Widget empujando a la derecha,
   los campos pasan de flex-wrap a un grid de columnas parejas — con
   flex-wrap normal, la última fila (si queda con menos elementos que
   las de arriba) se estira con flex-grow y termina con cajas mucho más
   anchas que las de las filas de encima; el grid reparte el mismo
   ancho de columna en todas las filas por igual. */
.tema-books .metadatos-campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.7rem;
  flex: 1 1 auto;
  width: 100%;
}

.tema-books .metadatos-campos > .campo-grupo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 640px) {
  .tema-books .hero-completo {
    grid-template-columns: 1fr;
  }
  .tema-books .hero-completo .hero-poster {
    grid-column: 1;
    grid-row: 1;
    max-width: 220px;
    margin: 0 auto;
  }
  .tema-books .hero-completo .hero-info {
    grid-column: 1;
    grid-row: 2;
  }
  .tema-books .metadatos-sobre-imagen {
    grid-column: 1;
    grid-row: 3;
  }
}

/* ===================================================================
   Rediseño Series (temporadas como experiencias múltiples) — acordeón
   "My Experiences". No existía ningún patrón de acordeón en la app;
   este es nuevo. Reutiliza las variables de tema (--acento, --borde,
   --panel-grad) para que Series/K-Dramas se vean coherentes con el
   resto de la ficha sin colores fijos. Responsivo: sin media queries
   propias porque ya es una columna única de ancho completo, igual que
   el resto de .seccion — se acomoda solo en cualquier ancho.
   =================================================================== */
.experiencias-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.experiencia-item {
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  background: var(--superficie);
  overflow: hidden;
}

.experiencia-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texto);
}

.experiencia-header:hover {
  background: rgba(var(--acento-rgb), 0.08);
}

.experiencia-flecha {
  color: var(--acento);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.experiencia-etiqueta {
  font-weight: 600;
  letter-spacing: 0.2px;
  flex: 1 1 auto;
}

.experiencia-fechas {
  color: var(--texto-tenue);
  font-size: 0.85rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.experiencia-abierta > .experiencia-header {
  border-bottom: 1px solid var(--panel-borde-ext);
  background: rgba(var(--acento-rgb), 0.1);
}

.experiencia-cuerpo {
  padding: 1.1rem;
}

.experiencia-cuerpo.oculto {
  display: none;
}

/* Dentro del cuerpo de una experiencia, las secciones reutilizan
   .seccion pero sin el relieve/esquinas de nivel 1 (ya están dentro de
   una tarjeta) — más planas, para no duplicar el mismo efecto anidado.
   Bug real reportado: sin ningún borde entre secciones, el usuario
   sentía que "se perdían las divisiones" (todo el texto se veía
   corrido, sin saber dónde terminaba Story Summary y empezaba Ending
   Explained, por ejemplo) — se agrega una línea divisoria sutil entre
   secciones consecutivas, sin volver al panel completo (con sombra/
   esquinas) que sí tiene el nivel 1. */
.experiencia-cuerpo .seccion {
  background: transparent;
  border: none;
  border-top: 1px solid var(--borde);
  box-shadow: none;
  padding: 1.25rem 0 0;
  margin-top: 1.25rem;
}
.experiencia-cuerpo .seccion:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.experiencia-cuerpo .seccion::before,
.experiencia-cuerpo .seccion::after {
  display: none;
}

.experiencia-quote {
  font-style: italic;
  color: var(--texto-tenue);
  border-left: 2px solid var(--acento);
  padding-left: 0.8rem;
  margin: 0 0 1rem 0;
}

.experiencias-vacio {
  color: var(--texto-tenue);
  font-style: italic;
}