/* ══════════════════════════════════════════════════════════════════════════════════════════════
   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`.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ Hasta el 2026-10-07 acá se restaban 46 px más: los que ocupaba la barra propia del selector
   de ventas (38 de botón + 8 de separación) encima de la tarjeta. Esa barra se fue adentro de la
   cabecera del catálogo —misma fila que el buscador— y la pantalla recuperó esos 46 px de alto.
   Quedan los 164 del layout: 70 de la barra superior + 24 del `mt-3` + 46 del pie + 24 de aire. */
.pos-app {
    height: calc(100vh - 164px);
    height: calc(100dvh - 164px);
    min-height: 520px;
}

/* La fila de la cabecera del catálogo: selector de venta a la izquierda y buscador a la derecha.
   ⚠ El `min-width` es lo que decide cuándo se parte en dos líneas: sin él la caja del buscador se
   encoge hasta dejar un campo de pocos centimetros antes de rendirse y bajar. */
.pos-buscador-caja { min-width: 260px; }

.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 misma cuadrícula, más apretada: se usa dentro de la ventana de presentaciones, que es más
   angosta que la pantalla y donde las fichas no necesitan tanto tamaño —ya se sabe qué producto
   es; lo que se elige es el color o la talla—. */
.pos-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
}

/* ⚠ 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);
    /* ⚠ Sin relleno y recortando: la foto llena la tarjeta hasta el borde y el rótulo se apoya
       sobre ella. Con relleno quedaba un marco claro alrededor del degradado. */
    padding: 0;
    overflow: hidden;
    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);
}

.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;
}

/* ── El rótulo va SOBRE la foto ───────────────────────────────────────────────────────────────
   Antes el nombre y el precio iban debajo, y entre los dos más la línea de presentaciones se
   llevaban ~60 px por tarjeta: en una cuadrícula de cinco columnas eso es una fila entera de
   producto perdida por pantalla. Puestos encima, la tarjeta mide lo que mide la foto.

   ⚠ El degradado NO es decoración: es lo único que garantiza que el texto se lea. El catálogo
   tiene fotos de fondo blanco —ropa sobre fondo claro— donde un texto claro sin fondo desaparece.
   Va de negro casi opaco abajo a transparente arriba, para no tapar el producto.

   ⚠ Y el color del texto es BLANCO FIJO, no una variable del tema: el fondo de acá es el
   degradado, no el de la página, así que en modo claro un `--ins-body-color` oscuro quedaría
   negro sobre negro. */
.pos-item-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem .5rem .4rem;
    background: linear-gradient(to top,
                rgba(0, 0, 0, .88) 0%,
                rgba(0, 0, 0, .68) 45%,
                rgba(0, 0, 0, 0) 100%);
    color: #fff;
    text-align: left;
    pointer-events: none;      /* el clic es de la tarjeta entera */
}

.pos-item-nombre {
    font-size: .78rem;
    line-height: 1.2;
    /* 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: .1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* Precio y presentaciones comparten renglón: antes eran dos líneas distintas. */
.pos-item-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem;
}

.pos-item-precio {
    font-weight: 700;
    font-size: .9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    /* ⚠ NUNCA partido. Medido a 390 px: «₡19 080,00» se quebraba en «₡19» y «080,00», que además
       de feo se lee mal —el precio es el dato que decide la venta—. Antes no pasaba porque tenía
       la línea para él solo. */
    white-space: nowrap;
}

