/* Jalomi Manager — COMPONENTES COMUNES de la síntesis (2026-10).
   Carga SOLO en las pantallas migradas (las que definen {% block ui2 %} en su
   plantilla: base.html les pone body.ui2 y NO les carga app.css). La
   estructura de página (barra, solapas, lateral/riel, barra de abajo) vive en
   shell.css; lo propio de cada pantalla, en app/static/ui/<pantalla>.css.
   Sacado de proto/sintesis/estilo.css (la especificación visual): base ·
   botones en 3 tamaños · menú ⋯ · chips y puntos de estado (6 familias:
   q h d c o e) · avisos · plancha · cabecera de documento · barra de
   composición · segmentos de filtro · grilla tabulada .grilla/.gr con
   columnas FIJAS · .corte · lote · campos compactos · barra de guardar ·
   tablero de veredicto + celdas por cuenta · barra del paso / del pulgar ·
   marcas J·A·E·TN · grupos plegables. Colores: solo tokens (tokens.css).
   Cortes: ≥ 1280 ancho · base 901-1279 (el 1035 de Diego) · ≤ 900 celular y
   tablet · ≤ 640 las filas se doblan en ficha.

   NOMBRES QUE CHOCAN (no se renombran: los usan pantallas en producción).
   Para lo nuevo, usar los ALIAS, que hacen exactamente lo mismo:
     .mini  (miniatura 44×44)       → .mini-foto   (.mini-vacia → .mini-foto-vacia)
     .mas   (el «⋯» con details)    → .mas-menu    (el pop sigue siendo .mas-pop)
   Así una pantalla puede llamar .mini a un estado suyo y .mas al «+» de un
   stepper sin heredar estos estilos.

   PIEZAS COMUNES SUMADAS EN LA TANDA 3 (detalle en cada sección):
     .grilla.docs + .estados-lista + .seg.cero  lista de documentos con solapas de estado
     .link-fila / .sobre-fila                    la fila entera como link, sin anidar forms
     .dialogo-velo > .dialogo (+ ui.js)          diálogo común: velo, foco, trampa de Tab, Esc
     .toast (+ ui.js: window.toast)              también en páginas sueltas; centrado en el celu
     body.sin-shell                              página suelta (sin la barra de abajo del Manager)
     .tb-ctas.cinco                              tablero con 5 celdas (la macro lo pone sola)
     .mas-pop .btn                               un botón de verdad dentro del «⋯»
     .llamar-atencion                            el botón real que la barra del paso no pudo apretar */

/* ===== Base (solo pantallas migradas) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ui2 { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--t-3)/var(--lh) var(--f-texto); font-variant-numeric: tabular-nums; }
/* :where() = especificidad de elemento suelto: la base nunca le gana a una
   clase (ni a las de shell.css, ni a las de los componentes) */
:where(body.ui2) a { color: inherit; text-decoration: none; }
:where(body.ui2) a:hover { text-decoration: underline; text-underline-offset: 2px; }
:where(body.ui2) h1, :where(body.ui2) h2 { margin: 0; line-height: 1.2; }
:where(body.ui2) h1 { font: 600 var(--t-5)/1.2 var(--f-cond); letter-spacing: 0; }
:where(body.ui2) h2 { font: 600 var(--t-4)/1.2 var(--f-cond); letter-spacing: .01em; }
:where(body.ui2) p { margin: 0; }
:where(body.ui2) img { display: block; max-width: 100%; }
:where(body.ui2) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.ui2) :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-1); }
/* .ic: el inline de base.html le pone un tope en em para las pantallas viejas */
.ic { width: 18px; height: 18px; max-width: none; max-height: none; vertical-align: middle; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic.chico { width: 15px; height: 15px; }
.ic.grande { width: 22px; height: 22px; }
.num { font-family: var(--f-cond); }
.mono { font-family: var(--f-mono); font-size: var(--t-2); letter-spacing: -.01em; }
.gr-meta .mono, .doc-meta .mono { font-size: var(--t-1); }
.tenue { color: var(--tinta-3); }
.sec { color: var(--tinta-2); }
.t-1 { font-size: var(--t-1); } .t-2 { font-size: var(--t-2); }
.fino { font-weight: 500; }
.mt-3 { margin-top: var(--e-3); }

/* ===== Contenido de la página (el main de base.html) ===== */
body.ui2 .cuerpo > main { max-width: none; margin: 0; padding: var(--e-5) var(--e-5) var(--e-7); }
body.ui2 .contenido { max-width: var(--ancho); margin: 0 auto; }
.volver { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-2); color: var(--tinta-2); font-weight: 500; margin-bottom: var(--e-3); min-height: 32px; }
.volver:hover { color: var(--tinta); }

/* ===== Componentes ===== */
/* Botones: 3 tamaños */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); height: var(--b-2); padding: 0 var(--e-4); border-radius: var(--r-2); border: var(--linea-2); background: var(--plancha); color: var(--tinta); font-weight: 500; font-size: var(--t-2); cursor: pointer; white-space: nowrap; }
.btn, .btn:hover { text-decoration: none; }
.btn:hover { border-color: var(--tinta-3); background: var(--plancha-2); }
.btn.principal { height: var(--b-1); padding: 0 var(--e-5); background: var(--accion); border-color: var(--accion); color: var(--blanco); font-weight: 600; font-size: var(--t-3); }
.btn.principal:hover { background: var(--accion-hover); border-color: var(--accion-hover); }
.btn.peligro { color: var(--e-tinta); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.chico { height: var(--b-3); padding: 0 var(--e-3); }
.btn.sobre-navy { background: transparent; color: var(--blanco); border-color: var(--navy-3); }
.btn.sobre-navy:hover { background: var(--navy-2); border-color: var(--navy-tenue); }
.btn-ic { width: var(--b-3); height: var(--b-3); display: inline-grid; place-items: center; border-radius: var(--r-2); border: 1px solid transparent; background: transparent; color: var(--tinta-2); cursor: pointer; flex: none; }
.btn-ic:hover { background: var(--plancha-2); border-color: var(--filete); color: var(--tinta); text-decoration: none; }
.btn-ic.borde { border-color: var(--filete-2); }
.enlace { color: var(--navy-3); font-weight: 500; text-decoration: underline; text-decoration-color: var(--filete-2); text-underline-offset: 3px; }
.enlace:hover { text-decoration-color: currentColor; }
.enlace-btn { border: 0; background: none; padding: 0; color: var(--navy-3); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.volver { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-2); color: var(--tinta-2); font-weight: 500; margin-bottom: var(--e-3); min-height: 32px; }

/* Menú "⋯" (details nativo) */
.mas, .mas-menu { position: relative; display: inline-block; }
.mas > summary, .mas-menu > summary { list-style: none; }
.mas > summary::-webkit-details-marker, .mas-menu > summary::-webkit-details-marker { display: none; }
.mas-pop { color: var(--tinta); position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-pop); min-width: 230px; background: var(--plancha); border: var(--linea-2); border-radius: var(--r-3); box-shadow: var(--sombra-pop); padding: var(--e-1); }
.mas-pop a, .mas-pop button { display: flex; align-items: center; gap: var(--e-2); width: 100%; min-height: 40px; padding: 0 var(--e-3); border: 0; background: transparent; border-radius: var(--r-2); text-align: left; font-size: var(--t-2); cursor: pointer; color: var(--tinta); }
.mas-pop a:hover, .mas-pop button:hover { background: var(--plancha-2); text-decoration: none; }
.mas-pop .peligro { color: var(--e-tinta); }
.mas-pop hr { border: 0; border-top: var(--linea); margin: var(--e-1) 0; }
.mas-pop .nota { font-size: var(--t-1); color: var(--tinta-3); padding: var(--e-1) var(--e-3) var(--e-2); }
/* un BOTÓN de verdad dentro del «⋯» (el Guardar de un form de editar): que no
   tome el estilo de ítem de menú de .mas-pop button */
