/*
 * Pantalla de mostrador: densa, sin adornos y legible de lejos.
 *
 * Se usan las fuentes que ya trae Windows. En una PC sin internet no se puede
 * contar con que se descargue nada, y una fuente que no carga deja la pantalla
 * con la de reserva y todos los anchos descuadrados.
 */

/*
 * PALETA: TINTA SOBRE PAPEL.
 *
 * El naranja de antes venia del sistema de la ferreteria de Isabel, y ese
 * naranja es SUYO: heredarlo aqui haria que los dos negocios parecieran el
 * mismo. Aqui el acento es el azul del lapicero, que es literalmente lo que se
 * vende en el mostrador.
 *
 * ⚠️ Y hay una razon practica, no solo de gusto, para que el acento NO sea
 * rojo aunque el rojo del lapiz sea lo mas reconocible de una libreria: el
 * rojo ya significa "error" y "sin stock". Un boton de Guardar rojo al lado de
 * un aviso de error rojo obliga a leer para distinguir lo que deberia
 * distinguirse de un vistazo.
 *
 * El fondo es gris con un punto de azul —papel bajo luz de tienda—, no crema.
 * El crema calienta la pantalla y en un sistema que se mira ocho horas
 * termina cansando.
 */
:root {
  /* ⚠️ SOLO TEMA CLARO, y declarado a proposito.
   *
   * Sin esta linea, un Windows configurado en oscuro pinta por su cuenta los
   * desplegables y los campos de texto: la pantalla queda clara pero con
   * recuadros negros dentro y el texto tecleado casi ilegible. Decirlo aqui
   * hace que se vea igual en todas las maquinas. */
  color-scheme: light;

  /* ---- TEXTO Y SUPERFICIES ----
     Tres tonos de superficie en vez de dos: sin el intermedio, todo eran
     tarjetas blancas sobre gris y la pantalla se veía plana y vacía. */
  --tinta: #0f172a;
  --tinta-media: #475569;
  /* Un punto mas oscuro que el gris de Tailwind: sobre el fondo gris,
     #64748b daba 4.34:1 y hace falta 4.5:1. */
  --tinta-suave: #5b6676;
  --linea: #e2e8f0;
  --linea-fuerte: #cbd5e1;
  --fondo: #f1f5f9;
  --papel: #ffffff;
  --papel-hundido: #f8fafc;

  /* ---- LA BARRA OSCURA ----
     Es la decisión que más cambia la cara del sistema. Un carril oscuro a la
     izquierda separa "dónde estoy" de "en qué trabajo", da profundidad y hace
     que la zona de trabajo se vea más luminosa sin tocar sus colores. */
  --barra: #0f172a;
  --barra-alta: #1e293b;
  --barra-texto: #cbd5e1;
  /* #94a3b8 y no #64748b: el anterior daba 3.75:1 sobre la barra oscura,
     por debajo del minimo legible. Medido, no a ojo. */
  --barra-apagado: #94a3b8;

  /* ---- ACENTO ---- */
  --acento: #1d4ed8;
  --acento-vivo: #2563eb;
  --acento-hondo: #1e3a8a;
  --acento-suave: #eff4ff;
  --acento-borde: #c7d7fe;

  /* ---- DINERO ----
     El total cobrado tiene color propio, distinto del azul de los botones: es
     un DATO, no algo en lo que se pueda hacer clic. Mezclarlos enseña a la
     vista a dudar de qué se toca y qué solo se lee. */
  --dinero: #047857;
  --dinero-suave: #ecfdf5;

  --bien: #047857;
  --bien-suave: #ecfdf5;
  --mal: #b91c1c;
  --mal-suave: #fef2f2;
  --aviso: #b45309;
  --aviso-suave: #fffbeb;

  /* ---- PROFUNDIDAD ----
     Sombras en dos capas —una fina y pegada, otra ancha y suave—: es lo que
     hace que una tarjeta parezca apoyada sobre la mesa en vez de dibujada
     encima. Una sola sombra siempre se ve o dura o sucia. */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sombra-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.07);
  --sombra-3: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.12);

  --curva: 10px;

  /* Todo se mueve igual y en 160 ms: lo bastante para que el ojo lo siga, lo
     bastante poco para no estorbar a quien cobra veinte veces por hora. */
  --paso: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Números con el mismo ancho: en una columna de precios, si el 1 mide menos
     que el 8 las cifras no alinean y comparar de un vistazo se vuelve
     imposible. */
  --numeros: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

* { box-sizing: border-box; }

/*
 * ⚠️ QUE `hidden` ESCONDA DE VERDAD, SIEMPRE.
 *
 * El navegador esconde `hidden` con `display: none`, pero esa regla suya es la
 * más débil que existe: cualquier `display: flex` o `display: grid` propio la
 * gana sin avisar. Ya mordió dos veces en un rato — la sección de Productos
 * seguía ocupando medio alto estando escondida, y el campo "Recibido" salía
 * aunque el pago fuera por Yape.
 *
 * Puesto aquí arriba, deja de ser una trampa para siempre.
 */
[hidden] { display: none !important; }

/*
 * ⚠️ LA PÁGINA NO SE MUEVE.
 *
 * `height` fijo con `overflow: hidden`, no `min-height`: en un mostrador,
 * tener que rodar la pantalla para llegar al botón de cobrar cuesta segundos
 * con el cliente delante — y peor, deja de verse el total mientras se escanea.
 *
 * Lo que no cabe se desplaza DENTRO de su caja (el carrito, los resultados),
 * nunca la página entera.
 */
body {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* ---------------- la barra oscura ---------------- */
.menu {
  width: 196px;
  flex: 0 0 196px;
  background: var(--barra);
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  color: var(--barra-texto);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 18px;
}

/* La inicial del negocio en un cuadro: da un ancla visual arriba a la
   izquierda, que es donde el ojo vuelve cada vez que se pierde. */
.marca-sello {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--acento-vivo), var(--acento-hondo));
  color: #fff;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.marca-texto { min-width: 0; }
.marca b { display: block; font-size: 14px; color: #fff; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca span { display: block; color: var(--barra-apagado); font-size: 11px; }

.menu nav { display: flex; flex-direction: column; gap: 2px; }

.menu nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--barra-texto);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--paso), color var(--paso);
}

.menu nav button svg { flex: 0 0 auto; width: 17px; height: 17px; stroke-width: 1.9; opacity: 0.85; }

