/* ============================================================================
 * Autor: Marcelo Alejandro Zúñiga Reátegui
 * Proyecto: LILBRU
 * Módulo: pantalla «Vender y cobrar» (la segunda sobre la base nueva, la que toca dinero)
 * Fecha/Hora: 2026-10-07
 * Versión: 1.0.0
 * Aviso Legal: Código de propiedad exclusiva. Prohibida su reproducción o distribución sin autorización.
 * ============================================================================ */
/* Todo sale de las variables del tema: ningún color fijo. Todo lo que se toca
   mide 44 px o más. Las clases propias llevan el prefijo ven- (F-034). */

.ven-volver {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 6px;
  margin: -6px 0 6px -6px; border-radius: 8px; color: var(--marca); font-weight: 600; font-size: 15px;
}
.ven-volver:hover { background: var(--marca-claro); text-decoration: none; }
.ven-volver:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.ven-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 10px; }
.ven-campo-ancho { grid-column: 1 / -1; }
.ven-campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.ven-campo .suave { font-weight: 400; }
.ven-campo input, .ven-campo select, .ven-lineas input, .ven-pago input, .ven-pago select { min-height: 44px; width: 100%; box-sizing: border-box; font-weight: 400; }
.ven-campo select, .ven-pago select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ven-eco { min-height: 18px; font-size: 13px; font-weight: 400; color: var(--tinta-suave); }
.ven-eco.ven-mal { color: var(--ven-alerta); }
.ven-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ven-titulo-bloque { margin: 14px 0 6px; font-size: 17px; font-weight: 700; color: var(--tinta); }
.ven-titulo-bloque .suave { font-weight: 400; font-size: 13px; }
/* 22-oct, noche (Marcelo): DOS ZONAS y una paleta mínima. Cuatro colores y nada más, como variables que sirven en
   claro y en oscuro (cada una sale de un token del tema, que ya tiene su versión oscura):
     --ven-marca   el verde de LILBRU (el medio elegido, los bordes que guían);
     --ven-accion  SOLO el botón de cobrar;
     --ven-alerta  SOLO lo que bloquea o es error (la caja cerrada, una cantidad mal escrita);
     --ven-gris    lo deshabilitado (medios no habilitados, el botón mientras falta algo). */
:root {
  --ven-marca: var(--marca);
  --ven-sobre-marca: var(--sobre-marca);
  --ven-accion: var(--ok);
  --ven-sobre-accion: var(--tarjeta);
  --ven-alerta: var(--rojo);
  --ven-alerta-fondo: var(--rojo-fondo);
  --ven-gris: var(--gris-fondo);
  --ven-gris-texto: var(--tinta-suave);
}
.ven-quien { margin: 0 0 8px; }
.ven-zonas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ven-zona { margin: 0; }
.ven-zona-titulo { margin: 0 0 4px; }
.ven-subtitulo { margin: 16px 0 4px; font-size: 15px; font-weight: 700; color: var(--tinta); }
/* El cliente, pequeño y para quien lo quiera: una fila compacta (cliente | comprobante). */
.ven-cliente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); gap: 4px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.ven-cliente .ven-campo { font-size: 13px; }
.ven-cliente-nota { grid-column: 2; margin: 0; font-size: 13px; }
/* La zona del cobro: el total grande arriba; en la computadora acompaña al bajar. */
.ven-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 10px;
  background: var(--marca-claro); color: var(--tinta); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ven-total strong { font-size: 30px; line-height: 1.1; color: var(--tinta); }
@media (min-width: 1100px) {
  .ven-zonas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .ven-zona-cobro { position: sticky; top: 16px; }
}
/* La caja cerrada: una franja delgada arriba, con «Abrir la caja». */
.ven-franja { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 4px 6px 4px 14px;
  border-radius: 8px; background: var(--ven-alerta-fondo); color: var(--ven-alerta); border: 1px solid color-mix(in srgb, var(--ven-alerta) 40%, transparent); font-size: 14px; }