.pos-item-presentaciones {
    font-size: .65rem;
    opacity: .85;
    white-space: nowrap;
    /* Si no cabe, cede ella: el precio manda. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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;
}

/* ── La fila de acciones se envuelve ANTES de salirse ─────────────────────────────────────────
   Reportado desde una tablet (Mario, 2026-10-20): «el botón Cobrar se desborda». Medido a
   1280 px: la columna del carrito (`col-xl-4`) da 335 px y los tres botones piden 432, así que
   «Cobrar» salía por la derecha y **empujaba la página entera** —la tablet quedaba desplazable a
   lo ancho, con la barra superior y el carrito corridos—.

   ⚠ La base de 140 px es la que decide: si al lado de Guardar y Resumen no quedan 140 px,
   «Cobrar» baja de línea y se lleva el ancho completo. Donde sí caben los tres, la fila queda
   EXACTAMENTE como Mario la diseñó —el verde al lado de los otros dos, con su `flex-grow-1`—.
   Un `flex: 1 1 100%` fijo habría bajado el botón siempre, también en el mostrador ancho, y eso
   es cambiarle la pantalla a quien no tenía el problema.

   ⚠ Y `min-width: 0` en los botones: sin él, `flex-wrap` no alcanza —un botón con
   `min-width: auto` se niega a bajar de su contenido y el desborde vuelve en cuanto un rótulo
   crece—. */
.pos-pie-acciones { flex-wrap: wrap; }
.pos-pie-acciones > .btn { min-width: 0; }
.pos-pie-acciones > #posCobrar { flex: 1 1 140px; }

/* ⚠ Y entre 1200 y 1500 los dos secundarios se aprietan, o la fila se parte en TRES.
   Medido a 1280 con la columna en 273 px útiles: «Guardar» pedía 137 y «Resumen» 147 —292 con el
   hueco— así que ni siquiera esos dos compartían línea y el pie se iba a 180 px de alto, comidos
   al listado del carrito. Con el tipo a .95rem y menos relleno lateral miden 115 y 122: entran
   los dos juntos, «Cobrar» se lleva la línea de abajo entera y el pie queda en ~112.
   ⚠ El rango tiene tope: desde 1500 la columna ya da para los tres en una línea y ahí no se
   toca nada, que es como Mario la diseñó. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .pos-pie-acciones > .btn {
        font-size: .95rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* ── 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)); }

    /* ⚠ En una tarjeta de 135 px no caben precio y presentaciones en el mismo renglón sin que uno
       de los dos se recorte. Gana el precio: el número de presentaciones se ve igual al tocar el
       producto, que es cuando hace falta elegir una. */
    .pos-item-presentaciones { display: none; }

    /* ⚠ 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;
        /* ⚠ **1030, no 5.** Con 5, la tarjeta del catálogo se dibujaba ENCIMA de la barra y le
           tapaba la línea de «Artículos» —se veía cortada por el borde redondeado de la tarjeta,
           mientras IVA y TOTAL asomaban debajo—. Pasaba al desplazarse, cuando la tarjeta crece y
           su borde inferior cae dentro de la franja de la barra.

           5 es un número que solo sirve contra el contenido normal; las tarjetas, los pegajosos y
           los desplegables del tema juegan en el rango de los miles. 1030 es el de las barras
           fijas de Bootstrap: por encima de todo el contenido y **por debajo de las modales
           (1055)**, que es lo que hace falta para que la ventana de cobro siga tapándola. */
        z-index: 1030;
        border-top: 1px solid var(--ins-border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }

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

    /* ⚠ El catálogo **NO** reserva el alto de la barra, y es a propósito. Se intentó el
       2026-10-04 —cuando el «Ver más» parecía quedar tapado— y dejaba **211 px de hueco vacío**
       entre el botón y el fin de la tarjeta, que es lo que se ve y molesta.

       No hace falta porque el catálogo no es lo último de la página: debajo viene el carrito, que
       sí reserva su espacio, así que siempre hay dónde seguir bajando para traer el botón fuera
       de la franja de la barra. Lo que de verdad fallaba era el `z-index`, no el sitio. */

    /* ⚠ **CON EL TECLADO ABIERTO, LA BARRA SE VA.** Es lo que Mario reportó: al tocar el buscador
       «el contenido se viene sobre los totales».

       La causa: `position: fixed; bottom: 0` se ancla al viewport de MAQUETACIÓN, que no cambia
       cuando entra el teclado —solo cambia el viewport VISUAL—. Así que la barra se queda donde
       estaba, el teclado y el contenido se mueven, y los tres terminan pisándose. En un navegador
       de escritorio no se reproduce nunca, porque ahí los dos viewports son el mismo.

       Se esconde en vez de recalcularle la posición: mientras se escribe en el buscador no hace
       falta ver el total, y al cerrar el teclado vuelve sola. Recalcular contra `offsetTop` es la
       vía que ya falló una vez —hace crecer el documento, que se vuelve más desplazable, y
       realimenta el problema—. */
    body.pos-teclado .pos-resumen { display: none; }

    /* Sin barra, el sitio reservado sobra y deja un hueco enorme al final. */
    body.pos-teclado #posCarrito { padding-bottom: 1rem !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); }

/* ══════════════════════ Navegación por grupos (2026-10-04) ══════════════════════
   Aprobado sobre el prototipo: la cuadrícula NAVEGA —grupo → subgrupo → artículos— y la fila de
   grupos queda fija arriba para saltar de uno a otro sin devolverse. */

.pos-grupos {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    margin-bottom: .75rem;
    /* La barra de scroll horizontal sobre una fila de botones se ve como un defecto; el gesto de
       deslizar ya está. */
    scrollbar-width: none;
}
.pos-grupos::-webkit-scrollbar { display: none; }

.pos-grupos .btn {
    white-space: nowrap;
    border-radius: 999px;
    padding: .55rem 1.1rem;
}

.pos-migas {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}
.pos-ruta {
    color: var(--ins-secondary-color);
    font-size: .85rem;
}

/* La tarjeta de GRUPO: un blanco grande, pensado para el dedo y no para leer.
   ⚠ Hereda de `.pos-item` el tamaño y el borde; acá solo cambia lo que lleva adentro. */
.pos-item.pos-grupo {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    position: relative;
}
.pos-grupo-nombre {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}
.pos-grupo-conteo {
    font-size: .78rem;
    color: var(--ins-secondary-color);
    margin-top: .25rem;
}
/* La flecha dice «acá adentro hay más», que es lo que distingue un grupo de un artículo. */
.pos-grupo-flecha {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ins-secondary-color);
    font-size: 1.1rem;
    line-height: 1;
}

