/* ===================================================================
   movil.css — CAPA EXCLUSIVA DE CELULAR
   ===================================================================
   Se carga DE ÚLTIMA en todos los HTML. TODO su contenido vive dentro
   de  @media (max-width: 480px)  → jamás afecta tablet ni Windows.

   Reglas de convención (para que las tres versiones no se pisen):

   1. Aquí NO se diseña tablet ni escritorio. Solo celular (≤ 480 px).
      Dispositivo de referencia: Samsung Galaxy S23+ (~393 px de ancho CSS).

   2. Windows / tablet  →  celular:
      el celular HEREDA como base lo que ya hace tablet (los @media de
      layout.css/home.css/etc. que apuntan a 640/560/480). Este archivo
      solo SOBREESCRIBE lo que deba verse distinto en el teléfono.

   3. Celular  →  Windows / tablet:
      imposible que se filtre hacia arriba: todo está bajo max-width:480.

   4. Si en los archivos VIEJOS ajustas algo que es SOLO de tablet y no
      debe llegar al celular, acótalo con
         @media (min-width: 481px) and (max-width: 960px)
      (Claude te avisa cuándo hace falta.)

   5. No se ponen COLORES aquí (los maneja style.css + tema-claro.css).
      Este archivo es layout: tamaños, espaciados, columnas, tipografía.

   Secciones:  [BASE]  ·  [HOME]  ·  [CATÁLOGOS]  ·  [EXPERIENCE]  ·  [FICHA]
   =================================================================== */

