/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Punto de venta (mostrador).

   Dos paneles que llenan la ventana y no la hacen crecer: el cajero no debería tener que
   desplazar la página para ver el total. Lo que se desplaza es cada panel por dentro.

   ⚠ Los 164 px de la resta son los MEDIDOS del layout, los mismos que usa `.kanban-app` en
     `personalizados.css`: 70 de barra superior + 24 del `mt-3` + 46 del pie + 24 de aire. La
     cuenta va sobre la FILA y no sobre cada tarjeta —cada una tiene su cabecera y son distintas—,
     y de ahí para adentro reparte el flex.

   ⚠ `dvh` además de `vh`: en el teléfono `100vh` mide como si la barra del navegador no
     estuviera, así que el pie del carrito —donde vive el botón de cobrar— quedaba debajo del
     borde. Ver la memoria `movil_100vh_no_es_lo_que_se_ve`.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ La barra del selector se RESTA además de los 164 px del layout. Es la regla de siempre: si la
   pantalla calcula su alto contra la ventana, todo lo que se le ponga encima hay que sumarlo a la
   resta o aparece una barra de desplazamiento que antes no estaba. Medido: la barra ocupa 38 px
   más 8 de separación. */
.pos-barra { margin-bottom: 8px; }

.pos-app {
    height: calc(100vh - 164px - 46px);
    height: calc(100dvh - 164px - 46px);
    min-height: 520px;
}

.pos-col {
    /* ⚠ `min-height: 0` en el ítem flex/grid: sin esto el hijo se niega a encogerse por debajo de
       su contenido y el scroll interno NO aparece nunca. */
    min-height: 0;
    height: 100%;
}

