/* ==========================================================================
   VORTEK CUSTOM STYLES
   ========================================================================== */

.table-clean th {
    border-bottom: 1px solid #e9ecef !important;
    background-color: #f8f9fa;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1rem !important;
}

.table-clean td {
    padding: 1rem !important;
    border-bottom: 1px solid #f1f1f1 !important;
    vertical-align: middle;
}

.table-clean tr:last-child td {
    border-bottom: none;
}

/* --- TRUCO CLAVE: Ocultar controles nativos de la librería --- */
/* Ocultamos .datatable-top porque usaremos NUESTROS PROPIOS controles arriba */
.datatable-top {
    display: none !important;
}

/* --- 3. BOTONES APP VORTEK (Estilo Tarjeta) --- */
/* Tarjeta vertical: el icono va dentro de un disco de color y el rótulo debajo.
   Cada acción trae su acento en --vk-accent como RGB plano ("16, 185, 129") en
   vez de hex, porque así el mismo valor sirve para el disco al 12 %, el borde al
   45 % y el relleno sólido del hover sin declarar tres colores por acción.
   La acción que no tenga color definido en BD cae al gris de aquí. */
.btn-app-vortek {
    --vk-accent: 75, 86, 117;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid #e2e5e9;
    background-color: #ffffff;
    border-radius: 14px;
    min-width: 84px;
    padding: 0.75rem 0.5rem;
    color: #4b5675;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

    .btn-app-vortek .btn-app-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(var(--vk-accent), 0.12);
        color: rgb(var(--vk-accent));
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .btn-app-vortek .btn-app-icon i {
            font-size: 1.25rem;
            line-height: 1;
        }

    .btn-app-vortek .btn-app-label {
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }

    .btn-app-vortek:hover {
        border-color: rgba(var(--vk-accent), 0.45);
        box-shadow: 0 4px 10px rgba(var(--vk-accent), 0.18);
        transform: translateY(-2px);
    }

        .btn-app-vortek:hover .btn-app-icon {
            background-color: rgb(var(--vk-accent));
            color: #ffffff;
            transform: scale(1.06);
        }

    /* El rebote al pulsar es la única confirmación táctil en tablet. */
    .btn-app-vortek:active {
        transform: scale(0.96);
    }

    .btn-app-vortek:focus-visible {
        outline: 2px solid rgb(var(--vk-accent));
        outline-offset: 2px;
    }

/* --- 4. SKELETON LOADING (Animación de Carga) --- */
.skeleton {
    background-color: #e2e5e7;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1s ease infinite;
    border-radius: 4px;
    display: inline-block;
}

@keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}

.skeleton-row td {
    padding: 1.2rem 1rem !important;
}

.skeleton-text {
    height: 10px;
    width: 100%;
    margin-bottom: 5px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-badge {
    width: 60px;
    height: 20px;
}

/* --- 5. MODO OSCURO (Dark Mode Support) --- */
[data-pc-theme="dark"] .table-clean th {
    background-color: #1f2937;
    border-bottom-color: #374151 !important;
    color: #e5e7eb;
}

[data-pc-theme="dark"] .table-clean td {
    border-bottom-color: #374151 !important;
    color: #d1d5db;
}

[data-pc-theme="dark"] .datatable-sorter {
    color: #d1d5db;
}

    [data-pc-theme="dark"] .datatable-sorter::before {
        border-bottom-color: #e5e7eb;
    }

    [data-pc-theme="dark"] .datatable-sorter::after {
        border-top-color: #e5e7eb;
    }

[data-pc-theme="dark"] .btn-app-vortek {
    background-color: #1b2635;
    border-color: #374151;
    color: #d1d5db;
}

    /* Sobre fondo oscuro el disco al 12 % desaparece: se sube el velo y el
       icono se aclara para que el acento siga leyéndose. */
    [data-pc-theme="dark"] .btn-app-vortek .btn-app-icon {
        background-color: rgba(var(--vk-accent), 0.22);
        color: rgb(var(--vk-accent));
        filter: brightness(1.25);
    }

    [data-pc-theme="dark"] .btn-app-vortek:hover {
        border-color: rgba(var(--vk-accent), 0.65);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

        [data-pc-theme="dark"] .btn-app-vortek:hover .btn-app-icon {
            background-color: rgb(var(--vk-accent));
            color: #111827;
        }

[data-pc-theme="dark"] .skeleton {
    background-color: #374151;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

[data-pc-theme="dark"] .skeleton-avatar {
    background-color: #374151;
}


/* ==========================================================================
   FIX NOTIFICACIONES (Traducción de SCSS a CSS)
   ========================================================================== */

/**  =====================
    28. Notification css start
========================== **/
.alert-dismissable .close,
.alert-dismissible .close {
    color: inherit;
    text-shadow: none;
}

.notifier-container {
    z-index: 1051;
    font-family: var(--bs-font-sans-serif);
    width: 400px;
    max-width: 98%;
    top: 15px;
}

.notifier {
    padding: calc(25px - 5px) calc(25px - 5px);
    border-radius: 8px;
}
    .notifier-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 2px;
    }

.notifier-body {
    font-size: 0.875rem;
}

    .notifier-img {
        .img {
            width: 40px;
            height: 40px;
        }
    }

.notifier-close {
        &:focus,
        &:hover {
            color: #f44236;
            background: transparent;
        }
    }



/* =========================================
           MODIFICADOR: Botón Principal (Guardar)
           ========================================= */
.btn-app-vortek.btn-app-vortek-primary {
    background-color: var(--bs-primary); /* Usa el azul de tu plantilla Light Able */
    border-color: var(--bs-primary);
    color: #ffffff; /* Texto blanco para contrastar */
}

    /* Hover para el botón principal */
    .btn-app-vortek.btn-app-vortek-primary:hover {
        background-color: var(--bs-primary);
        color: #ffffff;
    }

/* =========================================
           MODIFICADOR: Botón Peligro (Cancelar)
           ========================================= */
.btn-app-vortek.btn-app-vortek-danger {
    background-color: var(--bs-danger); /* Usa el rojo de tu plantilla */
    border-color: var(--bs-danger);
    color: #ffffff;
}

    .btn-app-vortek.btn-app-vortek-danger:hover {
        background-color: var(--bs-danger);
        border-color: var(--bs-danger);
        color: #ffffff;
    }

/* =========================================
            MODIFICADOR: Botón Peligro (Regresar)
            ========================================= */
.btn-app-vortek.btn-app-vortek-secondary {
    background-color: #39465f; /* Usa el rojo de tu plantilla */
    border-color: #39465f;
    color: #ffffff;
}

    .btn-app-vortek.btn-app-vortek-secondary:hover {
        background-color: #303c51;
        border-color: #2e384c;
        color: #ffffff;
    }




/* ============================================
   LOGOUT MODAL STYLES
   ============================================ */

#logoutModal {
    z-index: 9999; /* Asegurar que esté por encima de todo */
}

    #logoutModal .modal-backdrop {
        z-index: 9998;
    }

    #logoutModal .modal-content {
        border-radius: 16px;
        overflow: hidden;
    }

    #logoutModal .avtar {
        animation: pulseIcon 2s ease-in-out infinite;
    }

@keyframes pulseIcon {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }
}

#logoutModal .btn-danger {
    transition: all 0.3s ease;
}

    #logoutModal .btn-danger:hover:not(:disabled) {
        transform: translateY(-2px);
    }

/* Animación de entrada */
#logoutModal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

#logoutModal.show .modal-dialog {
    animation: modalSlideDown 0.3s ease-out;
}

@keyframes modalSlideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ==========================================================================
   METRONIC STYLE PAGINATION (DataTables + Bootstrap 5)
   ========================================================================== */

/* Contenedor de paginación */
.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}

/* Espaciado entre items */
.pagination .page-item {
    margin-left: 0.4rem;
}

.pagination .page-item:first-child {
    margin-left: 0;
}

/* Estilo base del botón (Page Link) */
.pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5e6278; /* Color gris Metronic */
    background-color: #f1f1f2; /* Fondo soft Metronic */
    border: 0 !important;
    border-radius: 0.475rem !important; /* Radio de borde Metronic */
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none !important;
}

/* Estado: Hover */
.pagination .page-link:hover {
    background-color: #e4e6ef;
    color: var(--bs-primary);
}

/* Estado: Activo */
.pagination .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

/* Estado: Deshabilitado */
.pagination .page-item.disabled .page-link {
    background-color: #f1f1f2;
    color: #a1a5b7;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ajustes para iconos (Previous/Next) */
.pagination .page-link i,
.pagination .page-link span {
    font-size: 1.1rem;
    line-height: 1;
}

/* --- MODO OSCURO (Dark Mode) --- */
[data-pc-theme="dark"] .pagination .page-link {
    background-color: #1b2635; /* Fondo oscuro Metronic */
    color: #92929f;
}

[data-pc-theme="dark"] .pagination .page-link:hover {
    background-color: #212e48;
    color: var(--bs-primary);
}

[data-pc-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

[data-pc-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: #1b2635;
    color: #49495e;
}

/* ==========================================================================
   FIX: Modal footer visibility on small screens when using modal-dialog-scrollable.
   When a <form> is a direct child of .modal-content, it breaks the Bootstrap flex layout.
   ========================================================================== */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%; /* Important for small screens to respect modal-content max-height */
}

/* Ensure header and footer don't shrink inside the form-flex container */
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex-shrink: 0;
}

/* Ensure modal-body takes remaining space and enables scrolling */
.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ==========================================================================
   MODO OSCURO: fondos claros fijos (bg-white / bg-light).
   El tema solo corrige .bg-light dentro de .card; los modales y SweetAlert2
   quedaban con paneles blancos. Se excluyen .badge, .avtar y bg-opacity-*
   porque son acentos intencionales sobre superficies de color.
   ========================================================================== */