.ven-franja-texto { padding: 8px 0; }
.ven-franja-texto strong { margin-right: 2px; }
a.ven-franja-boton { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 8px 16px; font-size: 14px; }
.ven-franja-quien { padding: 8px 8px 8px 0; color: var(--tinta); }
button.ven-chico { min-height: 40px; padding: 6px 12px; font-size: 13px; }
button.ven-enlace { min-height: 32px; padding: 2px 4px; margin-top: 2px; background: transparent; color: var(--marca); box-shadow: none; filter: none; font-size: 13px; font-weight: 600; text-align: left; }
button.ven-enlace:hover { color: var(--tinta); box-shadow: none; filter: none; text-decoration: underline; }
button.ven-enlace[aria-expanded="true"] { color: var(--tinta); }
.ven-desc { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ven-desc input { max-width: 180px; text-align: left; }
.ven-desc .ven-motivo input { max-width: none; }
.ven-medios { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
button.ven-medio { min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--tarjeta); color: var(--tinta); font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--borde); filter: none; }
button.ven-medio:hover { filter: none; box-shadow: inset 0 0 0 2px var(--ven-marca); }
button.ven-medio:not(:disabled) { color: var(--ven-marca); box-shadow: inset 0 0 0 1px var(--ven-marca); }
button.ven-medio[aria-pressed="true"] { background: var(--ven-marca); color: var(--ven-sobre-marca); box-shadow: none; }
button.ven-medio.ven-medio-gris, button.ven-medio:disabled { background: var(--ven-gris); color: var(--ven-gris-texto); box-shadow: inset 0 0 0 1px var(--borde); cursor: not-allowed; }
button.ven-medio:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Buscadores (producto y cliente): lista propia, no datalist. */
.ven-buscador { position: relative; }
.ven-resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  max-height: 320px; overflow: auto;
}
.ven-resultados li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px;
  border-radius: 8px; cursor: pointer; font-size: 15px;
}
.ven-resultados li:hover, .ven-resultados li[aria-selected="true"] { background: var(--marca-claro); }
.ven-resultados li .ven-detalle { color: var(--tinta-suave); font-size: 13px; white-space: nowrap; text-align: right; }
.ven-resultados li.ven-vacio-item { color: var(--tinta-suave); cursor: default; }
.ven-elegido {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--marca-borde); background: var(--marca-claro); border-radius: 8px; font-weight: 400;
}
.ven-elegido button { min-height: 36px; padding: 6px 12px; }

/* Las líneas de la venta. */
.ven-tabla-envoltura { overflow-x: auto; margin-top: 12px; }
.ven-lineas { width: 100%; border-collapse: collapse; font-size: 14px; }
.ven-lineas th, .ven-lineas td { padding: 8px 8px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.ven-lineas th { color: var(--tinta-suave); font-weight: 600; font-size: 13px; white-space: nowrap; }
.ven-lineas td:first-child { min-width: 130px; }
.ven-lineas .ven-num { text-align: right; font-variant-numeric: tabular-nums; }
.ven-lineas input { min-width: 92px; max-width: 130px; text-align: right; }
/* Menos y más en la cantidad (44 px de toque). */
.ven-cantidad { display: inline-flex; align-items: center; gap: 4px; }
.ven-lineas .ven-cantidad input { min-width: 0; width: 52px; text-align: center; }
button.ven-paso-cant { width: 44px; min-height: 44px; padding: 0; border-radius: 8px; background: var(--tarjeta); color: var(--ven-marca); box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 22px; line-height: 1; filter: none; }
button.ven-paso-cant:hover { box-shadow: inset 0 0 0 2px var(--ven-marca); filter: none; }
button.ven-paso-cant:focus-visible { outline: 2px solid var(--ven-marca); outline-offset: 2px; }
.ven-lineas .ven-precio-lista { padding-top: 12px; white-space: nowrap; }
.ven-lineas .ven-precio-lista .ven-precio { display: block; }
.ven-lineas .ven-precio-lista .ven-abrir-desc { margin-left: auto; }
.ven-lineas .ven-en-stock { padding-top: 18px; white-space: nowrap; color: var(--tinta-suave); font-size: 13px; }
.ven-lineas .ven-en-stock.ven-mal { color: var(--ven-alerta); font-weight: 600; }
.ven-lineas .ven-cantidad + .ven-eco { display: block; text-align: center; }
.ven-lineas .ven-importe { padding-top: 18px; font-weight: 700; white-space: nowrap; }
.ven-lineas td.ven-col-producto { min-width: 130px; }
.ven-lineas td.ven-col-producto > span:first-child { display: block; font-weight: 600; }
.ven-lineas .ven-sku { display: block; color: var(--tinta-suave); font-size: 13px; }
.ven-lineas .ven-motivo { margin-top: 6px; }
.ven-lineas .ven-motivo input { max-width: none; text-align: left; min-width: 180px; }
.ven-quitar {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); cursor: pointer; font-size: 18px; line-height: 1;
}
.ven-quitar:hover { background: var(--marca-claro); }
.ven-quitar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ven-vacio { margin: 14px 0 0; padding: 14px; max-width: none; width: auto; border: 1px dashed var(--borde); border-radius: 8px; color: var(--tinta-suave); font-size: 14px; }

