/* ============================================================
   PANASUITE — Pantalla de caja y tickets
   Complementa app.css (design system general). No repetir tokens
   aquí: reutilizar var(--primary), var(--radius-md), etc.
   ============================================================ */

/* ── Logo de marca (login) ─────────────────────────────────── */
.auth-logo-img {
    display: block;
    width: 480px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
}

/* ── Navbar de la pantalla de caja (modo pantalla completa) ──── */
.pos-caja-navbar {
    height: var(--navbar-height);
}

/* ── Layout pantalla de caja: minimalista, pensado para touchscreen ──
   Área táctil mínima de 48px (estándar de accesibilidad móvil/touch) en
   todo elemento interactivo. Feedback con :active (toque), no solo :hover
   (que no existe en pantallas táctiles). Tipografía más grande, menos
   densidad, alto contraste. */
.pos-screen {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: .75rem;
    height: calc(100vh - var(--navbar-height));
    padding: .75rem;
    overflow: hidden;
}

/* Columna izquierda (buscador + botonera + lista de la venta). Sin
   min-height:0 un hijo flex dentro de una celda grid NO respeta el límite de
   altura del padre y crece con su contenido en vez de scrollear — por eso
   antes .pos-lineas no scrolleaba: su padre (este wrapper) se expandía sin
   límite cada vez que se agregaba un producto, en vez de quedar acotado a la
   altura real de la pantalla. */
.pos-col-productos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.pos-buscador {
    display: flex;
    gap: .5rem;
    padding: .5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pos-buscador input {
    font-size: 1.15rem;
    padding: .9rem 1rem;
    min-height: 52px;
    border-radius: var(--radius-md);
}

.pos-buscador .btn {
    min-height: 52px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-size: .95rem;
}

/* ── Grid de líneas de venta ──────────────────────────────────── */
.pos-lineas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pos-linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px minmax(80px, auto) minmax(90px, auto) 140px;
    gap: .5rem;
    align-items: center;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
}

.pos-linea:last-child { border-bottom: none; }
.pos-linea .btn { min-width: 44px; min-height: 44px; padding: 0 .5rem; }
.pos-linea > div:first-child { min-width: 0; overflow-wrap: break-word; }
.pos-linea .d-flex.gap-1 { flex-wrap: nowrap; justify-content: flex-end; }

/* Stepper de cantidad: sin teclado, solo tocar +/- */
.pos-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.pos-stepper .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.pos-stepper span {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
}

/* ── Botones rápidos de departamento / ítem frecuente ─────────── */
.pos-botones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem;
    padding: .75rem;
}

.pos-boton-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .6rem .4rem;
    height: 96px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    transition: transform .1s ease, background-color .1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.pos-boton-item:active {
    background: var(--primary-light);
    transform: scale(.96);
}

/* ── Panel de totales (columna derecha, fijo) ─────────────────── */
.pos-totales {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.25rem;
    gap: .6rem;
}

.pos-totales-fila {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--text-secondary);
}

.pos-totales-fila.total {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}

.pos-totales .btn {
    min-height: 56px;
    font-size: 1.1rem;
}

.pos-fkeys {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-top: .5rem;
}