[data-pc-theme="dark"] .modal .bg-light,
[data-pc-theme="dark"] .swal2-popup .bg-light {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

[data-pc-theme="dark"] .modal .bg-white:not(.badge):not(.avtar):not([class*="bg-opacity"]),
[data-pc-theme="dark"] .swal2-popup .bg-white:not(.badge):not(.avtar):not([class*="bg-opacity"]) {
    background-color: #1b232d !important;
}

/* input-group-text blancos dentro de cards (ej. símbolo % de descuento en POS) */
[data-pc-theme="dark"] .card .input-group-text.bg-white {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

/* btn-light plano: el tema solo adapta las variantes btn-light-* de color,
   el neutro queda blanco en modales (ej. steppers +/- y CANCELAR de modalCantidad) */
[data-pc-theme="dark"] .modal .btn-light {
    --bs-btn-color: #bfbfbf;
    --bs-btn-bg: #263240;
    --bs-btn-border-color: #303f50;
    --bs-btn-hover-color: #e5e7eb;
    --bs-btn-hover-bg: #2e3d4e;
    --bs-btn-hover-border-color: #3a4a5c;
    --bs-btn-active-color: #e5e7eb;
    --bs-btn-active-bg: #2e3d4e;
    --bs-btn-active-border-color: #3a4a5c;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: #1d2630;
    --bs-btn-disabled-border-color: #303f50;
}

/* Borde gris claro del popup de SweetAlert2 */
[data-pc-theme="dark"] .swal2-popup {
    border-color: #303f50 !important;
}

/* Animación de giro para iconos Tabler (equivalente a .ph-spin de Phosphor) */
.ti-spin {
    animation: ti-spin 1s linear infinite;
    display: inline-block;
}
@keyframes ti-spin {
    to { transform: rotate(360deg); }
}
/* Fix: badge .bg-light-dark en modo oscuro tenía texto casi negro (#131920)
   sobre fondo oscuro → ilegible. Se usa el color de texto del tema. */
[data-pc-theme="dark"] .badge.bg-light-dark {
    color: var(--bs-body-color);
}

/* ── Selector de serie de emisión (POS y Convertir NV) ── */
.serie-emision {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    transition: background-color .25s ease, border-color .25s ease;
}
.serie-emision.is-multi {
    background: rgba(70, 128, 255, .08);
    border-color: rgba(70, 128, 255, .35);
}
.serie-emision__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
.serie-emision__select {
    width: auto;
    min-width: 130px;
    font-weight: 700;
}
.serie-emision__select:disabled {
    cursor: not-allowed;
}
.serie-emision__help {
    font-size: 10px;
    font-style: italic;
    color: #94a3b8;
    text-align: right;
    margin: 3px 2px 0 0;
}
.serie-emision .choices {
    margin-bottom: 0;
    min-width: 140px;
}
.serie-emision .choices__inner {
    min-height: auto;
    padding: 4px 24px 4px 8px;
    font-weight: 700;
    font-size: 13px;
}

/* Modo oscuro: el template no voltea --bs-secondary-*, se define explícito */
[data-pc-theme="dark"] .serie-emision {
    background: var(--bs-body-bg, #131920);
    border-color: var(--bs-border-color, #303f50);
}
[data-pc-theme="dark"] .serie-emision.is-multi {
    background: rgba(70, 128, 255, .14);
    border-color: rgba(70, 128, 255, .45);
}
[data-pc-theme="dark"] .serie-emision__label {
    color: #94a3b8;
}
[data-pc-theme="dark"] .serie-emision__help {
    color: #748892;
}


/* ── Indicador "Procesando" de DataTables ─────────────────────────────────
   Capa sobre toda la tabla que además impide interactuar mientras carga. Se
   aplica a las 20 tablas con `processing: true`; el plugin traía una tarjeta
   de 200px flotando en el centro.

   Tres cosas que no son evidentes al leerlo:

   · position: relative en .dt-container — el plugin antepone el indicador al
     wrapper con prependTo(nTableWrapper) y lo posiciona en absoluto, pero solo
     declara `position` sobre `div.dt-row`. Sin esto la capa se ancla a lo que
     haya posicionado más arriba en el DOM.

   · display: none de base — el div se crea SIN estilo en línea y el plugin solo
     se lo escribe al llegar el primer evento 'processing'. Hasta entonces el
     navegador lo pinta como block: se veía desde que cargaba la página.

   · El !important condicionado al atributo style — para mostrarlo el plugin
     escribe `display: block` en línea, y un estilo en línea gana a cualquier
     regla de hoja. Sin !important el flex no se aplica y el contenido se va
     arriba del todo de la capa, pegado a la cabecera. Y como el !important solo
     entra mientras el selector coincide, al escribir `display: none` se oculta
     con normalidad.

   Los selectores llevan `div.dt-container` delante y no basta con
   `div.dt-processing`: el plugin usa ese mismo selector para colocarlo (top y
   left al 50%, ancho 200px, márgenes negativos) y su hoja se carga DESPUÉS de
   esta, así que a igual especificidad ganaría él. */
div.dt-container {
    position: relative;
}

div.dt-container div.dt-processing {
    /* Los puntos usan --dt-row-selected, que vale 13,110,253: el azul por
       defecto de Bootstrap, no el primario de la plantilla (#04a9f5). */
    --dt-row-selected: 4, 169, 245;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 20;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .5rem;
    box-shadow: none;
    background: rgba(255, 255, 255, .78);
    font-size: .8125rem;
    font-weight: 600;
    color: #4b5675;
}

div.dt-container div.dt-processing[style*="display: block"] {
    display: flex !important;
}

[data-pc-theme="dark"] div.dt-container div.dt-processing {
    background: rgba(19, 25, 32, .78);
    color: #c3ccd7;
}


/* ── Resultados de búsqueda del POS ───────────────────────────────────────
   El desplegable pedía min-width:600px para que en escritorio las cuatro
   columnas no se apretaran. En un celular de 375px eso lo saca de la pantalla
   y arrastra a toda la página a scroll horizontal. min() conserva los 600px
   mientras quepan y se repliega al ancho de la ventana cuando no; el w-100 del
   markup sigue mandando en escritorio, así que ahí nada cambia.              */
#resultadoBusqueda {
    /*min-width: min(600px, calc(100vw - 1.5rem));*/
}

/* La plantilla fuerza white-space:nowrap en toda celda de .table
   (assets/css/style.css:37077). En la columna del producto conviven el nombre
   y los badges de PROMO / RECETA MEDICA en la misma línea, así que sin poder
   partirse estira la tabla y devuelve el scroll horizontal dentro del
   desplegable. Solo se libera esa columna: código, precio y stock son cortos y
   se leen mejor de una pieza.                                                */
@media (max-width: 767.98px) {
    #resultadoBusqueda .table td:nth-child(2) {
        white-space: normal;
    }
}


/* ── Lector de código de barras por cámara ────────────────────────────────
   Overlay a pantalla completa. El z-index va por encima de los modales de
   Bootstrap (1055) porque el POS puede lanzarlo con un modal abierto detrás.

   Criterio del diseño: la cámara es el contenido, el HUD es cristal. Nada de
   colores saturados ni líneas animadas cruzando el encuadre — sobre una caja
   de medicamento, cualquier adorno compite con las barras que hay que leer.
   Guías en blanco (legibles sobre fondo claro u oscuro) y un único acento,
   el verde, reservado para el momento en que hay lectura.

   El pie agrupa las herramientas que se usan escaneando (linterna, zoom,
   cambio de lente) al alcance del pulgar; cerrar vive arriba, que es donde se
   busca en cualquier pantalla completa y no se pulsa por error.              */
.vf-scanner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Una sola paleta para todo el HUD. El estado de lectura correcta cambia
       --vf-scan-guia y arrastra marco, píldora y rótulo. */
    --vf-scan-guia: #ffffff;
    --vf-scan-velo: rgba(0, 0, 0, .6);
    --vf-scan-glass: rgba(18, 22, 28, .55);
    --vf-scan-borde: rgba(255, 255, 255, .16);
}

.vf-scanner__video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* llena la pantalla sin deformar la imagen */
}

/* ── Ventana de lectura ───────────────────────────────────────────────────
   Apaisada, que es como se presenta un código de barras. El fondo se oscurece
   con una sombra maciza que sale del propio marco: sin SVG ni clip-path, y la
   zona de lectura queda totalmente limpia. */
.vf-scanner__marco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(330px, 82vw);
    height: min(190px, 30vh);
    border-radius: 1.25rem;
    box-shadow: 0 0 0 4000px var(--vf-scan-velo);
    transition: box-shadow .25s ease, transform .25s ease;
}

/* Cuatro esquinas en ángulo. Elementos propios y no gradientes, porque así
   pueden redondearse y acompañar el radio del marco. */
.vf-scanner__esquina {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--vf-scan-guia);
    opacity: .95;
    transition: border-color .25s ease, opacity .25s ease;
    animation: vf-scanner-latido 2.6s ease-in-out infinite;
}
.vf-scanner__esquina--si { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; border-radius: 1.25rem 0 0 0; }
.vf-scanner__esquina--sd { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; border-radius: 0 1.25rem 0 0; }
.vf-scanner__esquina--ii { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; border-radius: 0 0 0 1.25rem; }
.vf-scanner__esquina--id { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; border-radius: 0 0 1.25rem 0; }

/* Latido muy leve: dice "sigue buscando" sin arrastrar la vista como lo hacía
   una línea recorriendo el encuadre. */
@keyframes vf-scanner-latido {
    0%, 100% { opacity: .95; }
    50%      { opacity: .5; }
}

/* ── Lectura correcta ─────────────────────────────────────────────────────
   El marco se cierra un punto sobre el código y todo vira a verde durante el
   instante en que el valor leído queda en pantalla. */
.vf-scanner--ok {
    --vf-scan-guia: #22c55e;
    --vf-scan-velo: rgba(0, 0, 0, .72);
}
.vf-scanner--ok .vf-scanner__marco {
    transform: translate(-50%, -50%) scale(.97);
}
.vf-scanner--ok .vf-scanner__esquina {
    animation: none;
    opacity: 1;
    box-shadow: 0 0 14px rgba(34, 197, 94, .5);
}
.vf-scanner--ok .vf-scanner__ayuda {
    background: #22c55e;
    border-color: transparent;
    color: #04240f;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
    .vf-scanner__esquina { animation: none; }
    .vf-scanner__marco   { transition: none; }
}

/* ── Barra superior: qué es esta pantalla y cómo salir ────────────────────
   Sin fondo propio: un degradado de negro a transparente basta para que el
   texto se lea sobre cualquier imagen, y no roba área de vídeo. */
.vf-scanner__barra {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: calc(.75rem + env(safe-area-inset-top)) .9rem .75rem 1.1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
}

.vf-scanner__titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.vf-scanner__titulo i {
    font-size: 1.15rem;
    opacity: .85;
}

/* ── Botones de cristal ───────────────────────────────────────────────────
   Un solo lenguaje para cerrar, linterna y lente. */
.vf-scanner__cerrar,
.vf-scanner__accion {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--vf-scan-borde);
    border-radius: 50%;
    background: var(--vf-scan-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 1.3rem;
    padding: 0;
    transition: background-color .15s ease, transform .12s ease;
}
.vf-scanner__accion {
    display: none;              /* lo enciende el módulo según capacidades */
}
.vf-scanner__cerrar:hover,
.vf-scanner__cerrar:focus,
.vf-scanner__accion:hover,
.vf-scanner__accion:focus {
    background: rgba(30, 36, 44, .7);
    color: #fff;
}
.vf-scanner__cerrar:active,
.vf-scanner__accion:active {
    transform: scale(.93);
}

/* Linterna encendida: ámbar, que es lo que uno espera de una luz. */
.vf-scanner__accion--activa {
    background: #ffc107;
    border-color: #ffc107;
    color: #241c00;
}

/* ── Mensaje bajo el marco ────────────────────────────────────────────────
   En píldora y no suelto sobre el vídeo: sobre una caja blanca o un mostrador
   claro, el texto con sombra se perdía. Es también donde aparece el código
   leído, así que se le da aire para una línea larga. */
.vf-scanner__ayuda {
    position: absolute;
    top: calc(50% + min(95px, 15vh) + 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(82vw, 330px);
    margin: 0;
    padding: .5rem 1.1rem;
    border-radius: 2rem;
    background: var(--vf-scan-glass);
    border: 1px solid var(--vf-scan-borde);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, .92);
    font-size: .8rem;
    text-align: center;
    word-break: break-all;
    transition: background-color .25s ease, color .25s ease;
}

/* Línea de diagnóstico. Nace oculta: solo la muestra el módulo cuando la URL
   lleva ?scanDebug=1, para poder depurar en iPhone sin un Mac a mano. Va bajo
   la barra superior y alineada a la izquierda, fuera del paso del encuadre. */
