/*
 * PUNTO DE VENTA DEL ESTILO NUEVO, en formato "caja": barra de total grande, teclado numerico, categorias en tira, productos en
 * cuadros y ventana de pago grande.
 *
 * Se activa con el estilo nuevo: cuando <html> tiene la clase "upos-esc". El estilo clasico no la tiene y no cambia nada.
 * Solo en el POS y en pantallas anchas (computadora y tablet). Solo cambia como se ve y se acomoda: no cambia ningun calculo.
 */
/* Colores (valen en computadora, tablet y celular) */
html.upos-esc {
    --caja-azul: #2a62a8;
    --caja-azul-osc: #14457f;
    --caja-naranja: #2a62a8;   /* (nombre viejo) ahora es el azul de 'activo' */
    --caja-verde: #14457f;     /* (nombre viejo) ahora es el azul oscuro */
    --caja-verde-osc: #0c2d55;
    --caja-rojo: #e2733f;     /* naranja un poco rojizo (antes rojo) */
    --caja-gris: #4f7fbd;
    --caja-gris-osc: #2f5d99;
}

@media (min-width: 992px) {
    /* ---------- Tres zonas: lineas de la venta | teclado y funciones | categorias y productos ---------- */
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos {
        display: grid !important;
        grid-template-columns: minmax(0, 1.5fr) 304px minmax(0, 1fr);
        gap: 10px;
        align-items: stretch;
        height: calc(100vh - 152px);
        min-height: 440px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos::before,
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos::after { display: none !important; content: none !important; }   /* los 'clearfix' de Bootstrap ocupaban un lugar de la rejilla */
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div { width: auto !important; max-width: none !important; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div { min-height: 0; overflow: hidden; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div:first-child { display: flex; flex-direction: column; gap: 8px; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div:first-child > :not(#caja-total) { flex: 1 1 auto; min-height: 0; overflow: auto; }

    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div:last-child { display: flex; flex-direction: column; }
    /* El bloque de las tarjetas llega hasta abajo (mismo largo que el panel del teclado) y tiene UNA sola barra: la de la lista de tarjetas. */
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div:last-child > :not(#caja-categorias):not(#caja-filtros) { flex: 1 1 0; min-height: 0; margin-bottom: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos .caja-llena { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden !important; margin-bottom: 0 !important; height: auto; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos #product_list_body { flex: 1 1 0; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; align-content: start; }

    /* ---------- Lineas de la venta ---------- */
    html.upos-esc #pos_table { font-size: 15px; }
    html.upos-esc #pos_table thead th { background: #2a62a8 !important; color: #fff !important; border-color: #14457f !important; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
    html.upos-esc #pos_table thead th i { color: #fff !important; }
    html.upos-esc #pos_table tbody td { vertical-align: middle !important; padding: 7px 6px !important; }
    html.upos-esc #pos_table tbody tr { cursor: pointer; }
    html.upos-esc #pos_table tbody tr.caja-fila td { background: #dbe8f7 !important; box-shadow: inset 0 -2px 0 var(--caja-azul); }
    html.upos-esc #pos_table input.pos_quantity,
    html.upos-esc #pos_table input.pos_unit_price_inc_tax { font-size: 16px; font-weight: 700; text-align: center; }

    /* Sin los botones de mas y menos en Cantidad: la cantidad se pone con el teclado numerico */
    html.upos-esc #pos_table .quantity-down,
    html.upos-esc #pos_table .quantity-up,
    html.upos-esc #pos_table .input-number .input-group-btn { display: none !important; }
    html.upos-esc #pos_table input.pos_quantity { width: 70px !important; min-width: 60px; }

    /* Lineas mas compactas: sin la foto ni el texto de existencias dentro de cada linea */
    html.upos-esc #pos_table tbody td:first-child img,
    html.upos-esc #pos_table tbody td:first-child .img-thumbnail,
    html.upos-esc #pos_table tbody td:first-child small.text-muted,
    html.upos-esc #pos_table tbody td:first-child .stock-info { display: none !important; }
    html.upos-esc #pos_table tbody td:first-child { min-width: 150px; font-weight: 600; }

    /* Totales de siempre un poco mas chicos: el total grande esta en la barra negra */
    html.upos-esc .pos_form_totals { font-size: 14px; }

    /* ---------- Barra negra de TOTAL ---------- */
    html.upos-esc #caja-total {
        background: #0f3566; border-radius: 8px; padding: 6px 16px; display: flex; align-items: center; justify-content: space-between;
        box-shadow: inset 0 0 0 2px #2a62a8;
    }
    html.upos-esc #caja-total .caja-total-et { color: #fff; font-size: 22px; font-weight: 700; }
    html.upos-esc #caja-total .caja-total-valor { color: #fff; font-size: 46px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

    /* ---------- Panel del centro ---------- */
    html.upos-esc #caja-panel {
        overflow-y: auto; background: #f4f8fd; border: 1px solid #8eaacd; border-radius: 10px; padding: 8px;
        display: flex; flex-direction: column; gap: 8px;
    }
    html.upos-esc #caja-pantalla { background: #0f3566; color: #fff; border-radius: 8px; padding: 4px 12px; min-height: 50px; }
    html.upos-esc #caja-pantalla .caja-nombre { font-size: 12px; color: #b7cdea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.upos-esc #caja-pantalla .caja-valor { font-size: 28px; font-weight: 700; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; color: #fff; }
    html.upos-esc .caja-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    html.upos-esc .caja-modo { border: 2px solid var(--caja-azul); background: #fff; color: var(--caja-azul); border-radius: 8px; padding: 7px 0; font-weight: 700; font-size: 14px; }
    html.upos-esc .caja-modo.activo { background: var(--caja-azul); border-color: var(--caja-azul); color: #fff; }

    html.upos-esc .caja-teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    html.upos-esc .caja-tecla {
        border: 0; border-radius: 8px; background: var(--caja-azul); color: #fff; font-size: 24px; font-weight: 700; padding: 9px 0; line-height: 1;
        box-shadow: 0 3px 0 var(--caja-azul-osc); transition: transform .05s, box-shadow .05s;
    }
    html.upos-esc .caja-tecla:active { transform: translateY(3px); box-shadow: 0 0 0 var(--caja-azul-osc); }
    html.upos-esc .caja-t-menos, html.upos-esc .caja-t-mas { background: var(--caja-gris); box-shadow: 0 3px 0 var(--caja-gris-osc); }
    html.upos-esc .caja-t-back { background: #4f7fbd; box-shadow: 0 3px 0 #2f5d99; }
    html.upos-esc .caja-t-C { background: var(--caja-rojo); box-shadow: 0 3px 0 #a8502a; }
    html.upos-esc .caja-t-ok { background: var(--caja-verde); box-shadow: 0 3px 0 var(--caja-verde-osc); }

    /* Botones grises de funcion, 3 por fila */
    html.upos-esc .caja-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    html.upos-esc .caja-accion {
        border: 0; border-radius: 6px; background: #dbe8f7; border: 1px solid #8eaacd; color: #14457f; padding: 6px 2px; min-height: 52px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center;
        box-shadow: 0 2px 0 #8eaacd;
    }
    html.upos-esc .caja-accion { position: relative; }
    html.upos-esc .caja-accion i { font-size: 16px; color: #2a62a8; }
    html.upos-esc .caja-atajo { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 9px; font-weight: 800; line-height: 1; color: #4f7fbd; background: none; padding: 0; letter-spacing: .3px; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
    html.upos-esc .caja-accion:active { transform: translateY(2px); box-shadow: 0 0 0 #8eaacd; }
    html.upos-esc .caja-accion.caja-sin { background: #c9d3e0; }

    /* ---------- Categorias en tira ---------- */
    html.upos-esc #caja-categorias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; max-height: 96px; overflow-y: auto; align-content: flex-start; flex: 0 0 auto; }
    html.upos-esc .caja-cat {
        border: 1px solid #8eaacd; border-radius: 6px; background: #dbe8f7; color: #14457f; font-weight: 700; font-size: 14px; padding: 8px 12px; min-height: 44px; font-size: 13px;
        box-shadow: 0 2px 0 #8eaacd;
    }
    html.upos-esc .caja-cat.activa { background: var(--caja-azul); border-color: var(--caja-azul-osc); color: #fff; box-shadow: 0 2px 0 var(--caja-azul-osc); }
    html.upos-esc .caja-cat.caja-marcas { background: #14457f; color: #fff; border-color: #0c2d55; box-shadow: 0 2px 0 #0c2d55; }
    html.upos-esc .caja-cat:active { transform: translateY(2px); box-shadow: none; }
    /* Los botones "Categoria" y "Marcas" de siempre se esconden: ya estan en la tira */
    html.upos-esc #product_category_div, html.upos-esc #product_brand_div { display: none !important; }

    /* ---------- Productos como cuadros azules ---------- */
    html.upos-esc #product_list_body .pos-clean-card {
        border: 1px solid #8eaacd !important; border-top: 6px solid var(--caja-azul) !important; border-radius: 6px !important;
        background: #f4f8fd !important; color: #14457f !important; box-shadow: 0 2px 0 #8eaacd !important; position: relative;
    }
    html.upos-esc #product_list_body .pos-clean-card .pos-clean-name { color: #14457f !important; font-weight: 700; }
    html.upos-esc #product_list_body .pos-clean-card .pos-clean-sku { color: #5c7699 !important; }
    html.upos-esc #product_list_body .pos-clean-card .pos-clean-stock {
        background: #dbe8f7; color: #14457f !important; border-radius: 4px; padding: 1px 6px; display: inline-block; font-weight: 700; font-size: 11px;
    }
    html.upos-esc #product_list_body .pos-clean-card .pos-clean-stock.pos-stock-ok { background: #dff3e6; color: #1e7e34 !important; }
    html.upos-esc #product_list_body .pos-clean-card .pos-clean-stock.pos-stock-sin { background: #fde2e0; color: #c0271c !important; }
    html.upos-esc #product_list_body .pos-clean-card .pos-precio-etiqueta { background: var(--caja-azul-osc) !important; color: #fff !important; font-weight: 800; }
    html.upos-esc #product_list_body .pos-clean-card:active { transform: scale(.97); }

    /* ---------- Barra de abajo: botones de colores ---------- */
    html.upos-esc .caja-barra { padding-top: 6px; padding-bottom: 6px; }
    html.upos-esc .caja-barra .pos-compact-action,
    html.upos-esc .caja-barra .pos-desktop-only-action {
        min-height: 56px; font-size: 15px; font-weight: 800; border-radius: 8px; color: #fff !important; border: 0 !important;
        box-shadow: 0 3px 0 rgba(0, 0, 0, .28); text-transform: none;
    }
    html.upos-esc .caja-barra .pos-compact-action i,
    html.upos-esc .caja-barra .pos-compact-action svg,
    html.upos-esc .caja-barra .pos-desktop-only-action i { color: #fff !important; }
    html.upos-esc .caja-barra #pos-draft,
    html.upos-esc .caja-barra #pos-quotation,
    html.upos-esc .caja-barra button[data-pay_method="suspend"],
    html.upos-esc .caja-barra button[data-pay_method="credit_sale"],
    html.upos-esc .caja-barra button[data-pay_method="card"] { background: var(--caja-azul) !important; }
    html.upos-esc .caja-barra #pos-finalize { background: #1f4f8f !important; min-width: 150px; text-transform: uppercase; }
    html.upos-esc .caja-barra button.pos-desktop-only-action[data-pay_method="cash"] { background: var(--caja-azul-osc) !important; min-width: 200px; text-transform: uppercase; letter-spacing: .5px; }
    html.upos-esc .caja-barra #recent-transactions { background: var(--caja-azul) !important; background-image: none !important; color: #fff !important; border-radius: 8px !important; }
    html.upos-esc .caja-barra #pos-cancel, html.upos-esc .caja-barra #pos-cancel-edit, html.upos-esc .caja-barra #pos-delete { background: var(--caja-rojo) !important; }
    html.upos-esc .caja-barra .pos-compact-action { width: 104px !important; padding: 4px 3px !important; font-size: 12.5px !important; line-height: 1.1; }
    html.upos-esc .caja-barra .pos-desktop-total { display: none !important; }   /* el total grande ya esta en la barra negra */

    /* ---------- Ventana de pago (cobro) grande ---------- */
    html.upos-esc #modal_payment .modal-dialog { width: min(1180px, 96vw) !important; margin: 14px auto !important; }
    html.upos-esc #modal_payment .modal-content { border-radius: 10px; overflow: hidden; border: 0; }
    html.upos-esc #modal_payment .modal-header { background: #0f3566 !important; border: 0; padding: 12px 20px; }
    html.upos-esc #modal_payment .modal-header .modal-title { color: #fff !important; font-size: 22px; font-weight: 700; }
    html.upos-esc #modal_payment .modal-header .close { color: #fff; opacity: 1; font-size: 34px; text-shadow: none; }
    html.upos-esc #modal_payment .modal-body { background: #e6eff9; }
    html.upos-esc #modal_payment .pm-payment-type-buttons .payment-type-btn {
        min-height: 58px; min-width: 130px; font-size: 17px; border-radius: 8px !important; border: 0 !important; color: #fff !important;
        background-image: none !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .25) !important; text-shadow: none !important;
    }
    html.upos-esc #modal_payment .pm-payment-type-buttons .payment-type-btn[data-type="cash"] { background: var(--caja-azul-osc) !important; }
    html.upos-esc #modal_payment .pm-payment-type-buttons .payment-type-btn[data-type="bank_transfer"] { background: var(--caja-azul) !important; }
    html.upos-esc #modal_payment .pm-payment-type-buttons .payment-type-btn[data-type="card"] { background: var(--caja-azul) !important; }
    html.upos-esc #modal_payment .pm-payment-type-buttons .payment-type-btn[data-type="credit_sale"] { background: var(--caja-azul) !important; }
    html.upos-esc #modal_payment .pm-payment-type-buttons .payment-type-btn[data-type="mixed"] { background: var(--caja-azul) !important; }
    html.upos-esc #modal_payment #payment_rows_div .payment_row_container.pm-fila-principal input.payment-amount-currency {
        font-size: 36px !important; height: 70px !important; font-weight: 800; color: #14457f; border: 3px solid var(--caja-azul) !important; border-radius: 8px !important;
    }
    html.upos-esc #modal_payment .quick-amount-btn { min-height: 54px; min-width: 80px; font-size: 21px; font-weight: 800; border-radius: 8px !important; background: #fff !important; border: 2px solid var(--caja-azul) !important; color: var(--caja-azul) !important; background-image: none !important; }
    html.upos-esc #modal_payment label { font-size: 14px; }
    /* Resumen: totales grandes */
    html.upos-esc #modal_payment .total_payable_span { font-size: 38px !important; font-weight: 800; color: #14457f !important; }
    /* Teclado numerico de la ventana */
    html.upos-esc #modal_payment #pm_teclado_numerico { gap: 8px !important; }
    html.upos-esc #modal_payment #pm_teclado_numerico .pm-tecla { min-height: 62px; font-size: 28px !important; font-weight: 800; color: #fff !important; background: var(--caja-azul) !important; background-image: none !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 3px 0 var(--caja-azul-osc) !important; }
    html.upos-esc #modal_payment #pm_teclado_numerico .pm-tecla:active { transform: translateY(3px); box-shadow: none !important; }
    html.upos-esc #modal_payment #pm_teclado_numerico .pm-tecla.pm-tecla-c { background: var(--caja-rojo) !important; box-shadow: 0 3px 0 #a8502a !important; }
    /* Botones de abajo: Finalizar pago grande y verde, Cerrar rojo */
    html.upos-esc #modal_payment .modal-footer { background: #dbe8f7; border: 0; padding: 12px 20px; }
    html.upos-esc #modal_payment .modal-footer .tw-dw-btn { min-height: 58px; font-size: 18px; font-weight: 800; border-radius: 8px !important; min-width: 170px; border: 0 !important; color: #fff !important; background-image: none !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
    html.upos-esc #modal_payment #pos-save { background: var(--caja-verde) !important; text-transform: uppercase; min-width: 280px; }
    html.upos-esc #modal_payment .modal-footer button[data-dismiss="modal"] { background: var(--caja-rojo) !important; }
}

/* Tablet horizontal: panel mas angosto y la lista de lineas se puede deslizar de lado */
@media (min-width: 992px) and (max-width: 1199px) {
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos { grid-template-columns: minmax(0, 1.1fr) 270px minmax(0, 1fr); gap: 8px; }
    html.upos-esc .caja-tecla { font-size: 21px; padding: 10px 0; }
    html.upos-esc #caja-total .caja-total-valor { font-size: 38px; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos > div:first-child .tw-flex-1 { overflow-x: auto; }
    html.upos-esc #product_list_body > div { width: 50% !important; }
}

/* En celular y tablet pequena el POS no cambia: se ve el estilo nuevo de siempre */

/* ---------- Ventana de pago: el "Cambiar el retorno" sin fondo verde, sin icono y con letra como los demas datos ---------- */
html.upos-esc #modal_payment div[style*="#e7f6ec"] { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
html.upos-esc #modal_payment span[style*="#1e7e34"] { color: #6b7280 !important; }
html.upos-esc #modal_payment span.change_return_span[style] { color: #111 !important; font-size: 22px !important; }

/* ---------- Ventana de pago: iconos sencillos, pago mixto grande, botones de abajo grandes ---------- */
html.upos-esc #modal_payment .payment-type-btn i.upos-ico,
html.upos-esc #modal_payment .pm-payment-type-icon i.upos-ico { color: #fff; font-size: 20px; margin-right: 8px; vertical-align: -1px; }
html.upos-esc #modal_payment #quick_mixed_panel label i.upos-ico { color: #2a62a8; font-size: 18px; margin-right: 6px; }
html.upos-esc #modal_payment #quick_mixed_panel > .col-md-12 > div { background: #f4f8fd !important; border: 1px solid #8eaacd !important; border-radius: 10px !important; padding: 16px !important; }
html.upos-esc #modal_payment #quick_mixed_panel label { font-size: 15px !important; color: #14457f; margin-bottom: 4px; }
html.upos-esc #modal_payment #quick_mixed_panel .quick-mixed-amount {
    height: 50px !important; font-size: 22px !important; font-weight: 800; text-align: right; color: #14457f;
    border: 2px solid #2a62a8 !important; border-radius: 8px !important; background: #fff !important;
}
html.upos-esc #modal_payment #quick_mixed_panel .row + .row { margin-top: 12px; }
html.upos-esc #modal_payment #quick_mixed_panel a { font-size: 14px !important; }
html.upos-esc #modal_payment textarea.form-control { min-height: 80px; font-size: 16px; }
@media (min-width: 992px) {
    html.upos-esc #modal_payment .modal-footer { padding: 14px 20px; }
    html.upos-esc #modal_payment .modal-footer .tw-dw-btn { min-height: 76px !important; font-size: 21px !important; min-width: 230px !important; }
    html.upos-esc #modal_payment #pos-save { min-width: 380px !important; font-size: 22px !important; }
}

/* ---------- Detalle de caja y Cerrar caja (contenido de las ventanas) ---------- */
html.upos-esc .register_details_modal .modal-content,
html.upos-esc .close_register_modal .modal-content { border: 0; border-radius: 10px; overflow: hidden; }
html.upos-esc .register_details_modal .modal-header,
html.upos-esc .close_register_modal .modal-header { background: #0f3566 !important; border: 0; padding: 14px 22px; }
html.upos-esc .register_details_modal .modal-header .modal-title,
html.upos-esc .close_register_modal .modal-header .modal-title { color: #fff !important; font-size: 19px; font-weight: 700; line-height: 1.35; }
html.upos-esc .register_details_modal .modal-header .close,
html.upos-esc .close_register_modal .modal-header .close { color: #fff; opacity: 1; font-size: 32px; text-shadow: none; }
html.upos-esc .register_details_modal .modal-body,
html.upos-esc .close_register_modal .modal-body { background: #e6eff9; padding: 18px 22px; }
html.upos-esc .register_details_modal .modal-body hr,
html.upos-esc .close_register_modal .modal-body hr { border: 0; margin: 14px 0; height: 0; }
html.upos-esc .register_details_modal .modal-body table.table,
html.upos-esc .close_register_modal .modal-body table.table { background: #fff; border: 1px solid #8eaacd; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 0; width: 100%; }
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr > td,
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr > td,
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr > th,
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr > th { border-top: 1px solid #dbe8f7; padding: 10px 14px; font-size: 15px; color: #1b2f4f; vertical-align: middle; }
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr:first-child > td,
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr:first-child > td,
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr:first-child > th,
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr:first-child > th { border-top: 0; }
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr > td:last-child:not(:first-child),
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr > td:last-child:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr:first-child > th,
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr:first-child > th { background: #2a62a8; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
html.upos-esc .register_details_modal .modal-body tr.success > td,
html.upos-esc .close_register_modal .modal-body tr.success > td,
html.upos-esc .register_details_modal .modal-body tr.success > th,
html.upos-esc .close_register_modal .modal-body tr.success > th { background: #dbe8f7 !important; color: #14457f !important; font-weight: 700; }
html.upos-esc .register_details_modal .modal-body tr.danger > td,
html.upos-esc .close_register_modal .modal-body tr.danger > td,
html.upos-esc .register_details_modal .modal-body tr.danger > th,
html.upos-esc .close_register_modal .modal-body tr.danger > th { background: #fbe6da !important; color: #a8502a !important; font-weight: 700; }
html.upos-esc .register_details_modal .modal-body tr.success > td b,
html.upos-esc .close_register_modal .modal-body tr.success > td b,
html.upos-esc .register_details_modal .modal-body tr.danger > td b,
html.upos-esc .close_register_modal .modal-body tr.danger > td b { font-size: 17px; }
html.upos-esc .register_details_modal .modal-body h3,
html.upos-esc .close_register_modal .modal-body h3 { color: #14457f; font-size: 18px; font-weight: 700; margin: 6px 0 10px; padding-left: 10px; border-left: 5px solid #2a62a8; }
html.upos-esc .register_details_modal .modal-body .col-sm-12 > span,
html.upos-esc .close_register_modal .modal-body .col-sm-12 > span { display: block; margin-top: 14px; background: #0f3566; color: #fff; border-radius: 10px; padding: 12px 16px; font-size: 15px; font-weight: 600; line-height: 1.6; }
html.upos-esc .register_details_modal .modal-body .row:last-child,
html.upos-esc .close_register_modal .modal-body .row:last-child { color: #1b2f4f; font-size: 14px; }
html.upos-esc .register_details_modal .modal-body label,
html.upos-esc .close_register_modal .modal-body label { color: #14457f; font-weight: 700; font-size: 14px; }
html.upos-esc .register_details_modal .modal-body input.form-control,
html.upos-esc .close_register_modal .modal-body input.form-control,
html.upos-esc .register_details_modal .modal-body textarea.form-control,
html.upos-esc .close_register_modal .modal-body textarea.form-control { border: 2px solid #2a62a8; border-radius: 8px; background: #fff; color: #14457f; font-weight: 700; }
html.upos-esc .register_details_modal .modal-body input#closing_amount,
html.upos-esc .close_register_modal .modal-body input#closing_amount,
html.upos-esc .register_details_modal .modal-body input#total_card_slips,
html.upos-esc .close_register_modal .modal-body input#total_card_slips,
html.upos-esc .register_details_modal .modal-body input#total_cheques,
html.upos-esc .close_register_modal .modal-body input#total_cheques { height: 56px !important; font-size: 24px !important; text-align: right; }
html.upos-esc .register_details_modal .modal-body input.cash_denomination,
html.upos-esc .close_register_modal .modal-body input.cash_denomination { height: 44px !important; font-size: 18px !important; text-align: center; }
html.upos-esc .register_details_modal .modal-body textarea.form-control,
html.upos-esc .close_register_modal .modal-body textarea.form-control { font-weight: 500; font-size: 15px; }
html.upos-esc .register_details_modal .modal-body table.table-slim,
html.upos-esc .close_register_modal .modal-body table.table-slim { border: 0; background: transparent; }
html.upos-esc .register_details_modal .modal-body table.table-slim > tbody > tr > td,
html.upos-esc .close_register_modal .modal-body table.table-slim > tbody > tr > td,
html.upos-esc .register_details_modal .modal-body table.table-slim > thead > tr > th,
html.upos-esc .close_register_modal .modal-body table.table-slim > thead > tr > th,
html.upos-esc .register_details_modal .modal-body table.table-slim > tfoot > tr > th,
html.upos-esc .close_register_modal .modal-body table.table-slim > tfoot > tr > th,
html.upos-esc .register_details_modal .modal-body table.table-slim > tfoot > tr > td,
html.upos-esc .close_register_modal .modal-body table.table-slim > tfoot > tr > td { border-color: #dbe8f7; font-size: 16px; }
html.upos-esc .register_details_modal .modal-body table.table-slim > thead > tr > th,
html.upos-esc .close_register_modal .modal-body table.table-slim > thead > tr > th { color: #14457f; text-transform: none; font-size: 14px; background: transparent; }
html.upos-esc .register_details_modal .modal-footer,
html.upos-esc .close_register_modal .modal-footer { background: #dbe8f7; border: 0; padding: 14px 22px; }
html.upos-esc .register_details_modal .modal-footer .tw-dw-btn,
html.upos-esc .close_register_modal .modal-footer .tw-dw-btn { min-height: 54px; font-size: 17px; font-weight: 800; border-radius: 8px !important; border: 0 !important; color: #fff !important; background-image: none !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); padding-left: 22px; padding-right: 22px; }
html.upos-esc .register_details_modal .modal-footer .tw-dw-btn-primary,
html.upos-esc .close_register_modal .modal-footer .tw-dw-btn-primary { background: #2a62a8 !important; }
html.upos-esc .register_details_modal .modal-footer .tw-dw-btn-neutral,
html.upos-esc .close_register_modal .modal-footer .tw-dw-btn-neutral { background: var(--caja-rojo) !important; }
html.upos-esc .close_register_modal .modal-footer button[type="submit"] { background: #14457f !important; min-width: 220px; text-transform: uppercase; }
@media (min-width: 992px) {
    html.upos-esc .register_details_modal .modal-dialog, html.upos-esc .close_register_modal .modal-dialog { width: min(1000px, 96vw); }
}
html.upos-esc .register_details_modal .modal-body table.table > tbody > tr:first-child > th:last-child:not(:first-child),
html.upos-esc .close_register_modal .modal-body table.table > tbody > tr:first-child > th:last-child:not(:first-child) { text-align: right; }
html.upos-esc .register_details_modal .modal-body .mini_print .col-sm-12 > table.table:first-of-type td:not(:first-child),
html.upos-esc .close_register_modal .modal-body .mini_print .col-sm-12 > table.table:first-of-type td:not(:first-child),
html.upos-esc .register_details_modal .modal-body .mini_print .col-sm-12 > table.table:first-of-type th:not(:first-child),
html.upos-esc .close_register_modal .modal-body .mini_print .col-sm-12 > table.table:first-of-type th:not(:first-child) { text-align: right; }

/* ---------- Ventana de pago en celular y tablet chica: los mismos colores que en la computadora, con los tamanos de siempre ---------- */
@media (max-width: 991px) {
    html.upos-esc #modal_payment .modal-content { border: 0; border-radius: 10px; overflow: hidden; }
    html.upos-esc #modal_payment .modal-header { background: #0f3566 !important; border: 0; }
    html.upos-esc #modal_payment .modal-header .modal-title { color: #fff !important; font-weight: 700; }
    html.upos-esc #modal_payment .modal-header .close { color: #fff; opacity: 1; text-shadow: none; }
    html.upos-esc #modal_payment .modal-body { background: #e6eff9; }
    html.upos-esc #modal_payment .payment-type-btn {
        color: #fff !important; background: var(--caja-azul) !important; background-image: none !important; border: 0 !important;
        border-radius: 8px !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .25) !important; text-shadow: none !important;
    }
    html.upos-esc #modal_payment .payment-type-btn[data-type="cash"] { background: var(--caja-azul-osc) !important; }
    html.upos-esc #modal_payment #payment_rows_div .payment_row_container.pm-fila-principal input.payment-amount-currency { border: 2px solid var(--caja-azul) !important; border-radius: 8px !important; color: #14457f; font-weight: 800; }
    html.upos-esc #modal_payment .quick-amount-btn { background: #fff !important; background-image: none !important; border: 2px solid var(--caja-azul) !important; color: var(--caja-azul) !important; border-radius: 8px !important; font-weight: 800; }
    html.upos-esc #modal_payment #pm_teclado_numerico .pm-tecla {
        color: #fff !important; background: var(--caja-azul) !important; background-image: none !important; border: 0 !important;
        border-radius: 8px !important; box-shadow: 0 3px 0 var(--caja-azul-osc) !important; font-weight: 800;
    }
    html.upos-esc #modal_payment #pm_teclado_numerico .pm-tecla:active { transform: translateY(3px); box-shadow: none !important; }
    html.upos-esc #modal_payment #pm_teclado_numerico .pm-tecla.pm-tecla-c { background: var(--caja-rojo) !important; box-shadow: 0 3px 0 #a8502a !important; }
    html.upos-esc #modal_payment .modal-footer { background: #dbe8f7; border: 0; }
    html.upos-esc #modal_payment .modal-footer .tw-dw-btn { border: 0 !important; color: #fff !important; background-image: none !important; border-radius: 8px !important; font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
    html.upos-esc #modal_payment #pos-save { background: var(--caja-azul-osc) !important; }
    html.upos-esc #modal_payment .modal-footer button[data-dismiss="modal"] { background: var(--caja-rojo) !important; }
}

/* Celular: el "Cambio" del resumen sin verde, con letra como los demas datos */
html.upos-esc .ultrapos-payment-modal-mobile .ultrapos-payment-summary-change .ultrapos-payment-summary-label { color: #6b7280 !important; }
html.upos-esc .ultrapos-payment-modal-mobile .ultrapos-payment-summary-change .ultrapos-payment-summary-value { color: #111 !important; }

/* ---------- Inicio en el celular: encabezado azul marino, accesos rapidos y mosaicos de colores ---------- */
@media (max-width: 767px) {
    /* Encabezado de arriba en TODAS las pantallas del celular: azul marino, botones en el azul del sistema (el verde de "Reparar" tambien) */
    html.upos-esc main > div:first-child.tw-border-b { background: #0f3566 !important; background-image: none !important; }
    html.upos-esc main > div:first-child.tw-border-b .btn { background: #2a62a8 !important; background-image: none !important; border: 0 !important; color: #fff !important; border-radius: 10px !important; }
    html.upos-esc main > div:first-child.tw-border-b summary, html.upos-esc main > div:first-child.tw-border-b a.tw-inline-flex { background: #2a62a8 !important; background-image: none !important; border-color: transparent !important; color: #fff !important; border-radius: 10px !important; }
    html.upos-esc main > div:first-child.tw-border-b > div > div > i.fa-info-circle { display: none; }
    /* Fondo claro como el resto del estilo nuevo */
    html.upos-inicio #scrollable-container .tw-bg-gradient-to-r { background: #e6eff9 !important; background-image: none !important; }
    html.upos-inicio #scrollable-container .tw-absolute.tw-inset-0.tw-grid { display: none !important; }
    /* Tarjeta de bienvenida (nombre, ubicacion, filtro de fecha) en azul marino */
    html.upos-inicio .inicio-hero { background: #0f3566; border-radius: 14px; padding: 14px; margin-top: 4px; }
    html.upos-inicio .inicio-hero h1 { color: #fff !important; font-size: 22px !important; margin: 0 0 4px; }
    html.upos-inicio .inicio-hero div.tw-inline-flex { background: #2a62a8 !important; border-radius: 10px !important; }
    /* Accesos rapidos */
    html.upos-inicio #inicio-rapidos { display: grid; gap: 8px; margin-top: 12px; }
    html.upos-inicio .inicio-rap { display: block; text-align: center; color: #fff !important; text-decoration: none !important; font-weight: 800; font-size: 13px; line-height: 1.15; padding: 12px 4px; border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
    html.upos-inicio .inicio-rap i { display: block; font-size: 22px; margin-bottom: 5px; }
    html.upos-inicio .inicio-rap.r2 { background: #14457f; }
    html.upos-inicio .inicio-rap.r3 { background: #2a62a8; }
    html.upos-inicio .inicio-rap.r4 { background: #0e3a6e; }
    html.upos-inicio #inicio-aviso { margin-top: 12px; background: #fbe6da; border: 1px solid #f0b99d; color: #a8502a; border-radius: 12px; padding: 11px 14px; font-weight: 700; font-size: 14px; align-items: center; gap: 10px; }
    html.upos-inicio #inicio-aviso span { flex: 1; }
    html.upos-inicio #inicio-aviso u { font-weight: 800; }
    html.upos-inicio .inicio-titulo { margin: 16px 2px 8px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: #5c7699; font-weight: 700; }
    /* Mosaicos de a dos */
    html.upos-inicio .inicio-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 10px !important; }
    html.upos-inicio .inicio-tile { border-radius: 14px !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .2) !important; ring: 0; border: 0 !important; min-height: 104px; }
    html.upos-inicio .inicio-tile > div { padding: 13px 13px 12px !important; }
    html.upos-inicio .inicio-tile > div > div { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
    html.upos-inicio .inicio-tile .tw-rounded-full { background: transparent !important; color: #fff !important; width: auto !important; height: auto !important; }
    html.upos-inicio .inicio-tile .tw-rounded-full svg, html.upos-inicio .inicio-tile .tw-rounded-full i { color: #fff !important; width: 24px; height: 24px; }
    html.upos-inicio .inicio-tile > div > div > div:last-child { width: 100%; }
    html.upos-inicio .inicio-tile p { color: #fff !important; white-space: normal !important; }
    html.upos-inicio .inicio-tile p:first-child { font-size: 13px !important; line-height: 1.2; min-height: 32px; opacity: .95; }
    html.upos-inicio .inicio-tile p.tw-font-mono { font-family: inherit !important; font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.3px; margin-top: 2px; overflow: visible; }
    html.upos-inicio .inicio-tile .fa-info-circle { color: #fff !important; }
    html.upos-inicio .inicio-a1 { background: #2a62a8 !important; }
    html.upos-inicio .inicio-a2 { background: #14457f !important; }
    html.upos-inicio .inicio-a3 { background: #4f7fbd !important; }
    html.upos-inicio .inicio-o1 { background: #e2733f !important; }
    html.upos-inicio .inicio-o2 { background: #c25d2d !important; }
}

/* ---------- Sin parpadeo: mientras la pantalla se arma, se esconde (la marca la pone y la quita un script) ---------- */
@media (min-width: 992px) { html.upos-armando :is(#add_pos_sell_form, #edit_pos_sell_form) { visibility: hidden; } }
@media (max-width: 767px) { html.upos-armando #scrollable-container { visibility: hidden; } }
@media (max-width: 991px) { html.upos-armando :is(#add_pos_sell_form, #edit_pos_sell_form), html.upos-armando .pos-form-actions, html.upos-armando #ultrapos_mobile_actions { visibility: hidden; } }

/* =====================================================================================================================
   PALETA DEL ESTILO NUEVO EN TODO EL SISTEMA (todo con CSS, sin JavaScript: se ve de una vez, sin parpadeo)
     azul marino #0f3566 / #14457f  ·  azul #2a62a8  ·  azul medio #4f7fbd  ·  azul claro #dbe8f7
     naranja suave #e2733f (lo que cancela, resta o se debe)  ·  naranja oscuro #c25d2d  ·  ambar #f0a830 (aviso)
   Los colores que SIGNIFICAN algo se respetan: verde = bien / hay stock, rojo = mal / sin stock, ambar = aviso (etiquetas de estado,
   textos de positivo y negativo, avisos y barras de avance). Solo se cambian los colores de adorno (botones, iconos, encabezados).
   ===================================================================================================================== */

/* Azul brillante del tema -> azul marino (barra de arriba, encabezado del menu, botones del encabezado, Inicio) */
html.upos-esc .tw-bg-gradient-to-r.tw-from-primary-800 { background-image: linear-gradient(to right, #0f3566, #14457f) !important; }
html.upos-esc .tw-bg-primary-800 { background-color: #14457f !important; }
html.upos-esc .hover\:tw-bg-primary-700:hover { background-color: #2a62a8 !important; }
html.upos-esc .tw-text-primary-700, html.upos-esc .tw-text-primary-800, html.upos-esc .text-primary { color: #14457f !important; }
html.upos-esc #scrollable-container h1.tw-text-primary-800 { color: #fff !important; }
html.upos-esc .tw-border-primary-500\/30 { border-color: rgba(142, 170, 205, .35) !important; }
html.upos-esc .tw-from-indigo-600 { background-image: linear-gradient(to right, #2a62a8, #4f7fbd) !important; }

/* Botones: cada color de siempre pasa a la paleta */
html.upos-esc .btn-success, html.upos-esc .btn-primary, html.upos-esc a.btn.bg-green, html.upos-esc a.btn.bg-light-green, html.upos-esc a.btn.bg-purple, html.upos-esc a.btn.bg-teal { background: #14457f !important; background-image: none !important; border-color: #0f3566 !important; color: #fff !important; }
html.upos-esc .btn-info, html.upos-esc a.btn.bg-aqua, html.upos-esc a.btn.bg-light-blue, html.upos-esc .btn.bg-blue, html.upos-esc button.bg-blue { background: #2a62a8 !important; background-image: none !important; border-color: #14457f !important; color: #fff !important; }
html.upos-esc .btn-warning, html.upos-esc a.btn.bg-yellow, html.upos-esc a.btn.bg-orange, html.upos-esc button.bg-yellow { background: #f0a830 !important; background-image: none !important; border-color: #c9851a !important; color: #1b2f4f !important; }
html.upos-esc .btn-danger, html.upos-esc a.btn.bg-red, html.upos-esc button.bg-red { background: #e2733f !important; background-image: none !important; border-color: #c25d2d !important; color: #fff !important; }
html.upos-esc .btn-success:hover, html.upos-esc .btn-primary:hover { background: #2a62a8 !important; }
html.upos-esc .btn-info:hover { background: #14457f !important; }
html.upos-esc .btn-danger:hover { background: #c25d2d !important; }

/* Botones del otro juego de botones (DaisyUI): mismos colores */
html.upos-esc .tw-dw-btn-success, html.upos-esc .tw-dw-btn-primary, html.upos-esc .tw-dw-btn-secondary, html.upos-esc .tw-dw-btn-accent { background: #14457f !important; border-color: #0f3566 !important; color: #fff !important; }
html.upos-esc .tw-dw-btn-info { background: #2a62a8 !important; border-color: #14457f !important; color: #fff !important; }
html.upos-esc .tw-dw-btn-warning { background: #f0a830 !important; border-color: #c9851a !important; color: #1b2f4f !important; }
html.upos-esc .tw-dw-btn-error { background: #e2733f !important; border-color: #c25d2d !important; color: #fff !important; }
html.upos-esc .tw-dw-btn-success:hover, html.upos-esc .tw-dw-btn-primary:hover, html.upos-esc .tw-dw-btn-accent:hover { background: #2a62a8 !important; }

/* Cajas con borde de color arriba */
html.upos-esc .box.box-primary, html.upos-esc .box.box-success { border-top-color: #2a62a8 !important; }
html.upos-esc .box.box-info { border-top-color: #4f7fbd !important; }
html.upos-esc .box.box-warning { border-top-color: #f0a830 !important; }
html.upos-esc .box.box-danger { border-top-color: #e2733f !important; }

/* Filas de las tablas al pasar el dedo o el raton: azul claro (antes amarillo) */
html.upos-esc table.dataTable tbody tr:hover > td, html.upos-esc .table-hover > tbody > tr:hover > td { background-color: #dbe8f7 !important; }

/* Iconos de los datos del Inicio en computadora: azul lo que suma, naranja lo que resta o se debe (en el celular son mosaicos) */
@media (min-width: 768px) {
    html.upos-esc .tw-rounded-xl:has(p.total_sell, p.net, p.total_purchase) .tw-rounded-full { background: #dbe8f7 !important; color: #2a62a8 !important; }
    html.upos-esc .tw-rounded-xl:has(p.invoice_due, p.total_sell_return, p.purchase_due, p.total_purchase_return, p.total_expense) .tw-rounded-full { background: #fbe6da !important; color: #c25d2d !important; }
    html.upos-esc .tw-rounded-xl:has(p.total_sell, p.net, p.total_purchase, p.invoice_due, p.total_sell_return, p.purchase_due, p.total_purchase_return, p.total_expense) p.tw-font-mono { font-family: inherit !important; font-weight: 800 !important; color: #14457f !important; }
}

/* Colores sueltos de iconos y botones (Tailwind con colores a medida): verde, rojo, morado, amarillo y celeste pasan a la paleta */
html.upos-esc [class*="tw-text-[#00935F]"], html.upos-esc [class*="tw-text-[#646EE4]"], html.upos-esc [class*="tw-text-[#009EE4]"], html.upos-esc [class*="tw-text-[#009ce4]"], html.upos-esc [class*="tw-text-[#5E5CA8]"] { color: #2a62a8 !important; }
html.upos-esc [class*="tw-text-[#EF4B53]"], html.upos-esc [class*="tw-text-[#EF4B51]"], html.upos-esc [class*="tw-text-[#D61B60]"] { color: #c25d2d !important; }
html.upos-esc [class*="tw-text-[#E7A500]"] { color: #c9801a !important; }
html.upos-esc [class*="tw-text-[#A5ADBB]"] { color: #5c7699 !important; }
html.upos-esc [class*="tw-bg-[#646EE4]"] { background-color: #14457f !important; }
html.upos-esc [class*="hover:tw-bg-[#414aac]"]:hover { background-color: #2a62a8 !important; }
html.upos-esc [class*="hover:tw-text-[#467BF5]"]:hover { color: #14457f !important; }

/* Iconitos de informacion (la "i"): del celeste brillante al azul del sistema (solo adorno) */
html.upos-esc .text-info, html.upos-esc .text-aqua, html.upos-esc .text-light-blue { color: #2a62a8 !important; }

/* ---------- POS en celular: barra de abajo (#ultrapos_mobile_actions) con la paleta ---------- */
html.upos-esc #ultrapos_mobile_actions #pos-finalize, html.upos-esc #ultrapos_mobile_actions .ultrapos-mobile-total { background: #0f3566 !important; }
html.upos-esc #ultrapos_mobile_actions .ultrapos-mobile-total, html.upos-esc #ultrapos_mobile_actions .ultrapos-mobile-total-label, html.upos-esc #ultrapos_mobile_actions #total_payable { color: #fff !important; }
html.upos-esc #ultrapos_mobile_actions .pos-express-finalize[data-pay_method="cash"] { background: #14457f !important; }
html.upos-esc #ultrapos_mobile_actions #pos-cancel, html.upos-esc #ultrapos_mobile_actions #pos-cancel-edit, html.upos-esc #ultrapos_mobile_actions #pos-delete { background: var(--caja-rojo) !important; }
html.upos-esc #ultrapos_mobile_actions .ultrapos-mobile-action-row--lower .ultrapos-mobile-action-btn { color: #14457f !important; border-color: #8eaacd !important; }
html.upos-esc #ultrapos_mobile_actions #pos-quotation i, html.upos-esc #ultrapos_mobile_actions .pos-express-finalize[data-pay_method="suspend"] i,
html.upos-esc #ultrapos_mobile_actions .ultrapos-credit-action i, html.upos-esc #ultrapos_mobile_actions .pos-express-finalize[data-pay_method="card"] i { color: #2a62a8 !important; }

/* El icono de la camara del buscador: del verde al azul del sistema (solo adorno) */
html.upos-esc i.fa-camera.text-success { color: #2a62a8 !important; }

/* POS en celular: menos blanco al final de la lista. Varios espacios que se sumaban dejaban unos 300 px vacios entre el ultimo total y la barra de abajo;
   queda solo el que hace falta para que la barra no tape nada. */
@media (max-width: 767px) {
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .pos_form_totals { margin-bottom: 0 !important; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .col-md-12.tw-mb-14 { margin-bottom: 0 !important; }
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.mb-12 { margin-bottom: 0 !important; }
    html.upos-esc #scrollable-container:has(:is(#add_pos_sell_form, #edit_pos_sell_form)) { padding-bottom: 0 !important; overflow-x: hidden !important; overscroll-behavior-x: none; }   /* sin desplazamiento de izquierda a derecha: todo cabe en el ancho de la pantalla */
}

/* ---------- Cargando: una ruedita en vez del cuadro con el texto "Tratamiento..." (listas, Inicio...) ---------- */
@keyframes upos-giro-carga { to { transform: rotate(360deg); } }
html.upos-esc div.dataTables_processing { display: none !important; }   /* la ruedita unica va en el centro de la pantalla */

/* ---------- POS en tablet chica (768 a 991 px): barra de abajo con la paleta ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    html.upos-esc .pos-form-actions .pos-compact-action[data-pay_method="cash"] { background: #14457f !important; background-image: none !important; }
    html.upos-esc .pos-form-actions #pos-cancel, html.upos-esc .pos-form-actions #pos-cancel-edit, html.upos-esc .pos-form-actions #pos-delete { background: var(--caja-rojo) !important; }
    html.upos-esc .pos-form-actions #pos-finalize { background: #0f3566 !important; }
    html.upos-esc .pos-form-actions .tw-pos-total { background: #0f3566 !important; }
    html.upos-esc .pos-form-actions .tw-pos-total, html.upos-esc .pos-form-actions .tw-pos-total * { color: #fff !important; }
    html.upos-esc .pos-form-actions .pos-compact-action.tw-text-gray-700 { color: #14457f !important; }
    html.upos-esc .pos-form-actions .pos-compact-action.tw-text-gray-700 i, html.upos-esc .pos-form-actions .pos-compact-action.tw-text-gray-700 svg { color: #2a62a8 !important; }
}

/* POS en celular: una sola zona que se desplaza. Antes habia tres una dentro de otra (la lista de productos, la pagina y el contenedor),
   y el dedo se detenia al final de cada una: hacian falta 2 o 3 deslizadas para llegar abajo. Ahora todo baja de corrido. */
@media (max-width: 767px) {
    html.upos-esc .pos_product_div.ultrapos-pos-product-div, html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .pos_product_div { height: auto !important; max-height: none !important; overflow: visible !important; }
    html.upos-esc section.content:has(:is(#add_pos_sell_form, #edit_pos_sell_form)) { overflow-y: visible !important; overflow-x: clip !important; }   /* lo que sobra a los lados (margenes negativos) se recorta y no deja mover la pantalla de izquierda a derecha */
    /* Al final de todo queda el espacio justo de la barra de abajo (lo que mide) mas un respiro, para llegar completo hasta el total de la moneda */
    html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) { padding-bottom: calc(var(--upos-barra-h, 172px) + 20px) !important; }
}

/* ---------- Filtros de las listas en el celular: compactos, de a dos por fila ---------- */
@media (max-width: 767px) {
    html.upos-esc #collapseFilter .box-body { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px 14px !important; align-items: start; }
    html.upos-esc #collapseFilter .box-body::before, html.upos-esc #collapseFilter .box-body::after { display: none !important; content: none !important; }
    html.upos-esc #collapseFilter .box-body > [class*="col-"] { width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
    html.upos-esc #collapseFilter .box-body > .col-md-12, html.upos-esc #collapseFilter .box-body > .col-sm-12, html.upos-esc #collapseFilter .box-body > .col-md-6:has(input[type="checkbox"]),
    html.upos-esc #collapseFilter .box-body > [class*="col-"]:has(input[type="checkbox"]), html.upos-esc #collapseFilter .box-body > [class*="col-"]:has(input[type="text"]:not(.select2-search__field)) { grid-column: 1 / -1; }
    html.upos-esc #collapseFilter .form-group { margin-bottom: 4px !important; }
    html.upos-esc #collapseFilter label { font-size: 12px !important; margin-bottom: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    html.upos-esc #collapseFilter .select2-container .select2-selection--single, html.upos-esc #collapseFilter .form-control { height: 36px !important; min-height: 36px !important; font-size: 14px !important; padding-top: 0; padding-bottom: 0; }
    html.upos-esc #collapseFilter .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; height: 34px !important; font-size: 14px !important; padding: 0 22px 0 8px !important; display: block; box-sizing: border-box; }
    html.upos-esc #collapseFilter .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px !important; }
    html.upos-esc #collapseFilter .checkbox, html.upos-esc #collapseFilter .icheck-primary, html.upos-esc #collapseFilter [class*="col-"]:has(input[type="checkbox"]) { margin: 0 !important; }
    html.upos-esc #collapseFilter input[type="checkbox"] { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; accent-color: #2a62a8; }
    html.upos-esc #collapseFilter [class*="col-"]:has(input[type="checkbox"]) label { font-size: 13px !important; white-space: normal; display: inline; }
}
/* Titulo "Filtros" (todas las pantallas del estilo nuevo): azul del sistema, un poco mas firme */
html.upos-esc .box-header .box-title a, html.upos-esc #collapseFilter ~ *, html.upos-esc a[href="#collapseFilter"] { color: #14457f !important; }
html.upos-esc a[href="#collapseFilter"] .fa-filter, html.upos-esc a[href="#collapseFilter"] svg { color: #2a62a8 !important; }

/* =====================================================================================================================
   PANTALLA DE VISUALIZACION DEL CLIENTE (/customer-display): total, pagado, cambio y saldo grandes y legibles
   Se reconoce por el bloque .customer_details. Sirve con el estilo nuevo y con el clasico.
   ===================================================================================================================== */
.pos_sell:has(.customer_details) .customer_details h3 { margin: 0 0 6px; font-size: 30px; font-weight: 800; color: #14457f; }
.pos_sell:has(.customer_details) #pos_table thead th { background: #14457f !important; color: #fff !important; font-size: 18px !important; text-transform: uppercase; letter-spacing: .4px; border-color: #0f3566 !important; }
.pos_sell:has(.customer_details) #pos_table tbody td { font-size: 22px; font-weight: 600; vertical-align: middle !important; color: #1b2f4f; }
.pos_sell:has(.customer_details) #pos_table tbody td span { font-size: 22px; font-weight: 700; }

/* Totales: Articulos / Total / Descuento... en filas tranquilas; "Total a pagar" en una barra grande de todo el ancho */
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed, .pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tbody { display: block; width: 100%; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed { margin-bottom: 10px; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tr { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed td { display: block; border: 0 !important; padding: 2px 0 !important; font-size: 19px; color: #1b2f4f; white-space: nowrap; width: auto !important; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed td b, .pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed td span { font-size: 19px !important; color: #1b2f4f !important; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tr:nth-child(2) td:last-child {
    flex: 1 0 100%; background: #0f3566; border-radius: 10px; padding: 8px 22px !important; margin-top: 6px; box-shadow: 0 2px 0 #0a2748; display: flex; justify-content: space-between; align-items: center;
}
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tr:nth-child(2) td:last-child b { color: #fff !important; font-size: 28px !important; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tr:nth-child(2) td:last-child #total_payable { color: #fff !important; font-size: 56px !important; font-weight: 800 !important; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Pagado / Cambio / Saldo: tres cuadros */
.pos_sell:has(.customer_details) .box.bg-orange { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; }
.pos_sell:has(.customer_details) .box.bg-orange > .box-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 !important; background: transparent !important; }
.pos_sell:has(.customer_details) .box.bg-orange > .box-body::before, .pos_sell:has(.customer_details) .box.bg-orange > .box-body::after { display: none !important; content: none !important; }
.pos_sell:has(.customer_details) .box.bg-orange > .box-body > [class*="col-"] { width: auto !important; float: none !important; padding: 8px 14px !important; border-radius: 10px; background: #2a62a8; color: #fff !important; text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.pos_sell:has(.customer_details) .box.bg-orange > .box-body > [class*="col-"]:nth-child(2) { background: #14457f; }   /* el cambio, el mas oscuro y destacado */
.pos_sell:has(.customer_details) .box.bg-orange > .box-body > [class*="col-"]:nth-child(3) { background: #e2733f; }   /* lo que falta por pagar */
.pos_sell:has(.customer_details) .box.bg-orange strong { color: #fff !important; font-size: 18px; font-weight: 700; display: block; }
.pos_sell:has(.customer_details) .box.bg-orange br { display: none; }
.pos_sell:has(.customer_details) .box.bg-orange .lead { color: #fff !important; font-size: 40px !important; font-weight: 800 !important; margin: 2px 0 0 !important; line-height: 1.15; display: block; font-variant-numeric: tabular-nums; }
.pos_sell:has(.customer_details) .box.bg-orange > .box-body > [class*="col-"]:nth-child(2) .lead { font-size: 48px !important; }

/* ---------- Visualizacion del cliente: los dos bloques llenan la pantalla, parejos, en cualquier tamano y forma de pantalla ---------- */
.content:has(.customer_details) { padding-bottom: 0 !important; }
.pos_sell:has(.customer_details) { width: 100% !important; flex: 0 0 100%; display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important; gap: 14px; margin-left: 0 !important; margin-right: 0 !important;
    height: calc(100vh - 146px); min-height: 360px; }
.pos_sell:has(.customer_details)::before, .pos_sell:has(.customer_details)::after { display: none !important; content: none !important; }
.pos_sell:has(.customer_details) > div:first-child { width: 60% !important; flex: 1 1 60%; min-width: 0; height: 100%; padding: 0 !important; }
.pos_sell:has(.customer_details) > div:last-child { width: 40% !important; flex: 1 1 40%; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex; background: #fff; }
.pos_sell:has(.customer_details) > div:first-child > div { height: 100% !important; margin: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
.pos_sell:has(.customer_details) > div:first-child .box-body.pb-0 { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pos_sell:has(.customer_details) > div:first-child .box-body.pb-0 > .row::before, .pos_sell:has(.customer_details) > div:first-child .box-body.pb-0 > .row::after { display: none !important; }
.pos_sell:has(.customer_details) > div:first-child .box-body.pb-0 > .row:first-child { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; }
.pos_sell:has(.customer_details) .pos_product_div { height: auto !important; flex: 1 1 100%; min-height: 0; max-height: calc(100% - 52px); overflow-y: auto; }
.pos_sell:has(.customer_details) > div:first-child .box-body.pb-0 > .row:last-child { flex: 0 0 auto; }
/* Derecha: el carrusel ocupa todo el bloque */
.pos_sell:has(.customer_details) #myCarousel, .pos_sell:has(.customer_details) #myCarousel .carousel-inner, .pos_sell:has(.customer_details) #myCarousel .item { height: 100% !important; width: 100%; }
.pos_sell:has(.customer_details) #myCarousel .item img { max-height: 100%; }
/* Letras que se adaptan al tamano de la pantalla */
.pos_sell:has(.customer_details) .customer_details h3 { font-size: clamp(20px, 3.2vmin, 44px); }
.pos_sell:has(.customer_details) #pos_table thead th { font-size: clamp(13px, 2vmin, 24px) !important; }
.pos_sell:has(.customer_details) #pos_table tbody td, .pos_sell:has(.customer_details) #pos_table tbody td span { font-size: clamp(15px, 2.6vmin, 32px); }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed td, .pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed td b, .pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed td span { font-size: clamp(13px, 2.1vmin, 26px) !important; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tr:nth-child(2) td:last-child b { font-size: clamp(18px, 2.6vmin, 34px) !important; font-weight: 600 !important; }
.pos_sell:has(.customer_details) .col-md-12 > table.table.table-condensed tr:nth-child(2) td:last-child #total_payable { font-size: clamp(30px, 5.4vmin, 72px) !important; }
.pos_sell:has(.customer_details) .box.bg-orange strong { font-size: clamp(12px, 1.7vmin, 21px); font-weight: 600; letter-spacing: .3px; opacity: .9; }
.pos_sell:has(.customer_details) .box.bg-orange .lead { font-size: clamp(22px, 3.6vmin, 50px) !important; }
.pos_sell:has(.customer_details) .box.bg-orange > .box-body > [class*="col-"]:nth-child(2) .lead { font-size: clamp(24px, 4.2vmin, 58px) !important; }
/* Pantalla vertical o cuadrada: un bloque arriba y el otro abajo, pero llenando igual toda la pantalla */
@media (max-aspect-ratio: 1/1), (max-width: 900px) {
    .pos_sell:has(.customer_details) { flex-direction: column !important; }
    .pos_sell:has(.customer_details) > div:first-child { width: 100% !important; flex: 1 1 64%; height: auto; min-height: 0; }
    .pos_sell:has(.customer_details) > div:last-child { width: 100% !important; flex: 1 1 36%; height: auto !important; min-height: 0; }
}

/* ---------- Ventana de editar producto del POS (al tocar un producto en el celular): la ventana heredaba el celeste de la linea de existencia ---------- */
html.upos-esc #pos_table .row_edit_product_price_model, html.upos-esc #pos_table .row_edit_product_price_model * { color: #1b2f4f !important; text-shadow: none; }
html.upos-esc #pos_table .row_edit_product_price_model .modal-content { border: 0; border-radius: 10px; overflow: hidden; }
html.upos-esc #pos_table .row_edit_product_price_model .modal-header { background: #0f3566 !important; border: 0; }
html.upos-esc #pos_table .row_edit_product_price_model .modal-header .modal-title, html.upos-esc #pos_table .row_edit_product_price_model .modal-header .close { color: #fff !important; opacity: 1; font-weight: 700; }
html.upos-esc #pos_table .row_edit_product_price_model .modal-body { background: #e6eff9; }
html.upos-esc #pos_table .row_edit_product_price_model label { color: #14457f !important; font-weight: 700; font-size: 13px; margin-bottom: 3px; }
html.upos-esc #pos_table .row_edit_product_price_model .help-block, html.upos-esc #pos_table .row_edit_product_price_model small { color: #5c7699 !important; font-weight: 500; white-space: normal !important; font-size: 12px; }
html.upos-esc #pos_table .row_edit_product_price_model .form-control, html.upos-esc #pos_table .row_edit_product_price_model select, html.upos-esc #pos_table .row_edit_product_price_model textarea { color: #14457f !important; font-weight: 600; border: 2px solid #2a62a8 !important; border-radius: 8px !important; background: #fff !important; }
html.upos-esc #pos_table .row_edit_product_price_model .modal-footer { background: #dbe8f7; border: 0; }
html.upos-esc #pos_table .row_edit_product_price_model .modal-footer .tw-dw-btn { background: var(--caja-rojo) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font-weight: 800; min-height: 44px; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
html.upos-esc #pos_table .row_edit_product_price_model { background-color: #e6eff9; }

/* Existencia en las lineas de la venta: verde si hay, rojo si no hay */
html.upos-esc #pos_table small.text-muted.pos-ex-ok, html.upos-esc #pos_table .ultrapos-mobile-product-cell .ultrapos-mobile-sku-line.pos-ex-ok { color: #1e7e34 !important; font-weight: 700; }
html.upos-esc #pos_table small.text-muted.pos-ex-sin, html.upos-esc #pos_table .ultrapos-mobile-product-cell .ultrapos-mobile-sku-line.pos-ex-sin { color: #c0271c !important; font-weight: 700; }
html.upos-esc #pos_table.ultrapos-pos-table tbody td.ultrapos-mobile-product-cell > .ultrapos-mobile-stock-line.pos-ex-ok { color: #1e7e34 !important; font-weight: 700 !important; }
html.upos-esc #pos_table.ultrapos-pos-table tbody td.ultrapos-mobile-product-cell > .ultrapos-mobile-stock-line.pos-ex-sin { color: #c0271c !important; font-weight: 700 !important; }

/* ---------- Sin la barrita de carga de arriba ni la ruedita chica del encabezado (Pace): solo queda la ruedita de las listas ---------- */
html.upos-esc .pace, html.upos-esc .pace .pace-progress, html.upos-esc .pace .pace-activity, html.upos-esc .pace-progress, html.upos-esc .pace-activity { display: none !important; }

/* Ventana de editar producto en el celular: el fondo celeste llena toda la pantalla (antes abajo quedaba blanco) */
@media (max-width: 767px) {
    html.upos-esc #pos_table .row_edit_product_price_model .modal-dialog { min-height: 100vh; margin: 0 !important; }
    html.upos-esc #pos_table .row_edit_product_price_model .modal-content { min-height: 100vh; display: flex; flex-direction: column; border-radius: 0; background: #e6eff9; }
    html.upos-esc #pos_table .row_edit_product_price_model .modal-body { flex: 1 1 auto; }
}

/* Celular: se desactiva el "jalar para recargar" del navegador (el circulo oscuro con la ruedita y la barrita que salen arriba al deslizar hacia abajo al inicio de la pantalla) */
@media (max-width: 767px) {
    html.upos-esc, html.upos-esc body, html.upos-esc #scrollable-container, html.upos-esc section.content { overscroll-behavior-y: none !important; overscroll-behavior: none; }
}

/* Linea elegida (para subir y bajar la cantidad con las teclas + y -): una rayita azul abajo, tambien en el estilo clasico */
#pos_table tbody tr.caja-fila td { box-shadow: inset 0 -2px 0 #2a62a8; }

/* POS en pantalla ancha: Cotizacion y Suspender ya estan en el panel de botones (junto al teclado), se quitan de la barra de abajo */
@media (min-width: 992px) {
    html.upos-esc .pos-secondary-actions #pos-quotation,
    html.upos-esc .pos-secondary-actions button[data-pay_method="suspend"] { display: none !important; }
}

/* ---------- Respuesta al instante al tocar un enlace o Guardar (en los dos estilos) ---------- */
@keyframes upos-giro { to { transform: rotate(360deg); } }
.upos-yendo {
    position: relative !important;
    pointer-events: none !important;   /* un segundo toque no repite el guardado */
    cursor: progress !important;
    opacity: .78;
}
.upos-yendo::after { content: none !important; display: none !important; }   /* sin ruedita en botones: la ruedita sale solo en el centro */
/* En la barra de abajo la ruedita ocupa el lugar del dibujito */

/* POS en la computadora: las tarjetas de producto sin el borde azul grueso de arriba; llevan una linea fina del mismo color alrededor y la sombrita de abajo (como un boton) */
@media (min-width: 992px) {
    html.upos-esc #product_list_body .pos-clean-card {
        border: 1px solid #8eaacd !important;
        box-shadow: 0 2px 0 #8eaacd !important;
    }
}

/* Tarjetas del POS: el fondo blanco de la foto se extiende hasta los lados de la tarjeta (la foto no se estira, solo el blanco) */
html.upos-esc #product_list_body .pos-clean-card .pos-clean-image {
    background-color: #fff !important;
    border-radius: 5px 5px 0 0;
}

/* Categoria y Marca en una sola fila (POS en la computadora); la tira vieja de categorias queda escondida y se sigue usando por detras */
@media (min-width: 992px) {
    html.upos-esc #caja-categorias { display: none !important; }
    html.upos-esc #caja-filtros { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0 0 8px; position: relative; flex: none !important; }
    html.upos-esc .caja-filtro {
        flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
        background: #fff; border: 1px solid #8eaacd; border-radius: 8px; box-shadow: 0 2px 0 #8eaacd; color: #14457f; cursor: pointer; text-align: left;
    }
    html.upos-esc .caja-filtro:active { transform: translateY(2px); box-shadow: none; }
    html.upos-esc .caja-filtro > i:first-child { font-size: 15px; }
    html.upos-esc .caja-f-et { font-size: 12px; color: #5c7699; font-weight: 600; }
    html.upos-esc .caja-f-val { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.upos-esc .caja-f-flecha { font-size: 11px; opacity: .7; }
    html.upos-esc .caja-filtro.elegido { background: #2a62a8; border-color: #14457f; box-shadow: 0 2px 0 #14457f; color: #fff; }
    html.upos-esc .caja-filtro.elegido .caja-f-et { display: none; }   /* ya elegido: solo el nombre, para que quepa */
    html.upos-esc .caja-filtro.abierto .caja-f-flecha { transform: rotate(180deg); }
    html.upos-esc .caja-quitar {
        flex: none; width: 40px; height: 40px; padding: 0; background: #fde9dc; border: 1px solid #e2733f; border-radius: 8px; color: #b4491c; font-weight: 700; font-size: 16px; cursor: pointer;
    }
    html.upos-esc .caja-quitar[hidden] { display: none; }
    html.upos-esc #caja-panel-filtro {
        position: absolute; top: 46px; left: 0; right: 0; z-index: 80; padding: 8px; background: #fff;
        border: 1px solid #8eaacd; border-radius: 8px; box-shadow: 0 6px 18px rgba(20, 69, 127, .25), 0 2px 0 #8eaacd;
    }
    html.upos-esc .caja-panel-buscar { width: 100%; height: 36px; margin-bottom: 8px; padding: 0 10px; border: 1px solid #8eaacd; border-radius: 6px; font-size: 14px; }
    html.upos-esc .caja-panel-lista { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 52vh; overflow-y: auto; }
    html.upos-esc .caja-op {
        border: 1px solid #8eaacd; border-radius: 6px; background: #dbe8f7; color: #14457f; font-weight: 700; font-size: 12px;
        padding: 8px 6px; line-height: 1.15; cursor: pointer; text-align: center; overflow-wrap: anywhere;
    }
    html.upos-esc .caja-op:hover { background: #cfe0f4; }
    html.upos-esc .caja-op.activa { background: #2a62a8; border-color: #14457f; color: #fff; }
    html.upos-esc .caja-sin { grid-column: 1 / -1; text-align: center; color: #5c7699; margin: 8px 0; }
}

/* ---------- Modo Pago del teclado: lo que entrega el cliente y el vuelto (POS en la computadora) ---------- */
@media (min-width: 992px) {
    html.upos-esc .caja-modos { grid-template-columns: 1fr 1fr 1fr; }
    /* El encabezado (pantalla azul) tiene SIEMPRE el mismo alto en los tres modos: nada se mueve ni se estira al cambiar de Unidades a Precio a Pago */
    html.upos-esc #caja-pantalla { box-sizing: border-box; height: 84px !important; min-height: 84px !important; max-height: 84px !important; overflow: hidden; flex: none; }
    html.upos-esc #caja-pantalla .caja-vuelto { display: block; font-size: 15px; font-weight: 800; text-align: right; color: #b7cdea; padding-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; }
    html.upos-esc #caja-pantalla .caja-vuelto.bien { color: #fff; }        /* vuelto: blanco (de adorno, sin verde) */
    html.upos-esc #caja-pantalla .caja-vuelto.falta { color: #ffd98a; }     /* ambar: falta */
    html.upos-esc #caja-pantalla .caja-vuelto.sacudir { animation: upos-sacudir .4s; }
    /* Montos rapidos de cobro: fila fija debajo de Unidades / Precio / Pago (siempre ocupa su lugar). Solo se activan al tocar Pago.
       Con dos monedas, el primer casillero se divide en los botones de moneda ($ y C$); con una sola moneda son 3 casilleros. */
    html.upos-esc .caja-rapidos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 32px; margin: 6px 0 0; box-sizing: border-box; }
    html.upos-esc .caja-rapidos.caja-multi { grid-template-columns: repeat(4, 1fr); }
    html.upos-esc .caja-monedas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; min-width: 0; }
    html.upos-esc .caja-moneda {
        height: 32px; min-width: 0; border: 2px solid #2a62a8; border-radius: 8px; background: #fff; color: #14457f; font-weight: 800; font-size: 13px; cursor: pointer; padding: 0;
        opacity: .45; pointer-events: none; transition: opacity .12s;
    }
    html.upos-esc #caja-panel.caja-en-pago .caja-moneda { opacity: 1; pointer-events: auto; }
    html.upos-esc .caja-moneda.con-monto { background: #dbe8f7; }
    html.upos-esc .caja-moneda.activo { background: var(--caja-azul); border-color: var(--caja-azul); color: #fff; }
    html.upos-esc #caja-panel.caja-multi-mon #caja-pantalla .caja-valor { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.upos-esc .caja-rapido {
        height: 32px; border: 1px solid #8eaacd; border-radius: 8px; background: #dbe8f7; color: #14457f; font-weight: 800; font-size: 13px; cursor: pointer; padding: 0 2px;
        opacity: .45; pointer-events: none; transition: opacity .12s;
    }
    html.upos-esc #caja-panel.caja-en-pago .caja-rapido { opacity: 1; pointer-events: auto; }
    html.upos-esc .caja-rapido.caja-rapido-vacio, html.upos-esc #caja-panel.caja-en-pago .caja-rapido.caja-rapido-vacio { opacity: .45; pointer-events: none; }
    html.upos-esc #caja-panel.caja-en-pago .caja-rapido:hover { background: #cfe0f4; }
    html.upos-esc #caja-panel.caja-en-pago .caja-rapido:active { transform: translateY(1px); }
    html.upos-esc #caja-panel.caja-en-pago .caja-t-ok { background: #1e7e34; box-shadow: 0 3px 0 #14602a; font-size: 13px; font-weight: 800; color: #fff; }
    /* El boton Efectivo de la barra de abajo se quita: ahora se cobra en efectivo con el modo Pago del teclado (el boton sigue existiendo por detras) */
    html.upos-esc .pos-form-actions .pos-desktop-only-action.pos-express-finalize[data-pay_method="cash"] { display: none !important; }
}
@keyframes upos-sacudir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }

/* Vuelto grande, ya guardada la venta */
#caja-vuelto-grande {
    position: fixed; left: 50%; top: 28%; transform: translateX(-50%); z-index: 99999; cursor: pointer;
    background: linear-gradient(#eef5fd, #c4dbf3 55%, #9cc3ec); color: #0f3566; border: 3px solid #8eaacd; border-radius: 22px; padding: 30px 80px; width: max-content; max-width: 92vw; white-space: nowrap; text-align: center; box-shadow:  0 14px 50px rgba(20, 69, 127, .35);
    animation: upos-vuelto-entra .25s ease-out;
}
#caja-vuelto-grande small { display: block; font-size: 26px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
#caja-vuelto-grande b { display: block; font-size: 88px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
@keyframes upos-vuelto-entra { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }


/* ---------- Ventas suspendidas: numeritos en la barra de abajo (POS en la computadora) ---------- */
@media (min-width: 992px) {
    html.upos-esc #caja-suspendidas { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; padding: 0 14px; min-width: 0; overflow: hidden; }
    html.upos-esc #caja-suspendidas:empty { display: none; }
    html.upos-esc .caja-susp-t { font-size: 12px; font-weight: 800; color: #5b6f8d; white-space: nowrap; margin-right: 2px; }
    html.upos-esc .caja-susp {
        flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 8px; border: 2px solid #2a62a8; border-radius: 10px; background: #fff; color: #14457f;
        font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 2px 0 #8eaacd; -webkit-tap-highlight-color: transparent;
    }
    html.upos-esc .caja-susp:hover { background: #dbe8f7; }
    html.upos-esc .caja-susp:active { transform: translateY(1px); box-shadow: none; }
    html.upos-esc .caja-susp.activo { background: var(--caja-azul); color: #fff; cursor: default; }
}
@media (max-width: 991px) { #caja-suspendidas { display: none; } }

/* El boton de pausa (ventas suspendidas) salia en gris, como apagado: ahora tiene el mismo azul que los demas y muestra cuantas hay en espera */
html.upos-esc #view_suspended_sales i, html.upos-esc #view_suspended_sales i.fa-pause-circle { color: #2a62a8 !important; }
html.upos-esc #view_suspended_sales { position: relative; }
html.upos-esc #view_suspended_sales[data-n]::after {
    content: attr(data-n); position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
    border-radius: 9px; background: #f0a830; color: #14305a; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; pointer-events: none;
}

/* En la pantalla de editar venta (suspendidas) el panel de productos trae un bloque <style> suelto: no debe verse como texto */
html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos style,
html.upos-esc :is(#add_pos_sell_form, #edit_pos_sell_form) .row.caja-fila-pos script { display: none !important; }
/* Editar venta: la fila vieja de Categoria/Marca ya la reemplaza la barra nueva; que no robe espacio a las tarjetas de productos */
html.upos-esc #edit_pos_sell_form .row.caja-fila-pos > div:last-child > .row.tw-mb-1 { display: none !important; }
/* Editar venta: las tarjetas de productos van dentro del mismo bloque blanco redondeado que en la venta nueva */
@media (min-width: 992px) {
    html.upos-esc #edit_pos_sell_form .row.caja-fila-pos > div:last-child > .row.caja-llena {
        background: #fff; border-radius: 16px; box-shadow: rgba(17, 17, 26, 0.1) 0 0 16px; padding: 8px; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box;
    }
}
@media (min-width: 992px) {
    html.upos-esc #edit_pos_sell_form .row.caja-fila-pos > div:last-child > .row.caja-llena > .col-md-12 { padding-left: 0; padding-right: 0; }
}

/* Boton rapido de "preguntar al cobrar" (imprimir / WhatsApp / no imprimir): casilla marcada = pregunta; casilla vacia = cobra e imprime directo */
html.upos-esc #caja-pregunta { width: auto !important; padding: 0 10px; white-space: nowrap; }
html.upos-esc #caja-pregunta strong { display: inline-flex; align-items: center; gap: 7px; margin: 0 !important; }
html.upos-esc #caja-pregunta .caja-chk { display: inline-block; width: 17px; height: 17px; box-sizing: border-box; border: 2px solid #2a62a8; border-radius: 4px; background: #fff; position: relative; flex: none; }
html.upos-esc #caja-pregunta[data-pregunta="1"] .caja-chk { background: #2a62a8; }
html.upos-esc #caja-pregunta[data-pregunta="1"] .caja-chk::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html.upos-esc #caja-pregunta .caja-pregunta-t { font-size: 12px; font-weight: 800; color: #14457f; }
html.upos-esc #caja-pregunta[data-pregunta="1"] { border-color: #2a62a8 !important; }
@media (max-width: 991px) { html.upos-esc #caja-pregunta .caja-pregunta-t { display: none; } }

/* ---------- Ventana "Ventas Suspendidas" con el estilo nuevo: encabezado azul marino, tarjetas blancas, botones azul / rojo ---------- */
html.upos-esc .modal-content:has(.small-box.bg-yellow), html.upos-esc .modal-content:has(.modal-body > .row > p.text-center) { border-radius: 14px; overflow: hidden; border: 0; box-shadow: 0 8px 28px rgba(15, 53, 102, .35); }
html.upos-esc .modal-content:has(.small-box.bg-yellow) .modal-header { background: #0f3566 !important; border: 0; padding: 14px 20px; }
html.upos-esc .modal-content:has(.small-box.bg-yellow) .modal-header .modal-title { color: #fff !important; font-size: 20px; font-weight: 700; }
html.upos-esc .modal-content:has(.small-box.bg-yellow) .modal-header .close { color: #fff; opacity: 1; font-size: 30px; text-shadow: none; }
html.upos-esc .modal-content:has(.small-box.bg-yellow) .modal-body { background: #e6eff9; padding: 16px 14px 6px; }
html.upos-esc .modal-content:has(.small-box.bg-yellow) .modal-footer { background: #e6eff9; border: 0; padding: 6px 16px 14px; }
html.upos-esc .modal-content:has(.small-box.bg-yellow) .modal-footer .tw-dw-btn { background: #2a62a8 !important; border: 0 !important; color: #fff !important; border-radius: 10px; font-weight: 700; padding: 8px 22px; height: auto; min-height: 38px; }
html.upos-esc .modal-content .small-box.bg-yellow {
    background: #fff !important; color: #1b2f4f !important; border: 1px solid #8eaacd; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 0 #8eaacd, 0 4px 12px rgba(20, 69, 127, .12); margin-bottom: 14px;
}
html.upos-esc .modal-content .small-box.bg-yellow .inner { color: #1b2f4f; padding: 12px 12px 10px; }
html.upos-esc .modal-content .small-box.bg-yellow .inner p { color: #1b2f4f; margin: 0 0 6px; font-size: 14px; }
html.upos-esc .modal-content .small-box.bg-yellow .inner p:first-child { font-weight: 800; color: #14457f; }
html.upos-esc .modal-content .small-box.bg-yellow .inner strong { color: #14457f; }
html.upos-esc .modal-content .small-box.bg-yellow .inner i { color: #2a62a8; }
html.upos-esc .modal-content .small-box.bg-yellow .small-box-footer { display: block; padding: 10px 8px !important; font-weight: 800; font-size: 14px; text-align: center; color: #fff !important; text-decoration: none; }
html.upos-esc .modal-content .small-box.bg-yellow .small-box-footer.bg-blue { background: #2a62a8 !important; }
html.upos-esc .modal-content .small-box.bg-yellow .small-box-footer.bg-blue:hover { background: #3b76b7 !important; }
html.upos-esc .modal-content .small-box.bg-yellow .small-box-footer.bg-red { background: var(--caja-rojo, #e2733f) !important; }
html.upos-esc .modal-content .small-box.bg-yellow .small-box-footer.bg-red:hover { background: #ec8456 !important; }

/* ---------- Ruedita UNICA en el centro de la pantalla (mientras se arma una pantalla, se cambia de pantalla o carga algo) ---------- */
html.upos-armando::before, html.upos-rueda::before, html.upos-lista-rueda::before {
    content: ""; position: fixed; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; box-sizing: border-box; z-index: 2147483000;
    border-radius: 50%; background: #fff; box-shadow: 0 4px 18px rgba(15, 53, 102, .35); pointer-events: none;
}
html.upos-armando::after, html.upos-rueda::after, html.upos-lista-rueda::after {
    content: ""; position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box; z-index: 2147483001;
    border: 5px solid #dbe8f7; border-top-color: #2a62a8; border-radius: 50%; animation: upos-giro .8s linear infinite; pointer-events: none;
}
/* Las ruedas que giran dentro de botones, cuadros del Inicio y tablas no se muestran: queda solo la del centro */
html.upos-esc .fa-spin, html.upos-esc .fa-pulse { visibility: hidden !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { html.upos-armando::after, html.upos-rueda::after, html.upos-lista-rueda::after { animation-duration: 1.6s; } }
html.upos-armando body { background: linear-gradient(180deg, #e9f1fb 0%, #d6e4f5 100%) fixed; }

/* ---------- Boton marcado con el teclado (flechas izquierda / derecha + Enter) en las ventanas de pagar, avisos y imprimir / WhatsApp ---------- */
#modal_payment .modal-footer .caja-sel, .swal-button.caja-sel, #finalizeOptionsModal .caja-sel {
    outline: 3px solid #2a62a8 !important; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(42, 98, 168, .22) !important; position: relative; z-index: 1;
}
.swal-button:focus { outline: 3px solid #2a62a8; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(42, 98, 168, .22); }
/* El boton OK rojo de los avisos de confirmar va en el naranja del sistema */
html.upos-esc .swal-button--danger { background-color: #e2733f !important; }
html.upos-esc .swal-button--danger:not([disabled]):hover { background-color: #ec8456 !important; }
html.upos-esc .swal-button--cancel { background-color: #dbe8f7 !important; color: #14457f !important; }

/* LISTAS SIN PARPADEO (ver el comienzo de public/js/estilo-caja.js): la tabla de una lista que todavia no se arma (las que llevan la clase
   ajax_view, como Productos, Ventas o Compras) no se ve pelada hasta que su barra de botones queda lista. Si por cualquier motivo la lista
   no se arma, la animacion la muestra sola a los 2,5 s (no depende de JavaScript). */
table.ajax_view:not(.dataTable) { visibility: hidden; animation: upos-tabla-aparece 0s linear 2.5s forwards; }
@keyframes upos-tabla-aparece { to { visibility: visible; } }
/* Las tablas que la lista arma por dentro (la copia del encabezado) no son la tabla pelada: no se esconden. */
.dataTables_wrapper table.ajax_view { visibility: inherit !important; animation: none !important; }

/* Lo mismo para el resto de las listas (Contactos, Roles, Usuarios, Gastos...): se listan por nombre porque no todas llevan la clase ajax_view.
   Solo si la tabla todavia no tiene filas (las que ya vienen con filas desde el servidor no se esconden). Mismo plazo de 2,5 s. */
@supports selector(:has(a)) {
    table#account_sub_type_table:not(.dataTable):not(:has(tbody tr)),
    table#activity_log_table:not(.dataTable):not(:has(tbody tr)),
    table#ad_pc_table:not(.dataTable):not(:has(tbody tr)),
    table#all_subscriptions_table:not(.dataTable):not(:has(tbody tr)),
    table#asset_maintenance_table:not(.dataTable):not(:has(tbody tr)),
    table#attendance_table:not(.dataTable):not(:has(tbody tr)),
    table#attribute_template_table:not(.dataTable):not(:has(tbody tr)),
    table#barcode_table:not(.dataTable):not(:has(tbody tr)),
    table#bookings_table:not(.dataTable):not(:has(tbody tr)),
    table#brands_table:not(.dataTable):not(:has(tbody tr)),
    table#business_location_table:not(.dataTable):not(:has(tbody tr)),
    table#capital_account_table:not(.dataTable):not(:has(tbody tr)),
    table#cash_flow_table:not(.dataTable):not(:has(tbody tr)),
    table#category_table:not(.dataTable):not(:has(tbody tr)),
    table#cg_report_table:not(.dataTable):not(:has(tbody tr)),
    table#clients_table:not(.dataTable):not(:has(tbody tr)),
    table#cobranza_table:not(.dataTable):not(:has(tbody tr)),
    table#contact_table:not(.dataTable):not(:has(tbody tr)),
    table#customer_groups_table:not(.dataTable):not(:has(tbody tr)),
    table#detail_type_table:not(.dataTable):not(:has(tbody tr)),
    table#discounts_table:not(.dataTable):not(:has(tbody tr)),
    table#documents_and_notes_table:not(.dataTable):not(:has(tbody tr)),
    table#expense_category_table:not(.dataTable):not(:has(tbody tr)),
    table#expense_report_table:not(.dataTable):not(:has(tbody tr)),
    table#expense_table:not(.dataTable):not(:has(tbody tr)),
    table#expense_tax_table:not(.dataTable):not(:has(tbody tr)),
    table#holidays_table:not(.dataTable):not(:has(tbody tr)),
    table#input_tax_table:not(.dataTable):not(:has(tbody tr)),
    table#invoice_table:not(.dataTable):not(:has(tbody tr)),
    table#items_report_table:not(.dataTable):not(:has(tbody tr)),
    table#journal_table:not(.dataTable):not(:has(tbody tr)),
    table#leave_table:not(.dataTable):not(:has(tbody tr)),
    table#leave_type_table:not(.dataTable):not(:has(tbody tr)),
    table#modifier_table:not(.dataTable):not(:has(tbody tr)),
    table#other_account_table:not(.dataTable):not(:has(tbody tr)),
    table#output_tax_table:not(.dataTable):not(:has(tbody tr)),
    table#payroll_group_table:not(.dataTable):not(:has(tbody tr)),
    table#payrolls_table:not(.dataTable):not(:has(tbody tr)),
    table#pending_repair_table:not(.dataTable):not(:has(tbody tr)),
    table#printer_table:not(.dataTable):not(:has(tbody tr)),
    table#product_table:not(.dataTable):not(:has(tbody tr)),
    table#productions_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_brands_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_categories_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_customer_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_date_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_day_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_invoice_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_locations_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_products_table:not(.dataTable):not(:has(tbody tr)),
    table#profit_by_service_staff_table:not(.dataTable):not(:has(tbody tr)),
    table#purchase_order_table:not(.dataTable):not(:has(tbody tr)),
    table#purchase_payment_dues_table:not(.dataTable):not(:has(tbody tr)),
    table#purchase_payment_table:not(.dataTable):not(:has(tbody tr)),
    table#purchase_report_table:not(.dataTable):not(:has(tbody tr)),
    table#purchase_requisition_table:not(.dataTable):not(:has(tbody tr)),
    table#purchase_table:not(.dataTable):not(:has(tbody tr)),
    table#quotation_table:not(.dataTable):not(:has(tbody tr)),
    table#recipe_table:not(.dataTable):not(:has(tbody tr)),
    table#register_report_table:not(.dataTable):not(:has(tbody tr)),
    table#roles_table:not(.dataTable):not(:has(tbody tr)),
    table#rp_log_table:not(.dataTable):not(:has(tbody tr)),
    table#sale_report_table:not(.dataTable):not(:has(tbody tr)),
    table#sales_commission_agent_table:not(.dataTable):not(:has(tbody tr)),
    table#sales_order_table:not(.dataTable):not(:has(tbody tr)),
    table#sales_payment_dues_table:not(.dataTable):not(:has(tbody tr)),
    table#sales_target_table:not(.dataTable):not(:has(tbody tr)),
    table#sales_targets_table:not(.dataTable):not(:has(tbody tr)),
    table#sell_payment_table:not(.dataTable):not(:has(tbody tr)),
    table#sell_return_table:not(.dataTable):not(:has(tbody tr)),
    table#sell_table:not(.dataTable):not(:has(tbody tr)),
    table#selling_price_group_table:not(.dataTable):not(:has(tbody tr)),
    table#shift_table:not(.dataTable):not(:has(tbody tr)),
    table#shipments_table:not(.dataTable):not(:has(tbody tr)),
    table#status_table:not(.dataTable):not(:has(tbody tr)),
    table#stock_adjustment_table:not(.dataTable):not(:has(tbody tr)),
    table#stock_alert_table:not(.dataTable):not(:has(tbody tr)),
    table#stock_expiry_alert_table:not(.dataTable):not(:has(tbody tr)),
    table#stock_history_table:not(.dataTable):not(:has(tbody tr)),
    table#stock_report_table:not(.dataTable):not(:has(tbody tr)),
    table#stock_transfer_table:not(.dataTable):not(:has(tbody tr)),
    table#subscriptions_table:not(.dataTable):not(:has(tbody tr)),
    table#superadmin_Coupons_table:not(.dataTable):not(:has(tbody tr)),
    table#superadmin_business_table:not(.dataTable):not(:has(tbody tr)),
    table#superadmin_subscription_table:not(.dataTable):not(:has(tbody tr)),
    table#supplier_stock_report_table:not(.dataTable):not(:has(tbody tr)),
    table#tables_table:not(.dataTable):not(:has(tbody tr)),
    table#task_table:not(.dataTable):not(:has(tbody tr)),
    table#tax_groups_table:not(.dataTable):not(:has(tbody tr)),
    table#tax_rates_table:not(.dataTable):not(:has(tbody tr)),
    table#todays_bookings_table:not(.dataTable):not(:has(tbody tr)),
    table#transaction_expense_table:not(.dataTable):not(:has(tbody tr)),
    table#transfer_table:not(.dataTable):not(:has(tbody tr)),
    table#types_of_service_table:not(.dataTable):not(:has(tbody tr)),
    table#unit_table:not(.dataTable):not(:has(tbody tr)),
    table#users_table:not(.dataTable):not(:has(tbody tr)),
    table#variation_table:not(.dataTable):not(:has(tbody tr)),
    table#warranty_table:not(.dataTable):not(:has(tbody tr)) { visibility: hidden; animation: upos-tabla-aparece 0s linear 2.5s forwards; }
}