/* Reglas universales de los sistemas WianStark (núcleo). Valen igual en todos: cada sistema carga este archivo después de
   sus colores. Usa los nombres de color del núcleo (--linea, --capa, --capa-2, --tinta, --tinta-2, --tinta-3, --acento,
   --alerta, --bien, --ambar); un sistema con otros nombres los traduce en su :root (como repuestos).
   Están aquí: el chip de SUNAT, pantalla de caja, foto de producto y lista con ficha. Ver LEEME del núcleo. */
/* El estado de una fila (.etapa y .marca-etapa) vive en piezas.css, con las demás piezas comunes. */
/* El estado del comprobante ante SUNAT, con el mismo indicador */
.chip-sunat { --etapa: var(--bien); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.chip-sunat::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--etapa); }
.chip-sunat.interno { --etapa: var(--tinta-3); color: var(--tinta-2); }
.chip-sunat.anulada { --etapa: var(--alerta, var(--acento)); color: var(--alerta, var(--acento)); }
.chip-sunat.pendiente { --etapa: var(--ambar, var(--tinta-3)); color: var(--tinta); }

/* ---------- Pantalla de caja (igual en todos los sistemas; ver LEEME, «Pantalla de caja») ----------
   El rubro marca su pantalla con .pantalla-caja y su columna del pedido con .columna-pedido. El contenedor no reserva el
   hueco de la barra de desplazamiento (si no, queda una franja vacía a la derecha del pedido) y el pedido va pegado a la
   derecha, de arriba abajo, con su línea divisoria: nunca como tarjeta flotante. */
body :has(> .pantalla-caja), body :has(> .inv) { scrollbar-gutter: auto; }
/* Columna de venta (Willian, 26-10-2026): la misma medida en todos (--columna-venta) y se desplaza ENTERA, con una barra fina
   en su borde; lo elegido (.lista-pedido) no se desplaza aparte en una cajita al medio, y los totales con Cobrar
   (.pie-pedido) quedan pegados abajo, siempre a la vista. */