.vf-scanner__debug {
    display: none;
    position: absolute;
    top: calc(3.9rem + env(safe-area-inset-top));
    left: 1.1rem;
    right: 1.1rem;
    margin: 0;
    color: #ffd76e;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* ── Pie: herramientas de escaneo ─────────────────────────────────────────
   Linterna, zoom y cambio de lente en una sola fila centrada, al alcance del
   pulgar. Cada control aparece solo si el dispositivo lo admite, y si no
   queda ninguno el módulo esconde la fila entera. */
.vf-scanner__herramientas {
    position: absolute;
    left: 50%;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.vf-scanner__zoom {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem;
    border-radius: 2rem;
    background: var(--vf-scan-glass);
    border: 1px solid var(--vf-scan-borde);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.vf-scanner__zoom-btn {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color .15s ease, transform .12s ease;
}
.vf-scanner__zoom-btn:active {
    transform: scale(.9);
    background: rgba(255, 255, 255, .18);
}

.vf-scanner__zoom-valor {
    min-width: 2.75rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}


/* ── Consulta rápida de producto (buscador del header) ────────────────────
   El panel cuelga del input en escritorio (absolute) y va en flujo dentro del
   dropdown en móvil (--inline), donde ya existe un contenedor posicionado. */

/* Qué variante se muestra —lupa suelta o campo de 260px— se decide en 1024px,
   que es donde la plantilla pliega el sidebar (assets/css/style.css:27815).
   A partir de ahí el header ya carga con el botón de menú, así que el campo
   ancho solo aprieta; con la lupa el espacio vuelve a alcanzar. Bootstrap no
   tiene un corte en 1024 —md son 768 y lg 992—, y por eso esto no puede
   resolverse con las utilidades d-md o d-lg: en una tablet de 1024 en
   horizontal quedaría
   el campo ancho conviviendo con la hamburguesa.
   La especificidad lleva .pc-header porque la plantilla declara
   .pc-header .pc-h-item { display: flex } con dos clases.                    */
.pc-header .vf-buscador-compacto {
    display: none;
}

@media (max-width: 1024px) {
    .pc-header .vf-buscador-compacto {
        display: flex;
    }

    .pc-header .vf-buscador-amplio {
        display: none;
    }
}

.vf-buscador__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1030;              /* por encima del header, por debajo de modales */
    width: 440px;
    max-width: calc(100vw - 2rem);
    max-height: 460px;
    overflow-y: auto;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dbe0e5);
    border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(27, 46, 94, .12);
}
.vf-buscador__panel--inline {
    position: static;
    width: 100%;
    margin-top: .5rem;
    box-shadow: none;
}

.vf-buscador__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nombre datos" "meta datos";
    gap: 0 .75rem;
    width: 100%;
    padding: .55rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color, #eef0f3);
    background: transparent;
    text-align: left;
}
.vf-buscador__item:last-child {
    border-bottom: 0;
}
.vf-buscador__item:hover,
.vf-buscador__item.is-activo {
    background: var(--bs-tertiary-bg, #f6f7f9);
}

.vf-buscador__nombre {
    grid-area: nombre;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-body-color, #1d2630);
    line-height: 1.3;
}
.vf-buscador__meta {
    grid-area: meta;
    font-size: .6875rem;
    color: #8a94a6;
}
.vf-buscador__datos {
    grid-area: datos;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
}
.vf-buscador__precio {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bs-primary, #4680ff);
}

.vf-buscador__aviso {
    padding: .75rem;
    font-size: .75rem;
    color: #8a94a6;
    text-align: center;
}

[data-pc-theme="dark"] .vf-buscador__panel {
    background: var(--bs-card-bg, #131920);
}
[data-pc-theme="dark"] .vf-buscador__item:hover,
[data-pc-theme="dark"] .vf-buscador__item.is-activo {
    background: rgba(255, 255, 255, .04);
}

/* ── Alineación automática por tipo de columna ────────────────────────────
   DataTables 2 deduce el tipo de cada columna y marca cabecera y celdas con
   .dt-type-numeric o .dt-type-date; su hoja les aplica text-align: right.

   La detección es PEREZOSA: no la hace al pintar, sino la primera vez que la
   necesita —al ordenar o filtrar—. Por eso una columna de códigos o documentos
   arranca alineada a la izquierda y salta a la derecha en cuanto se pulsa su
   encabezado, sin que el usuario haya cambiado nada de alineación.

   Se neutraliza. Las columnas que sí deben ir a la derecha o centradas lo
   declaran con las utilidades de Bootstrap (text-end, text-center), que llevan
   !important y siguen ganando: importes, cantidades y stock no se ven afectados.

   El selector lleva `.table.dataTable` —una clase más que el del plugin— porque
   datatables.bootstrap5.css se carga después de esta hoja. */
table.table.dataTable > thead > tr > th.dt-type-numeric,
table.table.dataTable > thead > tr > th.dt-type-date,
table.table.dataTable > tbody > tr > td.dt-type-numeric,
table.table.dataTable > tbody > tr > td.dt-type-date {
    text-align: left;
}

/* ── Dropdowns de fila recortados en iOS ──────────────────────────────────
   Los menús "⋮" de las tablas ya se posicionan con Popper en modo fixed
   (data-bs-popper-config), que precisamente sirve para escaparse del recorte
   del contenedor. Aun así en iPhone se cortaban dentro de la tabla.

   La causa es `-webkit-overflow-scrolling: touch` que la plantilla pone en
   .table-responsive (style.css, ~línea 2464). En iOS esa propiedad convierte al
   contenedor en bloque contenedor de los descendientes `position: fixed`, así
   que el menú deja de medirse contra la ventana y vuelve a quedar preso del
   overflow. Se nota sobre todo con pocas filas: la tabla es baja y el menú no
   tiene hueco donde desplegarse.

   Es una propiedad obsoleta —iOS 13+ hace scroll con inercia de serie—, así que
   devolverla a `auto` no cambia nada del desplazamiento y libera el fixed. */
.table-responsive {
    -webkit-overflow-scrolling: auto;
}

/* ── Cabecera ordenable de DataTables ─────────────────────────────────────
   Dos ajustes sobre el plugin, para todas las tablas del sistema. Los
   selectores llevan `.table.dataTable` —una clase más que los suyos— porque
   datatables.bootstrap5.css se carga DESPUÉS de esta hoja (ver HeadCSS.cshtml):
   a igual especificidad ganaría él.

   1. Sin recuadro al pasar el ratón. El plugin dibuja un outline de 2px hacia
      dentro sobre las columnas ordenables. */
table.table.dataTable > thead > tr > th.dt-orderable-asc:hover,
table.table.dataTable > thead > tr > th.dt-orderable-desc:hover {
    outline: 0;
}

/* 2. El plugin muestra ▲ y ▼ atenuadas en TODA columna ordenable, esté o no
      ordenada. Aquí solo se ve la flecha de la dirección activa, dibujada con
      Tabler (ti-chevron-up / ti-chevron-down) para que case con el resto de
      iconos. El orden de las dos reglas importa: una columna ordenada lleva a
      la vez .dt-orderable-* y .dt-ordering-*, empatan en especificidad y gana
      la última, así que la que repone va después.

      Solo se visten las dos flechas activas: son las únicas que llegan a verse.
      El plugin apila ambas con bottom:50% y top:50% para que quepan una sobre
      otra; como aquí se muestra una sola, se centra con top:50% + translate.
      font-weight normal evita la negrita sintética sobre la fuente de iconos. */
table.table.dataTable > thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.table.dataTable > thead > tr > th.dt-orderable-desc span.dt-column-order:after {
    opacity: 0;
}
table.table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    opacity: 1;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    font-family: "tabler-icons";
    font-size: .875rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
table.table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order:before {
    content: "\ea62";       /* ti-chevron-up */
    content: "\ea62" / "";  /* sin texto alternativo para el lector de pantalla */
}
table.table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    content: "\ea5f";       /* ti-chevron-down */
    content: "\ea5f" / "";
}

/* ── Pie de tabla (selector · info · paginación) ──────────────────────────
   El alineado y la separación los da el propio dom con utilidades de Bootstrap
   (d-flex, align-items-center, gap-2). Aquí solo se corrigen dos cosas del
   markup que dibuja DataTables: el <select> hereda el ancho del contenedor (se
   le deja el de su contenido) y arrastra un <label> que con el lengthMenu de
   solo "_MENU_" viene vacío, ocupando un hueco de gap a su derecha. */
.vk-dt-toolbar .dt-length {
    margin: 0;
}
.vk-dt-toolbar .dt-length select {
    width: auto;
}
.vk-dt-toolbar .dt-length label:empty {
    display: none;
}
.vk-dt-toolbar .dt-info {
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Tablas de edición con selects (presentaciones de producto, etc.)

   .table-responsive fija overflow-x: auto y el navegador convierte el eje
   vertical a auto por especificación, así que aparecía una barra de scroll
   vertical aunque la tabla tuviera una sola fila. Aquí no hace falta scroll
   vertical: la tabla crece con su contenido.

   El desplegable de Choices sí necesita salirse del contenedor; de eso se
   encarga choices-config.js, que quita el recorte mientras está abierto.
   ══════════════════════════════════════════════════════════════════════ */
.table-responsive.table-edicion {
    overflow-y: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   CHOICES DENTRO DE UN MODAL — la lista cerrada no ocupa espacio

   Choices oculta la lista cerrada solo con visibility: hidden, así que sus
   opciones (p. ej. 30 resultados de una búsqueda) seguían estirando el
   .modal-body con scroll invisible. Abierta (.is-active) flota por encima
   del modal: de eso se encarga PanelFlotante en choices-config.js.
   ══════════════════════════════════════════════════════════════════════ */
.modal-body .choices__list--dropdown:not(.is-active) {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO — placeholder distinguible del texto real

   La plantilla dejó SASS sin compilar en style-preset.css:

       [data-pc-theme="dark"] { --bs-body-color-rgb: to-rgb(#bfbfbf); }

   "to-rgb()" no existe en CSS, así que la variable queda inválida y con ella
   --bs-secondary-color (rgba(var(--bs-body-color-rgb), .75)), que es el color
   que Bootstrap usa para los placeholder. Al descartarse la regla, el
   placeholder terminaba heredando el mismo gris del texto escrito y no había
   forma de saber si un campo tenía valor o estaba vacío.

   Se corrige la variable (beneficia a todo lo que la usa) y además se fija el
   color del placeholder, para no depender de que la plantilla lo derive bien.
   ══════════════════════════════════════════════════════════════════════ */
[data-pc-theme="dark"] {
    --bs-body-color-rgb: 191, 191, 191;
    --bs-secondary-color: rgba(191, 191, 191, 0.65);
}

[data-pc-theme="dark"] .form-control::placeholder,
[data-pc-theme="dark"] .form-select::placeholder,
[data-pc-theme="dark"] textarea::placeholder,
[data-pc-theme="dark"] .choices__input::placeholder,
[data-pc-theme="dark"] .dataTable-input::placeholder {
    /* Bastante más tenue que el texto (#bfbfbf) para que se note vacío,
       sin bajar tanto como para volverse ilegible. */
    color: #78828d;
    opacity: 1;   /* Firefox lo aclara aún más si no se fija */
}

/* El texto que el usuario escribe sí va al color pleno del tema */
[data-pc-theme="dark"] .form-control,
[data-pc-theme="dark"] .form-select,
[data-pc-theme="dark"] textarea {
    color: #e4e6eb;
}

/* Choices.js: el placeholder del combo seguía el mismo camino */
[data-pc-theme="dark"] .choices__placeholder {
    color: #78828d;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO — filas de tabla con color (table-danger y compañía)

   Bootstrap define estas variantes con fondos pastel y texto casi negro
   (.table-danger: fondo #fdd9d7, texto #212529). Sobre el tema oscuro
   quedaban como bloques claros que rompen la tabla, y en algunos estados
   (active) el texto salía blanco sobre rosa claro, ilegible.

   Aquí se recalculan con el color de fondo del tema teñido, para que la fila
   se distinga sin dejar de pertenecer a la tabla.
   ══════════════════════════════════════════════════════════════════════ */
[data-pc-theme="dark"] .table > :not(caption) > * > *.table-danger,
[data-pc-theme="dark"] .table-danger,
[data-pc-theme="dark"] .table-danger > th,
[data-pc-theme="dark"] .table-danger > td {
    --bs-table-color: #f8d7da;
    --bs-table-bg: rgba(244, 66, 54, 0.18);
    --bs-table-border-color: rgba(244, 66, 54, 0.35);
    --bs-table-striped-bg: rgba(244, 66, 54, 0.22);
    --bs-table-striped-color: #f8d7da;
    --bs-table-active-bg: rgba(244, 66, 54, 0.28);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: rgba(244, 66, 54, 0.26);
    --bs-table-hover-color: #ffffff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-pc-theme="dark"] .table-warning,
[data-pc-theme="dark"] .table-warning > th,
[data-pc-theme="dark"] .table-warning > td {
    --bs-table-color: #ffe6a7;
    --bs-table-bg: rgba(244, 194, 43, 0.18);
    --bs-table-border-color: rgba(244, 194, 43, 0.35);
    --bs-table-striped-bg: rgba(244, 194, 43, 0.22);
    --bs-table-striped-color: #ffe6a7;
    --bs-table-active-bg: rgba(244, 194, 43, 0.28);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: rgba(244, 194, 43, 0.26);
    --bs-table-hover-color: #ffffff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-pc-theme="dark"] .table-success,
[data-pc-theme="dark"] .table-success > th,
[data-pc-theme="dark"] .table-success > td {
    --bs-table-color: #b8f5e4;
    --bs-table-bg: rgba(29, 233, 182, 0.16);
    --bs-table-border-color: rgba(29, 233, 182, 0.32);
    --bs-table-striped-bg: rgba(29, 233, 182, 0.2);
    --bs-table-striped-color: #b8f5e4;
    --bs-table-active-bg: rgba(29, 233, 182, 0.26);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: rgba(29, 233, 182, 0.24);
    --bs-table-hover-color: #ffffff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-pc-theme="dark"] .table-info,
[data-pc-theme="dark"] .table-info > th,
[data-pc-theme="dark"] .table-info > td {
    --bs-table-color: #bfe9fb;
    --bs-table-bg: rgba(4, 169, 245, 0.16);
    --bs-table-border-color: rgba(4, 169, 245, 0.32);
    --bs-table-striped-bg: rgba(4, 169, 245, 0.2);
    --bs-table-striped-color: #bfe9fb;
    --bs-table-active-bg: rgba(4, 169, 245, 0.26);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: rgba(4, 169, 245, 0.24);
    --bs-table-hover-color: #ffffff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-pc-theme="dark"] .table-primary,
[data-pc-theme="dark"] .table-primary > th,
[data-pc-theme="dark"] .table-primary > td {
    --bs-table-color: #cfe2ff;
    --bs-table-bg: rgba(70, 128, 255, 0.18);
    --bs-table-border-color: rgba(70, 128, 255, 0.35);
    --bs-table-striped-bg: rgba(70, 128, 255, 0.22);
    --bs-table-striped-color: #cfe2ff;
    --bs-table-active-bg: rgba(70, 128, 255, 0.28);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: rgba(70, 128, 255, 0.26);
    --bs-table-hover-color: #ffffff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* Los inputs dentro de una fila marcada deben seguir legibles */
[data-pc-theme="dark"] .table-danger .form-control,
[data-pc-theme="dark"] .table-danger .form-select,
[data-pc-theme="dark"] .table-danger .choices__inner {
    border-color: rgba(244, 66, 54, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO — barras de desplazamiento

   La plantilla declara "color-scheme: dark" bajo [data-bs-theme=dark], pero
   el tema se cambia con data-pc-theme y ese atributo no se aplica nunca: la
   regla queda muerta y el navegador sigue pintando las barras (y los
   controles nativos) en claro sobre el fondo oscuro.

   color-scheme cubre las barras nativas y de paso los controles del sistema
   (inputs date/time, menús de select nativo). El bloque ::-webkit-scrollbar
   afina el aspecto en Chrome y Edge, donde la barra nativa oscura sigue
   siendo bastante ancha y contrastada.
   ══════════════════════════════════════════════════════════════════════ */
[data-pc-theme="dark"] {
    color-scheme: dark;
    /* Firefox */
    scrollbar-color: #3e4c5e transparent;
    scrollbar-width: thin;
}

[data-pc-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-pc-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-pc-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #3e4c5e;
    border-radius: 8px;
    /* El borde transparente deja aire alrededor del pulgar */
    border: 2px solid transparent;
    background-clip: content-box;
}

[data-pc-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #52637a;
}

[data-pc-theme="dark"] ::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
   VISTA PREVIA DEL TICKET (Mi Empresa → Impresión)
   ------------------------------------------------------------
   El contenido es texto ya compuesto por el generador ESC/POS a un número
   fijo de columnas, así que la fuente TIENE que ser monoespaciada y el ancho
   medirse en 'ch': cualquier otra cosa desalinea las columnas y el visor
   dejaría de reflejar el ticket real.
   ============================================================ */

.ticket-preview-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem .5rem;
    background: #eef1f5;
    border-radius: .5rem;
    max-height: 520px;
    overflow-y: auto;
}

.ticket-preview {
    /* Borde dentado arriba y abajo: el papel cortado de una térmica */
    --dientes: 6px;
    position: relative;
    margin: 0;
    padding: 1rem .75rem;
    background: #fff;
    color: #1a1a1a;
    font-family: "Consolas", "Courier New", ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.35;
    white-space: pre;
    /* El ancho lo fija el contenido; el papel no se estira ni se encoge */
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            0 100% / var(--dientes) var(--dientes) repeat-x border-box;
    mask:
        linear-gradient(#000 0 0) padding-box,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            0 100% / var(--dientes) var(--dientes) repeat-x border-box;
    padding-bottom: calc(1rem + var(--dientes));
}

/* El papel es blanco en ambos temas: es papel. Lo que cambia es el fondo
   sobre el que se apoya, para que no deslumbre en modo oscuro. */
[data-pc-theme="dark"] .ticket-preview-wrap {
    background: #1b232d;
}

/* ============================================================
   LISTA DE OPCIONES DEL TICKET (Mi Empresa → Impresión)
   ------------------------------------------------------------
   Un interruptor por fila, con su explicación a la izquierda y el switch
   siempre en la misma columna a la derecha. Antes iban en un damero de dos
   columnas donde las etiquetas de dos líneas descuadraban las filas.
   ============================================================ */

.opciones-ticket .opcion-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.opciones-ticket .opcion-ticket:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* El switch no se encoge aunque la etiqueta ocupe dos renglones */
.opciones-ticket .form-switch {
    flex: 0 0 auto;
    padding-left: 2.5em;
}

/* Deshabilitado = decidido por norma, no por el usuario: se atenúa la fila
   entera para que se lea como informativa y no como algo que falta activar. */
.opciones-ticket .form-check-input:disabled {
    opacity: .55;
}

/* ============================================================
   VISOR DE PDF (js/modules/pdf-viewer.js)

   El mismo visor sirve en el modal a pantalla completa y embebido dentro de
   otro modal (ticket del POS, comprobante emitido), así que todo se apoya en
   el alto del contenedor: quien lo aloja decide cuánto mide.
   ============================================================ */

.vk-pdf {
    /* El tema oscuro de la plantilla solo redefine body-bg, body-color y
       border-color: secondary-bg y tertiary-bg se quedan en claro y el visor
       saldría con la barra blanca sobre fondo oscuro. De ahí estos tokens. */
    --vk-pdf-bar: var(--bs-body-bg);
    --vk-pdf-lienzo: #e9ecef;
    --vk-pdf-suave: rgba(33, 37, 41, .7);
    --vk-pdf-hover: rgba(33, 37, 41, .08);

    container: vk-pdf / inline-size;
    display: flex;
    flex-direction: column;
    /* El ancho se declara: al ser contenedor de consultas, su ancho intrínseco
       se calcula sin contar el contenido, así que en cualquier hueco que no le
       imponga medida (un padre en flex, por ejemplo) colapsaría a 0. */
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--bs-body-bg);
    border-radius: inherit;
    overflow: hidden;
}

[data-pc-theme="dark"] .vk-pdf {
    --vk-pdf-bar: #1d2630;
    --vk-pdf-lienzo: #19212a;
    --vk-pdf-suave: rgba(255, 255, 255, .65);
    --vk-pdf-hover: rgba(255, 255, 255, .1);
}

/* ── Barra de herramientas ── */
.vk-pdf__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--vk-pdf-bar);
    border-bottom: 1px solid var(--bs-border-color);
    user-select: none;
}

/* Los tres bloques de la barra: el nombre y las acciones se reparten por igual
   lo que sobra a cada lado, así el grupo de controles queda centrado respecto a
   la barra entera y no "flotando" junto al nombre. */
.vk-pdf__title {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-weight: 600;
    font-size: .875rem;
    color: var(--bs-body-color);
}

.vk-pdf__title i {
    color: var(--bs-danger);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.vk-pdf__title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 34ch: lo que mide el nombre de un comprobante completo
       (20609960311-03-B001-00022629.pdf) sin cortarse */
    max-width: 34ch;
}

/* Sin título el hueco se mantiene igualmente (lo da el flex de .vk-pdf__title),
   para que los controles no se desplacen del centro. */

.vk-pdf__group,
.vk-pdf__actions {
    display: flex;
    align-items: center;
    gap: .125rem;
}

.vk-pdf__actions {
    flex: 1 1 0;
    justify-content: flex-end;
}

.vk-pdf__group {
    flex: 0 0 auto;
    margin-inline: auto;
}

/* El visor se usa en un modal ancho (reportes) y en uno estrecho (ticket de
   80 mm), así que la barra se mide contra SU contenedor y no contra la ventana:
   en el estrecho los controles bajan a un renglón propio, centrados, y arriba
   quedan el nombre del documento y las acciones. */
@container vk-pdf (max-width: 660px) {
    .vk-pdf__title { order: 1; }
    .vk-pdf__actions { order: 2; }

    .vk-pdf__group {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
    }
}

.vk-pdf__group {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .125rem;
}

.vk-pdf__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--vk-pdf-suave);
    font-size: 1rem;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.vk-pdf__btn:hover {
    background: var(--vk-pdf-hover);
    color: var(--bs-body-color);
}

.vk-pdf__btn--primary {
    color: var(--bs-primary);
}

.vk-pdf__btn--close:hover {
    background: var(--bs-danger);
    color: #fff;
}

.vk-pdf__sep {
    width: 1px;
    height: 16px;
    margin: 0 .25rem;
    background: var(--bs-border-color);
}

.vk-pdf__pager,
.vk-pdf__zoom {
    font-size: .75rem;
    color: var(--vk-pdf-suave);
    white-space: nowrap;
    padding: 0 .25rem;
}

.vk-pdf__pager [data-vk="pagina"] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.vk-pdf__zoom {
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Cuerpo: miniaturas + páginas ── */
.vk-pdf__body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    background: var(--vk-pdf-lienzo);
}

.vk-pdf__thumbs {
    flex: 0 0 116px;
    overflow-y: auto;
    padding: .5rem;
    background: var(--vk-pdf-bar);
    border-right: 1px solid var(--bs-border-color);
}

.vk-pdf__thumb {
    display: block;
    width: 100%;
    margin-bottom: .5rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    line-height: 0;
}

.vk-pdf__thumb canvas {
    width: 100%;
    height: auto;
    border-radius: .25rem;
}

.vk-pdf__thumb span {
    display: block;
    margin-top: .25rem;
    font-size: .625rem;
    line-height: 1;
    color: var(--vk-pdf-suave);
}

.vk-pdf__thumb.is-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .2);
}

.vk-pdf__pages {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

/* Cada página reserva su hueco aunque todavía no se haya dibujado: así el
   scroll no salta mientras el visor va pintando lo que entra en pantalla. */
.vk-pdf__page {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto .75rem;
    background: #fff;
    border-radius: .25rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.vk-pdf__page canvas {
    display: block;
}

.vk-pdf__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    min-height: 180px;
    color: var(--vk-pdf-suave);
    font-size: .8125rem;
    text-align: center;
}

/* ── Modal a pantalla completa ── */
.vk-pdf-modal .modal-content {
    height: 90vh;
    border: 0;
    overflow: hidden;
}

.vk-pdf-modal .modal-body {
    min-height: 0;
}

/* En móvil el visor ocupa la pantalla: con 12 controles en la barra no sobra
   ni un píxel, y el documento se lee mucho mejor a pantalla completa. */
@media (max-width: 575.98px) {
    .vk-pdf-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
    }

    .vk-pdf-modal .modal-content {
        height: 100vh;
        border-radius: 0;
    }

    .vk-pdf__title span {
        max-width: 14ch;
    }

    /* "Ajustar al ancho" se pierde en pantalla chica: el documento ya entra
       ajustado de salida. Imprimir y descargar se quedan: son el motivo por el
       que se abre el visor de un ticket. */
    .vk-pdf__btn--wide {
        display: none;
    }

    .vk-pdf__thumbs {
        flex-basis: 84px;
    }
}


/* ============================================================================
   TABLA LIMPIA (.table-vk)
   ----------------------------------------------------------------------------
   Va sobre `table.table`, con o sin DataTables, en lugar de .table-bordered:
     · sin rejilla: ni bordes verticales ni marco, solo una línea bajo la cabecera
     · cabecera sin fondo, en gris y sin mayúsculas
     · filas altas, con una línea fina entre ellas
     · .pill       etiqueta en píldora (el color lo dan bg-light-* + text-*)
     · .cell-sub   segunda línea gris bajo el dato principal de la celda
     · .btn-row-menu  botón ⋯ del menú de acciones, sin marco
   Las variables de Bootstrap se anulan para que .table no pinte fondos por celda.
   Probado en /Home/Privacy; primer uso real: listado de Cajas.
   ============================================================================ */
.table-vk {
    /* cifras de ancho fijo: los importes quedan alineados columna abajo */
    font-variant-numeric: tabular-nums;
    --vk-th-color: #6b7580;
    --vk-sep: #e9edf1;
    --vk-border-color: #e3dcde;
    --vk-hover: #f7f9fb;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--vk-hover);
    border: 0;
    margin-bottom: 0;
}

[data-pc-theme="dark"] .table-vk {
    --vk-th-color: rgba(222, 226, 230, .6);
    --vk-sep: #2b3745;
    --vk-hover: rgba(255, 255, 255, .03);
}

/* La clase va doble a propósito: la plantilla pinta la cabecera con
   `.table.dataTable[class*="table-"] thead th` (0,3,2) y
   datatables.bootstrap5.css se carga después de las hojas del sitio. */
table.table.table-vk.table-vk > :not(caption) > * > * {
    border-width: 0;
    box-shadow: none;
}

table.table.table-vk.table-vk > thead > tr > th {
    background: transparent;
    color: var(--vk-th-color);
    /* mismo tamaño que el cuerpo (15px) y peso normal: la cabecera se
       distingue por el gris y la línea inferior, no por la negrita. Tamaño
       fijo y no `inherit`: muchas vistas ponen fs-7/f-11 en el <tr>. */
    font-size: var(--bs-body-font-size) !important;
    /* !important: algunos <th> traen fw-bold/fs-7 propios (utilidades con !important) */
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0;
    padding: .8rem .75rem;
    border-bottom: 1px solid var(--vk-border-color);
    white-space: nowrap;
}

/* En oscuro la plantilla vuelve a pintar la cabecera con el fondo de
   la página, con un selector que ya lleva [data-pc-theme] (0,4,2) */
[data-pc-theme="dark"] table.table.table-vk.table-vk > thead > tr > th {
    background: transparent;
}

table.table.table-vk.table-vk > tbody > tr > td {
    padding: 1.05rem .75rem;
    /* igual que la cabecera: ignora el fs-7 que traen algunos <tbody> */
    font-size: var(--bs-body-font-size);
    vertical-align: middle;
}

/* Línea fina entre filas, del mismo gris que la de la cabecera. La última
   fila no la lleva: debajo ya viene el pie de la tabla. */
table.table.table-vk.table-vk > tbody > tr > td {
    border-bottom: 1px solid var(--vk-sep);
}

table.table.table-vk.table-vk > tbody > tr:last-child > td {
    border-bottom: 0;
}

table.table.table-vk.table-vk > tbody > tr:hover > td {
    background-color: var(--vk-hover);
}

/* El icono de orden va pegado al título, no al borde derecho de la
   celda: el plugin lo posiciona en absoluto y reserva 30px de padding,
   y con los paddings de aquí se montaba sobre el texto. */
table.table.table-vk.dataTable > thead > tr > th.dt-orderable-asc,
table.table.table-vk.dataTable > thead > tr > th.dt-orderable-desc {
    padding-right: .75rem;
    padding-left: .75rem;
}

table.table.table-vk.dataTable > thead > tr > th span.dt-column-order {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    top: auto;
    left: auto;
    right: auto;
    margin-left: .3rem;
    vertical-align: -1px;
}

/* ⇅ atenuado en toda columna ordenable; la activa muestra su flecha
   (esa regla está más arriba, en «Cabecera ordenable de DataTables») */
table.table.table-vk.dataTable > thead > tr > th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) span.dt-column-order:after {
    opacity: .35;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    font-family: "tabler-icons";
    font-size: .8rem;
    content: "\eb5a";       /* ti-arrows-sort */
    content: "\eb5a" / "";
}

/* Los .badge que ya pintan las vistas (bg-light-* + border) toman la misma
   forma de píldora sin tocar cada render: sin borde y redondeados */
.table-vk .badge {
    border-radius: 999px;
    padding: .35em .75em;
    font-weight: 600;
}

.table-vk .badge.border {
    border-color: transparent !important;
}

/* Píldora suave: el color lo dan bg-light-* y text-*; aquí solo forma */
.table-vk .pill {
    display: inline-block;
    border-radius: 999px;
    padding: .3em .75em;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
}

.table-vk .cell-sub {
    display: block;
    font-size: 11.5px;
    color: var(--vk-th-color);
    margin-top: 2px;
}

.table-vk .btn-row-menu {
    border: 0;
    background: transparent;
    color: var(--vk-th-color);
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: .5rem;
    margin-left: auto;   /* sigue alineado a la derecha de la celda */
}

.table-vk .btn-row-menu:hover {
    background: var(--vk-sep);
}


/* ============================================================================
   POS
   ============================================================================ */

/* Tablas del POS (carrito y resultados del buscador) con .table-vk. Su
   cabecera es sticky, así que necesita fondo opaco: el de la tarjeta. */
table.table.table-vk.table-vk.pos-tabla > thead > tr > th {
    background: var(--bs-card-bg, #fff);
}

[data-pc-theme="dark"] table.table.table-vk.table-vk.pos-tabla > thead > tr > th {
    background: var(--bs-card-bg, #1b232d);
}

/* El resaltado de fila lo lleva el <tr> (navegación con flechas en el
   buscador: .row-active); el hover de .table-vk pinta las celdas y lo tapaba */
table.table.table-vk.table-vk.pos-tabla > tbody > tr:hover > td {
    background-color: transparent;
}

/* Comprobante (Factura / Boleta / Nota): el seleccionado va en el azul de
   marca; con btn-outline-secondary salía en gris oscuro */
.btn-check:checked + .btn.pos-comprobante,
.btn-check:checked + .btn.pos-comprobante:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}


/* ============================================================================
   BLOQUE CLIENTE DEL POS (.pos-cliente)
   ----------------------------------------------------------------------------
   Cabecera con documento, nombre y estado (Genérico / Registrado / Nuevo);
   panel con el tipo de documento como botones. F8 lo abre desde el teclado.
   ============================================================================ */
.pos-cliente-cabecera {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem 0;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
}

    .pos-cliente-cabecera > .ti-user-circle { font-size: 1.35rem; }

    .pos-cliente-cabecera kbd {
        font-size: 10.5px;
        font-family: var(--bs-font-monospace);
        background: transparent;
        color: var(--bs-secondary-color);
        box-shadow: none;
        padding: 0;
    }

.pos-cliente-titulo {
    font-size: 13px;
    font-weight: 600;
}

.pos-cliente-resumen {
    font-size: 12.5px;
    color: var(--bs-secondary-color);
}

/* Estado del cliente: de un vistazo, ¿es el genérico o uno real? */
.pos-cliente-estado {
    font-size: 11px;
    font-weight: 600;
    padding: .05rem .5rem;
    border-radius: 2rem;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color);
}

    .pos-cliente-estado.es-registrado { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
    .pos-cliente-estado.es-nuevo { background: rgba(var(--bs-warning-rgb), .15); color: var(--bs-warning); }
    .pos-cliente-estado.es-falta { background: rgba(var(--bs-danger-rgb), .1); color: var(--bs-danger); }

[data-pc-theme="dark"] .pos-cliente-estado { background: rgba(255,255,255,.08); }

.pos-cliente-caret { transition: transform .15s; color: var(--bs-secondary-color); }
.pos-cliente-cabecera[aria-expanded="true"] .pos-cliente-caret { transform: rotate(180deg); }

.pos-cliente-panel {
    margin-top: .5rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
}

/* Tipo de documento: botones en vez de desplegable */
.pos-cliente-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .pos-cliente-tipos .btn {
        border-radius: 2rem;
        font-size: 13px;
        padding: .3rem .8rem;
        color: var(--bs-body-color);
        border: 1px solid var(--bs-border-color);
    }

    /* Con el mouse encima, .btn de Bootstrap pone el borde transparente
       (--bs-btn-hover-border-color) y el chip "perdía" su contorno. */
    .pos-cliente-tipos .btn:hover {
        border-color: rgba(var(--bs-primary-rgb), .5);
        color: var(--bs-primary);
        background: transparent;
    }

    .pos-cliente-tipos .btn-check:checked + .btn {
        background: rgba(var(--bs-primary-rgb), .08);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }

    /* Factura: solo RUC; el resto se ve apagado */
    .pos-cliente-tipos .btn-check:disabled + .btn { opacity: .4; }

.pos-cliente-ayuda {
    font-size: 12px;
    color: var(--bs-secondary-color);
}

    .pos-cliente-ayuda kbd {
        font-size: 10.5px;
        background: transparent;
        color: inherit;
        box-shadow: none;
        padding: 0;
    }

.pos-cliente-varios { font-size: 13px; }

/* ============================================================================
   MODAL VENTA REGISTRADA (.ex-modal)
   ----------------------------------------------------------------------------
   #modalExito del POS. Diseño probado en /Home/Privacy: a la izquierda el
   número, el estado en SUNAT, el cobro (con el VUELTO grande) y las acciones
   con su tecla; a la derecha la vista previa. Enter = nueva venta.
   ============================================================================ */
.ex-modal .modal-dialog { max-width: 1000px; }
.ex-modal .modal-content { border-radius: 1rem; }

.ex-modal .ex-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
    display: block;
}

.ex-modal .ex-cabeza { display: flex; align-items: center; gap: .75rem; }

.ex-modal .ex-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: ex-pop .35s ease-out;
}

@keyframes ex-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ex-modal .ex-titulo { font-size: 1.15rem; font-weight: 700; margin: 0; }

/* Número del comprobante: lo que se dicta o se busca */
.ex-modal .ex-numero {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Estado en SUNAT: una línea con un punto de color */
.ex-modal .ex-estado { display: flex; align-items: flex-start; gap: .5rem; font-size: 13px; }
.ex-modal .ex-punto { width: 8px; height: 8px; border-radius: 50%; margin-top: .4rem; flex-shrink: 0; }
.ex-modal .ex-estado-texto { color: var(--bs-secondary-color); }
.ex-modal .ex-estado-texto strong { color: var(--bs-body-color); font-weight: 600; }

/* Cifras del cobro; el vuelto, grande y en verde */
.ex-modal .ex-cifras { display: flex; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.ex-modal .ex-cifras > div { flex: 1; min-width: 0; padding: .6rem .75rem; }
.ex-modal .ex-cifras > div + div { border-left: 1px solid var(--bs-border-color); }
.ex-modal .ex-cifras .ex-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-modal .ex-cifras .ex-vuelto .ex-valor { font-size: 1.5rem; font-weight: 700; color: var(--bs-success); line-height: 1.1; }

/* Acciones: un solo color, cada una con su tecla */
.ex-modal .ex-acciones { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }

.ex-modal .ex-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .6rem .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 12.5px;
    font-weight: 500;
}

    .ex-modal .ex-accion i { font-size: 1.35rem; color: var(--bs-secondary-color); }
    .ex-modal .ex-accion:hover { border-color: rgba(var(--bs-primary-rgb), .5); color: var(--bs-primary); }
    .ex-modal .ex-accion:hover i { color: var(--bs-primary); }
    .ex-modal .ex-accion.ex-principal { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .05); }
    .ex-modal .ex-accion.ex-principal i { color: var(--bs-primary); }
    .ex-modal .ex-accion:disabled { opacity: .6; }

.ex-modal kbd {
    font-size: 10.5px;
    font-family: var(--bs-font-monospace);
    background: transparent;
    color: inherit;
    opacity: .6;
    padding: 0;
    margin-left: .35rem;
    box-shadow: none;
}

.ex-modal .ex-accion kbd { font-size: 10px; margin-left: 0; opacity: .55; }

/* Vista previa del comprobante (visor PDF) */
.ex-modal .ex-vista {
    background: var(--bs-tertiary-bg, #f1f3f5);
    border-left: 1px solid var(--bs-border-color);
    padding: 1rem;
}

[data-pc-theme="dark"] .ex-modal .ex-vista { background: rgba(255,255,255,.03); }

.ex-modal #pdfViewerPlaceholder,
.ex-modal #convPdfPlaceholder { width: 100%; min-height: 460px; }

/* Rechazado: sin cobro, acciones ni vista previa; modal angosto */
.ex-modal.ex-rechazado .modal-dialog { max-width: 520px; }
.ex-modal.ex-rechazado .ex-vista { display: none; }
.ex-modal.ex-rechazado .ex-columna { flex: 0 0 100%; max-width: 100%; }
.ex-modal.ex-rechazado #exitoListado { visibility: hidden; }

@media (max-width: 767.98px) {
    .ex-modal .ex-acciones { grid-template-columns: repeat(3, 1fr); }
    .ex-modal .ex-vista { border-left: 0; border-top: 1px solid var(--bs-border-color); }
    .ex-modal #pdfViewerPlaceholder,
    .ex-modal #convPdfPlaceholder { min-height: 320px; }
    .ex-modal .ex-accion kbd { display: none; }
}

/* ============================================================================
   MODAL CANTIDAD (.mc-modal)
   ----------------------------------------------------------------------------
   #modalCantidad del POS: presentación como fichas y cantidad grande. Se usa
   100 % con teclado sin salir del campo de cantidad: ← → presentación,
   ↑ ↓ / + − cantidad, Enter añade, Esc cancela, F6 trae de otra
   sucursal. Mismo lenguaje visual que el modal de cobro (.mp-modal).
   ============================================================================ */
.mc-modal .modal-dialog { max-width: 620px; }
.mc-modal .modal-content { border-radius: 1rem; }

.mc-modal .mc-sub {
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.mc-modal kbd {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--bs-font-monospace);
    background: transparent;
    color: inherit;
    opacity: .6;
    padding: 0;
    box-shadow: none;
}

.mc-modal .btn kbd { margin-left: .4rem; }

/* Presentaciones: fichas con nombre, precio y máximo */
.mc-modal .mc-presentaciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
}

.mc-modal .mc-presentacion {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .75rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    transition: border-color .15s, background-color .15s;
}

    .mc-modal .mc-presentacion:hover:not(:disabled) {
        border-color: rgba(var(--bs-primary-rgb), .5);
    }

    .mc-modal .mc-presentacion.activa {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .06);
        box-shadow: 0 0 0 1px var(--bs-primary);
    }

    .mc-modal .mc-presentacion:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .mc-modal .mc-presentacion .mc-nombre {
        font-weight: 600;
        font-size: 14.5px;
        line-height: 1.2;
    }

    .mc-modal .mc-presentacion.activa .mc-nombre { color: var(--bs-primary); }

    .mc-modal .mc-presentacion .mc-precio {
        font-size: 1.15rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .mc-modal .mc-presentacion .mc-max {
        font-size: 12px;
        color: var(--bs-secondary-color);
    }

/* Cantidad: el número grande, con − / + del mismo alto */
.mc-modal .mc-pasos { flex-wrap: nowrap !important; }

    .mc-modal .mc-pasos .btn {
        width: 4.5rem;
        font-size: 1.3rem;
    }

    /* style.css manda todo botón de un .input-group al final (order: 2) */
    .mc-modal .mc-pasos > .btn[data-paso="-1"] { order: -1; }

.mc-modal .mc-cantidad {
    height: 4.25rem;
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

    .mc-modal .mc-cantidad::-webkit-outer-spin-button,
    .mc-modal .mc-cantidad::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.mc-modal .mc-subtotal {
    font-size: 1.05rem;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.mc-modal .mc-accion {
    height: 3.25rem;
    font-size: 1.05rem;
    min-width: 150px;
}

    .mc-modal .mc-accion:not(.mc-cancelar) { flex: 1; }

/* Lista de alternativas (modal Sin stock): una por fila, la elegida en azul */
.mc-modal .mc-lista {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mc-modal .mc-alt {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    transition: border-color .15s, background-color .15s;
}

    .mc-modal .mc-alt:hover { border-color: rgba(var(--bs-primary-rgb), .5); }

    .mc-modal .mc-alt.activa {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .06);
        box-shadow: 0 0 0 1px var(--bs-primary);
    }

    .mc-modal .mc-alt .mc-alt-info { flex: 1; min-width: 0; }

    .mc-modal .mc-alt .mc-alt-nombre {
        font-weight: 600;
        font-size: 14.5px;
        overflow-wrap: anywhere;
    }

    .mc-modal .mc-alt.activa .mc-alt-nombre { color: var(--bs-primary); }

    .mc-modal .mc-alt .mc-alt-precio {
        text-align: right;
        flex-shrink: 0;
    }

        .mc-modal .mc-alt .mc-alt-precio strong {
            display: block;
            font-size: 1.1rem;
            font-variant-numeric: tabular-nums;
        }

.mc-modal .mc-vacio {
    border: 1px dashed var(--bs-border-color);
    border-radius: .85rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .mc-modal .mc-presentaciones { grid-template-columns: repeat(2, 1fr); }
    .mc-modal .mc-accion { min-width: 0; }
    /* sin teclado físico las teclas no sirven (y la "o" de la ayuda quedaba suelta) */
    .mc-modal kbd, .mc-modal .mc-teclas { display: none; }
}

/* ============================================================================
   MODAL COBRAR VENTA (.mp-modal)
   ----------------------------------------------------------------------------
   #modalPago del POS. Diseño probado en /Home/Privacy (propuesta v3):
   1140 px, método de pago a la izquierda y, a la derecha, el total, el
   vuelto/falta y el comprobante. Métodos como fichas grandes, campos de monto
   de 64 px y botones de 52 px para poder usarlo con el dedo en una tablet.
   ============================================================================ */
.mp-modal .modal-dialog { max-width: 1140px; }
.mp-modal .modal-content { border-radius: 1rem; }

.mp-modal .mp-sub {
    font-size: 13.5px;
    color: var(--bs-secondary-color);
}

/* Métodos: fichas (icono arriba, nombre, tecla) */
.mp-modal .mp-metodos {
    display: grid;
    /* 4 o 5 fichas (Crédito solo aparece con permiso), todas del mismo ancho */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .75rem;
}

.mp-modal .mp-metodos .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    min-height: 96px;
    padding: .85rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    color: var(--bs-body-color);
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    transition: border-color .15s, background-color .15s;
}

    .mp-modal .mp-metodos .nav-link i {
        font-size: 1.9rem;
        line-height: 1;
        color: var(--bs-secondary-color);
    }

    .mp-modal .mp-metodos .nav-link:hover {
        border-color: rgba(var(--bs-primary-rgb), .5);
    }

    .mp-modal .mp-metodos .nav-link.active {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .06);
        box-shadow: 0 0 0 1px var(--bs-primary);
        color: var(--bs-primary);
    }

        .mp-modal .mp-metodos .nav-link.active i {
            color: var(--bs-primary);
        }

.mp-modal kbd {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--bs-font-monospace);
    background: transparent;
    color: inherit;
    opacity: .55;
    padding: 0;
    box-shadow: none;
}

.mp-modal .btn kbd { margin-left: .4rem; }

/* Columna derecha: total, estado y datos del comprobante */
.mp-modal .mp-lateral {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-left: 1px solid var(--bs-border-color);
}

[data-pc-theme="dark"] .mp-modal .mp-lateral { background: rgba(255,255,255,.02); }

.mp-modal .mp-total {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* "En efectivo S/ 23.40": lo que de verdad se cobra con el redondeo */
.mp-modal .mp-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: .2rem .65rem;
    border-radius: 2rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
}

.mp-modal .mp-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .4rem 0;
}

/* Vuelto / Falta: el segundo número que el cajero dice en voz alta */
.mp-modal .mp-estado {
    border-radius: .85rem;
    padding: 1rem 1.15rem;
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color);
}

[data-pc-theme="dark"] .mp-modal .mp-estado { background: rgba(255,255,255,.04); }

.mp-modal .mp-estado-valor {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    transition: color .15s;
}

/* Monto grande: el campo que el cajero mira */
.mp-modal .mp-monto {
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    height: 4rem;
}

/* "S/" dentro del campo (position-absolute, como el resto del sistema) */
.mp-modal .mp-monto-prefijo {
    font-size: 1.2rem;
    color: var(--bs-secondary-color);
    pointer-events: none;   /* el clic sobre "S/" llega al campo */
}

/* Montos sugeridos: botones altos, fáciles en pantalla táctil */
.mp-modal .mp-chips {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .6rem;
}

.mp-modal .mp-chip {
    height: 3.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Opciones: franquicias, billeteras, "+ pago" del mixto */
.mp-modal .mp-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .6rem;
}

.mp-modal .mp-opcion {
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* .btn pone el borde transparente al pasar el mouse y al recibir el foco: sin
   estas reglas la opción se quedaba sin borde justo cuando se la señalaba. */
.mp-modal .mp-opcion:hover,
.mp-modal .btn-check:focus-visible + .mp-opcion {
    border-color: rgba(var(--bs-primary-rgb), .55);
    background: rgba(var(--bs-primary-rgb), .03);
    color: var(--bs-body-color);
}

.mp-modal .btn-check:checked + .mp-opcion,
.mp-modal .btn-check:checked + .mp-opcion:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .06);
    color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

/* El foco del teclado se nota aparte de la selección */
.mp-modal .btn-check:focus-visible + .mp-opcion,
.mp-modal .btn-check:checked:focus-visible + .mp-opcion {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.mp-modal .mp-ayuda {
    font-size: 13px;
    color: var(--bs-secondary-color);
}

/* Aviso de redondeo de céntimos (lo llena pos.js) */
.mp-modal #infoRedondeo:empty { display: none; }

/* Mixto: "+ Efectivo", "+ Tarjeta"… (uno por método) en filas parejas */
.mp-modal #mixtoAgregar { grid-template-columns: repeat(3, 1fr); }

/* Mixto: filas editables (método | monto | entidad + N° de operación | eliminar) */
.mp-modal .mp-linea {
    display: grid;
    grid-template-columns: 150px 150px 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

    .mp-modal .mp-linea .mp-linea-nombre {
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

.mp-modal .mp-linea-datos {
    display: flex;
    gap: .5rem;
    min-width: 0;
}

    .mp-modal .mp-linea-datos > * { flex: 1 1 0; min-width: 0; }

/* Mixto: renglón de Yape bajo la fila (lo llena pos.js; vacío = no ocupa lugar) */
.mp-modal .mp-linea > .mp-linea-yape {
    grid-column: 1 / -1;
    font-size: .8125rem;
}

    .mp-modal .mp-linea > .mp-linea-yape:empty { display: none; }

/* ── Cobro con billetera validada por notificación (Yape; Plin después) ──────
   El panel es el mismo para cualquier billetera: solo cambia el acento (--yp).
   Lo pinta pos.js (yapeMostrar). */
.mp-modal { --yp: #742384; --yp-suave: rgba(116, 35, 132, .08); --yp-borde: rgba(116, 35, 132, .28); }
[data-pc-theme="dark"] .mp-modal { --yp: #c58bd3; --yp-suave: rgba(197, 139, 211, .10); --yp-borde: rgba(197, 139, 211, .32); }

.mp-modal .yp-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--yp-borde);
    border-radius: .75rem;
    background: var(--yp-suave);
}

.mp-modal .yp-icono {
    position: relative;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yp);
    color: #fff;
    font-size: 1.5rem;
}

[data-pc-theme="dark"] .mp-modal .yp-icono { color: #1b1026; }

.mp-modal .yp-cuerpo { flex: 1 1 auto; min-width: 0; }
.mp-modal .yp-titulo { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.mp-modal .yp-sub { font-size: .8125rem; color: var(--bs-secondary-color); }
.mp-modal .yp-sub.text-warning { color: var(--bs-warning) !important; }
.mp-modal .yp-punto { font-size: .6rem; }

.mp-modal .yp-enlace {
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    color: var(--bs-primary);
    text-decoration: underline;
    white-space: nowrap;
}

.mp-modal .yp-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin-top: .6rem;
}

/* Esperando: dos ondas que salen del icono */
.mp-modal .yp-esperando .yp-icono::before,
.mp-modal .yp-esperando .yp-icono::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--yp);
    opacity: 0;
    animation: yp-onda 2s ease-out infinite;
}

.mp-modal .yp-esperando .yp-icono::after { animation-delay: 1s; }

@keyframes yp-onda {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-modal .yp-esperando .yp-icono::before,
    .mp-modal .yp-esperando .yp-icono::after { animation: none; }
}

/* Recibido: verde, con los datos del pago como fichas */
.mp-modal .yp-recibido {
    border-color: rgba(var(--bs-success-rgb), .4);
    background: rgba(var(--bs-success-rgb), .08);
}

    .mp-modal .yp-recibido .yp-icono { background: var(--bs-success); color: #fff; }

.mp-modal .yp-nombre { font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.mp-modal .yp-fichas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }

.mp-modal .yp-ficha {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    font-size: .8125rem;
}

    .mp-modal .yp-ficha span { color: var(--bs-secondary-color); font-size: .75rem; }
    .mp-modal .yp-ficha strong { font-family: var(--bs-font-monospace); font-weight: 600; }

/* Varios pagos del mismo monto: lista para elegir */
.mp-modal .yp-lista { display: grid; gap: .5rem; }

.mp-modal .yp-opcion {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .65rem .9rem;
    text-align: left;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: var(--bs-body-bg);
    color: inherit;
}

    .mp-modal .yp-opcion:hover,
    .mp-modal .yp-opcion:focus-visible {
        border-color: var(--yp);
        background: var(--yp-suave);
        outline: none;
    }

    .mp-modal .yp-opcion .ti-chevron-right { color: var(--bs-secondary-color); }

.mp-modal .yp-inicial {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yp-suave);
    color: var(--yp);
    font-weight: 700;
}

/* Mixto: pago ya emparejado en la fila */
.mp-modal .yp-mini {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(var(--bs-success-rgb), .1);
    color: var(--bs-success);
}

/* Crédito: tres cifras de la línea */
.mp-modal .mp-cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

    .mp-modal .mp-cifras > div {
        border: 1px solid var(--bs-border-color);
        border-radius: .85rem;
        padding: .85rem 1rem;
    }

    .mp-modal .mp-cifras strong {
        display: block;
        font-size: 1.35rem;
        font-variant-numeric: tabular-nums;
    }

/* − / + del número de cuotas: mismo alto que el campo grande */
.mp-modal .mp-pasos { flex-wrap: nowrap !important; }

    .mp-modal .mp-pasos .btn {
        width: 4rem;
        font-size: 1.2rem;
    }

    /* style.css manda todo botón de un .input-group al final (order: 2);
       el "−" va antes del número */
    .mp-modal .mp-pasos > .btn[data-paso="-1"] { order: -1; }

/* Fecha de cuota fuera de orden: sin el icono de Bootstrap, que taparía el calendario */
.mp-modal .cuota-fecha.is-invalid { background-image: none; }

.mp-modal .mp-cobrar {
    min-width: 240px;
    height: 3.25rem;
    font-size: 1.05rem;
}

    .mp-modal .mp-cobrar.mp-cancelar { min-width: 140px; }

@media (max-width: 991.98px) {
    .mp-modal .mp-lateral {
        border-left: 0;
        border-bottom: 1px solid var(--bs-border-color);
        order: -1;     /* en tablet/teléfono el total va primero */
    }
}

@media (max-width: 767.98px) {
    .mp-modal .mp-metodos {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        gap: .5rem;
    }

        .mp-modal .mp-metodos .nav-link {
            min-height: 76px;
            font-size: 14px;
        }

            .mp-modal .mp-metodos .nav-link i { font-size: 1.5rem; }

        .mp-modal .mp-metodos kbd { display: none; }   /* sin teclado físico no sirven */

    .mp-modal .mp-chips { grid-template-columns: repeat(3, 1fr); }

    .mp-modal #mixtoAgregar { grid-template-columns: repeat(2, 1fr); }

    .mp-modal .mp-linea { grid-template-columns: 1fr auto; }

        .mp-modal .mp-linea > .position-relative,
        .mp-modal .mp-linea > .mp-linea-datos { grid-column: 1 / -1; }

        /* el botón de eliminar junto al nombre, no solo en una fila */
        .mp-modal .mp-linea > .mp-linea-borrar {
            grid-row: 1;
            grid-column: 2;
        }

        .mp-modal .mp-linea > .mp-linea-datos:empty { display: none; }

    .mp-modal .mp-cifras { grid-template-columns: 1fr; }

    .mp-modal .mp-total { font-size: 2.4rem; }

    /* El total va arriba: solo total y vuelto. Comprobante y cliente ya
       están en la cabecera; el desglose sobra en la pantalla chica */
    .mp-modal .mp-detalle { display: none; }

    .mp-modal .modal-footer kbd { display: none; }

    .mp-modal .modal-footer .btn {
        flex: 1;
        white-space: nowrap;
    }

    .mp-modal .mp-cobrar,
    .mp-modal .mp-cobrar.mp-cancelar {
        min-width: 0;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .mp-modal .mp-cancelar { flex: 0 0 auto !important; }   /* Cobrar se queda con el resto */
}

/* ============================================================================
   CONTROLES: CAMPOS Y BOTONES A 40 PX
   ----------------------------------------------------------------------------
   La plantilla daba ~48 px a los campos (padding .8rem) y ~38 px a los botones,
   así que un botón junto a un campo quedaba más bajo. Ahora los dos miden 40 px:
   15 px de letra en campos (como el resto del sistema), 22 px de línea y 8 px
   de relleno + 2 px de borde. Radio 12 px (10 px en las variantes -sm).

   Estas reglas se cargan después de la plantilla y tienen su misma
   especificidad, así que también pisarían -sm y -lg: por eso se vuelven a
   declarar abajo con los valores originales de la plantilla.
   ============================================================================ */
.form-control,
.form-select {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 15px;
    line-height: 22px;
    min-height: 40px;
    border-radius: 12px;
}

.input-group-text {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 15px;
    line-height: 22px;
    border-radius: 12px;
}

.btn {
    --bs-btn-padding-y: 8px;
    --bs-btn-line-height: 22px;
    --bs-btn-border-radius: 12px;
}

/* Variantes -sm / -lg: valores de la plantilla (radio -sm a 10 px) */
.form-control-sm {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.7rem;
    font-size: 0.765625rem;
    line-height: 1.5;
    border-radius: 10px;
}

.form-control-lg {
    min-height: calc(1.5em + 1.55rem + 2px);
    padding: 0.775rem 0.85rem;
    font-size: 1.09375rem;
    line-height: 1.5;
    border-radius: 12px;
}

.form-select-sm {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.765625rem;
    line-height: 1.5;
    min-height: 0;
    border-radius: 10px;
}

.form-select-lg {
    padding-top: 0.775rem;
    padding-bottom: 0.775rem;
    font-size: 1.09375rem;
    line-height: 1.5;
    border-radius: 12px;
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 10px;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-y: 1rem;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 12px;
}

/* Selects con Choices.js: misma altura y radio que un form-select */
.choices__inner {
    min-height: 40px;
    border-radius: 12px;
}

.choices[data-type*=select-one] .choices__inner {
    padding-top: 5px;
    padding-bottom: 3px;
}

/* Campos dentro de .input-group-sm / -lg: la plantilla les da su relleno y
   letra, pero no anula la altura mínima ni el interlineado de arriba */
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    min-height: 0;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.765625rem;
    line-height: 1.5;
    border-radius: 10px;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    min-height: 0;
    line-height: 1.5;
    border-radius: 12px;
}

/* Selects pequeños con Choices: mismo radio que los campos -sm */
.form-select-sm + .choices .choices__inner {
    border-radius: 10px;
}

/* ============================================================================
   CHOICES: DESPLEGABLE
   ----------------------------------------------------------------------------
   La caja no pierde el redondeo al abrirse (antes quedaba plana abajo y se
   pegaba a la lista): el panel flota separado 6 px, con radio 12 px y sombra.
   Dentro, el buscador es un campo gris con lupa, la opción elegida lleva un
   check a la derecha y la flecha es un chevron que gira al abrir.
   ============================================================================ */
.choices.is-open .choices__inner,
.choices.is-flipped.is-open .choices__inner {
    border-radius: 12px;
}

/* Enfocado o abierto: solo el borde azul, sin halo de sombra */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--bs-primary);
    box-shadow: none;
}

/* Flecha: chevron de Tabler en lugar del triángulo de CSS */
.choices[data-type*=select-one]::after,
.choices[data-type*=select-one].is-open::after {
    content: "\ea5f";
    font-family: "tabler-icons";
    font-size: 16px;
    line-height: 1;
    border: 0;
    width: auto;
    height: auto;
    margin-top: 0;
    top: 50%;
    right: 12px;
    color: var(--bs-secondary-color);
    transform: translateY(-50%);
    transition: transform .15s ease;
    pointer-events: none;
}

.choices[data-type*=select-one].is-open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Panel */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .10);
    overflow: hidden;
}

.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
    margin-top: 0;
    margin-bottom: 6px;
    border-radius: 12px;
}