/* La tarjeta de grupo CON foto: el rótulo va encima, sobre un degradado.
   ⚠ Lo que lo hace legible es el degradado, no el color del texto: una foto clara con texto
   blanco sin velo no se lee, y es el mismo criterio que ya usan las tarjetas de producto. */
.pos-item.pos-grupo-con-foto {
    padding: 0;
    overflow: hidden;
}
.pos-item.pos-grupo-con-foto img {
    width: 100%;
    height: 100%;
    min-height: 104px;
    object-fit: cover;
    display: block;
}
.pos-grupo-velo {
    position: absolute;
    inset: auto 0 0 0;
    /* Una palabra más larga que la tarjeta se recorta acá en vez de derramarse sobre la foto. */
    overflow: hidden;
    padding: .6rem .75rem;
    background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.45) 60%, transparent);
    color: #fff;
    text-align: left;
}
.pos-grupo-velo .pos-grupo-conteo { color: rgba(255,255,255,.8); }
/* ⚠ Un poco más chico SOLO sobre la foto: «Acompañamientos» no cabe en el ancho de la tarjeta a
   1,05rem y se partía a la mitad de la palabra —«Acompañamie / ntos»—, que es peor que cualquier
   tamaño. No hay dónde cortar: la palabra es más larga que la línea, así que lo que se ajusta es
   la letra. Medido el 2026-10-05. */
/* ⚠ Y `overflow-wrap: normal`: el tema lo pone en `break-word` de forma global, así que la
   palabra se partía igual aunque cupiera —«Acompañamien / tos»—. Con `normal` solo se parte si de
   verdad no entra, y entonces sí se achica la letra, no la palabra. */
.pos-grupo-velo .pos-grupo-nombre {
    font-size: .95rem;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ══════════════ Las preguntas de un plato ══════════════
   Entra desde abajo en el teléfono y por el costado en pantalla ancha, donde además EMPUJA el
   contenido en vez de taparlo. Decidido sobre el prototipo y medido en 390 px. */
.pos-hoja-velo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    /* ⚠ 1030 y no un número de un dígito: el tema juega en los miles y una tarjeta
       (`position: relative`) se dibujaría encima. Por debajo de las modales (1055), que tienen
       que poder taparlo. */
    z-index: 1030;
}
.pos-hoja {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1031;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    background: var(--ins-secondary-bg);
    border-top: 1px solid var(--ins-border-color);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--ins-box-shadow);

    /* ⚠ El estado cerrado NO es `display: none` ni el atributo `hidden`: los dos apagan el
       elemento y con él cualquier transición, así que el panel aparecía de golpe. Se cierra
       deslizándolo fuera y quitándole la visibilidad, que sí se puede animar. */
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s ease-out, visibility 0s linear .2s;
}
.pos-hoja.abierta {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform .2s ease-out, visibility 0s;
}
.pos-hoja-velo {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-out, visibility 0s linear .2s;
}
.pos-hoja-velo.abierta { opacity: 1; visibility: visible; transition: opacity .2s ease-out, visibility 0s; }

