/* film-overrides.css · tablero de pelicula
   ---------------------------------------------------------------------------
   SOLO los ajustes propios de la pelicula que el sistema del DNA no cubre.
   Aqui NO van tokens, NO va layout de aplicacion y NO se reescriben componentes:
   eso vive en dashboard.css, que el build copia entero con su huella comparada.

   Reglas que este archivo no puede violar:
     - Cero borde grueso decorativo (2px o mas) ni nada que lo aparente.
     - Cero efecto al pasar por encima en tarjetas, pestanas y cajas.
     - Cero antetitulo sobre los titulos.
     - Contraste WCAG AA por instancia, en claro Y en oscuro.
   --------------------------------------------------------------------------- */

/* --- 1. Arreglos obligatorios del kit ------------------------------------- */

/* El combo ghost + primary queda ilegible al pasar por encima: el hover de ghost
   pone fondo claro y el color de primary sigue claro. Se corrige aqui, nunca en
   el CSS compartido. */
.btn-ghost.btn-primary:hover{background:var(--ink);color:var(--surface)}

/* La pildora hereda el color del contenedor, y dentro de una celda de tabla ese
   color es el atenuado: sobre el fondo de la propia pildora se queda en 4,34 y no
   llega a AA. Lleva su color, no el que le toque por herencia. */
.chip{color:var(--text)}

/* Etiquetas del mismo sistema, misma capitalizacion. El kit pinta unas en
   versalitas y la variante suave en caja normal, asi que en la misma fila
   convivian COMPLETO y "En curso". Todas en caja normal, que es el criterio de
   la casa, y se audita el text-transform COMPUTADO, no el texto del marcado. */
.tag{text-transform:none;letter-spacing:.005em;font-size:var(--fs-xs)}

/* Estado marcado dentro de una tabla: el ghost del kit no distingue el si del
   no, y la fila entera depende de eso. */
.data-table .btn-ghost{white-space:nowrap}
.data-table .btn-ghost.is-on{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}
.data-table .btn-ghost.is-on:hover{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}

/* La tarjeta del kit cambia de borde al pasar por encima, y eso esta vetado.
   Se neutraliza sin tocar el archivo compartido. */
.card:hover{border-color:var(--rule)}
html[data-theme="dark"] .card:hover{border-color:var(--surface-strong)}
/* Y la animacion de flotar de los indicadores, que es el mismo efecto por otro
   nombre. */
.floaty:hover,.stat:hover{animation:none;transform:none}

/* --- 2. Titulos y bloques -------------------------------------------------- */
.film-h{margin:var(--sp-19) 0 var(--sp-12);font-size:var(--fs-h2)}
.film-h:first-child{margin-top:var(--sp-5)}
.film-sub{margin:-6px 0 var(--sp-11);font-size:var(--fs-sm);max-width:70ch}
.film-hero-tags{margin-top:var(--sp-13)}
.film-card-wide{margin-top:var(--sp-13)}
.film-card-wide .card__d{margin-top:var(--sp-7)}
.film-quote{color:var(--text-dim);font-size:var(--fs-sm);line-height:var(--lh-lectura);margin:var(--sp-7) 0}
.film-doc{margin-top:var(--sp-17);scroll-margin-top:78px}
.film-doc h3,.film-doc h4{margin:var(--sp-16) 0 var(--sp-7)}
.film-doc p{margin:var(--sp-7) 0;line-height:var(--lh-lectura)}
.film-doc .clean-list{margin:var(--sp-9) 0}
.film-doc pre.prompt-box{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:var(--fs-sm);line-height:var(--lh-normal)}

/* --- 3. Fotograma de la tarjeta ------------------------------------------- */
/* La imagen ocupa el ANCHO COMPLETO de la tarjeta aunque se recorte. Ampliar es
   una accion aparte, con lightbox al hacer clic, nunca franjas de fondo a los
   lados. */
/* La relacion de aspecto la pone el renderer con la REAL de cada pieza (2:3 de un
   retrato, 16:9 de un plano, 1:1 de un objeto): asi la caja no decapita al
   retrato ni estira el panoramico. */
.film-frame{position:relative;z-index:0;width:100%;overflow:hidden;border-radius:var(--r-in);
  background:var(--surface-alt);margin-bottom:var(--sp-11);display:block}
/* Dentro de una tarjeta, la imagen sale del relleno y llega a los dos bordes:
   304 de tarjeta y 267 de imagen no es ancho completo, son 18 px de fondo a cada
   lado. Las esquinas de arriba toman el radio de la tarjeta. */
.card>.film-frame:first-child{margin:-18px -18px var(--sp-11);width:calc(100% + 36px);
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.film-frame img,.film-frame video{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.film-frame--vacio{display:flex;align-items:center;justify-content:center;min-height:110px}
.film-hueco{font-size:var(--fs-xs);color:var(--text-dim);letter-spacing:.04em;padding:0 var(--sp-11);text-align:center}

/* El boton de estado va SOBRE la imagen, esquina inferior derecha, a 8 px de los
   bordes. En el pie de la tarjeta queda a distinta altura en cada una segun lo
   larga que sea la descripcion y la rejilla se ve descuadrada. El fondo es opaco
   para no depender de la foto que haya debajo.

   SU COLOR YA NO SE ESCRIBE AQUI (2026-08-11). El boton `.stbtn` subio al sistema de
   diseno compartido (assets/dashboard-kit/components.css), porque el mismo boton se
   usa en los ocho tableros y su estado de raton encima estaba roto en tema oscuro:
   se arreglaba en una copia y seguia mal en las otras siete. Aqui solo queda DONDE
   se coloca, que si es propio de esta pieza. */
.film-frame .stbtn{position:absolute;right:8px;bottom:8px;z-index:1}

/* --- Caja de prompt desplegable ------------------------------------------- */
/* Cerrada por defecto. La cabecera lleva el titulo, cuanto ocupa y el boton de
   copiar, asi que se puede copiar sin abrir. Abrirla es para leer. */
.film-prompt{margin:0 0 var(--sp-12);border-radius:var(--r-in);background:var(--surface);
  border:var(--hair-soft);overflow:hidden}
/* La cabecera SE PARTE en dos filas cuando la tarjeta es estrecha. Es la unica
   salida buena de las tres que hay:
     - Sin nada, el titulo se pica en vertical, una palabra por linea (el fallo
       conocido numero 156).
     - Con `min-width:0` y recorte, el titulo se encoge hasta CERO de ancho y
       desaparece, y encima el boton de copiar se sale de la caja. Medido: 0
       pixeles de ancho.
     - Partiendola, el titulo se lleva su propia linea entera y debajo van la
       cuenta de palabras y el boton. Nada se pica y nada se pierde. */
.film-prompt-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  padding:var(--sp-10) var(--sp-12);cursor:pointer;list-style:none;user-select:none}
.film-prompt-head::-webkit-details-marker{display:none}
.film-prompt-t{font-weight:var(--w-max);font-size:var(--fs-sm);color:var(--ink);
  flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
.film-prompt-n{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
/* El boton no se sale de la caja aunque el rotulo sea largo. */
.film-prompt-head .film-copy{margin-left:auto;flex:0 0 auto;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film-prompt-chev{display:inline-flex;color:var(--muted);flex:0 0 auto}
.film-prompt-chev .ico{width:16px;height:16px;transition:transform var(--mov-rapido) ease}
.film-prompt[open] .film-prompt-chev .ico{transform:rotate(180deg)}
.film-prompt .prompt-box{margin:0;border:0;border-top:var(--hair-soft);border-radius:0;
  background:transparent;max-height:none}
.film-prompt-pie{display:flex;justify-content:flex-end;padding:0 var(--sp-12) var(--sp-11)}
.film-prompt-head:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* --- Barra de anclas: una fila, con flechas -------------------------------- */
/* La fila NUNCA se parte en dos: al ser fija taparia los titulos. Si no cabe,
   se desplaza a lo ancho, y las flechas avisan de que hay mas. */
/* La barra va FIJA arriba, justo debajo del cabecero, y acompaña al desplazarse.
   Sin eso, en una vista de veinte bloques se pierde de vista en el primer
   desplazamiento y el resto del recorrido se hace a ciegas. El `top` la coloca
   bajo el cabecero, que mide 60 píxeles y también va fijo. El fondo opaco es
   obligatorio: si no, el contenido se lee a través de ella al pasar por debajo.
   Ojo al ancestro con `overflow` recortado, que mata el `position:sticky` de
   cualquier descendiente sin dar ningún error. */
.film-anchors-wrap{position:sticky;top:60px;z-index:var(--capa-pegado);display:flex;align-items:center;gap:4px;
  margin:0 0 var(--sp-13);padding:var(--sp-7) 0;background:var(--bg)}
/* El título al que lleva un ancla no puede quedar tapado por la propia barra. */
.film-subject,.film-doc,.film-anchor-target{scroll-margin-top:120px}
.film-anchors{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;flex:1 1 auto;padding:var(--sp-1) 0}
.film-anchors::-webkit-scrollbar{display:none}
.film-anchors .chip{flex:0 0 auto}
.film-anchors-arrow{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:var(--r-pill);background:var(--surface);
  border:var(--hair-soft);color:var(--ink);cursor:pointer}
.film-anchors-arrow:hover{border-color:var(--brand)}
.film-anchors-arrow:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.film-anchors-arrow[hidden]{display:none}
.film-anchors-arrow .ico{width:16px;height:16px}

/* La seccion a la que se acaba de saltar se marca un momento: con el movimiento
   animado, el ojo necesita saber donde ha aterrizado. */
.film-recien{animation:film-aterriza 1.6s ease-out 1}
@keyframes film-aterriza{
  0%{box-shadow:0 0 0 3px var(--nota-line)}
  100%{box-shadow:0 0 0 3px transparent}
}
@media (prefers-reduced-motion: reduce){
  .film-recien{animation:none}
}

/* --- Orden de generacion: el aviso que va delante del prompt --------------- */
/* Dos estados y dos lecturas distintas. Bloqueado (el ancla no existe todavia):
   ambar, porque es una parada, no un detalle. Con referencia disponible: violeta
   de marca, porque es una instruccion de como hacerlo bien. Ninguno de los dos
   usa banda lateral gruesa: el fondo tenido y el icono ya los separan. */
.film-ref{display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--sp-11);padding:var(--sp-11) var(--sp-12);
  border-radius:var(--r-in);background:var(--nota-bg);border:var(--hair-soft);
  border-color:var(--nota-line);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--ink)}
.film-ref .ico{width:18px;height:18px;flex:0 0 auto;margin-top:var(--sp-1);color:var(--tag-a)}
.film-ref strong{font-weight:var(--w-max)}
.film-ref .chip{margin-left:var(--sp-5);vertical-align:baseline}
html[data-theme="dark"] .film-ref{background:var(--nota-bg);border-color:var(--nota-line)}
html[data-theme="dark"] .film-ref .ico{color:var(--nota-ico)}

.film-ref--bloq{background:var(--bloq-bg);border-color:var(--bloq-line)}
.film-ref--bloq .ico{color:var(--bloq-ico)}
html[data-theme="dark"] .film-ref--bloq{background:var(--bloq-bg);border-color:var(--bloq-line)}
html[data-theme="dark"] .film-ref--bloq .ico{color:var(--bloq-ico)}

/* --- Responsable de la pieza ---------------------------------------------- */
/* Desplegable propio, no el <select> nativo. El nativo pinta su lista con los
   colores del sistema operativo: en oscuro salia una lista BLANCA con letra
   clara, ilegible, y encima no admite el brand. Este usa los mismos tokens que
   el resto del tablero, asi que se ve igual en las dos pieles. */
.film-resp{position:relative;display:inline-flex;align-items:center;gap:10px;
  margin:0 0 var(--sp-11);max-width:100%}
.film-resp-k{font-size:var(--fs-sm);letter-spacing:var(--ls-rotulo);color:var(--muted);white-space:nowrap}
.film-resp-btn{display:inline-flex;align-items:center;gap:8px;
  padding:var(--sp-6) var(--sp-11);border-radius:var(--r-in);background:var(--surface-alt);
  border:var(--hair-soft);color:var(--muted);font:inherit;font-size:var(--fs-sm);
  cursor:pointer;line-height:var(--lh-subtitulo)}
.film-resp-btn:hover{border-color:var(--brand)}
.film-resp-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.film-resp-val{white-space:nowrap}
.film-resp-chev{width:14px;height:14px;flex:0 0 auto;transition:transform var(--mov-rapido) ease}
.film-resp.is-open .film-resp-chev{transform:rotate(180deg)}
/* Asignada: el nombre pesa mas que la etiqueta, que es el dato que se busca al
   barrer la rejilla. */
.film-resp.is-set .film-resp-btn{background:var(--puesto-bg);
  border-color:var(--puesto-line);color:var(--ink);font-weight:var(--w-fuerte)}
[data-theme="dark"] .film-resp.is-set .film-resp-btn{background:var(--puesto-bg);
  border-color:var(--puesto-line)}

.film-resp-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:var(--capa-menu);
  min-width:11rem;padding:var(--sp-5);border-radius:var(--r-in);
  background:var(--surface);border:var(--hair-soft);
  box-shadow:0 10px 30px var(--shade-soft);display:flex;flex-direction:column;gap:2px}
[data-theme="dark"] .film-resp-menu{background:var(--surface);border-color:var(--veil-light);
  box-shadow:0 12px 34px var(--shade)}
.film-resp-menu[hidden]{display:none}
.film-resp-opt{text-align:left;padding:var(--sp-7) var(--sp-9);border:0;border-radius:calc(var(--r-in) - 2px);
  background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-md);cursor:pointer}
.film-resp-opt:hover{background:var(--surface-alt)}
[data-theme="dark"] .film-resp-opt:hover{background:var(--veil-light)}
.film-resp-opt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.film-resp-opt.is-on{background:var(--tag-a);color:var(--on-accent);font-weight:var(--w-fuerte)}
.film-resp-opt.is-on:hover{background:var(--tag-a);color:var(--on-accent)}
[data-theme="dark"] .film-resp-opt.is-on{background:var(--tag-a);color:var(--on-accent)}
[data-theme="dark"] .film-resp-opt.is-on:hover{background:var(--tag-a);color:var(--on-accent)}

/* En la cabecera de una ficha, responsable y boton comparten fila y se bajan
   juntos cuando no caben, en vez de dejar el boton huerfano arriba. */
.film-ficha-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.film-ficha-acc .film-resp{margin:0}
/* Dentro de una tabla el menu no puede recortarse contra la celda. */
.data-table td .film-resp{margin:0}

/* El chip de un elemento ya marcado como hecho va en el MISMO violeta del boton
   de estado. Asi la lista de elementos de una toma se lee de un vistazo: lo
   violeta esta resuelto y no hay que abrirlo, lo demas falta. Blanco sobre
   #5B34C0 da 8,2:1, muy por encima del minimo, y en oscuro se aclara el fondo
   para no perder contraste contra la superficie. */
