.pagina-formulario { min-height: 100vh; }

.pagina-formulario .topbar { justify-content: space-between; }
.pagina-formulario .topbar h2 { font-family: Georgia, serif; margin: 0; color: var(--texto); }

/* Punto 2/14: "Save Movie" disponible desde el primer paso — vive
   siempre en la topbar, junto al menú "Ir a...", como acción secundaria
   y estable (nunca en el centro, nunca compitiendo con "Next"). */
.topbar-acciones-wizard {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.boton-guardar-topbar {
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .pagina-formulario .topbar { padding: 0.8rem 0.9rem; gap: 0.5rem; }
  .pagina-formulario .topbar h2 { display: none; }
  .boton-guardar-topbar { padding: 0.5rem 0.8rem; font-size: 0.72rem; }
}

.form-contenedor {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.form-separador {
  border: none;
  border-top: 1px solid var(--acento-suave);
  border-image: var(--linea-metalica) 1;
  margin: 0.5rem 0;
}

.form-fila-imagenes { display: flex; gap: 1rem; }
.form-fila { display: flex; gap: 1rem; }
.form-fila .form-grupo { flex: 1; }

/* ===================================================================
   Fase B, puntos 7 y 8: cada "apartado" del formulario ahora vive en
   su propio contenedor discreto (antes todo estaba suelto sobre el
   fondo, sin separación — fácil perder de vista qué campo ya llenaste)
   — mismo lenguaje visual que ".metadatos-campos > .campo-grupo" en
   layout.css, reutilizado aquí (Forma B) en vez de inventar un
   contenedor nuevo.
=================================================================== */
.form-grupo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(var(--bg-rgb), 0.45);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
  box-shadow:
    inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.12),
    inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

/* Dos .form-grupo lado a lado en una sola pantalla del wizard (ej.
   Started/Finished de Series, unificados a pedido del usuario en vez de
   dos pasos separados). Se apila en una columna en pantallas angostas,
   mismo criterio que .story-flex/.pareja-contenedor. */
.form-grupo-fila {
  display: flex;
  gap: 1rem;
}
.form-grupo-fila > .form-grupo {
  flex: 1 1 0;
}
@media (max-width: 480px) {
  .form-grupo-fila {
    flex-direction: column;
  }
}

/* Punto 7: el título de cada campo ya no vive "pegado" al borde de su
   contenedor — ahora tiene su propio espacio abajo (padding-bottom +
   línea divisoria sutil) y resalta más (color acento en vez de gris
   apagado, más peso). El ":not(.form-checkbox)" evita tocar los
   checkboxes de una sola línea (Based on a True Story, Music Widget,
   etc.), que necesitan seguir viéndose en fila, no como título. */
/* Punto 6 (Fase 1.5): el título de cada campo ahora va centrado (antes
   quedaba pegado a la izquierda) y un poco más grande — sigue siendo
   discreto/elegante, no un encabezado gigante. */
.form-grupo:not(.form-checkbox) > label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.95rem;
  color: var(--acento-suave);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  padding-bottom: 0.5rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(var(--acento-suave-rgb), 0.18);
}

/* Reserva el espacio del ícono de IA para que un título largo centrado
   nunca le quede encima (el ícono ahora es position:absolute, fuera
   del flujo del label). */
.form-grupo:not(.form-checkbox) > label:has(.boton-ia-campo) {
  padding-right: 2.6rem;
}

/* ===================================================================
   Asistentes por campo: ícono chico (icons/Destellos.png), discreto,
   siempre en la esquina superior derecha del encabezado del campo —
   "margin-left:auto" lo empuja al extremo derecho sin importar cuántos
   otros spans (nombre del campo, ✅ de TMDB) ya haya en ese <label>.
   Reemplaza, campo por campo, al botón grande "boton-ia" que antes
   vivía flotando en pila-botones-ia-form (ver Asistencia General).
=================================================================== */
/* Punto 6: con el título del campo ahora centrado, el ícono de IA ya no
   puede quedar anclado a la derecha con "margin-left:auto" dentro del
   mismo flex row (eso descentraría el texto) — pasa a posición
   absoluta sobre .form-grupo (ya tiene position:relative), así el
   título queda centrado de verdad y el ícono se mantiene en su
   esquina. */
.boton-ia-campo {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: center / contain no-repeat url("../icons/Destellos.png");
  background-color: transparent;
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.15s ease, transform 0.1s ease;
  z-index: 2;
}
.boton-ia-campo:hover { opacity: 1; transform: scale(1.08); }
.boton-ia-campo:active { transform: scale(0.92); }

/* Contenedor relativo para poder anclar el aviso efímero (§ más abajo)
   sin desarmar el layout normal del form-grupo. */
.form-grupo { position: relative; }