/* Los pagos: una fila por medio. */
.ven-pagos { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ven-pago {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px 10px; align-items: start;
  padding: 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo, transparent);
}
.ven-pago label.ven-oculto { position: absolute; }
.ven-pago label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.ven-pago label[hidden] { display: none; }
.ven-pago .ven-quitar { margin-top: 20px; width: 44px; justify-self: start; }   /* el botón de quitar no se estira a lo ancho de su columna */
.ven-pago-nota { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-suave); margin: 0; }
.ven-pago-nota.ven-mal { color: var(--ven-alerta); }
.ven-pagos-acciones { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ven-pagos-acciones .secundario { min-height: 44px; }

.ven-cuenta { margin-top: 12px; padding: 4px 2px; }
.ven-cuenta-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
/* El único botón fuerte: a todo el ancho de la zona del cobro, con el color de acción; desactivado en gris mientras falte
   algo, y dice qué. */
.ven-zona-cobro .ven-acciones { flex-direction: column; align-items: stretch; gap: 8px; }
.ven-zona-cobro .ven-razon { text-align: left; max-width: none; }
#btn-cobrar { width: 100%; min-height: 56px; font-size: 20px; font-weight: 700; background: var(--ven-accion); color: var(--ven-sobre-accion); }
#btn-cobrar:disabled { background: var(--ven-gris); color: var(--ven-gris-texto); box-shadow: inset 0 0 0 1px var(--borde); cursor: not-allowed; filter: none; }
.ven-cuenta-destacada { font-size: 17px; border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 8px; }
.ven-cuenta .ven-eco { margin-top: 8px; }

.ven-deber { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--marca-claro); color: var(--tinta); font-size: 14px; line-height: 1.45; cursor: pointer; }
.ven-deber input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }

.ven-sin-stock { margin-top: 18px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--ven-alerta); background: var(--ven-alerta-fondo); }
.ven-sin-stock .ven-titulo-bloque { margin-top: 0; color: var(--ven-alerta); }
.ven-sin-stock-texto { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--tinta); }
.ven-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ven-camino { padding: 14px; border-radius: 10px; background: var(--tarjeta); border: 1px solid var(--borde); }
.ven-camino h4 { margin: 0 0 6px; font-size: 15px; color: var(--tinta); }
.ven-camino p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--tinta-suave); }
.ven-enlace-destacado {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 8px;
  background: var(--marca); color: var(--sobre-marca); font-weight: 700; text-decoration: none;
}
.ven-enlace-destacado:hover { filter: brightness(1.08); text-decoration: none; }
.ven-enlace-destacado:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.ven-aut-productos { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.ven-aut-productos label { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; cursor: pointer; }
.ven-aut-productos input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
.ven-aut-productos select, .ven-aut-productos input[type="text"] { min-height: 44px; }
.ven-conf-fila { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); }

