/* --------------------------------------------------------------------------
   Sistema de Ventas — estilos
   Pensado para laptops de pantalla pequeña, letras grandes y mucho contraste.
   -------------------------------------------------------------------------- */
:root {
  --fondo: #eef1f6;
  --panel: #ffffff;
  --borde: #d3d9e3;
  --texto: #16202e;
  --suave: #667187;
  --azul: #1b5fbe;
  --azul-claro: #e7effb;
  --verde: #12805a;
  --verde-claro: #e2f5ee;
  --rojo: #c3282d;
  --rojo-claro: #fdecec;
  --ambar: #9a6100;
  --ambar-claro: #fdf2dc;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(20, 30, 50, .10), 0 6px 18px rgba(20, 30, 50, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px;
}

button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }

/* --- Estructura general --------------------------------------------------- */
.marco { display: flex; flex-direction: column; height: 100vh; }

.barra {
  display: flex; align-items: center; gap: 10px;
  background: #10233f; color: #fff;
  padding: 0 14px; height: 56px; flex: none;
}
.barra .negocio {
  font-weight: 700; font-size: 1.02rem; margin-right: 4px; white-space: nowrap;
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; flex: none;
  display: flex; align-items: center; gap: 8px;
}
.logo-barra { height: 30px; width: auto; max-width: 44px; border-radius: 5px; object-fit: contain; background: #fff; }
.logo-entrada { display: block; max-height: 76px; max-width: 190px; margin: 0 auto 12px; object-fit: contain; }

/* Segunda fila del menú: las pantallas de la sección donde se está. */
.subbarra {
  display: flex; gap: 4px; flex: none; align-items: center;
  background: #1c3457; padding: 0 14px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid #26436b;
}
.subbarra::-webkit-scrollbar { height: 0; }
.subbarra a {
  color: #b9cbe6; text-decoration: none; padding: 9px 13px; white-space: nowrap;
  font-weight: 600; font-size: .9rem; border-bottom: 3px solid transparent;
}
.subbarra a:hover { color: #fff; }
.subbarra a.activo { color: #fff; border-bottom-color: #4d9bff; }
.barra nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.barra nav::-webkit-scrollbar { height: 0; }
.barra nav a {
  color: #c7d5ea; text-decoration: none; padding: 8px 10px;
  border-radius: 8px; white-space: nowrap; font-weight: 600; font-size: .93rem;
  display: flex; align-items: center; gap: 7px;
}
.barra nav a .ico { font-size: 1.05rem; line-height: 1; }
.globo-rojo {
  background: var(--rojo); color: #fff; border-radius: 999px; font-size: .7rem;
  font-weight: 800; padding: 2px 7px; line-height: 1.2;
}
/* Mismo globo, en ambar: no es un error, es algo que conviene hacer. El ambar
   de la paleta es oscuro (para texto sobre blanco) y aqui el fondo es la barra
   azul marino, asi que este lleva su propio tono claro. */
.globo-ambar {
  background: #f0b429; color: #3a2a06; border-radius: 999px;
  font-size: .7rem; font-weight: 800; padding: 2px 7px; line-height: 1.2;
}
.barra nav a:hover { background: #1c3457; color: #fff; }
.barra nav a.activo { background: #2b6fd6; color: #fff; }
.barra .tasa {
  background: #1c3457; border-color: #2b4a75; color: #d7e5f8;
  padding: 7px 12px; font-weight: 700; white-space: nowrap; flex: none;
}
.barra .tasa:hover { background: #2b6fd6; color: #fff; }
.barra .quien { text-align: right; line-height: 1.15; font-size: .82rem; white-space: nowrap; }
.barra .quien b { display: block; font-size: .95rem; }

/* Franja bien visible cuando se trabaja sobre una copia de práctica. */
.aviso-practica {
  flex: none; background: repeating-linear-gradient(45deg, #f6c343, #f6c343 14px, #ffd766 14px, #ffd766 28px);
  color: #4a3400; text-align: center; padding: 7px 14px; font-weight: 700; font-size: .9rem;
  border-bottom: 2px solid #d9a400;
}

/* La copia en la nube (06/10/2026): azul, para no confundirla con la práctica. */
.aviso-nube {
  flex: none; background: #dbeafe; color: #1e3a8a; text-align: center; padding: 6px 14px;
  font-size: .85rem; border-bottom: 2px solid #93c5fd;
}

/* La franja de la tasa atrasada. No se puede cerrar a propósito: mientras la
   tasa de venta esté por debajo de lo que cuesta el dólar, ahí sigue. */
.aviso-tasa {
  flex: none; background: #fff4d6; color: #6b4b00; text-align: center;
  padding: 7px 14px; font-weight: 700; font-size: .88rem; cursor: pointer;
  border-bottom: 2px solid #f0b429;
}
.aviso-tasa:hover { background: #ffeab8; }
.aviso-tasa.urgente {
  background: repeating-linear-gradient(45deg, #ffd0d0, #ffd0d0 14px, #ffdede 14px, #ffdede 28px);
  color: #7a1414; border-bottom-color: #c62828;
}

.contenido { flex: 1; overflow: auto; padding: 16px; }
.contenido.sin-espacio { padding: 0; }

/* --- Piezas comunes ------------------------------------------------------- */
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 16px;
}
.tarjeta > h2 { margin: 0 0 14px; font-size: 1.15rem; }
.tarjeta > h2 .sub { font-weight: 400; color: var(--suave); font-size: .85rem; }
/* Tarjeta de "esto conviene hacerlo ya": llama la atención sin ser un error. */
.tarjeta.recomendado {
  border-left: 5px solid #f0b429;
  background: linear-gradient(to right, #fffaf0, var(--panel) 320px);
}

h1 { font-size: 1.4rem; margin: 0 0 14px; }
.silencio { color: var(--suave); }
.centro { text-align: center; }
.derecha { text-align: right; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Dentro de una fila los campos no deben estirarse a lo ancho de la pantalla. */
.fila > input[type=date] { width: auto; min-width: 160px; flex: none; }
.fila > select { width: auto; min-width: 180px; flex: none; }
.fila.pegado { gap: 6px; }

/* Casillas con su explicación al lado. Sin esto, el flex-wrap de .fila manda la
   explicación al renglón de abajo y el texto queda descolgado de su casilla:
   se lee como si fuera otra cosa. La casilla no se encoge, el texto ocupa el
   resto y parte por dentro, y van alineados por arriba (para explicaciones de
   varios renglones, centrarlos deja la casilla flotando a media altura). */
.fila:has(> input[type=checkbox]) { flex-wrap: nowrap; align-items: flex-start; }
.fila > input[type=checkbox] { flex: none; margin-top: 1px; }
.fila:has(> input[type=checkbox]) > div { flex: 1; min-width: 0; }
.crece { flex: 1; }
.rejilla { display: grid; gap: 14px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

label.campo { display: block; margin-bottom: 10px; }
label.campo > span { display: block; font-size: .76rem; font-weight: 700; color: var(--suave); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }

input[type=text], input[type=number], input[type=date], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid #b9d3f7; border-color: var(--azul); }
input.dinero { text-align: right; font-variant-numeric: tabular-nums; }

button {
  border: 1px solid var(--borde); background: #fff; color: var(--texto);
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
button:hover { background: #f3f6fa; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Casillas bloqueadas (p. ej. la ficha de un producto que ya está en la
   tienda online): que se vea que no se escriben aquí. */
input:disabled, textarea:disabled, select:disabled { background: #f1f3f6; color: #5b6472; cursor: not-allowed; }
button.principal { background: var(--azul); border-color: var(--azul); color: #fff; }
button.principal:hover { background: #17509f; }
button.exito { background: var(--verde); border-color: var(--verde); color: #fff; }
button.exito:hover { background: #0d6849; }
button.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
button.peligro:hover { background: #a51f24; }
button.plano { border-color: transparent; background: transparent; padding: 6px 10px; }
button.plano:hover { background: #e6ebf3; }
button.grande { padding: 16px 22px; font-size: 1.1rem; }
button.chico { padding: 6px 10px; font-size: .85rem; }

.etiqueta {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: #e6ebf3; color: var(--suave);
}
.etiqueta.verde { background: var(--verde-claro); color: var(--verde); }
.etiqueta.ubic { background: #fff3b8; color: #5b4a00; margin-left: 6px; padding: 1px 7px; font-size: .74rem; letter-spacing: .03em; vertical-align: 1px; }
.etiqueta.roja { background: var(--rojo-claro); color: var(--rojo); }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.azul { background: var(--azul-claro); color: var(--azul); }

table { width: 100%; border-collapse: collapse; }
/* Filas más bajas (auditoría 16/09/2026, regla 3): con 10 px arriba y abajo y dos
   renglones por celda, una fila medía 80-139 px y se veían 3-6 por pantalla. */
th, td { padding: 7px 8px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); background: #f7f9fc; position: sticky; top: -16px; z-index: 1; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: #f7f9fc; }
/* UNA SOLA BARRA DE DESPLAZAMIENTO (auditoría 16/09/2026, regla 1). Antes toda
   tabla medía como mucho el 60 % de la pantalla y se desplazaba por dentro,
   mientras la página también se desplazaba: 4-6 filas a la vista en la laptop de
   1366 y un hueco vacío en la de 1920. Ahora la tabla crece y se desplaza la
   pantalla, con los títulos de columna pegados arriba. Dentro de una ventana,
   igual: se desplaza la ventana. */
.tabla-marco { overflow: visible; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
/* El asa para ensanchar una columna (comun.js, conAnchos, 30/09/2026): una franja invisible en el
   borde derecho del encabezado que se ve al pasar el ratón (el th ya es sticky: sirve de ancla). */
th .col-asa { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; }
th .col-asa::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 2px; border-radius: 2px; background: transparent; }
th:hover .col-asa::after, th .col-asa:active::after { background: var(--azul); opacity: .55; }
table.con-anchos { table-layout: fixed; }
table.con-anchos td, table.con-anchos th { overflow: hidden; text-overflow: ellipsis; }
body.redimensionando, body.redimensionando * { cursor: col-resize !important; user-select: none !important; }
.inv-tabla th { white-space: nowrap; }
.inv-ubic { white-space: nowrap; font-family: Consolas, monospace; font-weight: 700; font-size: .85rem; }
.modal-caja th { position: static; }
/* Una lista que de verdad tiene que tener alto propio (un recuadro dentro de un
   formulario) lo pide con esta clase. */
.tabla-marco.con-alto { overflow: auto; max-height: 45vh; }
.tabla-marco.con-alto th { top: 0; }
/* Fila que se abre al pulsarla. */
tr.pulsable { cursor: pointer; }

/* Elegir qué columnas se ven (comun.js). Discreto: una línea de texto encima
   de la tabla que solo se abre si la van a tocar. */
.columnas-elegir { margin: 0 0 6px; font-size: .82rem; }
.columnas-elegir > summary { cursor: pointer; color: var(--suave); width: max-content; user-select: none; }
.columnas-elegir > summary:hover { color: var(--texto); }
.columnas-lista {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel);
}
.columnas-lista label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.columnas-lista input { margin: 0; }

.vacio { padding: 36px 20px; text-align: center; color: var(--suave); }
.vacio .icono { font-size: 2.4rem; display: block; margin-bottom: 8px; }

/* --- Indicadores (números grandes del resumen) ---------------------------- */
/* Más bajos que antes (regla 8): 80-150 px por recuadro empujaban la lista a la
   mitad de la pantalla. Lo grande se reserva para lo que se cobra o se entrega. */
.dato {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 9px 14px; box-shadow: var(--sombra);
}
.dato .rotulo { font-size: .72rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; }
.dato .valor { font-size: 1.3rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dato.grande .valor { font-size: 1.7rem; }
.dato .pie { font-size: .8rem; color: var(--suave); margin-top: 2px; }
/* Misma tarjeta, la mitad de alto: para cabeceras que compiten con una lista
   larga por el espacio de la pantalla. */
.dato.compacto { padding: 8px 12px; }
.dato.compacto .rotulo { font-size: .7rem; }
.dato.compacto .valor { font-size: 1.15rem; margin-top: 1px; }
.dato.compacto .pie { font-size: .74rem; margin-top: 0; }
.dato.verde .valor { color: var(--verde); }
.dato.rojo .valor { color: var(--rojo); }
.dato.azul .valor { color: var(--azul); }

/* --- Entrada al sistema --------------------------------------------------- */
.entrada { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.entrada-caja { background: var(--panel); border-radius: 16px; box-shadow: var(--sombra); padding: 32px; width: 100%; max-width: 460px; }
.entrada-caja h1 { text-align: center; margin-bottom: 4px; }
.entrada-caja .lema { text-align: center; color: var(--suave); margin-bottom: 22px; }
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.persona {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px; border: 2px solid var(--borde); border-radius: 12px;
  background: #fff; cursor: pointer; font-weight: 700;
}
.persona:hover { border-color: var(--azul); background: var(--azul-claro); }
.persona .cara { font-size: 1.8rem; }
.persona small { font-weight: 500; color: var(--suave); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.teclado button { padding: 18px; font-size: 1.35rem; font-weight: 700; }
.puntos { display: flex; justify-content: center; gap: 12px; margin: 18px 0 4px; }
.puntos i { width: 16px; height: 16px; border-radius: 50%; background: #d7dde7; display: block; }
.puntos i.lleno { background: var(--azul); }

/* --- Caja (punto de venta) ------------------------------------------------
   El carrito va a la IZQUIERDA y ancho, que es lo que el cajero mira todo el
   tiempo; los productos a la derecha. */
/* Los productos ocupan el ancho; la venta en curso va a la derecha, fija. */
.pos { display: grid; grid-template-columns: 1fr 690px; height: 100%; min-height: 0; }
.pos-izq { padding: 14px; overflow: auto; min-height: 0; }
.pos-der {
  background: var(--panel); border-left: 1px solid var(--borde);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
/* Dentro de la venta en curso: los artículos a la izquierda (ocupan todo el
   alto, se ven muchos) y las opciones en una columna a su lado. */
.pos-cuerpo { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 296px; }
.pos-lateral {
  display: flex; flex-direction: column; min-height: 0; overflow: auto;
  background: #f9fbfd; border-left: 1px solid var(--borde);
}
.pos-opciones { display: grid; grid-template-columns: 1fr; }
.pos-opciones .ancho-total { grid-column: 1 / -1; }

/* En pantallas estrechas se vuelve a apilar: opciones debajo del carrito. */
@media (max-width: 1280px) {
  .pos { grid-template-columns: 1fr 430px; }
  .pos-cuerpo { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .pos-lateral { border-left: none; overflow: visible; }
  .pos-opciones { grid-template-columns: 1fr 1fr; gap: 0 10px; }
}

.buscador { position: relative; margin-bottom: 12px; }
.buscador input { font-size: 1.15rem; padding: 15px 15px 15px 44px; }
.buscador .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; opacity: .6; }

/* Cuadritos del punto de venta: foto arriba, nombre recortado, precio abajo. */
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.producto {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column;
  overflow: hidden;
}
.producto:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.producto .foto {
  width: 100%; height: 112px; object-fit: cover; background: #eef1f6; display: block; flex: none;
}
.producto .sinfoto {
  width: 100%; height: 112px; background: #eef1f6; display: flex; align-items: center;
  justify-content: center; font-size: 2rem; color: #b6c0d0; flex: none;
}
.producto .cuerpo { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.producto .nom {
  font-weight: 700; line-height: 1.22; font-size: .93rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.producto .cod { font-family: "Consolas", monospace; font-size: .7rem; color: var(--suave); letter-spacing: .4px; }
.producto .exi { font-size: .78rem; color: var(--suave); }
.producto .pre .pre-usd {
  display: block; font-size: .8rem; font-weight: 700; color: var(--suave);
}
.producto .pre {
  color: var(--azul); font-weight: 800; font-size: 1.05rem; margin-top: auto;
  padding-top: 5px; border-top: 1px solid #eef1f6;
}
.producto.agotado { opacity: .6; }
.producto.agotado .exi { color: var(--rojo); font-weight: 700; }

/* Selector de foto en las fichas */
.foto-caja { display: flex; gap: 14px; align-items: flex-start; }
.foto-vista { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); }
.foto-vacia {
  width: 96px; height: 96px; border-radius: 10px; border: 2px dashed var(--borde);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #b6c0d0;
}

.carrito-cab { padding: 12px 14px; border-bottom: 1px solid var(--borde); }

/* Pestañas de los tickets abiertos a la vez. */
.tickets { display: flex; gap: 5px; padding: 7px 10px 0; flex-wrap: wrap; border-bottom: 1px solid var(--borde); background: #f4f7fb; }
.tickets .ticket {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--borde); border-bottom: none; border-radius: 8px 8px 0 0;
  background: #e8eef6; color: var(--suave); cursor: pointer;
}
.tickets .ticket:hover { background: #dde6f1; }
.tickets .ticket.activo { background: var(--panel); color: var(--azul); border-color: var(--azul); }
.tickets .ticket .globo {
  background: var(--azul); color: #fff; border-radius: 10px; padding: 0 6px; font-size: .72rem; line-height: 1.5;
}
.tickets .ticket.activo .globo { background: var(--azul); }
.tickets .ticket .cerrar { opacity: .55; font-size: .8rem; padding: 0 2px; }
.tickets .ticket .cerrar:hover { opacity: 1; color: var(--rojo); }
.tickets .ticket.nuevo { color: var(--verde); font-weight: 800; padding: 6px 12px; }
.carrito-lista { min-height: 84px; overflow: auto; padding: 6px 10px; }
.carrito-vacio { padding: 40px 16px; text-align: center; color: var(--suave); }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 10px 6px; border-bottom: 1px solid #edf0f5; }
.linea .nom { font-weight: 600; }
.linea .detalle { font-size: .85rem; color: var(--suave); }
.linea .imp { font-weight: 700; font-variant-numeric: tabular-nums; }
.cant { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cant button { padding: 4px 11px; font-size: 1.05rem; line-height: 1; }
.cant input { width: 62px; text-align: center; padding: 5px; }

.carrito-pie { flex: 1 1 auto; border-top: none; padding: 10px 14px 6px; background: #f9fbfd; }
.carrito-pie label.campo { margin-bottom: 7px; }
.carrito-pie label.campo > span { font-size: .72rem; margin-bottom: 2px; }
.carrito-pie input, .carrito-pie select, .carrito-pie button.chico { padding: 7px 9px; font-size: .92rem; }
.carrito-pie .total-linea { padding: 3px 0; }
.carrito-accion { flex: none; padding: 10px 16px 12px; background: #f9fbfd; border-top: 1px solid var(--borde); }
.total-linea { display: flex; justify-content: space-between; padding: 3px 0; }
.total-linea.grande { font-size: 1.45rem; font-weight: 800; padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--borde); }

/* --- Ventana emergente ---------------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(14, 24, 40, .55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal.oculto { display: none; }
.modal-caja { background: var(--panel); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; padding: 22px; scroll-padding-top: 76px; scroll-padding-bottom: 120px; }
.modal-caja:focus { outline: none; }
.modal-caja.ancho { max-width: 900px; }
.modal-caja.maximo { max-width: min(1320px, 96vw); }
.modal-caja h2 { margin: 0 0 16px; }
.modal-pie { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde); }
/* El pie se queda pegado abajo aunque la ventana sea larga (igual que la
   cabecera arriba): los botones de guardar y cancelar siempre a la vista, sin
   tener que desplazarse hasta el fondo (Leo, 06/09/2026: en la laptop de 1366
   el botón de crear la mensajería quedaba fuera con un solo producto). */
.modal-pie { position: sticky; bottom: -22px; z-index: 2; background: var(--panel); margin: 20px -22px -22px; padding: 14px 22px 22px; }
/* Explicación plegada debajo de un campo: un renglón que se toca para leerla. */
details.ayuda { margin: -6px 0 8px; }
details.ayuda summary { font-size: .8rem; color: var(--azul); cursor: pointer; list-style: none; }
details.ayuda summary::before { content: 'ⓘ '; }
details.ayuda p { margin: 4px 0 0; font-size: .85rem; }
/* DÓNDE VA CADA BOTÓN (auditoría 16/09/2026, regla 6): con tres o más botones, lo
   que destruye (Anular, Dar de baja) se va a la IZQUIERDA y separado. Antes
   "Anular venta" ocupaba el sitio donde en las demás ventanas va "Confirmar".
   Las confirmaciones de dos botones ("No" · "Sí, anular") no se tocan. */
.modal-pie:has(> button:nth-of-type(3)) > button.peligro { order: -1; margin-right: auto; }
/* Lo que va a la izquierda de los botones en el pie (un total, un aviso). */
.modal-pie-info { flex: 1; min-width: 0; }
.modal-pie-info b { font-size: 1.15rem; }
.modal-pie-info .silencio { font-size: .8rem; }

/* Cabecera con la cruz de cerrar. Se queda pegada arriba aunque la ventana
   sea larga y haya que desplazarse: la salida siempre está a la vista. */
.modal-cabeza {
  display: flex; align-items: flex-start; gap: 12px;
  position: sticky; top: -22px; z-index: 2;
  background: var(--panel); margin: -22px -22px 16px; padding: 22px 22px 10px;
}
.modal-cabeza h2 { margin: 0; flex: 1; }
.modal-cerrar {
  flex: none; width: 38px; height: 38px; padding: 0; margin: -4px -4px 0 0;
  border: none; background: transparent; border-radius: 10px;
  font-size: 1.5rem; line-height: 1; color: var(--suave); cursor: pointer;
}
.modal-cerrar:hover { background: var(--fondo); color: var(--rojo); }

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.opcion { padding: 13px 10px; border: 2px solid var(--borde); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; text-align: center; }
.opcion:hover { border-color: var(--azul); }
.opcion.marcada { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
/* Barra de filtros: los botones ocupan lo que necesitan, no toda la pantalla.
   Para pantallas donde lo que importa es la lista que va debajo. */
.opciones.linea { display: flex; flex-wrap: wrap; gap: 7px; border-bottom: 0; padding: 0; }
.opciones.linea .opcion { padding: 7px 13px; font-size: .9rem; border-width: 1.5px; }

/* --- Piezas nuevas de la auditoría del 16/09/2026 ------------------------- */
/* Cabecera de pantalla en una fila: título a la izquierda, acción principal a la
   derecha, filtros y totales en la misma franja (regla 2). */
.cabeza-pantalla { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.cabeza-pantalla h1 { margin: 0; font-size: 1.25rem; }
/* Totales en una línea de texto, no en recuadros. */
.resumen-linea { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; color: var(--suave); margin: 0 0 10px; }
.resumen-linea b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Menú de fila «⋯» (regla 7). */
.acciones-fila { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; white-space: nowrap; }
details.menu-fila { position: relative; display: inline-block; }
details.menu-fila > summary {
  list-style: none; cursor: pointer; padding: 5px 11px; border: 1px solid var(--borde); border-radius: 8px;
  background: #fff; font-weight: 800; line-height: 1.1; user-select: none;
}
details.menu-fila > summary::-webkit-details-marker { display: none; }
details.menu-fila[open] > summary { background: var(--azul-claro); border-color: var(--azul); }
.menu-fila-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,50,.18);
  padding: 4px; display: flex; flex-direction: column;
}
.menu-fila-lista button { border: 0; background: transparent; text-align: left; padding: 8px 12px; font-weight: 600; border-radius: 7px; }
.menu-fila-lista button:hover { background: var(--fondo); }
.menu-fila-lista button.peligro-texto { color: var(--rojo); }
.menu-fila-lista hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 0; }

/* Buscador con lista flotante (regla 11): no empuja lo de abajo. */
.buscador-flotante { position: relative; }
.buscador-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 40; max-height: 320px; overflow: auto;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 12px 30px rgba(20,30,50,.18); padding: 4px;
}
.buscador-opcion { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.buscador-opcion:hover { background: var(--fondo); }
.buscador-opcion.marcada { background: var(--azul-claro); outline: 1px solid var(--azul); }
.buscador-opcion.agotada { opacity: .55; }
.buscador-texto { flex: 1; min-width: 0; font-weight: 600; }
.buscador-detalle { color: var(--suave); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buscador-enter { color: var(--azul); font-weight: 800; font-size: .85rem; }
.buscador-vacio { padding: 10px; color: var(--suave); }
.selector-buscable input { background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

/* --- Aviso plegado (un renglón que se abre) -------------------------------- */
.plegable { margin-bottom: 12px; }
.plegable > summary {
  cursor: pointer; list-style: none; padding: 9px 14px; border-radius: 10px;
  font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: 'ver ▾'; font-weight: 600; font-size: .82rem; opacity: .75; }
.plegable[open] > summary::after { content: 'ocultar ▴'; }
.plegable > summary:hover { filter: brightness(.97); }
.plegable.roja > summary { background: var(--rojo-claro); color: var(--rojo); border-left: 5px solid var(--rojo); }
.plegable .detalle { padding: 10px 14px 4px; }

/* --- Avisos flotantes ----------------------------------------------------- */
#avisos { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 80; }
.aviso {
  background: #10233f; color: #fff; padding: 13px 18px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 380px; font-weight: 600;
  animation: entrar .18s ease-out;
}
.aviso.bien { background: var(--verde); }
.aviso.mal { background: var(--rojo); }
.aviso.tasa { background: var(--ambar); }
@keyframes entrar { from { opacity: 0; transform: translateX(24px); } }

.recibo { font-family: "Consolas", monospace; font-size: .9rem; white-space: pre-wrap; background: #fbfcfe; border: 1px dashed var(--borde); border-radius: 8px; padding: 16px; }

/* En laptops de pantalla estrecha se va quitando lo accesorio para que
   ninguna pantalla del menú quede escondida. */
@media (max-width: 1700px) {
  .barra .negocio { display: none; }
  .barra nav a { padding: 8px 8px; font-size: .88rem; }
}
@media (max-width: 1450px) {
  .barra .quien span { display: none; }
}
/* En la laptop se MANTIENEN los nombres del menú mientras haya espacio: es el
   método de trabajo principal (no el móvil). El menú ya hace scroll horizontal
   si no cabe. Solo en ventanas de verdad estrechas se dejan solo los iconos,
   menos en la pantalla donde se está. */
@media (max-width: 1024px) {
  .barra nav a .txt { display: none; }
  .barra nav a.activo .txt { display: inline; }
}

@media (max-width: 1000px) {
  .pos { grid-template-columns: 1fr; }
  .pos-der { border-right: none; border-bottom: 2px solid var(--borde); }
}

/* --- Teléfonos ------------------------------------------------------------
   El sistema también se abre desde el móvil (el dueño entra por Tailscale
   desde donde esté). Nada de aquí toca la lógica ni el diseño de laptop:
   solo aprieta espacios y apila lo que no cabe en una pantalla angosta. */
@media (max-width: 640px) {
  .contenido { padding: 10px; }
  h1 { font-size: 1.2rem; }

  /* EL MENÚ VA ABAJO (04/10/2026), a la altura del pulgar: las pantallas de la
     sección donde se está y "Menú" para cambiar de sección (.nav-movil, la pinta
     app.js). Arriba queda una sola fila fina con la tasa, quién es y Salir. La
     barra de secciones y la subbarra de la laptop no se pintan. Antes el menú
     ocupaba dos filas arriba y, con la subbarra, un tercio de la pantalla. */
  .marco { height: 100dvh; }
  /* Y sin barra de arriba (04/10/2026, Leo: "hace falta ese header?"): quién es, la
     tasa y Salir pasan a la hoja del Menú. La franja de práctica se queda en una
     raya de 6 px, que recuerda sin comerse pantalla; el texto entero, en el Menú. */
  .barra { display: none !important; }
  .marco > .aviso-practica { font-size: 0; padding: 0; height: 6px; border-bottom: 0; }
  .hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .hoja-quien { font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hoja-practica { border-radius: 8px; font-size: .8rem; padding: 6px 10px; margin-bottom: 10px; }
  .hoja-salir { width: 100%; margin-top: 14px; font-weight: 700; color: var(--rojo); background: #fff; border: 1px solid var(--borde); }
  .barra nav, .subbarra { display: none; }
  .barra .tasa { padding: 5px 9px; font-size: .85rem; }
  .barra .quien { flex: 1; font-size: .74rem; }
  .barra .quien b { font-size: .85rem; }
  .nav-movil { display: flex; }
  .tarjeta { padding: 12px; margin-bottom: 12px; }
  /* Botones y casillas del tamaño del dedo. */
  button { min-height: 42px; }
  button.chico, button.plano.chico { min-height: 36px; }
  input[type=text], input:not([type]), input[type=number], select { min-height: 44px; }

  /* Los números del resumen van de dos en dos, compactos; las tarjetas
     grandes (cuentas, fichas) se apilan de una en una como ya hacían. */
  .rejilla { gap: 8px; }
  .rejilla.c3, .rejilla.c4 { grid-template-columns: 1fr 1fr; }
  .dato { padding: 10px 12px; }
  .dato .valor { font-size: 1.2rem; }

  /* Los filtros de fecha y los selectores sueltan su ancho fijo de laptop:
     con él, un "del ... al ..." se salía de la pantalla. */
  .fila > input[type=date] { min-width: 130px; flex: 1; }
  .fila > select { min-width: 0; flex: 1; }

  /* Ventanas a casi toda la pantalla, arrancando desde arriba (si se abre el
     teclado del teléfono, una ventana centrada salta). Los -14px van a juego
     con el padding de la caja, por la cabecera pegada que tapa su borde. */
  .modal { padding: 0; align-items: flex-start; }
  .modal-caja { padding: 14px; max-height: 100dvh; border-radius: 0 0 14px 14px; }
  .modal-cabeza { margin: -14px -14px 12px; padding: 14px 14px 8px; top: -14px; }
  .modal-pie { flex-wrap: wrap; bottom: -14px; margin: 16px -14px -14px; padding: 10px 14px 14px; }
  .modal-pie-info { flex-basis: 100%; }
  .modal-pie button { flex: 1; }

  /* Un solo scroll, el de la página: el marco interior de 60vh en el táctil
     hace que el dedo mueva una lista dentro de otra. El scroll de lado para
     las tablas anchas se queda, que es el que las salva en el teléfono. */
  .tabla-marco { max-height: none; overflow-x: auto; }
  th, td { padding: 8px 6px; }

  /* Los avisos flotantes ocupan el ancho, arriba, en vez de asomar cortados
     por la derecha. */
  #avisos { left: 10px; right: 10px; top: 10px; }
  .aviso { max-width: none; }

  /* La caja: cuadritos de producto más chicos, caben dos columnas. */
  .productos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .producto .foto, .producto .sinfoto { height: 92px; }
  .pos-izq { padding: 10px; }
  .pos-opciones { grid-template-columns: 1fr; }
}

@media print {
  .barra, .modal-pie, #avisos, .modal-cerrar { display: none !important; }
  /* Lo que solo tiene sentido en la pantalla: instrucciones de "pulse aquí",
     avisos de cómo usar la ventana. En el papel no sirven de nada y una línea
     suelta al final se lleva UNA HOJA ENTERA. */
  .no-imprimir { display: none !important; }
  /* Las tablas viven dentro de un marco que hace scroll (max-height: 60vh).
     Al imprimir eso recortaba la lista a lo que se veía en pantalla: una hoja
     y ya, aunque la lista tuviera 520 renglones. Al imprimir el marco se
     suelta entero y la tabla se reparte en las hojas que haga falta. */
  .tabla-marco { overflow: visible !important; max-height: none !important; border: none; }
  .tabla-marco thead { display: table-header-group; }
  .tabla-marco tr { break-inside: avoid; page-break-inside: avoid; }
  /* Al imprimir con una ventana abierta (recibos, reportes, hojas), solo debe
     salir la ventana: se oculta la pantalla de fondo para que no imprima una
     primera hoja de más. */
  #modal.oculto { display: none !important; }
  body:has(#modal:not(.oculto)) #app { display: none !important; }
  .modal { position: static; background: none; padding: 0; }
  .modal-caja { box-shadow: none; max-height: none; }
  body { background: #fff; }
  /* Que la tabla QUEPA en el papel. Sin esto, una hoja con cinco columnas se
     salía por la derecha y la última se perdía (pasó con el catálogo de los
     gestores: la comisión quedaba cortada en el borde). Letra más chica, menos
     aire y anchos repartidos por el contenido, no por el título. */
  .modal-caja { width: 100% !important; max-width: none !important; }
  .tabla-marco table { width: 100% !important; font-size: 10px; table-layout: auto; }
  .tabla-marco th, .tabla-marco td { padding: 3px 5px !important; }
  .tabla-marco th { white-space: normal; }
}

/* --- El ticket de la impresora térmica (POS-58, rollo de 58 mm) ------------
   Cuando se imprime un recibo de venta o un ticket de mensajería no debe salir
   la ventana entera: solo el texto del ticket, al ancho del rollo y en negro
   sobre blanco (el fondo gris y el borde de puntos se comen la tinta térmica
   y no aportan nada).

   El alto de la página y el tamaño de la letra los pone imprimirTicket() en
   comun.js, que los mide sobre el ticket de verdad. */
@media print {
  body.imprimiendo-ticket #app,
  body.imprimiendo-ticket .modal-cabeza,
  body.imprimiendo-ticket .modal-pie,
  body.imprimiendo-ticket #avisos { display: none !important; }

  body.imprimiendo-ticket,
  body.imprimiendo-ticket .modal,
  body.imprimiendo-ticket .modal-caja {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.imprimiendo-ticket .recibo {
    border: none;
    border-radius: 0;
    background: #fff;
    color: #000;
    line-height: 1.15;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
}

/* --- Galería de fotos del producto (07/09/2026) -------------------------- */
/* Tira de miniaturas: la primera es la principal y lleva su marca. Se envuelve
   sola para que en la laptop quepan varias por fila y en el móvil vayan de dos
   en dos sin desbordar la ventana. */
.galeria { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.galeria-foto {
  position: relative; width: 92px; border: 1px solid var(--borde);
  border-radius: 10px; padding: 5px; background: #fff;
}
.galeria-foto.principal { border-color: var(--verde); border-width: 2px; padding: 5px; }
.galeria-foto img {
  width: 100%; height: 70px; object-fit: contain; border-radius: 6px; background: #fff;
}
.galeria-foto .marca {
  position: absolute; top: 2px; left: 2px; font-size: .66rem; padding: 1px 5px;
}
/* Desde el 05/10/2026 cada miniatura es un botón: tocarla abre sus opciones. */
button.galeria-foto { cursor: pointer; color: inherit; font: inherit; min-width: 0; min-height: 0; display: block; }
button.galeria-foto:hover:not(:disabled) { border-color: var(--azul); }
button.galeria-foto:disabled { cursor: default; opacity: 1; }
.galeria-vista {
  display: block; width: 100%; max-height: 52vh; object-fit: contain;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
}
.galeria-acciones { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.galeria-accion { width: 100%; min-height: 46px; font-size: 1rem; }
.galeria-accion.galeria-quitar { color: var(--rojo); min-height: 40px; font-size: .92rem; }
.galeria-mas {
  width: 92px; height: 92px; border: 2px dashed var(--borde); border-radius: 10px;
  background: #fff; color: var(--silencio); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.galeria-mas:hover { border-color: var(--azul); color: var(--azul); }
@media (max-width: 640px) {
  .galeria-foto, .galeria-mas { width: calc(33% - 7px); }
  .galeria-mas { height: 112px; }
}

/* Lo que no se toca todos los días va plegado: el texto de la tienda online se
   escribe una vez y el precio se mira siempre (Leo, 07/09/2026). */
.plegable {
  border: 1px solid var(--borde); border-radius: 10px; padding: 0 12px;
  margin: 10px 0; background: #fbfbfc;
}
.plegable > summary {
  cursor: pointer; padding: 10px 0; font-weight: 600; font-size: .92rem;
  color: var(--texto); list-style: none;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: '▸ '; color: var(--silencio); }
.plegable[open] > summary::before { content: '▾ '; }
.plegable[open] { padding-bottom: 8px; }

/* ==========================================================================
   ZONAS POR ÁREA (mejoras de la auditoría del 16/09/2026). Cada pantalla pone
   aquí lo suyo, entre su marca de inicio y de fin, para no pisarse.
   ========================================================================== */
/* === ZONA caja: inicio === */
/* Caja (punto de venta), auditoría del 16/09/2026. Todo con prefijo caja- o
   colgado de .caja-pos para no tocar Venta directa ni Mensajerías. */

/* Buscador y avisos en UNA fila (CAJA-08): la rejilla sube ~150 px. */
.caja-pos .pos-izq { padding: 10px 12px; }
.caja-busqueda { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.caja-busqueda .buscador { flex: 1 1 auto; min-width: 0; margin: 0; }
.caja-busqueda:has(a.caja-chip) .caja-falta-largo { display: none; }
.caja-busqueda .buscador input { padding: 11px 12px 11px 42px; font-size: 1.1rem; }
.caja-chip { display: inline-flex; align-items: center; border-radius: 999px; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.caja-chip button { border: 0; background: transparent; color: inherit; padding: 7px 4px 7px 12px; font-size: .84rem; font-weight: 700; border-radius: 999px; }
.caja-chip button.caja-chip-x { padding: 7px 11px 7px 6px; opacity: .6; }
.caja-chip button:hover { background: transparent; text-decoration: underline; }
.caja-chip.ambar { background: var(--ambar-claro); color: var(--ambar); border: 1px solid #efd8a6; }
a.caja-chip { text-decoration: none; padding: 7px 12px; }
a.caja-chip:hover { text-decoration: underline; }
.caja-chip.verde { background: var(--verde-claro); color: var(--verde); border: 1px solid #b3dfcc; }

/* Tarjetas más bajas: foto más chica (las cajeras reconocen por la foto, así
   que se queda), sin el código de barras a la vista y el precio en una línea. */
.caja-productos { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
.caja-productos .producto { position: relative; }
.caja-productos .producto .foto, .caja-productos .producto .sinfoto { height: 70px; font-size: 1.6rem; }
.caja-productos .producto .foto { object-fit: contain; background: #fff; }
.caja-productos .producto .cuerpo { padding: 5px 8px 6px; gap: 1px; }
.caja-productos .producto .nom { font-size: .85rem; line-height: 1.18; min-height: 2.36em; }
.caja-productos .producto .exi { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-productos .producto .pre { font-size: .98rem; padding-top: 2px; line-height: 1.2; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.caja-productos .producto .pre .pre-usd { display: inline; font-size: .72rem; white-space: nowrap; }
/* La que entra con Enter (CAJA-07). */
.caja-productos .producto.marcada { outline: 3px solid var(--azul); outline-offset: -2px; }
.caja-enter {
  display: none; position: absolute; top: 5px; right: 5px; background: var(--azul); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.caja-productos .producto.marcada .caja-enter { display: block; }

/* Cabecera de la venta: el punto y las acciones de la caja a la vista (CAJA-02). */
.caja-cab { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 12px; }
.caja-cab .caja-punto { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-cab button { white-space: nowrap; }

/* Pestañas con dueño y total (CAJA-18). */
.caja-pos .tickets { align-items: flex-end; padding: 5px 8px 0; gap: 4px; }
.caja-pos .tickets .ticket { padding: 5px 9px; max-width: 220px; }
.caja-pos .tickets .ticket > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-pos .tickets .ticket:not(.activo) .globo { background: #8a97ab; }
.caja-pos .tickets .caja-vaciar { margin: 0 0 4px auto; align-self: center; }

/* Renglón del carrito en una fila (CAJA-17). */
.caja-pos .pos-cuerpo { grid-template-columns: minmax(0, 1fr) 270px; }
.caja-pos .carrito-lista { padding: 2px 8px; }
.caja-linea { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; padding: 5px 2px; }
.caja-linea .nom { font-size: .88rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caja-linea-aviso { font-size: .74rem; color: var(--rojo); font-weight: 700; }
.caja-linea.pasada { background: var(--rojo-claro); border-radius: 6px; }
.caja-linea .cant { margin: 0; gap: 3px; }
.caja-linea .cant button { padding: 3px 8px; font-size: 1rem; }
.caja-linea .cant input { width: 46px; padding: 4px; }
.caja-linea-imp { text-align: right; min-width: 58px; }
.caja-linea-imp .imp { white-space: nowrap; }
.caja-linea-imp .detalle { font-size: .72rem; color: var(--suave); white-space: nowrap; }
.caja-linea button.caja-quitar { padding: 3px 6px; }

/* Opciones de la venta: cliente, gestor o código, rebaja como enlace (CAJA-09). */
.caja-pos .carrito-pie { padding: 8px 12px 6px; }
.caja-campo { margin-bottom: 7px; }
.caja-rotulo { display: block; font-size: .72rem; font-weight: 700; color: var(--suave); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .3px; }
.caja-pos .carrito-pie button.caja-boton-cliente { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-pos .pos-lateral { min-width: 0; overflow-x: hidden; }
.caja-pos .pos-opciones { grid-template-columns: minmax(0, 1fr); }
.caja-chip-linea { font-size: .78rem; font-weight: 700; padding: 4px 9px; border-radius: 8px; margin: -3px 0 7px; line-height: 1.25; }
.caja-chip-linea.azul { background: var(--azul-claro); color: var(--azul); }
.caja-chip-linea.ambar { background: var(--ambar-claro); color: var(--ambar); }
.caja-gestor { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 2px 2px 2px 10px; font-size: .88rem; }
.caja-gestor.verde { background: var(--verde-claro); color: var(--verde); }
.caja-gestor.azul { background: var(--azul-claro); color: var(--azul); }
.caja-gestor-nombre { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-pos .carrito-pie .caja-gestor button.chico { color: inherit; padding: 4px 8px; }
.caja-comision { font-size: .76rem; color: var(--suave); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Código y Gestor, cada uno en su casilla, lado a lado (Leo, 23/09/2026). */
.caja-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; }
.caja-par .campo, .caja-par .caja-campo { min-width: 0; }
.caja-par input { width: 100%; min-width: 0; }
button.caja-enlace, .caja-pos .carrito-pie button.caja-enlace {
  border: 0; background: transparent; padding: 0 2px; color: var(--azul); font-weight: 600; font-size: .8rem;
  cursor: pointer; text-decoration: underline dotted;
}
button.caja-enlace:hover { background: transparent; color: #17509f; text-decoration: underline; }
.caja-nota { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.caja-pos .pos-opciones .buscador-lista { max-height: 250px; }

/* TOTAL y COBRAR pegados abajo, siempre a la vista (CAJA-02). */
.caja-accion { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.caja-total { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.caja-total-rotulo { font-weight: 800; color: var(--suave); font-size: .9rem; }
.caja-total-valor { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caja-total-usd { flex-basis: 100%; font-size: .8rem; color: var(--verde); font-weight: 700; }
.caja-auto { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--suave); cursor: pointer; white-space: nowrap; user-select: none; }
.caja-auto input { width: 16px; height: 16px; margin: 0; }
.caja-motivo { font-size: .82rem; color: var(--rojo); display: flex; flex-direction: column; align-items: flex-end; }
button.caja-boton-cobrar { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; font-size: 1.2rem; font-weight: 800; white-space: nowrap; }
.caja-boton-cobrar kbd {
  font-family: inherit; font-size: .72rem; font-weight: 800; background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.5); border-radius: 5px; padding: 1px 6px;
}

@media (max-width: 1280px) {
  .caja-pos .pos-cuerpo { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .caja-pos .pos-opciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
  .caja-auto span { display: none; }
}

/* Ventana de cobro en dos columnas (CAJA-01). */
.caja-cobro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.caja-cobro-totales { display: flex; gap: 8px; margin-bottom: 10px; }
.caja-cobro-totales .dato { flex: 1; min-width: 0; box-shadow: none; }
.caja-cobro .valor.caja-cifra { font-size: 1.7rem; }
.caja-chips { gap: 6px; }
.caja-chips .opcion { padding: 7px 11px; font-size: .88rem; }
.caja-chips .opcion small { font-weight: 600; opacity: .7; font-size: .72rem; }
.caja-fiado { margin: 10px 0 8px; cursor: pointer; }
.caja-cobro-der label.campo { margin-bottom: 4px; }
.caja-cobro-der button.caja-parte-usd { display: block; margin: 0 0 6px auto; }
.caja-extra { border-top: 2px dashed var(--borde); margin-top: 6px; padding-top: 6px; }
.caja-extra-titulo { margin-bottom: 5px; }
.caja-falta { color: var(--ambar); }
.caja-falta b { font-size: 1.05rem; }
.caja-extra .caja-chips { margin-bottom: 6px; }
.caja-cobro-der .dato.compacto .valor.caja-sin-vuelto { font-size: 1rem; }
.caja-cobro-der .dato { box-shadow: none; margin-top: 8px; }
.caja-cobro-der > .dato .valor { font-size: 1.6rem; }
@media (max-width: 760px) { .caja-cobro { grid-template-columns: 1fr; } }

/* Elegir variante (CAJA-06): casilla de filtro y botones de una línea. */
.caja-variantes-filtro { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.caja-variantes-filtro input { flex: 1; font-size: 1.05rem; }
.caja-variantes-cuenta { font-size: .82rem; white-space: nowrap; }
.caja-variantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 5px; align-content: start; min-height: 46vh; }
button.caja-variante {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px; text-align: left; min-width: 0;
  border: 1.5px solid var(--borde); border-radius: 8px; background: #fff; font-size: .86rem;
}
.caja-variante-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.caja-variante-pre { color: var(--azul); font-weight: 700; font-size: .8rem; white-space: nowrap; }
.caja-variante-hay { color: var(--suave); font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
button.caja-variante:hover { border-color: var(--azul); }
button.caja-variante.marcada { border-color: var(--azul); background: var(--azul-claro); box-shadow: 0 0 0 2px #b9d3f7; }
button.caja-variante.agotada { opacity: .5; background: #f3f5f8; }

/* Órdenes de la sesión (CAJA-12). */
.caja-ordenes-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.caja-ordenes-barra .opcion { padding: 6px 12px; }
td.caja-lleva { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.caja-ordenes td { padding-top: 5px; padding-bottom: 5px; }
.caja-ordenes td button.chico, .caja-ordenes td details.menu-fila > summary { padding: 3px 9px; }
td.caja-corto { font-size: .88rem; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cierre de caja (CAJA-13). */
.caja-contado { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.caja-no-cuenta { font-size: .82rem; }
/* === ZONA caja: fin === */
/* === ZONA mensajerias-ventas: inicio === */
/* --- MENSAJERÍAS (auditoría 16/09/2026, MEN-01..16) --- */
/* La barra de la lista: fechas + buscador (o el resumen, en curso) y "☰ Columnas"
   a la derecha, como un botón chico y no un texto gris pegado a la tabla. */
.men-barra { gap: 6px 12px; margin-bottom: 6px; }
.men-barra > .fila { margin-bottom: 0 !important; gap: 6px; }
.men-barra > .resumen-linea { margin: 0; flex: 1; }
.men-barra input.men-buscar { width: 300px; flex: none; }
details.men-columnas { position: relative; margin: 0 0 0 auto; }
details.men-columnas > summary { list-style: none; padding: 5px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto); font-weight: 600; }
details.men-columnas > summary::-webkit-details-marker { display: none; }
details.men-columnas .columnas-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: max-content; max-width: 460px; box-shadow: 0 10px 30px rgba(20,30,50,.18); }
/* Filas de dos renglones como mucho. */
.men-sub { font-size: .78rem; line-height: 1.25; }
.men-corta { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.men-dir { max-width: 215px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.men-codigo { font-weight: 800; padding: 3px 6px; }
select.men-asignar { width: auto; min-width: 130px; max-width: 160px; padding: 4px 6px; font-size: .85rem; border-color: var(--ambar); background: var(--ambar-claro); color: var(--ambar); font-weight: 700; }
select.men-asignar option { color: var(--texto); background: #fff; font-weight: 400; }
/* Pedidos de la web: plegable y bajo. */
details.men-web { padding: 8px 12px; margin-bottom: 10px; border: 2px solid var(--azul); }
details.men-web > summary { cursor: pointer; list-style: none; }
details.men-web > summary::-webkit-details-marker { display: none; }
details.men-web > summary::before { content: '▸ '; color: var(--azul); }
details.men-web[open] > summary::before { content: '▾ '; }
details.men-web[open] > summary { margin-bottom: 6px; }
.men-lleva { max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }

/* Nueva mensajería / Despachar: dos columnas (MEN-01). Los productos, con su
   propio desplazamiento, a la izquierda; los datos cortos, a la derecha. */
.men-dos { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
.men-izq { min-width: 0; }
.men-buscador { margin-bottom: 8px; }
.men-buscador input { font-size: 1.05rem; padding: 10px 12px; }
.men-lista .tabla-marco.men-productos { max-height: calc(92vh - 250px); overflow: auto; }
.modal-caja .men-productos th { position: sticky; top: 0; }
.men-productos td { padding: 4px 6px; }
.men-productos input { padding: 4px 6px; }
.men-lista .vacio { padding: 26px 10px; }
.men-der label.campo { margin-bottom: 6px; }
.men-der label.campo > span { font-size: .7rem; margin-bottom: 2px; }
.men-der input, .men-der select { padding: 7px 9px; }
.men-fila { gap: 10px; }
.men-der .opciones.linea { gap: 5px; }
.men-der .opciones.linea .opcion { padding: 5px 10px; font-size: .85rem; }
button.men-cliente { width: 100%; text-align: left; padding: 7px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.men-cliente.elegido { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.men-aviso-web { margin-bottom: 8px; padding: 8px 12px; border-radius: var(--radio); background: var(--azul-claro); font-size: .9rem; }
/* El pie: dos líneas y los botones, nunca más. */
.men-pie { display: flex; flex-direction: column; gap: 2px; }
.men-pie-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.men-pie-sep { color: var(--suave); margin: 0 4px; }
.men-pie-caja select { width: auto; max-width: 250px; padding: 3px 6px; font-size: .85rem; }
.men-pie-desglose { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) {
  .men-dos { grid-template-columns: 1fr; }
  .men-lista .tabla-marco.men-productos { max-height: none; }
  .men-pie-desglose { white-space: normal; }
}
/* ✔ Volvió (MEN-07): cada cobro en una fila, cuenta | monto. */
.men-volvio-cabeza { grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-bottom: 8px; align-items: end; }
.men-par { grid-template-columns: 2fr 1fr; gap: 10px; }
.men-par label.campo, .men-volvio-cabeza label.campo { margin-bottom: 6px; }
.men-nota-linea { font-size: .82rem; margin: 0 0 6px; }
.men-sobrante { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.modal-pie-info .men-sobrante b { font-size: .9rem; }
/* Ticket (MEN-14): el papel y, a su lado, las cifras que se comprueban. */
.men-ticket { display: grid; grid-template-columns: auto minmax(220px, 1fr); gap: 16px; align-items: start; }
.men-ticket-resumen { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 60px; }
@media (max-width: 640px) {
  .men-ticket, .men-volvio-cabeza, .men-par { grid-template-columns: 1fr; }
}

/* --- VENTAS Y COBROS (VEN-01..04, COB-12, VENTA-02) --- */
.ven-barra { gap: 6px 12px; margin-bottom: 6px; }
.ven-barra > .fila { margin-bottom: 0 !important; gap: 6px; }
.ven-barra input.ven-buscar { flex: 1 1 220px; min-width: 200px; max-width: 420px; width: auto; }
/* Clientes que deben: la fila del cliente y, plegadas debajo, sus ventas. */
tr.ven-cliente.abierto { background: var(--azul-claro); }
.ven-flecha { display: inline-block; width: 16px; color: var(--azul); font-weight: 800; }
tr.ven-sub td { background: #fafbfd; font-size: .88rem; padding-top: 3px; padding-bottom: 3px; }
tr.ven-sub td:first-child { padding-left: 26px; }
/* Cobrar: "Debe" y el monto lado a lado, arriba; las formas de pago en fichas. */
.ven-cobro-cabeza { grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 6px; }
.ven-cobro-cabeza label.campo { margin-bottom: 0; }
input.ven-monto { font-size: 1.3rem; padding: 10px 12px; font-weight: 700; }
.ven-metodos { gap: 6px; }
.ven-metodos .opcion { padding: 6px 11px; font-size: .86rem; }
.ven-fondo { gap: 10px; margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radio); background: var(--verde-claro); font-size: .9rem; }
/* Ventana de una venta: nombres largos (gestores de tres renglones) en una línea. */
.ven-datos .dato .valor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ven-cliente-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) {
  .ven-cobro-cabeza { grid-template-columns: 1fr; }
}

/* --- VENTA DIRECTA (VD-01, VD-02) --- */
.vd-cabecera { padding: 10px 14px; margin-bottom: 10px; }
.vd-fila { grid-template-columns: 1fr 1.4fr 1.4fr auto; gap: 10px; align-items: end; }
.vd-fila label.campo { margin-bottom: 8px; }
button.vd-cliente { width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.vd-cliente.falta { border-color: var(--verde); color: var(--verde); }
button.vd-cliente.elegido { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.vd-costo { gap: 5px; flex-wrap: nowrap; min-height: 38px; }
.vd-costo input { padding: 6px; }
.vd-buscador input { font-size: 1.05rem; padding: 11px 12px; }
.vd-productos td { padding-top: 4px; padding-bottom: 4px; }
.vd-productos input { padding: 5px 7px; }
/* La barra del total y los botones, pegada abajo de la pantalla. */
.vd-barra {
  position: sticky; bottom: -16px; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px -16px -16px; padding: 10px 16px; background: var(--panel); border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 16px rgba(20,30,50,.08);
}
.vd-cifras { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-variant-numeric: tabular-nums; }
.vd-cifras b { font-size: 1.05rem; }
.vd-cifras b.vd-total { font-size: 1.5rem; color: var(--azul); }
.vd-barra button.grande { padding: 12px 18px; font-size: 1.02rem; }
/* Cobrar ahora (VEN-03): total, paga con y vuelto en una fila. */
.vd-cobro-cabeza { grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; align-items: end; margin-bottom: 6px; }
.vd-cobro-cabeza label.campo { margin-bottom: 0; }
input.vd-monto { font-size: 1.3rem; padding: 10px 12px; font-weight: 700; }
.vd-metodos { gap: 6px; }
.vd-metodos .opcion { padding: 6px 11px; font-size: .86rem; }
.vd-nota-cobro { gap: 6px; font-size: .85rem; }
@media (max-width: 1000px) {
  .vd-fila { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .vd-cobro-cabeza { grid-template-columns: 1fr; }
  .vd-barra { margin: 10px -10px -10px; padding: 8px 10px; bottom: -10px; }
}
/* === ZONA mensajerias-ventas: fin === */
/* === ZONA inventario: inicio === */
/* EXISTENCIAS (auditoría 16/09/2026, INV-01): una sola barra y una línea de
   totales, para que la lista empiece arriba y quepan ~10 filas a 1366. */
.inv-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.inv-barra .inv-buscar { flex: 1 1 300px; min-width: 220px; }
.inv-barra > select { width: auto; max-width: 230px; flex: none; padding: 9px 8px; }
.inv-barra details.menu-fila > summary { padding: 9px 13px; font-weight: 700; white-space: nowrap; }
.inv-barra .menu-fila-lista { min-width: 230px; }
.inv-resumen { align-items: center; margin-bottom: 8px; }
.inv-resumen .inv-aviso { color: var(--ambar); }
.inv-chip {
  padding: 2px 10px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  color: var(--suave); background: #fff; border: 1px solid var(--borde);
}
.inv-chip.rojo b { color: var(--rojo); }
.inv-chip.marcado { background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo); }
.inv-tabla td { padding-top: 4px; padding-bottom: 4px; }
.inv-producto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inv-foto { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; flex: none; }
.inv-rama { flex: none; padding-left: 10px; }
.inv-flecha {
  flex: none; width: 22px; height: 26px; padding: 0; border: 0; background: transparent;
  color: var(--azul); font-weight: 800; font-size: 1rem;
}
.inv-flecha:hover { background: var(--azul-claro); }
.inv-nombre { min-width: 0; line-height: 1.2; }
.inv-linea1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-linea1 b { font-size: .95rem; }
.inv-linea1 .etiqueta { padding: 1px 7px; font-size: .72rem; }
button.inv-variantes { border: 0; cursor: pointer; }
.inv-sub { font-size: .76rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.inv-donde { white-space: nowrap; font-size: .88rem; font-variant-numeric: tabular-nums; }
.inv-negativo { color: var(--rojo); font-weight: 800; }
.inv-motivo { margin: 1px 4px 1px 0; }
tr.inv-hija { background: #f7f9fc; }

/* FICHA DE PRODUCTO (PROD-01): dos columnas, interruptores cortos. */
.prod-ficha { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.prod-ficha label.campo { margin-bottom: 8px; }
.prod-ficha input[type=text], .prod-ficha select, .prod-ficha textarea { padding: 7px 9px; }
.prod-col-der { border-left: 1px solid var(--borde); padding-left: 20px; min-width: 0; }
.prod-fila { display: grid; gap: 0 10px; }
.prod-fila.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod-fila.f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-fila.cat { grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, .7fr); }
.prod-resumen { font-size: .88rem; color: var(--suave); margin: -2px 0 10px; }
.prod-resumen b { color: var(--texto); font-variant-numeric: tabular-nums; }
.prod-resumen .rojo { color: var(--rojo); }
.prod-resumen .verde { color: var(--verde); }
.prod-interruptores { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
.prod-interruptor {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px;
  border: 1.5px solid var(--borde); background: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none;
}
.prod-interruptor input { width: 14px; height: 14px; margin: 0; }
.prod-interruptor:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.prod-interruptor:has(input:disabled) { cursor: not-allowed; opacity: .75; }
details.prod-plegado { border: 1px solid var(--borde); border-radius: 8px; padding: 0 10px; margin: 0 0 8px; background: #fbfbfc; }
details.prod-plegado > summary { cursor: pointer; padding: 7px 0; font-weight: 600; font-size: .88rem; list-style: none; }
details.prod-plegado > summary::-webkit-details-marker { display: none; }
details.prod-plegado > summary::before { content: '▸ '; color: var(--suave); }
details.prod-plegado[open] > summary::before { content: '▾ '; }
.prod-var-cabeza { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.prod-var-linea { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 90px 62px 30px 44px; gap: 6px; align-items: center; margin-bottom: 6px; }
/* La miniatura de la variante (05/10/2026): sin foto propia lleva el 📷 encima. */
.var-foto {
  position: relative; width: 44px; height: 44px; padding: 0; min-width: 0; min-height: 0;
  border: 1px dashed var(--borde); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer;
}
.var-foto.propia { border: 2px solid var(--verde); }
.var-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.var-foto:not(.propia) img { opacity: .35; }
.var-foto-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.var-foto.subiendo { opacity: .5; cursor: progress; }
.prod-var-linea .etiqueta { white-space: nowrap; }
.prod-var-titulos { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--suave); margin-bottom: 2px; }
.modal-cabeza h2 .etiqueta { font-size: .78rem; vertical-align: middle; margin-left: 8px; font-weight: 700; }
@media (max-width: 900px) {
  .prod-ficha { grid-template-columns: 1fr; }
  .prod-col-der { border-left: 0; padding-left: 0; }
}

/* CATÁLOGO (CAT-01): casillas compactas y título por categoría en la hoja. */
.cat-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 0 0 10px; }
.cat-casillas label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .92rem; }
.cat-casillas input { width: 16px; height: 16px; margin: 0; }
.cat-casillas.cat-anchas { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
tr.cat-titulo td { background: #eef3fa; color: var(--azul); font-weight: 800; }

/* TRASLADOS (TRAS-01..06). */
.tras-aviso-recibir {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px; background: var(--ambar-claro); border-left: 5px solid #f0b429;
}
.tras-aviso-recibir b { flex: 1; }
.tras-recibir-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.tras-recibir-cabeza b { font-size: 1.1rem; }
.tras-tarjeta { padding: 12px 14px; margin-bottom: 10px; }
.tras-tarjeta.para-mi { border: 2px solid #f0b429; border-left-width: 6px; background: #fffaf0; }
.tras-sub { font-size: .85rem; margin: 2px 0 8px; }
table.tras-items th, table.tras-items td { padding: 4px 8px; }
table.tras-items th { position: static; }
button.peligro-texto { color: var(--rojo); }
.tras-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.tras-filtros .tras-buscar { flex: 1 1 280px; }
table.tras-historico tr.abierta { background: var(--azul-claro); }
table.tras-historico .etiqueta { white-space: nowrap; }
table.tras-historico tr.tras-detalle table.tras-items { width: auto; min-width: 55%; }
.tras-pin::placeholder { letter-spacing: normal; font-size: 1rem; }
table.tras-historico tr.tras-detalle > td { background: #fbfcfe; padding: 6px 12px 10px 40px; }
.tras-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .92rem; margin: -4px 0 8px; }
.tras-ruta select { width: auto; min-width: 170px; padding: 6px 8px; }
.tras-hay { font-size: .78rem; }
/* Alto mínimo: con la ventana vacía, la lista flotante del buscador se cortaba en el pie. */
.tras-enviar { min-height: 360px; }
.tras-enviar td { padding-top: 5px; padding-bottom: 5px; }
.tras-cant { width: 80px !important; text-align: right; font-size: 1.05rem; font-weight: 700; padding: 6px 8px !important; }
button.tras-rapido { min-width: 40px; margin-left: 4px; font-weight: 700; }
.tras-recien { animation: tras-brillo 1.2s ease-out; }
@keyframes tras-brillo { from { background: #fff2b3; } to { background: transparent; } }
.tras-pie-lista { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; margin-top: 8px; }
.tras-pie-lista details.tras-nota { flex: 1 1 260px; margin: 0; }
details.tras-nota { margin-top: 10px; }
details.tras-nota > summary { cursor: pointer; color: var(--suave); font-size: .88rem; width: max-content; }
details.tras-nota[open] > summary { margin-bottom: 6px; }
.tras-ayuda { font-size: .8rem; margin: 2px 0 0; }
.tras-linea-aviso { display: block; border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; font-weight: 600; }
.tras-pin-pie { display: flex; align-items: center; gap: 10px; }
.tras-pin-pie > span { font-weight: 700; white-space: nowrap; }
.tras-pin { width: 150px !important; font-size: 1.3rem; letter-spacing: 6px; text-align: center; padding: 7px 10px !important; }
/* === ZONA inventario: fin === */
/* === ZONA clientes-dinero: inicio === */
/* Clientes y dinero (auditoría del 16/09/2026). Prefijo cd-. */

/* Lista de fichas: "Le deben" que filtra, pie de fila y flecha de abrir. */
.cd-chip-deben { padding: 3px 10px; border: 1.5px solid #f0c4c6; border-radius: 99px; background: #fff; color: var(--rojo); font-size: .88rem; font-weight: 600; cursor: pointer; }
.cd-chip-deben b { color: var(--rojo) !important; }
.cd-chip-deben:hover { border-color: var(--rojo); }
.cd-chip-deben.marcada { border-color: var(--rojo); background: #fff0f0; }
.cd-pie-fila { font-size: .8rem; }
.cd-flecha { color: var(--suave); font-weight: 800; margin-left: 8px; }
tr.pulsable:hover .cd-flecha { color: var(--azul); }

/* Ficha: la tarjeta de "Debe"/"Fondo" con su botón en la línea del rótulo. */
.cd-rotulo-boton { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 26px; }
.cd-rotulo-boton button { padding: 3px 9px; font-size: .8rem; text-transform: none; letter-spacing: 0; }
/* Una sola línea que se abre con "ver todo". */
.cd-linea-con-boton { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: .88rem; }
.cd-linea-con-boton .cd-una-linea { flex: 1; min-width: 0; }
.cd-linea-con-boton button { flex: none; padding: 0 6px; }
.cd-una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-una-linea.abierta { white-space: normal; }

/* Formularios de la ficha: nombre ancho + teléfono corto en una fila. */
.cd-dos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0 12px; }
.cd-aviso-tel { display: flex; align-items: center; gap: 8px; margin: -6px 0 8px; font-size: .85rem; color: var(--rojo); font-weight: 600; }
.cd-aviso-tel[hidden] { display: none; }

/* Elegir cliente y fichas parecidas: filas bajas con la marca del teclado a la vista. */
.cd-elegir-lista { display: flex; flex-direction: column; gap: 4px; }
.cd-elegir-fila {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; font-weight: 400;
}
.cd-elegir-fila:hover { background: var(--fondo); }
.cd-elegir-fila .etiqueta { padding: 1px 7px; font-size: .74rem; }
.cd-elegir-fila .cd-enter { visibility: hidden; color: var(--azul); font-weight: 800; }
.cd-elegir-fila.marcada { background: var(--azul-claro); border-color: var(--azul); }
.cd-elegir-fila.marcada .cd-enter { visibility: visible; }
.cd-elegir-fila.cd-mismo-tel { border-color: var(--rojo); }
.cd-usar { color: var(--azul); font-weight: 700; font-size: .85rem; white-space: nowrap; }

/* Deudas: pestañas con su cifra. */
.cd-pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cd-pestana {
  display: grid; grid-template-columns: auto; justify-items: start; gap: 0; text-align: left;
  padding: 7px 14px; border: 1.5px solid var(--borde); border-radius: 10px; background: #fff; min-width: 180px;
}
.cd-pestana .cd-pestana-nombre { font-size: .8rem; font-weight: 700; color: var(--suave); }
.cd-pestana b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cd-pestana small { font-size: .74rem; color: var(--suave); font-weight: 400; }
.cd-pestana.marcada { border: 2px solid var(--azul); background: var(--azul-claro); }
.cd-pestana.marcada .cd-pestana-nombre { color: var(--azul); }
.cd-verde { color: var(--verde); }
.cd-rojo { color: var(--rojo); }
.cd-flecha-plegar { color: var(--azul); font-weight: 800; display: inline-block; width: 16px; }
tr.cd-detalle > td.cd-detalle-celda { background: #f7f9fc; padding: 6px 10px 12px 24px; }
tr.cd-detalle:hover { background: transparent; }

/* Enlaces pequeños (todo / la mitad / comprar dólares) que no parecen botones. */
.cd-enlace { border: 0; background: transparent; padding: 0 4px; color: var(--azul); font-weight: 700; font-size: .8rem; text-decoration: underline; cursor: pointer; text-transform: none; letter-spacing: 0; }
.cd-rotulo-con-enlaces { display: flex !important; align-items: baseline; gap: 4px; }
.cd-rotulo-con-enlaces .cd-enlace:first-of-type { margin-left: auto; }

/* Cuentas y saldos como tabla (DIN-10): renglones de ~38 px. */
.cd-cuentas td { padding-top: 4px; padding-bottom: 4px; }
.cd-cuentas button.chico, .cd-cuentas details.menu-fila > summary { padding: 3px 9px; }

/* Selector de fechas metido dentro de otra fila (modos + fechas). */
.cd-cab-movs > .fila { margin-bottom: 0 !important; }

/* Franja ámbar de lista cortada (DIN-01). */
.cd-franja-ambar {
  background: var(--ambar-claro); border: 1px solid var(--ambar); border-radius: 8px;
  padding: 6px 12px; margin: 0 0 8px; font-size: .88rem; font-weight: 600;
}

@media (max-width: 640px) {
  .cd-dos { grid-template-columns: 1fr; }
  .cd-pestana { min-width: 0; flex: 1 1 45%; }
}
/* === ZONA clientes-dinero: fin === */
/* === ZONA compras-gestores: inicio === */
/* --- Ventana de compra (16/09/2026, COMP-01/02/04/06) ----------------------
   Cabecera en una fila, buscador pegado arriba de la tabla, renglones bajos y el
   pago en el pie junto al total: a 1366 caben ~7 renglones con todo a la vista. */
.cg-compra-cabeza { display: grid; grid-template-columns: minmax(150px, 210px) minmax(220px, 1.6fr) minmax(150px, 1fr) auto; gap: 10px; align-items: end; }
.cg-compra-cabeza label.campo { margin-bottom: 6px; }
.cg-compra-cabeza select, .cg-compra-cabeza input[type=text] { padding-top: 7px; padding-bottom: 7px; }
.cg-rotulo-prov { display: flex !important; align-items: center; gap: 6px; min-height: 1.1em; }
button.cg-ficha { text-transform: none; letter-spacing: 0; padding: 0 6px; font-size: .74rem; line-height: 1.35; color: var(--verde); }
button.cg-ficha.nueva { color: var(--azul); }
.cg-pagada { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 6px; padding: 7px 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; white-space: nowrap; }
.cg-compra-barra { position: sticky; top: 44px; z-index: 3; background: var(--panel); display: flex; gap: 8px; align-items: center; padding: 4px 0 6px; }
.cg-compra-barra .buscador-flotante { flex: 1; }
.cg-compra-barra input[type=text] { padding-top: 7px; padding-bottom: 7px; }
.modal-caja .cg-compra-tabla th { position: sticky; top: 90px; z-index: 2; padding: 5px 6px; }
.cg-compra-tabla td { padding: 3px 6px; }
.cg-compra-tabla input.cg-casilla { width: 86px; text-align: right; padding: 4px 7px; font-variant-numeric: tabular-nums; }
.cg-compra-tabla input.cg-casilla.cant { width: 62px; }
.cg-compra-tabla input.cg-casilla::placeholder { color: #a9b2bf; }
.cg-producto { min-width: 220px; line-height: 1.25; }
.cg-hay { font-size: .78rem; white-space: nowrap; }
.cg-icono { margin-left: 5px; cursor: help; }
.cg-icono.rojo { color: var(--rojo); font-weight: 800; }
.cg-prom { font-weight: 700; color: var(--azul); }
tr.cg-flojo, tr.cg-flojo:hover { background: var(--rojo-claro); }
tr.cg-falta, tr.cg-falta:hover { background: var(--ambar-claro); box-shadow: inset 4px 0 0 var(--ambar); }
tr.cg-destello { background: var(--azul-claro); }
.cg-compra-pie { display: flex; flex-direction: column; gap: 5px; }
.cg-pie-total, .cg-pie-pago { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cg-pie-total b { font-size: 1.2rem; }
.cg-pie-pago select { width: auto; max-width: 215px; padding: 5px 8px; font-size: .9rem; }
.cg-pie-pago input[type=text] { width: 96px; padding: 5px 8px; }
.cg-pie-pago .opciones.linea .opcion { padding: 4px 12px; }
.cg-faltan { color: var(--ambar); font-weight: 700; font-size: .88rem; }
.cg-error { color: var(--rojo); font-weight: 700; font-size: .88rem; }

/* --- Lista de compras (COMP-05) y de gastos (GAS-05) ----------------------- */
tr.cg-abierta, tr.cg-abierta:hover { background: var(--azul-claro); }
tr.cg-detalle > td { background: #f7f9fc; padding: 8px 14px 12px; }
table.cg-renglones td { padding: 3px 8px; font-size: .9rem; }
.cg-concepto { min-width: 380px; }
tr.cg-marcada, tr.cg-marcada:hover { background: var(--verde-claro); }

/* --- Gestores (GEST-01/02/03/07/08/09) ------------------------------------- */
/* Nombre, código, barras, clave y nivel en una sola línea: filas de ~45 px. */
td.cg-gestor { white-space: nowrap; }
td.cg-gestor > * { vertical-align: middle; }
.etiqueta.cg-mini { margin-left: 6px; padding: 1px 7px; font-size: .72rem; }
button.cg-ico { padding: 1px 5px; margin-left: 2px; font-size: .9rem; line-height: 1.2; }
tr.cg-nuevo, tr.cg-nuevo:hover { background: var(--azul-claro); box-shadow: inset 4px 0 0 var(--azul); }
tr.cg-anulada td { color: var(--suave); }
tr.cg-anulada .cg-monto-pago { text-decoration: line-through; }
details.cg-plegable { margin: 10px 0; }
details.cg-plegable > .tabla-marco, details.cg-plegable > div > .tabla-marco { margin: 4px 0 8px; }
/* "Ya se la mandé": a la izquierda del pie, lejos de "Copiar". */
.modal-pie > button.cg-izq { order: -1; margin-right: auto; }
/* Pagar comisión: período plegado y una línea por moneda con su caja. */
details.cg-periodo > summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: .9rem; width: max-content; }
.cg-pagar-linea { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cg-pagar-linea label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 270px; }
.cg-pagar-linea select { width: auto; min-width: 240px; flex: 1; }
.cg-pagar-linea.apagada { opacity: .55; }
/* Alta de gestor: código · % · botones en una fila. */
.cg-codigo { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: end; }
.cg-codigo label.campo { margin-bottom: 10px; }
/* Teléfono: la cabecera de la compra en dos columnas y los nombres pueden partirse. */
@media (max-width: 640px) {
  .cg-compra-cabeza { grid-template-columns: 1fr 1fr; }
  .cg-concepto { min-width: 200px; }
  td.cg-gestor { white-space: normal; }
}
/* `.linea` es también la línea del carrito (con raya y relleno): aquí no. */
.opciones.linea.cg-linea { border-bottom: 0; padding: 0; }
.opciones.linea.cg-chips { gap: 5px; }
.opciones.linea.cg-chips .opcion { padding: 4px 10px; font-size: .84rem; }
.cg-campo { margin-bottom: 10px; }
.cg-campo > span { display: block; font-size: .76rem; font-weight: 700; color: var(--suave); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
/* === ZONA compras-gestores: fin === */

/* --- Módulos del sistema (17/09/2026) ---------------------------------------
   Qué trae este negocio. Lista de casillas con el nombre y, debajo, en pequeño,
   qué incluye: el dueño tiene que poder decidir sin preguntarle a nadie. */
.modulos-lista { display: grid; gap: 6px; margin: 10px 0 12px; }
/* En pantalla ancha, dos columnas: con ocho módulos en una sola, el botón de guardar
   se iba abajo del borde en la laptop de 1366 (17/09/2026). */
@media (min-width: 1000px) { .modulos-lista { grid-template-columns: 1fr 1fr; } }
.modulo-fila { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; line-height: 1.25; }
.modulo-fila input { margin-top: 3px; flex: none; }
.modulo-fila b { display: block; }
.modulo-fila small { display: block; color: var(--suave); }
.modulo-fila .modulo-depende { font-style: italic; }

/* Ajustes en la barra: solo el engranaje, apartado a la derecha (17/09/2026).
   Con diez secciones, el texto no cabía en la laptop de 1366. */
#nav-secciones a.solo-icono { margin-left: auto; padding-left: 14px; padding-right: 14px; }
#nav-secciones a.solo-icono .ico { margin: 0; font-size: 1.15rem; }

/* --- LA VENTANA DE PEDIDO NUEVO DE LA WEB (Leo, 21/09/2026) -----------------
   Antes esto era un aviso de los de arriba a la derecha, y duraba 2,8 segundos:
   en el mostrador, cobrando, no lo veía nadie. Leo lo pidió así: "que parezca
   una ventana por unos segundos y que se quede el globo al lado de Ventas".

   ⚠️ PARECE UNA VENTANA PERO NO LO ES, y es a propósito. Las ventanas de verdad
   (`modal` en comun.js) se quedan con el foco y con el Enter. Esta sale SOLA,
   sin que nadie la pida, y puede caer justo mientras la cajera está pasando
   productos con la pistola: si robara el teclado, el código escaneado se
   perdería y el Enter del lector le daría a un botón de aquí. Por eso no toca
   el foco: se puede seguir escaneando con ella en pantalla.
   -------------------------------------------------------------------------- */
#ventana-pedido {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  /* El velo deja ver lo de detrás y NO intercepta clics: se puede seguir
     trabajando sin cerrarla. */
  background: rgba(10, 20, 40, .28); pointer-events: none;
  animation: entrar-pedido .2s ease-out;
}
#ventana-pedido .caja {
  pointer-events: auto;              /* la ventana sí se puede pulsar */
  background: #fff; border-radius: 14px; border-top: 6px solid var(--verde);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  padding: 22px 26px; width: min(520px, 92vw); text-align: center;
}
#ventana-pedido h2 { margin: 0 0 4px; font-size: 1.5rem; }
#ventana-pedido .quien { margin: 10px 0 0; font-size: 1.05rem; }
#ventana-pedido .quien b { font-size: 1.15rem; }
#ventana-pedido .botones { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
/* La barrita que se vacía: se ve cuánto le queda antes de irse sola. */
#ventana-pedido .cuenta { height: 4px; background: var(--borde); border-radius: 3px; margin-top: 16px; overflow: hidden; }
#ventana-pedido .cuenta i { display: block; height: 100%; background: var(--verde); width: 100%; }
@keyframes entrar-pedido { from { opacity: 0; transform: scale(.96); } }

/* --- 📷 Sin foto (02/10/2026) ---------------------------------------------- */
.ff-buscar { width: 100%; max-width: 420px; margin-bottom: 8px; }
.ff-fila { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--borde, #ddd);
           border-radius: 8px; margin-bottom: 6px; background: var(--fondo-caja, #fff); }
.ff-fila.hecha { border-color: var(--verde, #1a7f37); }
.ff-hueco { width: 48px; height: 48px; flex: none; border-radius: 6px; background: #f1f1f1; display: flex;
            align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; }
.ff-hueco img { width: 100%; height: 100%; object-fit: cover; }
.ff-datos { flex: 1; min-width: 0; }
.ff-nombre { font-weight: 600; line-height: 1.25; }
.ff-sub { font-size: .8rem; color: var(--texto-suave, #666); }
.ff-opciones { font-size: .75rem; color: var(--texto-suave, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-rafaga { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 280px; }
.ff-progreso { font-size: .85rem; color: var(--texto-suave, #666); }
.ff-opcion { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.ff-disparar { width: 100%; max-width: 320px; padding: 16px 10px !important; font-size: 1.05rem; }
.ff-anterior { display: flex; align-items: center; gap: 6px; }
.ff-anterior img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.ff-ultima { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
.ff-listo { padding: 16px 0; }
.ff-estado { min-height: 1.2em; font-weight: 600; }
@media (max-width: 640px) {
  .ff-fila { flex-wrap: wrap; }
  .ff-fila > button { min-height: 40px; }
}
.ff-panel { min-width: 300px; }
.ff-lista-var { max-height: 62vh; overflow-y: auto; margin-top: 6px; padding-right: 2px; }
.ff-var { padding: 4px 6px; margin-bottom: 4px; }
.ff-hueco-chico { width: 40px; height: 40px; font-size: 1.1rem; }
.ff-acciones { display: flex; gap: 4px; align-items: center; flex: none; }
.ff-heredada { position: relative; }
.ff-heredada img { opacity: .45; filter: grayscale(.4); }
.ff-heredada span { position: absolute; bottom: 0; left: 0; right: 0; font-size: .55rem; line-height: 1.3; text-align: center;
                    background: rgba(0,0,0,.55); color: #fff; }
.ff-familia { display: flex; gap: 10px; align-items: center; padding: 6px; background: #f6f7f9; border-radius: 8px; margin-bottom: 6px; }
.ff-familia img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; background: #fff; }
.ff-barra { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.ff-todas { display: flex; gap: 4px; align-items: center; font-weight: 600; cursor: pointer; }
.ff-casilla { width: 18px; height: 18px; flex: none; }
.ff-fila.con-familia { opacity: .6; }
/* 📷 en los renglones de la compra (02/10/2026) */
.cg-foto { padding: 0 6px !important; min-height: 0 !important; line-height: 1.4; margin-left: 4px; font-size: .95rem; }
.cg-foto-puesta { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-left: 4px; }

/* ==========================================================================
   EL TELÉFONO DEL ALMACENERO (04/10/2026). Todo lo de aquí solo se ve bajo 640 px
   o lleva su propio interruptor (.solo-movil, .nav-movil). En la laptop no cambia nada.
   ========================================================================== */
/* Lo que solo tiene sentido con el teléfono en la mano (el 📷 de la cámara, el ⚙
   que pliega los filtros). */
.solo-movil { display: none !important; }

/* La barra de abajo: "Menú" y las pantallas de la sección. */
.nav-movil {
  display: none; flex: none; background: #10233f; border-top: 1px solid #26436b;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.nav-movil::-webkit-scrollbar { height: 0; }
.nav-movil a, .nav-movil button.nav-movil-menu {
  flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 4px; border-radius: 10px; color: #c7d5ea; text-decoration: none;
  font-size: .68rem; font-weight: 600; border: none; background: transparent; position: relative;
  min-height: 0; white-space: nowrap;
}
.nav-movil .ico { font-size: 1.35rem; line-height: 1; }
.nav-movil a.activo { background: #2b6fd6; color: #fff; }
.nav-movil button.nav-movil-menu { flex: 0 0 auto; min-width: 56px; }
.nav-movil .globo-rojo, .nav-movil .globo-ambar { position: absolute; top: 0; right: 4px; }

/* La hoja de secciones: cuadros grandes para el dedo. */
.hoja-secciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hoja-seccion {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px;
  border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: var(--texto);
  font-weight: 700; font-size: .85rem; text-align: center; background: #fff; position: relative;
}
.hoja-seccion .ico { font-size: 1.9rem; line-height: 1; }
.hoja-seccion.activo { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.hoja-seccion .globo-rojo, .hoja-seccion .globo-ambar { position: absolute; top: 6px; right: 6px; }

/* La cámara como pistola. */
button.escanear { flex: none; font-size: 1.25rem; padding: 6px 12px; }
.escaner { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; outline: none; }
.escaner-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.escaner-mira {
  position: absolute; left: 8%; right: 8%; top: 32%; bottom: 32%; border: 3px solid rgba(255,255,255,.85);
  border-radius: 10px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35); pointer-events: none;
}
.escaner-linterna { position: absolute; right: 10px; bottom: 10px; z-index: 1; }
.escaner-cambiar { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
.escaner-estado { text-align: center; margin: 10px 0 6px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.escaner-estado.roja { color: var(--rojo); }
.escaner-manual input { width: 100%; }
.escaner-diagnostico { font-size: .72rem; margin-top: 8px; text-align: center; word-break: break-word; }
.fila-escanear { display: flex; gap: 6px; align-items: center; }
.fila-escanear .buscador-flotante { flex: 1; min-width: 0; }

/* La tarjeta rápida de un producto (Existencias en el teléfono). */
.hoja-producto { display: flex; flex-direction: column; gap: 12px; }
.hoja-producto-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.hoja-producto-cabeza img, .hoja-producto-cabeza .inv-foto { width: 88px; height: 88px; border-radius: 10px; object-fit: cover; background: #eef1f6; flex: none; }
.hoja-producto-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hoja-producto-cant { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.hoja-producto-cant small { font-size: 1rem; font-weight: 600; color: var(--suave); }
.hoja-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hoja-acciones button { padding: 14px 10px; font-size: 1rem; font-weight: 700; }
.hoja-variantes { display: flex; flex-direction: column; gap: 6px; }
.hoja-variantes button { display: flex; justify-content: space-between; align-items: center; padding: 12px; text-align: left; gap: 10px; }
.hoja-variantes button span { flex: 1; min-width: 0; }

/* Ajustar existencia: un bloque por almacén, la casilla en grande con − y +. */
.ajuste-linea { padding: 8px 0 10px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.ajuste-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ajuste-cuerpo { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ajuste-cuerpo input { width: 120px; font-size: 1.3rem; padding: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.ajuste-cuerpo button.mas-menos { font-size: 1.3rem; font-weight: 700; padding: 8px 16px; line-height: 1; }
.ajuste-cuerpo .silencio { flex: 1; min-width: 150px; }

/* La segunda línea de cada producto en el teléfono (Existencias). */
.inv-movil { display: none; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; font-size: .82rem; color: var(--suave); margin-top: 3px; }
.inv-movil b { color: var(--texto); font-size: .95rem; }
.inv-movil b.rojo { color: var(--rojo); }
.inv-movil .inv-ubic { font-size: .82rem; }

@media (max-width: 640px) {
  .solo-movil { display: inline-flex !important; align-items: center; justify-content: center; }
  /* Va aquí y no en el bloque de arriba: la regla base de .nav-movil (display: none)
     está más abajo en el archivo y ganaba. */
  .nav-movil { display: flex; }

  /* Existencias: buscador + 📷 + ⚙ en una fila; los desplegables y "Producto nuevo"
     plegados tras el ⚙; la línea de totales fuera (queda el chip de agotados); la
     tabla pasa a lista de dos líneas: nombre y, debajo, dónde, cuánto y a cuánto. */
  .inv-barra { gap: 6px; }
  .inv-buscar { display: flex; gap: 6px; align-items: stretch; flex: 1 1 100%; min-width: 0; }
  .inv-buscar input { min-width: 0; flex: 1; }
  .inv-buscar button { padding: 6px 12px; font-size: 1.2rem; }
  .inv-barra > select, .inv-barra > .inv-mas, .inv-barra > button.exito { display: none; }
  .inv-barra.abierta > select { display: block; width: calc(50% - 3px); max-width: none; flex: none; }
  .inv-barra.abierta > .inv-mas { display: inline-block; }
  .inv-barra.abierta > button.exito { display: inline-flex; }
  .inv-resumen > span, .inv-resumen > .etiqueta { display: none; }
  .inv-tabla thead { display: none; }
  /* Fila de teléfono (rehecha 04/10/2026): sin el ⋯ (tocar la fila abre la tarjeta
     rápida, que tiene todas las acciones), sin la flecha ni la pastilla de variantes
     (van como texto en la segunda línea), el nombre en dos líneas como mucho y las
     etiquetas fuera (el "Agotado" lo dice la cantidad en rojo). */
  .inv-tabla td:not(:first-child) { display: none; }
  .inv-tabla td:first-child { width: 100%; }
  .inv-tabla td { padding: 7px 4px; }
  .inv-sub { display: none; }
  .inv-movil { display: flex; gap: 2px 10px; margin-top: 2px; }
  .inv-movil-precio { margin-left: auto; font-weight: 600; color: var(--texto); white-space: nowrap; }
  .inv-movil-var { color: var(--azul); }
  .inv-foto { width: 46px; height: 46px; }
  div.inv-foto { background: #eef1f6; border-radius: 6px; }
  .inv-producto { gap: 10px; }
  .inv-nombre { flex: 1; }
  .inv-linea1 .etiqueta, .inv-tabla .inv-flecha { display: none; }
  .inv-linea1 b { font-size: .98rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .inv-hija .inv-foto { width: 34px; height: 34px; }
  .inv-resumen .inv-chip { min-height: 0; padding: 3px 11px; font-size: .82rem; }

  /* Ajustar existencia: la casilla ocupa el ancho entre − y +. */
  .ajuste-cuerpo input { flex: 1; min-width: 0; font-size: 1.7rem; }
  .ajuste-cuerpo .silencio { flex-basis: 100%; }

  /* Registrar compra: cabecera en dos columnas, buscador + 📷, y en la tabla
     solo Producto, Cant., Costo y P.V. USD (lo calculado se ve en la laptop). */
  .cg-compra-cabeza { grid-template-columns: 1fr 1fr; }
  /* Sin pegajosos: el título ocupa dos líneas y el buscador y el encabezado de la
     tabla, fijados a 44 y 90 px, se montaban sobre los renglones. */
  .cg-compra-barra { flex-wrap: nowrap; position: static; }
  .modal-caja .cg-compra-tabla th { position: static; }
  .cg-compra-barra > button.chico { padding: 8px; font-size: .8rem; white-space: nowrap; }
  .cg-compra-tabla th:nth-child(4), .cg-compra-tabla td:nth-child(4),
  .cg-compra-tabla th:nth-child(5), .cg-compra-tabla td:nth-child(5),
  .cg-compra-tabla th:nth-child(7), .cg-compra-tabla td:nth-child(7),
  .cg-compra-tabla th:nth-child(8), .cg-compra-tabla td:nth-child(8),
  .cg-compra-tabla th:nth-child(9), .cg-compra-tabla td:nth-child(9) { display: none; }
  .cg-producto { min-width: 0; }
  .cg-hay { display: none; }
  .cg-compra-tabla input.cg-casilla { width: 70px; padding: 8px 6px; font-size: 1rem; min-height: 40px; }
  .cg-compra-tabla input.cg-casilla.cant { width: 58px; }
  .cg-compra-tabla td { padding: 5px 3px; }

  /* Sin foto: el nombre a lo ancho y los botones debajo, no apretados al lado. */
  .ff-fila { flex-wrap: wrap; }
  .ff-fila > button.exito, .ff-acciones { flex-basis: 100%; display: flex; gap: 8px; justify-content: flex-end; }
  .ff-acciones button { padding: 10px 14px; }

  /* La lista flotante de los buscadores: el nombre a lo ancho y el detalle
     debajo (al lado, el nombre salía partido palabra por palabra). */
  .buscador-opcion { flex-wrap: wrap; gap: 2px 8px; padding: 9px 10px; }
  .buscador-texto { flex-basis: calc(100% - 28px); }
  .buscador-detalle { white-space: normal; flex-basis: 100%; font-size: .8rem; }
}

/* La ficha del producto en el teléfono (04/10/2026). Leo: "da dolor de cabeza mirarla".
   Rótulos en una línea, el código arriba con su 📷, y de dos en dos lo demás. */
.fila-escanear > input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .prod-ficha label.campo { margin-bottom: 6px; }
  .prod-ficha label.campo > span { font-size: .66rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
  .prod-ficha input[type=text], .prod-ficha select { min-height: 40px; font-size: 16px; padding: 6px 9px; }
  .prod-fila.cat, .prod-fila.f3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .prod-fila.cat > .pf-cod { order: -2; grid-column: 1 / -1; }
  .prod-fila.cat > .pf-cat { order: -1; grid-column: 1 / -1; }
  .prod-fila.cat > div:not(.campo):empty { display: none; }
  .prod-resumen { font-size: .78rem; line-height: 1.3; margin: 0 0 8px; }
  .prod-interruptores { gap: 4px; margin-bottom: 8px; }
  .prod-interruptor { font-size: .8rem; padding: 4px 9px; min-height: 0; }
  details.prod-plegado > summary { padding: 6px 0; font-size: .82rem; }
  .prod-col-der > p.silencio { font-size: .76rem !important; margin: 0 0 6px !important; }
  /* Las variantes: nombre y código arriba, precio, existencia y ✕ debajo. */
  .prod-var-titulos { display: none; }
  .prod-var-linea { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; border-bottom: 1px solid var(--borde); padding-bottom: 6px; }
  .prod-var-linea > :nth-child(6) { grid-column: 3; grid-row: 3; }
  .var-foto { width: 48px; height: 48px; }
  .prod-var-linea > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .prod-var-linea > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .prod-var-linea > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .prod-var-linea > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .prod-var-linea > :nth-child(4) { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* Surtir el punto de venta en el teléfono (04/10/2026): una tarjeta por producto,
   la cantidad a enviar a la derecha con − y +. La tabla de cinco columnas partía
   el nombre en una palabra por renglón. */
.surtir-lista { border-top: 1px solid var(--borde); }
.surtir-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.surtir-nombre { grid-column: 1; line-height: 1.25; font-size: .95rem; }
.surtir-datos { grid-column: 1; font-size: .8rem; color: var(--suave); }
.surtir-datos b.rojo { color: var(--rojo); }
.surtir-enviar { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 4px; }
.surtir-enviar input { width: 52px; text-align: center; font-size: 1.15rem; font-weight: 700; padding: 6px 2px; }
.surtir-enviar button.mas-menos { width: 40px; padding: 0; font-size: 1.3rem; font-weight: 700; line-height: 1; }
@media (max-width: 640px) {
  .recomendado-etiquetas { display: none !important; }
  .recomendado .recomendado-boton { width: 100%; justify-content: center; }
}

/* Enviar mercancía en el teléfono (04/10/2026): cada renglón es una tarjeta.
   Arriba el nombre a lo ancho con la ✕; debajo 6 / 12 a la izquierda y la cantidad
   con − y + a la derecha. La tabla de cuatro columnas partía el nombre palabra a
   palabra. */
@media (max-width: 640px) {
  .tras-ruta { flex-wrap: nowrap; margin: -6px 0 8px; }
  .tras-ruta > span { flex: 1; min-width: 0; }
  .tras-tabla thead { display: none; }
  .tras-tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
  .tras-tabla tbody tr[hidden] { display: none; }
  .tras-tabla tbody td { padding: 0; border: 0; }
  .tras-tabla tbody td[colspan] { grid-column: 1 / -1; }
  .tras-tabla tbody tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; line-height: 1.25; }
  .tras-tabla tbody tr > td:nth-child(4) { grid-column: 3; grid-row: 1; align-self: start; }
  .tras-tabla tbody tr > td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; }
  .tras-tabla tbody tr > td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
  .tras-tabla button.tras-rapido { margin: 0 4px 0 0; min-width: 40px; padding: 0 9px; }
  .tras-cuanto { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
  .tras-cuanto .tras-cant { width: 56px !important; text-align: center; font-size: 1.15rem; padding: 6px 2px !important; }
  .tras-cuanto button.mas-menos { width: 40px; padding: 0; font-size: 1.3rem; font-weight: 700; line-height: 1; }
}

/* Avisos al teléfono, en la hoja del Menú (04/10/2026). */
.hoja-avisos { margin-top: 12px; }
.hoja-avisos:empty { display: none; }
.hoja-avisos-fila { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hoja-avisos-activar { width: 100%; font-weight: 700; background: var(--azul-claro); color: var(--azul); border: 1px solid var(--azul); }

/* "Pedir otra foto" (06/10/2026): el aviso en la ficha y el motivo en "📷 Sin foto". */
.galeria-repetir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; padding: 4px 8px;
  border-radius: 6px; background: #fff4e0; color: #8a5300; font-size: .82rem; }
.galeria-repetir span { flex: 1; min-width: 0; }
.ff-motivo { color: #b26a00; font-weight: 600; }
.galeria-acciones.motivos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.galeria-acciones.motivos .galeria-accion { padding: 8px 6px; }