.pos-app .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* El único que se desplaza. */
.pos-scroll {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

/* ── La cuadrícula ────────────────────────────────────────────────────────────────────────────
   `auto-fill` con un mínimo: las tarjetas se acomodan solas al ancho que haya, sin puntos de
   corte escritos a mano. 150 px es el mínimo en el que la foto todavía se reconoce de lejos. */
.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

/* ⚠ La tarjeta ENTERA es el área tocable, no un botón adentro: en mostrador se toca con el dedo
   y de refilón. El mínimo recomendado para un dedo son 44 px; acá la zona pasa de 200. */
.pos-item {
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius, .375rem);
    background: var(--ins-secondary-bg, #fff);
    padding: .5rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.pos-item:hover { border-color: var(--ins-primary); }

/* Respuesta al toque: en una pantalla táctil no hay `:hover` que confirme que el dedo acertó. */
.pos-item:active { transform: scale(.97); }

.pos-item:focus-visible {
    outline: 2px solid var(--ins-primary);
    outline-offset: 2px;
}

.pos-item-foto {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ins-border-radius, .375rem);
    overflow: hidden;
    background: var(--ins-tertiary-bg, #f4f4f4);
    margin-bottom: .5rem;
}

.pos-item-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* La existencia, sobre la foto y arriba a la izquierda, como en los POS que Mario mostró. */
.pos-item-stock {
    position: absolute;
    top: .35rem;
    left: .35rem;
    font-size: .7rem;
}

.pos-item-nombre {
    font-size: .8rem;
    line-height: 1.25;
    /* Dos líneas y corta: los nombres del catálogo llegan a 60 caracteres y una tarjeta que crece
       rompe la retícula. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .15rem;
}

.pos-item-precio { font-weight: 600; font-size: .9rem; }

/* Sin existencias: se ve, pero no se toca. Se apaga con `pointer-events` además del color, para
   que el toque no agregue algo que la emisión va a rechazar. */
.pos-item.sin-stock { opacity: .45; pointer-events: none; }

/* ── El carrito ─────────────────────────────────────────────────────────────────────────────── */

.pos-linea {
    display: flex;
    gap: .5rem;
    /* Al top: la foto acompaña al nombre, no al bloque de botones que va debajo. */
    align-items: flex-start;
    padding: .5rem;
    border-bottom: 1px solid var(--ins-border-color);
}

.pos-linea:last-child { border-bottom: 0; }

.pos-linea-foto {
    width: 40px;
    height: 40px;
    border-radius: .25rem;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--ins-tertiary-bg, #f4f4f4);
}

/* ⚠ `min-width: 0` para que el nombre largo pueda encogerse: sin esto empuja los botones de
   cantidad fuera de la tarjeta en vez de recortarse con puntos suspensivos. */
.pos-linea-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8rem;
    line-height: 1.2;
}

/* ⚠ 36 px y no los 24 de un botón normal: son los que más se tocan de la pantalla y se tocan
   deprisa. Con 8 px de separación entre ellos, que es el mínimo para que el dedo no se equivoque
   de signo. */
.pos-cantidad {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
}

.pos-cantidad .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
}

.pos-cantidad-valor {
    min-width: 2ch;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
}

.pos-resumen { background: var(--ins-secondary-bg, #fff); }

/* El botón que cierra la venta: alto de sobra para el dedo y para el ojo. */
.pos-cobrar {
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Teléfono ─────────────────────────────────────────────────────────────────────────────────
   Los dos paneles se apilan, así que cada uno necesita un alto propio: con `height: 100%` sobre
   una fila apilada, los dos piden la ventana entera y el carrito queda fuera de la pantalla. */
@media (max-width: 1199.98px) {
    .pos-app { height: auto; min-height: 0; }
    .pos-col { height: auto; }
    .pos-app .card { max-height: none; }
    .pos-scroll { overflow-y: visible; }
    /* La cuadrícula con tarjetas más chicas: a 390 px entran dos por fila. */
    .pos-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }

    /* ⚠ El total y el botón de cobrar quedan FIJOS abajo. Medido a 390 px con el layout apilado:
       el botón caía en y=3409, o sea que cobrar exigía recorrer el catálogo entero hacia abajo y
       volver a subir por cada artículo. Es la diferencia entre una pantalla que se puede usar de
       pie y una que no.

       El `padding-bottom` del carrito es lo que evita que la barra tape la última línea: una
       barra fija sin sitio reservado esconde contenido sin avisar. */
    .pos-resumen {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        border-top: 1px solid var(--ins-border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }

    #posCarrito { padding-bottom: 210px !important; }
}

/* ── El cliente de la venta ───────────────────────────────────────────────────────────────────
   Vacío es un botón de borde punteado: en los POS que Mario tomó de referencia es lo que dice
   «acá falta algo opcional» sin pesar como un botón lleno. Puesto, pasa a ser una ficha con el
   nombre, que es el dato que hay que poder leer de reojo antes de cobrar. */
.pos-cliente-vacio {
    width: 100%;
    /* ⚠ 44 px de alto: es lo mínimo cómodo para un dedo, y este control se toca con el cliente
       esperando. */
    min-height: 44px;
    border: 1px dashed var(--ins-border-color);
    border-radius: var(--ins-border-radius, .375rem);
    background: transparent;
    color: var(--ins-secondary-color, #6c757d);
    font-size: .85rem;
}

.pos-cliente-vacio:hover {
    border-color: var(--ins-primary);
    color: var(--ins-primary);
}

.pos-cliente {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border: 1px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius, .375rem);
    font-size: .85rem;
}

/* ⚠ `min-width: 0` para que un nombre largo se recorte en vez de empujar la equis fuera de la
   ficha. Es la misma trampa de la línea del carrito. */
.pos-cliente-datos { min-width: 0; }

/* ── El bloque de totales ─────────────────────────────────────────────────────────────────────
   El desglose es información de apoyo y el total es el número que se canta en voz alta, así que
   se separan de verdad: el desglose en letra chica y apagada, y el total con su propia franja,
   más aire y una línea que lo despega. Antes los tres renglones tenían el mismo peso visual y el
   total se perdía entre ellos. */
.pos-desglose {
    font-size: .8rem;
    color: var(--ins-secondary-color, #6c757d);
    display: grid;
    gap: .15rem;
    margin-bottom: .5rem;
}

.pos-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    border-radius: var(--ins-border-radius, .375rem);
    background: var(--ins-tertiary-bg, #f4f4f4);
}

.pos-total-rotulo {
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    /* El rótulo acompaña; el número manda. */
    letter-spacing: .04em;
    color: var(--ins-secondary-color, #6c757d);
}

.pos-total-monto {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ins-primary);
    /* ⚠ Cifras de ancho fijo: sin esto el total «salta» de izquierda a derecha al cambiar de
       ₡9.900 a ₡10.100, porque el 1 es más angosto que el resto. */
    font-variant-numeric: tabular-nums;
}

/* La casilla de exonerar de cada línea: al top, alineada con el nombre, y con su propio ancho
   para que las líneas queden en columna aunque unas tengan el distintivo verde y otras la
   casilla. */
.pos-linea > .pos-chk-exo,
.pos-linea > .pos-exo-quitar {
    flex: 0 0 auto;
    margin-top: .35rem;
}

/* ⚠ El área tocable de una casilla de 16 px es chica para un dedo. Se agranda sin cambiar el
   dibujo, igual que la marca de esquina del listado de facturas. */
.pos-linea > .pos-chk-exo {
    position: relative;
    outline-offset: 6px;
}

/* ══════════════════════════ CALCULADORA ══════════════════════════
   Panel flotante anclado a la esquina del panel de venta. No es una modal: la cuenta se hace
   mirando la venta, así que el fondo no se bloquea ni se oscurece. */
.pos-calc {
    position: fixed;
    z-index: 1045;              /* sobre el contenido, bajo las modales del tema (1055) */
    width: 300px;
    border-radius: var(--ins-border-radius, .375rem);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    background: #fff;
    border: 1px solid var(--ins-border-color);
}

.pos-calc[hidden] { display: none; }

/* El asa: la franja oscura entera. `touch-action: none` es lo que impide que en el teléfono el
   arrastre lo tome el scroll de la página en vez del panel. */
.pos-calc-asa {
    background: #1f1f1f;
    cursor: move;
    touch-action: none;
    position: relative;
    padding-top: .45rem;
}

/* La pista de que se puede agarrar: dos rayitas, como las de una ventana. Sin esto el arrastre
   existe y nadie lo descubre. */
.pos-calc-agarre {
    display: block;
    width: 34px;
    height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
}

/* Mientras se arrastra no se selecciona texto: si no, el número de la pantalla se pinta de azul
   al mover el panel. */
.pos-calc.arrastrando { user-select: none; }

.pos-calc-pantalla {
    display: block;
    background: #1f1f1f;
    color: #fff;
    text-align: right;
    padding: 1rem .9rem;
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 300;
    /* ⚠ Cifras de ancho fijo: sin esto el número salta de lado al escribir, que en una
       calculadora se lee como que se borró algo. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* ⚠ Antes acá había `overflow-x: auto` como red: el texto largo cabía «a la fuerza» y salía
       una barra de desplazamiento dentro de la pantalla de la calculadora, que se ve como que
       algo se rompió. Ahora lo que cambia es el TAMAÑO de la letra, y no hay nada que desplazar:
       las clases las pone el JS según lo que haya que mostrar. */
    overflow: hidden;
}

/* Un número largo encoge en dos escalones antes de que llegue al borde. */
.pos-calc-pantalla.larga  { font-size: 1.5rem; }
.pos-calc-pantalla.xlarga { font-size: 1.15rem; }

/* Un AVISO no es un número: va en letra de leer, alineado a la derecha como el resto, y en dos
   líneas si hace falta. «No se puede dividir entre 0» a 2 rem no cabe en 300 px. */
.pos-calc-pantalla.aviso {
    font-size: .95rem;
    line-height: 1.25;
    white-space: normal;
    font-weight: 400;
}

.pos-calc-teclas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Las líneas entre teclas son el fondo que se ve por los huecos: una sola regla en vez de
       bordes por tecla, que se duplican en los encuentros. */
    gap: 1px;
    background: var(--ins-border-color);
}

.pos-calc-teclas button {
    /* ⚠ 48 px de alto: son teclas que se tocan con el dedo y deprisa. El mínimo cómodo son 44. */
    min-height: 48px;
    border: 0;
    background: #fff;
    font-size: 1.05rem;
    color: var(--ins-emphasis-color, #212529);
    cursor: pointer;
    transition: background-color .12s ease;
}

.pos-calc-teclas button:hover { background: #f1f3f5; }
.pos-calc-teclas button:active { background: #e9ecef; }

.pos-calc-teclas button:focus-visible {
    outline: 2px solid var(--ins-primary);
    outline-offset: -2px;
}

/* Los operadores, en una franja más clara arriba. */
.pos-calc-op { background: #f4f4f4 !important; }
.pos-calc-op:hover { background: #e9ecef !important; }

/* El operador activo se queda marcado: es lo que dice qué se está por hacer. */
.pos-calc-op.activo {
    background: var(--ins-primary) !important;
    color: #fff;
}

/* El igual: columna entera, como en la calculadora de referencia. */
.pos-calc-igual {
    grid-column: 4;
    grid-row: 2 / span 4;
    background: #f4784f !important;
    color: #fff !important;
    font-size: 1.2rem;
}

.pos-calc-igual:hover { background: #e96a40 !important; }

/* En el teléfono va centrada y un poco más angosta que la pantalla. */
@media (max-width: 575.98px) {
    .pos-calc {
        width: calc(100vw - 2rem);
        left: 1rem !important;
        right: auto;
    }
}


/* ── El selector de ventas guardadas ──────────────────────────────────────────────────────────
   ⚠ Con tope de alto y desplazamiento PROPIO. La lista crece con cada venta guardada y sin tope
   se montaba sobre la pantalla entera del teléfono —medido con diez ventas: tapaba el carrito y
   el botón de cobrar, y no había forma de llegar al final de la lista—.

   ⚠ El tope va en `dvh` y no en `vh`: en el teléfono `100vh` cuenta la barra del navegador que
   está tapando parte de la pantalla, así que un `60vh` se sale por abajo. */
.pos-ventas-menu {
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    /* Que el ancho no dependa del nombre más largo de la lista. */
    min-width: 260px;
    max-width: min(92vw, 360px);
}

/* Cada fila lleva su X, y el texto cede el espacio en vez de empujarla fuera. */
.pos-venta-fila { display: flex; align-items: center; gap: .5rem; }
.pos-venta-fila > .dropdown-item { flex: 1 1 auto; min-width: 0; }
.pos-venta-fila > .dropdown-item .text-truncate { max-width: 100%; }

.pos-venta-borrar {
    flex: 0 0 auto;
    margin-right: .35rem;
    border: 0;
    background: transparent;
    color: var(--ins-secondary-color, #6c757d);
    padding: .25rem .4rem;
    border-radius: var(--ins-border-radius, .375rem);
    line-height: 1;
}

.pos-venta-borrar:hover { background: var(--ins-danger-bg-subtle, #fde6e9); color: var(--ins-danger); }