.menu nav button:hover:not(:disabled) { background: var(--barra-alta); color: #fff; }

/* El activo lleva además una barrita a la izquierda: el color solo no basta
   para quien distingue mal los colores, y la posición se lee de reojo. */
.menu nav button.activo {
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(29, 78, 216, 0.4);
}

.menu nav button.activo svg { opacity: 1; }
.menu nav button:disabled { color: #475569; cursor: not-allowed; }
.menu nav button:focus-visible { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }

.pie {
  margin-top: auto;
  padding: 10px 6px 0;
  font-size: 11px;
  color: var(--barra-apagado);
  border-top: 1px solid var(--barra-alta);
}

.quien {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* La inicial de quien atiende: en un mostrador con dos turnos, saber de un
   vistazo con qué cuenta está abierto el sistema evita ventas al nombre
   equivocado. */
.quien-inicial {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--barra-alta);
  color: #fff;
  font-size: 11px; font-weight: 700;
}

.quien b { flex: 1; min-width: 0; font-size: 12px; color: #e2e8f0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.quien button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--barra-apagado);
  font: inherit; font-size: 11.5px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 5px;
  transition: color var(--paso), background var(--paso);
}

.quien button:hover { color: #fff; background: var(--barra-alta); }

/* ---------------- estructura ---------------- */
main {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* `min-height: 0` no es adorno: sin él, un hijo flexible se niega a encoger
   por debajo de su contenido y empuja la caja fuera de la pantalla, que es
   justo el scroll que se quiere quitar. */
main > section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * ⚠️ ESTA LÍNEA NO SOBRA, aunque lo parezca.
 *
 * El atributo `hidden` esconde un elemento porque el navegador le aplica
 * `display: none`… pero esa regla suya es la más débil de todas, y el
 * `display: flex` de arriba la gana. Resultado: la sección "escondida" seguía
 * ocupando sitio y las dos se repartían el alto a medias — el módulo de venta
 * se quedaba en 368 px de los 736 que tenía, y por eso el carrito salía
 * pequeño aunque la página ya no tuviera scroll. Medido así antes de esto.
 */

/* En Productos se desplaza la LISTA, no la sección: así el buscador y el
   botón de "Nuevo producto" se quedan siempre arriba, aunque el catálogo
   tenga mil artículos. */
#productos { overflow: hidden; }

.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

h1 { margin: 0; font-size: 21px; letter-spacing: -0.3px; }
.cabecera p { margin: 2px 0 0; color: var(--tinta-suave); font-size: 13px; }

.buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: 0 12px;
  width: 340px;
  height: 40px;
}

.buscar span { color: var(--tinta-suave); }
.buscar input { flex: 1; border: 0; outline: none; font: inherit; background: transparent; }

.dos-zonas {
  display: grid;
  grid-template-columns: minmax(430px, 46%) 1fr;
  gap: 16px;
  align-items: start;
}

/*
 * ⚠️ En una pantalla de 1024 las dos zonas SÍ caben —no hay barra horizontal—
 * pero la lista se queda en 341 px y los nombres de esta librería, que
 * llevan marca, medida y presentación, se parten en tres líneas. Caber no es
 * lo mismo que leerse.
 *
 * Medido: por debajo de 1200 px se apilan y la lista pasa de 341 a 802 px.
 */
@media (max-width: 1200px) {
  .dos-zonas { grid-template-columns: 1fr; }
  .buscar { width: 280px; }
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 11px;
  padding: 16px;
}

.tarjeta h2 { margin: 0 0 12px; font-size: 15px; }

/* ---------------- lo que va a quedar guardado ---------------- */
.resultado {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: var(--acento-suave);
  border: 1px solid #ccd6f0;
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.resultado > div { min-width: 0; }
.resultado > div:first-child { flex: 1; }

.resultado label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4a5a94;
  margin-bottom: 2px;
}

.resultado strong { display: block; font-size: 14px; line-height: 1.3; word-break: break-word; }
.resultado .sku { text-align: right; border-left: 1px solid #ccd6f0; padding-left: 12px; }
.resultado .sku strong { font-family: var(--numeros); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }

/* ---------------- formulario ---------------- */
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }

.campo > span { font-size: 12px; color: var(--tinta-suave); }

.campo input,
.campo select {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  font: inherit;
  background: var(--papel);
  color: var(--tinta);
  min-width: 0;
}

.campo input:focus, .campo select:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}

.con-boton { display: flex; gap: 6px; }
.con-boton select { flex: 1; }

.con-boton button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: var(--papel);
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.con-boton button:hover { border-color: var(--acento); color: var(--acento); }

.aviso { margin: 12px 0 0; font-size: 13px; min-height: 18px; }
.aviso.mal { color: var(--mal); }
.aviso.bien { color: var(--bien); }

.acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------------- pantalla de entrar ---------------- */
.pantalla-entrar { display: block; background: var(--fondo); }

.entrar { max-width: 380px; margin: 0 auto; padding: 8vh 20px 40px; }

.entrar-marca { text-align: center; margin-bottom: 20px; }
.entrar-marca b { display: block; font-size: 22px; letter-spacing: -0.3px; }
.entrar-marca span { color: var(--tinta-suave); font-size: 13px; }

.entrar h1 { margin: 0 0 16px; font-size: 17px; }
.entrar .campo { margin-bottom: 12px; }
.entrar .explica { margin: -6px 0 16px; font-size: 13px; color: var(--tinta-suave); }

.ancho { width: 100%; }

.acciones button {
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.suave { border: 1px solid var(--linea); background: var(--papel); color: var(--tinta-suave); }
.fuerte { border: 0; background: var(--acento); color: #fff; }
.fuerte:hover { background: #1b2f76; }

/* ---------------- lista ---------------- */
.lista { padding: 0; overflow: hidden; }

table { width: 100%; border-collapse: collapse; }

thead th {
  position: sticky;
  top: 0;
  background: var(--papel);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tinta-suave);
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
}

tbody td { padding: 9px 14px; border-bottom: 1px solid #f0f2f6; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }

.num { text-align: right; font-family: var(--numeros); font-variant-numeric: tabular-nums; }

td.codigo {
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  font-size: 12.5px;
  white-space: nowrap;
}

td.sin-stock { color: var(--mal); font-weight: 600; }

.vacio { padding: 26px 14px; text-align: center; color: var(--tinta-suave); }

/* Recién guardado: se marca un momento para no perder de vista dónde cayó. */
@keyframes aparece { from { background: var(--acento-suave); } to { background: transparent; } }
tr.nuevo { animation: aparece 1.6s ease-out; }

/* ================= VENTA RÁPIDA ================= */

/* Lo cobrado hoy, siempre a la vista: es el número que se mira sin que nadie
   lo pida, y tenerlo aquí evita entrar a un reporte para saberlo. */
/* Lo cobrado hoy: rótulo, monto y detalle en tres líneas alineadas a la
   derecha. Antes el "S/" iba encima del número como un exponente y quedaba
   flotando; ahora comparte línea base con las cifras. */
.hoy { text-align: right; line-height: 1.15; }

.hoy-rotulo {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--tinta-suave);
}

.hoy-monto {
  display: block;
  font-size: 22px; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  margin: 1px 0 2px;
}

.hoy-monto i {
  font-style: normal;
  font-size: 14px; font-weight: 500;
  color: var(--tinta-suave);
  margin-right: 3px;
}

.hoy-detalle { display: block; font-size: 11.5px; color: var(--tinta-suave); }
.hoy-detalle b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

/*
 * Las dos zonas se reparten TODO el alto que queda bajo la cabecera.
 *
 * `align-items: stretch` (el valor por defecto, antes estaba en `start`) es lo
 * que hace que ambas columnas lleguen abajo; con `start` cada una medía lo que
 * su contenido y volvía el scroll.
 */
.venta-zonas {
  display: grid;
  grid-template-columns: 1fr minmax(272px, 300px);
  gap: 14px;
  flex: 1;
  min-height: 0;
}

/* La columna izquierda: buscador arriba, resultados debajo y el carrito
   quedándose con lo que sobre. */
.venta-izquierda {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
 * ⚠️ LA CABECERA DE VENTA, EN UNA SOLA LÍNEA.
 *
 * Antes eran tres franjas apiladas —título, subtítulo y buscador— y entre las
 * tres se comían 111 px de una pantalla de 768 sin aportar nada: el subtítulo
 * decía "escanea o busca", que es exactamente lo que ya dice el propio
 * buscador. Ahora título, buscador y lo cobrado hoy comparten una sola fila, y
 * los 60 px que sobran se los queda el carrito.
 */
.cabecera-venta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex: 0 0 auto; }
.cabecera-venta h1 { flex: 0 0 auto; font-size: 18px; }
.cabecera-venta .buscar { flex: 1; width: auto; }
.cabecera-venta .hoy { flex: 0 0 auto; }

.buscar-venta { width: 100%; height: 42px; flex: 0 0 auto; }
.buscar-venta input { font-size: 15px; }

/* La lista de resultados va DEBAJO del buscador y en el flujo, no flotando:
   flotando taparía el carrito, que es lo que hay que seguir viendo mientras
   se busca el siguiente artículo. */
/* Tope en vh y no en píxeles: en una pantalla de 768 de alto, 210 px de
   resultados se comían el carrito entero. */
.resultados {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 8px;
  max-height: 26vh;
  overflow-y: auto;
  flex: 0 0 auto;
}

.resultados:empty { display: none; margin-bottom: 0; }

.resultado-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
  font: inherit; cursor: pointer;
}

.resultado-fila:hover, .resultado-fila.marcado { border-color: var(--acento); background: var(--acento-suave); }
.resultado-fila strong { display: block; font-weight: 600; }
.resultado-fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chico { display: block; font-size: 11.5px; color: var(--tinta-suave); }
.sin-nada { padding: 14px; text-align: center; color: var(--tinta-suave); }

/* El carrito se queda con todo el alto que sobre y se desplaza por dentro:
   es el único sitio donde el scroll tiene sentido, porque la venta puede
   tener treinta líneas y la pantalla no crece. */
.carrito {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.carrito table { flex: 0 0 auto; }
.carrito td strong { font-weight: 500; }

/* 64 px: cabe "999" sin que el número se corte, y no más, para que la columna
   de importes no se aleje del producto. */
.cant {
  width: 64px; height: 30px; padding: 0 6px; text-align: right;
  border: 1px solid var(--linea); border-radius: 6px;
  font: inherit; font-variant-numeric: tabular-nums;
  background: var(--papel); color: var(--tinta);
}

.quitar {
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--tinta-suave);
  font-size: 17px; line-height: 1; cursor: pointer;
}

.quitar:hover { background: #fdecea; color: var(--mal); }

/* La columna de cobro también llega abajo, con el botón pegado al final:
   siempre en el mismo sitio, tenga el carrito una línea o veinte. */
.cobro {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* Compacto a propósito: el panel de cobro tiene que caber SIN desplazarse.
   Cada campo que se apila aquí es una franja de pantalla, y son pocos. */
.cobro { padding: 13px 14px; }
.cobro h2 { margin-bottom: 9px; }
.cobro .campo { margin-bottom: 7px; }

.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* "+ cliente": un enlace y no un campo. Casi nunca se usa, y un campo vacío
   ocupando sitio todo el día por si acaso no compensa. */
.enlace {
  border: 0; background: transparent; padding: 0 0 2px;
  color: var(--acento); font: inherit; font-size: 12.5px;
  cursor: pointer; text-align: left;
}

.enlace:hover { text-decoration: underline; }

.cuentas { border-top: 1px solid var(--linea); padding-top: 8px; margin: 9px 0; }
.cuentas div { display: flex; justify-content: space-between; align-items: baseline; padding: 1px 0; }
.cuentas span { color: var(--tinta-suave); font-size: 13px; }
.cuentas b { font-variant-numeric: tabular-nums; }

.cuentas .total span { color: var(--tinta); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
.cuentas .total b { font-size: 25px; letter-spacing: -0.6px; }
.cuentas .total b::before { content: 'S/ '; font-size: 14px; color: var(--tinta-suave); font-weight: 400; }

.vuelto { border-top: 0; margin: 0 0 4px; padding-top: 0; }
.vuelto b { font-size: 17px; color: var(--bien); }
.vuelto b.mal { color: var(--mal); }

.cobro .aviso { margin-top: 6px; min-height: 0; }
.cobro .acciones { margin-top: 8px; }
.cobro .fuerte { flex: 1; height: 42px; font-size: 15px; }

/* Las últimas ventas son lo prescindible de esta columna: es lo que encoge
   cuando falta alto, porque el total del día ya está arriba en la cabecera. */
.ventas-hoy {
  margin-top: 12px;
  border-top: 1px solid var(--linea);
  padding-top: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: block;
}

.ventas-hoy td { padding: 4px 0; border: 0; font-size: 12.5px; }
.ventas-hoy tr.anulada { text-decoration: line-through; color: var(--tinta-suave); }

/*
 * ⚠️ Aquí las dos zonas NO se apilan aunque la pantalla sea de 1024.
 *
 * En Productos apilar era lo correcto; aquí sería justo lo contrario, porque
 * apilar es exactamente lo que obliga a rodar la pantalla para llegar al
 * botón de cobrar. Se estrecha la columna de cobro y las dos siguen a la
 * vista. Medido en 1024 × 768: entra sin scroll.
 */
@media (max-width: 1150px) {
  .venta-zonas { grid-template-columns: 1fr minmax(258px, 272px); gap: 12px; }
  .hoy-desglose { display: none; }
}

.nota-entrar { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--tinta-suave); }

/* ================= PRODUCTOS: lista + ventana ================= */

.cabecera-acciones { display: flex; align-items: center; gap: 10px; }
.cabecera-acciones .fuerte { height: 40px; padding: 0 16px; white-space: nowrap; }

/* La lista es la pantalla, así que se lleva todo el alto y se desplaza ella,
   con la cabecera de la tabla pegada arriba. */
.lista-productos { flex: 1; min-height: 0; overflow-y: auto; padding: 0; }
.lista-productos td .chico { color: var(--tinta-suave); }

.editar {
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta-suave);
  font: inherit; font-size: 12.5px;
  padding: 4px 11px;
  cursor: pointer;
}

.editar:hover { border-color: var(--acento); color: var(--acento); }

/* ---- la ventana ---- */
.fondo-ventana {
  position: fixed; inset: 0;
  background: rgba(23, 27, 36, 0.42);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}

/* `max-height` y no `height`: la ventana mide lo que necesita, y solo cuando
   no cabe en la pantalla se desplaza por dentro. */
.ventana {
  background: var(--papel);
  border-radius: 12px;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(23, 27, 36, 0.22);
}

.ventana-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea);
}

.ventana-cabecera h2 { margin: 0; font-size: 16px; }

.cerrar {
  border: 0; background: transparent; color: var(--tinta-suave);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}

.cerrar:hover { color: var(--tinta); }

.ventana-cuerpo { padding: 16px 18px; overflow-y: auto; }

.ventana-pie {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--linea);
}

.empuja { flex: 1; }

.peligro {
  border: 1px solid #f0c8c4; border-radius: 8px;
  background: var(--papel); color: var(--mal);
  font: inherit; font-weight: 600;
  height: 38px; padding: 0 14px; cursor: pointer;
}

.peligro:hover { background: #fdecea; }

.ventana-pie .suave, .ventana-pie .fuerte { height: 38px; padding: 0 18px; }

/* ================= REPORTES ================= */

.atajos { display: flex; gap: 2px; background: var(--papel); border: 1px solid var(--linea); border-radius: 9px; padding: 3px; }

.atajos button {
  border: 0; border-radius: 6px;
  background: transparent; color: var(--tinta-suave);
  font: inherit; font-size: 12.5px;
  height: 32px; padding: 0 11px; cursor: pointer;
  white-space: nowrap;
}

.atajos button:hover { color: var(--tinta); }
.atajos button.activo { background: var(--acento); color: #fff; font-weight: 600; }

.rango { display: flex; align-items: center; gap: 6px; color: var(--tinta-suave); font-size: 12px; }

.rango input {
  height: 38px; padding: 0 8px;
  border: 1px solid var(--linea); border-radius: 8px;
  font: inherit; font-size: 12.5px;
  background: var(--papel); color: var(--tinta);
}

/* ---- la tira de números ---- */
.tira-kpi { display: flex; gap: 10px; margin-bottom: 12px; flex: 0 0 auto; }

.kpi {
  flex: 1;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 9px 13px;
  min-width: 0;
}

.kpi label {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--tinta-suave); margin-bottom: 2px;
}

.kpi strong { font-size: 20px; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.kpi strong i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--tinta-suave); margin-right: 2px; }

/* Uno solo manda: el resto acompaña. Cinco números del mismo peso no dicen
   por dónde empezar a mirar. */
.kpi-fuerte { background: var(--acento); border-color: var(--acento); flex: 1.35; }
.kpi-fuerte label { color: #b9c6ee; }
.kpi-fuerte strong { color: #fff; font-size: 25px; }
.kpi-fuerte strong i { color: #b9c6ee; }

.kpi-aviso { flex: 0 0 auto; border-color: #f0c8c4; background: #fdf3f2; }
.kpi-aviso strong { color: var(--mal); }

/* ---- las tres cajas ---- */
.reportes-zonas {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.columna { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }

/*
 * ⚠️ `min-width: 0` EN LOS HIJOS DE LA REJILLA, y no es opcional.
 *
 * Una celda de rejilla se niega por defecto a encoger por debajo de su
 * contenido. Con un mes de ventas, el gráfico de barras medía 1.238 px y en
 * vez de desplazarse por dentro ESTIRABA la tarjeta y descuadraba las tres
 * columnas. Es la misma trampa que el `min-height: 0` de la pantalla de venta,
 * en el otro eje.
 */
.reportes-zonas > *,
.columna > * { min-width: 0; }
.crece { flex: 1; min-height: 0; }

.tarjeta-titulo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.tarjeta-titulo h2 { margin: 0; }
.tarjeta-titulo span { font-size: 11.5px; color: var(--tinta-suave); }

/*
 * ⚠️ ESTAS TARJETAS NECESITAN SU RELLENO, y no lo tenían.
 *
 * `.lista` lleva `padding: 0` porque en Productos la tabla ocupa la tarjeta
 * entera. Aquí dentro no: la tabla se saca 14 px por lado con márgenes
 * negativos para que las filas lleguen a los bordes, y ese margen SOLO está
 * bien si la tarjeta tiene esos mismos 14 px de relleno. Sin ellos la tabla
 * sobresalía 13 px por cada lado y los botones acababan a 1 px del borde —
 * pegados, como se veía en las capturas de Isabel.
 */
.reportes-zonas .lista,
.ajustes-zonas .lista { padding: 14px; display: flex; flex-direction: column; }
.desplaza { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px -14px; }
.desplaza thead th { padding: 8px 14px; }
.desplaza td { padding: 7px 14px; }

/* ---- cómo pagaron ---- */
.pagos { display: flex; flex-direction: column; gap: 9px; }
.pago { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.pago-fila { display: contents; }
.pago-fila span { font-size: 13px; }
.pago-fila b { font-variant-numeric: tabular-nums; font-size: 13px; }

.pago-barra { grid-column: 1; height: 6px; background: var(--fondo); border-radius: 3px; overflow: hidden; }
.pago-barra i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
.pago-parte { grid-column: 2; font-size: 11px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* ---- barras por día ----
 *
 * ⚠️ ANTES ESTO NO ERA UN GRÁFICO, ERA UNA PARED.
 *
 * Con `flex: 1` y un solo día, la barra se estiraba a los 354 px de la caja:
 * un rectángulo azul macizo que no dice nada. Un gráfico se lee por la
 * DIFERENCIA de altura entre barras; una barra sola solo necesita ser una
 * barra, no un muro.
 *
 * La cura son tres cosas: ancho máximo por barra, la fila centrada cuando hay
 * pocas, y una línea de base con el valor máximo arriba — que es lo que hace
 * que un dibujo se lea como una medición.
 */
.barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  height: 100%;
  min-height: 130px;
  padding: 18px 4px 0;
  overflow-x: auto;

  /* La línea de base y el techo: dos hilos que convierten las barras en una
     escala. Sin ellos no hay contra qué comparar. */
  background:
    linear-gradient(var(--linea), var(--linea)) 0 100% / 100% 1px no-repeat,
    linear-gradient(#eef2f7, #eef2f7) 0 14px / 100% 1px no-repeat;
}

.barra {
  flex: 1 1 0;
  max-width: 54px;
  min-width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.barra-monto {
  font-size: 10.5px;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-bottom: 4px;
}

.barra-caja { flex: 1; width: 100%; display: flex; align-items: flex-end; }

.barra-caja i {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, var(--acento-vivo), var(--acento));
  border-radius: 4px 4px 0 0;
  transition: background var(--paso);
}

.barra:hover .barra-caja i { background: linear-gradient(180deg, var(--acento), var(--acento-hondo)); }

.barra-dia {
  font-size: 10px;
  color: var(--tinta-suave);
  margin-top: 6px;
  white-space: nowrap;
}

/* A 1150 no caben tres columnas legibles: la de pagos y días se va debajo. */
@media (max-width: 1150px) {
  .reportes-zonas { grid-template-columns: 1fr 1fr; }
  .columna { grid-column: 1 / -1; flex-direction: row; }
  .columna .tarjeta { flex: 1; }
  .tira-kpi { flex-wrap: wrap; }
}

/* La casilla del ticket, dentro de la fila de botones para no gastar alto. */
.marcar { display: flex; align-items: center; gap: 5px; margin-right: auto; font-size: 12.5px; color: var(--tinta-suave); cursor: pointer; user-select: none; }
.marcar input { width: 15px; height: 15px; accent-color: var(--acento); cursor: pointer; }
.marcar:hover span { color: var(--tinta); }

/* El ticket se imprime desde un iframe escondido; si alguna vez alguien
   imprime la página entera, que no salga la pantalla del sistema. */
@media print { body > *:not(iframe) { display: none !important; } }

/* =====================================================================
   REDISEÑO — profundidad, color y estados vacíos
   =====================================================================
   Isabel: "se ve muy pobre, vacío, dale vida". Tres causas y tres curas:

   1. Todo era blanco sobre gris, sin capas → sombras en dos niveles y una
      tercera superficie (papel hundido) para las zonas de fondo.
   2. El carrito vacío era un hueco en blanco del tamaño de media pantalla →
      estado vacío con icono, explicación y las teclas que sirven.
   3. Un solo color para todo → el dinero en verde, las acciones en azul, y
      la barra lateral oscura para separar navegación de trabajo.
   ===================================================================== */

/* ---- superficies ---- */
.tarjeta {
  border-radius: var(--curva);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--paso);
}

.lista, .carrito, .cobro { box-shadow: var(--sombra-2); }

/* ---- cabeceras de tabla: pegadas y con fondo propio ---- */
thead th {
  background: var(--papel-hundido);
  border-bottom: 1px solid var(--linea);
  font-size: 10.5px;
  letter-spacing: 0.7px;
  color: var(--tinta-suave);
}

tbody tr { transition: background var(--paso); }
tbody tr:hover { background: var(--acento-suave); }
tbody td { border-bottom: 1px solid #f1f5f9; }

/* ---- botones ---- */
.fuerte {
  background: linear-gradient(180deg, var(--acento-vivo), var(--acento));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(29, 78, 216, 0.28);
  transition: transform var(--paso), box-shadow var(--paso), background var(--paso);
}

.fuerte:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--acento), var(--acento-hondo));
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(29, 78, 216, 0.35);
  transform: translateY(-1px);
}

.fuerte:active:not(:disabled) { transform: translateY(0); }

.fuerte:disabled {
  background: var(--linea-fuerte);
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}

.suave { transition: border-color var(--paso), color var(--paso), background var(--paso); }
.suave:hover { border-color: var(--linea-fuerte); color: var(--tinta); background: var(--papel-hundido); }

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento-vivo);
  outline-offset: 2px;
}

/* ⚠️ El input del buscador NO lleva su propio anillo: la caja que lo envuelve
   ya se ilumina entera al escribir. Con los dos salía un recuadro azul dentro
   de otro recuadro azul — se veía como un error de dibujo, y es lo que se ve
   en las capturas de Isabel. */
.buscar input:focus-visible { outline: none; }

/* ---- campos ---- */
.campo input, .campo select, .rango input, .cant {
  transition: border-color var(--paso), box-shadow var(--paso);
}

.campo input:focus, .campo select:focus {
  outline: 0;
  border-color: var(--acento-vivo);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.buscar { transition: border-color var(--paso), box-shadow var(--paso); box-shadow: var(--sombra-1); }
.buscar:focus-within { border-color: var(--acento-vivo); box-shadow: 0 0 0 3px var(--acento-suave); }

.icono-lupa { width: 17px; height: 17px; stroke-width: 2; color: var(--tinta-suave); flex: 0 0 auto; }
.buscar:focus-within .icono-lupa { color: var(--acento); }

/* ---- estados vacíos: guían, no son un hueco ---- */
.sin-nada-caja {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 24px;
  text-align: center;
  color: var(--tinta-suave);
}

.sin-nada-caja svg {
  width: 40px; height: 40px;
  stroke-width: 1.4;
  color: var(--linea-fuerte);
  margin-bottom: 6px;
}

.sin-nada-caja b { font-size: 14px; color: var(--tinta-media); }
.sin-nada-caja p { margin: 0; max-width: 320px; font-size: 12.5px; line-height: 1.5; }

.pistas { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; }
.pistas span { display: flex; align-items: center; gap: 4px; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid var(--linea-fuerte);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--papel);
  font: 500 10.5px var(--numeros);
  color: var(--tinta-media);
  text-align: center;
}

/* ---- lo cobrado hoy: en verde y sobre su propia tarjeta ---- */
.hoy {
  background: var(--dinero-suave);
  border: 1px solid #a7f3d0;
  border-radius: var(--curva);
  padding: 7px 14px;
  box-shadow: var(--sombra-1);
}

.hoy-rotulo { color: #047857; opacity: 0.85; }
.hoy-monto { color: var(--dinero); }
.hoy-monto i { color: #059669; }
.hoy-detalle { color: #047857; opacity: 0.9; }
.hoy-detalle b { color: #065f46; }

/* ---- el total a cobrar ---- */
.cuentas .total { padding: 6px 0 2px; }
.cuentas .total b { color: var(--tinta); }

/* ---- ⚠️ LAS ÚLTIMAS VENTAS SALÍAN PEGADAS ----
   En la captura de Isabel se leía "#120:36efectivo5.00": la tabla no tenía
   reparto de columnas, así que las celdas se pisaban unas a otras. */
.ventas-hoy { width: 100%; table-layout: fixed; }
.ventas-hoy td { padding: 5px 0; vertical-align: middle; }
.ventas-hoy td:nth-child(1) { width: 34px; color: var(--tinta-suave); }
.ventas-hoy td:nth-child(2) { width: 42px; }
.ventas-hoy td:nth-child(3) { color: var(--tinta-suave); text-transform: capitalize; }
.ventas-hoy td:nth-child(4) { width: 62px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.ventas-hoy tr:hover { background: transparent; }

/* Un rótulo para que ese bloque no aparezca como números sueltos al final. */
.ventas-hoy-titulo {
  margin: 12px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--tinta-suave);
}

/* ---- resultados del buscador ---- */
.resultado-fila { transition: border-color var(--paso), background var(--paso), transform var(--paso); }
.resultado-fila:hover, .resultado-fila.marcado { box-shadow: var(--sombra-1); }
.resultado-fila.marcado { border-color: var(--acento-vivo); }

/* ---- la ventana ---- */
.ventana { box-shadow: var(--sombra-3); }
.fondo-ventana { backdrop-filter: blur(2px); }

/* ---- los KPI de reportes ---- */
.kpi { box-shadow: var(--sombra-1); transition: box-shadow var(--paso); }
.kpi-fuerte { background: linear-gradient(160deg, var(--acento-vivo), var(--acento-hondo)); box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25), 0 8px 24px rgba(29, 78, 216, 0.18); }

/* Entrada suave al cambiar de módulo: 160 ms, lo justo para que el ojo
   entienda que cambió la pantalla y no que parpadeó. */
main > section:not([hidden]) { animation: entra 160ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- la pantalla de entrar ---- */
.pantalla-entrar { background: linear-gradient(165deg, #f8fafc 0%, #e8eef7 100%); }
.entrar .tarjeta { box-shadow: var(--sombra-3); border-radius: 14px; padding: 22px; }
.entrar-marca b { color: var(--tinta); }


/* ---- ritmo de la tabla de productos ----
 *
 * Las filas medían 47, 47 y 55 px según el producto llevara código de barras o
 * no. Una tabla sin ritmo se lee como una lista escrita a mano; el ritmo
 * constante es la mitad de lo que hace que una tabla parezca de un sistema
 * serio. El código de barras pasa a la misma línea, en gris y al final del
 * nombre: informa igual y no rompe el compás.
 */
#filas tr { height: 44px; }
#filas td { padding-top: 0; padding-bottom: 0; }

/*
 * ⚠️ `center` y no `baseline`.
 *
 * La etiqueta del código de barras lleva borde y relleno, así que es más alta
 * que el texto. Con `baseline`, esa etiqueta manda sobre la línea y arrastra
 * el nombre hacia arriba: quedaba 13 px por encima del SKU y del precio, que
 * es lo que se ve en la captura. Con `center` los dos se centran en la fila.
 */
/*
 * ⚠️ EL FLEX VA EN UN DIV DENTRO DE LA CELDA, NO EN LA CELDA.
 *
 * Poniendo `display: flex` en el propio <td>, la celda DEJA DE SER una celda
 * de tabla: se sale del reparto de la fila, no se centra con las demás y mide
 * lo que mide su texto. Medido: 21 px de alto en una fila de 44, con el nombre
 * 11 px por encima del SKU y del precio. Eso es lo que se veía en la captura.
 */
.nombre-producto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nombre-producto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.codigo-barras {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1px 6px;
}

/* El botón de cobrar apagado: gris claro sobre blanco no se leía como
   "todavía no". Ahora dice que está esperando algo, sin gritar. */
.fuerte:disabled {
  background: var(--papel-hundido);
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
}

/* ================= CONFIGURACIÓN ================= */

/* Usuarios ocupa lo que necesita y las otras dos se reparten el resto: con
   filas iguales, la de usuarios sobraba de alto y a las de clasificación —que
   son largas— les faltaba. */
.ajustes-zonas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.ajustes-zonas > *:first-child { grid-column: 1 / -1; }
.ajustes-zonas > * { min-width: 0; }

.ajustes-pista { margin: -4px 0 8px; font-size: 12px; color: var(--tinta-suave); }

.chico-btn { height: 30px; padding: 0 11px; font-size: 12.5px; }

/* Columnas fijas: sin esto el navegador reparte según el contenido y las
   cabeceras dejan de caer sobre sus datos al cambiar de producto. */
.col-codigo { width: 124px; }
.col-precio { width: 94px; }
/* 168 px: caben «Etiqueta» y «Editar» uno al lado del otro. Con los 117 de
   antes el segundo botón se salía de la tarjeta. */
.col-accion { width: 168px; }
.col-cod    { width: 52px; }
.col-uso    { width: 52px; }

/* ⚠️ `table-layout: fixed` en las tablas de configuración.
 *
 * Sin esto el navegador ensancha las columnas hasta que quepa su contenido, y
 * la tabla acababa midiendo 427 px dentro de una tarjeta de 388: el último
 * botón quedaba cortado por el borde. Con anchos fijos, lo que no cabe se
 * recorta con "…" y nada se sale. */
#aCategorias, #aSubcategorias, #aUsuarios { table-layout: fixed; }
.ajustes-zonas thead tr, .ajustes-zonas tbody tr { width: 100%; }
.col-editar { width: 78px; }

.ajustes-zonas td:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Una fila oculta se ve apagada, no desaparece: quien la ocultó tiene que
   poder encontrarla para volver a mostrarla. */
tr.apagada td { opacity: 0.5; }
tr.apagada .nombre-clic { text-decoration: line-through; }

tr.elegida { background: var(--acento-suave) !important; }
tr.elegida .nombre-clic { font-weight: 600; color: var(--acento); }
.nombre-clic { cursor: pointer; }

.chapa {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  font-size: 11px;
  color: var(--tinta-media);
}

.chapa-admin { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento); font-weight: 600; }

.ventana-chica { max-width: 420px; }
.ventana-cuerpo small { font-size: 11.5px; color: var(--tinta-suave); }

@media (max-width: 1150px) {
  .ajustes-zonas { grid-template-columns: 1fr 1fr; }
}


/* El contenido de cada celda, centrado en su fila. El valor por defecto de una
   celda es la línea base, y una celda con una etiqueta más alta que el texto
   —el código de barras— desplazaba a las demás. */
#filas td, .ajustes-zonas td, .carrito td { vertical-align: middle; }

/* =====================================================================
   PANEL DE COBRO TIPO POS
   =====================================================================
   Un mostrador se mide en segundos por venta. Cada decisión de aquí abajo
   quita un clic o una duda:

     · el método de pago en tres botones y no en un desplegable (1 clic, no 2)
     · lo que se le entrega —nota, boleta o factura— decidido en un toque
     · el total, lo más grande de la pantalla: es lo que se dice en voz alta
     · el botón dice CUÁNTO cobra, para no mirar a otro sitio antes de pulsar
   ===================================================================== */

.cobro { padding: 14px; gap: 0; }

/* ---- método de pago ---- */
.pagos-elegir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 10px;
  margin-bottom: 8px;
}

.pago-opcion {
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tinta-media);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--paso), color var(--paso), box-shadow var(--paso);
}

.pago-opcion:hover { color: var(--tinta); }

.pago-opcion.activo {
  background: var(--papel);
  color: var(--acento);
  font-weight: 600;
  box-shadow: var(--sombra-1);
}

/* ---- el total ---- */
.total-pos {
  text-align: right;
  padding: 5px 0 7px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 8px;
}

.total-rotulo {
  display: block;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--tinta-suave);
}

.total-cifra {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  margin-top: 2px;
}

.total-cifra i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--tinta-suave); margin-right: 4px; }
.total-detalle { display: block; margin-top: 3px; font-size: 11.5px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* ---- campos ---- */
.campo-pos { display: block; margin-bottom: 6px; }
.campo-pos > span { display: block; font-size: 11.5px; color: var(--tinta-suave); margin-bottom: 2px; }

.campo-pos input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--papel);
  color: var(--tinta);
  transition: border-color var(--paso), box-shadow var(--paso);
}

.campo-pos input:focus {
  outline: 0;
  border-color: var(--acento-vivo);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* ---- el vuelto ---- */
.vuelto-pos {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--dinero-suave);
  border: 1px solid #a7f3d0;
  margin-bottom: 6px;
}

.vuelto-pos span { font-size: 12.5px; color: #047857; font-weight: 600; }
.vuelto-pos b { font-size: 18px; color: var(--dinero); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }

/* Falta plata: se dice con otra palabra y en rojo, no con un número negativo
   que hay que interpretar con el cliente delante. */
.vuelto-pos.falta { background: var(--mal-suave); border-color: #fecaca; }
.vuelto-pos.falta span { color: var(--mal); }
.vuelto-pos.falta b { color: var(--mal); }

/* ---- lo que casi nunca se toca ---- */
.extras-pos { display: flex; gap: 14px; margin-bottom: 5px; }

/* ---- el botón ---- */
.cobrar-pos {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--acento-vivo), var(--acento));
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 3px 12px rgba(29, 78, 216, 0.3);
  transition: transform var(--paso), box-shadow var(--paso), background var(--paso);
}

.cobrar-pos span { font-size: 15px; font-weight: 600; }
.cobrar-pos b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }

.cobrar-pos:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--acento), var(--acento-hondo));
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12), 0 6px 18px rgba(29, 78, 216, 0.38);
  transform: translateY(-1px);
}

.cobrar-pos:active:not(:disabled) { transform: translateY(0); }

.cobrar-pos:disabled {
  background: var(--papel-hundido);
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
  box-shadow: none;
  cursor: not-allowed;
}

.cobrar-pos:disabled b { color: var(--tinta-suave); }

/* ---- el pie ---- */
.pie-pos {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  font-size: 12px;
}

.pie-pos .marcar { margin-right: 0; }
.pie-pos .enlace { color: var(--tinta-suave); }
.pie-pos .enlace:hover { color: var(--mal); }
.teclas { margin-left: auto; color: var(--tinta-suave); font-size: 11px; }
.teclas kbd { margin-right: 3px; }


/* =====================================================================
   VENTA: cabecera mínima, buscador en el carrito y resultados flotantes
   ===================================================================== */

/* La cabecera baja de 69 a ~38 px. Lo que suelta se lo reparten el carrito y
   el panel de cobro, que es donde de verdad hace falta alto. */
.cabecera-venta { align-items: center; gap: 16px; margin-bottom: 10px; }
.cabecera-venta h1 { font-size: 17px; }

.hoy-linea {
  margin-left: auto;
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--dinero-suave);
  border: 1px solid #a7f3d0;
}