@media (max-width: 480px) {

  /* ============================================================
     [BASE] — vale para todas las pantallas en celular
     ============================================================ */

  html {
    -webkit-text-size-adjust: 100%;   /* evita que Android infle el texto solo */
    text-size-adjust: 100%;
    /* En vertical la PÁGINA nunca debe poder moverse a los lados — solo los
       elementos internos (carruseles, etc.) se desplazan. `clip` recorta
       cualquier desborde horizontal SIN crear un contenedor de scroll (no
       rompe `position: sticky`, a diferencia de `overflow-x: hidden`). */
    overflow-x: clip;
  }
  body { overflow-x: clip; }


  /* ============================================================
     [HOME] — index.html  (grid de categorías + buscador universal)
     ============================================================ */

  /* Barra superior: buscador ancho arriba, almacenamiento + menú abajo
     (esto ya lo arma el @media 640 de home.css). Aquí solo se aprieta
     el espaciado para ganar alto de pantalla en el teléfono. */
  .buscador-universal-barra {
    padding: 0.9rem 0.9rem 0.4rem;
    gap: 0.6rem;
  }

  .buscador-universal-input {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
  }

  .home-header {
    padding: 0.6rem 1rem 1.2rem;
  }

  .home-header-icono {
    width: min(340px, 82vw);
    margin-bottom: 0.8rem;
  }

  .home-header .home-tagline {
    font-size: 0.62rem;
    letter-spacing: 2px;
    margin-top: 0.4rem;
  }

  /* Grid de categorías: 2 por fila en el teléfono (la última fila queda
     centrada sola por justify-content:center de .home-grid). El
     max-width:420 de home.css deja 1 sola columna — se prefiere 2 para
     no obligar a un scroll largo con 5 categorías. */
  .home-grid {
    gap: 0.8rem;
    padding: 0.6rem 0.9rem 3rem;
  }

  .home-tarjeta {
    flex: 0 0 calc((100% - 0.8rem) / 2);
    padding: 1.4rem 0.7rem 1.2rem;
    gap: 0.7rem;
    border-radius: 15px;
  }

  .home-icono {
    width: 52px;
    height: 52px;
    font-size: 1.7rem;
  }

  .home-tarjeta span {
    font-size: 0.95rem;
  }

  .home-tarjeta span::after {
    margin-top: 0.4rem;
  }


  /* ============================================================
     [CATÁLOGOS] — movies / series / videojuegos / books  (.html
     de lista): topbar, encabezado, fila de filtros y grid de
     pósters. Reglas compartidas por las 4 categorías.
     ============================================================ */

  /* --- Topbar: pasa a 2 filas (SOLO catálogos — la ficha tiene su
     propia topbar transparente más abajo, en [FICHA]) --------------
     Fila 1: [← Home]  ............  buscador
     Fila 2: selector Details/Experience + New + menú ⋮
     (en Windows/tablet sigue todo en una sola fila). */
  .pagina-lista .topbar {
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    gap: 0.5rem 0.6rem;
  }

  .pagina-lista .topbar > .boton {
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .topbar-buscar {
    flex: 1 1 120px;
    max-width: none;
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
  }

  .pagina-lista .topbar-acciones {
    order: 3;              /* baja a la segunda fila, debajo del buscador */
    flex: 1 1 100%;
    justify-content: space-between;   /* selector a la izq, New + ⋮ a la der: fila equilibrada, no flotando */
    gap: 0.5rem;
  }

  .selector-modo-vista button { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
  .topbar-acciones .boton-primario { padding: 0.4rem 0.9rem; font-size: 0.78rem; }
  .boton-menu-puntos { width: 34px; height: 34px; font-size: 1.2rem; }

  /* --- Encabezado + filtros: compactar el "apilado" de bandas ---
     En vertical se acumulan topbar(2 filas) + título + 6 píldoras de
     filtro + botón wallpaper antes de llegar al contenido. Se recortan
     los aires verticales y se aprietan las píldoras para que no se
     sienta amontonado. */
  .pagina-encabezado-lista { margin: 0.9rem 0.9rem 0; }
  .pagina-titulo-lista { font-size: 1.15rem; }
  .pagina-subtitulo-lista { font-size: 0.76rem; }
  .barra-filtros { margin: 0.4rem 0.9rem 0; }
  .filtros-categorias { gap: 0.4rem; padding: 0.3rem 0; }

  .filtro-categoria-boton { padding: 0.38rem 0.7rem; font-size: 0.76rem; gap: 0.3rem; }
  .filtro-categoria-icono { font-size: 0.8rem; }

  /* El botón de "vista wallpaper" vive en la misma fila que los filtros
     (.barra-filtros-fila, lo arma js/lista.js). En el teléfono no cabe
     al lado — baja a su propia línea, centrado y discreto bajo las
     píldoras. */
  .barra-filtros-fila { flex-wrap: wrap; justify-content: center; row-gap: 0.3rem; }
  .barra-filtros-fila .filtros-categorias { flex: 1 1 100%; }
  .barra-filtros-fila #boton-vista-wallpaper { margin-top: 0; transform: scale(0.9); }

  /* --- Grid de pósters: 2 por fila --------------------------- */
  .grid-posters {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    padding: 0.8rem 0.9rem 2rem;
  }

  /* Tarjeta más liviana: menos padding, la columna de banderas sin el
     filete vertical (en una tarjeta angosta robaba ancho al título y
     recargaba la vista), y el badge de rating sin el marco con glow. */
  .poster-info { padding: 0.55rem 0.6rem; gap: 0.45rem; }
  .poster-titulo { font-size: 0.82rem; }
  .poster-info-banderas { padding-left: 0.5rem; border-left: none; }
  .poster-bandera { font-size: 1rem; }
  .badge-rating {
    font-size: 0.68rem;
    padding: 0.12rem 0.45rem;
    box-shadow: inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.18);
  }

  /* Vista wallpaper (backdrop 16:9): 1 sola por fila, necesita el ancho. */
  body.vista-wallpaper .grid-posters { grid-template-columns: 1fr; }


  /* ============================================================
     [EXPERIENCE] — overlay cinematográfico en VERTICAL
     ============================================================
     El diseño de Experience asume pantalla apaisada: columna de datos
     a la izquierda + título centrado. En un teléfono vertical esas dos
     zonas se pisan (el quote atraviesa "WATCHED DATE"). Aquí se
     reordena SOLO para ≤480px:
       · título + quote arriba
       · Genre / Fecha / Rating apilados abajo del todo
       · imagen de fondo estable (sin el pan-zoom que la desencuadra)
     experience.css (Windows/tablet) queda intacto. */

  /* Fondo en Experience VERTICAL: la imagen se ve COMPLETA, sin recorte
     ni zoom (`contain`), y para que igual "abarque toda la pantalla" el
     hueco de los lados/arriba/abajo lo llena una copia BORROSA y oscura
     de la misma imagen (`::before` con `--exp-fondo-url`, lo pone
     experience.js). Nada de barras negras, nada de zoom. Se congela el
     pan/zoom animado. experience.css (Windows/tablet/horizontal) intacto. */
  .exp-capa-fondo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--exp-fondo-url, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-filter: blur(24px) brightness(0.62) saturate(1.15);
    filter: blur(24px) brightness(0.62) saturate(1.15);
    transform: scale(1.2);   /* tapa los bordes translúcidos del blur */
    pointer-events: none;
  }
  .exp-capa-fondo img {
    position: relative;
    z-index: 1;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    scale: none !important;
  }
  .exp-capa-fondo img.exp-panzoom {
    animation: none !important;
    transform: none !important;
    scale: none !important;
  }

  /* Título + quote: pegados arriba, ancho casi completo. El quote se
     limita a 5 líneas para que nunca alcance el bloque de abajo. */
  .exp-zona-titulo {
    top: 12%;
    max-width: 92vw;
  }
  .exp-titulo-texto { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .exp-titulo-quote {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Columna lateral → bloque anclado ABAJO, ancho completo, creciendo
     hacia arriba. Ya no ocupa toda la altura (era eso lo que la metía
     encima del título). */
  .exp-zona-lateral {
    left: 1.2rem;
    right: 1.2rem;
    top: auto;
    bottom: 1.4rem;
    max-width: none;
    justify-content: flex-end;
    gap: 0.75rem;
  }
  .exp-lateral-etiqueta { font-size: 0.68rem; margin-bottom: 0.15rem; }
  .exp-lateral-valor { font-size: 1rem; }


  /* ============================================================
     [FICHA] — páginas *-detalle: REDISEÑO MÓVIL CINEMATOGRÁFICO
     ============================================================
     Objetivo (pedido explícito del usuario, mockup de referencia):
       BACKDROP arriba a sangre → info superpuesta → degradado → fondo
       oscuro de la app.  NO "backdrop = tarjeta + info debajo".
     El backdrop es el MISMO `peli.fondo` de siempre; render.js lo expone
     además como `--hero-fondo-url` para poder usarlo aquí en un degradado
     vertical. js/movil-ficha.js reordena 3 cosas del hero (géneros a una
     fila propia, línea ★/año bajo el título, botones-espejo Trailer/
     Experience). Windows/tablet: intactos (todo bajo max-width:480 + los
     scripts no hacen nada fuera de celular). Books conserva su apilado
     propio (`.tema-books .hero-completo` gana por especificidad). */

  .pagina-detalle { position: relative; }
  .detalle-pelicula { padding: 0 0 2.5rem; max-width: none; }

  /* --- Topbar: FLOTA transparente sobre el backdrop y los controles se
     INTEGRAN a la imagen (texto/ícono blanco con sombra, sin píldora ni
     círculo) — así no tapan la vista del backdrop. Back izq · ⋮ der. */
  .pagina-detalle .topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.14) 55%, transparent 100%);
    border: none;
    box-shadow: none;
    padding: 0.7rem 0.7rem 1.7rem;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .pagina-detalle .topbar-acciones {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.3rem;
  }
  .pagina-detalle .topbar #boton-volver-lista {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.35rem 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.6);
  }
  .pagina-detalle .topbar .boton-menu-puntos {
    background: none;
    border: none;
    box-shadow: none;
    width: 40px;
    height: 40px;
    font-size: 1.45rem;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.6);
  }
  /* Trailer/Experience de la topbar → los reemplaza el botón-espejo del
     hero (js/movil-ficha.js). Los originales siguen vivos y funcionales,
     solo ocultos visualmente en celular. */
  .pagina-detalle .topbar #boton-trailer-topbar,
  .pagina-detalle .topbar #boton-experience-topbar,
  .pagina-detalle .topbar #boton-trailer-editar { display: none; }

  /* --- Hero: sin marco/tarjeta. El backdrop va en DOS capas:
       ::before = la IMAGEN a un alto ≈ 16:9 del ancho de la pantalla
                  (mínimo recorte, sin deformar, sin zoom exagerado)
       ::after  = el DEGRADADO, más alto, que la funde con el fondo. -- */
  .hero-completo {
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--bg, #0b0b0f) !important;
    isolation: isolate;
  }
  .hero-completo::before {                    /* BACKDROP — imagen */
    content: "" !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto !important;
    height: 56vw;            /* ≈ el alto de un frame 16:9 a lo ancho de la pantalla */
    min-height: 190px;
    max-height: 320px;
    border: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 0;
    pointer-events: none;
    background-image: var(--hero-fondo-url, none);
    background-size: cover;
    background-position: center var(--hero-fondo-pos, 50%);
    background-repeat: no-repeat;
    /* Sin corte duro abajo: la propia imagen se desvanece en su tercio
       inferior y se mezcla con el degradado / fondo. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .hero-completo::after {                     /* DEGRADADO — atmósfera + fundido */
    content: "" !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto !important;
    height: 62vh;
    min-height: 360px;
    max-height: 560px;
    border: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(6,8,14,0.14) 0%,
      rgba(6,8,14,0.02) 16%,
      rgba(6,8,14,0.14) 34%,
      rgba(6,8,14,0.52) 48%,
      rgba(6,8,14,0.86) 64%,
      var(--bg, #0b0b0f) 82%);
  }
  .hero-completo > .hero-overlay,
  .hero-completo > #hero-badges-contenedor,
  .hero-completo > .metadatos-sobre-imagen {
    position: relative;
    z-index: 1;
  }

  /* --- Overlay: el póster FLOTA, la info lo envuelve --------------- */
  .hero-completo .hero-overlay {
    display: flow-root;      /* contiene el float del póster */
    flex-direction: unset;
    align-items: unset;
    gap: 0;
    /* El póster sube hasta solapar la mitad inferior del backdrop. */
    padding: max(16vh, 108px) 1.1rem 0;
    min-height: 0;
    background: none;
  }
  .hero-completo .hero-poster {
    float: left;
    width: 39%;
    max-width: 160px;
    margin: 0 1rem 0.6rem 0;
    align-self: auto;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
      0 16px 42px rgba(0,0,0,0.6),
      0 0 26px rgba(255,224,190,0.10),
      0 0 0 1px rgba(255,255,255,0.06);
  }
  .hero-completo .hero-info { flex: none; }
  .hero-completo .hero-titulo {
    font-size: 1.65rem;
    line-height: 1.12;
    margin: 0 0 0.4rem;
  }

  /* Línea de rating (★ dorado + N/5) y línea de año — DEBAJO del título,
     antes del quote (las inserta js/movil-ficha.js). */
  .ficha-movil-rating {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.15rem;
    font-size: 0.92rem;
  }
  .fmr-estrellas { color: #ffc61a; letter-spacing: 2px; font-size: 0.95rem; }
  .fmr-vacias { color: rgba(255,255,255,0.26); }
  .fmr-num { color: rgba(255,255,255,0.62); font-size: 0.82rem; }
  .ficha-movil-anio {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.3px;
  }

  .hero-completo .hero-quote {
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0.35rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(var(--acento-suave-rgb, 147,197,253), 0.5);
    max-width: none;
  }
  .hero-completo .leyenda-historia-real { font-size: 0.72rem; opacity: 0.82; margin-top: 0.4rem; }

  /* Botones-espejo Experience / Trailer (los crea js/movil-ficha.js) —
     Experience relleno (acento), Trailer con contorno. */
  .ficha-movil-acciones {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0 0.2rem;
  }
  .ficha-movil-boton {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.68rem 0.5rem;
    border-radius: 11px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid;
    cursor: pointer;
    white-space: nowrap;
  }
  .ficha-movil-boton-secundario {
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--acento-suave-rgb, 147,197,253), 0.55);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .ficha-movil-boton-primario {
    background: var(--acento, #2563eb);
    border-color: color-mix(in srgb, var(--acento, #2563eb) 60%, white);
    color: #fff;
    box-shadow: 0 8px 22px rgba(var(--acento-rgb, 37,99,235), 0.45);
  }

  /* --- Géneros: fila propia a ancho completo bajo poster+info ------ */
  #hero-badges-contenedor.hero-badges-movil {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 1rem 1.1rem 0.3rem;
  }
  .hero-completo .hero-badges-movil .badge,
  .hero-completo .hero-badges-movil .badge-sub {
    font-size: 0.75rem;
    padding: 0.32rem 0.7rem;
    box-shadow: inset 0 0 0 1px rgba(var(--acento-suave-rgb), 0.3);
  }

  /* --- Datos secundarios: UNA card limpia (Country/Release/…/Rating) - */
  .hero-completo .metadatos-sobre-imagen {
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 1rem 1.1rem 0;
    margin: 0;
  }
  .metadatos-sobre-imagen .metadatos-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem 0;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 1rem 0.5rem;
  }
  .metadatos-campos > .campo-grupo {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0.7rem;
    text-align: center;
  }
  .metadatos-campos > .campo-grupo:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.09) !important;
  }
  /* Un campo que quede SOLO en su fila (nº impar de campos, típico: el
     Rating al final) ocupa el ancho completo y va centrado, como el
     mockup. */
  .metadatos-campos > .campo-grupo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: none !important;
  }
  .metadatos-sobre-imagen .campo {
    font-size: 0.62rem;
    letter-spacing: 0.7px;
    color: var(--acento-foto, #7ab8ff);
    opacity: 0.95;
  }
  .metadatos-sobre-imagen .valor {
    font-size: 0.82rem;
    margin-top: 0.3rem;
    line-height: 1.3;
    color: #fff;
    overflow-wrap: anywhere;
  }
  .metadatos-sobre-imagen .valor.estrellas { letter-spacing: 1.5px; font-size: 0.95rem; }

  /* --- OST / Music Player: su propia card, debajo de los datos ----- */
  .metadatos-sobre-imagen .music-widget-inline {
    width: 100%;
    max-width: none;
    margin: 0.9rem 0 0;
    border-radius: 16px;
    padding: 0.65rem 0.7rem;
  }

  /* --- Índice de secciones + trailer + secciones ------------------- */
  .indice-horizontal {
    margin: 0.6rem 0 0;
    padding: 0.7rem 1.1rem;
    gap: 0.5rem;
  }
  .indice-boton { padding: 0.5rem 0.9rem; font-size: 0.8rem; }

  .trailer-marco { margin: 1.1rem 1.1rem 0; width: auto; }

  .seccion {
    margin: 1.1rem 1.1rem 0;
    border-radius: 16px;
    /* Canal derecho: los 3 botones flotantes (índice ↑ / IA ✦ / música ▶)
       se apilan en el borde derecho; sin él el texto queda por debajo. */
    padding: 1.1rem 2.4rem 1.1rem 1.1rem;
  }
  .seccion h3 { font-size: 1.05rem; }

  .boton-flotante-indice,
  .boton-flotante-ia,
  .widget-musica-mini-play { right: 5px; }


  /* --- Ficha en MODO EDICIÓN (Unlock to edit) --------------------
     Se detecta por `.hero-campo-editable` (solo existe al editar).
     js/movil-ficha.js NO reordena en edición, así que aquí se acomoda
     el hero editable: póster centrado arriba (sin flotar), campos a
     ancho completo con caja visible, géneros al final, y los botones
     del wallpaper bajan para no chocar con la topbar. */
  .hero-completo .hero-wallpaper-controles {
    top: 3.3rem;
    right: 0.7rem;
  }
  .hero-completo .boton-mini-hero { width: 30px; height: 30px; font-size: 0.85rem; }

  /* Deja sitio ARRIBA del póster para la topbar + la fila de botones del
     wallpaper (que van en top:3.3rem). */
  .hero-completo:has(.hero-campo-editable) .hero-overlay {
    display: block;
    padding-top: 5.4rem;
  }
  .hero-completo:has(.hero-campo-editable) .hero-poster {
    float: none;
    width: 132px;
    margin: 0 auto 0.9rem;
  }
  .hero-completo:has(.hero-campo-editable) .hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .hero-completo:has(.hero-campo-editable) #hero-badges-contenedor { order: 5; }
  .hero-completo:has(.hero-campo-editable) .leyenda-historia-real { order: 6; }

  .hero-completo .hero-campo-editable {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(var(--acento-suave-rgb), 0.4);
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .hero-completo .hero-campo-editable:focus {
    border: 1px solid var(--acento-suave);
  }
  .hero-completo input.hero-titulo.hero-campo-editable { font-size: 1.45rem; }
  .hero-completo input.hero-quote.hero-campo-editable { font-size: 0.95rem; max-width: none; margin: 0; }

  /* Editor de secciones con texto + imágenes (Story Summary / Ending /
     Alternative Final, tanto en la ficha como en el wizard). formulario.css
     lo apila a ≤960 pero la columna de TEXTO no se estiraba a ancho
     completo (quedaba una caja angosta con el texto envuelto a 3 palabras
     por línea). */
  .story-flex-editar { align-items: stretch; }
  .story-flex-editar .story-columna-texto,
  .story-flex-editar .story-columna-imagenes {
    width: 100%;
    flex-basis: auto;
  }
  .story-flex-editar .story-columna-texto .form-textarea { width: 100%; }


  /* --- Series: acordeón de TEMPORADAS ("My Experiences") ---------- */
  /* Cabecera de cada temporada: la flecha + "Season N" en una línea y el
     rango de fechas debajo (antes el rango, largo y nowrap, aplastaba
     "Season N" a 2 líneas). */
  .experiencia-header { flex-wrap: wrap; row-gap: 0.15rem; padding: 0.85rem 2.4rem 0.85rem 0.9rem; }
  .experiencia-etiqueta { flex: 1 1 auto; }
  .experiencia-fechas {
    flex: 1 1 100%;
    padding-left: 1.65rem;   /* alinea bajo la etiqueta, pasada la flecha */
    font-size: 0.78rem;
    white-space: normal;
  }
  .experiencia-header .experiencia-rating { flex: 0 0 auto; font-size: 0.78rem; }

  /* Formulario de edición de la temporada (y mini-form "+ Add season"):
     los pares de campos (Started / Finished) se apilan en columna a
     ancho completo — en celular el flex-wrap dejaba las etiquetas
     estiradas con ~120px de hueco vacío debajo del input. */
  .experiencia-cabecera-edicion .form-grupo-fila,
  .mini-form-temporada .form-grupo-fila {
    flex-direction: column;
    gap: 0.7rem;
  }
  .experiencia-cabecera-edicion .form-grupo-fila > label,
  .mini-form-temporada .form-grupo-fila > label {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
  }
  .experiencia-cabecera-edicion .form-grupo-fila .form-input,
  .mini-form-temporada .form-grupo-fila .form-input { width: 100%; }

  /* El cuerpo del acordeón hereda el canal derecho de .seccion; sus
     sub-secciones no, así que se les da también para que el texto no
     quede bajo los botones flotantes. */
  .experiencia-cuerpo { padding: 1rem 2.4rem 1rem 1rem; }


  /* --- Best Scene (cover-flow de videos) en celular -----------------
     Con varios videos el marco central quedaba a ~190px de ancho y el
     reproductor de YouTube amontonaba título + canal + botón de play →
     casi imposible atinarle con el dedo. Ahora el marco ocupa TODO el
     ancho disponible, igual con 1 video que con varios (el usuario pidió
     que funcionen igual sin importar cuántos haya). La sección pierde su
     "canal derecho" solo para Best Scene (el video va centrado, no es
     texto que pueda quedar bajo los botones flotantes). */
  .seccion:has(.best-scene-carrusel) { padding-left: 0.8rem; padding-right: 0.8rem; }
  .best-scene-carrusel,
  .best-scene-carrusel.best-scene-unico-wrap { padding-left: 0; padding-right: 0; }

  /* Flechas ‹ › superpuestas a los bordes del video (el play de YouTube
     va centrado, así que no lo tapan), más chicas y translúcidas. */
  .best-scene-flecha {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
  }
  .best-scene-flecha-prev { left: 0.1rem; }
  .best-scene-flecha-next { right: 0.1rem; }

  /* NADA de "peek" lateral en celular: los items no-centro se ocultan del
     todo (sin translateX que se salga del viewport y haga scrollear la
     página). Se pasa de un video a otro con un crossfade + las flechas /
     swipe. Así 1 video y 2+ videos se ven y se comportan igual: un solo
     marco a pantalla completa. */
  .best-scene-item.rol-anterior,
  .best-scene-item.rol-siguiente,
  .best-scene-item.rol-oculto-izq,
  .best-scene-item.rol-oculto-der {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }
  /* La navegación por clic en el lateral ya no aplica (no hay laterales
     visibles) — quedan las flechas y el swipe. */


  /* --- Gallery (cover-flow de imágenes) en celular -----------------
     MISMO criterio que Best Scene arriba: NADA de "peek" lateral en
     celular (los laterales con translateX se salían del viewport y
     hacían scrollear la página — ese era el bug que teníamos). Aquí:
     un solo marco a pantalla completa, se cambia de imagen con las
     flechas / swipe / autoplay + crossfade por la transición de opacity
     que ya tiene .gv-item. */
  .seccion:has(.gv-coverflow) { padding-left: 0.8rem; padding-right: 0.8rem; }
  .galeria-visor .gv-coverflow,
  .galeria-visor .gv-coverflow.gv-unica { padding-left: 0; padding-right: 0; }

  .galeria-visor .gv-item.rol-anterior,
  .galeria-visor .gv-item.rol-siguiente,
  .galeria-visor .gv-item.rol-oculto-izq,
  .galeria-visor .gv-item.rol-oculto-der {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  .galeria-visor .gv-flecha {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
  }
  .galeria-visor .gv-flecha-prev { left: 0.1rem; }
  .galeria-visor .gv-flecha-next { right: 0.1rem; }


  /* ============================================================
     [WIZARD] — movie-nuevo / serie-nuevo / videojuego-nuevo /
     book-nuevo: el asistente de creación de fichas.
     ============================================================
     formulario.css ya tiene `@media (max-width:700px)` y algo de
     `@media 480px`. Aquí solo se afina para celular: aprovechar el
     ancho, centrar el contenido corto en la tarjeta (que comparte
     alto con el paso más alto del wizard → hueco enorme abajo) y
     compactar espaciados. NO se toca wizard.js ni la animación de
     deslizamiento. */

  /* Corredor de las flechas ‹ › más angosto → más ancho para el paso.
     (En celular además funciona el swipe con el dedo.) */
  .wizard-viewport-envoltura { padding: 0 1.35rem; }
  .wizard-nav-flecha { width: 28px; height: 28px; font-size: 0.95rem; top: 88px; }

  /* Resultados de la búsqueda TMDB/IGDB: el botón "+ Use this movie" es
     `nowrap` y aplastaba la info a ~3px → el título quedaba DEBAJO del
     botón. En celular la tarjeta se apila: póster + título arriba, botón
     a ancho completo en su propia línea. */
  .tmdb-resultado-item { flex-wrap: wrap; row-gap: 0.5rem; }
  .tmdb-resultado-info { flex: 1 1 120px; min-width: 100px; }
  .tmdb-resultado-titulo { overflow-wrap: anywhere; }
  .tmdb-boton-usar { flex: 1 1 100%; text-align: center; justify-content: center; }

  .wizard-paso { padding: 1.4rem 1.1rem 1.6rem; }

  /* Suelo de altura para el visor: en celular cada paso usa su propio
     alto (wizard.js), pero una medición prematura durante la carga podía
     dejar la tarjeta demasiado baja un instante. Este mínimo evita ese
     parpadeo sin volver al hueco enorme de antes. */
  .wizard-viewport { min-height: 30vh; }

  /* Espaciados y tipografía más compactos */
  .wizard-contenedor { padding: 0.9rem 0.5rem; gap: 0.8rem; }
  .wizard-progreso-envoltura { padding: 0 1rem; }
  .pregunta-titulo { font-size: 1.2rem; }
  .pregunta-encabezado { margin-bottom: 0.2rem; }

  /* Tarjetas de decisión (Quick/Complete, Sí/No, Optional Sections…) */
  .decision-tarjetas { gap: 0.6rem; }
  .decision-boton { padding: 0.9rem 0.7rem; }
  .decision-boton-icono { font-size: 1.4rem; }

  /* Topbar del wizard: Cancel izq · Save + ☰ der, compacto */
  .pagina-formulario .topbar { padding: 0.65rem 0.7rem; }
  .pagina-formulario .topbar .boton { padding: 0.42rem 0.8rem; font-size: 0.76rem; }
  .topbar-acciones-wizard { gap: 0.4rem; }
  .boton-menu-wizard { width: 38px; height: 38px; }

  /* Los campos con max-width inline (220/320/420/480/640px) ya caben;
     solo se les quita el aire lateral sobrante. */
  .wizard-paso > .form-grupo,
  .wizard-datos-auto > .form-grupo { width: 100%; }

  /* Panel "Ir a…" y modal de cancelar: casi pantalla completa */
  .panel-ir-a-cuerpo { width: 100%; max-width: none; border-radius: 16px 16px 0 0; }
  .modal-confirmacion-cuerpo { width: calc(100vw - 1.6rem); max-width: none; }

  /* FAB del asistente de IA general del wizard: a la esquina */
  .pila-botones-ia-form { right: 8px; bottom: 8px; }


  /* ============================================================
     [WISHLIST · LISTAS · SAGAS] — pantallas del menú ⋮ de Home
     ============================================================ */

  /* Barra de pestañas (Movies/Series/K-Dramas/Videogames/Books): 5 tabs
     en 393px no caben con etiqueta completa + contador → salían como
     "MOV…", "SERI…". Se pasa a SCROLL HORIZONTAL con la etiqueta entera
     y el tab activo a la vista. */
  .wishlist-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
  }
  .wishlist-tabs::-webkit-scrollbar { display: none; }
  .wishlist-tab {
    flex: 0 0 auto;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    padding: 0.7rem 0.85rem;
  }
  .wishlist-tab > span:first-child { overflow: visible; text-overflow: clip; }
  .wishlist-tab-count { min-width: 1.05rem; height: 1.05rem; font-size: 0.58rem; }

  /* Listas: la tarjeta sola ya no queda a media pantalla — `auto-fit`
     la estira; con 2+ listas vuelve a 2 columnas. */
  .listas-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  /* Sagas: hitos un poco más chicos → se ven ~3 por franja. */
  .saga-hito { width: 112px; }
  .saga-bloque-nombre { font-size: 1.25rem; }


  /* ============================================================
     [MODALES] — Asistente de IA · Selector visual de imágenes ·
     Lightbox. En Windows/tablet son ventanas centradas con marco;
     en el teléfono ocupan la pantalla completa (más área útil para
     el chat / las grillas de miniaturas / la foto ampliada).
     ============================================================ */

  /* Asistente de IA y Selector de galería comparten .overlay-ia +
     .ia-ventana. A pantalla completa, sin marco ni bordes redondeados. */
  .overlay-ia { padding: 0; }
  .overlay-ia .ia-ventana {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ia-cabecera { padding: 0.75rem 0.9rem; }
  .ia-cabecera .ia-titulo { font-size: 0.85rem; }
  .ia-cerrar { width: 32px; height: 32px; flex-shrink: 0; }
  .ia-mensajes { padding: 0.9rem; }
  .ia-burbuja, .ia-opciones { max-width: 92%; }
  .ia-pie { padding: 0.7rem 0.8rem; }

  /* Selector de imágenes: grilla de 2 miniaturas por fila en vez de
     los 240px mínimos de escritorio (a ese tamaño solo cabía 1 y
     obligaba a un scroll larguísimo). */
  .selector-galeria-cuerpo { padding: 0.9rem; gap: 1rem; }
  .selector-galeria-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px;
  }
  .selector-galeria-item .selector-galeria-check { width: 24px; height: 24px; }
  .selector-galeria-subida-boton { width: 100%; text-align: center; }

  /* Lightbox: la foto casi a sangre; el botón ✕ se mete DENTRO del
     marco (fuera se salía de la pantalla en el borde). */
  .lightbox-overlay { padding: 0.5rem; }
  .lightbox-marco {
    max-width: 96vw;
    max-height: 92vh;
    padding: 8px;
  }
  .lightbox-marco img { max-height: calc(92vh - 16px); }
  .lightbox-cerrar { top: 4px; right: 4px; }


  /* ============================================================
     [TRÁILER] — recorte de tráiler + buscador de YouTube
     (paso del wizard y modo edición de la ficha).
     ============================================================
     La lista de resultados reutiliza .tmdb-resultado-item, que ya
     se apila arriba en [WIZARD]. Aquí se ensancha la miniatura de
     VIDEO a todo el ancho (la de 140px era muy chica para juzgar un
     tráiler, y como iframe de preview quedaba minúscula) y se dejan
     respirar los controles del mini-reproductor de recorte. */
  .tmdb-resultado-poster.tmdb-resultado-poster-video {
    flex: 1 1 100%;
    width: 100%;
  }

  .buscar-web-fila { flex-wrap: wrap; }

  .trailer-form-yt-host { max-width: none; }
  .trailer-form-controles { flex-wrap: wrap; }
  .trailer-form-tiempo { white-space: normal; }
  .trailer-form-marcas .boton { flex: 1 1 auto; }
  .trailer-seleccionado-cabecera { gap: 0.4rem; }
  .trailer-seleccionado-acciones { width: 100%; }
  .trailer-seleccionado-acciones .boton { flex: 1 1 auto; text-align: center; }


  /* ============================================================
     [NAV MÓVIL] — barra de navegación inferior fija (js/nav-movil.js)
     ============================================================
     Solo existe cuando js/nav-movil.js añade `body.con-nav-movil`, y
     ese script solo corre bajo esta misma media query. Vive en las
     pantallas de primer nivel (index · movies · series · videojuegos ·
     books · buscar · wishlist · listas · sagas); NUNCA en *-detalle ni
     *-nuevo. 5 pestañas: Inicio · Buscar · [＋ Nuevo] · Deseados · Ajustes. */

  /* La barra es "chrome": color FIJO (azul eléctrico, la firma de la app
     y el acento por defecto de :root), no sigue la categoría — así se
     mantiene estable al moverte entre pantallas. Tokens de tema
     (--superficie / --texto-tenue / --panel-borde-ext) para que
     funcione en Modo Claro y Oscuro. */
  .nav-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;                  /* sobre el contenido y headers; bajo los modales de página (400+) */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    /* padding lateral con safe-area (pantallas curvas / gestos) para que
       el último ítem (Ajustes) nunca quede recortado. El padding-bottom
       generoso (0.85rem) deja aire bajo las etiquetas aunque el navegador
       tenga barra inferior propia o Android no reporte safe-area. */
    padding:
      0.35rem
      max(0.4rem, env(safe-area-inset-right, 0px))
      calc(0.85rem + env(safe-area-inset-bottom, 0px))
      max(0.4rem, env(safe-area-inset-left, 0px));
    /* Fondo OPACO y sólido (sin backdrop-filter): en algunos navegadores
       Android el blur dejaba ver el contenido a través de la barra. */
    background: var(--superficie, #0b0b0f);
    border-top: 1px solid var(--panel-borde-ext, rgba(128, 128, 128, 0.25));
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.45);
  }

  .nav-movil-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    padding: 0.4rem 0.2rem 0.3rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--texto-tenue, #8a8a8a);
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-movil-icono { width: 24px; height: 24px; display: block; }
  /* overflow visible: el trazo del engranaje de "Ajustes" llega al borde
     del viewBox y sin esto se veía cortado en los lados. */
  .nav-movil-icono svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .nav-movil-etq {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }
  .nav-movil-item.activo { color: #2f7ff6; }

  /* "Nuevo": botón central circular, elevado por encima de la barra. */
  .nav-movil-centro {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  .nav-movil-centro .nav-movil-icono {
    width: 46px; height: 46px;
    margin-top: -22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border: 3px solid var(--superficie, #0b0b0f);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
  }
  .nav-movil-centro .nav-movil-icono svg { width: 22px; height: 22px; }

  /* Hueco abajo para que la barra (~67px + safe-area) no tape el último
     contenido — con margen de sobra para no quedar pegado. */
  body.con-nav-movil { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  /* FAB de página (selector aleatorio de Wishlist) → por encima de la barra. */
  body.con-nav-movil .wishlist-fab {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* Home: el buscador universal de arriba ya no hace falta (está la
     pestaña Buscar). La barra se colapsa a solo el indicador de
     almacenamiento; el menú ⋮ (Wishlist/Listas/Sagas/idioma/tema) también
     sobra — todo eso vive ahora en la barra o en el sheet de Ajustes. */
  body.con-nav-movil .buscador-universal-barra .buscador-universal-envoltura,
  body.con-nav-movil .buscador-universal-barra .menu-opciones { display: none; }
  body.con-nav-movil .buscador-universal-barra {
    grid-template-columns: 1fr;
    grid-template-areas: "almacenamiento";
    padding: 0.7rem 1rem 0.2rem;
  }

  /* Página Buscar (buscar.html): el campo a ancho completo. */
  .buscar-pagina-barra { padding: 0.6rem 0.9rem 0; }
  .buscar-pagina-barra .buscador-universal-envoltura { width: 100%; }
  .buscar-pagina-barra .buscador-universal-input { text-align: left; }

  /* ---- Bottom sheets de Nuevo / Ajustes ---- */
  .nav-sheet-overlay {
    position: fixed; inset: 0;
    z-index: 300;                  /* por encima de la propia barra (200) */
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .nav-sheet-overlay.visible { opacity: 1; }
  .nav-sheet-fondo {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .nav-sheet {
    position: relative;
    width: 100%;
    background-color: var(--superficie, #14141a);
    background-image: var(--panel-grad, none);
    border-top: 1px solid var(--panel-borde-ext, rgba(128, 128, 128, 0.3));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.2s ease;
  }
  .nav-sheet-overlay.visible .nav-sheet { transform: translateY(0); }
  .nav-sheet-tirador {
    width: 38px; height: 4px;
    border-radius: 2px;
    background: var(--texto-tenue, rgba(128, 128, 128, 0.5));
    opacity: 0.5;
    margin: 0.3rem auto 0.7rem;
  }
  .nav-sheet-titulo {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--texto, #fff);
  }
  .nav-sheet-filas { display: flex; flex-direction: column; gap: 0.35rem; }
  .nav-sheet-grupo {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-tenue, rgba(128, 128, 128, 0.7));
    padding: 0.4rem 0.2rem 0.15rem;
  }
  .nav-sheet-sep { height: 1px; background: var(--borde-suave, rgba(128, 128, 128, 0.2)); margin: 0.4rem 0; }
  .nav-sheet-fila {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.85rem 0.7rem;
    background: var(--superficie-clara, rgba(128, 128, 128, 0.12));
    border: 1px solid var(--borde-suave, rgba(128, 128, 128, 0.2));
    border-radius: 12px;
    color: var(--texto, #fff);
    font: inherit;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
  }
  .nav-sheet-fila:active { border-color: #2f7ff6; }
  .nav-sheet-emoji { font-size: 1.15rem; width: 1.5rem; text-align: center; flex-shrink: 0; }

}