/* ========================================================
   mobile-native.css - Estilo nativo movil para POS
   Solo aplica en pantallas <= 768px (movil/tablet)
   ======================================================== */

/* ============================================
   EMPTY STATE - Sin datos (global, todos los tamaños)
   ============================================ */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    min-height: 200px;
    /* Sin el ancho explicito el bloque se encoge al contenido y queda pegado a la IZQUIERDA
       cuando el padre es flex (caso del historial de ventas). Con 100% + flex:1 ocupa la
       zona vacia de la tabla y el mensaje queda centrado de verdad. */
    width: 100%;
    flex: 1 1 auto;
    margin: 0 auto;
}

.empty-state-icon {
    margin-bottom: 16px;
    opacity: 0.65;
}

.empty-state-text {
    font-size: 17px;
    font-weight: 600;
    color: #3a3a3c;
    margin: 0 0 6px 0;
}

.empty-state-subtext {
    font-size: 14px;
    color: #8e8e93;
    margin: 0;
}

@media (max-width: 768px) {

    /* ============================================
       GENERAL - Base nativa
       ============================================ */
    body {
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        background: #f2f2f7 !important;
    }

    /* ============================================
       TOPBAR - Barra superior nativa
       ============================================ */
    .topbar {
        background: #fff !important;
        border-bottom: 1px solid #e5e5ea !important;
        box-shadow: none !important;
    }

    .barratopacciones {
        padding: 0 8px;
    }

    .toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }

    .toggle:active {
        background: rgba(0,0,0,0.06);
    }

    /* ============================================
       TOOLBAR - Botones de accion (+, -, $, x, edit)
       Centrados, tamano uniforme, bien alineados
       ============================================ */
    .botonestopizq {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;   /* 6 botones con etiqueta (50px) entran en 360px */
        padding: 6px 8px !important;
        background: #f8f8f8;
        border-bottom: 1px solid #f0f0f0;
        flex-wrap: nowrap !important;
        min-height: auto !important;
        /* Con etiqueta los botones son un poco mas anchos (48px c/u); en telefonos angostos
           con todos los botones (incl. Mover/Promo/Cupon) puede no entrar todo en una fila.
           Scroll horizontal en vez de recortar silenciosamente. */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .btnAnalogo {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
        border: none !important;
        background: var(--analogo, var(--primario, #1E88E5)) !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        transition: transform 0.15s, box-shadow 0.15s;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .btnAnalogo-label {
        flex-direction: column !important;
        gap: 1px !important;
        width: 50px !important;
        min-width: 50px !important;
        height: 44px !important;
        padding: 3px 0 !important;
    }

    .btnAnalogo i {
        font-size: 15px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    .btnAnalogo span {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* La etiqueta la pisaba .btnAnalogo span (18px, pensada para el "P" de promo):
       misma !important pero MAS especificidad, asi que el texto salia gigante y encimado.
       Con .btnAnalogo .btnAnalogo-txt (0,2,0) gana esta. Mide 9px: 7px era ilegible. */
    .btnAnalogo .btnAnalogo-txt {
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: -0.2px;
        text-transform: uppercase;
        opacity: 0.9;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
    }

    .btnAnalogo:active {
        transform: scale(0.92);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* ============================================
       CARRITO - Contenedor de detalle de venta
       ============================================ */
    .contenedor-detalle {
        height: calc(100% - 50px - 56px) !important; /* toolbar(50px) + footer(56px, ver .detalle-btn) */
    }

    .contenedor-detalle > .card {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f8f9fa !important;
    }

    .contenedor-detalle > .card > .card-body {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ============================================
       CARRITO - Cabecera nueva [atras] [mesa/cuenta] [total]
       Reemplaza la barra azul centrada de solo-texto. En restaurante trae los 3
       elementos; en NO-restaurante (mesa no aplica) solo el nombre centrado, igual
       que antes (el total sigue en su bloque propio, sin duplicar).
       ============================================ */
    /* Ronda 2 QA de campo: la cabecera era azul solido = mismo lenguaje visual que los botones
       de accion -> se leia como "tocable" cuando en realidad solo la flecha atras lo es. Ahora
       es una barra INFORMATIVA (fondo claro neutro + texto tinta) y solo el boton de atras
       conserva apariencia de boton (circulo con fondo solido). */
    .pos-cart-phone-head {
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        max-height: 56px;
        padding: 6px 10px;
        background-color: #f1f5f9;
        color: #16203A;
        border-bottom: 1px solid #dde4ec;
        box-sizing: border-box;
    }

    /* Ronda 4 QA de campo: el boton "atras" era chico (32px) para el pulgar dentro de una
       cabecera de 44-56px de alto. Ahora ocupa casi toda esa altura (44px = min-height del
       panel menos el padding vertical, cabe justo dentro del max-height:56px sin recortarse)
       y queda claro que es el UNICO elemento accionable de la barra. */
    .pos-cart-phone-head-back {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: none;
        background: var(--primario, #1E88E5);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        padding: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    .pos-cart-phone-head-back:active {
        background: var(--hoverprimario, #1A5FC0);
    }

    .pos-cart-phone-head-name {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        color: #16203A;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pos-cart-phone-head-total {
        flex: 0 0 auto;
        font-size: 16px;
        font-weight: 800;
        color: var(--color_exito, #04AA6D);
        white-space: nowrap;
    }

    /* Mejora 1 (equipo MOZO, ver PuntoVenta.razor): rastro chico y NO interactivo del cliente
       ya asignado, cuando la fila "Cliente" completa se oculta en ese equipo. Mismo tamano/linea
       que el nombre de mesa+cuenta (comparten .pos-cart-phone-head-name), solo mas tenue para
       no competir con el dato principal. */
    .pos-cart-phone-head-cli {
        font-weight: 500;
        opacity: 0.75;
    }

    /* ============================================
       LISTA DE PRODUCTOS EN CARRITO - Cards nativos
       ============================================ */
    .body-detalle {
        border: none !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        padding: 2px 0 !important;
        margin: 4px 6px !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    .producto-item {
        border-bottom: none !important;
        padding: 10px 12px !important;
        margin: 0 4px;
        border-radius: 8px;
        font-size: 14px !important;
        transition: background 0.15s;
    }

    .producto-item + .producto-item {
        border-top: 1px solid #f0f0f0 !important;
        border-radius: 0;
    }

    .producto-item:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .producto-item:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .producto-item:active {
        background: #f2f2f7;
    }

    .seleccionfila {
        background: #e8f4fd !important;
        border-left: 4px solid var(--primario, #1E88E5) !important;
        border-radius: 0 8px 8px 0 !important;
    }

    .producto-und-imp {
        font-size: 13px;
        color: #6b7280;
        margin-top: 2px;
    }

    .producto-imp {
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #1a1a1a;
    }

    .select-imp {
        color: var(--primario, #1E88E5) !important;
    }

    /* ============================================
       TOTAL - Display prominente
       ============================================ */
    .totales {
        padding: 4px 12px;
    }

    .color-total {
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px;
    }

    /* ============================================
       BOTON CLIENTE - Chip nativo
       ============================================ */
    .classBotonCliente {
        background: #e5e5ea !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #3a3a3c !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        transition: background 0.15s;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .classBotonCliente:active {
        background: #d1d1d6 !important;
    }

    .classBotonCliente i {
        font-size: 18px !important;
        color: #8e8e93;
    }

    .span-quitar-cliente {
        color: #ff3b30 !important;
        font-size: 20px;
    }

    /* ============================================
       BOTONES DE ACCION - Compactos para no desbordar
       ============================================ */
    .btnPri, .btnInfo, .btnFactPri {
        border: none !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 10px 12px !important;
        letter-spacing: 0.2px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: transform 0.15s;
    }

    .btnPri:active, .btnInfo:active, .btnFactPri:active {
        transform: scale(0.96);
    }

    .btnInfo {
        background: var(--primario, #1E88E5) !important;
        color: #fff !important;
    }

    .btnFactPri {
        background: #007aff !important;
        color: #fff !important;
    }

    .btn-warning {
        border: none !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 10px 12px !important;
        background: #ff9500 !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(255, 149, 0, 0.3);
    }

    .btn-warning:active {
        transform: scale(0.96);
    }

    .btnSecon {
        border: none !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 10px 12px !important;
        background: #8e8e93 !important;
        color: #fff !important;
    }

    .btnSecon:active {
        transform: scale(0.96);
    }

    .btnOrange {
        border: none !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 10px 12px !important;
        background: #ff6b35 !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
    }

    .btnOrange:active {
        transform: scale(0.96);
    }

    .btnOrange2 {
        border: none !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 10px 12px !important;
    }

    .btnSc {
        border: none !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 12px 16px !important;
        background: #34c759 !important;
        color: #fff !important;
        box-shadow: 0 3px 10px rgba(52, 199, 89, 0.35);
    }

    .btnSc:active {
        transform: scale(0.96);
    }

    /* Filas de botones - reducir margenes para ganar espacio */
    .contenedor-detalle .rowpv {
        margin-bottom: 4px !important;
    }

    .contenedor-detalle .rowpv[style*="margin-bottom"] {
        margin-bottom: 4px !important;
    }

    .contenedor-detalle .rowpv[style*="margin-left:7px"] {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    /* Ronda 2 QA de campo (§B): "Cliente" y "Deshacer" quedaban pegados. Causa: el override
       generico de arriba fuerza margin-bottom:4px en TODAS las filas .rowpv, pero el
       margin-top:-5px inline de los .colpad de Pagar/Deshacer no lo toca (esta en la
       COLUMNA, no en la fila) -> el contenido se montaba sobre el margen de la fila anterior.
       Se marcan las 3 filas de la secuencia [Enviar|PreCuenta] > [Cliente] > [Pagar|Deshacer]
       con .pos-cart-actionrow para darles el MISMO respiro (~10px) y anular ese -5px. Misma
       especificidad que el override generico (0,3,0) pero declarado despues -> gana. */
    .contenedor-detalle .rowpv.pos-cart-actionrow {
        margin-bottom: 10px !important;
    }

    .contenedor-detalle .rowpv.pos-cart-actionrow .colpad {
        margin-top: 0 !important;
    }

    /* ============================================
       MULTIPAGO - Formas de pago como cards nativos
       ============================================ */
    .buttonformaspago {
        height: 64px !important;
        border-radius: 16px !important;
        border: 1px solid #e5e5ea !important;
        background: #fff !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1c1c1e !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px;
        transition: transform 0.15s, box-shadow 0.15s;
    }

    .buttonformaspago:active {
        transform: scale(0.96) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
        background: #f2f2f7 !important;
        color: #1c1c1e !important;
    }

    .buttonformaspago img {
        height: 32px !important;
        border-radius: 6px;
    }

    /* Contenedor de operaciones */
    .card-oper {
        border-radius: 12px !important;
        background: #f9f9f9;
        padding: 8px 12px !important;
    }

    .card-nom-ope {
        font-weight: 500;
        color: #3a3a3c;
    }

    .card-nro-ope {
        font-size: 11px;
        color: #8e8e93;
    }

    .input-ope input {
        border-radius: 10px !important;
        border: 1px solid #e5e5ea !important;
        font-weight: 600;
        text-align: right;
    }

    .span-quitar-ope {
        color: #ff3b30 !important;
        font-size: 22px !important;
    }

    /* ============================================
       INPUTS - Estilo nativo
       ============================================ */
    .form-control {
        border-radius: 10px !important;
        border: 1px solid #e5e5ea !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
        background: #fff !important;
        transition: border-color 0.2s;
    }

    .form-control:focus {
        border-color: var(--primario, #1E88E5) !important;
        box-shadow: 0 0 0 3px rgba(5, 171, 247, 0.15) !important;
    }

    /* ============================================
       BARRA "Detalle de Pedido" / "Ir a Productos" - Footer fijo mejorado
       Mas alta (comoda al pulgar) + bordes superiores redondeados + sombra
       hacia arriba para que "flote" sobre el contenido, en vez de ir pegada
       al borde y baja como antes.
       ============================================ */
    .detalle-btn {
        height: 56px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: linear-gradient(135deg, #007aff, #0056d6) !important;
        border: none !important;
        border-radius: 16px 16px 0 0 !important;
        letter-spacing: 0.3px;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px;
        padding: 0 16px !important;
    }

    /* Variante "Detalle de Pedido": badge (izq) - etiqueta (centro-izq) - total (der, negrita).
       El chevron se conserva pegado a la etiqueta como indicador de "expandir". */
    .detalle-btn-expand {
        justify-content: space-between !important;
    }

    .detalle-btn-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 11px;
        background: rgba(255,255,255,0.28);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
    }

    .detalle-btn-label {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
    }

    .detalle-btn-total {
        flex: 0 0 auto;
        font-weight: 800;
        font-size: 16px;
    }

    /* Dejar espacio para el footer fijo de 56px + margen */
    .pv {
        padding-bottom: 56px !important;
    }

    /* ============================================
       PRODUCTOS GRID - Cards nativos
       ============================================ */
    .productos-contenedor {
        padding: 6px !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .productPos {
        background: #fff !important;
        border: none !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
        overflow: hidden;
        transition: transform 0.15s;
        padding: 8px !important;
    }

    .productPos:active {
        transform: scale(0.96);
        background: #f8f8f8 !important;
    }

    .producto-img-container {
        border-radius: 10px;
        overflow: hidden;
        background: #fafafa;
    }

    .producto-img-container img {
        width: 55% !important;
        object-fit: contain;
    }

    .producto-precio {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        background: #e8f5e9 !important;
        border-radius: 8px !important;
        padding: 3px 8px !important;
    }

    .producto-name {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1c1c1e;
        line-height: 1.3;
    }

    .producto-name-bottom {
        bottom: 6px !important;
        left: 8px;
        right: 8px;
    }

    .producto-favorito {
        font-size: 14px !important;
    }

    .producto-favorito .fa-info-circle {
        font-size: 15px !important;
    }

    /* ============================================
       CATEGORIAS - Pills modernas
       ============================================ */
    .categorias {
        margin-top: 4px !important;
    }

    .nav-item-color {
        border-radius: 10px !important;
        padding: 10px 18px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        margin: 2px !important;
        border: none !important;
        transition: background 0.15s, color 0.15s;
    }

    .nav-item.border {
        border: none !important;
    }

    .nav-item-color.active {
        background: var(--primario, #1E88E5) !important;
        color: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(5, 171, 247, 0.3);
    }

    .nav-item-color:not(.active) {
        background: #f0f0f5 !important;
        color: #3a3a3c !important;
    }

    .nav-item-color:not(.active):active {
        background: #e0e0e5 !important;
    }

    /* Barra de busqueda de productos */
    .botonestopder {
        padding: 8px !important;
        gap: 6px;
    }

    .botonestopder .input-group {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .botonestopder .input-group-text {
        background: #fff !important;
        border: 1px solid #e5e5ea !important;
        border-right: none !important;
        border-radius: 12px 0 0 12px !important;
    }

    .botonestopder .form-control {
        border-radius: 0 12px 12px 0 !important;
        border-left: none !important;
    }

    /* Paginacion */
    .contenedor-pag {
        padding: 8px !important;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }

    /* El chip "Cliente: IP" (equipo mozo) quedaba desalineado del texto de registros y, en
       pantallas angostas, podia empujar/desbordar los botones de paginado. Ahora .registros
       es flex: el chip se ve completo (o trunca con ellipsis si no entra) pero la paginacion
       (flex 0 0 auto mas abajo) nunca se comprime. */
    .registros {
        font-size: 12px !important;
        color: #8e8e93;
        display: flex !important;
        align-items: center !important;
        gap: 4px;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .pos-cliente-mozo-chip {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 0 !important;
    }

    .pos-cliente-mozo-sep {
        flex: 0 0 auto;
        color: #c7c7cc;
    }

    .pos-registros-txt {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pagination {
        flex: 0 0 auto !important;
    }

    .pagination .previous,
    .pagination .next {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    /* Menu dropdown (3 puntos) */
    .btnAccion {
        border-radius: 10px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ============================================
       CLIENTES - Lista nativa
       ============================================ */
    .card-cliente {
        border-bottom: none !important;
        background: #fff;
        border-radius: 12px !important;
        margin: 6px 8px !important;
        padding: 12px 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        font-size: 14px !important;
    }

    .card-cliente + .card-cliente {
        margin-top: 6px !important;
    }

    .seleccionfilatable {
        background: #e8f4fd !important;
        border-left: 4px solid var(--primario, #1E88E5) !important;
    }

    .cliente-nombres {
        align-items: center !important;
        gap: 8px;
    }

    .cliente-nombres div[style*="font-weight: bold"],
    .cliente-nombres div[style*="font-weight:bold"] {
        font-size: 15px !important;
        color: #1c1c1e;
        line-height: 1.3;
        flex: 1;
        min-width: 0;
        word-break: break-word;
    }

    /* Botones editar/eliminar del cliente */
    .card-cliente .btn-warning,
    .card-cliente .btn-danger,
    .card-cliente .btnPri {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 14px !important;
        box-shadow: none !important;
    }

    .card-cliente .btn-warning {
        background: #ff9500 !important;
        border: none !important;
        color: #fff !important;
    }

    .card-cliente .btn-danger {
        background: #ff3b30 !important;
        border: none !important;
        color: #fff !important;
    }

    /* Info del documento del cliente */
    .card-cliente .cliente-nombres:last-child {
        font-size: 13px !important;
        color: #8e8e93;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .card-cliente .cliente-nombres:last-child div {
        color: #8e8e93 !important;
    }

    /* FAB Nuevo Cliente */
    .btn-nuevo-cli {
        width: 56px !important;
        height: 56px !important;
        border-radius: 16px !important;
        font-size: 24px !important;
        background: var(--primario, #1E88E5) !important;
        border: none !important;
        box-shadow: 0 4px 16px rgba(5, 171, 247, 0.4) !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    .btn-nuevo-cli:active {
        transform: scale(0.9);
    }

    /* Contenedor scroll de clientes */
    .card-cliente + .card-cliente {
        border-top: none !important;
    }

    /* ============================================
       CONTENIDO PRINCIPAL - Ajustar para footer
       ============================================ */
    .contenido {
        bottom: 0;
    }

    /* ============================================
       MODALES - Sheet nativo desde abajo
       ============================================ */
    .modal-dialog {
        margin: 0 auto !important;
        max-width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        align-items: flex-end !important;
    }

    .modal-content {
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.15) !important;
        max-height: 92vh;
        overflow-y: auto;
        width: 100%;
    }

    .modal-header {
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 16px 20px !important;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
        border-radius: 20px 20px 0 0;
    }

    .modal-header .modal-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1c1c1e;
    }

    .modal-header .close {
        background: #f2f2f7 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        color: #8e8e93 !important;
        padding: 0 !important;
        opacity: 1 !important;
    }

    .modal-body {
        padding: 16px 20px !important;
    }

    /* Campos del formulario */
    .modal-body .row.mb-2 {
        margin-bottom: 16px !important;
    }

    .modal-body .col-form-label-sm {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #8e8e93 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px;
        margin-bottom: 6px !important;
        display: block;
    }

    .modal-body .form-select,
    .modal-body .form-select-sm {
        border-radius: 12px !important;
        border: 1px solid #e5e5ea !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        background-color: #f9f9fb !important;
        height: auto !important;
        appearance: auto;
    }

    .modal-body .form-control-border,
    .modal-body .input-group-sm .form-control {
        border-radius: 12px !important;
        border: 1px solid #e5e5ea !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        background-color: #f9f9fb !important;
    }

    .modal-body .form-control-border:focus,
    .modal-body .input-group-sm .form-control:focus {
        border-color: var(--primario, #1E88E5) !important;
        box-shadow: 0 0 0 3px rgba(5, 171, 247, 0.12) !important;
        background: #fff !important;
    }

    .modal-body .form-check-input {
        width: 44px !important;
        height: 24px !important;
        border-radius: 12px !important;
    }

    .modal-body .form-check-label {
        font-size: 14px !important;
        margin-left: 4px;
    }

    .modal-footer {
        border-top: 1px solid #f0f0f0 !important;
        padding: 12px 16px 28px !important;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 1;
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .modal-footer .float-right {
        width: 100%;
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .modal-footer .btn {
        border-radius: 12px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .modal-footer .btnSc {
        background: #34c759 !important;
        border: none !important;
        color: #fff !important;
    }

    .modal-footer .btn-secondary {
        background: #8e8e93 !important;
        border: none !important;
        color: #fff !important;
    }

    .modal-footer .btnDefecto {
        background: #f2f2f7 !important;
        border: none !important;
        color: #1c1c1e !important;
    }

    .msjeError {
        padding: 10px 20px !important;
        font-size: 13px !important;
        color: #ff3b30 !important;
        background: #fff5f5 !important;
        margin: 0 16px 8px !important;
        border-radius: 10px !important;
        font-weight: 500;
    }

    .modal-backdrop {
        background: rgba(0,0,0,0.4) !important;
    }

    /* Tabla dentro de modales (busqueda clientes) */
    .modal-body .table-responsive {
        border-radius: 12px !important;
        overflow: hidden;
    }

    .modal-body .table {
        margin-bottom: 0 !important;
    }

    .modal-body .table thead th {
        background: #f2f2f7 !important;
        border: none !important;
        font-size: 12px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #8e8e93 !important;
        padding: 10px 12px !important;
    }

    .modal-body .table tbody td {
        border-color: #f0f0f0 !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    .modal-body .input-group.has-clearable {
        gap: 4px;
    }

    .modal-body .input-group.has-clearable .form-control {
        border-radius: 12px !important;
        flex: 1;
    }

    .modal-body .input-group.has-clearable .btn {
        border-radius: 12px !important;
        padding: 8px 14px !important;
    }

    /* ============================================
       PRODUCTOS LIST PAGE - Cards modernos
       ============================================ */
    .card-cliente di {
        font-weight: 400 !important;
        color: #6b7280;
    }

    .card-cliente .cliente-nombres {
        margin-bottom: 2px;
    }

    .card-cliente .cliente-nombres div[style*="font-weight: bold"][style*="width: 100%"] {
        font-size: 15px !important;
        color: #1c1c1e !important;
        margin-bottom: 6px;
    }

    /* Boton acciones (3 puntos) en la lista */
    .card-cliente .dropdown .btnAccion {
        background: #f2f2f7 !important;
        border: none !important;
        border-radius: 10px !important;
        color: #8e8e93 !important;
    }

    /* Dropdown menu */
    .dropdown-menu.menu-acciones {
        border-radius: 14px !important;
        border: none !important;
        box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
        padding: 6px !important;
        overflow: hidden;
    }

    .dropdown-menu .dropdown-item {
        border-radius: 8px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        color: #1c1c1e !important;
    }

    .dropdown-menu .dropdown-item:active {
        background: #f2f2f7 !important;
        color: #1c1c1e !important;
    }

    .dropdown-menu .dropdown-item i {
        width: 24px;
        text-align: center;
        margin-right: 6px;
        color: #8e8e93;
    }

    /* Header de pagina de productos */
    .breadcrumb {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ============================================
       CAJA PAGE - Vista nativa
       ============================================ */

    /* Tabs nativos */
    .nav-tabs {
        border-bottom: none !important;
        gap: 0 !important;
        background: #f2f2f7;
        border-radius: 10px;
        padding: 3px;
    }

    .nav-item-color-salon {
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #8e8e93 !important;
        background: transparent !important;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .nav-item-color-salon.active {
        background: #fff !important;
        color: #1c1c1e !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        border-radius: 8px !important;
    }

    /* Info de caja como cards */
    .page-title-bar + header .rowpv {
        margin-bottom: 2px !important;
    }

    .col-form-label-sm {
        font-size: 14px !important;
    }

    /* Tabla de pagos */
    .sftabla {
        margin-bottom: 0 !important;
    }

    .sftabla thead.bg-secondary th {
        background: var(--primario, #1E88E5) !important;
        color: #fff !important;
        border: none !important;
        font-size: 12px !important;
        padding: 10px 8px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .sftabla thead.bg-secondary th:first-child {
        border-radius: 12px 0 0 0;
    }

    .sftabla thead.bg-secondary th:last-child {
        border-radius: 0 12px 0 0;
    }

    .sftabla tbody td {
        padding: 12px 8px !important;
        font-size: 14px !important;
        border-color: #f0f0f0 !important;
    }

    .sftabla tfoot th {
        background: #f0f8ff !important;
        color: var(--primario, #1E88E5) !important;
        border: none !important;
        font-size: 14px !important;
        padding: 12px 8px !important;
    }

    .sftabla tfoot th:first-child {
        border-radius: 0 0 0 12px;
    }

    .sftabla tfoot th:last-child {
        border-radius: 0 0 12px 0;
    }

    .redondear {
        border-radius: 12px !important;
        overflow: hidden;
    }

    /* Alerta de caja */
    .alert-caja {
        border-radius: 14px !important;
        font-size: 18px !important;
        padding: 16px !important;
        border: none !important;
        background: #fff3cd !important;
    }

    /* Badge de estado */
    .badge {
        border-radius: 8px !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* ============================================
       PRODUCTOS LIST - Cards y toolbar
       ============================================ */
    .prod-card {
        background: #fff;
        border-radius: 14px;
        padding: 14px 16px;
        margin: 6px 8px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .prod-card + .prod-card {
        margin-top: 6px;
    }

    .prod-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

    .prod-card-nombre {
        font-size: 15px;
        font-weight: 700;
        color: #1c1c1e;
        flex: 1;
        line-height: 1.3;
    }

    .prod-card-header .btnAccion {
        background: #f2f2f7 !important;
        border: none !important;
        border-radius: 10px !important;
        color: #8e8e93 !important;
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }

    .prod-card-info {
        display: flex;
        gap: 16px;
        margin-bottom: 6px;
    }

    .prod-card-row {
        display: flex;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .prod-card-label {
        font-size: 12px;
        color: #8e8e93;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .prod-card-value {
        font-size: 13px;
        color: #3a3a3c;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .prod-card-precios {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .prod-card-precio {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        background: #f9f9fb;
        border-radius: 8px;
        padding: 6px 8px;
    }

    .prod-card-precio-label {
        font-size: 10px;
        color: #8e8e93;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .prod-card-precio-valor {
        font-size: 14px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .prod-card-precio-venta {
        color: #34c759 !important;
    }

    /* Toolbar de busqueda de productos */
    .breadcrumb .input-group {
        flex-wrap: nowrap !important;
    }

    .breadcrumb .input-group > .btn,
    .breadcrumb .input-group > div > .btn {
        border-radius: 10px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
    }

    /* Toolbar del listado de productos: una sola fila ordenada (buscador flexible +
       acciones como iconos compactos). El grid col-8/col-4 de Bootstrap hacia wrap
       de Excel/Importar -> se veian desalineados (QA mobile). */
    .prod-list-toolbar .row {
        flex-wrap: nowrap !important;
        align-items: center;
        margin: 0 !important;
        gap: 8px;
    }

    .prod-list-toolbar .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* Bloque del buscador: ocupa el espacio restante */
    .prod-list-toolbar .row > .col-8 {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Bloque de acciones (Excel / Importar): iconos 40x40 alineados a la derecha */
    .prod-list-toolbar .row > .col-4 {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }

    .prod-list-toolbar .row > .col-4 > .btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* ============================================
       PRODUCTO FORM - Mobile layout mejorado
       ============================================ */
    .prod-form-mobile {
        background: #fff;
        border-radius: 16px;
        padding: 16px !important;
        margin: 0 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        overflow-y: auto;
        max-height: calc(100vh - 120px);
    }

    .prod-form-mobile .row.mb-2,
    .prod-form-mobile .row.mb-3,
    .prod-form-mobile .row.mb-1 {
        margin-bottom: 12px !important;
    }

    /* Column layout: 4 col-3 -> 2x2 grid */
    .prod-form-mobile .row > .col-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 4px;
    }

    .prod-form-mobile .row > .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 4px;
    }

    /* Wide inputs go full width */
    .prod-form-mobile .row > .col-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 2px;
    }

    /* Estado row adjustments */
    .prod-form-mobile .row > .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .prod-form-mobile .col-form-label-sm {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #8e8e93 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px;
        padding: 6px 0 !important;
        line-height: 1.4 !important;
    }

    .prod-form-mobile .col-form-label {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .prod-form-mobile .form-control-border,
    .prod-form-mobile .input-group .form-control {
        border-radius: 10px !important;
        border: 1.5px solid #e5e5ea !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        background: #f9f9fb !important;
        min-height: 44px;
    }

    .prod-form-mobile .form-control-border:focus,
    .prod-form-mobile .input-group .form-control:focus {
        border-color: var(--primario, #1E88E5) !important;
        box-shadow: 0 0 0 3px rgba(5, 171, 247, 0.12) !important;
        background: #fff !important;
    }

    .prod-form-mobile .form-select,
    .prod-form-mobile .form-select-sm {
        border-radius: 10px !important;
        border: 1.5px solid #e5e5ea !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        background-color: #f9f9fb !important;
        height: auto !important;
        min-height: 44px;
    }

    .prod-form-mobile .input-group-prepend {
        border: none !important;
    }

    .prod-form-mobile .input-group-prepend .btn {
        border-radius: 10px !important;
        border: 1.5px solid #e5e5ea !important;
        background: #f2f2f7 !important;
        color: var(--primario, #1E88E5) !important;
        min-height: 44px;
        min-width: 44px;
    }

    .prod-form-mobile .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-left: 0;
    }

    .prod-form-mobile .form-check-input {
        width: 44px !important;
        height: 24px !important;
        border-radius: 12px !important;
        flex-shrink: 0;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    .prod-form-mobile .form-check-label {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #3a3a3c;
        margin-left: 10px;
    }

    .prod-form-mobile .boton-standar-rw {
        border-radius: 12px !important;
        font-size: 14px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .prod-form-mobile .upload-btn-wrapper {
        margin-top: 4px;
    }

    .prod-form-mobile .o_field_image img {
        border-radius: 12px !important;
        max-height: 200px !important;
    }

    /* Input group flex fix */
    .prod-form-mobile .input-group.form-sm {
        flex-wrap: nowrap !important;
    }

    /* Seccion CONFIGURACIONES: toggles como lista de ajustes (una fila c/u, ancho
       completo, etiqueta a la izquierda y switch a la derecha). Antes en 2 columnas
       las etiquetas se cortaban ("Para Compra", "Perecib", "Descrip") y quedaba
       espacio desperdiciado. */
    .prod-form-mobile .prod-switches > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .prod-form-mobile .prod-switches .form-check.form-switch {
        display: flex;
        flex-direction: row-reverse;      /* input al final del DOM -> queda a la DERECHA */
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-left: 0;
        gap: 12px;
        min-height: 50px;
        border-bottom: 1px solid #f0f0f0;
    }

    .prod-form-mobile .prod-switches .form-check-label {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }

    .prod-form-mobile .prod-switches .form-check-input {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }

    /* Header del formulario como barra de app: [< atras] [titulo ...] [Guardar]
       en UNA sola fila. Antes flex-wrap:wrap mandaba "Guardar" a otra linea
       alineado a la izquierda -> se veia desordenado (QA mobile). */
    .prod-form-mobile .prod-form-header {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 6px 0 12px !important;
    }

    .prod-form-mobile .prod-form-header-left {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    .prod-form-mobile .prod-form-header-right {
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
    }

    /* Boton "Atras": solo el icono (chevron), como back nativo */
    .prod-form-mobile .prod-form-header-left > .btnSecon {
        font-size: 0 !important;
        padding: 10px 12px !important;
        flex: 0 0 auto;
    }

    .prod-form-mobile .prod-form-header-left > .btnSecon i {
        font-size: 16px !important;
    }

    /* Titulo: ocupa el resto y trunca si es largo */
    .prod-form-mobile .prod-form-title {
        font-size: 16px !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Guardar: compacto y siempre a la derecha */
    .prod-form-mobile .prod-form-header-right > .btnSc {
        padding: 10px 14px !important;
        white-space: nowrap;
    }

    /* ============================================
       CONFIG DISPOSITIVO - "Impresion de este equipo"
       El sub-componente se invoca con IsPhone=false (inline width:55%) -> en telefono
       la caja quedaba angosta y centrada, desperdiciando los costados. En movil = 100%.
       ============================================ */
    .contenedor-IE {
        width: 100% !important;
    }

    /* ============================================
       TABS - Estado activo visible (salon y caja)
       ============================================ */
    .nav-item-color-salon.active,
    .nav-item-color-salon.tag-caja-active {
        background: #fff !important;
        color: var(--primario, #1E88E5) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
    }

    /* Strip de zonas del SALON (SalonMesasView .pos-salon-zones/.pos-salon-zone: "SALON
       PRINCIPAL"/"SALON PRIVADO") - hoy sin fondo propio, se confundia con el panel
       blanco de las mesas justo debajo (.pos-salon-floor/.pos-salon-grid, tambien blanco).
       Fondo tenue + borde inferior para que se lea como una barra aparte. NO se toca el
       color de la tab activa (.pos-salon-zone.on) ni el contador (.pill). */
    .pos-salon-zones {
        background: #eef2f7 !important;
        border-bottom: 1px solid #dde4ec !important;
        border-radius: 10px 10px 0 0 !important;
    }

    /* ============================================
       CAJA PAGE - Operaciones cards movil
       ============================================ */
    .caja-ope-card {
        background: #fff;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 8px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        border: 1px solid #f0f0f0;
    }

    .caja-ope-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .caja-ope-tipo {
        font-size: 12px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 8px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .caja-ope-ingreso {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .caja-ope-egreso {
        background: #fce4ec;
        color: #c62828;
    }

    .caja-ope-monto {
        font-size: 18px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .caja-ope-detalle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .caja-ope-texto {
        font-size: 14px;
        font-weight: 500;
        color: #3a3a3c;
    }

    .caja-ope-concepto {
        font-size: 12px;
        color: #8e8e93;
        background: #f2f2f7;
        padding: 3px 8px;
        border-radius: 6px;
    }

    .caja-ope-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
    }

    .caja-ope-info {
        font-size: 12px;
        color: #8e8e93;
    }

    .caja-ope-acciones {
        display: flex;
        gap: 6px;
    }

    .caja-ope-acciones .btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }

    /* ============================================
       CAJA PAGE - Ventas del turno cards movil
       ============================================ */
    .caja-venta-card {
        background: #fff;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 8px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        border: 1px solid #f0f0f0;
    }

    .caja-venta-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .caja-venta-doc {
        font-size: 13px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .caja-venta-total {
        font-size: 16px;
        font-weight: 700;
        color: var(--primario, #1E88E5);
    }

    .caja-venta-detalle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .caja-venta-cliente {
        font-size: 13px;
        color: #3a3a3c;
        font-weight: 500;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 8px;
    }

    .caja-venta-fecha {
        font-size: 12px;
        color: #8e8e93;
        white-space: nowrap;
    }

    .caja-venta-ref {
        font-size: 12px;
        color: #8e8e93;
        margin-bottom: 6px;
    }

    .caja-venta-acciones {
        display: flex;
        gap: 6px;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
        justify-content: flex-end;
    }

    .caja-venta-acciones .btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }

    /* ============================================
       CAJA PAGE - Cards nativos para formas de pago
       ============================================ */
    .caja-fp-card {
        background: #fff;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        border: 1px solid #f0f0f0;
    }

    .caja-fp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .caja-fp-nombre {
        font-size: 15px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .caja-fp-input {
        width: 110px !important;
        text-align: right !important;
        border-radius: 10px !important;
        border: 1px solid #e5e5ea !important;
        padding: 8px 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: #f9f9fb !important;
        transition: border-color 0.2s;
    }

    .caja-fp-input:focus {
        border-color: var(--primario, #1E88E5) !important;
        box-shadow: 0 0 0 3px rgba(5, 171, 247, 0.12) !important;
        background: #fff !important;
    }

    .caja-fp-total-usuario {
        font-size: 16px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .caja-fp-detalle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .caja-fp-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
    }

    .caja-fp-label {
        font-size: 13px;
        color: #8e8e93;
        font-weight: 500;
    }

    .caja-fp-valor {
        font-size: 14px;
        font-weight: 600;
        color: #3a3a3c;
        text-align: right;
    }

    .caja-fp-item-total {
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px dashed #e0e0e0;
    }

    .caja-fp-item-total .caja-fp-label {
        font-size: 14px;
        font-weight: 600;
        color: #1c1c1e;
    }

    .caja-fp-item-total .caja-fp-valor {
        font-size: 16px;
        font-weight: 700;
        color: var(--primario, #1E88E5);
    }

    /* ============================================
       SCANNER DE BARRAS - Camera overlay
       ============================================ */
    .barcode-scanner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10010;
        background: #000;
        display: flex;
        flex-direction: column;
    }

    .barcode-scanner-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
    }

    .barcode-scanner-header h6 {
        margin: 0;
        font-weight: 600;
    }

    .barcode-scanner-close {
        background: rgba(255,255,255,0.2) !important;
        border: none !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        color: #fff !important;
        font-size: 18px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .barcode-video-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .barcode-video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .barcode-scanner-guide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        height: 140px;
        border: 2px solid rgba(255,255,255,0.6);
        border-radius: 12px;
        z-index: 1;
    }

    .barcode-scanner-guide::after {
        content: 'Apunte al codigo de barras';
        position: absolute;
        bottom: -32px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.7);
        font-size: 13px;
        white-space: nowrap;
    }

    .barcode-scanner-line {
        position: absolute;
        top: 50%;
        left: 10%;
        right: 10%;
        height: 2px;
        background: #ff3b30;
        z-index: 1;
        animation: barcode-scan-line 2s ease-in-out infinite;
    }

    @keyframes barcode-scan-line {
        0%, 100% { top: 35%; }
        50% { top: 65%; }
    }

    /* Boton de scan en la barra de busqueda */
    .btn-scan-barcode {
        background: #ff9500 !important;
        border: none !important;
        border-radius: 10px !important;
        color: #fff !important;
        width: 40px;
        height: 36px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        box-shadow: 0 2px 6px rgba(255,149,0,0.3);
        margin-left: 4px;
    }

    .btn-scan-barcode:active {
        transform: scale(0.92);
    }

    /* ============================================
       CONFIGURACIONES PAGE - Settings list nativa
       ============================================ */
    .config-mobile-list {
        padding: 4px 0;
    }

    .config-mobile-item {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background 0.15s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .config-mobile-item:active {
        background: #f2f2f7;
        transform: scale(0.98);
    }

    .config-mobile-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .config-mobile-text {
        flex: 1;
        margin-left: 14px;
    }

    .config-mobile-title {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #1c1c1e;
    }

    .config-mobile-desc {
        display: block;
        font-size: 13px;
        color: #8e8e93;
        margin-top: 2px;
    }

    .config-mobile-arrow {
        color: #c7c7cc;
        font-size: 14px;
        margin-left: 8px;
    }

    /* ============================================
       HISTORIAL VENTAS - Cards de venta
       ============================================ */
    .hv-card {
        background: #fff;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 8px;
        border: 1.5px solid #e5e5ea;
        cursor: pointer;
        transition: all 0.15s;
    }

    .hv-card:active {
        background: #f2f2f7;
    }

    .hv-card.hv-selected {
        border-color: #007aff;
        background: #f0f7ff;
    }

    .hv-card.hv-anulado {
        opacity: 0.55;
    }

    .hv-card.hv-anulado .hv-card-doc,
    .hv-card.hv-anulado .hv-card-cliente {
        text-decoration: line-through;
    }

    .hv-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .hv-card-doc {
        font-size: 15px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .hv-card-total {
        font-size: 16px;
        font-weight: 700;
        color: #34c759;
    }

    .hv-card-cliente {
        font-size: 14px;
        color: #3c3c43;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hv-card-fecha {
        font-size: 12px;
        color: #8e8e93;
    }

    .hv-totals-bar {
        display: flex;
        justify-content: space-between;
        padding: 10px 16px;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 8px;
        border: 1.5px solid #e5e5ea;
    }

    .hv-totals-bar span {
        font-size: 13px;
        font-weight: 600;
    }

    /* ============================================
       HISTORIAL TURNOS - Cards de turno
       ============================================ */
    .turno-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 10px;
        border: 1.5px solid #e5e5ea;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .turno-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .turno-card-caja {
        font-size: 16px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .turno-card-estado {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
    }

    .turno-card-estado.abierta {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .turno-card-estado.cerrada {
        background: #fce4ec;
        color: #c62828;
    }

    .turno-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .turno-card-field {
        display: flex;
        flex-direction: column;
    }

    .turno-card-label {
        font-size: 11px;
        color: #8e8e93;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .turno-card-value {
        font-size: 14px;
        font-weight: 600;
        color: #1c1c1e;
        margin-top: 2px;
    }

    .turno-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .turno-card-user {
        font-size: 13px;
        color: #8e8e93;
    }

    .turno-card-btn {
        background: #007aff;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
    }

    .turno-card-btn:active {
        opacity: 0.7;
    }

    /* ============================================
       REPORTE UTILIDAD - Cards
       ============================================ */
    .util-card {
        background: #fff;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 8px;
        border: 1.5px solid #e5e5ea;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .util-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .util-card-producto {
        font-size: 15px;
        font-weight: 700;
        color: #1c1c1e;
        flex: 1;
        margin-right: 8px;
    }

    .util-card-utilidad {
        font-size: 15px;
        font-weight: 700;
        color: #34c759;
        white-space: nowrap;
    }

    .util-card-utilidad.negativa {
        color: #ff3b30;
    }

    .util-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .util-card-field {
        display: flex;
        flex-direction: column;
    }

    .util-card-label {
        font-size: 11px;
        color: #8e8e93;
    }

    .util-card-value {
        font-size: 13px;
        font-weight: 500;
        color: #1c1c1e;
    }

    .util-totals {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        background: #fff;
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 10px;
        border: 1.5px solid #e5e5ea;
    }

    .util-totals-item {
        text-align: center;
    }

    .util-totals-label {
        font-size: 10px;
        color: #8e8e93;
        text-transform: uppercase;
        display: block;
    }

    .util-totals-value {
        font-size: 14px;
        font-weight: 700;
        color: #1c1c1e;
        display: block;
        margin-top: 2px;
    }

    /* ============================================
       COMMON - Toolbar y headers de paginas
       ============================================ */
    .tabla-fija {
        padding: 0 8px !important;
    }

    .cardnew-sf {
        border-radius: 12px !important;
        border: 1.5px solid #e5e5ea !important;
        box-shadow: none !important;
    }

    /* ============================================
       REPORT PAGES - Shared mobile card styles
       ============================================ */
    .rep-card {
        background: #fff;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 8px;
        border: 1.5px solid #e5e5ea;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .rep-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .rep-card-title {
        font-size: 15px;
        font-weight: 700;
        color: #1c1c1e;
        flex: 1;
        margin-right: 8px;
    }

    .rep-card-amount {
        font-size: 16px;
        font-weight: 700;
        color: #34c759;
        white-space: nowrap;
    }

    .rep-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .rep-card-field {
        display: flex;
        flex-direction: column;
    }

    .rep-card-label {
        font-size: 11px;
        color: #8e8e93;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .rep-card-value {
        font-size: 13px;
        font-weight: 500;
        color: #1c1c1e;
        margin-top: 1px;
    }

    .rep-totals-bar {
        display: flex;
        justify-content: space-around;
        padding: 10px 16px;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 8px;
        border: 1.5px solid #e5e5ea;
    }

    .rep-totals-bar span {
        font-size: 13px;
        font-weight: 600;
    }

    /* ============================================
       CAJAS LIST - Native mobile cards
       ============================================ */
    .cajas .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .cajas .card {
        border-radius: 14px !important;
        border: 1.5px solid #e5e5ea !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }

    .cajas .card-body {
        padding: 16px !important;
    }

    .cajas .card-body h5 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1c1c1e !important;
        margin-bottom: 0 !important;
    }

    .cajas .badge {
        font-size: 13px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
    }

    .cajas .btn {
        border-radius: 10px !important;
        padding: 10px 16px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    .cajas .dropdown-menu {
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
        border: 1px solid #e5e5ea !important;
        padding: 4px !important;
    }

    .cajas .dropdown-item {
        border-radius: 8px !important;
        padding: 10px 14px !important;
    }

    /* ============================================
       IMPRESORAS CONFIG - Mobile card improvements
       ============================================ */
    .contenidoform .card.cursor-grab {
        border-radius: 14px !important;
        border: 1.5px solid #e5e5ea !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        height: auto !important;
        min-height: 120px;
    }

    .contenidoform .card.cursor-grab .card-body {
        padding: 14px !important;
    }

    .contenidoform .card.cursor-grab h4 {
        font-size: 17px !important;
    }

    .contenidoform .card.cursor-grab h6 {
        font-size: 14px !important;
    }

    .contenidoform .dropdown-menu {
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
        border: 1px solid #e5e5ea !important;
        padding: 4px !important;
    }

    .contenidoform .dropdown-item {
        border-radius: 8px !important;
        padding: 10px 14px !important;
    }

    /* ============================================
       FORMA PAGO CONFIG - Mobile card view
       ============================================ */
    .fp-config-card {
        background: #fff;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 8px;
        border: 1.5px solid #e5e5ea;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .fp-config-info {
        flex: 1;
    }

    .fp-config-nombre {
        font-size: 16px;
        font-weight: 700;
        color: #1c1c1e;
    }

    .fp-config-detalle {
        font-size: 13px;
        color: #8e8e93;
        margin-top: 2px;
    }

    .fp-config-actions {
        display: flex;
        gap: 8px;
    }

    .fp-config-actions .btn {
        width: 38px;
        height: 38px;
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        font-size: 14px;
    }

    /* ============================================
       ORDENES COMPONENT - Card improvements
       ============================================ */
    .card-orden {
        border-radius: 14px !important;
        border: 1.5px solid #e5e5ea !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        margin-bottom: 10px !important;
    }

    /* ============================================
       MODALS - Mobile native centrado + estilo
       ============================================ */
    .modal-dialog {
        display: flex !important;
        align-items: center !important;
        min-height: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
        max-width: calc(100% - 24px) !important;
    }

    .modal-content {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
        width: 100%;
    }

    .modal-header {
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 14px 16px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .modal-header .modal-title {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-body .form-select,
    .modal-body .form-control {
        font-size: 16px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        border: 1.5px solid #e5e5ea !important;
        height: auto !important;
        min-height: 44px;
    }

    .modal-body .form-select-sm,
    .modal-body .form-control-sm,
    .modal-body .input-group-sm > .form-control {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 44px;
    }

    .modal-body label,
    .modal-body .col-form-label-sm,
    .modal-body .col-form-label {
        font-size: 15px !important;
    }

    .modal-footer {
        border-top: 1px solid #f0f0f0 !important;
        padding: 12px 16px !important;
        border-radius: 0 0 16px 16px !important;
    }

    .modal-footer .btn {
        border-radius: 10px !important;
        padding: 12px 20px !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        min-height: 44px;
    }

    .modal-footer .btnSc {
        background: #34c759 !important;
        border-color: #34c759 !important;
    }

    .modal-footer .btnDefecto {
        background: #f2f2f7 !important;
        color: #1c1c1e !important;
        border: 1.5px solid #e5e5ea !important;
    }

    /* ModalTipoDoc - document selection cards */
    .productPos.card-doc {
        border-radius: 14px !important;
        margin: 6px !important;
        min-height: 80px;
    }

    .productPos.card-doc .cont-name-serie {
        font-size: 15px !important;
    }

    /* ModalMovimientosStock */
    .modal-lg {
        max-width: calc(100% - 24px) !important;
    }

    /* ModalImportes - quantity buttons */
    .modal-body .btn-sm {
        min-width: 40px;
        min-height: 40px;
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ============================================
       TOOLBAR HEADER - Filtros y busqueda alineados
       ============================================ */
    header {
        padding: 6px 8px !important;
        margin-bottom: 0 !important;
    }

    header .row {
        align-items: center !important;
        margin: 0 !important;
    }

    header .breadcrumb {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        width: 100%;
    }

    header .breadcrumb .input-group {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    header .breadcrumb .input-group .form-control {
        border-radius: 10px !important;
        min-height: 38px;
        font-size: 14px !important;
        border: 1.5px solid #e5e5ea !important;
        flex: 1;
        min-width: 0;
    }

    header .breadcrumb .input-group .btn {
        border-radius: 10px !important;
        min-height: 38px;
        white-space: nowrap;
        flex-shrink: 0;
        padding: 6px 10px !important;
        font-size: 14px !important;
    }

    header .breadcrumb .input-group-append {
        display: flex !important;
        gap: 4px;
        margin-left: 0 !important;
    }

    header .breadcrumb .input-group > div:first-child {
        flex-shrink: 0;
    }

    /* Boton Filtrar estilo */
    header .btnLight {
        border-radius: 10px !important;
        min-height: 38px;
        min-width: 38px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
    }

    /* Boton Mostrar/Buscar */
    header .btnFactPri {
        border-radius: 10px !important;
        min-height: 38px;
        min-width: 38px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Botones de accion derecha (Excel, Imprimir) */
    header .btnSc,
    header .btnSecon,
    header .btnPri {
        border-radius: 10px !important;
        min-height: 38px;
        min-width: 38px;
        padding: 6px 10px !important;
        font-size: 14px !important;
    }

    /* Panel de filtro dropdown alineado */
    header .dropdown-menu.show,
    header div[class*="dropdown-menu show"] {
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
        border: 1px solid #e5e5ea !important;
        padding: 12px !important;
        z-index: 1050 !important;
        position: absolute !important;
        left: 0 !important;
        top: 100% !important;
        width: 280px !important;
        max-width: calc(100vw - 32px) !important;
    }

    header .dropdown-menu .form-select,
    header .dropdown-menu .form-control {
        border-radius: 10px !important;
        min-height: 40px;
        font-size: 15px !important;
        border: 1.5px solid #e5e5ea !important;
    }

    header .dropdown-menu .btn {
        border-radius: 10px !important;
        min-height: 38px;
        font-size: 14px !important;
    }

    /* ============================================
       FAC DATE PICKER - Fix en panels de filtro
       ============================================ */
    header .fac-dp,
    .dropdown-menu .fac-dp,
    div[aria-labelledby] .fac-dp {
        display: flex !important;
        width: 100% !important;
    }

    header .fac-dp-wrapper,
    .dropdown-menu .fac-dp-wrapper,
    div[aria-labelledby] .fac-dp-wrapper {
        border-radius: 8px !important;
        border: 1.5px solid #e5e5ea !important;
        min-height: 36px;
        width: 100% !important;
        overflow: visible !important;
    }

    header .fac-dp-input,
    .dropdown-menu .fac-dp-input,
    div[aria-labelledby] .fac-dp-input {
        font-size: 13px !important;
        padding: 0 8px !important;
        min-height: 34px;
        height: 34px !important;
        min-width: 80px !important;
    }

    header .fac-dp-toggle,
    .dropdown-menu .fac-dp-toggle,
    div[aria-labelledby] .fac-dp-toggle {
        width: 32px !important;
        height: 34px !important;
        flex-shrink: 0;
    }

    header .fac-dp-popup,
    .dropdown-menu .fac-dp-popup,
    div[aria-labelledby] .fac-dp-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 2000 !important;
        min-width: 290px;
        max-width: calc(100vw - 32px);
        border-radius: 16px !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
    }

    header .fac-dp-overlay,
    .dropdown-menu .fac-dp-overlay,
    div[aria-labelledby] .fac-dp-overlay {
        z-index: 1999 !important;
        background: rgba(0,0,0,0.3);
    }

    /* Wrapper .small que contiene el datepicker */
    header .small,
    .dropdown-menu .small {
        width: 100%;
    }

    /* ============================================
       MODAL IMPORTES - Fila cantidad flex
       ============================================ */
    .imp-cantidad-row {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .imp-cantidad-row .btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        flex-shrink: 0;
        font-size: 16px !important;
    }

    .imp-cantidad-row .input-group {
        flex: 1;
        min-width: 0;
    }

    .imp-cantidad-row .input-group .form-control {
        border-radius: 10px !important;
        text-align: center;
        font-size: 18px !important;
        font-weight: 600 !important;
        min-height: 44px;
    }

    /* ============================================
       EMPTY STATE - Sin datos encontrados
       ============================================ */
    .empty-state-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        min-height: 200px;
    }

    .empty-state-icon {
        margin-bottom: 16px;
        opacity: 0.7;
    }

    .empty-state-text {
        font-size: 17px;
        font-weight: 600;
        color: #3a3a3c;
        margin: 0 0 6px 0;
    }

    .empty-state-subtext {
        font-size: 14px;
        color: #8e8e93;
        margin: 0;
    }

    /* ============================================
       ACCESOS POR GRUPO - Mobile cards
       ============================================ */
    .acceso-group-card {
        background: #fff;
        border-radius: 14px;
        border: 1.5px solid #e5e5ea;
        margin-bottom: 10px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    .acceso-group-header {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        background: #f9f9fb;
        cursor: pointer;
        gap: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .acceso-group-header:active {
        background: #f0f0f5;
    }

    .acceso-group-arrow {
        font-size: 18px;
        color: #8e8e93;
        width: 18px;
        text-align: center;
        transition: transform 0.2s;
    }

    .acceso-group-title {
        font-size: 15px;
        font-weight: 600;
        color: #1c1c1e;
        flex: 1;
    }

    .acceso-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px 12px 44px;
        border-top: 1px solid #f2f2f7;
        gap: 12px;
    }

    .acceso-item-info {
        flex: 1;
        min-width: 0;
    }

    .acceso-item-name {
        display: block;
        font-size: 15px;
        font-weight: 500;
        color: #1c1c1e;
    }

    .acceso-item-desc {
        display: block;
        font-size: 13px;
        color: #8e8e93;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .acceso-item-check .form-check-input {
        width: 44px !important;
        height: 24px !important;
        border-radius: 12px !important;
        cursor: pointer;
        margin: 0 !important;
    }

    /* Tabs estilo segmented control */
    .acceso-tabs {
        display: flex;
        background: #f2f2f7;
        border-radius: 10px;
        padding: 3px;
        margin: 0 8px 12px 8px;
    }

    .acceso-tab {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #8e8e93;
        border-radius: 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s;
    }

    .acceso-tab.active {
        background: #fff;
        color: #1c1c1e;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

    /* ============================================
       BADGE "YA AGREGADO" - card de producto (restaurante)
       Ronda 2 QA de campo (§D): al tocar un producto no habia feedback de cuantas unidades
       ya iban en la orden. Circulo verde en la card, esquina inferior-derecha de la banda de
       imagen (unica esquina libre: arriba-izq = promo/categoria, arriba-der = favorito/info,
       abajo-izq = stock).
       ============================================ */
    .pos-card-added-badge {
        position: absolute;
        bottom: 6px;
        right: 6px;
        z-index: 3;
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        border-radius: 999px;
        background: #04AA6D;
        color: #fff;
        border: 2px solid #fff;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }

    /* ============================================
       TOPBAR MOZO - barra compacta del equipo MOZO en telefono
       Ronda 2 QA de campo (§E/§F): el mozo no usa el menu lateral (sin hamburguesa) y no tenia
       forma de ver a que caja/IP estaba apuntando (el usuario cambio la IP de la PC y el celular
       quedo "roto" sin pista). Chip con la caja + IP viva (toca para ir a /config-inicial) +
       punto de estado (verde/rojo/gris) + boton Salir con confirmacion.
       ============================================ */
    .pos-mozo-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 0 4px;
    }

    /* Ronda 4 QA de campo: el chip se cortaba ("Caja CAJA POS 1 · 192.168…") justo donde
       empieza la IP, que es el dato que el usuario necesita ver para diagnosticar la conexion.
       Fix: el chip crece (flex:1) hasta el boton Salir, y DENTRO se recorta primero el NOMBRE
       (achicable) — la IP va en su propio span que NUNCA se trunca. */
    .pos-mozo-caja-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
        padding: 6px 12px;
        border-radius: 20px;
        border: none;
        background: #e7f0ff;
        color: #1565c0;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .pos-mozo-caja-chip:active {
        background: #d5e6ff;
    }

    /* Nombre de la caja: es lo primero que se sacrifica si no entra. */
    .pos-mozo-caja-nombre {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* IP (o "Nube"): NUNCA se recorta — es el dato que el usuario necesita ver. */
    .pos-mozo-caja-ip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .pos-mozo-caja-dot {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #c7c7cc;
    }

    .pos-mozo-caja-dot.on {
        background: #34c759;
    }

    .pos-mozo-caja-dot.off {
        background: #ff3b30;
    }

    .pos-mozo-topbar-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }

    .pos-mozo-salir-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: #fff0f0;
        color: #ff3b30;
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .pos-mozo-salir-btn:active {
        background: #ffd9d9;
        transform: scale(0.94);
    }

}