.hoy-linea .hoy-rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #047857; opacity: .85; }
.hoy-cifra { font-size: 17px; color: var(--dinero); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.hoy-linea .hoy-detalle { font-size: 11.5px; color: #047857; opacity: .9; }
.hoy-linea .hoy-detalle b { color: #065f46; font-weight: 600; }

/* ---- el buscador vive con el carrito ---- */
.venta-izquierda { position: relative; }
.buscar-venta { margin-bottom: 10px; }

/*
 * ⚠️ LOS RESULTADOS FLOTAN, NO EMPUJAN.
 *
 * Antes se abrían dentro de la columna y el carrito se encogía y crecía con
 * cada letra tecleada: los renglones bailaban justo mientras se mira lo que se
 * está cobrando. Flotando encima, el carrito no se mueve nunca.
 */
.resultados {
  position: absolute;
  top: 52px; left: 0; right: 0;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  padding: 5px;
  gap: 3px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 11px;
  box-shadow: var(--sombra-3);
  margin-bottom: 0;
}

.resultados:empty { display: none; }
.resultado-fila { border-color: transparent; }
.resultado-fila:hover, .resultado-fila.marcado { border-color: var(--acento-borde); }

/* ---- el panel de cobro, sin desplazamiento ---- */
.cobro { overflow: visible; }
.campo-cliente input { text-align: left; font-size: 14px; height: 38px; }
.extras-pos { margin-bottom: 10px; }

/* =====================================================================
   VENTANA DE PRODUCTO — cinco filas de dos, sin desplazamiento
   ===================================================================== */

/* Los campos van de dos en dos y ninguno a lo ancho: con categoría,
   subcategoría y marca ocupando la fila entera, la ventana quedaba alta, con
   escalones a media altura y obligaba a desplazarla. */
.ventana .rejilla { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ventana .campo.ancho { grid-column: auto; }

/*
 * ⚠️ EL CUERPO TIENE QUE PODER ENCOGERSE, O EL PIE SE SALE.
 *
 * Aquí ponía `overflow: visible` con la idea de que «el contenido cabe, así
 * que la barra sobra». Cabía en una pantalla alta. En una de 600 px la ventana
 * topa en su `max-height` de 560, pero el cuerpo con `overflow: visible` no
 * puede encogerse por debajo de su contenido — así que empuja al pie, y
 * «Dar de baja», «Cancelar» y «Guardar cambios» quedaban 17 px POR DEBAJO del
 * borde de la ventana.
 *
 * `min-height: 0` es la parte que no se ve venir: sin él, un hijo de un flex
 * se niega a bajar del tamaño de su contenido aunque tenga `overflow: auto`.
 */
.ventana-cuerpo { overflow-y: auto; min-height: 0; }

/* El precio se lee como cifra, no como texto: a la derecha y con la moneda
   delante, igual que en el resto del sistema. */
.campo-precio { position: relative; }
.campo-precio input { text-align: right; padding-right: 10px; padding-left: 30px; font-variant-numeric: tabular-nums; }

.campo-precio::after {
  content: 'S/';
  position: absolute;
  left: 10px; bottom: 9px;
  font-size: 12.5px;
  color: var(--tinta-suave);
  pointer-events: none;
}

/* El bloque de "se va a llamar" más ajustado: es una vista previa, no un
   título. */
.ventana .resultado { padding: 8px 12px; margin-bottom: 12px; }
.ventana .resultado strong { font-size: 13.5px; }

/* =====================================================================
   QUIÉN ESTÁ VENDIENDO — pie de la barra lateral
   ===================================================================== */

.pie {
  margin-top: auto;
  padding: 12px 6px 0;
  border-top: 1px solid var(--barra-alta);
}

.quien {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: 9px;
  margin-bottom: 8px;
  transition: background var(--paso);
}

.quien:hover { background: var(--barra-alta); }

/* La inicial en un círculo con el azul del sistema: es el mismo lenguaje que
   el sello del negocio arriba, y de un vistazo se sabe quién está dentro. */
.quien-inicial {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--acento-vivo), var(--acento-hondo));
  color: #fff;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 1px 6px rgba(37, 99, 235, 0.4);
}

/* Nombre arriba y rol debajo. Antes iban en la misma línea separados por un
   punto, y el rol era justo lo que se recortaba: "Fernando · ad…". */
.quien-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }

.quien-datos b {
  font-size: 12.5px; font-weight: 600; color: #f1f5f9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.quien-rol {
  font-size: 10.5px;
  color: var(--barra-apagado);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Salir, en icono. Un enlace subrayado con el texto "Salir" competía por
   atención con los módulos del menú, que es donde se debe mirar. */
#salir {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--barra-apagado);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--paso), color var(--paso);
}

#salir svg { width: 16px; height: 16px; stroke-width: 1.9; }
#salir:hover { background: rgba(185, 28, 28, 0.18); color: #fca5a5; }
#salir:focus-visible { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }

.version { display: block; padding-left: 6px; font-size: 10px; color: #475569; }

/* ---- la línea del carrito ----
 *
 * El código va DETRÁS del nombre, separado por un punto, y no debajo. Antes
 * eran tres renglones —el nombre partido en dos más el código— y con seis
 * artículos el carrito se llenaba de aire en vez de productos.
 *
 * Tope de dos líneas: un nombre largo se recorta con "…" en vez de empujar
 * las filas de abajo y descuadrar el ritmo de la tabla.
 */
/*
 * DOS RENGLONES COMO MÁXIMO.
 *
 * El nombre fluye y, si es largo, pasa al segundo renglón con el código
 * detrás. Nunca un tercero: con tres, seis artículos llenan el carrito de
 * texto en vez de productos, que es de donde veníamos.
 *
 * ⚠️ El corte se hace sobre la línea ENTERA (nombre + código). En un nombre
 * tan largo que no quepa en dos renglones se pierde el código — pero el
 * espacio da para unos 60 caracteres y los nombres de esta librería no pasan
 * de ahí. El nombre completo sale al pasar el ratón por encima.
 */
.linea-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.linea-nombre b { font-weight: 500; }

.linea-nombre i {
  font-style: normal;
  color: var(--linea-fuerte);
  margin: 0 5px;
}

.linea-nombre em {
  font-style: normal;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}

.carrito td { padding-top: 8px; padding-bottom: 8px; }

/* =====================================================================
   ETIQUETAS
   ===================================================================== */

/* Dos botones en la columna de acciones. En un `<td>` el flex va SIEMPRE
   dentro de un div: puesto en la celda, la celda deja de ser celda y la fila
   se descuadra. */
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }

.etiquetar {
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta-suave);
  font: inherit; font-size: 12.5px;
  padding: 4px 11px;
  cursor: pointer;
}