.mas-pop .btn { display: inline-flex; width: auto; justify-content: center; text-align: center; border: var(--linea-2); background: var(--plancha); }
.mas-pop .btn.principal { background: var(--accion); border-color: var(--accion); color: var(--blanco); }
.mas-pop .btn.principal:hover { background: var(--accion-hover); border-color: var(--accion-hover); }

/* Chip de ESTADO: tinte + punto cuadrado. Uno por cosa, nunca repetido por fila. */
.estado { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px; border-radius: var(--r-1); font: 600 var(--t-1)/1 var(--f-texto); white-space: nowrap; background: var(--ff); color: var(--ft); }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--fp); flex: none; }
.estado.grande { height: 28px; font-size: var(--t-2); padding: 0 10px 0 9px; }
.estado.grande::before { width: 10px; height: 10px; }
.estado.c::before { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }
/* Punto suelto (en filas agrupadas por estado, para no repetir el chip) */
.punto { width: 8px; height: 8px; border-radius: 2px; display: inline-block; background: var(--fp); flex: none; }
/* Muestra de color en las leyendas */
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sw { background: var(--fp); } .sw.o2 { background: var(--o-claro); } .sw.e2 { background: var(--e-hondo); }
/* Familia de estado en variables: la clase (.q .h .d .c .o .e) fija punto, fondo y tinta; cada pieza toma lo que usa */
.q { --fp: var(--q-punto); --ff: var(--q-fondo); --ft: var(--q-tinta); }
.h { --fp: var(--h-punto); --ff: var(--h-fondo); --ft: var(--h-tinta); }
.d { --fp: var(--d-punto); --ff: var(--d-fondo); --ft: var(--d-tinta); }
.c { --fp: var(--c-punto); --ff: var(--c-fondo); --ft: var(--c-tinta); }
.o { --fp: var(--o-punto); --ff: var(--o-fondo); --ft: var(--o-tinta); }
.e { --fp: var(--e-punto); --ff: var(--e-fondo); --ft: var(--e-tinta); }

/* AVISO de fila: ícono + texto, sin relleno. Ámbar = sugerencia; rojo = bloquea. Solo lo anormal. */
.aviso { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-1); font-weight: 500; color: var(--d-tinta); white-space: nowrap; }
.aviso .ic { width: 14px; height: 14px; }
.aviso.e { color: var(--e-tinta); }
.aviso.q { color: var(--tinta-3); }
/* Lugar reservado para la integración "catálogo de ML" (otra sesión) */
.ml-slot { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-1); border: 1px dashed currentColor; font-size: var(--t-1); font-weight: 500; white-space: nowrap; }
.ml-slot.ok { color: var(--o-tinta); } .ml-slot.rev { color: var(--d-tinta); }
.ml-slot .ic { width: 13px; height: 13px; }

/* Plancha: la superficie blanca única de cada bloque (no tarjetas apiladas) */
.plancha { background: var(--plancha); border: var(--linea); border-radius: var(--r-3); }
.plancha + .plancha { margin-top: var(--e-4); }
.plancha-cab { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4); border-bottom: var(--linea); }
.plancha-cab h2 { flex: 1; min-width: 0; }
.plancha-cuerpo { padding: var(--e-4); }
/* Rótulos en versalitas: uno solo para todos */
.rotulo, .lat-cab .rot, .lat-grupo, .gr.enc, .tb-sup, .rl-grupo { font: 600 var(--t-1)/1.2 var(--f-cond); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.pie-lista { padding: var(--e-3) var(--e-4); border-top: var(--linea); font-size: var(--t-1); color: var(--tinta-3); }

/* Cabecera de documento (remito, salida, renglón) */
.doc-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3) var(--e-5); align-items: start; margin-bottom: var(--e-4); }
.doc-tit { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.doc-tit h1 .n { font-family: var(--f-cond); font-weight: 600; }
.doc-tit h1 .sep { color: var(--tinta-3); font-weight: 400; margin: 0 2px; }
.doc-meta { margin-top: var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: var(--t-2); color: var(--tinta-2); }
.doc-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.doc-meta > span.largo { white-space: normal; min-width: 0; align-items: flex-start; }
.doc-meta > span.largo > span { min-width: 0; overflow-wrap: anywhere; }
.doc-meta .ic { width: 15px; height: 15px; color: var(--tinta-3); }
.doc-meta > span.largo .ic { margin-top: 2px; }
.doc-acc { display: flex; align-items: center; gap: var(--e-2); }
.cab-pagina { display: flex; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.cab-pagina .txt { flex: 1; min-width: 260px; }
.cab-pagina .bajada { font-size: var(--t-2); color: var(--tinta-2); margin-top: 4px; max-width: 70ch; }

/* Barra de composición por estado (color = dato) */
.comp { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--filete); gap: 1px; }
.comp > i { display: block; height: 100%; }
.comp > i { background: var(--fp); } .comp .o2 { background: var(--o-claro); } .comp .e2 { background: var(--e-hondo); }

/* Avisos del documento: una lista compacta, no cajas */
.avisos { border-top: var(--linea); }
.avisos > summary { list-style: none; display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); cursor: pointer; font-size: var(--t-2); }
.avisos > summary::-webkit-details-marker { display: none; }
.avisos > summary .ic { color: var(--d-punto); }
.avisos > summary .flecha { margin-left: auto; color: var(--tinta-3); transition: transform .15s; }
.avisos[open] > summary .flecha { transform: rotate(180deg); }
.avisos ul { margin: 0; padding: 0 var(--e-4) var(--e-3) calc(var(--e-4) + 26px); font-size: var(--t-2); color: var(--tinta-2); }
.avisos li { padding: 2px 0; }
.franja { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-top: var(--linea); font-size: var(--t-2); }
.franja .ic { margin-top: 1px; }
.franja.d, .franja.e { background: var(--ff); color: var(--ft); }
.franja.q { color: var(--tinta-2); }