/* Buscador dentro del panel */
.choices[data-type*=select-one] .choices__input,
.choices__list--dropdown .choices__input {
    background-color: #f1f3f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 16px;
    border: 0 !important;
    border-radius: 10px;
    padding: 9px 12px 9px 35px;
    margin-bottom: 6px;
    font-size: 14px;
    width: 100%;
}

[data-pc-theme="dark"] .choices[data-type*=select-one] .choices__input,
[data-pc-theme="dark"] .choices__list--dropdown .choices__input {
    background-color: rgba(255, 255, 255, .06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E");
}

/* Opciones */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    position: relative;
    padding: 9px 34px 9px 10px;
    border-radius: 8px;
    font-size: 14px;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #f1f3f5;
}

[data-pc-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-pc-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: rgba(255, 255, 255, .06);
}

/* Check en la opción elegida */
.choices__list--dropdown .choices__item.is-selected::after,
.choices__list[aria-expanded] .choices__item.is-selected::after {
    content: "\ea5e";
    font-family: "tabler-icons";
    font-size: 16px;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    color: var(--bs-body-color);
}

/* ============================================================================
   CONVERTIR NOTA DE VENTA (.cv-modal)
   ----------------------------------------------------------------------------
   #mdlConvertirNV de /Venta. Diseño probado en /Home/Privacy: arriba la nota
   que se convierte; a la izquierda Boleta/Factura y su serie; a la derecha el
   cliente con el mismo bloque del POS (.pos-cliente-tipos). Ctrl+Enter emite.
   ============================================================================ */
