/* FRONTEND VERSIÓN 3 · FASE 7 (7/10/2026) — diseno-inventario.css.
   La caja, el inventario y las bodegas. Usa los tokens y la escala de
   diseno.css; va después de las demás hojas `diseno-*.css`.
   Fuentes: el informe del 6/10 (sección 12 y las fichas 96 a 106) y las
   láminas 12, 21 y 22 —solo composición—. Ningún texto, paso ni regla cambia:
   lo de «La caja» es de Mario (30/9 y 2/10/2026). */

/* ================================================================ La caja */
/* LA BARRA DE LA CAJA, QUE SE LEA (fase 7). El estado de la caja escogida y
   su botón son lo primero que mira el cajero antes de cobrar: van con la letra
   de leer (medían 13 px) y el botón con el alto de un botón (medía 26). Lo
   demás —el color ámbar cuando no se puede vender, los textos, quién ve el
   botón— es de facturar.js y de diseno-facturar.css, y no se toca. */
.facturar > .fac-barra-caja { font-size: var(--t-texto); gap: var(--e-2) var(--e-4); padding: var(--e-2) var(--e-4); }
.facturar > .fac-barra-caja .boton { min-height: 32px; padding-inline: var(--e-4); }

/* LA APERTURA Y EL ARQUEO: LA CIFRA, GRANDE. Son ventanas de un solo dato —la
   plata que se contó—, así que el campo mide lo que un botón y su número se
   lee de lejos. Cada una lleva su clase: `.caja-apertura` (facturar.js) y
   `.caja-conteo` (conteo-a-ciegas.js). */
.caja-apertura input.w-monto,
.caja-conteo input.w-monto {
  min-height: 44px;
  font-size: 18px;
}
/* Lo que se lee va centrado, como el campo que acompaña; en el arqueo, con
   aire entre un medio y el otro. */
.caja-conteo { gap: var(--e-4); }
.caja-apertura > .nota,
.caja-conteo > .nota,
.caja-cierre > .nota { text-align: center; margin: 0; }

/* EL CIERRE: ESPERADO, CONTADO Y DIFERENCIA, ENTEROS. La tabla heredaba los
   760 px mínimos de las tablas de pantalla: en la ventana corría de lado y en
   el teléfono solo se veía «Medio de pago» —la diferencia, que es a lo que se
   viene, quedaba fuera—. Se viste por su clase, `.caja-cierre` (facturar.js);
   la primera entrega lo reconocía por su forma —cuatro columnas con la última
   de plata— y habría atrapado cualquier tabla así abierta desde Facturar. */
.caja-cierre > .envoltorio-tabla table { min-width: 0; }
.caja-cierre > .envoltorio-tabla td.numero { white-space: nowrap; }

@media (max-width: 700px) {
  /* Todo lo que se toca mide al menos 40 px: el botón de la barra ocupa su renglón. */
  .facturar > .fac-barra-caja .boton { min-height: 40px; flex: 1 1 100%; }
  .caja-conteo textarea { min-height: 64px; }

  /* El cierre, un medio de pago por tarjeta: el medio arriba y debajo sus tres
     cifras, cada una con su rótulo a la izquierda y la plata a la derecha,
     alineadas entre sí. */
  .caja-cierre > .envoltorio-tabla { overflow-x: visible; position: relative; }
  .caja-cierre > .envoltorio-tabla :is(table, tbody) { display: grid; gap: var(--e-2); }
  /* Los títulos de columna quedan para el lector de pantalla (ver abajo). */
  .caja-cierre > .envoltorio-tabla thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .caja-cierre > .envoltorio-tabla tbody tr {
    display: grid; gap: 2px;
    padding: var(--e-3);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
  }
  .caja-cierre > .envoltorio-tabla tbody tr:last-child { background: var(--azul-suave); border-color: var(--azul); }
  .caja-cierre > .envoltorio-tabla tbody td { display: block; padding: 0; border: 0; background: transparent; }
  .caja-cierre > .envoltorio-tabla tbody td:first-child {
    font: 650 var(--t-texto)/1.3 var(--fuente-titulo); text-align: center; margin-bottom: var(--e-1);
  }
  .caja-cierre > .envoltorio-tabla tbody td.numero {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); text-align: right;
  }
  /* CADA CIFRA CON EL RÓTULO QUE ELLA MISMA DICE (`data-rotulo`, que pone
     facturar.js): no se adivina por la posición de la columna. Y EL LECTOR DE
     PANTALLA NO LO OYE DOS VECES: a él le llegan los títulos de columna de la
     tabla; el rótulo pintado lleva texto alterno vacío (` / ""`). La primera
     línea es para el navegador que no entiende esa forma: se queda con ella. */
  .caja-cierre > .envoltorio-tabla tbody td.numero::before {
    content: attr(data-rotulo);
    content: attr(data-rotulo) / "";
    font: 450 13px var(--fuente-texto); color: var(--tenue);
  }
}