/* Segmentos de filtro (navy = estructura, no azul) */
.segmentos { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.seg { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--e-3); border-radius: var(--r-2); border: var(--linea-2); background: var(--plancha); font-size: var(--t-2); font-weight: 500; color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.seg:hover { border-color: var(--tinta-3); color: var(--tinta); text-decoration: none; }
.seg .n { font: 600 var(--t-2)/1 var(--f-cond); color: var(--tinta); }
.seg[aria-pressed="true"], .seg.activo { background: var(--navy); border-color: var(--navy); color: var(--blanco); }
.seg[aria-pressed="true"] .n, .seg.activo .n { color: var(--blanco); }
.seg .punto { width: 7px; height: 7px; }
.filtros-fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4); border-top: var(--linea); }
.filtros-fila.con-lote { gap: var(--e-2) var(--e-3); }
.buscar-local { display: flex; align-items: center; gap: 6px; border: var(--linea-2); border-radius: var(--r-2); color: var(--tinta-3); }
.buscar-local input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; }
.buscar-local:focus-within { border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.filtros-fila .buscar-local { margin-left: auto; height: 34px; padding: 0 var(--e-2); width: 220px; }
.filtros-fila .buscar-local input { font-size: var(--t-2); }
.filtros-fila.con-lote .buscar-local { width: 180px; }

/* ===== Grilla tabulada: .grilla/.gr con columnas FIJAS (nunca auto por fila) ===== */
.grilla { --cols: minmax(0, 1fr); }
.gr { display: grid; grid-template-columns: var(--cols); column-gap: var(--e-3); align-items: center; padding: var(--e-2) var(--e-4); border-top: var(--linea); min-height: 56px; position: relative; }
.gr.enc { min-height: 36px; padding-top: 0; padding-bottom: 0; background: var(--plancha-2); }
.gr.enc > * { white-space: nowrap; }
a.gr:hover, .gr.tocable:hover { background: var(--plancha-2); text-decoration: none; }
.gr .der { text-align: right; justify-self: end; }
.gr-grupo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding: var(--e-3) var(--e-4) var(--e-2); border-top: var(--linea-2); background: var(--plancha); }
.gr-grupo .nom { font: 600 var(--t-3)/1.2 var(--f-cond); letter-spacing: .01em; }
.gr-grupo .cant { font: 600 var(--t-3)/1 var(--f-cond); color: var(--tinta-3); }
.gr-grupo .uds { font: 500 var(--t-2)/1 var(--f-cond); color: var(--tinta-3); }
.gr-grupo .pista { font-size: var(--t-1); color: var(--tinta-3); margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gr-grupo .pista .ic { width: 13px; height: 13px; vertical-align: -2px; }
.gr-grupo .canales { margin-left: var(--e-2); }
.gr-grupo .pista .pleg-t { display: inline-flex; align-items: center; gap: var(--e-1); }
.plegar { display: none; }
.gr-tit { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-l1 { display: flex; align-items: baseline; gap: var(--e-2); min-width: 0; }
.gr-l1 .corte { flex: 1; font-weight: 500; }
.gr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--e-3); font-size: var(--t-1); color: var(--tinta-3); min-height: 16px; }
.gr-meta > * { flex: none; }
.gr-meta > .papel { flex: 0 1 auto; min-width: 3em; }
.gr-meta.una { flex-wrap: nowrap; }
.gr .n-grande { font: 600 var(--t-4)/1 var(--f-cond); }
.gr .n-med { font: 500 var(--t-3)/1.15 var(--f-cond); }
.gr .n-chico { font: 400 var(--t-1)/1.2 var(--f-cond); color: var(--tinta-3); }
.gr .apilado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gr .acc { display: flex; justify-content: flex-end; gap: 2px; }
.gr-chk { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px; }
.gr-chk input { width: 17px; height: 17px; accent-color: var(--navy); cursor: pointer; margin: 0; }
.gr .sel-vacia { width: 17px; height: 17px; }
.gr.fila-sel { background: var(--accion-suave); }
.mini, .mini-foto { width: 44px; height: 44px; border-radius: var(--r-2); object-fit: cover; background: var(--plancha-2); border: var(--linea); }
.mini-foto-vacia { width: 44px; height: 44px; border-radius: var(--r-2); border: 1px dashed var(--filete-2); display: grid; place-items: center; color: var(--tinta-3); background: var(--plancha-2); position: relative; }
.mini-foto-vacia .ic { width: 18px; height: 18px; }
.mini-vacia { width: 44px; height: 44px; border-radius: var(--r-2); border: 1px dashed var(--filete-2); display: grid; place-items: center; color: var(--tinta-3); background: var(--plancha-2); position: relative; }
.mini-vacia .ic { width: 18px; height: 18px; }
.mini-vacia.publ { border-style: solid; color: var(--navy-3); }
/* Filas sin fotos: en escritorio la cámara es la acción de la fila; en el celular, la miniatura es el botón */
.mini-vacia.cam span { display: none; }
.c-nums, .c-d { display: none; }
.vacio-filtro { padding: var(--e-5) var(--e-4); border-top: var(--linea); font-size: var(--t-2); color: var(--tinta-3); text-align: center; }

/* .corte: una línea, final con degradado + blur, completa al pasar el mouse sin mover la grilla */
.corte { position: relative; display: block; min-width: 0; min-height: 1lh; overflow: hidden; white-space: nowrap; }
.corte > span { display: block; overflow: hidden; }
.corte::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.6em; background: linear-gradient(90deg, transparent, var(--fondo-fila, var(--plancha)) 85%); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); pointer-events: none; }
.corte:hover { overflow: visible; z-index: 6; }
.corte:hover::after, .corte.entra::after { display: none; }
.corte:hover > span { position: absolute; left: -6px; top: -4px; padding: 3px 6px; background: var(--plancha); border: var(--linea-2); border-radius: var(--r-2); box-shadow: var(--sombra-pop); white-space: normal; width: max-content; max-width: min(56ch, 70vw); }
a.gr:hover .corte, .gr.tocable:hover .corte { --fondo-fila: var(--plancha-2); }

/* Barra de lote: casillas + "Todos" + botones; se activa con algo tildado */
.lote { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-2) var(--e-4); border-top: var(--linea); background: var(--plancha-2); font-size: var(--t-2); color: var(--tinta-2); min-height: 52px; }
.lote .todos { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 500; color: var(--tinta); cursor: pointer; min-height: 36px; }
.lote .todos input { width: 17px; height: 17px; accent-color: var(--navy); }
.lote .cuantos { font: 600 var(--t-3)/1 var(--f-cond); color: var(--tinta); }
.lote.activa { background: var(--accion-suave); }
.lote .mas > summary.apagado { opacity: .5; pointer-events: none; }
.lote .btn .corto { display: none; }
.filtros-fila .lote { border: 0; background: none; padding: 0 0 0 var(--e-3); min-height: 34px; border-left: var(--linea); gap: var(--e-2); flex-wrap: nowrap; }
.filtros-fila .lote.activa { background: var(--accion-suave); border-radius: var(--r-2); border-left-color: transparent; padding: 0 var(--e-2); }
.filtros-fila .lote .cuantos { font-size: var(--t-2); white-space: nowrap; }