/* ── Botonera de departamentos / productos frecuentes ─────────── */
.pos-botonera {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.pos-boton-dep {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.pos-boton-dep.active {
    border-color: var(--primary, #2563eb);
    background: var(--primary, #2563eb);
    color: #fff;
}
.pos-botonera-wrap {
    position: relative;
    flex: 0 1 auto;
}
.pos-botonera-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: .5rem;
    max-height: 34vh;
    overflow-y: auto;
    padding-bottom: .25rem;
    scroll-behavior: smooth;
}
.pos-botonera-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22px;
    background: linear-gradient(to bottom, transparent, var(--surface-2, #f8fafc));
    pointer-events: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.pos-boton-item {
    min-height: 128px;
    padding: .6rem .45rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: .35rem;
}
.pos-boton-item:active {
    border-color: var(--primary, #2563eb);
    background: #eff6ff;
}
.pos-boton-item-nombre {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2);
    flex-shrink: 0;
}
.pos-boton-item-precio { font-size: .78rem; font-weight: 700; color: var(--primary, #2563eb); margin-top: auto; }

.pos-boton-item-img {
    width: 44px;
    height: 44px;
    min-height: 44px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-2, #f1f5f9);
    flex-shrink: 0;
}
.pos-boton-item-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 1.1rem;
}

.pos-resultado-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-2, #f1f5f9);
    flex-shrink: 0;
}
.pos-resultado-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 1rem;
}

.pos-fkeys .btn { min-height: 48px; font-size: .85rem; }

/* ── Modal de cobro: teclado numérico rápido ──────────────────── */
.pos-teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}
.pos-teclado .btn { font-size: 1.3rem; min-height: 56px; }

.pos-formas-pago-grid {
    /* Cuadrícula minimalista tipo touchscreen: todos los métodos de pago
       visibles a la vez, sin scroll, cuadros del mismo tamaño. Se ajusta
       automáticamente al número de formas de pago configuradas. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .5rem;
}
.pos-forma-pago {
    padding: .7rem .5rem;
    min-height: 64px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #e9ebef;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-align: center;
    font-weight: 700;
    font-size: .78rem;
    color: var(--text-primary);
    transition: transform .1s ease, background-color .1s ease, border-color .1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.pos-forma-pago span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.pos-forma-pago i { font-size: 1.15rem; color: var(--primary-dark); flex-shrink: 0; }
.pos-forma-pago:active { transform: scale(.97); }
.pos-forma-pago.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}
.pos-forma-pago.selected i { color: var(--primary-dark); }

/* ── Ticket imprimible (fallback window.print / vista HTML) ───── */
.ticket {
    width: 80mm;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    padding: 4mm;
}
.ticket.ancho-32 { width: 58mm; font-size: 10px; }
.ticket .ticket-center { text-align: center; }
.ticket .ticket-linea { display: flex; justify-content: space-between; }
.ticket hr { border: none; border-top: 1px dashed #000; margin: 4px 0; }
/* QRCode.js inyecta un <canvas>/<img> display:block dentro de #ticketQr —
   text-align:center del padre no alcanza a centrar un bloque, así que se
   fuerza aquí explícitamente (exigido por la DGI: QR centrado al pie). */
#ticketQr { display: flex; justify-content: center; }

@media print {
    body * { visibility: hidden; }
    .ticket, .ticket * { visibility: visible; }
    .ticket { position: absolute; top: 0; left: 0; width: 80mm; }
}

/* ── Estados de turno de caja ──────────────────────────────────── */
.turno-abierto  { background: #d1fae5; color: #065f46; }
.turno-cerrado  { background: #f1f5f9; color: #64748b; }

/* ── Modal de cobro: rediseño en dos columnas ─────────────────── */
.pos-cobro-content {
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
}

.pos-cobro-header {
    background: linear-gradient(135deg, var(--primary, #2563eb), var(--primary-dark, #1d4ed8));
    color: #fff;
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}
.pos-cobro-header .modal-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.15rem;
}
.pos-cobro-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .85;
}

.pos-cobro-body {
    padding: 1.5rem;
    /* Un poco más oscuro que --page-bg general para que las cards (blancas)
       resalten con más contraste dentro de este modal a pantalla completa. */
    background: #e3e7ee;
}

.pos-cobro-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #64748b);
}

/* Forma de pago crédito bloqueada (cliente sin crédito habilitado) */
.pos-forma-pago.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Modal de cobro fullscreen: header fijo, altura total = 100vh. Cada
   columna (izq/der) scrollea de forma independiente si su contenido no cabe
   (ver .pos-cobro-col-izq/der) — así en pantallas bajas (1366x768 y
   similares) nunca se recorta ni el botón "Aceptar pago" ni el teclado
   numérico: en el peor caso, el cajero hace un scroll corto dentro de esa
   columna en vez de perder el elemento de vista por completo. ────────── */
.pos-cobro-content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
}
.pos-cobro-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Adaptación 1366x768 y resoluciones HD similares (portátiles/POS
   compactos) — textos, botones y espaciados más compactos para que la
   mayor parte del contenido quepa sin necesitar scroll; lo que aun así no
   quepa scrollea dentro de su propia columna (nunca se recorta ni queda
   inalcanzable, ver .pos-lineas y .pos-cobro-col-der). ─────────────────── */
@media (max-width: 1400px), (max-height: 800px) {
    .pos-screen {
        grid-template-columns: 1fr 320px;
        gap: .6rem;
        padding: .6rem;
    }

    .pos-buscador input { min-height: 46px; padding: .7rem .9rem; font-size: 1.05rem; }
    .pos-buscador .btn { min-height: 46px; }

    .pos-botonera-items { max-height: 26vh; }
    .pos-boton-item { min-height: 104px; }

    .pos-totales { padding: 1rem; gap: .45rem; }
    .pos-totales-fila.total { font-size: 1.6rem; }
    .pos-totales .btn { min-height: 48px; font-size: 1rem; }
    .pos-fkeys .btn { min-height: 42px; font-size: .8rem; }

    .pos-linea { padding: .5rem .7rem; font-size: .85rem; }
    .pos-linea .btn { min-width: 38px; min-height: 38px; }

    .pos-formas-pago-grid { gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .pos-forma-pago { padding: .5rem .4rem; min-height: 52px; font-size: .74rem; }

    /* Modal de Cobro: en 1366x768 el header + padding del grid ya consumen
       una parte importante del alto disponible — se achican teclado, monto
       y formas de pago para que quepan sin recortarse; si aun así no
       alcanza, la columna scrollea sola (ver .pos-cobro-col-der) en vez de
       ocultar el botón "Aceptar pago" o el teclado. */
    .pos-cobro-grid { gap: 1rem; padding: 1rem; }
    .pos-cobro-header { padding: .6rem 1rem; }
    .pos-cobro-resumen-card { padding: .6rem; }
    .pos-cobro-campo { padding: .45rem .7rem; }
    .pos-cobro-monto-fila { padding: .45rem .7rem; }
    .pos-cobro-monto-display { font-size: 1.05rem; }
    .pos-cobro-detalle-tabla { font-size: .75rem; }
    .pos-cobro-detalle-tabla thead th, .pos-cobro-detalle-tabla tbody td, .pos-cobro-detalle-tabla tfoot td { padding: .3rem .5rem; }
    .pos-cobro-btn-aceptar { min-height: 42px; font-size: .9rem; }
    .pos-cobro-acciones-fila { gap: .4rem; }
    .pos-cobro-accion-btn { padding: .5rem; font-size: .78rem; }
    .pos-cobro-col-izq, .pos-cobro-col-der { gap: .5rem; }
}

/* ============================================================
   Modal de cobro — rediseño "Total de venta" pantalla completa
   Header degradado marca + calculadora + tabla de detalle.
   ============================================================ */
.pos-cobro-header {
    background: linear-gradient(135deg, #060e2e 0%, #0d1f6b 35%, #142a8c 65%, #0a1650 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.5rem;
}
.pos-cobro-header-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.pos-cobro-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pos-cobro-header-menu {
    color: rgba(255,255,255,.85);
    font-size: 1.3rem;
    cursor: pointer;
}
.pos-cobro-header-logo {
    height: 30px;
    width: auto;
}
.pos-cobro-header-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: .02em;
}
.pos-cobro-header-btn {
    color: rgba(255,255,255,.85);
    font-size: 1.1rem;
    cursor: pointer;
}
.pos-cobro-header-close {
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background-color var(--transition);
}
.pos-cobro-header-close:hover { background: rgba(255,255,255,.22); }

.pos-cobro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 1.75rem;
    max-width: 1360px;
    height: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}
.pos-cobro-col-izq, .pos-cobro-col-der {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 0;
    overflow: hidden;
}
/* La columna izquierda NO scrollea completa: las cards de "Método de pago" y
   "Datos del cliente y la factura" mantienen su tamaño natural, y solo la
   card de "Detalle de pago" crece/scrollea si la lista de pagos no cabe —
   ver .pos-cobro-card#tablaPagosResumenWrap y su tbody interno más abajo. */
.pos-cobro-campos-scroll {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.pos-cobro-campos-scroll > .pos-cobro-card { flex-shrink: 0; }
.pos-cobro-campos-scroll > #tablaPagosResumenWrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-cobro-campos-scroll > #tablaPagosResumenWrap .pos-cobro-detalle {
    flex: 1 1 auto;
    min-height: 0;
}

/* Totalizador tipo "lista" (Subtotal/Descuento/ITBMS/Total apilados, valor
   alineado a la derecha) — reemplaza las tarjetas circulares anteriores.
   Vive arriba de Método de pago en la columna derecha del modal de cobro. */
.pos-cobro-totalizador {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    margin-bottom: .5rem;
}
.pos-cobro-totalizador-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem 0;
    gap: .75rem;
}
.pos-cobro-totalizador-label {
    font-size: .85rem;
    color: var(--text-secondary);
}
.pos-cobro-totalizador-valor {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* El modal de cobro es fullscreen y siempre está abierto cuando se lanzan
   los modales de "Cambiar precio" y "Descuento global" desde su interior.
   Bootstrap asigna el mismo z-index (1055) a todos los .modal, así que sin
   esto el que aparece más tarde en el DOM (cobro) tapa a los que se abren
   después — se sube el z-index de estos dos por encima del de cobro. */
#modalCambiarPrecio, #modalDescuentoGlobal { z-index: 1075; }
body:has(#modalCambiarPrecio.show, #modalDescuentoGlobal.show) .modal-backdrop:last-of-type { z-index: 1070; }

/* Descuento global de la factura: la fila completa es un botón que abre un
   modal con teclado numérico (mismo patrón táctil que "Cambiar precio" y el
   cobro), en vez de un campo de texto diminuto difícil de tocar. */
.pos-cobro-totalizador-desc {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color .1s ease;
}
.pos-cobro-totalizador-desc:hover,
.pos-cobro-totalizador-desc:active { background: var(--primary-light); }
.pos-cobro-desc-pct-badge {
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.pos-cobro-totalizador-valor-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.pos-cobro-desc-pct-icon {
    font-size: .7rem;
    color: var(--text-muted);
}

/* Pantalla del modal de descuento global: mismo estilo grande y centrado
   que el monto en balboa del modal de cobro. */
.pos-descglobal-display {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    padding: .5rem 0 1rem;
    cursor: pointer;
}
/* Teclado del descuento global: solo dígitos, sin Enter/C/Borrar — el modal
   se confirma o cancela con los botones del footer, así queda más compacto
   y menos cargado que el teclado completo del cobro. */
.pos-teclado-descglobal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}
.pos-descglobal-signo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-left: .25rem;
}

/* Total: fila destacada, separada por una línea, mismo patrón visual que el
   panel de totales de la pantalla de venta (ver .pos-totales-fila.total). */
.pos-cobro-totalizador-total {
    margin-top: .3rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.pos-cobro-totalizador-total .pos-cobro-totalizador-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.pos-cobro-totalizador-total .pos-cobro-totalizador-valor {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Saldo: ámbar mientras falte cobrar, verde en cuanto llega a 0. */
.pos-resumen-saldo .pos-cobro-totalizador-valor { color: var(--warning); }
.pos-resumen-saldo.pos-resumen-saldo-completo .pos-cobro-totalizador-valor { color: var(--success); }

/* Cambio: gris mientras es 0.00 (no hay vuelto); verde llamativo cuando sí hay. */
.pos-resumen-cambio .pos-cobro-totalizador-valor { color: var(--text-muted); }
.pos-resumen-cambio.pos-resumen-cambio-activo .pos-cobro-totalizador-valor { color: var(--success); }

@media (max-width: 1400px), (max-height: 800px) {
    .pos-cobro-totalizador { padding: .75rem 1rem; }
    .pos-cobro-totalizador-fila { padding: .3rem 0; }
    .pos-cobro-totalizador-total .pos-cobro-totalizador-valor { font-size: 1.2rem; }
}

/* Cards que agrupan cada sección de la columna izquierda (Método de pago /
   Datos del cliente y la factura / Detalle de pago) — separa visualmente
   los bloques sobre el fondo gris del modal. */
.pos-cobro-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    flex-shrink: 0;
}
.pos-cobro-card-titulo {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #64748b);
    margin-bottom: .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.pos-cobro-card .pos-cobro-campo {
    background: #f8f9fb;
}
.pos-cobro-card .pos-cobro-campos-fila2:last-child .pos-cobro-campo,
.pos-cobro-card > .pos-cobro-campo:last-child { margin-bottom: 0; }

/* Pares de campos lado a lado para aprovechar el espacio horizontal
   (Fecha emisión/vencimiento, Nombre/R.U.C.) en vez de apilarlos. */
.pos-cobro-campos-fila2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.pos-cobro-campo {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .85rem 1.1rem;
    flex-shrink: 0;
}
.pos-cobro-campo-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: #e9ebef;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.pos-cobro-campo-fila {
    /* Label pequeño arriba, valor debajo — evita que fechas/nombres largos
       compitan por espacio horizontal con el label y se desborden del card
       (ver .pos-cobro-campos-fila2, que ya es angosta de por sí). */
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.pos-cobro-campo-fila .pos-cobro-label {
    font-size: .68rem;
    flex-shrink: 0;
}
.pos-cobro-campo-chevron {
    color: var(--text-muted);
    font-size: .85rem;
}
.pos-cobro-campo-valor {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.pos-cobro-input-inline {
    border: none;
    outline: none;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-primary);
    width: 70px;
    background: transparent;
    text-align: left;
    padding: 0;
}

.pos-cobro-acciones-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: .3rem;
    flex-shrink: 0;
}
.pos-cobro-accion-btn {
    background: #e9ebef;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background-color var(--transition);
}
.pos-cobro-accion-btn:hover { background: var(--primary-light); }
.pos-cobro-accion-btn-activo {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.pos-cobro-btn-aceptar {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    min-height: 56px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: auto;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(29,78,216,.25);
    transition: background-color var(--transition), transform var(--transition);
}
.pos-cobro-btn-aceptar:hover { background: var(--primary); }
.pos-cobro-btn-aceptar:active { transform: translateY(1px); }

/* Estado de carga: usado en Cobrar / Aceptar pago mientras la petición está
   en vuelo, para desalentar visualmente un segundo clic. */
.pos-btn-cargando, #btnCobrar:disabled {
    opacity: .7;
    cursor: not-allowed;
    pointer-events: none;
}

.pos-cobro-monto-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e9ebef;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    flex-shrink: 0;
    margin-top: .25rem;
}
.pos-cobro-monto-display {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.pos-teclado-cobro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: .6rem;
    flex-shrink: 0;
    /* Posición fija en la columna (ver HTML): nunca se reordena ni se
       comprime — el detalle de pagos, debajo, es el único que scrollea. */
    min-height: 210px;
}
.pos-tecla {
    background: #0d1f4d;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    min-height: 56px;
    font-size: 1.2rem;
    font-weight: 700;
    transition: background-color var(--transition);
}
.pos-tecla:hover { background: #142a6e; }

/* Reafirma el ajuste compacto de 1366x768: va DESPUÉS de las reglas base de
   .pos-teclado-cobro/.pos-tecla para ganar la cascada (misma especificidad,
   pero definido más tarde en el archivo). */
@media (max-width: 1400px), (max-height: 800px) {
    .pos-teclado-cobro { gap: .35rem; min-height: 160px; }
    .pos-tecla { min-height: 34px; font-size: .95rem; }
    .pos-cobro-btn-aceptar { min-height: 42px; font-size: .9rem; }
}
.pos-tecla-clara {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.pos-tecla-clara:hover { background: #e2e8f0; }
.pos-tecla-enter {
    grid-row: span 2;
    background: var(--primary-dark);
}
.pos-tecla-enter:hover { background: var(--primary); }

/* Teclado en pantalla (QWERTY táctil) para campos de texto — ej. Observaciones de la venta. */
.pos-teclado-virtual {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.pos-teclado-virtual-fila {
    display: flex;
    gap: .3rem;
}
.pos-teclado-virtual-tecla {
    flex: 1;
    background: #0d1f4d;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    min-height: 42px;
    font-size: .95rem;
    font-weight: 600;
    transition: background-color var(--transition);
}
.pos-teclado-virtual-tecla:hover { background: #142a6e; }
.pos-teclado-virtual-tecla.tecla-ancha { flex: 2; }
.pos-teclado-virtual-tecla.tecla-espacio { flex: 6; }
.pos-teclado-virtual-tecla.tecla-especial {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.pos-teclado-virtual-tecla.tecla-especial:hover { background: #e2e8f0; }

.pos-cobro-detalle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Va DESPUÉS del teclado, que tiene flex-shrink:0 y nunca se mueve.
       Esta caja ocupa el resto del espacio de la columna (flex:1) y su
       propio tbody hace scroll interno (ver .pos-cobro-detalle-tabla
       tbody) — así el renglón "Total" (tfoot, flex-shrink:0) queda
       siempre pegado al fondo de la ventana, visible sin scrollear. */
    flex: 1 1 auto;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-cobro-detalle-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.pos-cobro-detalle-tabla thead,
.pos-cobro-detalle-tabla tbody,
.pos-cobro-detalle-tabla tfoot,
.pos-cobro-detalle-tabla tr { display: table; width: 100%; table-layout: fixed; }
.pos-cobro-detalle-tabla thead { flex-shrink: 0; }
.pos-cobro-detalle-tabla tbody { flex: 1; min-height: 0; overflow-y: auto; display: block; }
.pos-cobro-detalle-tabla tbody tr { display: table; }
.pos-cobro-detalle-tabla tfoot { flex-shrink: 0; }
.pos-cobro-detalle-tabla thead th {
    text-align: left;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--text-secondary);
    background: #e9ebef;
    padding: .7rem 1rem;
    font-weight: 700;
}
.pos-cobro-detalle-tabla thead th:not(:first-child),
.pos-cobro-detalle-tabla tbody td:not(:first-child),
.pos-cobro-detalle-tabla tfoot td:not(:first-child) { text-align: left; }
.pos-cobro-detalle-tabla tbody td {
    padding: .6rem 1rem;
    border-top: 1px solid var(--border);
}
.pos-cobro-detalle-total td {
    padding: .7rem 1rem;
    border-top: 2px solid var(--border);
    font-weight: 800;
    color: var(--primary-dark);
    background: #e9ebef;
}

/* ============================================================
   Modal "Seleccionar cliente" — mismo lenguaje visual que el
   modal de cobro (header degradado, tarjetas, gris de contraste).
   ============================================================ */
.pos-cliente-content {
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.pos-cliente-header {
    background: linear-gradient(135deg, #060e2e 0%, #0d1f6b 35%, #142a8c 65%, #0a1650 100%);
    border-bottom: none;
    padding: .75rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pos-cliente-header .modal-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin: 0;
}
.pos-cliente-header .pos-cobro-header-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}
.pos-cliente-body {
    padding: 1.25rem;
    background: var(--surface-2);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pos-cliente-buscador {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .1rem .9rem;
    flex-shrink: 0;
}
.pos-cliente-buscador i { color: var(--text-muted); font-size: 1rem; }
.pos-cliente-input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: .75rem 0;
    font-size: .92rem;
    color: var(--text-primary);
}

.pos-cliente-lista {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow-y: auto;
    min-height: 0;
}

.pos-cliente-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .8rem .95rem;
    text-align: left;
    transition: background-color var(--transition), border-color var(--transition);
    flex-shrink: 0;
}
.pos-cliente-item:hover { background: #e9ebef; border-color: var(--primary); }
.pos-cliente-item-contado { flex-shrink: 0; }

.pos-cliente-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.pos-cliente-avatar-contado {
    background: #e9ebef;
    color: var(--text-secondary);
    font-size: 1.15rem;
}
.pos-cliente-item-nuevo { flex-shrink: 0; }
.pos-cliente-avatar-nuevo {
    background: var(--success-light, #d1fae5);
    color: var(--success, #059669);
    font-size: 1.15rem;
}

.pos-cliente-nombre {
    font-weight: 700;
    font-size: .92rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-cliente-detalle {
    font-size: .78rem;
    color: var(--text-secondary);
    margin-top: .15rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.pos-cliente-badge-credito {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
}
.pos-cliente-chevron {
    color: var(--text-muted);
    font-size: .85rem;
    flex-shrink: 0;
}

.pos-cliente-vacio {
    text-align: center;
    color: var(--text-muted);
    font-size: .88rem;
    padding: 1.5rem 1rem;
}