/* ============================================================ Inventario */
/* La pantalla es una pila: el hueco entre sus partes lo pone ella. Las
   pestañas, al centro. */
.inv { gap: var(--e-4); }
.inv > .dn-cabecera { margin-bottom: 0; }
.inv > .dn-segmentos { align-self: center; }

/* LOS FILTROS, COMPACTOS (ficha 96): un renglón al centro. La rejilla de
   antes repartía el ancho en tres partes iguales, y el botón de Excel medía
   lo mismo que el buscador. */
.inv-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2) var(--e-3); }
.inv-filtros > input[type="search"] { flex: 1 1 240px; max-width: 420px; text-align: center; }
.inv-filtros > select { flex: 0 1 auto; width: auto; max-width: 100%; text-align: center; text-align-last: center; }

/* EL RESUMEN POR BODEGA, ARRIBA DE LAS FILAS: un cuadro por bodega, al centro. */
.inv-resumen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); }
.inv-resumen:empty { display: none; }
.inv-resumen .dn-kpi { flex: 0 1 220px; padding: var(--e-3) var(--e-4); align-content: center; }
.inv-resumen .dn-kpi b { font-size: 20px; overflow-wrap: anywhere; }

/* EL HISTORIAL: de qué artículo y de cuál bodega, siempre a la vista (ficha
   97), y lo que entra y lo que sale con su color además de su signo. */
.inv-contexto {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--papel-2);
  border-radius: var(--radio);
  text-align: center;
}
.inv-contexto > div { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.inv-contexto small { color: var(--tenue); font-size: var(--t-nota); }
.inv-contexto b { font-weight: 600; overflow-wrap: anywhere; }
td.inv-sube { color: var(--verde); font-weight: 600; }
td.inv-baja { color: var(--rojo); font-weight: 600; }

@media (max-width: 700px) {
  /* Todo lo que se toca mide al menos 40 px. */
  .inv .boton,
  .inv .dn-segmentos button,
  .inv-filtros > input,
  .inv-filtros > select { min-height: 40px; }
  .inv .boton { display: inline-flex; align-items: center; justify-content: center; }
  /* Las cuatro acciones de arriba, de dos en dos y a lo ancho. */
  .inv > .dn-cabecera .dn-acciones { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv > .dn-segmentos { display: flex; align-self: stretch; }
  .inv > .dn-segmentos button { flex: 1 1 auto; }
  .inv-filtros > input[type="search"] { flex: 1 1 100%; max-width: none; }
  .inv-filtros > select { flex: 1 1 0; min-width: 0; }
  /* El resumen, de dos en dos; el que queda solo, a lo ancho. */
  .inv-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .inv-resumen .dn-kpi { padding: 10px var(--e-2); }
  .inv-resumen .dn-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .inv-resumen .dn-kpi b { font-size: clamp(14px, 4.2vw, 20px); }
}

/* ------------------------------------------- mover: el formulario en bloques */
/* ENTRADA, TRASLADO, AJUSTE Y CARGA POR EXCEL (fichas 98, 99, 100b y 105):
   cada paso es un bloque con su número y su nombre, centrado como lo demás. */
.inv-form { gap: var(--e-3); }
.inv-form > .nota { text-align: center; }
.inv-bloque {
  margin: 0;
  min-width: 0;
  padding: var(--e-2) var(--e-4) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: grid;
  gap: var(--e-3);
  justify-items: center;
  text-align: center;
}
.inv-bloque > * { min-width: 0; max-width: 100%; }
.inv-bloque > .campo, .inv-bloque > .rejilla, .inv-bloque > .progreso, .inv-bloque > .pila { justify-self: stretch; }
.inv-bloque > legend { margin-inline: auto; padding: 0 var(--e-2); font: 650 13px var(--fuente-titulo); color: var(--azul); }
.inv-bloque .nota { margin: 0; }
/* Una caja que todavía no tiene nada (el resultado de «Revisar», antes de
   revisar) no ocupa lugar: dejaba un hueco al pie del paso 3 de la carga. */
.inv-bloque > .pila:empty { display: none; }
/* Una bodega se lee entera («Bodega principal (principal)» se cortaba): las
   listas ocupan su columna, y de tres campos van dos arriba y el tercero abajo. */
.inv-bloque .campo > select:not(.w-moneda) { width: 100%; }
.inv-bloque .rejilla.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inv-bloque .rejilla.c3 > :nth-child(3) { grid-column: 1 / -1; }
.inv-bloque ul { margin: var(--e-1) 0 0; padding-left: var(--e-5); text-align: left; }

/* EL GUARDAR, SIEMPRE A LA VISTA: el pie de la ventana se pega abajo también
   en la compu (en el teléfono ya lo hacían todas las ventanas).

   LA LISTA DE ARTÍCULOS NO TAPA «CANCELAR» NI SE LLEVA EL CLIC (hallazgo del
   informe del 6/10/2026: en «Traslado» la lista desplegada cubría los campos
   de abajo y el pie; solo se salía con Esc). La lista sigue FLOTANDO, pero
   más corta (232 px, medía 320), y el pie va por ENCIMA de ella (41; la lista
   va en 40): si alguna vez llegan a cruzarse, lo que se ve y se toca es el
   botón. No se mete dentro del formulario: así, al cerrarse —con el ratón ya
   abajo sobre «Cancelar»— la ventana se encogía 236 px, el botón se iba de
   debajo del puntero y el clic caía en la cortina (medido en Edge con un
   clic de verdad, en Entrada, Traslado y Ajuste). Flotando, cerrarla no mueve
   nada. */
.modal:has(.inv-form) > footer { position: sticky; bottom: 0; z-index: 41; }
.inv-form .sugerencias { max-height: 232px; }

/* ---------------------------------------------------------- bodegas y cajas */
/* CADA BODEGA Y CADA CAJA, UNA TARJETA (ficha 101): el nombre arriba, su
   estado en una línea y debajo lo que se le puede hacer. Las que quepan por
   renglón; en el teléfono, una debajo de la otra. */
.inv-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-3); }
/* Lo que no es una tarjeta —los huesos, el error, el vacío— va a lo ancho. */
.inv-fichas > :not(.inv-ficha) { grid-column: 1 / -1; }
.inv-ficha {
  display: grid; gap: var(--e-2); justify-items: center; align-content: start;
  min-width: 0;
  padding: var(--e-4);
  background: var(--papel);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio);
  text-align: center;
}
.inv-nombre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.inv-nombre > b { font: 650 var(--t-titulo)/1.3 var(--fuente-titulo); overflow-wrap: anywhere; }
.inv-nombre > b.mono { font-family: var(--mono); }
.inv-estado {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-1) var(--e-2);
  min-height: 24px;
  font-size: var(--t-nota); color: var(--tenue);
}
.inv-estado b { color: var(--texto); font-weight: 600; }
.inv-ficha > .acciones { justify-content: center; margin-top: var(--e-1); }