.cv-modal .modal-content { border-radius: 1rem; }

.cv-modal .cv-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .4rem;
    display: block;
}

.cv-modal .cv-cabeza { display: flex; align-items: center; gap: .75rem; }

.cv-modal .cv-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
}

.cv-modal .cv-titulo { font-size: 1.15rem; font-weight: 700; margin: 0; }
.cv-modal .cv-sub { font-size: 13px; color: var(--bs-secondary-color); }

/* La nota que se convierte */
.cv-modal .cv-nota { display: flex; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.cv-modal .cv-nota > div { flex: 1; min-width: 0; padding: .55rem .75rem; }
.cv-modal .cv-nota > div + div { border-left: 1px solid var(--bs-border-color); }
.cv-modal .cv-nota .cv-valor { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cv-modal .cv-nota .cv-total .cv-valor { font-size: 1.1rem; font-weight: 700; }

/* Tipo de comprobante: dos tarjetas (radio; ← → las cambia) */
.cv-modal .cv-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.cv-modal .cv-tipo {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, background .15s;
}

    .cv-modal .cv-tipo i { font-size: 1.4rem; color: var(--bs-secondary-color); }

.cv-modal .cv-tipo-nombre { font-weight: 600; font-size: 14px; line-height: 1.2; }
.cv-modal .cv-tipo-serie { font-size: 12px; color: var(--bs-secondary-color); }

.cv-modal .btn-check:checked + .cv-tipo { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.cv-modal .btn-check:checked + .cv-tipo i,
.cv-modal .btn-check:checked + .cv-tipo .cv-tipo-nombre { color: var(--bs-primary); }
.cv-modal .btn-check:focus-visible + .cv-tipo { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* Chips del tipo de documento con foco de teclado visible */
.cv-modal .pos-cliente-tipos .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

.cv-modal .cv-error { font-size: 12.5px; color: var(--bs-danger); min-height: 1.2em; }
.cv-modal .cv-ok { font-size: 12.5px; color: var(--bs-success); }
/* El ícono de error de Bootstrap se encimaba con la lupa: basta el borde rojo */
.cv-modal #convertir_customer_doc.is-invalid { background-image: none; }

.cv-modal kbd {
    font-size: 10.5px;
    font-family: var(--bs-font-monospace);
    background: transparent;
    color: inherit;
    opacity: .7;
    padding: 0;
    margin-left: .35rem;
    box-shadow: none;
}

.cv-modal .cv-atajos { font-size: 12px; color: var(--bs-secondary-color); }
.cv-modal .cv-atajos kbd { margin: 0; opacity: 1; font-weight: 600; }

.cv-modal .cv-columna-cliente { border-left: 1px solid var(--bs-border-color); }

@media (max-width: 767.98px) {
    .cv-modal .cv-columna-cliente { border-left: 0; border-top: 1px solid var(--bs-border-color); }
    .cv-modal .cv-nota { flex-wrap: wrap; }
    .cv-modal .cv-nota > div { flex: 1 1 50%; }
    .cv-modal .cv-nota > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--bs-border-color); }
    .cv-modal .cv-nota > div:nth-child(4) { border-top: 1px solid var(--bs-border-color); }
    .cv-modal .cv-atajos { display: none; }
    /* Pie: sin pistas de teclas; el botón de emitir se estira y el total ya está arriba */
    .cv-modal kbd { display: none; }
    .cv-modal .modal-footer { gap: .5rem; }
    .cv-modal .modal-footer > * { margin: 0; }
    .cv-modal #cvEmitir { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cv-modal .cv-emitir-total { display: none; }
}

/* ============================================================================
   DAR DE BAJA ANTE SUNAT (.bj-modal)
   ----------------------------------------------------------------------------
   #mdlBajaSunat de /Venta. Diseño probado en /Home/Privacy: motivos que dicen
   cuándo usarlos (solo facturas), qué va a pasar antes de confirmar, y el
   resultado en el mismo modal. Ctrl+Enter da de baja.
   ============================================================================ */
.bj-modal .modal-content { border-radius: 1rem; }

.bj-modal .bj-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .4rem;
    display: block;
}

.bj-modal .bj-cabeza { display: flex; align-items: center; gap: .75rem; }

.bj-modal .bj-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.bj-modal .bj-titulo { font-size: 1.15rem; font-weight: 700; margin: 0; }
.bj-modal .bj-sub { font-size: 13px; color: var(--bs-secondary-color); }

/* El comprobante que se da de baja */
.bj-modal .bj-doc { display: flex; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.bj-modal .bj-doc > div { flex: 1; min-width: 0; padding: .55rem .75rem; }
.bj-modal .bj-doc > div + div { border-left: 1px solid var(--bs-border-color); }
.bj-modal .bj-doc .bj-valor { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bj-modal .bj-doc .bj-total .bj-valor { font-size: 1.1rem; font-weight: 700; }

/* Motivos: tarjetas con título y cuándo usarlo */
.bj-modal .bj-motivos { display: flex; flex-direction: column; gap: .4rem; }

.bj-modal .bj-motivo {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .6rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s, background .15s;
}

.bj-modal .bj-motivo-tecla {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    font-size: 11.5px;
    font-weight: 700;
    font-family: var(--bs-font-monospace);
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.bj-modal .bj-motivo-nombre { font-weight: 600; font-size: 13.5px; line-height: 1.3; display: block; }
.bj-modal .bj-motivo-desc { font-size: 12.5px; color: var(--bs-secondary-color); line-height: 1.35; display: block; }

.bj-modal .btn-check:checked + .bj-motivo { border-color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .05); }
.bj-modal .btn-check:checked + .bj-motivo .bj-motivo-tecla { border-color: var(--bs-danger); background: var(--bs-danger); color: #fff; }
.bj-modal .btn-check:checked + .bj-motivo .bj-motivo-nombre { color: var(--bs-danger); }
.bj-modal .btn-check:focus-visible + .bj-motivo { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .2); }
/* Bloqueado: los motivos se ven apagados, no elegibles */
.bj-modal .btn-check:disabled + .bj-motivo { opacity: .45; cursor: not-allowed; }

/* Boleta: sin motivo */
.bj-modal .bj-sin-motivo {
    display: flex;
    gap: .6rem;
    font-size: 13px;
    line-height: 1.45;
    border-radius: .75rem;
    padding: .8rem .9rem;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color);
}

    .bj-modal .bj-sin-motivo i { font-size: 1.2rem; color: var(--bs-primary); }
    .bj-modal .bj-sin-motivo b { color: var(--bs-body-color); font-weight: 600; }

/* Qué va a pasar */
.bj-modal .bj-pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.bj-modal .bj-pasos li { display: flex; gap: .55rem; font-size: 13px; line-height: 1.4; }
.bj-modal .bj-pasos i { font-size: 1.05rem; color: var(--bs-secondary-color); flex-shrink: 0; margin-top: 1px; }
.bj-modal .bj-pasos b { font-weight: 600; }

.bj-modal .bj-nc {
    font-size: 12.5px;
    border-radius: .75rem;
    padding: .6rem .75rem;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color);
}

[data-pc-theme="dark"] .bj-modal .bj-nc,
[data-pc-theme="dark"] .bj-modal .bj-sin-motivo { background: rgba(255,255,255,.04); }

.bj-modal .bj-error { font-size: 12.5px; color: var(--bs-danger); }

/* Resultado dentro del modal */
.bj-modal .bj-resultado { text-align: center; padding: 1.5rem 1rem; }
.bj-modal .bj-resultado .bj-icono { width: 56px; height: 56px; font-size: 1.8rem; margin-bottom: .75rem; }
.bj-modal .bj-resultado h5 { font-weight: 700; margin-bottom: .35rem; }
.bj-modal .bj-resultado p { font-size: 13.5px; color: var(--bs-secondary-color); margin: 0 auto; max-width: 420px; }

/* Sin permiso para otros días */
.bj-modal .bj-bloqueo {
    display: flex;
    gap: .6rem;
    font-size: 13px;
    border: 1px solid rgba(var(--bs-warning-rgb), .45);
    background: rgba(var(--bs-warning-rgb), .08);
    border-radius: .75rem;
    padding: .7rem .8rem;
}

    .bj-modal .bj-bloqueo i { color: var(--bs-warning); font-size: 1.2rem; }

.bj-modal kbd {
    font-size: 10.5px;
    font-family: var(--bs-font-monospace);
    background: transparent;
    color: inherit;
    opacity: .75;
    padding: 0;
    margin-left: .35rem;
    box-shadow: none;
}

.bj-modal .bj-atajos { font-size: 12px; color: var(--bs-secondary-color); }
.bj-modal .bj-atajos kbd { margin: 0; opacity: 1; font-weight: 600; }

.bj-modal .bj-columna-derecha { border-left: 1px solid var(--bs-border-color); }

@media (max-width: 767.98px) {
    .bj-modal .bj-columna-derecha { border-left: 0; border-top: 1px solid var(--bs-border-color); }
    .bj-modal .bj-doc { flex-wrap: wrap; }
    .bj-modal .bj-doc > div { flex: 1 1 50%; }
    .bj-modal .bj-doc > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--bs-border-color); }
    .bj-modal .bj-doc > div:nth-child(4) { border-top: 1px solid var(--bs-border-color); }
    .bj-modal .bj-atajos, .bj-modal kbd, .bj-modal .bj-motivo-tecla { display: none; }
    .bj-modal .modal-footer { gap: .5rem; }
    .bj-modal .modal-footer > * { margin: 0; }
    .bj-modal #bjConfirmar { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================================
   AVISOS — panel de la campana de la cabecera (js/core/notificaciones.js)
   Cada aviso: ícono por prioridad, título con la cantidad, explicación y acción.
   ============================================================================ */