.chip.film-el.is-done{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a);font-weight:var(--w-fuerte)}
.chip.film-el.is-done:hover{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}
/* En oscuro el texto sigue siendo BLANCO. Un violeta claro con letra negra se
   lee como un boton apagado, justo lo contrario de lo que marca. #6D45D6 con
   blanco da 5,6:1, de sobra para AA. */
[data-theme="dark"] .chip.film-el.is-done{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}
[data-theme="dark"] .chip.film-el.is-done:hover{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}

/* --- 4. Minigaleria y galeria de la ficha --------------------------------- */
/* Se ven todas las fotos de la pieza sin abrir la ficha. Las que faltan dejan su
   hueco a la vista en vez de desaparecer. */
.film-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 var(--sp-11)}
.film-thumb{width:54px;height:54px;border-radius:var(--r-in);overflow:hidden;padding:0;
  background:var(--surface-alt);border:var(--hair-soft);flex:0 0 auto;cursor:zoom-in}
.film-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.film-thumb--vacio{cursor:default;background:repeating-linear-gradient(135deg,
  var(--surface-alt) 0 6px,var(--surface) 6px 12px)}
.film-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:var(--sp-12) 0 var(--sp-14)}
.film-gallery .film-thumb{width:100%;height:96px}

/* --- 5. Lightbox ----------------------------------------------------------- */
/* OJO AL SELECTOR, y esto costo que el CEO viera el visor pegado a los bordes.
   El elemento lleva el identificador `lb`, y la hoja compartida del sistema
   trae `#lb{padding:var(--sp-8)}`, que son 9 pixeles. En CSS un identificador
   gana SIEMPRE a una clase, asi que esta regla pedia 32 y el navegador seguia
   aplicando 9. La regla estaba escrita, se servia, y no hacia nada.
   Se sube la especificidad juntando el identificador y la clase. */
#lb.film-lb{position:fixed;inset:0;z-index:var(--capa-encima);display:none;
  align-items:center;justify-content:center;
  background:var(--veil-dark);padding:var(--sp-18b)}
#lb.film-lb.open{display:flex}
.film-lb.open{display:flex}

.film-lb-img img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--r-in)}
/* La ficha y el prompt de la imagen abierta, al lado. El visor pasa a ser dos
   columnas: la foto grande a la izquierda y sus datos a la derecha, con su propio
   desplazamiento para que un prompt largo no empuje la imagen fuera de la
   pantalla. Debajo de cierto ancho se apila. */
.film-lb{gap:22px}
/* EL VISOR, A DOS COLUMNAS. Orden del CEO del 2026-08-14: imagen a la
   izquierda, datos a la derecha, y NUNCA desplazamiento vertical.
   Antes la ficha caia debajo de la imagen: con una imagen vertical habia que
   desplazar para leer los datos, y al desplazar la barra de anterior y
   siguiente se quedaba encima del texto. */
.film-lb-caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,26rem);
  gap:var(--sp-16);align-items:stretch;
  width:min(1500px,96vw);height:min(88vh,900px)}
.film-lb-img{min-width:0;min-height:0;display:flex;align-items:center;
  justify-content:center;background:var(--surface-alt);border-radius:var(--r-lg);
  overflow:hidden;max-width:none;max-height:none}
.film-lb-img img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
/* La columna de la derecha es la unica que desplaza, y solo si su ficha no
   cabe. La barra de navegacion va FUERA de esa zona, pegada abajo, para que no
   se le monte encima al texto. */
.film-lb-col{min-width:0;min-height:0;display:flex;flex-direction:column;
  background:var(--surface);border:var(--hair-soft);border-radius:var(--r-lg);
  overflow:hidden}
.film-lb-ficha{flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:var(--sp-18) var(--sp-18b);text-align:left;
  width:auto;max-height:none;background:none;border:0;border-radius:0}
.film-lb-ficha .film-kv{margin:var(--sp-12) 0 0;gap:var(--sp-6) var(--sp-14)}
.film-lb-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-8);padding:var(--sp-12) var(--sp-18b);
  border-top:var(--hair-soft);background:var(--surface-2)}
.film-lb-n{color:var(--text-dim);font-size:var(--fs-sm);font-weight:var(--w-fuerte)}
.film-lb-close{position:fixed;top:var(--sp-14);right:var(--sp-14);z-index:2}

/* En pantalla estrecha se apilan, y ahi si desplaza la caja entera, porque no
   hay sitio para dos columnas. */
@media (max-width:900px){
  .film-lb-caja{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;
    height:min(92vh,900px)}
  .film-lb-col{max-height:46vh}
}
.film-lb-ficha[hidden]{display:none}

.film-lb-ficha .film-prompt{margin-bottom:0}
@media(max-width:1100px){
  .film-lb{flex-direction:column;padding:var(--sp-16) var(--sp-13) 84px}
  .film-lb-img,.film-lb-img img{max-height:52vh}
  .film-lb-ficha{width:100%;max-height:30vh}
}
.film-lb-bar{position:absolute;left:0;right:0;bottom:22px;display:flex;gap:12px;
  align-items:center;justify-content:center}
.film-lb-bar .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--surface)}
.film-lb-bar .btn-ghost:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.film-lb-n{color:var(--surface);font-size:var(--fs-sm);font-weight:var(--w-fuerte)}
.film-lb-close{position:absolute;top:20px;right:24px}

/* --- 6. Barra de anclas fija de UNA sola fila ----------------------------- */
/* nowrap y scroll lateral. Nunca una segunda fila: al ser fija taparia los
   titulos. Ojo: overflow-x:hidden en html o body mata el position:sticky de
   cualquier descendiente, por eso se recorta con clip. */
html,body{overflow-x:clip}
.film-anchors{position:sticky;top:56px;z-index:var(--capa-pegado);display:flex;gap:7px;align-items:center;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding:var(--sp-9) 0;margin:0 0 var(--sp-11);
  background:var(--bg)}
.film-anchors::-webkit-scrollbar{display:none}
.film-anchor{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.film-anchor b{font-weight:var(--w-max);color:var(--text-dim)}
.film-anchor.is-on{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}
/* El numero de un ancla MARCADA usa el mismo color de letra que su ancla, y no
   `--on-solid`. Ese nombre se da la vuelta con el tema, y encima de un fondo de
   marca que NO se da la vuelta dejaba el numero en 1,18 a 1: ilegible. Es un
   fallo que todavia no se veia porque ninguna toma esta marcada; se veria en
   cuanto se marque la primera. Mismo caso que el hover del elemento, arreglado
   el 2026-08-12. */
.film-anchor.is-on b{color:var(--on-accent)}
.film-card,.film-shot{scroll-margin-top:132px}
section[id]{scroll-margin-top:132px}

/* --- 7. Pares de clave y valor de las fichas ------------------------------ */
.film-kv{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:6px 16px;margin:var(--sp-11) 0;font-size:var(--fs-sm)}
.film-kv dt{font-weight:var(--w-fuerte);color:var(--text)}
.film-kv dd{margin:0;color:var(--text-dim);line-height:var(--lh-normal)}
@media(max-width:640px){.film-kv{grid-template-columns:1fr;gap:2px 0}.film-kv dd{margin-bottom:8px}}

/* --- 8. Prompts ------------------------------------------------------------ */
/* Boton de copiar arriba y abajo de la caja: los prompts son largos y volver a
   subir para copiarlos es trabajo que el tablero puede ahorrar. */
.film-prompt{margin-top:var(--sp-14)}
.film-prompt h3{margin-bottom:var(--sp-7)}
.film-prompt .btn-ghost{margin:var(--sp-5) 0}
.film-prompt pre.prompt-box{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);
  font-size:var(--fs-sm);line-height:var(--lh-normal);max-height:none}

/* --- 9. Progreso ----------------------------------------------------------- */
.film-progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:var(--sp-14) 0}
.film-prog-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-alt);overflow:hidden}
.film-prog-bar span{display:block;height:100%;background:var(--tag-a);border-radius:var(--r-pill);color:var(--on-accent)}
.film-prog-txt{margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--text-dim);font-weight:var(--w-fuerte)}

/* --- 18. Aviso que no se puede pasar por alto ----------------------------- */
/* Cuando el dato contradice al dictamen legal, se dice arriba y se lee. Fondo
   propio y texto en tinta: nada de banda lateral de color, que esta vetada. */
/* AQUI HABIA DOS LINEAS QUE HACIAN LA CAJA ILEGIBLE EN OSCURO (2026-08-11).
   Pintaban el fondo Y la letra con el MISMO color (`--alert-soft` en los dos), asi
   que el texto quedaba invisible: contraste 1 a 1. Era un dedazo, `--alert-soft`
   donde tocaba `--alert-ink`.
   Y ademas sobraban enteras: el sistema ya da la vuelta a esos dos colores solo en
   tema oscuro (fondo rojo hondo, letra rosa palida). La regla del tema claro de
   arriba vale para los dos, porque pide los colores por su NOMBRE y no por su valor.
   Repetir en oscuro lo que el sistema ya resuelve es como se cuelan estos fallos. */
.film-prod{margin-top:var(--sp-13)}
.film-medida{background:var(--lime);color:var(--on-accent);border-color:var(--lime)}

/* --- 19. Linea de cumplimiento ------------------------------------------- */
.film-rule-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.film-rule-top .stbtn{flex:0 0 auto}
.film-share{margin-bottom:var(--sp-11)}

/* --- 11. Tablas anchas ----------------------------------------------------- */
/* La escaleta no cabe en un movil: se desplaza en su propia caja para que la
   pagina nunca se mueva de lado. */
.film-scroll{width:100%;overflow-x:auto;margin:var(--sp-5) 0 var(--sp-9)}
.film-scroll .data-table{min-width:760px}
.film-line{margin:var(--sp-1) 0;line-height:var(--lh-normal)}
.film-filters{gap:14px;margin:var(--sp-5) 0 var(--sp-12);align-items:flex-end}
.film-sel{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:var(--ls-rotulo-ancho);color:var(--text-dim);font-weight:var(--w-fuerte)}
.film-sel select{padding:var(--sp-6) var(--sp-10);border-radius:var(--r-pill);border:var(--hair-soft);
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);text-transform:none;letter-spacing:0}
/* Un option hereda el color del select y el desplegable nativo lo pinta el
   sistema: sin color y fondo propios, la lista se lee en blanco sobre blanco. */
.film-sel option{background:var(--surface);color:var(--text)}

/* --- 12. Menu lateral ------------------------------------------------------
   El menu lo da entero la hoja de COMPONENTES del sistema compartido
   (assets/dashboard-kit/components.css), que reconoce los nombres de esta pieza
   (.film-nav-title, .film-nav-grupo, .film-back) ademas de los del sistema. Aqui no
   queda ninguna regla de menu: si se dejara, iria despues de la hoja compartida y la
   pisaria, que es como este tablero y los de serie acabaron con el mismo menu y
   espaciados distintos (CEO, 2026-08-09: "sigue viendose distinto el padding"). */

/* La ventana de detalle es ANCHA y va a dos columnas: la imagen y sus miniaturas
   a la izquierda, y todo el texto a la derecha, a la misma altura. Antes medía
   760 píxeles y apilaba, así que la mitad derecha quedaba vacía y había que bajar
   para leer la ficha. Con 1360 el texto cabe arriba y se lee sin desplazarse.
   Deroga la regla anterior de este mismo archivo, que apilaba por falta de sitio:
   el sitio existe, lo que faltaba era usarlo (CEO, 2026-08-09). */
.dv__panel{max-width:min(1360px,94vw);padding:var(--sp-18) var(--sp-18b) var(--sp-17)}
.dv__body .film-subject{margin:0}

/* LA VENTANA NO SE DESPLAZA. La imagen es lo mas alto que hay dentro, asi que su
   ancho se calcula DESDE el alto que queda libre, no al reves: con la proporcion
   mas alta que generamos (3:4, o sea 0,75 de ancho por cada alto) la ventana
   entera cabe en cualquier pantalla. Una imagen 16:9 con ese mismo ancho sale
   mucho mas baja, asi que la formula vale para las dos. `--reserva` es todo lo
   que ocupa la ventana ademas de la foto: margen exterior, relleno del panel,
   titulo, miniaturas y respiro de abajo (CEO, 2026-08-09). */
/* Medido en el navegador, no estimado: a 760 px de alto la ventana ocupaba 628 y
   sobraban 132 sin usar, que es justo lo que le faltaba abajo al boton de
   comentar. La reserva real es el margen exterior, el relleno del panel, el
   boton de copiar enlace y el titulo. */
.dv__body{--reserva:235px}
.dv__body .film-subject-main{
  grid-template-columns:auto minmax(360px,1fr);gap:26px;align-items:start}
.dv__body .film-subject-anchor{
  width:min(440px,calc((100vh - var(--reserva)) * .75));max-width:none;position:static}
/* Y si el texto de la derecha es mas largo que la foto, se desplaza SOLO su
   parte de arriba: el titulo, la imagen y el pie con responsable y comentar se
   quedan a la vista. Una ficha de personaje larga no cabe entera en ninguna
   pantalla, pero el boton de comentar tiene que alcanzarse sin buscarlo. */
.dv__body .film-subject-sheet{
  max-height:calc(100vh - var(--reserva));display:flex;flex-direction:column;min-height:0}
.dv__body .film-sheet-scroll{overflow-y:auto;min-height:0;padding-right:var(--sp-9)}
/* DENTRO DE LA VENTANA no desplaza: desplaza el panel del sistema, que ya lo
   hace. Con los dos activos salian DOS barras verticales, una dentro de la
   otra, y el raton movia la que no tocaba. */
.dv__panel .film-sheet-scroll,.film-subject-sheet .film-sheet-scroll{
  overflow:visible;max-height:none;padding-right:0}
/* PERO DENTRO DE LA VENTANA SI SE DESPLAZA, y esta regla va DESPUES a proposito.
   La de arriba y la de `.dv__body .film-sheet-scroll` pesan lo mismo, asi que
   ganaba la ultima escrita y apagaba el desplazamiento tambien en la ventana. Con
   el desplazamiento apagado, el texto crece por encima de su sitio y se PINTA
   ENCIMA del pie: es lo que el CEO vio como el selector de responsable metido en
   mitad del prompt, en la ficha de personaje, en la de lugares y en la de props.
   Tres clases encadenadas pesan mas que dos, asi que esta gana dentro de la
   ventana y fuera no cambia nada. */
.dv__body .film-subject-sheet .film-sheet-scroll{
  overflow-y:auto;overflow-x:hidden;max-height:none;min-height:0;
  padding-right:var(--sp-9)}
