/* ══════════ CINE Y SERIES — con el sistema visual (29/09/2026) ══════════
   Fuera la sala oscura, la tira dorada y los colores propios: el área es el
   sistema claro, y su violeta (--area / --area-suave, por body[data-area])
   solo va en la banda, la pestaña activa, los gráficos y su pieza propia, el
   fotograma (tableros PruCine, PruCineMovil y SisFirma). Las piezas comunes
   (.sis-*) viven en 16-sistema.css, que carga DESPUÉS que este archivo: por
   eso lo que aquí retoca una pieza común va con un selector más específico. */

.cine-v{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.cine-v > .sis-banda{ margin:0 }

/* El panel: pestañas, filtros y contenido. En escritorio es una caja (como en
   PruCine); en el móvil va sobre el fondo, sin caja (PruCineMovil). */
.cine-panel{ min-width:0; display:flex; flex-direction:column; gap:14px }
.cine-panel > .sis-pestanas, .cine-panel > .sis-filtros{ margin:0 }
@media (min-width:900px){
  .cine-panel{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:4px 20px 20px; box-sizing:border-box }
}

/* Un apartado dentro del panel: rótulo y, a la derecha, su acción. */
.cine-seccion{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.cine-v .sis-caja-tit{ align-items:center }
.cine-v .sis-caja-tit > .sis-rotulo{ color:var(--tx2); white-space:normal; min-width:0 }
.cine-mitades{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px }
@media (min-width:900px){ .cine-mitades{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px } }

.cine-nada{ margin:0; font-size:13px; line-height:1.5; color:var(--tx2) }
.cine-nota-pie{ margin:0; font-size:12px; line-height:1.5; color:var(--tx3) }
.cine-texto{ margin:0; font-size:14px; line-height:1.6; color:var(--tx) }
.cine-h2{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:22px; line-height:1.15; letter-spacing:-.01em; color:var(--tx) }

/* El aviso de lo que le falta a TMDB es un botón entero. */
.cine-aviso-toca{ width:100%; box-sizing:border-box; border:0; cursor:pointer; text-align:left; font:inherit; font-size:13px; flex-wrap:wrap; justify-content:space-between }
.cine-aviso-ir{ font-weight:600; white-space:nowrap; text-decoration:underline; text-underline-offset:3px }
.cine-aviso-txt{ flex:1; min-width:0 }
.cine-aviso-fila{ flex-wrap:wrap }

/* ══════════ La pieza propia: el fotograma ══════════
   El cartel con la perforación de película a cada lado (sobre una franja de
   «noche» muy tenue, para que se lea también sobre carteles claros), la
   chapa de nota arriba a la derecha y «En sala» abajo a la izquierda. */
.cine-foto{ min-width:0; display:flex; flex-direction:column; gap:5px; cursor:pointer; border-radius:var(--r-m) }
.cine-foto:focus-visible{ outline:2px solid var(--acento); outline-offset:3px }
.cine-foto-img{ position:relative; aspect-ratio:2/3; border-radius:var(--r-m); overflow:hidden; background:var(--noche) center/cover no-repeat }
.cine-foto-img::before, .cine-foto-img::after{
  content:""; position:absolute; top:0; bottom:0; width:13px; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(242,244,241,.62) 0 6px, transparent 6px 12px) center/5px 100% no-repeat, rgba(19,28,42,.22);
}
.cine-foto-img::before{ left:0 } .cine-foto-img::after{ right:0 }
.cine-foto-nota{ position:absolute; top:8px; right:16px; z-index:1; display:flex }
.cine-foto-nota .sis-chapa{ box-shadow:0 1px 4px rgba(19,28,42,.35) }
.cine-foto-sala{ position:absolute; left:16px; bottom:8px; z-index:1; display:flex }
.cine-foto-tit{ font-size:13px; font-weight:600; line-height:1.25; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cine-foto-pie{ margin-top:-3px; font-size:11.5px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* Destacado (los tres primeros de un año): el filete superior del área. */
.cine-foto.destacado .cine-foto-img{ box-shadow:inset 0 3px 0 var(--area) }

/* Lo último: seis en fila en escritorio, tres por fila en el móvil. */
.cine-ultimos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px }
@media (min-width:900px){ .cine-ultimos{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px } }
/* La rejilla de «Todas» y de lo mejor de un año: un ancho mínimo y tantas
   como quepan (3 en el móvil; muchas más en escritorio). */
.cine-rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px 10px }
@media (min-width:900px){ .cine-rejilla{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:16px 14px } }

.cine-todas-cuenta{ margin:0; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.cine-todas-cuenta b{ color:var(--tx) }
/* El testigo del final: además de disparar la carga, dice que hay más. */
.cine-todas-mas{ text-align:center; padding:16px 8px; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.cine-todas-mas span{ display:block; margin-top:3px; color:var(--tx2) }

/* ══════════ La barra de filtros ══════════
   En escritorio, todo en la fila: la hoja es display:contents y sus piezas
   son chips como los demás. En el móvil se queda el buscador y «Filtros (n)»
   abre el resto en una hoja desde abajo. */
/* Con .cine-filtros delante: .sis-btn (16-sistema, que carga después) le pone display. */
.cine-filtros .cine-filtros-boton{ display:none }
.cine-filtros-resto, .cine-hoja-caja{ display:contents }
.cine-hoja-fondo, .cine-hoja-cab{ display:none }
@media (max-width:899px){
  .cine-filtros .sis-buscar{ max-width:none }
  .cine-filtros .cine-filtros-boton{ display:inline-flex; flex-shrink:0 }
  .cine-filtros-resto{ display:none }
  .cine-filtros-resto.abierta{ display:block; position:fixed; inset:0; z-index:70 }
  /* La entrada de la sección (animación «sube», 01-base.css) lleva transform, y
     mientras dura un position:fixed se coloca respecto a la sección y no a la
     pantalla: con la hoja abierta, cada filtro que se toca repinta y la hoja
     saltaba al final de la página un cuarto de segundo. Con ella abierta, sin
     animación. */
  section.on:has(.cine-filtros-resto.abierta){ animation:none }
  .cine-hoja-fondo{ display:block; position:absolute; inset:0; background:rgba(19,28,42,.45) }
  .cine-hoja-caja{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px;
    position:absolute; left:0; right:0; bottom:0; max-height:80vh; overflow:auto; box-sizing:border-box;
    padding:12px 16px calc(22px + env(safe-area-inset-bottom)); background:var(--sup);
    border-radius:var(--r-l) var(--r-l) 0 0; box-shadow:var(--sombra-3);
  }
  .cine-hoja-cab{ display:flex; align-items:center; justify-content:space-between; flex-basis:100% }
  .cine-hoja-caja .fp{ flex-basis:100% }
  .cine-hoja-caja select{ flex:1 1 40% }
  .cine-filtros .cine-hoja-caja .sis-orden{ margin-left:0 }
}

/* ══════════ Visionados: columnas verticales ══════════
   Tono claro del área y la del año (o mes) en curso en el área. Si hay más
   años de los que caben, la tira se desliza; empieza por los más recientes. */
.cine-cols{ display:flex; flex-direction:row-reverse; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px }
.cine-col{ flex:1 0 28px; min-width:28px; display:flex; flex-direction:column }
.cine-col-zona{ height:104px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; border-bottom:1px solid var(--borde) }
.cine-col-zona .v{ font-family:var(--f-mono); font-size:10px; color:var(--tx2) }
.cine-col-zona i{
  display:block; width:70%; max-width:36px; border-radius:3px 3px 0 0;
  background:var(--area-suave); background:color-mix(in srgb, var(--area) 26%, var(--sup));
}
.cine-col.actual .cine-col-zona i{ background:var(--area) }
.cine-col.actual .v{ color:var(--tx); font-weight:600 }
.cine-col .et{ margin-top:5px; text-align:center; font-family:var(--f-mono); font-size:10px; color:var(--tx3) }
.cine-col[data-cine-anio]{ cursor:pointer; border-radius:var(--r-s) }
.cine-col[data-cine-anio]:hover .et{ color:var(--tx) }
.cine-col[data-cine-anio]:focus-visible{ outline:2px solid var(--acento); outline-offset:1px }

/* ══════════ La columna derecha ══════════ */
.cine-top-nav{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0 }
.cine-flecha.sis-btn-icono{ width:28px; height:28px; border-radius:var(--r-s); font-size:17px; line-height:1 }
.cine-top-pos{ min-width:22px; text-align:center; font-family:var(--f-mono); font-size:10px; color:var(--tx3) }
/* Los años de los tops: chips que se combinan, en una fila que se desliza. */
.cine-anios{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px }
.cine-anios::-webkit-scrollbar{ display:none }
.cine-anios .sis-chip{ flex:0 0 auto; height:28px; padding:0 10px; font-size:12px }
/* Las filas del ranking que se abren (persona o ficha). */
.cine-v .sis-ranking li.toca{ cursor:pointer; border-radius:var(--r-s) }
.cine-v .sis-ranking li.toca:hover .nom{ text-decoration:underline; text-underline-offset:3px }
.cine-v .sis-ranking li.toca:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }

.cine-porver{ display:flex; flex-direction:column }
.cine-porver-fila{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--borde-s) }
.cine-porver-fila:first-child{ padding-top:0 }
.cine-porver-fila:last-child{ padding-bottom:0; border-bottom:0 }
.cine-porver-fila .txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.cine-porver-fila b{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cine-porver-fila small{ font-size:12px; color:var(--tx2) }

.cine-cifras{ display:flex; flex-wrap:wrap; gap:14px 24px }
.cine-cifras.dos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }

/* ══════════ Subvistas: migas, filas, persona y ficha ══════════ */
.cine-migas{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--tx2) }
.cine-migas .sis-btn.enlace{ padding:0; height:auto }