/* Quien pidió menos movimiento no quiere que una pregunta se deslice: aparece y ya. */
@media (prefers-reduced-motion: reduce) {
    .pos-hoja, .pos-hoja-velo { transition: none; }
}

.pos-hoja-cab {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--ins-border-color);
}
.pos-hoja-nombre {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ins-emphasis-color);
}
.pos-hoja-sub {
    margin-top: 2px;
    font-size: .8125rem;
    color: var(--ins-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* ⚠ `min-height: 0`: en una columna flex el hijo no se encoge por debajo de su contenido, así
   que sin esto el scroll nunca aparece y el pie con «Agregar» se va de la pantalla. */
.pos-hoja-cuerpo { padding: 6px 16px 10px; overflow-y: auto; min-height: 0; }

/* ══════════ El panel de preguntas: bloques, no una lista ══════════
   Tesis: el camino primario es contestar lo que FRENA el pedido y confirmar. Por eso el panel se
   lee en tres tiempos —obligatorias numeradas, un corte, lo que engorda la cuenta— y el ritmo lo
   marca el espacio: apretado dentro de un grupo, generoso entre grupos. La escala es de 4 px.

   ⚠ Nada de esto es decoración: el número dice cuántas cosas faltan, el rótulo «Falta elegir»
   dice cuál, y el corte dice dónde termina lo obligatorio. Si se quitan, vuelve a ser una lista
   plana de botones iguales, que es de donde venimos. */

.pm-grupo {
    /* Generoso ARRIBA, apretado abajo: el encabezado pertenece a lo que sigue, no a lo anterior. */
    margin: 18px 0 0;
    padding-bottom: 4px;
}
.pm-grupo:first-child { margin-top: 8px; }

.pm-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
/* El número de la pregunta obligatoria. Cuadrado y tabular: en una columna de tres, los dígitos
   tienen que alinearse. */
.pm-indice {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--ins-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pm-nom {
    flex: 1 1 auto;
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ins-emphasis-color);
    letter-spacing: -.01em;
}
/* El estado va a la derecha, donde el ojo cae después del nombre. */
.pm-estado, .pm-regla { flex: 0 0 auto; font-size: .75rem; }
.pm-estado.falta {
    color: #f5c242;              /* ámbar legible sobre el panel oscuro: 7.9:1 medido */
    font-weight: 600;
}
.pm-estado.listo {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ins-success) 22%, transparent);
    color: var(--ins-success);
}
.pm-regla { color: var(--ins-secondary-color); }

/* La pregunta que ABRE otra opción: pegada a su padre y con una guía. Al mismo nivel iría
   mintiendo — no es una pregunta más de la lista, sale de lo que se acaba de tocar. */
.pm-hijo {
    margin: 10px 0 0 10px;
    padding-left: 12px;
    border-left: 2px solid var(--ins-primary);
}

/* El corte: dice dónde deja de ser obligatorio. Una regla con rótulo, no un título más. */
.pm-corte {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 2px;
    color: var(--ins-secondary-color);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.pm-corte::before, .pm-corte::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ins-border-color);
}

/* ── La opción: una por renglón, el precio en columna ──
   Fila ancha y no chip (decisión de Mario, 2026-10-06): los precios se leen en columna y se
   comparan de un vistazo, y el blanco para el dedo es predecible. */
.pm-ops { display: flex; flex-direction: column; gap: 5px; }

.pm-op {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* 44 px: el piso en que el dedo acierta sin mirar. Medido el 2026-10-06 con la carta real:
       a 48 px, una hamburguesa de cinco preguntas no cabía ni en escritorio y obligaba a
       desplazar para llegar al botón; a 44 entra lo obligatorio completo. Por debajo de 44 se
       empieza a fallar el toque, así que esto es el límite, no una preferencia. */
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--ins-border-color);
    border-radius: .625rem;
    background: var(--ins-tertiary-bg);
    color: var(--ins-body-color);
    font-size: .9375rem;
    text-align: left;
    transition: border-color .12s ease-out, background-color .12s ease-out;
}
.pm-op:hover { border-color: color-mix(in srgb, var(--ins-primary) 55%, transparent); }
.pm-op:focus-visible {
    outline: 2px solid var(--ins-primary);
    outline-offset: 2px;
}
/* ⚠ Elegida se marca con BORDE y un fondo tenue, no con el primario sólido: en una lista de diez
   adicionales, tres filas rellenas de morado gritan más que el plato. */