.dv__body .film-sheet-pie{flex:0 0 auto;margin-top:var(--sp-11);padding-top:var(--sp-11);
  border-top:var(--hair-soft);display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
/* OJO: aqui habia un selector SUELTO, `.dv__body .film-sheet-pie` sin llaves,
   justo antes de este comentario. El navegador no da ningun error: se lo pega al
   selector que viene detras y lo convierte en `.dv__body .film-sheet-pie
   .film-notes`, asi que la regla de `.film-notes` DEJABA DE EXISTIR por su cuenta.
   Consecuencia: el bloque de comentarios heredaba una fila del sistema y el
   selector de responsable y el boton de comentar se montaban encima del texto del
   prompt, en TODAS las peliculas. Visto el 2026-08-23 en la ventana de personaje y
   en la de lugares a la vez. Un selector sin llaves se lleva por delante la regla
   siguiente y no avisa. */
/* LOS COMENTARIOS. El bloque entero no tenia estilo propio salvo un margen, y
   heredaba una fila del sistema: al abrir el formulario, el formulario se
   colocaba AL LADO del boton y se desbordaba por encima del prompt de la
   tarjeta. Es lo que el CEO vio como «el boton de comentar lo esta pisando
   todo el texto».
   Se apila en columna y a ancho completo, asi que empuja lo de abajo en vez de
   montarse encima. */
.film-notes{margin:var(--sp-11) 0 0;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--sp-8);width:100%}
.film-note-add{flex:0 0 auto}
.film-notes-list{width:100%;margin:0;display:flex;flex-direction:column;gap:var(--sp-6)}
.film-notes-list li{display:flex;align-items:flex-start;gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-11);border-radius:var(--r-in);
  background:var(--surface-2);border:var(--hair-soft)}
.film-note-txt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
  font-size:var(--fs-sm);line-height:var(--lh-lectura);color:var(--text)}
.film-note-who{color:var(--text-dim);font-weight:var(--w-fuerte)}
.film-note-acc{flex:0 0 auto;display:flex;gap:var(--sp-4)}
/* El formulario, a ancho completo y debajo. */
.film-note-form{width:100%;display:flex;flex-direction:column;gap:var(--sp-8);
  padding:var(--sp-11);border-radius:var(--r-in);
  background:var(--surface-2);border:var(--hair-soft)}
.film-note-input{width:100%;box-sizing:border-box;resize:vertical;min-height:5rem;
  padding:var(--sp-8) var(--sp-11);border-radius:var(--r-in);
  background:var(--surface);border:var(--hair-soft);color:var(--text);
  font:inherit;font-size:var(--fs-sm);line-height:var(--lh-lectura)}
.film-note-input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.film-note-btns{display:flex;gap:var(--sp-8);flex-wrap:wrap}
/* LA FILA DE ACCIONES DE LA FICHA (Jeff, 2026-10-15: «¿esos botones así pegados? no entiendo qué parte de
   que maquetes bien no captas»). Iba empujada a la derecha en una caja de 230 px y sus botones, uno detrás de otro
   sin hueco, se partían en dos filas pegadas («Marcar listo» tocando a «Cambiar imágenes»), con «Comentar» suelto
   debajo y un hueco grande en medio. Ahora las acciones son una fila propia, alineada a la izquierda bajo el
   título, con el mismo hueco entre todos los botones; y «Comentar» queda justo debajo. En las tarjetas, la misma
   caja reparte sus botones con el mismo hueco. */
.film-subject-st{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8, 8px)}
.film-subject-head .film-subject-st{flex:1 1 100%;margin-left:0;justify-content:flex-start}
.film-subject-head .film-notes{margin-top:0}
/* El «Copiar» del identificador no toca el borde de su caja: hueco y aire a la derecha. */
.film-subject-head .film-token{gap:var(--sp-8, 8px);padding-right:var(--sp-4, 4px)}
/* Por debajo de ese ancho no caben dos columnas legibles y vuelve a apilarse. */
@media(max-width:1040px){
  .dv__body .film-subject-main{grid-template-columns:1fr}
  .dv__body .film-subject-anchor{width:min(360px,60vw)}
  .dv__body .film-subject-sheet{max-height:none;overflow:visible;padding-right:0}
}
.dv__body .film-subject-t{font-size:var(--fs-h2);line-height:var(--lh-titulo)}
.dv__body .film-grid-assets{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.dv__body .film-share{margin-bottom:var(--sp-12)}

/* --- 13. Ficha del modal --------------------------------------------------- */
.film-ficha-top{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.film-ficha-top .dv__title{margin-bottom:var(--sp-7)}
/* El boton de completar va SIEMPRE arriba a la derecha de la cabecera, nunca en
   el pie ni enterrado detras del ultimo prompt. */
.film-ficha-top .stbtn{flex:0 0 auto;margin-top:var(--sp-1)}
.film-video,.film-audio{width:100%;margin-top:var(--sp-9);border-radius:var(--r-in);display:block}
.dv__body h3{margin:var(--sp-15) 0 var(--sp-5)}
.dv__body p{line-height:var(--lh-lectura);color:var(--text-dim)}

/* --- 14. Fases de la portada ---------------------------------------------- */
.film-phases .card{gap:10px}

/* --- 15. Ficha tecnica de toda pieza generable ---------------------------- */
/* Modelo, resolucion, aspecto, duracion y elementos viven DENTRO de la tarjeta.
   El tag del modelo va en monoespaciada porque se copia y se pega tal cual. */
.film-mono{font-family:var(--mono);letter-spacing:var(--ls-medio)}
.film-pend{background:var(--surface-alt);color:var(--text);border:var(--hair-soft);font-weight:var(--w-fuerte)}
.film-spec{display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:6px 16px;
  margin:var(--sp-11) 0;font-size:var(--fs-sm)}
.film-spec-k{font-weight:var(--w-fuerte);color:var(--text)}
.film-spec-v{color:var(--text-dim);line-height:var(--lh-normal);min-width:0;word-break:break-word}
@media(max-width:640px){.film-spec{grid-template-columns:1fr;gap:2px 0}.film-spec-v{margin-bottom:8px}}
.film-sub-h{margin:var(--sp-14) 0 var(--sp-7);font-size:var(--fs-md);font-weight:var(--w-fuerte);color:var(--text)}
.film-lead{margin:var(--sp-7) 0 var(--sp-3)}
.film-sin{font-size:var(--fs-sm);margin:var(--sp-3) 0}
.film-elnote{font-size:var(--fs-sm);margin:var(--sp-5) 0 0}
.film-dial li{color:var(--text-dim)}

/* Pildoras que ABREN algo: el elemento y el salto a una toma. Llevan estado al
   pasar por encima porque son mandos, no decoracion de tarjeta. */
.film-el,.film-goshot{cursor:pointer;color:var(--text)}
/* MEDIDO EL 2026-08-12: en claro esta regla daba 1,23 de contraste, o sea letra
   crema sobre fondo crema. No era el color elegido: era que otra regla del
   sistema de componentes ganaba en el FONDO (le ponia el mismo tono al 7 %) y
   esta seguia mandando en la LETRA. Media regla de cada una.
   Se resuelve nombrando la pastilla por sus dos clases y por su contenedor, que
   le da mas peso, en vez de a base de `!important`, que apaga el sistema entero
   y le pasa el problema al siguiente. Medido despues: 15,9 de contraste. */
.filters .chip.film-el:hover,.filters .chip.film-el:focus-visible,
.film-els .chip.film-el:hover,.film-els .chip.film-el:focus-visible,
.film-el:hover,.film-el:focus-visible,.film-goshot:hover,.film-goshot:focus-visible{
  background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* En OSCURO ese estado dejaba la píldora casi negra con el texto gris: se leía
   peor al señalarla que en reposo, que es lo contrario de lo que tiene que pasar.
   Va en violeta translúcido con desenfoque por detrás (el mismo violeta de la
   marca del tablero) y el texto en blanco. El color de fondo lleva su propia
   opacidad, así que el contraste no depende de lo que haya debajo. */
/* ARREGLADO EL 2026-08-11. Antes esta regla pedia la letra en `--on-solid`, y
   ese token SE DA LA VUELTA en oscuro: pasa de blanco a #1A1815, casi negro,
   porque el sistema lo usa para escribir sobre botones claros. Sobre este
   fondo violeta salia morado con letra negra, ilegible. Ahora se pide `--text`,
   que en cada modo es la tinta legible sobre el fondo de ese modo, asi que no
   se invierte al reves.
   Y el segundo fallo: la regla solo existia para el tema oscuro ELEGIDO a mano.
   Quien deja el tema en «el del sistema» no tiene ningun atributo puesto, asi
   que le entraba la regla del modo claro y veia otra cosa distinta. Ahora hay
   las dos vias, y la del sistema se apaga si el lector eligio claro a mano. */
html[data-theme="dark"] .filters .chip.film-el:hover,
html[data-theme="dark"] .filters .chip.film-el:focus-visible,
html[data-theme="dark"] .film-els .chip.film-el:hover,
html[data-theme="dark"] .film-els .chip.film-el:focus-visible,
html[data-theme="dark"] .film-el:hover,
html[data-theme="dark"] .film-el:focus-visible,
html[data-theme="dark"] .film-goshot:hover,
html[data-theme="dark"] .film-goshot:focus-visible{
  background:var(--nota-line);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  color:var(--text);border-color:var(--nota-ico);
  box-shadow:0 2px 14px var(--nota-bg)}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .film-el:hover,
  html:not([data-theme="light"]) .film-el:focus-visible,
  html:not([data-theme="light"]) .film-goshot:hover,
  html:not([data-theme="light"]) .film-goshot:focus-visible{
    background:var(--nota-line);
    -webkit-backdrop-filter:blur(10px) saturate(150%);
    backdrop-filter:blur(10px) saturate(150%);
    color:var(--text);border-color:var(--nota-ico);
    box-shadow:0 2px 14px var(--nota-bg)}
}
.film-els{margin:var(--sp-1) 0 var(--sp-5)}

/* El nombre del elemento con su arroba y su boton de copiar, en la cabecera de
   cada ficha de personaje, lugar, vestuario y prop. Se pega dentro de los
   prompts de generacion, asi que se lee y se copia constantemente: por eso va
   en letra de anchura fija y con el boton al lado, no dentro de un menu.
   Se ajusta al ancho de su contenido para que no quede una barra vacia cuando
   el nombre es corto. */
.film-token{display:inline-flex;align-items:center;gap:var(--sp-2);
  max-width:100%;margin:var(--sp-2) 0 var(--sp-1);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.film-token-n{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:var(--fs-xs);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El boton de copiar del token es un boton del sistema y se deja serlo. Aqui
   solo se dice DONDE va, nunca como se ve: antes se le cambiaba el tamano de
   letra y el relleno, y salia mas pequeno y mas apretado que todos los demas
   botones del tablero. Lo vio el CEO el 2026-08-23. Un boton con la clase
   correcta y las medidas cambiadas no es el boton del sistema. */
.film-token-c{flex:0 0 auto;white-space:nowrap}

/* --- 16. Bloque por sujeto ------------------------------------------------- */
/* Una seccion por persona, lugar o pieza: su cabecera, su ancla grande, su
   minigaleria propia y su ficha al lado. Las imagenes de un sujeto NUNCA
   comparten tira con las de otro. */
.film-subject{margin:var(--sp-15) 0 var(--sp-19b);scroll-margin-top:132px}
.film-subject-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:var(--sp-11)}
.film-subject-t{font-size:var(--fs-xl);font-weight:var(--w-fuerte);margin:0;line-height:var(--lh-subtitulo)}
.film-subject-main{display:grid;grid-template-columns:minmax(230px,330px) 1fr;gap:22px;align-items:start}
.film-subject-anchor{min-width:0}
.film-subject-sheet{min-width:0;background:var(--surface);border:var(--hair-soft);
  border-radius:var(--r-lg);padding:var(--sp-14)}
.film-subject-sheet .film-kv,.film-subject-sheet .film-spec{margin-top:0}
@media(max-width:860px){.film-subject-main{grid-template-columns:1fr}}

/* --- 17. Rejillas de piezas ------------------------------------------------ */
/* La tarjeta de una toma lleva su prompt entero: necesita ancho para leerse. */
/* Cada tarjeta mide lo que mide su contenido. Estirandolas todas a la mas alta,
   la que lleva el prompt corto queda con medio palmo de vacio debajo. */
.film-grid-assets{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.film-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
/* Cuatro columnas hasta 1100 px. El escalon NO va en 1500: ahi un monitor de
   1440 se quedaba en tres, que es justo lo que se venia a arreglar. */
@media(max-width:1100px){.film-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.film-grid-wide,.film-grid-assets{grid-template-columns:1fr}}
.film-asset .card__t,.film-shot .card__t{margin-top:var(--sp-1)}

/* --- LA REJILLA Y LA TARJETA DE PRODUCCION (CEO, 2026-08-09) --------------- */
/* Una sola rejilla y una sola tarjeta para personajes, props, vestuario, lugares
   y lo que aun no tiene ficha. Las tarjetas van SIEMPRE una al lado de la otra:
   nada de bloques a pantalla completa apilados, que obligan a subir y bajar para
   comparar dos piezas del mismo material. Cinco por fila en pantalla ancha. */
.film-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--sp-14);
  align-items:stretch}
@media(max-width:1100px){.film-rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.film-rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.film-rejilla{grid-template-columns:1fr}}

.film-tarjeta{display:flex;flex-direction:column;padding:0;overflow:hidden}
/* La imagen ocupa el ancho COMPLETO de la tarjeta aunque se recorte, y su caja
   respeta la proporcion real de la pieza. */
/* ALTURA FIJA Y SIN ENCOGER. La tarjeta es una columna flexible y todas las de
   una fila se estiran a la mas alta. Cuando el texto de una es largo (una regla
   de continuidad de varias lineas en columna estrecha), el navegador reparte el
   apuro encogiendo al primer hijo que se deje, y el que se deja es la foto: se
   quedaba mas baja que la de sus vecinas y la tarjeta salia descolgada de la
   fila. Medido en Borrowed Wounds: 183 pixeles contra 248 en las de al lado.
   La PROPORCION no se toca aqui: cada vista tiene la suya (lugares en 16:9,
   props en 3:4) y ponerles 1:1 a todas les cambiaba el encuadre. */
.film-tarjeta-foto{position:relative;z-index:0;width:100%;flex:0 0 auto;
  background:var(--surface-alt);overflow:hidden}
.film-tarjeta-foto img{width:100%;height:100%;object-fit:cover;display:block}
.film-tarjeta-vacia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);color:var(--text-dim);text-align:center;padding:var(--sp-11)}
.film-tarjeta-cuerpo{display:flex;flex-direction:column;gap:8px;padding:var(--sp-12) var(--sp-12b) var(--sp-12b);flex:1}
/* IGUALAR LO QUE SE VE, 2026-08-31. Este titulo no declaraba ni letra ni
   tamano, asi que heredaba la letra BASE del tablero, que es Helvetica Neue,
   mientras los titulos de las otras siete secciones piden Sora a mano. Esa
   era la unica diferencia de verdad entre las tarjetas de Props, Vestuario y
   Personajes y las del resto: el radio, el borde y la sombra ya eran
   identicos, medido. Se copian las cuatro propiedades de `.card__t` tal como
   estan escritas en el sistema, en vez de escribir numeros nuevos. */