.etiquetar:hover { border-color: var(--acento); color: var(--acento); }

/* ---- la ventana ---- */
.ventana-etiqueta { max-width: 620px; }

/* La etiqueta a la izquierda y los mandos a la derecha: se mira el resultado
   mientras se cambian las opciones, sin tener que imprimir para verlo. */
.etiqueta-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.etiqueta-vista {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 10px;
}

.etiqueta-vista small { color: var(--tinta-suave); font-size: 11.5px; }

/* Fondo blanco y sombra: sin ellos, una etiqueta blanca sobre gris claro no
   se distingue del recuadro que la contiene y no se ve dónde acaba el papel. */
.etiqueta-previa {
  background: #fff;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18);
  border-radius: 2px;
  /* `max-width` en porcentaje para que un rollo ancho no desborde la ventana
     en una pantalla chica; el alto lo sigue por proporción. */
  max-width: 100%;
  height: auto;
}

.etiqueta-mandos { display: flex; flex-direction: column; gap: 12px; }

.etiqueta-quien {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linea);
}

.etiqueta-quien strong { font-size: 13.5px; line-height: 1.35; }
.etiqueta-quien span {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}

.etiqueta-mandos .marcar { margin-right: 0; }

.etiqueta-maquina {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 10px 12px;
  background: var(--papel-hundido);
  border: 1px solid var(--linea);
  border-radius: 8px;
}