.pm-op.puesta {
    border-color: var(--ins-primary);
    background: color-mix(in srgb, var(--ins-primary) 14%, transparent);
}
.pm-op-nom { flex: 1 1 auto; }
.pm-op.puesta .pm-op-nom { font-weight: 600; color: var(--ins-emphasis-color); }

/* El precio alineado a la derecha y con cifras de ancho fijo: así la columna se compara. */
.pm-op-precio {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--ins-secondary-color);
}
.pm-op.puesta .pm-op-precio { color: var(--ins-primary); font-weight: 600; }

/* La marca de selección: cuadrada cuando se pueden elegir varias, redonda cuando es una sola.
   La forma dice la regla sin leer el rótulo. */
.pm-marca {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    display: grid;
    place-items: center;
    /* ⚠ El borde del cuadro vacío NO puede ser el del tema: sobre el panel oscuro queda casi
       invisible y la opción no se lee como elegible. Se tiñe del propio texto. */
    border: 1.5px solid color-mix(in srgb, var(--ins-body-color) 42%, transparent);
    border-radius: 5px;
    color: #fff;
}
.pm-marca.una { border-radius: 50%; }
.pm-op.puesta .pm-marca { background: var(--ins-primary); border-color: var(--ins-primary); }

.pos-hoja-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--ins-border-color);
}
/* El total es lo segundo que se mira después de las preguntas, así que pesa de verdad; el
   aviso va debajo, en su tamaño, y solo se enciende cuando algo frena. */