.film-tarjeta-t{font-family:var(--display);font-size:var(--fs-lg);
  font-weight:var(--w-fuerte);line-height:var(--lh-subtitulo)}
.film-tarjeta-chips{display:flex;flex-wrap:wrap;gap:6px}
.film-tarjeta-n{margin:0;font-size:var(--fs-sm)}
.film-tarjeta-pie{margin-top:auto;display:flex;gap:8px;align-items:center;
  /* El mismo aire por arriba que `.card__foot`: eran 12 px contra 14. */
  padding-top:var(--sp-12)}
.film-tarjeta-pie .btn-ghost{flex:1 1 auto;justify-content:center}
/* La ficha tecnica que solo lleva el prop, dentro de la tarjeta y en cuerpo
   pequeno para que no la haga mas alta que las demas. */
.film-tarjeta .film-ficha{margin:0;font-size:var(--fs-xs)}
.film-tarjeta .film-ficha dt{padding-top:var(--sp-3)}
.film-tarjeta .film-ficha dd{padding-top:var(--sp-3)}

.film-cast-grid,.film-prop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}

/* --- Ancho de la caja y rejilla de indicadores (CEO, 2026-08-09) ----------- */
/* El kit compartido deja el contenido en 1180 píxeles y con las tarjetas de esta
   película se queda estrecho. El CEO lo subió a 1600 y luego a 2000 (2026-08-09),
   que es lo que aprovecha una pantalla ancha sin dejar aire muerto a los lados. */
main{max-width:2000px}
/* Los indicadores pedían 150 píxeles mínimos y con eso caben ocho por fila, que
   es una tira de números ilegible. Con 250 caben cinco y cada uno respira. */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* --- Personajes en tarjetas, cinco por fila (CEO, 2026-08-09) -------------- */
/* La ficha entera de cada personaje ocupaba una sección de pantalla completa, así
   que comparar dos repartos obligaba a subir y bajar. En tarjeta se ven los cinco
   de un vistazo, y la ficha se abre en la ventana emergente al pulsar. */
.film-cast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:var(--sp-14);
  align-items:stretch}
@media(max-width:1500px){.film-cast-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1200px){.film-cast-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.film-cast-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.film-cast-grid{grid-template-columns:1fr}}
.film-cast-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
/* La imagen ocupa el ancho completo de la tarjeta aunque se recorte. Dejarla en
   una columna estrecha con franjas a los lados es lo que está vetado. */
.film-cast-foto{position:relative;width:100%;aspect-ratio:3/4;background:var(--surface-alt);
  overflow:hidden}
.film-cast-foto img{width:100%;height:100%;object-fit:cover;display:block}
.film-cast-foto .film-cast-vacia{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-sm);color:var(--text-dim);text-align:center;padding:var(--sp-11)}
.film-cast-cuerpo{display:flex;flex-direction:column;gap:8px;padding:var(--sp-12) var(--sp-12b) var(--sp-12b);flex:1}
.film-cast-t{font-weight:var(--w-max);line-height:var(--lh-subtitulo)}
.film-cast-chips{display:flex;flex-wrap:wrap;gap:6px}
.film-cast-pie{margin-top:auto;display:flex;gap:8px;align-items:center}
.film-cast-pie .btn-ghost{flex:1 1 auto;justify-content:center}

/* --- Props en tarjeta (CEO, 2026-08-09) ------------------------------------ */
/* Cada prop, una tarjeta, con su ficha dentro: dónde aparece, su riesgo y su
   regla de continuidad. Eran tres datos repartidos y ahora se leen juntos. */
.film-prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;
  margin-top:var(--sp-14);align-items:stretch}
.film-prop-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
/* 3:4, que es como se generan los props, y no 1:1. Con el cuadrado, la
   espada salia deformada y el hueco de «sin generar todavia» tenia la forma
   equivocada, que es lo que el CEO vio. */
.film-prop-foto{position:relative;width:100%;aspect-ratio:3/4;flex:0 0 auto;
  background:var(--surface-alt);overflow:hidden}
.film-prop-foto img{width:100%;height:100%;object-fit:cover;display:block}
.film-prop-cuerpo{display:flex;flex-direction:column;gap:10px;padding:var(--sp-12) var(--sp-12b) var(--sp-12b);flex:1}
.film-prop-t{font-weight:var(--w-max);line-height:var(--lh-subtitulo)}
.film-prop-pie{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}

/* --- La lupa sobre la imagen de la tarjeta (CEO, 2026-08-09) --------------- */
/* Toda imagen de toda tarjeta se puede ampliar, y se ve que se puede. La imagen
   entera es pulsable, pero sin un boton visible nadie lo descubre. Fondo opaco
   propio: el contraste no puede depender de la foto que haya debajo. */
.film-tarjeta-foto img{cursor:zoom-in}
.film-lupa{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;
  align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border-radius:var(--r-pill);background:var(--text);border:1px solid var(--veil-light-2);
  color:var(--on-solid);cursor:pointer}
.film-lupa svg{width:15px;height:15px}
.film-lupa:hover{background:var(--tag-a);border-color:var(--tag-a);color:var(--on-accent)}
.film-lupa:focus-visible{outline:2px solid var(--on-solid);outline-offset:1px}

/* --- La ventana emergente, centrada y sin desplazamiento (CEO, 2026-08-09) -- */
/* Siempre centrada en la pantalla y siempre cabiendo de alto: nada de bajar la
   pagina para leer una ficha. Lo que antes caia debajo sube a la columna de la
   derecha, y si aun asi sobra alto, el que se desplaza es el CUERPO de la ventana,
   nunca la pagina de detras. */
.dv{align-items:center;padding:var(--sp-16b) var(--sp-15);overflow:hidden}
.dv__panel{max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden}
.dv__body{overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:var(--sp-5)}
/* Dentro de la ventana, la columna de la imagen se queda quieta y la del texto se
   desplaza sola si es larga. */
.dv__body .film-subject-anchor{position:sticky;top:0}
/* Con la ventana abierta la pagina de detras se queda quieta. Sin esto, al
   desplazarse dentro de la ficha se arrastra el fondo y al cerrar apareces en
   otro sitio de la lista. */
html.modal-abierto,html.modal-abierto body{overflow:hidden}

/* --- 22. Menu lateral en dos alturas (CEO, 2026-08-09) --------------------- */
/* Arriba la historia (portada, sinopsis, argumento, biblia), en medio todo lo de
   produccion agrupado y plegable, abajo cumplimiento y, al fondo del todo, el
   boton de volver al indice de cortometrajes. Estaba arriba y se confundia con
   la navegacion de la propia pelicula. */
/* Para que el volver baje al fondo, la columna del menu tiene que OCUPAR todo el
   alto disponible. El carril lleva la marca arriba y el menu debajo, asi que se
   reparten en columna y el menu se queda con el resto. Sin esto, `margin-top:auto`
   no tiene contra que empujar y el boton se queda pegado al ultimo enlace. */
/* El carril en columna, los grupos plegables y el enlace de volver los da entero la hoja de
   COMPONENTES del sistema compartido, que reconoce tanto los nombres de esta pieza como los
   del sistema. Lo unico que queda aqui es el filete que separa el enlace de volver del ultimo
   apartado, que es propio de este tablero. */
#nav .film-back{position:relative}
#nav .film-back::before{content:"";display:block;position:absolute;left:12px;right:12px;
  top:0;border-top:var(--hair-soft)}

/* --- 23. La cabecera lleva la PORTADA de la pelicula ---------------------- */
/* El simbolo de la casa solo se queda mientras esa imagen no exista. */
.hero.film-hero-con-foto{position:relative;overflow:hidden;padding-right:clamp(200px,32%,420px)}
/* EL TEXTO NO SE METE DEBAJO DE LA FOTO (2026-08-11).
   La foto va colocada ENCIMA de la tarjeta, pegada a la derecha. El texto no sabía
   que tenía que parar antes, así que un título largo se metía debajo y se cortaba:
   medido en «Everybody Sleeps at Nine», el título llegaba 65 píxeles dentro de la
   foto y la última letra desaparecía. El aviso del CEO fue «no se lee en modo
   oscuro», pero no era cuestión de color: el texto estaba TAPADO.

   El ancho se declara UNA vez y lo usan los dos, el hueco reservado y la foto. Antes
   estaba escrito dos veces, y ese es justo el fallo que vuelve: alguien ensancha la
   foto y se olvida de ensanchar el hueco.

   Se reserva el ancho ENTERO de la foto, no una parte. El degradado funde su lado
   izquierdo con la tarjeta, así que se podría apurar; pero apurar depende de cuánto
   funde el degradado, y eso se toca sin acordarse de esto. */
.hero.film-hero-con-foto{--foto-w:clamp(220px,38%,520px);
  padding-right:calc(var(--foto-w) + var(--sp-10))}
.film-hero-foto{position:absolute;top:0;right:0;bottom:0;width:var(--foto-w);
  pointer-events:none}
.film-hero-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Se funde con la tarjeta por la izquierda para que no parezca un recorte pegado. */
.film-hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--surface) 0%,rgba(0,0,0,0) 62%)}
html[data-theme="dark"] .film-hero-foto::after{
  background:linear-gradient(90deg,var(--surface) 0%,rgba(0,0,0,0) 62%)}
@media(max-width:760px){
  /* En movil la foto deja de estar encima y pasa a ir arriba, a todo lo ancho, asi que
     el hueco que se le reservaba a la derecha sobra y hay que devolverlo. */
  .hero.film-hero-con-foto{padding-right:var(--sp-15)}
  .film-hero-foto{position:relative;width:100%;height:180px;margin-bottom:var(--sp-12)}
  .film-hero-foto::after{background:none}
}

/* --- 24. La vista de lectura (sinopsis) ---------------------------------- */
/* Sin tope de ancho: el párrafo llena su columna (CEO, 2026-08-09). La columna
   del lector ya está acotada por la rejilla y por el panel de fichas de al lado,
   así que meterle además una medida de lectura dejaba una franja muerta dentro
   de la propia tarjeta. */
.film-lectura .card__d{line-height:var(--lh-lectura)}

/* --- 25. EL LECTOR CON FICHAS AL LADO (CEO, 2026-08-09) ------------------- */
/* Mismo patron que el tablero de la serie vertical. La primera vez que el texto
   nombra a alguien o algo con ficha, esa palabra queda marcada; al pulsarla, su
   ficha entra en el panel de la derecha, que acompana al desplazarse. */
.lector{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:32px;align-items:start}
.lector-txt{min-width:0}
.lector-side{position:sticky;top:78px}
@media(max-width:1100px){
  .lector{grid-template-columns:1fr}
  .lector-side{position:static;margin:var(--sp-12) 0}
}
.lector-ayuda{display:flex;align-items:center;gap:8px;margin:0 0 var(--sp-12);
  font-size:var(--fs-xs);color:var(--text-dim)}
.lector-pt{width:7px;height:7px;border-radius:var(--r-circle);background:var(--brand);flex:0 0 auto}

/* La palabra marcada. Un color por familia, para que se distinga de un vistazo
   quien es una persona, que es un sitio y que es un objeto. */

/* La ficha del panel. */
.ficha{background:var(--surface);border:var(--hair-soft);border-radius:var(--r-lg);
  padding:var(--sp-12);overflow:hidden}
.ficha-img,.ficha-sin{width:100%;aspect-ratio:3/4;border-radius:var(--r-in);display:block}
.ficha-img{object-fit:cover;object-position:center 18%;cursor:zoom-in}
.ficha-sin{background:var(--surface);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:var(--sp-12)}
.ficha-sin-t{font-weight:var(--w-max);font-size:var(--fs-xs);color:var(--text-dim);
  text-transform:uppercase;letter-spacing:var(--ls-rotulo-ancho)}
.ficha-sin-s{font-size:var(--fs-xs);color:var(--text-dim);line-height:var(--lh-normal)}
.ficha-tipo{margin:var(--sp-11) 0 var(--sp-2);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:var(--ls-rotulo-ancho);color:var(--text-dim);font-weight:var(--w-max)}
.ficha-nom{margin:0 0 var(--sp-5);font-size:var(--fs-lg);line-height:var(--lh-subtitulo)}
.ficha-desc{margin:0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-dim)}
.ficha-ir{margin-top:var(--sp-11);width:100%;background:var(--surface-alt);border:var(--hair-soft);
  border-radius:var(--r-in);padding:var(--sp-7) var(--sp-11);font:inherit;font-size:var(--fs-sm);
  font-weight:var(--w-fuerte);color:var(--text);cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between}
.ficha-ir:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.ficha-vacia{background:var(--surface);border:var(--hair-soft);border-radius:var(--r-lg);
  padding:var(--sp-14);font-size:var(--fs-sm);color:var(--text-dim);line-height:var(--lh-normal)}

/* El boton de copiar el documento entero, arriba del todo. */
.film-copia-secc{margin:0 0 var(--sp-12)}
.film-doc-tags{margin:var(--sp-1) 0 var(--sp-9)}
/* Las etiquetas del documento van en capitalizacion normal, no en versalitas: es
   el criterio de la casa y ademas se leen mejor dentro de un texto largo. */
.film-doc-tags .tag{text-transform:none;letter-spacing:.005em}

/* --- 26. Las etiquetas de elemento, al tamaño de las de Escaleta ---------- */
/* La hoja compartida agranda TODA pildora que viva dentro de un `.filters`
   (0,8rem y 8x15 de relleno), porque ahi normalmente hay botones de filtro. Las
   etiquetas de elemento de una toma caen en ese contenedor y salian a 34 px de
   alto, el triple de lo necesario, mientras las mismas etiquetas en Escaleta
   median 20. Se igualan a las de Escaleta, que es el tamaño bueno (CEO,
   2026-08-09). Los filtros de verdad NO se tocan: la regla apunta solo a la
   etiqueta de elemento y a la de salto a una toma. */
.filters .chip.film-el,
.filters .chip.film-goshot,
.film-els .chip{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-8);font-weight:var(--w-medio);
  font-family:inherit}

/* --- El boton de «tamano normal» dice A, no una flecha de recargar ---------
   El grupo de tamano de texto es «menos · A · mas». El del medio devuelve la letra a
   su tamano de siempre. Traia una flecha circular heredada del cuadro de mandos del
   DNA, y esa flecha significa RECARGAR en toda la web: el CEO preguntó para qué era,
   que es la prueba de que no se entendia. La sustitucion del icono la hace
   `build-public.py`; aqui va su aspecto, para que la A pese lo mismo que el menos y
   el mas de al lado y el grupo se lea como una sola pieza. */
.zoom-rst .zoom-a{font:600 13px/1 var(--font);letter-spacing:.01em;display:block}