.cine-filas{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px }
@media (min-width:900px){ .cine-filas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px } }
@media (min-width:1300px){ .cine-filas{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.cine-filas > .cine-edit{ grid-column:1/-1 }
.cine-fila{ display:flex; align-items:center; gap:12px; min-width:0; padding:8px 12px 8px 8px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m); cursor:pointer }
.cine-fila:hover{ border-color:var(--borde) }
.cine-fila:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }
.cine-fila-mini{ flex:0 0 auto; width:40px; height:60px; border-radius:var(--r-s); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-family:var(--f-tit); font-weight:800; font-size:14px; color:#FFF }
.cine-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px }
.cine-fila-txt b{ max-width:100%; font-size:14px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cine-fila-txt small{ font-size:12px; color:var(--tx2) }

.sis-caja.cine-peli-cab{ flex-direction:row; align-items:flex-start; gap:16px }
.cine-peli-poster{ flex-shrink:0; width:112px; aspect-ratio:2/3; border-radius:var(--r-m); background:var(--noche) center/cover no-repeat }
@media (min-width:900px){ .sis-caja.cine-peli-cab{ gap:22px; padding:20px } .cine-peli-poster{ width:180px } }
.cine-peli-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px }
.cine-peli-sub{ margin:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3) }
.cine-peli-notas{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.cine-peli-nota{ display:inline-flex; align-items:center; gap:8px }
.cine-peli-linea{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:14px }
.cine-plataformas{ display:flex; flex-wrap:wrap; gap:12px }
.cine-plataforma{ width:64px; display:flex; flex-direction:column; align-items:center; gap:4px }
.cine-plataforma img{ display:block; width:44px; height:44px; border-radius:var(--r-m) }
.cine-plataforma i{ font-style:normal; font-family:var(--f-mono); font-size:9.5px; line-height:1.3; text-align:center; color:var(--tx2) }

/* ══════════ Formularios ══════════
   Campos con su rótulo encima (SisPiezas, «campos»), de dos en dos; y las
   acciones del sistema: Cancelar (secundario) a la izquierda de Guardar, y
   Eliminar apartado a la izquierda del todo. */
.cine-campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (max-width:420px){ .cine-campos{ grid-template-columns:minmax(0,1fr) } }
.cine-campo{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.cine-campo .sis-rotulo{ color:var(--tx2); white-space:normal }
.cine-campo .sis-rotulo small{ margin-left:4px; font-family:var(--f-txt); font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tx3) }
.cine-form input:not([type="checkbox"]):not([type="hidden"]), .cine-form select{
  width:100%; height:var(--h-m); box-sizing:border-box; padding:0 12px; border-radius:var(--r-m);
  border:1.5px solid var(--borde); background:var(--sup); color:var(--tx); font-family:var(--f-txt); font-size:14px;
}
.cine-form input:focus, .cine-form select:focus{ outline:none; border-color:var(--tx) }
/* En el móvil, 16 px: con menos, Safari acerca la página al tocar el campo. */
@media (max-width:899px){ .cine-form input:not([type="checkbox"]):not([type="hidden"]), .cine-form select{ font-size:16px } }
.cine-check{ align-self:flex-start }
.cine-edit-tit{ font-size:15px; font-weight:600 }
.cine-v .cine-borrar{ margin-right:auto }

/* Las sugerencias de TMDB al escribir un título. Las pinta cine.js también
   dentro del plan de la Agenda (mismos id), así que van en neutros. */
#cine-sugerencias:empty, #reco-sugerencias:empty{ display:none }
.cine-sugerencia{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:var(--r-s); border:1px solid var(--borde-s); background:var(--sup2); cursor:pointer }
.cine-sugerencia:hover, .cine-sugerencia:active{ border-color:var(--borde); background:var(--sup) }
.cine-sugerencia + .cine-sugerencia{ margin-top:4px }
.cine-sugerencia .miniatura{ flex-shrink:0; width:28px; height:42px; border-radius:4px; background:var(--lateral) center/cover no-repeat }
.cine-sugerencia .info{ flex:1; min-width:0 }
.cine-sugerencia .info b{ display:block; font-size:14px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cine-sugerencia .info span{ display:block; font-family:var(--f-mono); font-size:10px; color:var(--tx3) }

/* ══════════ Recomendaciones ══════════
   Tarjetas con el cartel al lado, tantas por fila como quepan (1 en el
   móvil, 2–3 en escritorio). Los botones, al fondo: así quedan alineados
   entre tarjetas aunque una tenga notas y otra no. */
.cine-reco-v{ display:flex; flex-direction:column; gap:22px }
.cine-recos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:12px }
.cine-reco{ display:flex; gap:12px; min-width:0; padding:10px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l) }
.cine-reco-cartel{ flex:0 0 auto; align-self:flex-start; width:72px; aspect-ratio:2/3; border-radius:var(--r-s); background:var(--area-suave) center/cover no-repeat }
.cine-reco-cuerpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px }
.cine-reco-tit{ font-size:15px; font-weight:600; line-height:1.25 }
.cine-reco-etqs{ display:flex; flex-wrap:wrap; gap:4px }
.cine-reco-quien{ margin:0; font-size:12px; color:var(--tx2) }
.cine-reco-notas{ margin:0; font-size:12.5px; line-height:1.45; color:var(--tx2) }
.cine-reco-acciones{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:2px }

/* ── .cine-btn y .cine-btn-row: YA NO los usa Cine, pero sí Música (ficha de
   artista y stats.fm). Hasta que Música pase a .sis-btn, con la forma del
   botón del sistema (ya no hay «primario» aparte: el principal es el +). ── */
.cine-btn{
  height:var(--h-s); padding:0 12px; box-sizing:border-box; border-radius:var(--r-m); border:1.5px solid var(--tx);
  background:var(--sup); color:var(--tx); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-txt); font-weight:600; font-size:13px; white-space:nowrap;
}
.cine-btn:disabled{ opacity:.55; cursor:default }
.cine-btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 }