/* Formularios compactos */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: var(--t-2); font-weight: 600; color: var(--tinta); display: flex; align-items: baseline; gap: var(--e-2); }
.campo > label .opc { font-weight: 400; color: var(--tinta-3); font-size: var(--t-1); }
.campo > label .cont { margin-left: auto; font: 500 var(--t-1)/1 var(--f-cond); color: var(--tinta-3); }
.campo > label.buscar-campo { font-weight: 400; align-items: center; }
.entrada { height: var(--b-2); border: var(--linea-2); border-radius: var(--r-2); background: var(--plancha); padding: 0 var(--e-3); width: 100%; font-size: var(--t-3); }
textarea.entrada { height: auto; min-height: 96px; padding: var(--e-2) var(--e-3); resize: vertical; line-height: 1.45; }
.entrada:focus { outline: 2px solid var(--foco); outline-offset: -1px; border-color: var(--foco); }
.entrada.num { font-family: var(--f-cond); font-size: var(--t-4); font-weight: 500; }
.ayuda { font-size: var(--t-1); color: var(--tinta-3); }
.ayuda.d { color: var(--d-tinta); }
.fila-campos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fila-campos.precio { grid-template-columns: minmax(110px, 140px) repeat(2, minmax(0, 1fr)); align-items: end; }
.fila-btn { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.dato { display: flex; flex-direction: column; gap: 3px; }
.dato .v { font: 500 var(--t-4)/1.2 var(--f-cond); }
.dato .k { font-size: var(--t-1); color: var(--tinta-3); }
.buscar-campo { display: flex; align-items: center; gap: 6px; height: var(--b-2); border: var(--linea-2); border-radius: var(--r-2); padding: 0 var(--e-3); color: var(--tinta-3); }
.buscar-campo input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; }
.buscar-campo:focus-within { border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); }
.stepper { display: inline-grid; grid-template-columns: 34px 40px 34px; height: 34px; border: var(--linea-2); border-radius: var(--r-2); overflow: hidden; background: var(--plancha); }
.stepper button { border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--tinta-2); }
.stepper button:hover { background: var(--plancha-2); color: var(--tinta); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper input, .entrada-st { border: 0; border-left: var(--linea); border-right: var(--linea); text-align: center; width: 100%; font: 600 var(--t-3)/1 var(--f-cond); outline: 0; background: transparent; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.cant { grid-template-columns: 40px 64px 40px; height: var(--b-2); width: max-content; }
.stepper.cant:focus-within { outline: 2px solid var(--foco); outline-offset: -1px; }
.entrada-st { font-size: var(--t-4); }

/* Pie fijo de guardado */
.barra-guardar { position: sticky; bottom: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--plancha); border: var(--linea-2); border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--sombra-barra); margin-top: var(--e-4); }
.barra-guardar .estado-cambios { flex: 1; font-size: var(--t-2); color: var(--tinta-3); display: flex; align-items: center; gap: var(--e-2); }
.barra-guardar .estado-cambios.d { color: var(--d-tinta); }
.barra-guardar kbd { font: 500 var(--t-1)/1 var(--f-mono); border: 1px solid var(--brillo-3); background: var(--brillo-2); border-radius: var(--r-1); padding: 3px 5px; margin-left: var(--e-2); }


/* Tablero de VEREDICTO: frase grande + una celda por cuenta (o grupo) + lo que falta decidir con SU acción */
.tablero { display: block; position: relative; background: var(--navy); color: var(--navy-tinta); border-radius: var(--r-3); padding: var(--e-4) var(--e-5); margin-bottom: var(--e-4); }
.tablero :focus-visible { outline-color: var(--foco-sobre-navy); }
.tb-cab { display: flex; align-items: center; gap: var(--e-2) var(--e-3); flex-wrap: wrap; min-height: 20px; }
.tb-sup { display: inline-flex; align-items: center; gap: var(--e-2); letter-spacing: .1em; color: var(--navy-tenue); }
.tablero .vivo { width: 8px; height: 8px; border-radius: 2px; background: var(--nv-curso); animation: latido 1.6s ease-in-out infinite; }
.tb-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-1); color: var(--navy-tenue); }
.tb-frase { margin: var(--e-2) 0 var(--e-4); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e-3); }
.tb-verbo { font: 700 var(--t-7)/1.05 var(--f-cond); letter-spacing: -.01em; color: var(--blanco); }
.tb-verbo.o { color: var(--nv-ok); } .tb-verbo.c { color: var(--nv-curso); } .tb-verbo.d { color: var(--nv-dec); } .tb-verbo.e { color: var(--nv-err); } .tb-verbo.h { color: var(--nv-hacer); }
.tb-n { font: 600 calc(var(--t-7) * .7)/1.1 var(--f-cond); color: var(--blanco); }
.tb-u { font-size: var(--t-2); color: var(--navy-tenue); min-width: 0; }
.tb-ctas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
/* 5 celdas (la macro celdas() le pone .cinco sola) */
.tb-ctas.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tb-cta { --tb-c: var(--nv-pend); border: 1px solid var(--brillo); border-radius: var(--r-2); padding: var(--e-2) var(--e-3) var(--e-3); display: flex; flex-direction: column; gap: 5px; min-width: 0; transition: border-color .3s; }
.tb-cta.o, .tb-cta.oc { --tb-c: var(--nv-ok); } .tb-cta.c { --tb-c: var(--nv-curso); border-color: var(--nv-curso); } .tb-cta.d { --tb-c: var(--nv-dec); } .tb-cta.e { --tb-c: var(--nv-err); } .tb-cta.h { --tb-c: var(--nv-hacer); } .tb-cta.q { --tb-c: var(--navy-tenue); }
.tb-nom { display: flex; align-items: center; gap: 5px; font: 600 var(--t-2)/1.2 var(--f-cond); letter-spacing: .02em; color: var(--navy-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-nom .corto { display: none; }
.tb-num { display: flex; align-items: baseline; gap: 5px; color: var(--tb-c); min-width: 0; }
.tb-num .ic { width: 17px; height: 17px; stroke-width: 2.4; align-self: center; flex: none; }
.tb-num .v { font: 700 var(--t-6)/1 var(--f-cond); color: var(--tb-c); }
.tb-cta.p .v, .tb-cta.q .v { color: var(--navy-tinta); }
.tb-num small { font: 500 var(--t-2)/1 var(--f-cond); color: var(--navy-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-barra { height: 4px; border-radius: 2px; background: var(--navy-3); overflow: hidden; }
.tb-barra i { display: block; height: 100%; background: var(--tb-c); transition: width .6s ease; }
.tb-cta.c .tb-barra i { background: repeating-linear-gradient(90deg, var(--nv-curso) 0 10px, var(--navy-tenue) 10px 14px); }
.tb-cta.oc .tb-barra i { background: repeating-linear-gradient(90deg, var(--nv-ok) 0 6px, transparent 6px 9px); }
.tb-det { font-size: var(--t-1); color: var(--navy-tenue); line-height: 1.3; }
.tb-pend { --tb-c: var(--nv-dec); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--brillo); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--e-3) var(--e-4); align-items: center; }
.tb-pend.e { --tb-c: var(--nv-err); }
.tb-pend.o { --tb-c: var(--nv-ok); }
.tb-pend.hecho { --tb-c: var(--nv-dec); }
.tb-pn { width: 52px; height: 52px; border-radius: var(--r-2); display: grid; place-items: center; font: 700 var(--t-5)/1 var(--f-cond); background: var(--tb-c); color: var(--navy); }
.tb-pt > strong { display: block; font: 700 var(--t-4)/1.2 var(--f-cond); color: var(--tb-c); }
.tb-pt p { font-size: var(--t-2); color: var(--navy-tinta); margin-top: 2px; }
.tb-pt p strong { font-weight: 600; color: var(--blanco); }
.tb-acc { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; justify-content: flex-end; }
.tablero .btn.principal { box-shadow: 0 0 0 1px var(--brillo-3); }
.tb-pie { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--brillo-2); display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-2); color: var(--navy-tinta); }
.tb-pie .ic { color: var(--navy-tenue); margin-top: 2px; }
.tb-pie.d .ic { color: var(--nv-dec); }
/* Tablero chico: lo que está en curso, en Inicio y en la lista de remitos (las mismas celdas, sin números) */
.tablero.chico { padding: var(--e-3) 52px var(--e-4) var(--e-4); }
.tablero.chico:hover { text-decoration: none; background: var(--navy-2); }
.tb-chico-tit { margin-top: 6px; display: flex; align-items: baseline; gap: 0 var(--e-2); flex-wrap: wrap; }
.tb-chico-tit .tb-verbo, .tb-chico-tit .tb-n { font-size: var(--t-5); }
.tb-chico-que { font-size: var(--t-2); color: var(--navy-tinta); margin: 2px 0 var(--e-3); }
.tb-ctas.chico { gap: 6px; }
.tb-ctas.chico .tb-cta { border: 0; padding: 0; gap: 4px; }
.tb-ctas.chico .tb-nom { font-size: var(--t-1); color: var(--navy-tenue); }
.tb-ctas.chico .tb-cta.o .tb-nom { color: var(--nv-ok); } .tb-ctas.chico .tb-cta.c .tb-nom { color: var(--blanco); }
.tb-ir { position: absolute; right: var(--e-4); top: 50%; transform: translateY(-50%); color: var(--navy-tenue); }