/* --- Los controles de la barra superior NO se aplastan ---------------------
   El grupo de tamano de texto media 34 pixeles cuando sus tres botones suman 90:
   la barra lo estaba encogiendo, asi que el «+» se salia de la pantalla (acababa en
   el pixel 1448 con una ventana de 1440) y el boton de tema se montaba encima de la
   letra A. Se veia como si faltara un boton.

   La causa es de manual: en una fila flexible, TODO encoge por defecto. Lo que tiene
   que ceder es el buscador, que es elastico y no pierde nada por ser mas estrecho;
   los botones tienen un tamano y no admiten otro. Se les dice que no encojan, y al
   buscador que puede hacerlo hasta un minimo razonable. */
/* DOS COSAS DISTINTAS SE LLAMAN IGUAL, Y LA DE LA ESQUINA SE LLEVA A LA OTRA POR
   DELANTE (2026-08-11).

   En la hoja del cuadro de mandos hay dos componentes con la MISMA clase `.zoom`:

     1. El boton de AMPLIAR UNA FOTO, que flota en la esquina de la imagen. Mide
        34x34 y va en posicion absoluta, o sea fuera del flujo de la pagina.
     2. El grupo de TAMANO DE TEXTO de la barra superior, que son tres botones en
        fila: menos, A y mas.

   La regla del primero le cae encima al segundo. Resultado: el grupo de la barra se
   quedaba en 34 pixeles cuando sus tres botones suman 90, dejaba de ocupar sitio, el
   «+» se salia de la pantalla y el boton de claro/oscuro se le montaba encima.

   Aqui se le devuelve al grupo de la barra su comportamiento normal: que ocupe su
   sitio, que mida lo que midan sus botones y que no encoja. Lo que cede es el
   buscador, que es elastico y no pierde nada por ser mas estrecho.

   El arreglo de fondo es que ese componente no se llame igual que el otro, y eso se
   hace al subirlo a la base. Mientras tanto, esto lo acota a la barra sin tocar la
   hoja del DNA, de la que dependen otras ocho piezas del repositorio. */
#topbar .zoom{position:static;width:auto;height:auto;background:none;
  border:var(--hair-soft);border-radius:var(--r-pill);flex:0 0 auto}
#topbar .zoom button{flex:0 0 auto}
#topbar #theme-btn{flex:0 0 auto}
#topbar #q{flex:1 1 auto;min-width:140px}

/* El componente de comentarios vive ENTERO en el kit compartido
   (assets/dashboard-kit/components.css, sección COMENTARIOS). Aquí no se
   repite: una copia se separa del original y deja de parecerse. Lo único
   que puede vivir en esta hoja es DÓNDE se pega el bloque dentro de las
   tarjetas de este tablero, que es lo que queda debajo si queda algo. */

/* --- Los prompts de una ficha, listados dentro de ella ---------------------- */
/* Va PLEGADO. Ocho prompts abiertos son ocho paredes de texto y la rejilla
   dejaria de servir para comparar de un vistazo. La cabecera dice cuantos hay,
   que es lo que decide si merece la pena abrir. */
.film-prompts-sujeto{margin:var(--sp-4) 0 0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2)}
.film-prompts-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--sp-4);
  padding:var(--sp-3) var(--sp-6);cursor:pointer;list-style:none;
  font-size:var(--fs-xs);color:var(--text)}
.film-prompts-head::-webkit-details-marker{display:none}
/* Mismo caso que la cabecera de un prompt suelto: sin `min-width:0` el rotulo se
   pica en vertical dentro de una tarjeta estrecha. */
/* Mismo criterio que la cabecera de un prompt suelto: se parte en dos filas
   antes que picarse o desaparecer. */
.film-prompts-t{font-weight:var(--w-medio);flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
.film-prompts-n{margin-left:auto;color:var(--text-dim)}
.film-prompts-sujeto[open] .film-prompt-chev{transform:rotate(180deg)}
.film-prompts-cuerpo{padding:0 var(--sp-6) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3)}

/* EL AVISO DE FALTA UN PROMPT. Se pinta con el color de aviso del sistema, no
   con uno inventado, para que se vea igual en los dos temas. No es decoracion:
   es la unica forma de que un agujero no se confunda con una decision. */
.film-falta{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}

/* EL ORDEN DE GENERACION. Lo pidio el CEO el 2026-08-13 mirando la ficha de un
   prop con tres imagenes: en ninguna parte decia que la segunda y la tercera se
   generan pasando la primera como referencia. Su frase: «van a generar 3 veces
   algo distinto, sin saber que tienen que referenciar».
   Va ABIERTO por defecto y con el color de aviso del sistema. Nace visible a
   proposito: quien mira esta tarjeta va a copiar un prompt y a generar, asi que
   si el aviso nace plegado, lo lee despues de haber gastado la generacion.
   Cero colores escritos a mano: todo sale de tokens.css, o en el tema contrario
   se queda invisible. */
/* El fondo va NEUTRO, no con el de nota. `--nota-bg` es un morado translucido,
   y con el filete ambar del aviso quedaba un morado con borde naranja. La senal
   la dan el filete y la etiqueta; el fondo solo separa el bloque. */
.film-orden{border:1px solid var(--warn);border-radius:var(--r-in);
  background:var(--surface-2);margin:var(--sp-5) 0}
.film-orden-head{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
  padding:var(--sp-12) var(--sp-14);cursor:pointer;list-style:none}
.film-orden-head::-webkit-details-marker{display:none}
/* Sobre el ambar la letra es BLANCA, y es justo al reves que sobre el lima.
   Medido contra el servidor el 2026-08-13: con `--on-accent` (la tinta oscura)
   daba 3,66 y el liston son 4,5. Con `--on-solid` da 4,75. El par correcto
   depende del fondo, no de la costumbre. */
/* El aire de la pildora se mide en EM y no en pixeles, igual que la pildora
   `.tag` que el sistema ya trae (`.22em .8em`). Con `--sp-4`, que son 5
   pixeles, la palabra salia pegada a los dos bordes. Se mide en em para que el
   aire crezca con la letra y no haya que tocarlo si cambia el tamano. */
.film-orden-tag{flex:0 0 auto;background:var(--warn);color:var(--on-solid);
  border-radius:var(--r-pill);padding:.28em .85em;
  font-size:var(--fs-2xs);font-weight:var(--w-fuerte);line-height:1.35;
  letter-spacing:var(--ls-rotulo);text-transform:uppercase}
/* Y el titulo baja de tamano. Iba al tamano heredado de la tarjeta y competia
   con el nombre de la ficha, que es lo que de verdad titula. Un aviso avisa,
   no grita: la senal la dan el filete y la pildora, no el cuerpo de letra. */
.film-orden-t{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere;
  font-size:var(--fs-sm);line-height:var(--lh-normal);
  font-weight:var(--w-fuerte);color:var(--text)}
.film-orden[open] .film-prompt-chev{transform:rotate(180deg)}
.film-orden-cuerpo{padding:0 var(--sp-14) var(--sp-14)}
.film-orden-pasos{margin:0;padding-left:var(--sp-13);
  display:flex;flex-direction:column;gap:var(--sp-4);
  font-size:var(--fs-sm);line-height:var(--lh-lectura);color:var(--text)}
.film-orden-pasos code{font-family:var(--mono);font-size:var(--fs-xs);
  background:var(--surface-2);border-radius:var(--r-sm);padding:1px 5px}
.film-orden-sub{margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-xs);
  letter-spacing:var(--ls-rotulo);text-transform:uppercase;
  font-weight:var(--w-fuerte);color:var(--text-dim)}
.film-orden-cadena{margin:0;padding-left:var(--sp-13);
  display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:var(--fs-sm);line-height:var(--lh-lectura);color:var(--text-dim)}

/* Y la misma orden repetida DONDE SE COPIA EL TEXTO. El aviso de arriba la da
   una vez; esto la recuerda en el sitio exacto en el que la persona esta
   mirando cuando la necesita, que es el boton de copiar el prompt. */
.film-conref{margin:var(--sp-5) var(--sp-14) var(--sp-12);padding:var(--sp-8) var(--sp-12);
  border-left:2px solid var(--warn);background:var(--nota-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-xs);line-height:var(--lh-lectura);color:var(--text)}

/* LA VERSION CORTADA de un plano. Mismo aire que una caja de prompt normal,
   con un filete que la separa del plano secuencia de arriba, porque son dos
   cosas distintas y no dos partes de la misma. Todo pedido al sistema. */
.film-cortada{border-top:2px solid var(--line);margin-top:var(--sp-5)}
.film-cortada-cuerpo{padding:0 var(--sp-6) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-4)}
.film-cortada-cuerpo .film-sin{margin:0 0 var(--sp-3)}

/* La pildora de «Planos 04 a 12» lleva a los planos, asi que tiene que
   parecerlo. Antes era un rotulo muerto: decia donde aparece la pieza y no se
   podia pulsar. */
/* La pildora de «Planos 03, 12» lleva a los planos, asi que tiene que
   parecerlo, pero SIN salirse del tamano de las demas.
   Tres cosas medidas y corregidas el 2026-08-14:
   1. Salia mas grande que sus vecinas porque un boton no hereda el tamano de
      letra de su alrededor: el navegador le pone el suyo. Se le fuerza el de la
      pildora del sistema, y el mismo aire.
   2. En reposo se perdia contra el fondo. Ahora lleva el filete de la casa,
      igual que la pildora normal.
   3. Al pasar el raton se ponia lima sobre fondo oscuro y no llegaba al liston
      de contraste. Ahora el fondo pasa a lima y la letra a la tinta que le
      corresponde a ese fondo, que es el par que si cumple. */
.film-ir-plano{cursor:pointer;font-family:inherit;
  font-size:var(--fs-xs);line-height:inherit;
  padding:var(--sp-2) var(--sp-8);border-radius:var(--r-pill);
  border:var(--hair-soft);background:var(--surface-alt);color:var(--text);
  white-space:nowrap;transition:background var(--mov-rapido),color var(--mov-rapido)}
.film-ir-plano:hover{background:var(--brand);color:var(--on-accent);
  border-color:var(--brand)}
.film-ir-plano:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* LAS PILDORAS, EN TEMA OSCURO. El CEO: «en dark mode, destacar mejor todas las
   etiquetas, la mayoria se pierden con el fondo casi». Medido: el fondo de la
   pildora (`--surface-alt`, #2A261F) y el de la tarjeta son casi el mismo
   color, asi que la pildora no tiene silueta y parece texto suelto.
   No se les cambia el color, que romperia la paleta: se les da un filete que
   las recorta contra el fondo, y algo mas de peso a su letra. */
:root[data-theme="dark"] .chip,
:root:not([data-theme="light"]) .chip,
:root[data-theme="dark"] .film-ir-plano,
:root:not([data-theme="light"]) .film-ir-plano{
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  font-weight:var(--w-medio)}

/* --- La etiqueta del plan de sonido, que se cortaba (2026-08-14) ---------- */
/* La pildora del sistema va en una sola linea (`white-space:nowrap`), asi que
   un rotulo largo como «Bloque 5 · Plano 08 (las constelaciones y la ultima
   brasa)» se cortaba contra el borde de la tarjeta y no habia forma de leerlo
   entero. Dentro de una tarjeta de pelicula las pildoras pueden envolver. */
.film-card .filters{flex-wrap:wrap;align-items:flex-start}
.film-card .filters .chip{white-space:normal;overflow:visible;text-overflow:clip;
  max-width:100%;height:auto;text-align:left;line-height:1.35}
/* El bloque es la agrupacion del plan de sonido, no un dato de la toma: se dice
   en voz mas baja que el plano, que es lo que se pulsa. */
.chip.film-chip-bloque{color:var(--muted);font-weight:var(--w-medio)}
.chip.film-chip-titulo{color:var(--text)}

/* --- Todas las imagenes de la ficha, en la ficha (2026-08-15) ------------- */
/* La tarjeta ensenaba solo el ancla y escondia el resto detras del boton de ver
   la ficha: un personaje con siete imagenes generadas ensenaba una. Ahora la
   primera va grande y las demas debajo, en una fila que se puede recorrer. */
.film-tarjeta-tiras{display:grid;gap:var(--sp-8);padding:var(--sp-8);
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.film-tira{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.film-tira-foto{position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--surface-alt);border:var(--hair-soft)}
.film-tira-foto img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
/* La lupa de una miniatura va mas pequena que la de la imagen grande, y solo
   aparece al pasar por encima o al enfocarla con el teclado: en una fila de
   seis, seis lupas siempre visibles tapan las imagenes. */
.film-tira-foto .film-lupa{width:26px;height:26px;opacity:0;transition:opacity .12s}
.film-tira-foto:hover .film-lupa,
.film-tira-foto:focus-within .film-lupa{opacity:1}
.film-tira-pie{font-size:var(--fs-xs);color:var(--muted);line-height:1.3;
  text-align:left;overflow-wrap:anywhere}

/* --- Quien se arrodilla por quien ------------------------------------------ */
/* En esta pelicula hay DOS duelos el mismo dia y un espadachin pelea los dos, asi
   que quien es el segundo de quien no se retiene: hay que verlo en la tarjeta.
   Va la primera de la fila y con fondo lleno para separarla de las etiquetas de
   inventario que van al lado (la edad, cuantas imagenes lleva).
   NO se inventa color: se reutiliza el mismo par que ya usa `.chip.film-el.is-done`,
   que esta medido en contraste y aprobado en los dos temas. */
.chip.film-chip-duelo{
  background:var(--tag-a);
  color:var(--on-accent);
  border-color:var(--tag-a);
  font-weight:var(--w-fuerte);
  white-space:normal;
}
.chip.film-chip-duelo:hover{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}
[data-theme="dark"] .chip.film-chip-duelo{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}
[data-theme="dark"] .chip.film-chip-duelo:hover{background:var(--tag-a);color:var(--on-accent);border-color:var(--tag-a)}

/* LAS FICHAS DE VOZ.
   Dos elementos de esta pelicula son lineas habladas y no cosas que se ven. Su
   panel sustituye al hueco de imagen, asi que ocupa esa columna entera y tiene
   que leerse solo. Reutiliza los tokens ya verificados del sistema: nada de
   colores sueltos. */
.film-voz{ align-self:start; }
.film-voz-replicas{ margin-top:var(--space-4, 1rem); display:grid; gap:var(--space-3, .75rem); }
.film-voz-linea{
  margin:0; padding:var(--space-3, .75rem) var(--space-4, 1rem);
  border-left:2px solid var(--tag-a, currentColor);
  background:var(--surface-2, transparent);
  border-radius:var(--radius-sm, 6px);
  font-style:italic;
}
.film-voz-plano{
  display:block; margin-bottom:.25rem;
  font-style:normal; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  opacity:.7;
}
/* La ficha de voz no tiene columna de imagen, asi que su rejilla es otra: el
   panel arriba y la ficha debajo, o las dos al lado en pantalla ancha. */
.film-subject-main--voz{ align-items:start; }

/* TARJETAS COMPACTAS (CEO, 2026-08-18).
   Imagen, titulo, etiquetas y tres botones. Todo lo demas vive en el modal.
   Con 38 planos y 22 fichas, la rejilla solo sirve si cada pieza cabe de un
   vistazo. Reutiliza los tokens ya verificados, cero colores sueltos. */
.film-compacta{ display:flex; flex-direction:column; }
.film-compacta-cuerpo{
  display:flex; flex-direction:column; gap:var(--space-2, .5rem);
  padding:var(--space-4, 1rem);
}
.film-compacta-chips{ margin:0; }
.film-compacta-pie{
  display:flex; flex-wrap:wrap; gap:var(--space-2, .5rem);
  margin-top:auto; padding-top:var(--space-3, .75rem);
}
.film-compacta-pie .btn-ghost{ flex:0 1 auto; }

/* LA TIRA DE MINIATURAS SALE DE LA TARJETA (CEO, 2026-08-18).
   Medido en el tablero publicado: con siete imagenes, esa tira sola medía 1.399
   de los 1.863 pixeles de la tarjeta. La foto ancla se queda, que es la que
   identifica la ficha de un vistazo; las demas se ven todas al pulsar «Abrir»,
   con su prompt al lado, que es donde se miran de verdad. */
.film-tarjeta.film-compacta .film-tarjeta-tiras{ display:none; }
.film-tarjeta.film-compacta .film-tarjeta-pie{
  display:flex; flex-wrap:wrap; gap:var(--space-2, .5rem);
  margin-top:auto; padding-top:var(--space-3, .75rem);
}

/* EL STORYBOARD (CEO, 2026-08-18).
   Un fotograma por plano en el formato de la pelicula, 21:9, en una rejilla mas
   ancha que la de fichas para que la panoramica se lea. */
.film-sb-foto{ aspect-ratio:21/9; overflow:hidden; border-radius:var(--radius-sm,6px); }
.film-sb-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.film-sb-vacia{
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2,transparent); color:var(--text-3,inherit);
  font-size:.85rem; letter-spacing:.04em;
}

/* EL STORYBOARD EN SECUENCIA (CEO, 2026-08-20).
   Una tarjeta por PLANO, con sus frames en fila dentro. La fila se desplaza a lo
   ancho si no caben, que es como se lee un storyboard de verdad. */
/* CUATRO COLUMNAS, como el resto del tablero. Antes esta regla forzaba UNA sola
   columna y pisaba a la de arriba, asi que cada plano salia como una franja de
   lado a lado: filas, no tarjetas. */
.film-rejilla-sb{ grid-template-columns:repeat(4,1fr); gap:var(--sp-4,16px); }
@media(max-width:1100px){ .film-rejilla-sb{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .film-rejilla-sb{ grid-template-columns:1fr; } }
.film-sb-cab{ padding:var(--space-4,16px) var(--space-4,16px) 0; }
/* Los fotogramas de un plano, en rejilla de dos dentro de su tarjeta. Antes era una
   tira horizontal que se desplazaba, y eso solo funciona a lo ancho de la pantalla:
   dentro de una tarjeta de un cuarto quedaba un carrusel diminuto. */
.film-sb-tira{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2,8px); padding:var(--sp-3,12px);
}
.film-sb-frame{
  /* Ocupa su hueco de la rejilla. Con ancho fijo se salia de la tarjeta. */
  width:100%; margin:0; border-radius:var(--r-sm); overflow:hidden;
}
.film-sb-frame img{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }
.film-sb-frame figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 2px 0; font-size:.78rem;
}
.film-sb-num{ opacity:.65; font-variant-numeric:tabular-nums; }
.film-sb-copiar{
  border:0; background:none; cursor:pointer; font:inherit; padding:0;
  color:var(--accent-ink,inherit); text-decoration:underline; text-underline-offset:2px;
}
.film-sb-frame-vacio{ display:grid; place-items:center; aspect-ratio:21/9;
  background:var(--surface-2,transparent); color:var(--text-3,inherit); }