.pos-hoja-total {
    flex: 1;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--ins-emphasis-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.pos-hoja-total small {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    font-size: .75rem;
    letter-spacing: 0;
    color: var(--ins-secondary-color);
}
.pos-hoja-total small.falta { color: #f5c242; }
#posMenuAgregar { min-width: 124px; font-weight: 600; }
/* ⚠ Bloqueado tiene que VERSE bloqueado: el tema solo le baja la opacidad a .65 y deja el cursor
   en «mano», así que el botón seguía invitando a tocarlo mientras faltaba contestar. Medido el
   2026-10-06. */
#posMenuAgregar:disabled {
    opacity: 1;
    background: var(--ins-tertiary-bg);
    border-color: var(--ins-border-color);
    color: var(--ins-secondary-color);
    cursor: not-allowed;
}

/* El anfitrión del panel: la tarjeta del catálogo. `relative` para que el panel se posicione
   contra ELLA y no contra la ventana, y `overflow: hidden` para que no asome mientras entra. */
.pos-panel-host { position: relative; overflow: hidden; }

@media (min-width: 992px) {
    /* ⚠ DENTRO de la tarjeta de artículos y superpuesto (Mario, 2026-10-05): ni pegado a la
       ventana —tapaba el pedido, que es lo que el cajero mira mientras arma la cuenta— ni
       empujando el contenido. Cubre la cuadrícula, se contesta y se va.
       `position: absolute` exige ser descendiente del anfitrión: por eso el panel se incluye
       dentro de la tarjeta y no al final del `<body>`. */
    /* ⚠ Cubre la tarjeta en PARTE y no entera (Mario, 2026-10-05): la cuadrícula tiene que
       seguir viéndose al lado. Un panel que tapa todo obliga a cerrarlo para mirar el catálogo,
       y es el gesto que más se repite. 420 px o el 85 % de la tarjeta, lo que sea menor —en una
       pantalla angosta un ancho fijo se comería todo—. */
    /* En pantalla ancha entra DESLIZÁNDOSE hacia la izquierda desde el borde derecho de la
       tarjeta, no desde abajo: es de donde viene y hacia donde se va. */
    .pos-hoja { transform: translateX(100%); }
    .pos-hoja.abierta { transform: none; }

    .pos-hoja {
        position: absolute;
        top: 0; bottom: 0; right: 0; left: auto;
        width: min(420px, 85%);
        max-height: none;
        border: 0;
        border-left: 1px solid var(--ins-border-color);
        border-radius: 0;
        box-shadow: -12px 0 28px rgba(0, 0, 0, .35);
    }
    /* ⚠ El cuerpo crece para empujar el pie hasta abajo. Sin esto el panel ocupa el alto de la
       tarjeta pero el pie se queda pegado al contenido, flotando a media altura, con un vacío
       debajo que se lee como «esto no terminó de cargar». En el teléfono NO se aplica: ahí la
       hoja mide lo que mide su contenido, hasta un tope. */
    .pos-hoja-cuerpo { flex: 1 1 auto; }

    /* Sin velo: lo que queda a la vista de la cuadrícula se puede seguir leyendo, y oscurecerlo
       diría lo contrario. El pedido, a la derecha, ni se entera. */
    .pos-hoja-velo { display: none; }
}

/* ── El ícono de respaldo ──────────────────────────────────────────────────────────────────
   Lo que se ve en la tarjeta mientras el artículo o el grupo no tengan foto. Es un emoji: viene
   a color en cualquier teléfono, sin descargar nada y sin depender de un paquete de imágenes.
   Centrado y grande a propósito: en una carta de restaurante lo que se busca de un vistazo es
   «esto es una pizza», no leer ocho renglones. */
.pos-icono {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sube un poco: abajo va el rótulo con su degradado, y el emoji centrado exacto queda
       mordido por él. */
    padding-bottom: 18px;
    font-size: 2.75rem;
    line-height: 1;
    /* ⚠ Sin esta familia, Chrome en escritorio dibuja algunos emoji en blanco y negro: toma el
       glifo de la fuente de texto antes que el de color. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    pointer-events: none;
}
/* ⚠ En la tarjeta de GRUPO el ícono NO va centrado en absoluto: ahí el nombre vive en el medio
   de la tarjeta, así que un emoji encima le cae justo sobre las letras. Va ARRIBA, en el flujo,
   con el texto debajo — medido el 2026-10-05, se veía «Acompañamien🍟tos». */
.pos-grupo { align-items: center; text-align: center; }
.pos-grupo .pos-icono {
    position: static;
    padding: 0;
    margin-bottom: .35rem;
    font-size: 2.25rem;
}
/* Con ícono, la flecha sobraría: la tarjeta ya es evidentemente un grupo y el espacio es del
   emoji. Se queda solo cuando no hay ícono. */
.pos-grupo .pos-icono ~ .pos-grupo-flecha { display: none; }
@media (max-width: 575.98px) { .pos-icono { font-size: 2.25rem; } }

/* ── La cabecera del carrito: una fila, no tres ────────────────────────────────────────────
   Antes eran el título en dos líneas, una fila de acciones y un botón de ancho completo para el
   cliente. Ese alto es de la LISTA DE ARTÍCULOS, que es lo que el cajero mira mientras cobra
   (Mario, 2026-10-06: «ese espacio es muy invasivo»). Las acciones son íconos con su title; el
   nombre del cliente, cuando lo hay, aparece debajo, porque eso es dato y no acción. */
.pos-cabecera {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    /* ⚠ `nowrap` con `!important`, y no es capricho: el tema trae
       `.avatar-group,.card-header,.flex-wrap{flex-wrap:wrap!important}`, así que sin el
       `!important` la regla propia pierde aunque sea más específica y aunque cargue después.
       Con el envoltorio puesto, un ícono se iba a una segunda línea: 102 px de alto para una
       fila de 47. Medido el 2026-10-06. Lo que se encoge es el conteo, que lleva `min-width: 0`
       y recorta con puntos suspensivos. */
    flex-wrap: nowrap !important;
}
.pos-cabecera-icono { color: var(--ins-primary); font-size: 1.125rem; }
/* El conteo ES el título: empuja a los íconos contra el borde y, si hiciera falta, se recorta
   antes que ellos — cuántos artículos hay también lo dice la lista, pero el botón de vaciar no
   está en ningún otro lado. */
.pos-cabecera-conteo {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ins-emphasis-color);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   EL PIE: barra de estado de la caja (2026-10-07)

   La franja del pie mide 46 px y cruza la pantalla entera. En el mostrador eso vale más como
   estado del turno que como el «Desarrollado por» del pie global, así que `pos.php` la reemplaza
   por esta barra. Lo que muestra es lo que un cajero mira sin dejar de vender: si hay turno
   abierto, cuántas ventas lleva, cuánto efectivo debería haber en la gaveta.

   ⚠ `nowrap` y no `wrap`: el alto del pie entra en el `calc()` de `.pos-app`, y una segunda línea
   lo correría sin avisar. Lo que no cabe se esconde por `@media` desde el markup (`d-none d-lg-…`,
   `d-xl-…`), que es predecible; de último queda el desplazamiento horizontal como red.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ El pie se fija en 46 px, que es lo que el `calc()` de `.pos-app` le resta. El global mide eso
   porque su contenido es una línea de texto de 21 px más 12 de relleno arriba y abajo; con un
   botón adentro el contenido pasa a 31 px y el pie crece a 56 —medido—, o sea que la pantalla
   quedaría 10 px más larga que la ventana. El alto manda y el relleno se reparte solo. */
.pos-pie {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.pos-pie > .container-fluid { width: 100%; }

.pos-pie-barra {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    font-size: .8125rem;
}

.pos-pie-barra::-webkit-scrollbar { display: none; }

/* El chip de estado: el único elemento con color, porque es el único dato binario. */
.pos-pie-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.3;
}

.pos-pie-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pos-pie-chip.abierta {
    color: var(--ins-success);
    background-color: var(--ins-success-bg-subtle);
}

.pos-pie-chip.cerrada {
    color: var(--ins-secondary-color);
    background-color: var(--ins-tertiary-bg);
}

.pos-pie-dato   { color: var(--ins-body-color); }
.pos-pie-rotulo { color: var(--ins-secondary-color); }
.pos-pie-dato b { font-weight: 600; color: var(--ins-emphasis-color); }

/* Un separador que no es un carácter: así no se copia al seleccionar la franja. */
.pos-pie-sep {
    width: 1px;
    height: 14px;
    flex: 0 0 auto;
    background-color: var(--ins-border-color);
}

/* El botón se va al extremo opuesto y es lo único que no se encoge. */
.pos-pie-ir { margin-left: auto; flex: 0 0 auto; }

/* ⚠ En el teléfono el pie deja de ser una franja fija: `.pos-app` pasa a alto automático y la
   barra de totales del carrito ya ocupa el borde de abajo. La caja se sigue viendo, pero con el
   rótulo corto y sin el botón, que duplica lo que el menú ya ofrece. */
@media (max-width: 575.98px) {
    .pos-pie-barra { font-size: .75rem; gap: .35rem; }
    .pos-pie-ir { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LA FICHA DEL PLATO (2026-10-07)

   El control «i» de la tarjeta y el contenido de la modal que abre.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* El control va sobre la foto, arriba a la derecha. ⚠ `z-index: 2` para quedar encima del
   degradado de `.pos-item-info`, que es `position: absolute` y si no lo taparía en la esquina. */
.pos-item-ficha {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 30 px: por debajo de eso el dedo falla y termina agregando el plato al carrito, que es
       justo lo que este control NO tiene que hacer. */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    /* Negro translúcido y no un token del tema: va encima de una FOTO, que puede ser clara u
       oscura, y el único fondo que funciona sobre las dos es uno propio. */
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    opacity: .85;
    transition: opacity .15s ease, background-color .15s ease;
}

.pos-item-ficha:hover { opacity: 1; background: rgba(0, 0, 0, .65); }

.pos-item-ficha:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    opacity: 1;
}

.pos-item-ficha i { font-size: 1rem; line-height: 1; }

/* ── El contenido de la modal ──────────────────────────────────────────────────────────────── */

.pf-cabecera {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pf-foto-caja { flex: 0 0 auto; width: 180px; }

.pf-foto {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--ins-border-radius, .375rem);
}

.pf-icono {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: var(--ins-tertiary-bg);
    border-radius: var(--ins-border-radius, .375rem);
}

/* ⚠ `min-width: 0` en el lado elástico: sin esto un nombre de presentación largo se niega a
   encogerse y empuja la foto fuera de la modal. */
.pf-datos { flex: 1 1 220px; min-width: 0; }

.pf-precio-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    border-bottom: var(--ins-border-width) solid var(--ins-border-color);
}

.pf-precio-fila:last-child { border-bottom: 0; }
.pf-precio-fila b { font-size: 1.05rem; white-space: nowrap; }

.pf-titulo {
    margin: 1.25rem 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ins-secondary-color);
}

.pf-grupo {
    border: var(--ins-border-width) solid var(--ins-border-color);
    border-radius: var(--ins-border-radius, .375rem);
    padding: .6rem .85rem;
    margin-bottom: .6rem;
}

.pf-grupo:last-child { margin-bottom: 0; }

.pf-grupo-cab {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}

.pf-opciones {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .875rem;
}

.pf-opciones li { margin-bottom: .15rem; }

@media (max-width: 575.98px) {
    .pf-foto-caja { width: 100%; }
}

/* ── Elegir qué quitar del carrito ─────────────────────────────────────────────────────────
   ⚠ Pedido de Mario (2026-10-08). Es un MODO y no una columna permanente porque cada línea ya
     tiene una casilla —la de EXONERAR, que es fiscal—: dos casillas por fila es pedir que
     alguien marque la que no era. Mientras se elige, la de exonerar no se dibuja. */
.pos-barra-elegir {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--ins-border-color);
    border-radius: .5rem;
    background: var(--ins-tertiary-bg);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* La casilla de quitar es ROJA: no se puede parecer a la de exonerar, que es la del tema. */
.pos-chk-quitar {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.pos-chk-quitar:checked {
    background-color: var(--ins-danger);
    border-color: var(--ins-danger);
}

/* Y la fila elegida se tiñe, para verlo sin recorrer las casillas una por una. */
.pos-linea-elegida {
    background: color-mix(in srgb, var(--ins-danger) 12%, transparent);
    border-radius: .375rem;
}

/* ── La pregunta que falta, señalada ───────────────────────────────────────────────────────
   ⚠ Nace del móvil (2026-10-11): una pregunta ENCADENADA aparece debajo de la que la disparó,
     y en un teléfono eso es fuera de pantalla. El cajero elegía la bebida, tocaba Agregar y no
     pasaba nada — el botón estaba desactivado por algo que no podía ver.
   Un parpadeo y no un color fijo: lo que hace falta es que el ojo la ENCUENTRE; un resaltado
   permanente ensucia la hoja mientras se contesta. */
@keyframes pm-senal {
    0%, 100% { background-color: transparent; }
    30%      { background-color: var(--ins-warning-bg-subtle, rgba(255, 193, 7, .25)); }
}
.pm-grupo.pm-senalado {
    animation: pm-senal 1.1s ease-in-out 2;
    border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    /* Sin parpadeo, pero el resaltado se queda: quien pidió menos movimiento necesita la pista
       igual. */
    .pm-grupo.pm-senalado { animation: none; background-color: var(--ins-warning-bg-subtle, rgba(255, 193, 7, .2)); }
}

/* ── Con la hoja de preguntas abierta, nada fijo la tapa ───────────────────────────────────
   ⚠ Reportado desde el teléfono (Mario, 2026-10-11): con la hoja abierta no respondía NI la X
     de arriba NI «Cancelar»/«Agregar» de abajo. Se podían contestar las preguntas del medio y
     nada más. No estaban deshabilitados: estaban TAPADOS.

   La causa es dónde vive la hoja. Está dentro de `.pos-panel-host` —la tarjeta del catálogo—
   porque en escritorio es `position: absolute` y necesita ser descendiente del anfitrión. En
   móvil pasa a `position: fixed`, pero sigue compitiendo desde adentro de esa tarjeta contra
   dos barras que están FUERA: la del tema arriba (`.app-topbar`, z-1001) y la de totales abajo
   (`.pos-resumen`, z-1030, que es exactamente donde caen los dos botones).

   ⚠ Se esconden las barras en vez de subirle el `z-index` a la hoja, y es deliberado: subir el
     número no sirve si un ancestro crea contexto de apilamiento —el valor queda encerrado ahí
     dentro—. Esconder lo que estorba funciona sin depender de eso.

   Y además es lo correcto: con la hoja abierta, el total de la venta y la barra de navegación
   no son accionables. Mostrarlos invita a tocar algo que no va a responder. */
body.pos-hoja-abierta .pos-resumen { display: none; }
body.pos-hoja-abierta .app-topbar  { display: none; }

/* El scroll del fondo se frena: sin esto, arrastrar dentro de la hoja mueve la página de atrás
   y la hoja se siente suelta. */
body.pos-hoja-abierta { overflow: hidden; }