/* Barra del paso: UNA pieza. Escritorio: arriba, aparece cuando el tablero se va de la vista.
   Celular: abajo, siempre, al alcance del pulgar. Mismo texto corto + la misma acción. */
.barra-paso { display: none; align-items: center; gap: var(--e-4); background: var(--plancha); }
.barra-paso .que { flex: 1; min-width: 0; font-size: var(--t-2); color: var(--tinta-2); }
.barra-paso .que strong { color: var(--tinta); font-weight: 600; }

/* Marcas J · A · E · TN: en qué canal quedó el renglón */
.canales { display: inline-grid; grid-template-columns: repeat(4, 24px); gap: 3px; flex: none; }
.cn { height: 20px; display: grid; place-items: center; border-radius: var(--r-1); font: 700 11px/1 var(--f-cond); font-style: normal; letter-spacing: .02em; border: 1px solid transparent; transition: background .3s, color .3s; }
.cn.o { background: var(--o-tinta); color: var(--blanco); }
.cn.oc { background: var(--plancha); color: var(--o-tinta); border: 1px dashed var(--o-punto); }
.cn.c { background: var(--c-fondo); color: var(--c-tinta); border-color: var(--c-punto); animation: latido 1.6s ease-in-out infinite; }
.cn.e { background: var(--e-punto); color: var(--blanco); }
.cn.p { background: var(--plancha); color: var(--tinta-2); border: 1px dashed var(--tinta-3); }

/* ===== Piezas comunes que nacieron en una pantalla y sirven a todas =====
   (las hojas de cada pantalla, ui/<pantalla>.css, cargan DESPUÉS y pueden
   afinarlas sin pelear con esto) */
/* sección dentro de una plancha: título + contenido, separadas por filete */
.seccion { padding: var(--e-4); border-top: var(--linea); display: grid; gap: var(--e-3); min-width: 0; }
.seccion:first-child { border-top: 0; }
.seccion > h2 { font-size: var(--t-3); }
.seccion-cab { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.seccion-cab h2 { font-size: var(--t-3); flex: 1; min-width: 0; }
/* contador dentro de un botón o una opción (fuera del lateral y la barra) */
.btn .badge, .camino .badge { display: inline-grid; place-items: center; min-width: 22px; height: 20px;
  padding: 0 6px; border-radius: var(--r-1); background: var(--plancha-2); color: var(--tinta-2);
  font: 600 var(--t-1)/1 var(--f-cond); font-variant-numeric: tabular-nums; flex: none; }
/* ayudas por familia: error y hecho (la de decidir está más arriba) */
.ayuda.e { color: var(--e-tinta); }
.ayuda.o { color: var(--o-tinta); display: flex; gap: 6px; align-items: flex-start; }
.ayuda.o .ic { margin-top: 1px; }
/* columna alineada a la derecha en una grilla (importes, cantidades) */
.grilla .der { text-align: right; justify-self: end; }
/* que un dato corto («en cola», «DEL-0058») no se parta en dos renglones */
.nw { white-space: nowrap; }
/* marca de canal que no aplica: borde LLENO (la punteada es «creada oculta») */
.cn.n { background: var(--plancha); color: var(--tinta-3); border: 1px solid var(--filete-2); }
/* franja de resultado OK (como .franja.d / .franja.e) */
.franja.o { background: var(--ff); color: var(--ft); }
/* forms REALES dentro del «⋯» y del tablero: no rompen el layout */
.mas-pop form { display: block; margin: 0; }
.tb-acc form { display: contents; }

/* lo que una pantalla con tablero en vivo envuelve para el polling (hx-get) */
.tablero-caja { display: block; }
/* dato largo en la cabecera de un documento (nombre del archivo, nota) */
.doc-meta .corte-meta { display: inline-block; vertical-align: bottom; max-width: 28ch; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* agregar un renglón a mano, al pie de la lista (remito, salida) */
.pie-lista .agregar { margin-top: var(--e-2); }
.pie-lista .agregar > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: var(--t-2); min-height: 32px; }
.pie-lista .agregar > summary::-webkit-details-marker { display: none; }
.agregar-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--e-3); align-items: end; margin-top: var(--e-3); color: var(--tinta); font-size: var(--t-2); }
.agregar-form .campo > label { display: block; }
.agregar-form .btn { align-self: end; }