/* El estado de la máquina se dice con palabras Y con color: quien no
   distingue bien los colores lee lo mismo. */
.estado-etiquetadora {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  display: flex; align-items: center; gap: 7px;
}

.estado-etiquetadora::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  flex: none;
}

.estado-etiquetadora.buscando { color: var(--tinta-suave); }
.estado-etiquetadora.bien { color: var(--bien); }
.estado-etiquetadora.mal { color: var(--mal); }

.etiqueta-maquina select { width: 100%; }

/* En pantallas angostas la vista previa se pone arriba y los mandos debajo:
   en dos columnas de 200 px no cabe ni la etiqueta ni el formulario. */
@media (max-width: 620px) {
  .etiqueta-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* ---- que se le entrega al cliente: nota, boleta o factura ---- */
/* Mismo patrón que el método de pago: las tres a la vista, un toque para
   cambiar. Es una decisión que se toma con el cliente delante. */
/* El rótulo ocupa la fila entera y los tres botones la de abajo: con el
   rótulo al lado, cada botón bajaba a ~55 px y no cabía ni «Boleta». */
.tipo-doc { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }

.tipo-doc-rotulo {
  flex: 0 0 100%;
  font-size: 11px;
  color: var(--tinta-suave);
  margin-bottom: 1px;
}

.tipo-doc button {
  flex: 1; min-width: 0;
  padding: 6px 4px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: var(--papel);
  color: var(--tinta-suave);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.tipo-doc button:hover { border-color: var(--linea-fuerte); color: var(--tinta); }

.tipo-doc button.activo {
  border-color: var(--acento-borde);
  background: var(--acento-suave);
  color: var(--acento-hondo);
  font-weight: 600;
}


/* ---- el comprobante en la lista de ventas ---- */
/* El estado se dice con palabra Y con color: quien no distingue bien los
   colores lee lo mismo. */
.sello {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sello.bien   { background: var(--bien-suave); color: var(--bien); }
.sello.espera { background: var(--aviso-suave); color: #92400e; }
.sello.mal    { background: var(--mal-suave); color: var(--mal); font-weight: 600; }

/* Una venta sin comprobante NO deja el hueco en blanco: dice «nota». Un hueco
   no distingue entre «fue nota de venta» y «se perdió el dato». */
.sello-nota { font-size: 11.5px; color: var(--tinta-suave); }

/* ---- comprobantes ---- */

/* Tres cifras y no un tablero: lo único que hay que ver de un vistazo es si
   hay alguno que necesite atención. */
.cifras-comprobantes { display: flex; gap: 10px; margin-bottom: 12px; flex: 0 0 auto; }

.cifras-comprobantes .cifra {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
}

.cifras-comprobantes .cifra span { font-size: 11.5px; color: var(--tinta-suave); }
.cifras-comprobantes .cifra b { font-size: 21px; font-variant-numeric: tabular-nums; }
.cifras-comprobantes .cifra.bien b { color: var(--bien); }
.cifras-comprobantes .cifra.ojo b { color: var(--mal); }

/* Con cero pendientes no hay nada que mirar: se apaga en vez de gritar en
   rojo un número que está bien. */
.cifras-comprobantes .cifra.ojo b:not([data-hay]) { color: var(--tinta); }

#comprobantes .codigo .chico,
#comprobantes td .chico { display: block; font-size: 11px; color: var(--tinta-suave); }

a.editar { text-decoration: none; display: inline-block; }

/* Cliente y documento UNO DEBAJO DE OTRO.
   Se probaron en la misma fila para ganar alto, pero a 117 px un nombre como
   «CABEZUDO NAVARRO ...» sale cortado, y el nombre es justo lo que hay que
   poder leer antes de emitir. El alto se saca de otro sitio: del total, que
   estaba en 38 px cuando con 26 se lee igual desde la otra punta. */
.datos-cliente { display: block; }
.datos-cliente .campo-pos { min-width: 0; }

/* Un poco más apretado el vuelto: en 600 px de alto, con factura y vuelto a
   la vez, el panel quedaba a 8 px de salirse. */

/* Recibido y vuelto en la misma línea: son los dos números de la misma
   operación. Sin vuelto que dar, Recibido se queda la fila entera. */
.fila-efectivo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: end;
}

.fila-efectivo.con-vuelto { grid-template-columns: 1fr 1fr; }
.fila-efectivo .campo-pos { margin-bottom: 6px; min-width: 0; }

/* Alineado con el campo de al lado, no con el rótulo: los dos números tienen
   que caer a la misma altura o parece que uno se escurrió. */
.fila-efectivo .vuelto-pos { margin-bottom: 6px; min-width: 0; height: 34px; align-items: center; }

/* Crédito: el botón cambia de color además de texto. Dar mercadería fiada y
   cobrarla no son la misma acción y no deben verse igual. */
#vCondicion button.activo[data-condicion="CREDITO"] {
  border-color: #fcd34d; background: var(--aviso-suave); color: #92400e;
}

/* El saldo pendiente en rojo: es la cifra por la que se entra a esta pantalla. */
.debe { color: var(--mal); }
#creditos .cifras-comprobantes .cifra.ojo b { color: var(--mal); }
#creditos td .chico { display: block; font-size: 11px; color: var(--tinta-suave); }

/* ---- gastos ---- */
/* El desglose a la izquierda y la lista a la derecha: se entra a mirar el
   desglose, la lista es para comprobar un gasto concreto. */
.gastos-zonas { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
.gastos-zonas > * { min-width: 0; min-height: 0; }

.desglose-gastos { padding: 14px; overflow-y: auto; }
.desglose-gastos h2 { margin: 0 0 12px; font-size: 14px; }

.rubro { margin-bottom: 12px; }
.rubro-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.rubro-linea b { font-variant-numeric: tabular-nums; }
.rubro small { font-size: 11px; color: var(--tinta-suave); }

/* La barra se mide contra el mayor, no contra el total: así el segundo se
   distingue del tercero aunque los dos sean chicos al lado del primero. */
.rubro-barra { height: 6px; border-radius: 3px; background: var(--papel-hundido); margin: 4px 0 2px; overflow: hidden; }
.rubro-barra i { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

#gastos td .chico { display: block; font-size: 11px; color: var(--tinta-suave); }
#gastos .cifras-comprobantes .cifra.ojo b { color: var(--tinta); }

@media (max-width: 900px) {
  .gastos-zonas { grid-template-columns: minmax(0, 1fr); }
}

/* El desplegable y la casilla de los filtros, a la misma altura que las fechas
   y que el botón. Antes cada uno traía la suya y la franja quedaba escalonada. */
.cabecera-acciones select {
  height: 38px; padding: 0 8px;
  border: 1px solid var(--linea); border-radius: 8px;
  font: inherit; font-size: 12.5px;
  background: var(--papel); color: var(--tinta);
}

.cabecera-acciones { align-items: center; }
.cabecera-acciones .marcar { margin-right: 0; white-space: nowrap; }

/*
 * ⚠️ ANCHOS FIJOS DE VERDAD, NO SUGERENCIAS.
 *
 * Sin `table-layout: fixed`, el navegador ensancha la columna del contenido
 * más largo y empuja las demás fuera de la tarjeta. Con nombres cortos no se
 * notaba; en cuanto entraron los de verdad —«ACEITE DE BEBE ALOE VERA AND
 * VITAMIN E 354 ML PERFECT PURITY - UND», 66 caracteres— la tabla creció a
 * 923 px dentro de una tarjeta de 788 y los botones «Etiqueta» y «Editar»
 * quedaron recortados por el `overflow-x: hidden`. Invisibles, no borrados.
 *
 * Solo en las listas que declaran anchos de columna. El carrito NO lleva
 * `fixed`: no declara anchos, y el navegador se los repartiría por igual.
 */
#productos .lista table,
#comprobantes .lista table,
#creditos .lista table,
#gastos .lista table {
  table-layout: fixed;
  width: 100%;
}

/* Con el ancho ya fijo, el nombre largo baja de renglón en vez de empujar. */
#productos .nombre-producto span,
#comprobantes td,
#creditos td,
#gastos td { overflow-wrap: anywhere; }

/*
 * El rotulo VUELVE ENCIMA de los botones.
 *
 * Se probo a la izquierda para ganar alto, pero al quitar "Recibido" sobran
 * casi 60 px y ya no hace falta: encima, los dos selectores son dos bloques
 * iguales, del mismo ancho y la misma altura, y la columna se lee simetrica.
 */
.tipo-doc { flex-wrap: wrap; align-items: stretch; gap: 4px; margin-bottom: 8px; }

.tipo-doc-rotulo {
  flex: 0 0 100%;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  padding-right: 0;
}

.total-pos { padding: 6px 0 8px; margin-bottom: 10px; }
.total-cifra { font-size: 26px; }

.pagos-elegir { margin-bottom: 10px; }
.pagos-elegir button { padding-top: 8px; padding-bottom: 8px; }

/* ---- aviso flotante del sistema ---- */
/* Reemplaza al `alert()` de Chrome: se lee sin detener el trabajo y se va
   solo. Abajo a la derecha, lejos del carrito y del botón de cobrar. */
.aviso-flotante {
  position: fixed;
  right: 18px; bottom: 18px;
  max-width: 340px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
  z-index: 90;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  /* ⚠️ Solo opacidad y posición en la transición: nunca colores del tema, que
     se quedan pegados al alternar claro/oscuro. */
  transition: opacity 180ms ease, transform 180ms ease;
}

.aviso-flotante.visible { opacity: 1; transform: translateY(0); }
.aviso-flotante.bien { background: var(--bien); }
.aviso-flotante.mal { background: var(--mal); }

/* =====================================================================
   ENTRAR — EL TICKET
   =====================================================================
   El formulario es el artefacto que este sistema imprime todo el día: un
   ticket de 80 mm sobre el mostrador oscuro. No es decoración — dice de qué
   sistema se trata antes de leer una palabra.

   ⚠️ Sin fuentes web. La tienda está en Contamana con internet satelital;
   una tipografía descargada es medio segundo de texto invisible cada mañana.
   ===================================================================== */

.pantalla-entrar {
  --mostrador: #0b1220;
  min-height: 100vh;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: var(--mostrador);
  /* Una sola luz cenital, muy tenue: el papel tiene que parecer apoyado en
     algo, no flotando en negro. Nada de degradados de colores. */
  background-image: radial-gradient(120% 80% at 50% -10%, #172236 0%, var(--mostrador) 60%);
}

.pantalla-entrar .entrar {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; max-width: 340px;
}

/* ---- el papel ---- */
.ticket {
  position: relative;
  width: 100%;
  /* Sin esquinas redondeadas: el papel no las tiene. */
  border-radius: 0;
  background: #fff;
  padding: 30px 26px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: entra-ticket 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Los bordes dentados: semicírculos del fondo mordiendo el papel arriba y
   abajo. Es lo único llamativo de la pantalla, y por eso todo lo demás se
   mantiene callado. */
.ticket::before,
.ticket::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 10px;
  background-image: radial-gradient(circle at 7px 0, var(--mostrador) 6.5px, transparent 7px);
  background-size: 14px 10px;
  background-repeat: repeat-x;
}

.ticket::before { top: 0; }
.ticket::after { bottom: 0; transform: rotate(180deg); }

@keyframes entra-ticket {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

/* ---- cabecera ---- */
.ticket-cabecera { text-align: center; margin-bottom: 16px; }

.ticket-cabecera b {
  display: block;
  font-size: 19px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--tinta);
}

.ticket-cabecera span {
  display: block; margin-top: 3px;
  font-size: 11px; letter-spacing: 0.6px;
  color: var(--tinta-suave);
}

/* ---- los metadatos, como en un ticket de verdad ---- */
.ticket-datos {
  margin: 0 0 4px;
  padding: 10px 0;
  border-top: 1px dashed var(--linea-fuerte);
  border-bottom: 1px dashed var(--linea-fuerte);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
}

.ticket-datos > div { display: flex; justify-content: space-between; padding: 1px 0; }
.ticket-datos dt { margin: 0; text-transform: uppercase; letter-spacing: 0.8px; color: var(--tinta-suave); }
.ticket-datos dd { margin: 0; }

.ticket-corte { height: 14px; }

/* ---- campos ---- */
/* Altos y con el rótulo encima en mayúscula pequeña: se rellenan de pie y a
   veces con una mano ocupada. */
.campo-ticket { display: block; margin-bottom: 12px; }

.campo-ticket > span {
  display: block; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--tinta-suave);
}

.campo-ticket input {
  width: 100%; height: 46px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid var(--linea-fuerte);
  border-radius: 0;
  background: var(--papel-hundido);
  font: inherit; font-size: 16px;
  color: var(--tinta);
  transition: border-color 140ms ease, background 140ms ease;
}

.pantalla-entrar .campo-ticket input:focus {
  outline: 0;
  border-bottom-color: var(--acento);
  background: #fff;
  box-shadow: 0 2px 0 0 var(--acento);
}

.pantalla-entrar .aviso { margin: 2px 0 0; min-height: 17px; font-size: 12.5px; }

/* ---- el botón, donde iría el total ---- */
.ticket-boton {
  width: 100%; height: 48px; margin-top: 10px;
  border: 0; border-radius: 0;
  background: var(--acento);
  color: #fff;
  font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease;
}

.ticket-boton:hover { background: var(--acento-hondo); }
.ticket-boton:active { transform: translateY(1px); }
.ticket-boton:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.pantalla-entrar .nota-entrar {
  margin: 0; max-width: 300px; text-align: center;
  font-size: 12px; line-height: 1.5;
  color: #64748b;
}

/* Quien pidió menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .ticket { animation: none; }
}