.vf-avisos-panel { width: 380px; max-width: calc(100vw - 1.5rem); }
.vf-avisos-lista { max-height: min(420px, calc(100vh - 220px)); overflow-y: auto; }
.vf-aviso {
    display: flex; gap: .7rem; padding: .7rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 13px; color: var(--bs-body-color); text-decoration: none;
}
a.vf-aviso:hover, a.vf-aviso:focus-visible { background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-body-color); }
.vf-aviso-ico {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.vf-aviso-nuevo {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--bs-primary); margin-left: .35rem; vertical-align: 2px;
}
/* En el celular el panel ocupa casi todo el ancho bajo la cabecera */
@media (max-width: 575.98px) {
    .vf-avisos-panel { width: calc(100vw - 1.5rem); }
}


/* ====== Resolver comprobantes rechazados (/Venta) ====== */
.cv-modal .rz-tabla { max-height: 300px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.cv-modal .rz-tabla .table-vk td { white-space: normal; }
.cv-modal .rz-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cv-modal .btn-check:checked + .cv-tipo.rz-peligro { border-color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .06); }
.cv-modal .btn-check:checked + .cv-tipo.rz-peligro i,
.cv-modal .btn-check:checked + .cv-tipo.rz-peligro .cv-tipo-nombre { color: var(--bs-danger); }
.cv-modal .rz-explica { padding: .65rem .85rem; border-radius: .75rem; background: rgba(var(--bs-secondary-rgb), .08); }
.cv-modal .rz-explica ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.cv-modal .rz-motivo { display: block; font-size: 12px; color: var(--bs-danger); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-modal .rz-error { font-size: 12.5px; color: var(--bs-danger); }
.cv-modal .rz-extras { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; margin-top: .25rem; }
@media (max-width: 575.98px) {
    /* Las tres opciones en una fila: ícono y nombre (la explicación va debajo) */
    .cv-modal .rz-acciones .cv-tipo { flex-direction: column; gap: .25rem; padding: .6rem .4rem; text-align: center; }
    .cv-modal .rz-acciones .cv-tipo-serie { display: none; }
    /* El motivo se parte en dos líneas en vez de empujar el total fuera de la pantalla */
    .cv-modal .rz-motivo { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .cv-modal .rz-tabla .table-vk td { padding-left: .5rem; padding-right: .5rem; }
    .cv-modal .rz-tabla { max-height: 240px; }
    .cv-modal .rz-extras { flex-direction: column; align-items: flex-end; }
}


/* ====== Configurar impresora (modal del layout) ====== */
.cv-modal .imp-nota { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .85rem; border-radius: .75rem; background: rgba(var(--bs-info-rgb), .08); font-size: 13px; }
.cv-modal .imp-nota > i { font-size: 1.15rem; color: var(--bs-info); flex-shrink: 0; margin-top: 1px; }
.cv-modal .imp-calibra { padding: .75rem .85rem; border: 1px dashed var(--bs-border-color); border-radius: .75rem; }
.cv-modal .imp-stepper { display: flex; align-items: stretch; }
.cv-modal .imp-stepper .btn { padding-left: .55rem; padding-right: .55rem; }
.cv-modal .imp-stepper .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cv-modal .imp-stepper .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cv-modal .imp-stepper .form-control { border-radius: 0; border-left: 0; border-right: 0; min-width: 0; padding-left: .25rem; padding-right: .25rem; -moz-appearance: textfield; }
.cv-modal .imp-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; }
.cv-modal .imp-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: 1px; }