/* ------------------------------------------------------------------ conteos */
/* La cabeza de una tarjeta del inventario: el título a la izquierda y su
   acción en la esquina. */
.inv .tarjeta > .cuerpo > .nota { text-align: center; }
.inv .inv-cabeza { align-items: center; }
.inv .inv-cabeza > h2 { margin: 0; font-size: 17px; }
.inv .inv-cabeza > .acciones { margin-left: auto; align-items: center; justify-content: flex-end; }
/* Un conteo abierto: el avance y «Cerrar el conteo» se quedan arriba mientras
   se baja por los renglones. */
.inv .inv-conteo-barra {
  /* −16 px es el relleno de `main` (estilo.css): con 0 quedaba una rendija
     arriba de la barra por donde se asomaban los renglones. */
  position: sticky; top: -16px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2) var(--e-4);
  padding: var(--e-2) var(--e-4);
  background: var(--papel-2);
  border-bottom: 1px solid var(--borde);
  text-align: center;
}
.inv .inv-conteo-barra > .nota { margin: 0; color: var(--texto); }

@media (max-width: 700px) {
  .inv-form :is(input:not([type="checkbox"]):not([type="file"]), select, textarea),
  .inv .dn-fichas input { min-height: 40px; }
  .inv-bloque { padding-inline: var(--e-3); }
  /* En el teléfono, la rejilla de tres va en UNA columna: de dos en dos,
     «Sale de» y «Va para» medían 132 px y decían «Bodega principa» y «Escogé
     la bodeg» (a 320, dos bodegas que empiezan igual se leían iguales). */
  .inv-bloque .rejilla.c3 { grid-template-columns: 1fr; }
  .inv-bloque .rejilla.c3 > :nth-child(3) { grid-column: auto; }
  /* En el teléfono la cabeza va en columna y al centro; la bodega, a lo ancho. */
  .inv .inv-cabeza { flex-direction: column; align-items: stretch; text-align: center; gap: var(--e-2); }
  .inv .inv-cabeza > h2 { align-self: center; }
  .inv .inv-cabeza > .pastilla { align-self: center; }
  .inv .inv-cabeza > .acciones { margin-left: 0; justify-content: center; }
  .inv .inv-cabeza > .acciones > select { flex: 1 1 100%; min-height: 40px; }
  .inv .inv-cabeza > .acciones > .boton { flex: 1 1 auto; }
  /* En el teléfono `main` lleva 10 px de relleno. */
  .inv .inv-conteo-barra { top: -10px; }
  .inv .inv-conteo-barra > .boton { flex: 1 1 100%; }
}