:root { --columna-venta: 420px; }
.columna-pedido { display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-2, #c4c4c4) transparent; border-left: 1px solid var(--linea); border-radius: 0; background: var(--capa); }
/* Adentro todo toma su altura real (nada se achica ni nace en cero, si no la lista se sale por encima del pie); solo el bloque
   de la lista crece para empujar el pie al fondo. Doble clase: le gana a la «hoja» de cada rubro, que se carga después */
.columna-pedido.columna-pedido > * { flex: 0 0 auto; min-height: auto; }
.columna-pedido.columna-pedido > :is(.lista-pedido, :has(.lista-pedido)) { flex: 1 0 auto; }
.columna-pedido .lista-pedido { flex: 1 0 auto; min-height: auto; max-height: none; overflow: visible; }
.columna-pedido .pie-pedido { position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: var(--pie-pedido-fondo, var(--capa)); box-shadow: 0 -10px 16px -14px rgb(0 0 0 / .35); }
/* Foto de producto en su tarjeta: sobre gris claro, distinta del blanco de los datos (si todo es blanco, las tarjetas no se
   distinguen). Las fotos sobre fondo blanco se mezclan con el gris y el producto queda solo, sin recuadro. */
.foto-producto { background: var(--fondo-foto, #ececec); } .foto-producto img { mix-blend-mode: multiply; }
/* Lista con ficha (clientes, inventario, proveedores): la columna de la lista nunca crece más que su espacio. Una grilla sin
   columnas dichas crece según su contenido y se mete bajo la ficha de la derecha (pasó en el Inventario de la brostería). */
.inv-principal, .contenido-v, .catalogo { min-width: 0; }
.inv-principal { grid-template-columns: minmax(0, 1fr); }
.inv-cab { flex-wrap: wrap; row-gap: 10px; }
/* El armazón de lista con ficha, igual en todos los sistemas: la lista a lo ancho y la ficha de 380 px a la derecha. Cada
   sistema solo cambia medidas (alto de fila, letra del título) y su color de fila elegida. */
.contenido:has(> .inv) { padding: 0; overflow: hidden; }
.inv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: 100%; }
.inv-principal { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 16px; min-height: 0; overflow: hidden; padding: 20px 24px 0; }
.inv-principal:has(> :nth-child(4)) { grid-template-rows: auto auto auto minmax(0, 1fr); }   /* con franja de aviso arriba */
.inv-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inv-cab h1 { font-size: 28px; font-weight: 600; }
.inv-lista { min-height: 0; overflow: auto; border: 1px solid var(--linea); border-bottom: 0; border-radius: var(--r2) var(--r2) 0 0; background: var(--capa); }
.inv-lista table { width: 100%; border-collapse: collapse; }
.inv-lista thead th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 16px; background: var(--capa-2); color: var(--tinta-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.inv-lista td { height: 52px; padding: 4px 16px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.inv-lista .der { text-align: right; }
.inv-lista tbody tr { cursor: pointer; transition: background var(--t, .15s); } .inv-lista tbody tr:hover { background: var(--capa-2); }
.inv-lista tr[aria-selected] { background: var(--capa-2); box-shadow: inset 5px 0 var(--acento); }
.inv-lado { display: grid; align-content: start; gap: 16px; min-height: 0; overflow: auto; padding: 20px 16px 16px; border-left: 1px solid var(--linea); background: var(--capa); }
.inv-detalle { display: grid; gap: 10px; }
.det-datos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 4px 0; }
.det-datos div { display: grid; gap: 2px; padding: 10px; border-radius: var(--r); background: var(--capa-2); }
.det-datos dt { color: var(--tinta-3); font-size: 12px; }
.det-datos dd { margin: 0; font-weight: 700; font-size: 14px; }

/* La pastilla de siempre (.chip, .chip.rojo, .chip.verde, .chip.ambar) con el mismo aspecto del estado: cuadrito y texto,
   sin fondo de color. Así los sistemas que ya la usan en muchas pantallas cambian todos de una vez. */
.chip { --etapa: var(--tinta-3); display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; border-radius: 0; background: none; color: var(--tinta-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--etapa); }
.chip.rojo { --etapa: var(--alerta, var(--acento)); color: var(--alerta, var(--acento)); background: none; }
.chip.verde { --etapa: var(--bien); color: var(--tinta); background: none; }
.chip.ambar { --etapa: var(--ambar, var(--tinta-3)); color: var(--tinta); background: none; }
/* Atajos a la vista: solo los esenciales (Willian, 26-10-2026: «demasiados atajos estorban»). Dentro de un botón la tecla
   se ve solo si es esencial (F1 ayuda, F2 buscar, F3 agente, F4 cobrar, Enter confirmar: <kbd class="esencial">); las demás
   teclas siguen funcionando y se leen en la barra de abajo y en la ayuda F1 */
/* La barra de desplazamiento va siempre afuera, en el borde de la ventana o de la columna, nunca en una cajita adentro
   (Willian, 26-10-2026: «estos scroll siempre afuera, no adentro») */
.modal-caja { overscroll-behavior: contain; scrollbar-width: thin; }
button:not(.tecla) kbd:not(.esencial) { display: none; }   /* .tecla: la barra de atajos de abajo, que es su lugar */
/* Las ventanas nativas (<dialog>, las de repuestos) siguen las mismas reglas que las del núcleo: entre la cabecera y las
   barras de abajo, se desplazan enteras con la barra en su borde y los botones del pie quedan siempre a la vista */
@media (min-width: 900px) {
  dialog[open] { top: var(--modal-arriba, 72px); bottom: var(--modal-abajo, 100px); max-height: calc(100vh - var(--modal-arriba, 72px) - var(--modal-abajo, 100px)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
dialog > :is(.pie, .fila):last-child { position: sticky; bottom: 0; z-index: 2; }
/* Barras de desplazamiento finas y del color de las líneas en todo el sistema, sin reservar hueco (scrollbar-gutter): una barra
   gruesa en medio rompe la simetría de la pantalla (Willian, 26-10-2026: «no hay simetría, ya hablamos de eso») */
* { scrollbar-width: thin; scrollbar-color: var(--linea-2, #c4c4c4) transparent; }
/* Línea de la cuenta (lineaPedido de base.js), igual en todos: cantidad | nombre y detalle | importe con − + debajo */
.linea-pedido { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; grid-template-areas: "cant txt importe" "cant txt botones"; align-items: start; column-gap: 12px; row-gap: 8px; padding: 14px 0; border-bottom: 1px dashed var(--linea); }
.linea-pedido:last-child { border-bottom: 0; }
.lp-cant { grid-area: cant; font-weight: 700; font-size: 16px; line-height: 1.35; white-space: nowrap; }
.lp-txt { grid-area: txt; min-width: 0; }
.lp-txt > b { display: block; line-height: 1.3; }
.lp-sub { margin: 3px 0 0; color: var(--tinta-3); font-size: 13px; }
.lp-importe { grid-area: importe; font-size: 17px; text-align: right; white-space: nowrap; }
.lp-botones { grid-area: botones; justify-self: end; display: flex; gap: 4px; }
.lp-botones button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--linea); border-radius: var(--r); background: var(--capa); color: var(--tinta); cursor: pointer; }
.lp-botones button:hover { background: var(--capa-2); }
/* Con el agente en la esquina, el contenido deja espacio abajo: lo último de una lista nunca queda escondido debajo de él */
body:has(.ag-presencia.visible) :is(.pagina, .contenido, .cfg-panel, .ficha-zona) { padding-bottom: 96px; }