/* ====== Índice de reportes (Reportes/Ventas, Reportes/Inventario…) ====== */
.rv-root .rv-barra { margin-bottom: 1.25rem; }
.rv-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rv-item { text-decoration: none; color: inherit; margin: 0 !important; border: 1px solid var(--bs-border-color); box-shadow: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
a.rv-item:hover, a.rv-item:focus-visible { border-color: var(--bs-primary); transform: translateY(-2px); box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .08); outline: none; }
a.rv-item:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.rv-icono { width: 44px; height: 44px; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.rv-item .card-body { padding: 1rem 1.1rem; }
.rv-titulo { display: block; margin-top: .1rem; font-weight: 700; font-size: 15px; color: var(--bs-heading-color, var(--bs-body-color)); }
.rv-pregunta { display: block; font-size: 13px; color: var(--bs-body-color); margin-top: .15rem; }
.rv-filtros { display: block; font-size: 12px; color: var(--bs-secondary-color); margin-top: .45rem; }
.rv-item kbd { font-size: 11px; padding: .1rem .4rem; background: rgba(var(--bs-secondary-rgb), .15); color: var(--bs-secondary-color); box-shadow: none; }
.rv-pronto { margin-top: 1.75rem; padding: .75rem 1rem; border: 1px dashed var(--bs-border-color); border-radius: .75rem; font-size: 13px; color: var(--bs-secondary-color); }


/* bg-light-primary en oscuro: el preset del tema lo fija en #e6f6fe (claro) y no
   tiene variante oscura, así que en modo oscuro salía un cuadro blanco. Las demás
   bg-light-* sí se oscurecen; esta queda igual que ellas. */
html[data-pc-theme="dark"] .bg-light-primary { background: rgba(var(--bs-primary-rgb), .15) !important; }


/* ====== Cabecera: accesos rápidos (Alt+A) ====== */
.vf-qta { width: 340px; max-width: calc(100vw - 2rem); overflow: hidden; }
.vf-qta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .75rem 1rem .5rem; }
.vf-qta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: 0 .5rem .6rem; }
.vf-qta-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .25rem .55rem; border-radius: .65rem; text-decoration: none; color: var(--bs-body-color); text-align: center; }
.vf-qta-item:hover, .vf-qta-item:focus-visible { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-body-color); outline: none; }
.vf-qta-item:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.vf-qta-ico { width: 38px; height: 38px; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.vf-qta-txt { font-size: 12px; font-weight: 600; line-height: 1.2; }
.vf-qta-item kbd { position: absolute; top: .3rem; right: .35rem; font-size: 10px; padding: 0 .3rem; background: rgba(var(--bs-secondary-rgb), .15); color: var(--bs-secondary-color); box-shadow: none; }

/* ====== Cabecera: selector de sucursal (Alt+S) ====== */
.vf-suc .choices__list--dropdown { min-width: 240px; }
.vf-suc .choices__item { word-break: normal; overflow-wrap: anywhere; }
.vf-suc.cambiando .input-group-text i { animation: vfSucGira 1s linear infinite; }
@keyframes vfSucGira { to { transform: rotate(360deg); } }


/* ====== Cabecera: menú de usuario (Alt+U) ====== */
.vf-us { width: 320px; max-width: calc(100vw - 2rem); overflow: hidden; }
.vf-us-cab { display: flex; gap: .75rem; align-items: center; padding: 1rem; }
.vf-us-plan { display: block; margin: 0 .75rem .5rem; padding: .7rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; color: var(--bs-body-color); text-decoration: none; font-size: 13px; }
.vf-us-plan:hover, .vf-us-plan:focus-visible { border-color: var(--bs-primary); color: var(--bs-body-color); outline: none; }
.vf-us-uso { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem .5rem; align-items: center; font-size: 11.5px; color: var(--bs-secondary-color); }
.vf-us-barra { height: 5px; border-radius: 3px; background: rgba(var(--bs-secondary-rgb), .18); overflow: hidden; }
.vf-us-barra > span { display: block; height: 100%; border-radius: 3px; }
.vf-us .dropdown-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; font-size: 13.5px; }
.vf-us .dropdown-item > i:first-child { font-size: 1.1rem; color: var(--bs-secondary-color); width: 1.1rem; text-align: center; }
.vf-us .dropdown-item.text-danger > i:first-child { color: var(--bs-danger); }
.vf-us kbd { font-size: 10px; padding: .05rem .35rem; background: rgba(var(--bs-secondary-rgb), .15); color: var(--bs-secondary-color); box-shadow: none; }