.ven-acciones { display: flex; justify-content: flex-end; margin-top: 18px; }
.ven-principal { min-height: 48px; min-width: 200px; padding: 10px 22px; font-size: 17px; }
.ven-principal:focus-visible, .secundario:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.ven-lista-empresas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ven-lista-empresas button { min-height: 48px; text-align: left; font-size: 15px; }

/* El comprobante interno. */
.ven-comprobante { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ven-comprobante-cabecera { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; font-size: 14px; }
.ven-comprobante-cabecera > div { display: flex; flex-direction: column; gap: 2px; }
.ven-comprobante-cabecera strong { font-size: 18px; }
.ven-comprobante-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.ven-comprobante-tabla th, .ven-comprobante-tabla td { padding: 8px 8px; border-bottom: 1px solid var(--borde); text-align: left; }
.ven-comprobante-tabla thead th { color: var(--tinta-suave); font-weight: 600; font-size: 13px; }
.ven-comprobante-tabla tfoot th { font-size: 16px; }
.ven-comprobante-tabla .ven-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ven-saldo { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--marca-claro); color: var(--tinta); font-size: 14px; }

.ven-tabla-stock { width: 100%; border-collapse: collapse; font-size: 14px; }
.ven-tabla-stock th, .ven-tabla-stock td { padding: 10px 10px; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.ven-tabla-stock th { color: var(--tinta-suave); font-weight: 600; font-size: 13px; }
.ven-tabla-stock .ven-num { text-align: right; font-variant-numeric: tabular-nums; }
.ven-tabla-stock td:first-child { white-space: normal; min-width: 160px; }
.ven-tabla-stock tr.ven-recien td { background: var(--marca-claro); }

@media (max-width: 760px) {
  .ven-rejilla { grid-template-columns: 1fr; }
  .ven-caminos { grid-template-columns: 1fr; }
  .ven-cliente { grid-template-columns: 1fr; }
  .ven-cliente-nota { grid-column: 1; }
  .ven-pago { grid-template-columns: 1fr 1fr; }
  .ven-pago .ven-quitar { margin-top: 0; justify-self: end; }
  .ven-acciones { justify-content: stretch; }
  .ven-principal { width: 100%; }
  .ven-lineas th:nth-child(3), .ven-lineas td:nth-child(3), .ven-lineas th:nth-child(4), .ven-lineas td:nth-child(4) { display: none; }
  /* En el celular cada línea del carrito va en dos renglones: el producto y quitar arriba; la cantidad (menos y más) y el
     importe abajo. Sin cabecera de columnas: cada dato se entiende en su lugar. */
  .ven-lineas thead { display: none; }
  .ven-lineas tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'prod quitar' 'cant imp';
    gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .ven-lineas tbody td { padding: 0; border: 0; }
  .ven-lineas tbody td:nth-child(1) { grid-area: prod; min-width: 0; }
  .ven-lineas tbody td:nth-child(2) { grid-area: cant; text-align: left; }
  .ven-lineas tbody td:nth-child(5) { grid-area: imp; align-self: center; padding: 0; font-size: 17px; }
  .ven-lineas tbody td:nth-child(6) { grid-area: quitar; }
  .ven-lineas .ven-cantidad + .ven-eco { text-align: left; padding-left: 52px; }
  .ven-lineas .ven-sku-lista { display: block; }
  /* En el celular el resultado va en dos renglones: nombre arriba, SKU, precio y stock abajo (sin desbordar). */
  .ven-resultados li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ven-resultados li .ven-detalle { white-space: normal; text-align: left; }
}

/* T2, parte C (A-05): por qué «Cobrar y entregar» está desactivado, junto al botón. */
.ven-acciones { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ven-razon { margin: 0; font-size: 14px; color: var(--tinta-suave); max-width: 46ch; text-align: right; }
.ven-razon[hidden] { display: none; }
@media (max-width: 640px) { .ven-razon { text-align: left; max-width: none; } }