/* EL BOTON DE IDIOMA (CEO, 2026-08-21).
   Dos letras, la activa marcada y la otra apagada, para que se vea a la vez en
   que idioma estas y a cual vas. Mismo tamano y misma caja que el boton de tema,
   que es su vecino en la barra. */
#lang-btn{
  /* INTERRUPTOR (CEO, 2026-10-14: «cuesta mucho clicarlo, hazlo toggle»). Las dos opciones
     a la vista, la activa rellena, y todo el control es un solo botón de 92 por 38: un
     clic en cualquier parte cambia de idioma. */
  display:inline-grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-width:92px; height:38px; padding:3px; gap:2px; flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--text) 45%,transparent); border-radius:999px;
  background:color-mix(in srgb,var(--text) 8%,transparent); cursor:pointer; font:inherit;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; line-height:1; color:inherit;
}
#lang-btn .lang-op{
  display:flex; align-items:center; justify-content:center; padding:0 10px;
  border-radius:999px; opacity:.6; transition:background .15s ease,color .15s ease,opacity .15s ease;
}
#lang-btn .lang-op.is-on{ background:var(--ink); color:var(--on-ink); opacity:1; }
#lang-btn:hover{ border-color:color-mix(in srgb,var(--text) 75%,transparent); }
#lang-btn:hover .lang-op:not(.is-on){ opacity:.9; }
#lang-btn:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

/* ===== PLAN DE REDES ======================================================
   La creatividad se VE dentro de su tarjeta. Una tarjeta que solo nombra el
   archivo obliga a abrir el explorador para saber qué es, y con veinticuatro
   piezas eso son veinticuatro viajes. Todos los colores salen de las variables
   del sistema: aquí no se escribe ni un valor de color a mano. */

.film-redes-grid{ gap:var(--sp-5,20px); }

.film-redes .card__b{ display:flex; flex-direction:column; gap:var(--sp-3,12px); }

.film-redes-top{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2,8px);
}

/* Una sola pieza: se ve entera, sin recortar, sobre el fondo de la tarjeta. */
.film-redes-media{
  margin:0; border-radius:var(--radius-2,10px); overflow:hidden;
  background:var(--surface-2,transparent);
}
.film-redes-m{ margin:0; }
.film-redes-m img,
.film-redes-m video{
  display:block; width:100%; height:auto; border-radius:var(--radius-2,10px);
}

/* Un carrusel: sus láminas en fila, y la fila se desplaza sola. El desbordamiento
   se queda DENTRO de este contenedor: si se dejara al documento, la página entera
   se movería de lado en el móvil. */
.film-redes-tira{
  display:flex; gap:var(--sp-2,8px); overflow-x:auto; padding-bottom:var(--sp-2,8px);
  scroll-snap-type:x mandatory; background:transparent;
}
.film-redes-tira .film-redes-m{
  flex:0 0 auto; width:min(46%,190px); position:relative; scroll-snap-align:start;
}
.film-redes-tira .film-redes-m figcaption{
  position:absolute; left:6px; top:6px; padding:1px 7px;
  border-radius:var(--radius-1,6px); font-size:.68rem; line-height:1.6;
  background:var(--surface-1,transparent); color:var(--text-2,inherit);
  backdrop-filter:blur(6px);
}

/* El botón de copiar de la tabla de cuentas va pegado a su dato, no al final
   de la fila: así se ve de quién es sin leer la cabecera. */
.film-tabla td .film-copy{ margin-left:var(--sp-2,8px); }

/* TRES COLUMNAS EN EL PLAN DE REDES (CEO, 2026-08-30).
   Con una tarjeta por fila la seccion pide veinticuatro pantallas de bajada. A tres
   columnas cabe una semana entera de un vistazo. Debajo de 1100 px pasa a dos, y en
   movil a una: forzar tres en un telefono deja las tarjetas ilegibles. */
.card-grid.film-redes-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
@media (max-width:1100px){
  .card-grid.film-redes-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .card-grid.film-redes-grid{ grid-template-columns:1fr; }
}
/* A tres columnas la tira de laminas de un carrusel necesita laminas mas estrechas,
   o se sale de su caja. El desbordamiento se queda DENTRO de la tira. */
.film-redes-grid .film-redes-tira .film-redes-m{ width:min(60%,140px); }

/* LAS CASILLAS QUE HAY QUE MARCAR AL PUBLICAR, dentro de la ventana de una pieza.
   Una tabla pequeña por red, para poder ir marcando con la vista sin leer prosa. */
.film-cal-ajuste{ margin-top:var(--sp-3,12px); }
.film-cal-ajuste-red{ margin-bottom:var(--sp-2,8px); }
.film-cal-ajuste .tabla th{
  width:42%; text-align:left; font-weight:600; vertical-align:top;
  font-size:var(--fs-sm); line-height:var(--lh-normal);
}
.film-cal-ajuste .tabla td{
  font-size:var(--fs-sm); line-height:var(--lh-normal); vertical-align:top;
}

/* ===== EL CALENDARIO DEL PLAN DE REDES, EN REJILLA DE MES ====================
   Siete columnas, un bloque por mes. Sirve para ver la forma del mes de un vistazo:
   dónde hay hueco, dónde se amontona, qué día está vacío. Eso no se puede hacer con
   una lista que obliga a bajar. Todos los colores salen del sistema, ninguno a mano. */

.film-redes-pest{ margin-bottom:var(--sp-3,12px); }
.film-cal{ display:flex; flex-direction:column; gap:var(--sp-8,32px); }
.film-mes .film-sub-h{ margin-bottom:var(--sp-3,12px); }

.film-mes-cab,
.film-mes-rejilla{
  /* Diez píxeles entre días, no cuatro. Con cuatro las cajas se tocaban y el mes se
     leía como una rejilla continua en vez de como días sueltos. */
  /* MEDIDO: --sp-3 vale 4 px, no 10. La escala de espaciados de esta casa no va
     de cuatro en cuatro; el de 10 px es --sp-9 y el de 14 es --sp-12. Pedir una
     variable por el numero que uno espera, en vez de por lo que vale, es lo que
     dejo este calendario igual de apretado despues de 'arreglarlo'. */
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--sp-9,10px);
}
.film-mes-dia-sem{
  padding:var(--sp-1,4px) var(--sp-2,8px);
  font-family:var(--mono); font-size:var(--fs-2xs); line-height:var(--lh-normal);
  letter-spacing:var(--ls-rotulo); text-transform:uppercase; color:var(--muted);
}
.film-mes-rejilla{ margin-top:var(--sp-1,4px); }

.film-mes-celda{
  /* Más aire dentro del día: de 8 a 14 píxeles. El número y las piezas se pegaban al
     borde de su caja, que es lo que hacía que todo pareciera apretado. */
  min-height:118px; padding:var(--sp-12,14px);
  background:var(--surface); border:var(--hair-soft); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:var(--sp-1,4px);
}
.film-mes-celda.es-fuera{ background:transparent; border:0; min-height:0; }
.film-mes-celda.es-vacia{ background:var(--surface-alt); }
/* El día de hoy y las dos fechas del festival se distinguen por su FONDO, nunca por
   una banda lateral gruesa, que está vetada en cualquier tablero de la casa. */
.film-mes-celda.es-hoy{ background:var(--surface-alt); outline:2px solid var(--accent-deep); }
.film-mes-celda.es-hito{ background:var(--surface-alt); }

.film-mes-num{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-1,4px);
  font-family:var(--mono); font-size:var(--fs-xs); line-height:1.4; color:var(--ink);
}
.film-mes-cuenta{ font-size:var(--fs-2xs); color:var(--muted); }
.film-mes-hito{
  font-size:var(--fs-2xs); line-height:var(--lh-normal); color:var(--accent-ink);
  font-weight:600;
}

/* UNA PUBLICACIÓN DENTRO DE SU DÍA. Pequeña a propósito: aquí se reconoce, no se lee.
   Lo que hay que leer está en su ficha, a un clic. */
.film-mes-pieza{
  display:flex; align-items:center; gap:var(--sp-2,8px); width:100%;
  padding:3px; border:0; border-radius:var(--r-sm); cursor:pointer;
  background:var(--surface-alt); text-align:left; overflow:hidden;
}
.film-mes-pieza:hover{ background:var(--bg); }
.film-mes-pieza.es-hecha{ opacity:.55; }
.film-mes-mini{
  flex:0 0 auto; width:30px; height:40px; border-radius:var(--r-sm);
  overflow:hidden; background:var(--bg); display:block;
}
.film-mes-mini img,
.film-mes-mini video{ display:block; width:100%; height:100%; object-fit:cover; }
.film-mes-sin{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:var(--fs-2xs); color:var(--muted);
}
.film-mes-txt{ min-width:0; display:flex; flex-direction:column; }
.film-mes-hora{
  font-family:var(--mono); font-size:var(--fs-2xs); line-height:1.4; color:var(--muted);
}
.film-mes-nombre{
  font-size:var(--fs-2xs); line-height:1.35; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.film-mes-donde{
  font-family:var(--mono); font-size:var(--fs-2xs); line-height:1.4; color:var(--muted);
}

/* En pantalla estrecha siete columnas no caben: pasa a dos, y la rejilla deja de ser
   un mes para ser una lista compacta, que en un teléfono es lo que se puede leer. */
@media (max-width:1000px){
  .film-mes-cab{ display:none; }
  .film-mes-rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .film-mes-celda.es-fuera{ display:none; }
}
@media (max-width:560px){
  .film-mes-rejilla{ grid-template-columns:1fr; }
}

/* LAS IMÁGENES DE LA VENTANA, A UN TAMAÑO PRÁCTICO.
   Salían a todo lo ancho, y una lámina vertical de 1080 x 1350 ocupaba pantalla y
   media: para ver el pie de foto había que bajar tres veces. El CEO: «las imágenes
   las has puesto exageradamente enormes, sé práctico». Ahora la pieza se ve entera
   sin llenar la ventana, y lo que se lee queda al alcance. */
#dv .film-redes-media{ max-width:300px; }
#dv .film-redes-m img,
#dv .film-redes-m video{ max-height:420px; width:auto; max-width:100%; }
#dv .film-redes-tira{ max-width:100%; }
#dv .film-redes-tira .film-redes-m{ width:min(40%,120px); }
#dv .film-redes-tira .film-redes-m img,
#dv .film-redes-tira .film-redes-m video{ width:100%; max-height:none; }

/* EL NUMERO DEL DIA, CUANDO SE PUEDE PULSAR. Tiene que verse que es un botón sin
   parecer un botón dentro de una casilla pequeña: se apoya en el subrayado al pasar
   por encima y en el cambio de fondo, no en un marco. */
.film-mes-abre{
  width:100%; border:0; background:transparent; cursor:pointer; text-align:left;
  padding:2px 3px; border-radius:var(--r-sm);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-1,4px);
  font-family:var(--mono); font-size:var(--fs-xs); line-height:1.4; color:var(--ink);
}
.film-mes-abre:hover{ background:var(--bg); text-decoration:underline; }

/* UN BLOQUE POR PUBLICACIÓN DENTRO DE LA VENTANA DEL DÍA. Separados por una línea fina,
   para que se lean como una lista de tareas y no como un texto continuo. */