/* ===== Lista de DOCUMENTOS: solapas de estado + grilla .docs =====
   El patrón de la lista de remitos (ui/remitos.css) y de salidas
   (ui/salida.css), para las listas nuevas (ingresos, pedidos, consumos…):
     <nav class="segmentos estados-lista"> con un .seg por estado (.cero si está en 0)
     <div class="grilla docs [con-check]"> con filas .gr y celdas
       .c-id (.doc-id: número + nombre; con .link-fila si la fila entera abre)
       .c-falta (.falta: la frase en el color de la familia + .comp)
       .c-ren .c-uni (números) · .c-par (.parado) o .c-est (chip) · .c-acc
       .c-nums (los números en una línea, solo en el celular)
   Las columnas se cambian con --cols (y --acc, el ancho de la acción). Lo
   que no es de la grilla va bajo :where(.grilla.docs): la misma
   especificidad que en ui/remitos.css, que carga después y manda. */
/* Solapas de estado: con el lateral ABIERTO los estados ya están ahí y sobran;
   se ven con el lateral en riel, en una pantalla sin lateral y en el celular */
.estados-lista { margin-bottom: var(--e-3); }
body:not(.lat-cerrado):not(.sin-lateral) .estados-lista { display: none; }
/* solapa en cero: en gris (la activa sigue en blanco sobre navy) */
.seg.cero, .seg.cero .n { color: var(--tinta-3); font-weight: 500; }
.seg.cero.activo, .seg.cero.activo .n,
.seg.cero[aria-pressed="true"], .seg.cero[aria-pressed="true"] .n { color: var(--blanco); }
.grilla.docs { --acc: 112px; --c-rem: minmax(0, 1.25fr); --c-fal: minmax(0, 1.15fr);
  --cols: var(--c-rem) var(--c-fal) 48px 56px 72px var(--acc); }
.grilla.docs.con-check { --cols: 28px var(--c-rem) var(--c-fal) 48px 56px 72px var(--acc); }
.grilla.docs .gr { min-height: 60px; }
.grilla.docs .gr.enc { min-height: 36px; }
.grilla.docs .gr.enc .gr-chk { visibility: hidden; }
.grilla.docs .gr.tocable { cursor: pointer; }
:where(.grilla.docs) .doc-id { font: 600 var(--t-3)/1.2 var(--f-cond); letter-spacing: .01em; display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap; min-width: 0; color: var(--tinta); text-decoration: none; }
:where(.grilla.docs) .doc-id:hover { text-decoration: none; }
:where(.grilla.docs) .doc-id .n { flex: none; }
:where(.grilla.docs) .doc-id .prov { font-weight: 600; min-width: 0; flex: 0 1 auto; }
.grilla.docs .gr-chk, .grilla.docs .c-acc form, .grilla.docs .c-acc .btn, .grilla.docs .gr-meta .aviso { position: relative; z-index: 1; }
.grilla.docs .c-acc { display: flex; justify-content: flex-end; align-items: center; }
.grilla.docs .c-acc form { margin: 0; display: inline-flex; }
.grilla.docs .c-acc .btn.chico { white-space: nowrap; }
.grilla.docs .c-est { min-width: 0; }
.grilla.docs .c-est .estado { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.grilla.docs) .falta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
:where(.grilla.docs) .falta .txt { font-size: var(--t-2); font-weight: 500; line-height: 1.3; color: var(--ft, var(--tinta-2));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
:where(.grilla.docs) .falta.q .txt { color: var(--tinta-2); }
:where(.grilla.docs) .falta .comp { max-width: 200px; }
:where(.grilla.docs) .parado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; justify-self: end; text-align: right; white-space: nowrap; }
:where(.grilla.docs) .parado b { font: 600 var(--t-3)/1 var(--f-cond); color: var(--tinta); }
:where(.grilla.docs) .parado small { font-size: var(--t-1); color: var(--tinta-3); }
:where(.grilla.docs) .parado.d b { color: var(--d-tinta); font-weight: 700; }

/* La fila ENTERA como link sin anidar forms: el link de la fila lleva
   .link-fila (su ::after se estira sobre la fila, que ya es position:
   relative) y lo que tiene que seguir siendo suyo (casilla, botón, «⋯») lleva
   .sobre-fila. El foco se marca en toda la fila. */
.link-fila, .link-fila:hover { text-decoration: none; }
.link-fila::after { content: ""; position: absolute; inset: 0; }
.link-fila:focus-visible { outline: none; }
.link-fila:focus-visible::after { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: var(--r-2); }
.sobre-fila { position: relative; z-index: 1; }

/* ===== Diálogo común =====
   <div class="dialogo-velo" id="dlg-x">
     <div class="dialogo" role="dialog" aria-modal="true" aria-labelledby="dlg-x-t" tabindex="-1">
       <div class="dialogo-cab"><h2 id="dlg-x-t">…</h2>
         <button class="btn-ic" type="button" data-cierra-dialogo aria-label="Cerrar">…</button></div>
       <div class="dialogo-cuerpo">…</div>
       <div class="dialogo-pie">… botones …</div>
   Se abre con un botón data-abre-dialogo="dlg-x" (o mgrDialogo.abrir('dlg-x')).
   ui.js: el foco entra (al [autofocus] o a la hoja), Tab da la vuelta adentro,
   Esc y tocar el velo cierran (data-velo-fijo en el velo lo impide) y al
   cerrar el foco vuelve al botón que lo abrió. La visibility se suelta SIN
   transición al abrir, para que el foco pueda entrar en el mismo cuadro. En
   el celular angosto (≤ 640) es una hoja que sube desde abajo. */
.dialogo-velo { position: fixed; inset: 0; z-index: var(--z-dialogo, 70); display: grid; justify-items: center; align-items: start;
  padding: var(--e-7) var(--e-4); background: var(--velo); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transition: opacity .18s, visibility .18s; }
.dialogo-velo.visible { visibility: visible; opacity: 1; transition: opacity .18s, visibility 0s; }
.dialogo { position: relative; width: 100%; max-width: 560px; background: var(--plancha); color: var(--tinta);
  border-radius: var(--r-3); box-shadow: var(--sombra-pop); outline: 0; }
.dialogo.ancho { max-width: 760px; }
.dialogo-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5); border-bottom: var(--linea); background: var(--plancha);
  border-radius: var(--r-3) var(--r-3) 0 0; }
.dialogo-cab h2 { flex: 1; min-width: 0; }
.dialogo-cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: grid; gap: var(--e-3); }
.dialogo-pie { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end;
  gap: var(--e-2); flex-wrap: wrap; padding: var(--e-3) var(--e-5); border-top: var(--linea); background: var(--plancha);
  border-radius: 0 0 var(--r-3) var(--r-3); }
.dialogo-pie .que { flex: 1; min-width: 0; font-size: var(--t-2); color: var(--tinta-2); }
body.con-dialogo { overflow: hidden; }

/* ===== Toast: aviso efímero (window.toast). Centrado con left/right +
   margin auto (left:50% + translate lo encogía a media pantalla en el celu).
   En el Manager lo dibuja base.html; en una página suelta lo crea ui.js. ===== */