/* ===================================================================
   Aviso efímero: burbuja chica informativa que aparece pegada a un
   campo y se desvanece sola a los ~3s (Release, Watched Date, Rating,
   Gallery, Best Scene, imágenes de Story/Ending, Cast reference, y
   confirmación tras corregir texto). Ver mostrarAvisoEfimero() en
   formulario.js.
=================================================================== */
.aviso-efimero {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  max-width: min(280px, calc(100% - 2rem));
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--texto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 40;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.aviso-efimero.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   Contenedores seleccionables genéricos (frases, países, finales
   alternativos, teorías) — mismo lenguaje visual que las opciones
   clicables del chat de IA (ia-opcion-boton), pero en tarjeta propia
   para poder mostrar texto más largo con bullets.
=================================================================== */
.ia-resultado-seleccionable {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ia-resultado-seleccionable:hover {
  border-color: var(--acento);
  background: rgba(var(--acento-rgb, 138, 106, 232), 0.08);
}
.ia-resultado-seleccionable.ia-resultado-usado {
  opacity: 0.55;
  cursor: default;
}

.form-input {
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.form-textarea {
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  min-height: 100px;
  overflow: hidden;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.form-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  font-size: 0.9rem;
  color: var(--texto);
}

.form-pastillas { display: flex; flex-wrap: wrap; gap: 0.7rem 0.8rem; }

/* ===== Pastillas (Genre, Subgenre, Rating, Version Type...) — botones
   físicos, igual criterio que .badge en style.css ===== */
.pastilla {
  background: linear-gradient(180deg, var(--superficie-clara), var(--superficie));
  border: 1px solid var(--panel-borde-ext);
  color: var(--texto-tenue);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pastilla:hover { border-color: var(--acento-suave); color: var(--texto); }
.pastilla:active { box-shadow: var(--boton-relieve-activo); }

.pastilla.activa {
  background: linear-gradient(180deg, var(--acento-suave), var(--acento));
  border-color: var(--panel-borde-ext);
  color: white;
  box-shadow: var(--boton-relieve), 0 0 10px var(--acento-glow);
}

/* Seasons: pastillas de número (1 al 30) — mismo ancho para todas, sin
   importar si el número tiene 1 o 2 dígitos. */
#grupo-temporadas .pastilla,
#popover-temporadas .pastilla {
  min-width: 2.4rem;
  text-align: center;
}

.pastilla-agregar {
  display: inline-block;
  margin-top: 0.6rem;
  border-style: dashed;
  opacity: 0.8;
}
.pastilla-agregar:hover {
  opacity: 1;
}

/* ===================================================================
   OPCIONES PERSONALIZADAS — se administran con el lápiz discreto en
   la esquina del bloque. En modo normal las "✕" no distraen; al tocar
   el lápiz aparecen, y el icono pasa a disquete para guardar.
=================================================================== */
.selector-con-opciones-personales {
  position: relative;
  padding-top: 1.55rem;
}

.selector-editar-opciones {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16.8V20h3.2L18.1 9.1l-3.2-3.2L4 16.8zM16 4.8l1.1-1.1a1.7 1.7 0 0 1 2.4 0l.8.8a1.7 1.7 0 0 1 0 2.4L19.2 8 16 4.8z' fill='none' stroke='%23c6d0df' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.selector-editar-opciones:hover {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(var(--acento-suave-rgb), 0.6));
}

.selector-editar-opciones:active { transform: translateY(1px); }

.selector-editar-opciones.activo {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h12l3 3v15H4V3h1zm3 1v6h7V4H8zm1 10v5h6v-5H9z' fill='none' stroke='%23c6d0df' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.selector-editar-opciones:disabled {
  cursor: wait;
  opacity: 0.45;
}

.pastilla-envoltura {
  position: relative;
  display: inline-flex;
}

.pastilla-borrar {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--panel-borde-ext);
  background: rgba(var(--bg-rgb), 0.9);
  color: var(--texto-tenue);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.wizard-contenedor .modo-edicion-opciones .pastilla-borrar {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.pastilla-borrar:hover {
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
}

/* ===================================================================
   PUNTO 3: botón para quitar el link de Cast con un solo clic, sin
   aviso de confirmación (a diferencia de borrar una película o hacer
   el barrido de huérfanos, esto no borra nada permanente en la nube).
=================================================================== */
.fila-cast-input {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.fila-cast-input .form-input {
  flex: 1;
}

.boton-quitar-cast {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--panel-borde-ext);
  background: var(--panel-grad-clara);
  color: var(--texto-tenue);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.boton-quitar-cast:hover {
  border-color: var(--alerta-fuerte);
  /* var(--texto) (no #fff fijo): el rojo de fondo es translúcido (25%),
     así que el color real depende de qué hay detrás — la página (--bg),
     que cambia de casi negro a casi blanco entre modos. Con var(--texto)
     el contraste queda bien en los dos. */
  color: var(--texto);
  background: rgba(239, 68, 68, 0.25);
}

/* ===== Caja de subida (Poster, Wallpaper) ===== */
.caja-subida {
  aspect-ratio: 2 / 3;
  background-color: var(--superficie);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px dashed var(--borde);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  cursor: pointer;
  text-align: center;
  padding: 0.5rem;
  transition: border-color 0.15s ease;
}

.caja-subida:hover { border-color: var(--acento-suave); }

.caja-subida.con-imagen {
  border: 1px solid var(--panel-borde-ext);
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ===== Universal: arrastrar y soltar sobre CUALQUIER cuadro de subida
   (activarDragDropYPegado, js/procesar-imagenes.js) — cajas simples,
   slots de grids, filas de Couples/Favorite Episodes. Un solo estado
   visual consistente en toda la app. ===== */
.caja-subida-arrastrando {
  border-color: var(--acento-suave) !important;
  background: rgba(var(--acento-suave-rgb), 0.1) !important;
  box-shadow: inset 0 0 0 2px var(--acento-suave);
}

.caja-wallpaper {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background-size: cover;
}

/* ===== Lista de imágenes de escena (Story Summary, etc.) ===== */
.lista-imagenes-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.caja-imagen-form { position: relative; }

.caja-imagen-preview {
  aspect-ratio: 16 / 9;
  background-color: var(--superficie);
  background-size: cover;
  background-position: center;
  border: 2px dashed var(--borde);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s ease;
}

.caja-imagen-preview:hover { border-color: var(--acento-suave); }

/* Cuando ya tiene imagen, JS le agrega una clase de fondo mediante
   estilo inline, pero el marco se aprovecha igual: borde sólido +
   relieve, coherente con el resto de imágenes "incrustadas". */
.caja-imagen-form .caja-imagen-preview[style*="background-image"] {
  border: 1px solid var(--panel-borde-ext);
  box-shadow:
    inset 0 0 0 1px var(--panel-borde-int),
    inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.boton-quitar-imagen {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.9rem;
}

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

.boton-agregar { align-self: flex-start; margin-top: 0.3rem; }

.fila-texto-multilinea {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.fila-texto-multilinea .campo-texto-largo {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.boton-quitar-fila {
  position: static;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 2px;
}

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

/* Punto 8: avisito sutil de cuántas imágenes "caben" según el texto */
.aviso-imagenes {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  margin-top: 0.3rem;
}

/* ===================================================================
   Punto 9: secciones opcionales (Alternative Final, Theories, Key
   Highlights) — clase genérica para ocultar contenido, y el mini-menú
   "Image / Video" que aparece al tocar "+ Add" en Alternative Final.
=================================================================== */
.oculto { display: none; }

.opciones-agregar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem;
}

.opciones-agregar button {
  background: var(--panel-grad-clara);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 0.4rem;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}

.opciones-agregar button:hover {
  border-color: var(--acento-suave);
}

/* ===================================================================
   FASE Q: Buscador de TMDB (dentro del Paso 1: Basics)
=================================================================== */
.tmdb-buscador-caja {
  position: relative;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: var(--panel-relieve), 0 0 14px var(--acento-glow);
}

.tmdb-buscador-caja::before,
.tmdb-buscador-caja::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0.5;
}
.tmdb-buscador-caja::before {
  top: 6px; left: 6px;
  border-top: 2px solid var(--acento-suave);
  border-left: 2px solid var(--acento-suave);
}
.tmdb-buscador-caja::after {
  bottom: 6px; right: 6px;
  border-bottom: 2px solid var(--acento-suave);
  border-right: 2px solid var(--acento-suave);
}

.tmdb-buscador-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tmdb-buscador-caja > label,
.tmdb-buscador-encabezado label {
  font-size: 0.8rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* punto 5: botón ✕ para cerrar el panel de resultados de tmdb sin tener
   que borrar el texto que escribiste. solo se muestra cuando hay algo
   que cerrar (tmdb.js le agrega/quita la clase "oculto" automáticamente
   según si #tmdb-resultados tiene contenido). */
.tmdb-cerrar-resultados {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--superficie-clara);
  color: var(--texto);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tmdb-cerrar-resultados:hover {
  border-color: var(--acento-suave);
  background: rgba(var(--acento-suave-rgb), 0.15);
}

.tmdb-resultados {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 420px;
  overflow-y: auto;
}

.tmdb-cargando {
  color: var(--texto-tenue);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.tmdb-exito {
  color: #4caf50 !important;
  font-weight: bold;
}

/* ===== Videogames — Characters: "🌐 Search on the web" (js/personajes-web.js) ===== */
.buscar-web-panel {
  margin-top: 0.6rem;
  padding: 0.8rem;
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  box-shadow: var(--panel-relieve-suave);
}

/* ===================================================================
   Preview de video antes de elegir (buscador de YouTube y lista de
   tráilers de TMDB, ambos reutilizan .tmdb-resultado-item): un ícono
   ▶ centrado sobre la miniatura; al hacer clic, la miniatura se
   reemplaza por un iframe embebido reproduciendo — clic de nuevo (o
   abrir otra preview) la cierra.
=================================================================== */
.tmdb-resultado-poster-video {
  position: relative;
  cursor: pointer;
}
.tmdb-resultado-poster-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  transition: background 0.15s ease;
}
.tmdb-resultado-poster-video:hover .tmdb-resultado-poster-play {
  background: rgba(0, 0, 0, 0.15);
}
.tmdb-resultado-poster-reproduciendo .tmdb-resultado-poster-play {
  display: none;
}
.tmdb-resultado-poster-reproduciendo iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ===================================================================
   Trailer (formulario): lista TMDB reutiliza .tmdb-resultados/.tmdb-
   resultado-item tal cual. Esto es solo el mini reproductor de recorte.
=================================================================== */

/* Punto 11 (Fase 1.5, Movies): cabecera de la tarjeta del tráiler ya
   elegido — título a la izquierda, acciones Change/Remove a la derecha. */
.trailer-seleccionado-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid rgba(var(--acento-suave-rgb), 0.18);
  padding-bottom: 0.5rem;
  margin-bottom: 0.1rem;
}
.trailer-seleccionado-cabecera label {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.trailer-seleccionado-acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.trailer-seleccionado-acciones .boton {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}

.trailer-form-yt-host {
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 360px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.trailer-form-yt-host iframe { width: 100%; height: 100%; }

.trailer-form-controles {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.trailer-form-progreso { flex: 1; }
.trailer-form-tiempo {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.trailer-form-marcas {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.widget-musica-imagen-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}
.widget-musica-imagen-opciones .boton { font-size: 0.72rem; padding: 0.35rem 0.5rem; }

.menu-asistente-campo-opciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.buscar-web-fila {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.buscar-web-fila .form-input { flex: 1 1 auto; }

.tmdb-resultado-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  padding: 0.6rem;
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.15s ease;
}

.tmdb-resultado-item:hover { border-color: var(--acento-suave); }

.tmdb-resultado-poster {
  flex-shrink: 0;
  width: 52px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background-color: var(--superficie);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--borde-suave);
}

.tmdb-resultado-info {
  flex: 1;
  min-width: 0;
}

/* Miniaturas de video (buscador de YouTube y lista de tráilers TMDB):
   16:9, más grandes que un poster — tienen que reconocerse bien antes
   de elegir. Va DESPUÉS de .tmdb-resultado-poster (misma especificidad)
   para ganarle a su aspect-ratio 2:3 de poster. */
.tmdb-resultado-poster.tmdb-resultado-poster-video {
  width: 140px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tmdb-resultado-titulo {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--texto);
}

.tmdb-resultado-anio {
  font-weight: normal;
  color: var(--texto-tenue);
}

.tmdb-titulo-original {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  margin-top: 0.15rem;
}

.tmdb-boton-usar {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.75rem;
}

.tmdb-ajustes {
  font-size: 0.8rem;
  color: var(--texto-tenue);
}

.tmdb-ajustes summary {
  cursor: pointer;
  padding: 0.3rem 0;
}

.tmdb-ajustes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.tmdb-ajustes-grid label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  font-size: 0.8rem;
  color: var(--texto);
}

@media (max-width: 480px) {
  .tmdb-ajustes-grid { grid-template-columns: 1fr; }
}

/* Punto 2: palomita verde ✅ junto a las leyendas de los campos que
   TMDB puede autollenar. */
.tmdb-check {
  display: none;
  color: #4caf50;
  font-size: 0.85rem;
  margin-left: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
}

.tmdb-check.visible {
  display: inline;
}

/* ===================================================================
   WIZARD: formulario "New Movie" en pasos horizontales
=================================================================== */
.wizard-contenedor {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard-pasos-barra {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.wizard-paso-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  color: var(--texto-tenue);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wizard-paso-item:hover { border-color: var(--acento-suave); }

.wizard-paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--superficie);
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.wizard-paso-item.activo {
  border-color: var(--acento-suave);
  color: var(--texto);
  box-shadow: var(--panel-sombra-suave), 0 0 10px var(--acento-glow);
}
.wizard-paso-item.activo .wizard-paso-numero {
  background: linear-gradient(180deg, var(--acento-suave), var(--acento));
  color: white;
}

.wizard-paso-item.completado .wizard-paso-numero {
  background: var(--acento-suave);
  color: #0b1220;
}

.wizard-progreso {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* CORRECCIÓN puntos 3/5/6: el alto y el deslizamiento horizontal usan la
   misma duración/curva y se disparan juntos (ver wizard.js). Además,
   wizard.js ahora usa una "altura base" compartida por TODOS los pasos,
   así que la gran mayoría de las veces cambiar de paso es un
   deslizamiento horizontal puro, sin animar el alto — nada de
   transiciones "diagonales". overflow-anchor:none evita que el propio
   navegador intente "corregir" el scroll solo mientras el contenido
   cambia de tamaño (esto ayudaba a la sensación de que la página se
   arrastraba hacia arriba sola). */
/* CORRECCIÓN: antes las flechas quedaban ENCIMA del contenido (position
   absolute dentro del mismo espacio del marco). Ahora reservamos un
   "pasillo" vacío a los lados (padding), y las flechas viven ahí — fuera
   del marco del contenido, nunca tapando nada. */
.wizard-viewport-envoltura {
  position: relative;
  padding: 0 3.2rem;
}

.wizard-viewport {
  overflow: hidden;
  overflow-anchor: none;
  border-radius: 10px;
  border: 2px solid var(--panel-borde-ext);
  box-shadow: var(--panel-relieve);
  transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  /* Bug real reportado en tablet Android (capturas): el paso SIGUIENTE
     se veía parcialmente encima del paso actual, como si overflow:hidden
     no estuviera recortando de verdad — patrón conocido en WebView/
     Chrome Android cuando un hijo con will-change:transform (.wizard-
     pista, más abajo) se promueve a su propia capa de composición pero
     el padre que debería recortarlo (este) se queda en la capa normal:
     el recorte de overflow:hidden puede no aplicarse contra una capa
     compuesta aparte en ciertos GPU/drivers. Forzar TAMBIÉN a este
     contenedor a su propia capa (transform/contain) hace que el
     compositor recorte de verdad contra sus propios límites. */
  transform: translateZ(0);
  contain: paint;
}

.wizard-pista {
  display: flex;
  align-items: flex-start;
  background: var(--panel-grad);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  /* Promueve el track a su propia capa de composición — mitigación
     estándar para este patrón (fila flex desbordada + translateX) en
     compositores más débiles (tablet Android), donde una transición
     "pesada" en un elemento cercano (el alto de .wizard-viewport) podía
     coincidir con esta y dejar el frame renderizado a mitad. */
  will-change: transform;
}

.wizard-paso {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.15rem 2.6rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Punto 2 (corrección): flechas Previous/Next EN EL PASILLO fuera del
   marco (nunca encima del contenido). CORRECCIÓN: ya no usan top:50%
   fijo — eso las centraba según el alto COMPARTIDO entre todos los
   pasos (necesario para que el deslizamiento sea limpio), lo cual las
   dejaba "flotando" abajo en pasos con poco contenido, como Basics.
   Ahora wizard.js les pone un "top" en píxeles calculado según el alto
   REAL y visible del contenido del paso actual — así siempre se ven
   centradas con lo que de verdad estás viendo, sin importar que el
   marco por dentro sea más alto (para la animación). */
.wizard-nav-flecha {
  position: absolute;
  /* PUNTO 2: altura FIJA. Ya no se calcula en JavaScript según el
     contenido de cada paso — por eso antes "brincaban" al cambiar de
     paso. Ahora siempre están a 140px desde arriba del marco, sin
     importar qué tan alto o corto sea el paso actual. Si quieres
     subirlas o bajarlas más adelante, solo cambia este número. */
  top: 140px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--panel-borde-ext);
  background: var(--panel-grad-clara);
  color: var(--texto);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wizard-nav-flecha:hover { border-color: var(--acento-suave); box-shadow: var(--boton-relieve), 0 0 10px var(--acento-glow); }

.wizard-nav-flecha:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.wizard-nav-anterior { left: 0; }
.wizard-nav-siguiente { right: 0; }

@media (max-width: 700px) {
  .wizard-viewport-envoltura { padding: 0 2.4rem; }
  .wizard-nav-flecha { width: 34px; height: 34px; font-size: 1.1rem; }
}

/* ===== Punto 1: Paso Basics en 3 columnas (Poster | Wallpaper | Title+Name) ===== */
.paso-basics-columnas {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.paso-basics-poster { flex: 0 0 180px; }
.paso-basics-wallpaper { flex: 0 0 220px; }

.paso-basics-derecha {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 760px) {
  .paso-basics-columnas { flex-direction: column; }
  .paso-basics-poster, .paso-basics-wallpaper { flex: 0 0 auto; width: 100%; }
}

/* ===================================================================
   Panel de Cast "de referencia" — Punto 7 (Fase 1.5): en movie-nuevo.html
   estas columnas ya NO se usan (se quitaron de Resumen/Final/Alt
   Final/Theories/Review, el único panel que queda ahí es
   .cast-paso-cuerpo del step dedicado "Cast"). Este bloque se mantiene
   porque serie-nuevo.html (sin tocar todavía en esta fase) sigue
   usando .paso-con-cast/.cast-referencia tal cual.
=================================================================== */
.paso-con-cast {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.paso-con-cast-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.cast-referencia {
  position: relative;
  flex: 0 0 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  padding: 0.7rem;
  box-shadow: var(--panel-relieve-suave);
}

.cast-referencia-titulo {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--acento-suave);
  margin-bottom: 0.5rem;
}

.cast-referencia > .form-grupo {
  margin-top: 0.8rem;
  padding: 0.7rem 0.8rem 0.8rem;
}

.cast-referencia-cuerpo {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  border-radius: 8px;
  padding: 0.6rem;
}

.cast-referencia-vacio {
  font-size: 0.78rem;
  color: var(--texto-tenue);
  padding: 0.4rem;
  line-height: 1.5;
}

/* Panel del paso dedicado "Cast" — usado por Movies (único panel que
   queda) y por Series (junto con .cast-referencia-cuerpo). */
.cast-paso-cuerpo {
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  max-height: 520px;
  padding: 0.6rem;
  box-shadow: var(--panel-relieve-suave);
}

@media (max-width: 720px) {
  .paso-con-cast { flex-direction: column; }
  .cast-referencia { flex: 0 0 auto; }
  .wizard-contenedor { padding: 1rem; }
}

/* ===================================================================
   LEGACY — campos de texto expandibles (Story Summary, Ending
   Explained, Review, Alternative Final, Theories, Key Highlights).
   Fase 1.5 reemplazó esto SOLO en Movies (ver la regla ".wizard-paso
   textarea.form-textarea" más abajo). Series/Videogames/Books (sin
   tocar todavía) siguen usando este bloque tal cual — wizard.js solo
   activa este sistema para esas categorías (gate por TIPO_ITEM).
=================================================================== */
.campo-expandible-preview {
  min-height: 108px;
  max-height: 108px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.7rem 0.8rem 0.8rem;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease;
}

.campo-expandible-preview:hover,
.campo-expandible-preview:focus {
  border-color: var(--acento-suave);
  outline: none;
}

.campo-expandible-preview-alta {
  min-height: 260px;
  max-height: 260px;
}
.campo-expandible-preview-alta .campo-expandible-texto-preview {
  -webkit-line-clamp: 10;
}

.campo-expandible-texto-preview {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campo-expandible-placeholder-vacio {
  display: none;
  color: var(--texto-tenue);
  font-size: 0.85rem;
  font-style: italic;
}

.campo-expandible-preview.vacio .campo-expandible-placeholder-vacio { display: block; }
.campo-expandible-preview.vacio .campo-expandible-texto-preview { display: none; }

.campo-expandible-preview::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: linear-gradient(180deg, rgba(var(--superficie-rgb), 0) 0%, var(--superficie) 80%);
  pointer-events: none;
}

.campo-expandible-preview::after {
  content: "✎ Click to edit";
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  font-size: 0.65rem;
  color: var(--acento-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.overlay-campo-expandible {
  position: fixed;
  z-index: 300;
  background: var(--panel-grad);
  border: 2px solid var(--panel-borde-ext);
  border-radius: 8px;
  box-shadow: var(--panel-relieve), 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 20px var(--acento-glow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.overlay-campo-expandible-barra {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.overlay-campo-expandible-cerrar {
  background: var(--superficie-clara);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
}

.overlay-campo-expandible-cerrar:hover { border-color: var(--acento-suave); }

.overlay-campo-expandible-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.overlay-campo-expandible-cuerpo .form-textarea {
  width: 100%;
  box-sizing: border-box;
}

/* ===================================================================
   Punto 5/9 (Fase 1.5, SOLO Movies): campos de texto del wizard — un
   solo textarea real, siempre visible y editable directo (sin preview
   ni panel flotante aparte). Crece solo mientras escribes (wizard.js:
   activarAutoResizeTextareas) hasta una altura máxima; pasado ese punto
   usa su propio scroll interno, así los pasos del wizard no crecen sin
   límite.
=================================================================== */
.wizard-paso textarea.form-textarea {
  max-height: 420px;
  overflow-y: auto;
  transition: height 0.12s ease;
}

/* Story Summary / Ending Explained suelen llevar más texto — arrancan
   un poco más altos que el resto (el auto-resize sigue creciendo desde
   ahí si hace falta). */
#campo-resumen,
#campo-final {
  min-height: 180px;
}

/* ===================================================================
   Fase U: Music Widget — bloque del formulario/edición
=================================================================== */
.widget-musica-form-fila {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* PUNTO 2: sin importar el tamaño o proporción de la imagen que subas,
   siempre se recorta al centro para llenar el cuadro completo — antes
   heredaba "contain" de .caja-subida y dejaba franjas vacías. */
.caja-widget-musica-arte {
  width: 90px;
  height: 90px;
  aspect-ratio: 1 / 1;
  font-size: 0.75rem;
  flex-shrink: 0;
  background-size: cover;
}

.widget-musica-audio-subida {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.widget-musica-audio-estado {
  font-size: 0.85rem;
  color: var(--texto-tenue);
}

.widget-musica-audio-nota {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--texto-tenue);
  font-style: italic;
}

/* ===================================================================
   Punto 2: aviso de posible duplicado, debajo del campo Title
   (colores de alerta FIJOS — ver --alerta-fuerte/--alerta-suave en
   style.css — no cambian con el tema de categoría).
=================================================================== */
.aviso-duplicado {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
}

.aviso-duplicado a {
  color: inherit;
  text-decoration: underline;
}

.aviso-duplicado-fuerte {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--alerta-fuerte);
  color: #ffb3ab;
}

.aviso-duplicado-suave {
  background: rgba(212, 162, 77, 0.12);
  border: 1px solid var(--alerta-suave);
  color: var(--alerta-suave);
}

.aviso-duplicado-lista {
  margin: 6px 0 0 0;
  padding-left: 1.1rem;
}

.aviso-duplicado-lista li {
  margin-bottom: 3px;
}

#boton-guardar:disabled,
#boton-guardar-revision:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================================================
   ASISTENTE DE IA — ventana de chat flotante, con el mismo lenguaje
   visual "panel mecanizado" que el resto de la app (relieve, doble
   borde, biseles).
=================================================================== */

/* ===================================================================
   Fase B, punto 5: el botón "✨ Ask AI" de cada campo YA NO vive pegado
   al campo. Ahora es un botón circular (mismo lenguaje visual que la
   imagen de referencia que diste) que vive SIEMPRE fijo en la esquina
   inferior derecha del formulario — position:fixed hace que se quede
   ahí sin importar cuánto scroll hagas. wizard.js decide cuál botón(es)
   mostrar según el paso en el que estás (ver mostrarBotonesIAParaPaso
   en wizard.js): mueve el botón real del campo hasta esta pila, así
   nunca se pierden sus listeners ni su data-campo-ia.

   El texto original del botón (ej. "Fix with AI") se conserva en el
   HTML como accesibilidad/tooltip, pero se oculta visualmente
   (font-size:0) — así no hubo que tocar el texto de cada campo.
=================================================================== */
.pila-botones-ia-form {
  position: fixed;
  right: 1rem;
  bottom: 1.6rem;
  z-index: 150;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.7rem;
}

.boton-ia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  background: radial-gradient(circle at 32% 28%, #1c2e57 0%, #060a16 75%);
  border: 1px solid #6a5ff0;
  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);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.boton-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-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-ia:active { transform: translateY(1px); }

/* Punto 9: mientras un campo de corrección se está arreglando "en
   silencio" (sin ventana de chat), el botón muestra "…" y se
   deshabilita visualmente, para que quede claro que está trabajando. */
.boton-ia.boton-ia-cargando {
  opacity: 0.6;
  cursor: wait;
}
.boton-ia.boton-ia-cargando::before {
  content: "…";
  font-size: 1.2rem;
  background: none;
}

/* Punto 6: banner de título/año, distinto a las burbujas de chat y a
   las opciones clicables — usado en modo "estructurado" (Genre,
   Details, Trivia) para mostrar "[Título] (Año)" de forma más bonita,
   separado de los botones de opciones. */
.ia-banner-titulo {
  align-self: center;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  /* Opacidad subida (antes 0.32/0.22): a esa transparencia el color real
     dependía de qué hubiera detrás (--bg, que va de casi negro a casi
     blanco entre modos) — con texto blanco fijo, en Modo Claro se veía
     sobre un lila casi pastel, muy poco contraste. Con más cuerpo el
     morado domina siempre, sin importar el modo. */
  background: linear-gradient(180deg, rgba(139, 106, 232, 0.88), rgba(91, 63, 196, 0.8));
  border: 1px solid #8b6ae8;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin-bottom: 0.2rem;
  box-shadow: 0 0 14px rgba(139, 106, 232, 0.35);
}

.overlay-ia {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 8, 0.88);
  z-index: 400;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.overlay-ia.abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ia-ventana {
  width: 100%;
  max-width: 480px;
  height: 600px;
  max-height: 85vh;
  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 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.ia-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #8b6ae8;
  border-image: linear-gradient(90deg, rgba(139,106,232,0) 0%, #8b6ae8 50%, rgba(139,106,232,0) 100%) 1;
  flex-shrink: 0;
}

.ia-titulo {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--texto);
}

.ia-cerrar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--panel-borde-ext);
  background: var(--panel-grad-clara);
  color: var(--texto);
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
}
.ia-cerrar:hover { border-color: #8b6ae8; }

.ia-mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ia-burbuja {
  max-width: 85%;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.ia-burbuja-usuario {
  align-self: flex-end;
  background: linear-gradient(180deg, #8b6ae8, #5b3fc4);
  color: white;
  border: 1px solid var(--panel-borde-ext);
}

.ia-burbuja-asistente {
  align-self: flex-start;
  background: var(--superficie-clara);
  color: var(--texto);
  border: 1px solid var(--panel-borde-ext);
}

.ia-burbuja.ia-cargando {
  opacity: 0.6;
}

.ia-burbuja.ia-burbuja-error {
  border-color: var(--alerta-fuerte);
  color: #ffb3ab;
}

.ia-opciones {
  align-self: flex-start;
  max-width: 85%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: -0.2rem;
}

.ia-opcion-boton {
  text-align: left;
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  color: var(--texto);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.15s ease;
}
.ia-opcion-boton:hover { border-color: #8b6ae8; }

.ia-opcion-boton.ia-opcion-cargando {
  opacity: 0.6;
  cursor: wait;
}

.ia-opcion-boton.ia-opcion-usada {
  background: linear-gradient(180deg, #3fae74, #1f7a4c);
  color: white;
  cursor: default;
  box-shadow: var(--boton-relieve-activo);
}

/* Botón "Usar esta versión" del modo corrector — a propósito más
   grande y notorio que las opciones normales, ya que es la acción
   principal esperada dentro de ese chat. */
.ia-usar-version-boton {
  align-self: flex-start;
  max-width: 85%;
  margin-top: -0.2rem;
  background: linear-gradient(180deg, #3fae74, #1f7a4c);
  color: white;
  border: 1px solid var(--panel-borde-ext);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
}
.ia-usar-version-boton:hover { filter: brightness(1.1); }
.ia-usar-version-boton:disabled {
  opacity: 0.7;
  cursor: default;
  filter: none;
}

.ia-pie {
  display: flex;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--panel-borde-ext);
  flex-shrink: 0;
}

.ia-campo-mensaje {
  flex: 1;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ia-campo-mensaje:focus {
  outline: none;
  border-color: #8b6ae8;
}

.ia-boton-enviar {
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
}

/* ===================================================================
   SELECTOR VISUAL DE GALERÍA (TMDB/IGDB) — reutiliza el lenguaje visual
   del overlay de IA (.overlay-ia/.ia-ventana/.ia-cabecera/.ia-cerrar),
   pero más ancho y con su propio cuerpo/pie (grillas de miniaturas en
   vez de una conversación de chat). Ver js/selector-imagenes.js.
=================================================================== */
.selector-galeria-ventana {
  max-width: 960px;
  width: 100%;
  height: 80vh;
  max-height: 720px;
}

.selector-galeria-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.2rem 1.4rem;
}

/* Windows / tablet horizontal: Poster a la izquierda, Wallpaper a la
   derecha, uno al lado del otro. En pantallas angostas (móvil, tablet en
   vertical) se quedan apiladas — ver el grid-template-columns: 1fr de
   arriba. Los selectores de UNA sola sección (galería de escenas) nunca
   se dividen en 2 columnas, sin importar el ancho. */
@media (min-width: 820px) {
  .selector-galeria-cuerpo:not(.selector-galeria-cuerpo-unico) {
    grid-template-columns: 1fr 1fr;
  }
}

.selector-galeria-grupo {
  min-width: 0;
}

.selector-galeria-grupo-titulo {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--texto);
  margin-bottom: 0.6rem;
}

.selector-galeria-grid {
  --aspecto-galeria: 16/9;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.selector-galeria-item {
  position: relative;
  aspect-ratio: var(--aspecto-galeria);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--superficie-clara, #222);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.selector-galeria-item:hover { border-color: var(--acento-suave); }

.selector-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.selector-galeria-item .selector-galeria-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acento, #c0392b);
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.selector-galeria-item.seleccionada {
  border-color: var(--acento, #c0392b);
}

.selector-galeria-item.seleccionada .selector-galeria-check {
  opacity: 1;
  transform: scale(1);
}

.selector-galeria-mas {
  display: block;
  margin: 0.7rem auto 0;
  background: var(--panel-grad-clara);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.selector-galeria-mas:hover { border-color: var(--acento-suave); }

.selector-galeria-vacio {
  font-size: 0.82rem;
  color: var(--texto-tenue);
  font-style: italic;
}

.selector-galeria-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--panel-borde-ext);
  flex-shrink: 0;
}

.selector-galeria-estado {
  font-size: 0.78rem;
  color: var(--texto-tenue);
}

.selector-galeria-botones {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
}

/* ===================================================================
   REDISEÑO DEL WIZARD — "una pregunta por pantalla".
   Todo lo de aquí en adelante es NUEVO (ver plan de rediseño). Reutiliza
   los mismos tokens de color/superficie/borde que ya usa toda la app
   (--acento, --superficie, --panel-grad, etc.) — así el acento cambia
   solo con el tema de cada categoría (.tema-series/.tema-videogames/...)
   sin que ninguna regla de aquí tenga que tocarse.
=================================================================== */

/* Los pasos ocultos por una condición (Sí/No, archivo vs YouTube, etc.)
   se sacan del flujo por completo — el wizard calcula su animación
   horizontal según CUÁNTOS pasos están realmente visibles, así que un
   paso oculto no puede seguir ocupando un lugar en esa cuenta. */
.wizard-paso:not(.paso-visible) { display: none; }

/* Rediseño Quick/Complete: datos que TMDB ya llena solo (Título, Nombre,
   País, Género, Año, Cast, Version Type, Trailer) — siguen viviendo en el
   DOM tal cual (mismos ids, mismo JS de autofill/guardado) pero nunca son
   una pantalla navegable del wizard: no llevan la clase .wizard-paso, así
   que wizard.js nunca los cuenta como paso. Esta regla solo evita que se
   vean si por error quedaran fuera de .wizard-pista o alguien reordena el
   HTML — recomputarPasosVisibles() ni siquiera los toca. */
.wizard-datos-auto { display: none !important; }

/* ----- Topbar: botón de menú "Ir a..." (☰) ----- */
.boton-menu-wizard {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--panel-borde-ext);
  background: var(--panel-grad-clara);
  color: var(--texto);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.boton-menu-wizard:hover { border-color: var(--acento-suave); box-shadow: var(--boton-relieve), 0 0 10px var(--acento-glow); }

/* ----- Barra de progreso fina (protagonista, no el contador) ----- */
.wizard-progreso-envoltura {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wizard-progreso-fila-nombre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.wizard-progreso-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-tenue);
  letter-spacing: 0.2px;
}

.wizard-progreso-contador {
  font-size: 0.68rem;
  color: var(--texto-tenue);
  opacity: 0.65;
  white-space: nowrap;
}

.wizard-progreso-barra {
  height: 4px;
  border-radius: 3px;
  background: var(--superficie-clara);
  overflow: hidden;
}

.wizard-progreso-relleno {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acento), var(--acento-suave));
  box-shadow: 0 0 8px var(--acento-glow);
  transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ----- Pantalla de "una pregunta" — protagonista, centrada, con
   bastante aire alrededor. Los pasos que solo agrupan campos existentes
   (pastillas, textareas...) no necesitan este envoltorio: siguen usando
   .form-grupo tal cual ya funcionaba. ----- */
.pregunta-encabezado {
  max-width: 560px;
  margin: 0 auto 0.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pregunta-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--texto);
  margin: 0;
}

.pregunta-ayuda {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-tenue);
  margin: 0;
}

/* ----- Sí/No y tarjetas de opción única — auto-avanzan al tocarlas
   (wizard.js), así que se sienten como una sola acción, no dos pasos
   (elegir + confirmar). ----- */
.decision-si-no,
.decision-tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0.4rem auto 0;
}

/* BUG REAL encontrado en prueba de usuario: dentro de .wizard-paso
   (flex-direction:column), un hijo flex con solo "max-width" + "margin:
   0 auto" NO se estira — los márgenes automáticos en el eje transversal
   hacen que el navegador lo encoja a su contenido (shrink-to-fit) en vez
   de rellenar el ancho disponible. Una caja de imagen vacía (Poster/
   Wallpaper antes de elegir algo) no tiene contenido que le dé tamaño,
   así que colapsaba a unos pocos píxeles. "width:100%" en el propio
   hijo evita depender de "stretch" — así el centrado con margin:auto
   sigue funcionando sobre un ancho definido, nunca sobre "auto". */
.wizard-paso > .form-grupo {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.decision-boton {
  flex: 1 1 140px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.1rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--panel-borde-ext);
  background: var(--panel-grad-clara);
  color: var(--texto);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--boton-relieve);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  min-height: 56px;
}

.decision-boton-icono { font-size: 1.6rem; line-height: 1; }
.decision-boton-detalle { font-size: 0.74rem; font-weight: 400; color: var(--texto-tenue); }

.decision-boton:hover { border-color: var(--acento-suave); box-shadow: var(--boton-relieve), 0 0 10px var(--acento-glow); }
.decision-boton:active { transform: translateY(1px) scale(0.98); }

.decision-boton.activo {
  border-color: var(--acento-suave);
  color: white;
  background: linear-gradient(180deg, var(--acento-suave), var(--acento));
  box-shadow: var(--panel-sombra-suave), 0 0 14px var(--acento-glow);
}
.decision-boton.activo .decision-boton-detalle { color: rgba(255, 255, 255, 0.85); }

/* Fase C ("Add Season"): insignia "Already documented" sobre una
   temporada que ya aparece en alguna experiencia guardada — puramente
   informativa, nunca bloquea la selección. */
.decision-boton-insignia {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--acento-suave);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.decision-boton.activo .decision-boton-insignia {
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ----- Botón "Siguiente →" consistente, para pasos que no
   auto-avanzan (pastillas múltiples, texto libre...). ----- */
.paso-pie {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.boton-siguiente-paso {
  min-width: 200px;
  justify-content: center;
}

/* ----- Badge "Completado automáticamente" + restaurar ----- */
.badge-automatico {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: var(--acento-suave);
}

.badge-automatico-texto {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.badge-automatico-texto::before { content: "✓"; }

.badge-automatico-restaurar {
  background: none;
  border: 1px solid var(--borde-suave);
  color: var(--texto-tenue);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  cursor: pointer;
}
.badge-automatico-restaurar:hover { border-color: var(--acento-suave); color: var(--texto); }

/* ----- Panel lateral "Ir a..." ----- */
.panel-ir-a {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}
.panel-ir-a.oculto { display: none; }

.panel-ir-a-fondo {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.6);
  backdrop-filter: blur(2px);
}

.panel-ir-a-cuerpo {
  position: relative;
  width: min(380px, 92vw);
  height: 100%;
  background: var(--panel-grad);
  border-left: 1px solid var(--panel-borde-ext);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  gap: 0.9rem;
  overflow-y: auto;
}

.panel-ir-a-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.panel-ir-a-cabecera h3 { margin: 0; font-size: 1.05rem; color: var(--texto); }

.panel-ir-a-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-ir-a-grupo { display: flex; flex-direction: column; gap: 0.35rem; }

.panel-ir-a-grupo-titulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-tenue);
  padding: 0 0.2rem;
}

.panel-ir-a-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--panel-grad-clara);
  color: var(--texto);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.panel-ir-a-item:hover { border-color: var(--acento-suave); }
.panel-ir-a-item.activo { border-color: var(--acento-suave); background: rgba(var(--acento-suave-rgb), 0.14); }

.panel-ir-a-item-estado {
  font-size: 0.68rem;
  color: var(--texto-tenue);
  white-space: nowrap;
}
.panel-ir-a-item-estado.completo { color: var(--acento-suave); }

.panel-ir-a-vacio {
  color: var(--texto-tenue);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}

/* ----- Pantalla de revisión final ----- */
.pantalla-revision { display: flex; flex-direction: column; gap: 0.9rem; }

.revision-grupo {
  background: var(--panel-grad-clara);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: var(--panel-relieve);
}

.revision-grupo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.revision-grupo-titulo { font-size: 0.95rem; font-weight: 700; color: var(--texto); }

.revision-editar {
  background: none;
  border: 1px solid var(--borde-suave);
  color: var(--texto-tenue);
  border-radius: 8px;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.revision-editar:hover { border-color: var(--acento-suave); color: var(--texto); }

.revision-lista { display: flex; flex-direction: column; gap: 0.25rem; }

.revision-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--texto-tenue);
}
.revision-item.revision-item-completo { color: var(--texto); }
.revision-item-marca { width: 1.1rem; text-align: center; }

.revision-guardar-fila {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
}

#boton-guardar-revision.boton-guardar-final {
  min-width: 240px;
  justify-content: center;
  font-size: 1rem;
  padding: 0.9rem 1.6rem;
}

/* ----- Toast breve de éxito post-guardado (ficha final) ----- */
.toast-guardado-exito {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 12px);
  z-index: 500;
  background: var(--panel-grad-clara);
  border: 1px solid var(--acento-suave);
  color: var(--texto);
  padding: 0.8rem 1.3rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--panel-sombra-suave), 0 0 16px var(--acento-glow);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.toast-guardado-exito.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .pregunta-titulo { font-size: 1.2rem; }
  .decision-boton { flex: 1 1 45%; }
  .panel-ir-a-cuerpo { width: 100vw; }
}

/* ===================================================================
   Modal de confirmación centrado (Cancel/Exit del wizard) — mismo
   fondo con blur que .panel-ir-a-fondo, pero la tarjeta queda centrada
   en pantalla en vez de ser un panel lateral.
=================================================================== */
.modal-confirmacion {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-confirmacion.oculto { display: none; }

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

.modal-confirmacion-cuerpo {
  position: relative;
  width: min(400px, 92vw);
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: center;
}
.modal-confirmacion-cuerpo h3 { margin: 0; font-size: 1.1rem; color: var(--texto); }
.modal-confirmacion-cuerpo p { margin: 0; font-size: 0.88rem; color: var(--texto-tenue); line-height: 1.5; }

.modal-confirmacion-botones {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 0.4rem;
}
.modal-confirmacion-botones .boton { flex: 1; }

/* ===================================================================
   Rediseño Series (Fase D) — Custom Sections: tarjeta por cada sección
   creada por el usuario (nombre + selector de estructura + su editor
   correspondiente, mostrado condicionalmente). Mismo lenguaje visual
   que .pareja-contenedor/.episodio-favorito-contenedor.
   =================================================================== */
.custom-section-contenedor {
  position: relative;
  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;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.custom-section-contenedor .boton-quitar-imagen-galeria {
  top: 0.6rem;
  right: 0.6rem;
}
.custom-section-nombre {
  margin-bottom: 0.8rem;
}
.custom-section-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.custom-section-tipo-boton {
  min-height: auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
}
.custom-section-editor .form-textarea {
  min-height: 100px;
}
.custom-section-editor .zona-galeria-drop {
  margin-top: 0.8rem;
}
.custom-section-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}