/* Filas de contacto (Soporte, Mejorar plan) */
.vf-contactos { display: flex; flex-direction: column; gap: .5rem; }
.vf-contacto { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; color: var(--bs-body-color); text-decoration: none; font-size: 13.5px; }
.vf-contacto:hover, .vf-contacto:focus-visible { border-color: var(--bs-primary); color: var(--bs-body-color); outline: none; }
.vf-contacto-ico { width: 40px; height: 40px; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.vf-contacto kbd { font-size: 10px; padding: .05rem .35rem; background: rgba(var(--bs-secondary-rgb), .15); color: var(--bs-secondary-color); box-shadow: none; }


/* ====== Cambiar contraseña (modal del layout) ====== */
.cv-modal .pw-campo { position: relative; }
.cv-modal .pw-campo .form-control { padding-right: 2.75rem; }
.cv-modal .pw-ojo { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); border: 0; background: transparent; color: var(--bs-secondary-color); padding: .25rem .4rem; border-radius: .4rem; font-size: 1.15rem; line-height: 1; }
.cv-modal .pw-ojo:hover { color: var(--bs-body-color); background: rgba(var(--bs-secondary-rgb), .12); }
.cv-modal .pw-fuerza { height: 5px; border-radius: 3px; background: rgba(var(--bs-secondary-rgb), .18); overflow: hidden; }
.cv-modal .pw-fuerza > span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .2s, background-color .2s; }
.cv-modal .pw-reglas { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: 12px; }
.cv-modal .pw-reglas span { color: var(--bs-secondary-color); }
.cv-modal .pw-reglas span.ok { color: var(--bs-success); }
.cv-modal .pw-mayus { font-size: 12.5px; color: var(--bs-warning); }


/* Avatar del menú de usuario: en móvil la plantilla fija .pc-head-link en 40px de
   ancho (con 7px de relleno) y el avatar de 40px se encogía a 26px: salía ovalado. */
.pc-header .header-user-profile .pc-head-link { width: auto; }
.pc-header .header-user-profile .pc-head-link .avtar { flex-shrink: 0; }


/* ====== Buscador de la cabecera: precio por presentación, pie y detalle ====== */
.vf-buscador__precio small { font-weight: 500; color: var(--bs-secondary-color); font-size: 11px; }
.vf-buscador__pie { display: flex; justify-content: space-between; align-items: center; padding: .45rem .85rem; font-size: 12px; color: var(--bs-secondary-color); }
.vf-buscador__det { padding: .75rem .85rem; font-size: 13px; }
.vf-buscador__det h6 { margin: .75rem 0 .35rem; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.vf-buscador__fila-det { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.vf-buscador__fila-det > :last-child { white-space: nowrap; }
.vf-buscador__precio { white-space: nowrap; }

/* ====== Panel Personalizar ====== */
.cfg-panel { width: 360px; max-width: 100vw; }
.cfg-panel .offcanvas-footer { background: var(--bs-body-bg); }
.cfg-ico { width: 38px; height: 38px; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.cfg-seccion { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .75rem; }
.cfg-label { display: block; font-size: 12.5px; font-weight: 600; margin: 1rem 0 .45rem; }
.cfg-seccion + .cfg-label { margin-top: 0; }
.cfg-opciones { display: grid; gap: .5rem; }
.cfg-opciones.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cfg-opciones.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cfg-op { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .55rem .4rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; font-size: 12.5px; cursor: pointer; margin: 0; text-align: center; }
.cfg-panel .btn-check:checked + .cfg-op { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-primary); font-weight: 600; }
.cfg-panel .btn-check:focus-visible + .cfg-op, .cfg-panel .btn-check:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3); }
.cfg-prev { position: relative; width: 100%; height: 38px; border-radius: .45rem; border: 1px solid var(--bs-border-color); overflow: hidden; display: block; }
.cfg-prev i { position: absolute; display: block; border-radius: 3px; }
.prev-claro { background: #f4f7fa; }
.prev-oscuro { background: #1a2129; }
.prev-sistema { background: linear-gradient(90deg, #f4f7fa 50%, #1a2129 50%); }
.prev-claro i:first-child, .prev-oscuro i:first-child, .prev-sistema i:first-child { left: 6px; top: 7px; width: 40%; height: 6px; background: var(--bs-primary); }
.prev-claro i:last-child, .prev-sistema i:last-child { left: 6px; top: 18px; width: 70%; height: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.prev-oscuro i:last-child { left: 6px; top: 18px; width: 70%; height: 12px; background: #263240; }
.prev-sombra, .prev-borde { background: rgba(var(--bs-secondary-rgb), .08); }
.prev-sombra::after, .prev-borde::after { content: ''; position: absolute; inset: 8px 12px; border-radius: 4px; background: var(--bs-body-bg); }
.prev-sombra::after { box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.prev-borde::after { border: 1px solid var(--bs-border-color); }
.prev-menu-osc i, .prev-menu-cla i { left: 0; top: 0; bottom: 0; width: 30%; border-radius: 0; }
.prev-menu-osc i { background: #1d2630; }
.prev-menu-cla i { background: #fff; border-right: 1px solid var(--bs-border-color); }
.prev-completo i, .prev-fijo i { top: 8px; bottom: 8px; background: rgba(var(--bs-primary-rgb), .35); }
.prev-completo i { left: 6px; right: 6px; }
.prev-fijo i { left: 28%; right: 28%; }
.cfg-aa { font-size: 1.35rem; font-weight: 600; line-height: 38px; height: 38px; }
.cfg-colores { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.cfg-colores label { aspect-ratio: 1; border-radius: .65rem; background: var(--c); display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; color: #fff; }
.cfg-colores label i { opacity: 0; font-size: 1.1rem; text-shadow: 0 0 3px rgba(0, 0, 0, .45); }
.cfg-colores .btn-check:checked + label { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--c); }
.cfg-colores .btn-check:checked + label i { opacity: 1; }


/* Buscador de la cabecera en móvil: fondo y texto que siguen al tema */
.vf-buscador-movil { background: rgba(var(--bs-secondary-rgb), .1); border: 1px solid var(--bs-border-color); }
.vf-buscador-movil:focus-within { border-color: var(--bs-primary); }
.vf-buscador-movil .form-control { color: var(--bs-body-color); }
.vf-buscador-movil .form-control::placeholder { color: var(--bs-secondary-color); opacity: 1; }


/* ====== POS: promociones (franja sobre el carrito, panel Alt+P, modal de ofertas) ====== */
.pv-franja { border-radius: .75rem; padding: .6rem .85rem; margin-bottom: .75rem; font-size: 13px; border: 1px solid; display: flex; flex-direction: column; gap: .45rem; }
.pv-franja.ok { background: rgba(var(--bs-success-rgb), .08); border-color: rgba(var(--bs-success-rgb), .3); }
.pv-franja.poco { background: rgba(var(--bs-warning-rgb), .08); border-color: rgba(var(--bs-warning-rgb), .35); }
.pv-linea { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pv-linea > i { font-size: 1.15rem; }
.pv-linea .flex-grow-1 { min-width: 160px; }
.pv-promo { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .7rem .85rem; color: var(--bs-body-color); }
.pv-promo:hover, .pv-promo:focus-visible { border-color: var(--bs-primary); outline: none; }
.pv-promo:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.pv-promo.aplicada { border-color: rgba(var(--bs-success-rgb), .5); background: rgba(var(--bs-success-rgb), .05); }
.pv-avance { height: 5px; border-radius: 3px; background: rgba(var(--bs-secondary-rgb), .18); overflow: hidden; margin-top: .45rem; }
.pv-avance > span { display: block; height: 100%; border-radius: 3px; background: var(--bs-warning); }
.pv-promo.aplicada .pv-avance > span { background: var(--bs-success); }
.pv-oferta { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; cursor: pointer; }
.pv-oferta:has(input:checked) { border-color: var(--bs-success); background: rgba(var(--bs-success-rgb), .05); }
.pv-sugerencia { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem; border: 1px solid rgba(var(--bs-warning-rgb), .35); border-radius: .75rem; background: rgba(var(--bs-warning-rgb), .06); }