.film-dia-bloque{ padding:var(--sp-5,20px) 0; }
.film-dia-bloque + .film-dia-bloque{ border-top:var(--hair-soft); }
.film-dia-cab{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2,8px);
  margin-bottom:var(--sp-3,12px);
}
.film-dia-nombre{
  font-size:var(--fs-md); line-height:var(--lh-subtitulo); font-weight:600;
  color:var(--ink);
}

/* ===== ASSETS · TODAS LAS TARJETAS DEL MISMO TAMAÑO, A CUATRO COLUMNAS ==========
   El CEO: «que metas todas las tarjetas del mismo tamaño, a 4 columnas». En la versión
   anterior una tarjeta con seis láminas ocupaba el triple que una con una sola imagen,
   así que la rejilla quedaba con agujeros y no se podía comparar nada de un vistazo.
   Aquí la imagen vive dentro de una caja de proporción fija y lo que sobra se recorta,
   que es como funciona la cuadrícula de un perfil de verdad. */

.card-grid.film-assets-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-4,16px);
  align-items:stretch;
}
@media (max-width:1400px){
  .card-grid.film-assets-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1000px){
  .card-grid.film-assets-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .card-grid.film-assets-grid{ grid-template-columns:1fr; }
}

.film-asset{ display:flex; flex-direction:column; overflow:hidden; }
.film-asset.es-hecha{ opacity:.62; }

/* LA CAJA DE LA IMAGEN, con proporción fija 4:5. Es la que iguala las tarjetas: sin
   ella, cada creatividad impone su propia altura y la fila se descuadra. */
.film-asset-img{
  position:relative; display:block; width:100%; aspect-ratio:4 / 5;
  padding:0; border:0; background:var(--surface-alt); cursor:pointer; overflow:hidden;
}
.film-asset-img img,
.film-asset-img video{
  display:block; width:100%; height:100%; object-fit:cover;
}
.film-asset-sin{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:var(--fs-xs); line-height:var(--lh-normal); color:var(--muted);
  text-align:center; padding:var(--sp-4,16px);
}
/* Cuántas láminas más lleva detrás ese carrusel. */
.film-asset-n{
  position:absolute; right:8px; bottom:8px; padding:2px 8px;
  border-radius:var(--r-pill); font-family:var(--mono); font-size:var(--fs-2xs);
  line-height:1.7; background:var(--surface); color:var(--ink);
  border:var(--hair-soft);
}

.film-asset-pie{
  display:flex; flex-direction:column; gap:var(--sp-2,8px);
  padding:var(--sp-3,12px); flex:1 1 auto;
}
.film-asset-top{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1,4px); }
.film-asset-t{
  font-size:var(--fs-sm); line-height:var(--lh-subtitulo); font-weight:600;
  color:var(--ink);
}
/* El nombre del archivo puede desbordar hacia los lados DENTRO de su caja, nunca
   arrastrando la página. */
.film-asset-arch{
  font-size:var(--fs-2xs); line-height:var(--lh-normal); color:var(--muted);
  overflow-x:auto; white-space:nowrap; max-width:100%;
}
/* El botón de hecho se pega abajo, para que todas las tarjetas lo tengan a la misma
   altura aunque su título ocupe una línea más. */
.film-asset .film-subject-st{ margin-top:auto; }

/* --- La caja de cifras que se abre, y su desglose ------------------------- */
/* Una caja que dice «52 de 53» y no dice CUAL falta obliga a contar a mano. Se
   pulsa y se abre la lista. Como se comporta como un boton, se ve que lo es: el
   cursor cambia, se levanta al senalarla y tiene aro de foco para el teclado. */
.stat.film-stat-abre{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease,
                      border-color .12s ease; }
.stat.film-stat-abre:hover{ transform:translateY(-2px);
                            box-shadow:0 6px 18px rgba(0,0,0,.14);
                            border-color:var(--tag-a); }
.stat.film-stat-abre:focus-visible{ outline:2px solid var(--tag-a); outline-offset:2px; }

/* La lista del desglose: una pieza por fila, con su pastilla y, al lado, en que
   planos sale. Sin viñetas, porque la pastilla ya es la marca. */
.film-desg-lista{ list-style:none; margin:var(--sp-3,12px) 0 var(--sp-6,24px);
                  padding:0; display:flex; flex-direction:column; gap:var(--sp-2,8px); }
.film-desg-fila{ display:flex; align-items:center; gap:var(--sp-3,12px);
                 flex-wrap:wrap; }
.film-desg-fila .chip{ flex:0 0 auto; }
.film-desg-donde{ font-size:var(--fs-xs); }
.film-desg-hechos{ margin-top:var(--sp-4,16px); }
.film-desg-hechos > summary{ cursor:pointer; font-weight:var(--w-medio);
                             padding:var(--sp-2,8px) 0; }

/* --- El pie de una tarjeta ------------------------------------------------ */
/* Quien la lleva a la izquierda, el boton de hecho a la derecha, en la MISMA
   linea. Antes el boton heredaba del sistema un `flex:1 1 0`, que dentro de un
   pie en fila lo manda a una linea suya y lo deja centrado y suelto: parecia un
   boton perdido en medio de la tarjeta, sin relacion con nada. */
.film-card .card__foot{ display:flex; flex-wrap:wrap; align-items:center;
                        justify-content:flex-start; gap:var(--sp-2,8px); }
.film-card .card__foot > *{ flex:0 0 auto; }
/* MEDIDO a cuatro columnas: el pie se queda en 224 px y el selector de
   responsable pide 168, asi que con el boton al lado hacen falta 242. No caben,
   y el pie parte en dos lineas por narices. Lo que estaba mal no era la segunda
   linea: era que el boton se quedaba CENTRADO y estrecho en medio de ella,
   flotando, sin relacion con la tarjeta. Ocupando su linea entera se lee como el
   pie que es. Y cuando si cabe todo en una, crece hasta el borde derecho y queda
   enfrentado al selector, que es la lectura correcta en tarjetas anchas. */
.film-card .card__foot > .btn-ghost{ flex:1 1 auto; justify-content:center; }

/* --- Los cuatro botones que no llevaban el redondeo de la casa -------------- */
/* En esta casa todo boton va con el redondeo completo, y estos cuatro no. Cada
   uno por un motivo distinto, y ninguno era una decision de diseno:

     - «Done»  : el sistema le pone redondeo completo, pero una regla del tablero
                 de peliculas, `.card__foot .btn-ghost`, se lo bajaba a 12 px. Esa
                 regla vive en una hoja que esta COPIADA en las ocho peliculas, asi
                 que se corrige desde aqui, que es hoja propia y tiene un solo
                 original, en vez de editar ocho copias.
     - ir a ficha y responsable : pedian el redondeo de CAMPO de formulario.
     - «prompt» del storyboard  : no pedia ninguno, se quedaba en cero. */
.film-card .card__foot .btn-ghost,
.card__foot .btn-ghost.stbtn,
.ficha-ir,
.film-resp-btn,
.film-sb-copiar{ border-radius:var(--r-pill); }
/* El enlace del storyboard es de texto suelto: sin algo de aire a los lados, un
   borde redondeado no se ve porque no hay fondo que redondear. */
.film-sb-copiar{ padding:2px var(--sp-3,10px); }

/* --- La ventana de una pieza de redes -------------------------------------- */
/* La creatividad y sus datos, uno al lado del otro. Antes la ficha iba debajo de la
   imagen y entre las dos ocupaban una pantalla entera antes de llegar a los copies,
   que es a lo que se entra. */
.film-redes-cab{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:var(--sp-6,24px); align-items:start; margin:var(--sp-6,24px) 0;
}
@media(max-width:760px){ .film-redes-cab{ grid-template-columns:1fr; } }
.film-redes-cab-media img,
.film-redes-cab-media video{ width:100%; height:auto; border-radius:var(--r-md); }

.film-redes-pies{ margin-top:var(--sp-13,16px); }

/* LAS REDES EN REJILLA DE CUATRO, no en filas. Cerradas, cada una es una tarjetita
   con su nombre y cuántos campos tiene: las siete caben en dos alturas y se eligen
   de un vistazo. En filas, cada una gastaba el ancho entero de la ventana para
   decir dos palabras. */
.film-red-lista{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-9,10px); align-items:start;
}
@media(max-width:900px){ .film-red-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px){ .film-red-lista{ grid-template-columns:1fr; } }

.film-red-bloque{ margin:0; }
/* La que se ABRE se estira a todo lo ancho de la rejilla. Un pie de mil trescientos
   caracteres dentro de una columna de un cuarto queda en un chorro estrecho y muy
   alto que nadie lee, y encima empuja a las otras tres hacia abajo. */
.film-red-bloque[open]{ grid-column:1 / -1; }
.film-red-aviso{ margin:0 0 var(--sp-3,12px); font-size:var(--fs-sm); }
.film-red-casillas{ margin-top:var(--sp-4,16px); }

/* --- Los filtros del calendario -------------------------------------------- */
/* Cada fila con su rótulo delante, y las dos dentro de un panel: antes eran veinte
   pastillas seguidas y no se sabía cuál filtraba qué. */
.film-filtro-panel{
  background:var(--surface); border:var(--hair-soft); border-radius:var(--r-md);
  padding:var(--sp-4,16px); margin:var(--sp-5,20px) 0;
  display:flex; flex-direction:column; gap:var(--sp-4,16px);
}
.film-filtro-fila{ display:flex; align-items:flex-start; gap:var(--sp-4,16px); }
@media(max-width:760px){ .film-filtro-fila{ flex-direction:column; gap:var(--sp-2,8px); } }
.film-filtro-rotulo{
  flex:0 0 auto; min-width:112px; padding-top:6px;
  font-family:var(--mono); font-size:var(--fs-2xs); line-height:var(--lh-normal);
  letter-spacing:var(--ls-rotulo); text-transform:uppercase; color:var(--muted);
}
.film-filtro-fila .filters{ margin:0; }

/* --- La caja de un pie de foto, y la señal de que se abre ------------------ */
/* Plegada, una caja del sistema es una barra muda: nada dice que dentro hay algo.
   Se le pone flecha y, mientras está cerrada, la línea de que hay texto esperando.
   Al abrirla esa línea desaparece, porque ya se ve el texto y sobra. */
.film-abre-chev{
  width:18px; height:18px; flex:0 0 auto; color:var(--muted);
  transition:transform .16s ease;
}
details[open] > summary .film-abre-chev{ transform:rotate(180deg); }
.film-abre-pista{ color:var(--muted); }
details[open] > summary .film-abre-pista{ display:none; }
/* Toda la barra plegada se comporta como lo que es: algo que se pulsa. */
.film-caja-texto > summary,
.film-red-bloque > summary{ cursor:pointer; }
.film-caja-texto > summary:hover .film-abre-chev,
.film-red-bloque > summary:hover .film-abre-chev{ color:var(--ink); }

/* --- El botón de descargar una creatividad --------------------------------- */
/* EN OSCURO SE PERDIA (CEO, 2026-09-04): el estilo fantasma de la casa es texto gris
   sobre fondo oscuro, y al lado de «Marcar publicada» desaparecía. Se le pone la flecha
   y el lima de la casa, con filete de UN pixel.
   NO lleva relleno sólido ni borde grueso: el borde grueso decorativo está prohibido, y
   rellenarlo lo pondría a competir con el botón de estado, que es el que manda. */
.film-bajar{
  margin-right:var(--sp-9,10px);
  display:inline-flex; align-items:center; gap:var(--sp-3,6px);
  color:var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent);
}
.film-bajar-ico{ width:16px; height:16px; flex:0 0 auto; }
.film-bajar:hover{
  color:var(--accent-ink);
  border-color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent-ink) 12%, transparent);
}

/* ===== LAS HISTORIAS QUE SE TERMINAN A MANO (CEO, 2026-09-07) ====================
   El programador de publicaciones saca las historias limpias: no sabe poner la
   pegatina de mención, la encuesta ni el enlace. Las que traen eso escrito llevan una
   marca en la caja del día y en su fila, para que se vean al pasar la vista por el
   mes, y un aviso dentro de la ficha. Colores del sistema: el par de «pendiente de
   revisar» (`--warn` con `--on-solid`, el mismo que `.tag--warn` de los componentes;
   blanco encima en claro, tinta encima en oscuro) y la caja de nota (`--nota-bg`, la
   misma que `.film-conref`). Nada de banda lateral: el borde de la caja es de un
   píxel y va por los cuatro lados. */
.film-mes-alerta{
  display:inline-flex; align-items:center; align-self:flex-start; max-width:100%;
  font-family:var(--mono); font-size:var(--fs-2xs); line-height:1.4;
  font-weight:var(--w-fuerte); letter-spacing:.01em;
  padding:1px var(--sp-2,8px); border-radius:var(--r-pill);
  background:var(--warn); color:var(--on-solid);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.film-mes-aviso{ display:flex; }
.film-mes-pieza .film-mes-alerta{ margin-top:2px; }

.film-hist-aviso{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2,8px);
  margin:var(--sp-3,4px) 0 var(--sp-9,10px);
  padding:var(--sp-9,10px) var(--sp-12,14px);
  background:var(--nota-bg); border:1px solid var(--warn); border-radius:var(--r-md);
}
.film-hist-aviso p{
  margin:0; font-size:var(--fs-xs); line-height:var(--lh-normal); color:var(--text);
}

/* ===== X (CEO, 2026-09-07). Un post de solo texto no tiene archivo: la miniatura del día
   es la letra de la red, y en la ficha el texto va en una caja legible en vez del aviso
   de «sin archivo». Todo pedido al sistema. */
.film-mes-x{ font-family:var(--mono); font-weight:var(--w-max); font-size:var(--fs-xs); color:var(--text); }
.film-x-texto{
  white-space:pre-wrap; font-size:var(--fs-sm); line-height:var(--lh-lectura); color:var(--text);
  padding:var(--sp-12,14px); background:var(--surface-alt); border-radius:var(--r-md); max-width:520px;
}
.film-asset-x{
  white-space:normal; font-size:var(--fs-2xs); line-height:1.4; padding:var(--sp-9,10px);
  text-align:left; color:var(--text); overflow:hidden;
}

/* ===== SECUENCIAS DE ACCION, portadas de THE LORD IS WITH THEE (2026-10-08) ===== */
/* ===== SECUENCIAS DE ACCION ===============================================
   Canon del CEO, 2026-08-22. Tarjeta minimalista: sin imagen, sin borde grueso
   y sin banda lateral de color, que estan vetados. Lo que dice el estado es un
   punto y el pie, no un marco.

   LOS BOTONES SON LOS DEL SISTEMA (.btn-ghost y .btn-primary). Aqui solo se
   anade el ESTADO encendido y la colocacion, nunca un boton nuevo: inventarse
   uno es lo que dejo los tres controles como texto suelto apilado.

   Y NO HAY PANEL LATERAL: el detalle se abre en el modal central del sistema,
   igual que la ficha de un personaje o de un plano.
   ========================================================================== */