.toast { position: fixed; left: var(--e-4); right: var(--e-4); margin: 0 auto; width: max-content; bottom: var(--e-5);
  z-index: var(--z-toast, 80); max-width: min(560px, calc(100vw - 2 * var(--e-4))); padding: var(--e-3) var(--e-4);
  background: var(--navy); color: var(--blanco); border-radius: var(--r-3); box-shadow: var(--sombra-pop);
  font: 500 var(--t-2)/1.35 var(--f-texto); text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.visible { opacity: 1; }
/* Página SUELTA (sin la estructura del Manager: catálogos públicos, portal):
   <body class="ui2 sin-shell">. Sin barra de abajo, las barras del pulgar
   (.fija-cel, .barra-paso), el padding del main y el toast bajan al borde. */
body.sin-shell { --nav-abajo: 0px; }

/* El botón REAL que la barra del paso no pudo apretar (está deshabilitado):
   ui.js lo trae a la vista y lo hace latir, así se ve qué falta */
@keyframes llamar { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 4px var(--foco); } }
.llamar-atencion { animation: llamar .9s ease-in-out 2; }

/* Compatibilidad con piezas viejas que una pantalla migrada puede seguir
   incluyendo (parciales HTMX): texto secundario y form en línea */
.ui2 .detalle { color: var(--tinta-3); font-size: var(--t-2); }
.ui2 form.inline { display: inline-flex; }

/* Utilidades que tienen que ganarle a todo lo anterior (por orden, sin !important) */
.sin-filete { border-top: 0; }
.oculta, [hidden], .solo-cel, .mas-pop .solo-cel { display: none; }
.oculto-v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Escritorio (901-1279, el 1035 de Diego) es la base. Tres cortes: ≥ 1280 ancho · ≤ 900 celular y tablet · ≤ 640 fichas */
.filtros-fila.con-lote .lote .cuantos, .filtros-fila.con-lote .lote .btn .largo { display: none; }
.filtros-fila.con-lote .lote .btn .corto { display: inline; }
.filtros-fila.con-lote .buscar-local { width: 150px; }
/* Barra del paso en escritorio: arriba, cuando el tablero se va de la vista (el JS no la prende en el celular) */
body.tablero-fuera .barra-paso { display: flex; position: fixed; z-index: var(--z-barra); top: var(--alto-shell); left: var(--lateral); right: 0; min-height: 56px; padding: var(--e-2) var(--e-5); border-bottom: var(--linea-2); box-shadow: var(--sombra-paso); }
body.lat-cerrado.tablero-fuera .barra-paso { left: var(--riel); }
body.tablero-fuera .barra-paso .que { font-size: var(--t-3); }
/* La barra del paso sin lateral (pantalla sin menú de sección) arranca del borde */
body.sin-lateral.tablero-fuera .barra-paso { left: 0; }
/* el display de arriba le gana a [hidden]: cuando ui.js la esconde (hay
   renglones tildados y manda la barra del lote) tiene que irse también acá */
.barra-paso[hidden], body.tablero-fuera .barra-paso[hidden] { display: none; }

/* ===== Corte 1: ancho (≥ 1280) ===== */
@media (min-width: 1280px) {
  .filtros-fila.con-lote .lote .cuantos, .filtros-fila.con-lote .lote .btn .largo { display: inline; }
  .filtros-fila.con-lote .lote .btn .corto { display: none; }
  .filtros-fila.con-lote .buscar-local { width: 180px; }
}

/* ===== Corte 2: celular y tablet (≤ 900) ===== */
@media (max-width: 900px) {
  /* !important: una pantalla que le pone display propio a un componente
     (.dias { display: flex }) no tiene que poder mostrarlo en el celular */
  .solo-desk { display: none !important; }
  span.solo-cel { display: inline; }
  /* un bloque solo-cel (div, p, section…) aparece en bloque; con especificidad
     de clase suelta: .fija-cel y el display propio de la pantalla le ganan */
  :where(div:not([hidden]), p:not([hidden]), section:not([hidden]), nav:not([hidden]), ul:not([hidden]), form:not([hidden]), details:not([hidden])).solo-cel { display: block; }
  .btn.solo-cel:not([hidden]) { display: inline-flex; }
  .btn-ic.solo-cel { display: inline-grid; }
  .mas-pop .solo-cel { display: flex; }
  /* el contenido termina arriba de la barra de abajo y de las barras del pulgar */
  body.ui2:has(.bottom-nav) { padding-bottom: 0; }
  body.ui2 .cuerpo > main { padding: var(--e-4) var(--e-4) calc(var(--nav-abajo) + 96px + env(safe-area-inset-bottom)); }
  body.ui2:not(:has(.fija-cel, .barra-paso, .barra-guardar)) .cuerpo > main { padding-bottom: calc(var(--nav-abajo) + var(--e-5) + env(safe-area-inset-bottom)); }
  /* Barras fijas del pulgar, sobre la barra de abajo */
  .fija-cel, .barra-paso { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-abajo) + env(safe-area-inset-bottom)); z-index: var(--z-barra); background: var(--plancha); border-top: var(--linea-2); box-shadow: var(--sombra-barra); padding: var(--e-2) var(--e-4); display: flex; align-items: center; gap: var(--e-3); }
  .fija-cel .btn.principal { flex: 1; }
  .fija-cel .btn.cancelar { flex: none; }
  .fija-cel .que { font-size: var(--t-1); color: var(--tinta-2); max-width: 44%; line-height: 1.3; }
  .fija-cel .que strong { color: var(--tinta); }
  .fija-cel .que.lleno { max-width: none; display: flex; align-items: center; gap: var(--e-2); min-height: 46px; }
  .barra-paso .que { font-size: var(--t-1); line-height: 1.3; flex: 0 1 32%; }
  .barra-paso .btn { flex: 1 1 auto; min-width: 0; padding: 0 var(--e-3); }
  .fija-cel[hidden], .barra-paso[hidden], body:has(#fija-lote:not([hidden])) .barra-paso { display: none; }
  .barra-guardar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-abajo) + env(safe-area-inset-bottom)); border-radius: 0; margin: 0; gap: var(--e-2); padding: var(--e-2) var(--e-3); }
  .barra-guardar .estado-cambios { display: none; }
  .barra-guardar .btn { padding: 0 var(--e-3); }
  .barra-guardar .btn.principal { flex: 1; min-width: 0; white-space: normal; line-height: 1.15; font-size: var(--t-2); }
  .doc-cab { grid-template-columns: minmax(0, 1fr); }
  .doc-acc { flex-wrap: wrap; }
  /* Targets de 44 px */
  .btn, .seg { min-height: 44px; }
  .btn-ic, .foto .acc-foto .btn-ic { width: 44px; height: 44px; }
  .volver { min-height: 44px; }
  .ceros a { display: inline-flex; align-items: center; min-height: 44px; }
  .entrada { height: 44px; font-size: var(--t-campo-cel); }
  /* Tablero */
  .tablero { padding: var(--e-4); }
  .tb-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-ctas.chico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tb-ctas.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-ctas.chico.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .toast { bottom: calc(var(--nav-abajo) + 76px + env(safe-area-inset-bottom)); }
  /* lista de documentos: las solapas en UNA tira que se desliza, solo las
     que tienen algo (más la activa) */
  body:not(.lat-cerrado):not(.sin-lateral) .estados-lista, .estados-lista { display: flex; }
  .estados-lista { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .estados-lista::-webkit-scrollbar { display: none; }
  .estados-lista .seg { flex: none; }
  .estados-lista .seg.cero:not(.activo):not([aria-pressed="true"]) { display: none; }
  /* filas de documento: id + parado/estado · qué falta · números + acción */
  .grilla.docs .gr:not(.enc) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px;
    grid-template-areas: "id par" "falta falta" "nums acc"; }
  .grilla.docs.con-check .gr:not(.enc) { grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "chk id par" "chk falta falta" "chk nums acc"; }
  .grilla.docs .gr-chk { grid-area: chk; align-self: start; margin-top: -6px; }
  .grilla.docs .c-id { grid-area: id; }
  .grilla.docs .c-falta { grid-area: falta; }
  .grilla.docs .c-par, .grilla.docs .c-est { grid-area: par; align-self: start; }
  .grilla.docs .c-est { justify-self: end; }
  .grilla.docs .c-acc { grid-area: acc; }
  .grilla.docs .c-ren, .grilla.docs .c-uni, .grilla.docs .c-costo, .grilla.docs .c-fl,
  .grilla.docs .gr-meta .sub-m { display: none; }
  .grilla.docs .c-nums { grid-area: nums; display: flex; flex-wrap: wrap; gap: 0 var(--e-3); font-size: var(--t-1); color: var(--tinta-3); align-self: center; }
  :where(.grilla.docs) .falta .comp { max-width: 220px; }
  .grilla.docs .c-acc .btn-ic { width: 44px; height: 44px; }
  .tb-acc { justify-content: stretch; }
  .tb-acc .btn { flex: 1; }
  .stepper.cant { grid-template-columns: 44px 72px 44px; height: 46px; }
}