.seq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.seq-card{display:flex;flex-direction:column;gap:10px}
.seq-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seq-num{font-variant-numeric:tabular-nums}
.seq-link{cursor:pointer}
.seq-dot{width:9px;height:9px;border-radius:50%;margin-left:auto;flex:0 0 auto;
  background:var(--text-dim);transition:background .18s var(--ease,ease)}
.seq-is-aprobada .seq-dot{background:var(--accent-deep,var(--brand))}
.seq-is-denegada .seq-dot{background:var(--danger)}
.seq-title{margin:0}
.seq-meta{margin:0;font-size:var(--t-9b)}
.seq-lead{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seq-els{margin:0}
.seq-mas{cursor:pointer}

/* El pie: los tres controles en una fila, con Abrir separado a la derecha.
   Apilados en vertical era el defecto que el CEO senalo. */
/* La direccion se declara EXPRESA y con la especificidad suficiente: el sistema
   trae `.card__foot{flex-direction:column}` mas abajo en su hoja, y sin esto los
   tres controles salen apilados en vertical, que es el defecto que el CEO
   senalo el 2026-08-22. Medido en el navegador contra el servidor. */
.seq-card .card__foot.seq-foot{display:flex;flex-direction:row;flex-wrap:wrap;
  gap:8px;align-items:center;justify-content:flex-start;margin-top:auto}
.seq-card .card__foot.seq-foot .btn-ghost{cursor:pointer;flex:0 0 auto}
.seq-card .card__foot.seq-foot .btn-primary{margin-left:auto}
.seq-ok.is-on{background:var(--brand);color:var(--on-accent);border-color:transparent}
.seq-no.is-on{background:var(--danger);color:var(--on-solid);border-color:transparent}

/* El punto de color no basta para quien no distingue verde de rojo. */
.seq-is-aprobada .seq-lead{opacity:.72}
.seq-is-denegada .seq-title{text-decoration:line-through;text-decoration-thickness:1px}

.seq-chip-aprobada{background:var(--brand);color:var(--on-accent)}
.seq-chip-denegada{background:var(--danger);color:var(--on-solid)}

/* ---- el detalle, dentro del modal central ---- */
.seq-chips{margin-bottom:12px}
.seq-pasos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.seq-pasos li{line-height:1.55}
.seq-t{font-variant-numeric:tabular-nums;white-space:nowrap}
.seq-dialogo{display:flex;flex-direction:column;gap:7px}
.seq-line{margin:0;display:flex;gap:12px;align-items:baseline}
.seq-who{flex:0 0 auto;min-width:108px;font-variant-caps:all-small-caps;
  letter-spacing:.04em;color:var(--text-soft)}
.seq-said{flex:1 1 auto}
.seq-clear{margin:16px 0}
.seq-puerta{margin:18px 0}
.seq-puerta-acc{margin-top:12px}

@media (max-width:640px){
  .seq-who{min-width:0;flex-basis:100%}
  .seq-line{flex-wrap:wrap;gap:2px}
  .seq-foot .btn-primary{margin-left:0}
}

/* CORTOS DE PERSONAJE (2026-10-09). Un reel es vertical: a todo el ancho de la ficha mediria mas
   que la pantalla. Se le pone un tope de alto y conserva su proporcion, sin recortar. */
.film-corto-video{width:auto;max-width:100%;max-height:70vh;margin-left:auto;margin-right:auto;background:var(--surface-alt)}

/* LA BARRA DEL VISOR, DENTRO DE SU COLUMNA (2026-10-11). El visor es de dos columnas desde el
   2026-08-14 y su barra de anterior y siguiente va al pie de la columna derecha, sobre su
   propia superficie. Mas arriba quedo el bloque del visor anterior, que la sacaba al pie de
   la pantalla con letra clara pensada para ir sobre el velo oscuro: sobre la superficie de
   ahora, el contador y los dos botones no se leian en ninguno de los dos temas (medido en
   Zero Gravity y en Borrowed Wounds: contador en el color de la superficie, botones en
   blanco). La letra pasa a la del sistema en todos los anchos, y en pantalla ancha la barra
   vuelve a su columna. */
#lb .film-lb-bar .film-lb-n{color:var(--text-dim)}
#lb .film-lb-bar .btn-ghost{background:transparent;color:var(--text);border:var(--hair-soft)}
#lb .film-lb-bar .btn-ghost:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media(min-width:1101px){
  #lb .film-lb-col .film-lb-bar{position:static;left:auto;right:auto;bottom:auto;justify-content:space-between}
}
/* Con el visor abierto, el boton de volver arriba se aparta: flota por encima de todo y caia
   sobre la esquina de «Siguiente». */
html:has(#lb.film-lb.open) #scroll-top{opacity:0;pointer-events:none}

/* ===== PRESUPUESTO · MAQUETA DE INFORME (2026-10-13) =======================
   El CEO rechazo la version anterior por apilar tablas: «maqueta eso mejor, eso
   mas high end report». Lo que manda esta jerarquia:

   · UNA cifra enorme arriba, con las otras tres de apoyo a su lado.
   · Las rutas como tarjetas con barra a escala, no como tablas seguidas.
   · El reparto del gasto en una barra por partidas con su leyenda.
   · El detalle fino, detras de un boton, en el panel.

   Todo con los tokens del kit (sin colores nuevos): el acento es `--tag-a`, el
   fondo `--surface`, los filetes `--hair-soft`. Los tramos de la barra son el
   MISMO acento a distintas opacidades, que es como se dibuja una serie sin
   inventarse una paleta. Cero bordes gruesos decorativos (vetados en la casa). */

.bg-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-12);
  align-items:stretch;margin:var(--sp-11) 0 var(--sp-12)}
.bg-hero__main{background:var(--surface);border-radius:var(--r-in);padding:var(--sp-14);
  box-shadow:0 1px 0 var(--hair-soft),0 18px 40px rgba(0,0,0,.05);display:flex;
  flex-direction:column;gap:var(--sp-6);min-width:0}
.bg-hero__k{font-size:var(--fs-xs);font-weight:var(--w-fuerte);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim)}
.bg-hero__n{font-family:var(--display,inherit);font-size:clamp(44px,6.4vw,76px);line-height:.98;
  font-weight:var(--w-fuerte);letter-spacing:-.03em;color:var(--text)}
.bg-hero__t{font-size:var(--fs-lg);font-weight:var(--w-fuerte);color:var(--text)}
.bg-hero__p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-dim);max-width:62ch}
.bg-apoyos{display:flex;flex-direction:column;gap:var(--sp-7);min-width:0}
.bg-apoyo{background:var(--surface-alt);border-radius:var(--r-in);padding:var(--sp-10) var(--sp-11);
  display:flex;flex-direction:column;gap:2px;flex:1;justify-content:center;min-width:0}
.bg-apoyo__n{font-size:var(--fs-xl);font-weight:var(--w-fuerte);letter-spacing:-.02em;color:var(--text)}
.bg-apoyo__l{font-size:var(--fs-2xs);font-weight:var(--w-fuerte);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim)}
.bg-apoyo__d{font-size:var(--fs-xs);color:var(--text-dim)}

/* los pares dato-valor, que son la misma pieza en el hero y en cada ruta */
.bg-kvs{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-11);margin-top:auto;
  padding-top:var(--sp-8);border-top:1px solid var(--hair-soft)}
.bg-kv{display:flex;flex-direction:column;gap:1px;min-width:0}
.bg-kv__k{font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.bg-kv__v{font-size:var(--fs-md);font-weight:var(--w-fuerte);color:var(--text);font-variant-numeric:tabular-nums}

.bg-rutas{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:var(--sp-11)}
.bg-ruta{background:var(--surface);border-radius:var(--r-in);padding:var(--sp-12);
  box-shadow:0 1px 0 var(--hair-soft);display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
.bg-ruta--mejor{background:var(--surface-alt);box-shadow:0 1px 0 var(--hair-soft),0 10px 30px rgba(0,0,0,.06)}
/* Las cuatro tarjetas se leen en fila, asi que sus piezas tienen que estar a la
   misma altura: un titulo de dos lineas en una y de una en otra descuadraba la
   cifra, la barra y los datos de debajo. Se reserva el alto de dos lineas. */
.bg-ruta__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);
  min-height:2.7em}
.bg-ruta__t{margin:0;font-size:var(--fs-md);font-weight:var(--w-fuerte);color:var(--text)}
.bg-ruta__cab .tag{flex:none;align-self:flex-start}
.bg-ruta__n{font-size:var(--fs-2xl);font-weight:var(--w-fuerte);letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.bg-bar{height:8px;border-radius:999px;background:var(--surface-alt);overflow:hidden}
.bg-ruta--mejor .bg-bar{background:rgba(0,0,0,.07)}
.bg-bar span{display:block;height:100%;border-radius:999px;background:var(--tag-a)}
/* Dentro de la tarjeta los pares van en rejilla fija de dos columnas: con flujo
   libre, «por minuto» y «por plano» caian en sitios distintos en cada tarjeta y
   la fila dejaba de leerse de izquierda a derecha. */
.bg-ruta .bg-kvs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-8)}
.bg-ruta__p{margin:0;font-size:var(--fs-xs);line-height:var(--lh-normal);color:var(--text-dim)}
.bg-ruta__b{align-self:flex-start;margin-top:var(--sp-5)}

/* a donde va el dinero: una barra de tramos y su leyenda */
.bg-stack{display:flex;height:34px;border-radius:var(--r-in);overflow:hidden;background:var(--surface-alt);
  margin:var(--sp-9) 0 var(--sp-10)}
/* UN TRAMO TIENE QUE DISTINGUIRSE DEL DE AL LADO. La primera version bajaba la
   opacidad de veinte en veinte y la barra se leia como un bloque liso: el ojo no
   separaba video de escalado. Ahora el paso es mas grande y cada tramo lleva un
   filete del color del fondo a su derecha, que es lo que dibuja el corte. */
.bg-stack__t{display:block;height:100%;min-width:3px;box-shadow:inset -2px 0 0 var(--surface)}
.bg-stack__t:last-child{box-shadow:none}
.bg-stack__t--1{background:var(--tag-a)}
.bg-stack__t--2{background:var(--tag-a);opacity:.72}
.bg-stack__t--3{background:var(--tag-a);opacity:.50}
.bg-stack__t--4{background:var(--tag-a);opacity:.34}
.bg-stack__t--5{background:var(--tag-a);opacity:.22}
.bg-stack__t--6{background:var(--tag-a);opacity:.14}
.bg-leyenda{list-style:none;margin:0 0 var(--sp-12);padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--sp-5) var(--sp-12)}
.bg-leyenda__it{display:flex;align-items:baseline;gap:var(--sp-5);font-size:var(--fs-sm);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--hair-soft);min-width:0}
.bg-punto{flex:none;width:10px;height:10px;border-radius:3px;display:block;transform:translateY(1px)}
.bg-leyenda__n{flex:1;min-width:0;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-leyenda__it b{font-weight:var(--w-fuerte);color:var(--text);font-variant-numeric:tabular-nums}
.bg-leyenda__it em{font-style:normal;font-size:var(--fs-2xs);color:var(--text-dim);
  min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.bg-pie{margin-top:var(--sp-14);padding-top:var(--sp-9);border-top:1px solid var(--hair-soft);max-width:none}

/* En pantalla estrecha el hero se parte y los apoyos pasan a tres en fila. */
@media (max-width:860px){
  .bg-hero{grid-template-columns:1fr}
  .bg-apoyos{flex-direction:row;flex-wrap:wrap}
  .bg-apoyo{flex:1 1 160px}
}
@media (max-width:560px){
  .bg-apoyos{flex-direction:column}
  .bg-leyenda{grid-template-columns:1fr}
}

/* LOS BOTONES SECUNDARIOS SE TIENEN QUE VER, EN TODAS LAS PELÍCULAS (Jeff, 2026-10-14: «los botones de
   upload imagen, copy prompt, approve y reject no pueden estar con el mismo color de fondo que la
   tarjeta»). El motor los pinta transparentes y con un borde casi del color del papel: medido en Zero
   Gravity, 1,26 a 1 en claro y 1,29 a 1 en oscuro. El arreglo se hizo esa mañana en los tableros de
   Avernio y de «Don't Destroy My Car», dentro de su archivo propio, y por eso no llegó a las demás
   películas; aquí vive para todas. Fondo sacado del color de la letra con opacidad (oscurece en claro y
   aclara en oscuro) y borde más marcado. Los rellenos (abrir, hecho) y los marcados (aprobado,
   rechazado) no se tocan. */
#content-root .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on),
#dv .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on),
#cg-capa .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on){
  background:color-mix(in srgb,var(--text) 12%,transparent);
  border-color:color-mix(in srgb,var(--text) 50%,transparent)}
#content-root .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on):hover,
#dv .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on):hover,
#cg-capa .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on):hover,
#content-root .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on):focus-visible,
#dv .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on):focus-visible,
#cg-capa .btn-ghost:not(.btn-primary):not(.stbtn):not(.is-on):focus-visible{
  background:color-mix(in srgb,var(--text) 22%,transparent);
  border-color:color-mix(in srgb,var(--text) 75%,transparent)}


/* MÓVIL: LAS FILAS DE BOTONES DE CADA TARJETA, A PARTES IGUALES (Jeff, 2026-11-04: «en mobile
   están vueltos una cagada»). A 390 px el pie caía en tres filas de anchos distintos: «Copiar,
   Listo, Abrir» pegados a la izquierda, «Aprobar / Rechazar» a todo el ancho y «Referencia /
   Comentar» otra vez a la izquierda. Cada fila se reparte ahora el ancho entero; el hilo de
   comentarios, si existe, ocupa la fila completa para que se lea. */
@media (max-width:640px){
  .film-tarjeta-pie > .btn-ghost{flex:1 1 0 !important;min-width:0;justify-content:center;text-align:center}
  .film-tarjeta-pie > .film-refs,
  .film-tarjeta-pie > .film-notes{flex:1 1 calc(50% - 8px);min-width:0;margin:0}
  .film-tarjeta-pie > .film-refs > .btn-ghost,
  .film-tarjeta-pie > .film-notes > .btn-ghost{width:100%;justify-content:center}
  .film-tarjeta-pie > .film-notes:has(li),
  .film-tarjeta-pie > .film-refs:has(img){flex-basis:100%}
  .film-tarjeta-pie .film-ref-add,
  .film-tarjeta-pie .film-note-add{width:100%;align-self:stretch;justify-content:center}
  /* Las tablas largas (escaleta, rodaje, budget) se recorren de lado: la primera columna se queda
     quieta para no perder qué plano es cada fila. */
  .film-scroll .data-table th:first-child,
  .film-scroll .data-table td:first-child{position:sticky;left:0;z-index:1;background:var(--surface,var(--bg,#fff))}
}