/* ===== Corte 3: celular angosto (≤ 640): las filas se doblan en ficha ===== */
@media (max-width: 640px) {
  :root { --t-7: 32px; }
  body.ui2 .cuerpo > main { padding-left: var(--e-3); padding-right: var(--e-3); }
  .gr.enc { display: none; }
  .gr { padding: var(--e-3); }
  .plancha-cab, .plancha-cuerpo, .seccion { padding-left: var(--e-3); padding-right: var(--e-3); }
  /* .corte no se puede abrir con el dedo: en el celu el título va en 2 líneas */
  .gr .corte { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gr .corte::after { display: none; }
  .gr .corte > span { display: inline; }
  .gr .corte:hover > span { position: static; padding: 0; border: 0; box-shadow: none; background: none; width: auto; max-width: none; }
  .gr-meta.una { flex-wrap: wrap; }
  /* Plegados: lo procesado o lo que no pide nada va en UNA fila con candado/tilde y flecha */
  .grilla .gr.pleg:not(.ver) { display: none; }
  .grilla.filtrado .gr.pleg:not(.oculta) { display: grid; }
  .gr-grupo.cerrado { position: relative; min-height: 60px; padding-right: 48px; background: var(--plancha-2); }
  .gr-grupo.cerrado .plegar { display: grid; position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; justify-items: end; align-items: center; padding-right: var(--e-3); color: var(--tinta-2); }
  .gr-grupo.cerrado .plegar .ic { transition: transform .15s; }
  .gr-grupo.cerrado .plegar[aria-expanded="true"] .ic { transform: rotate(90deg); }
  .gr-grupo.cerrado .pista .pleg-sep, .gr-grupo.cerrado .pista > span:last-child:not(.pleg-t) { display: none; }
  .gr-grupo.cerrado .pista { flex-basis: 100%; margin-left: 0; }
  .canales { grid-template-columns: repeat(4, 26px); }
  .cn { height: 22px; }
  .gr-chk { width: 44px; height: 44px; margin: -10px -8px; }
  .gr-chk input { width: 22px; height: 22px; }
  .filtros-fila { padding: var(--e-3); }
  .filtros-fila .buscar-local, .filtros-fila.con-lote .buscar-local { width: 100%; margin-left: 0; height: 44px; }
  .filtros-fila .lote { flex-basis: 100%; border-left: 0; padding: 0; }
  .filtros-fila .lote .btn, .filtros-fila .lote .cuantos { display: none; }
  .lote { padding: var(--e-2) var(--e-3); }
  .stepper { grid-template-columns: 44px 44px 44px; height: 44px; }
  /* Tablero */
  .tablero { padding: var(--e-3) var(--e-3) var(--e-4); }
  .tb-frase { margin-bottom: var(--e-3); }
  .tb-num .v { font-size: 26px; }
  .tb-cta { padding: var(--e-2) var(--e-3); }
  .tb-ctas:not(.chico) .tb-det { display: none; }
  .tb-pend { grid-template-columns: 44px minmax(0, 1fr); }
  .tb-pn { width: 44px; height: 44px; font-size: var(--t-4); }
  .tb-pend .btn { grid-column: 1 / -1; width: 100%; }
  .tb-acc { grid-column: 1 / -1; }
  .tb-auto { margin-left: 0; }
  /* la frase baja de línea: sin el «·» suelto al principio del renglón (T.u con .tb-sep) */
  .tablero .tb-sep { display: none; }
  .tablero.chico { padding-right: 44px; }
  .tablero.chico .tb-chico-que, .tb-ctas.chico .tb-det, .tablero.compacto .tb-cab, .tb-ctas.chico .tb-nom .largo { display: none; }
  .tablero.chico .tb-chico-tit { margin-bottom: var(--e-2); }
  .tablero.compacto .tb-chico-tit { margin-top: 0; }
  .tablero.compacto .tb-chico-tit .tb-verbo, .tablero.compacto .tb-chico-tit .tb-n { font-size: var(--t-4); }
  .tablero.compacto .tb-u { flex-basis: 100%; }
  .tb-ctas.chico .tb-nom .corto { display: inline; font-weight: 700; letter-spacing: .04em; }
  .fija-cel .que { max-width: 40%; }
  /* Diálogo: hoja que sube desde abajo, a todo el ancho */
  .dialogo-velo { padding: var(--e-6) 0 0; align-items: end; }
  .dialogo, .dialogo.ancho { max-width: none; border-radius: var(--r-3) var(--r-3) 0 0; }
  .dialogo { max-height: calc(100vh - var(--e-6)); max-height: calc(100dvh - var(--e-6)); overflow-y: auto; overscroll-behavior: contain; }
  .dialogo-cab { padding-left: var(--e-4); }
  .dialogo-cuerpo { padding: var(--e-3) var(--e-4) var(--e-4); }
  .dialogo-pie { bottom: 0; padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom)); border-radius: 0; }
  .dialogo-pie .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .estado.c::before, .tablero .vivo, .cn.c, .llamar-atencion { animation: none; }
  .dialogo-velo, .dialogo-velo.visible, .toast { transition: none; }
  .tb-barra i { transition: none; }
}