@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ==========================================================================
   VARIABLES DE COLOR (PALETA PRINCIPAL)
   ========================================================================== */
:root {
    --bg-light: #F2F2F2;
    --text-dark: #0D0D0D;
    --brand-dark: #1F0459;
    --brand-primary: #8B3DD9;
    --brand-light: #CF7EF2;

    /* Valores RGB para transparencias */
    --text-dark-rgb: 13, 13, 13;
    --brand-dark-rgb: 31, 4, 89;
    --brand-primary-rgb: 139, 61, 217;
    --brand-light-rgb: 207, 126, 242;

    --ink: var(--text-dark);
    --muted: var(--ui-muted);
    --blue: var(--brand-primary);
    --line: var(--ui-border);
}

/* Variables de componentes: siguen el tema declarado en <html>. */
:root {
 --ui-surface: #ffffff;
 --ui-surface-soft: #f5f1fa;
 --ui-surface-hover: #eee4f7;
 --ui-input: #ffffff;
 --ui-border: #ddd3e8;
 --ui-muted: #6e627d;
 --ui-accent-text: #7130ae;
 --ui-surface-rgb: 255, 255, 255;
 --ui-shadow-rgb: 0, 0, 0;
 --ui-strong: #21152f;
 --ui-strong-hover: #352344;
 --ui-on-light-accent: #21152f;
 --ink: var(--text-dark);
 --muted: var(--ui-muted);
 --blue: var(--brand-primary);
 --line: var(--ui-border);

/* Success (Éxito / Verde) */
    --success-bg: rgba(25, 135, 84, 0.2);
    --success-text: #4ade80; 
    --success-border: #166534;

    /* Danger / Error (Peligro / Rojo) */
    --danger-bg: rgba(220, 53, 69, 0.2);
    --danger-text: #f87171; 
    --danger-border: #991b1b;

    /* Warning (Advertencia / Amarillo o Ámbar) */
    --warning-bg: rgba(255, 193, 7, 0.2);
    --warning-text: #fbbf24; 
    --warning-border: #b45309;

    /* Info (Información / Azul o Celeste) */
    --info-bg: rgba(13, 202, 240, 0.2);
    --info-text: #38bdf8; 
    --info-border: #0369a1;

/* 1. Colores base del modal */
    --swal-bg: var(--ui-surface);
    --swal-text: var(--text-dark);
    --swal-border: var(--ui-border);
    --swal-input-bg: var(--ui-input);

    /* 2. Botones de Acción */
    --swal-confirm-bg: var(--brand-primary);
    --swal-confirm-hover: var(--brand-dark);
    --swal-confirm-text: #ffffff;
    
    --swal-cancel-bg: var(--ui-surface-soft);
    --swal-cancel-hover: var(--ui-surface-hover);
    --swal-cancel-text: var(--text-dark);
    --swal-cancel-border: var(--ui-border);

    /* 3. Colores de los Íconos de Estado (Tonos pastel optimizados para modo oscuro) */
    --swal-success: #4ade80;
    --swal-success-ring: rgba(74, 222, 128, 0.3); /* Anillo translúcido */
    
    --swal-error: #f87171;
    --swal-warning: #fbbf24;
    --swal-info: #38bdf8;
    --swal-question: #a78bfa;
}

/* Paleta clara explícita; los estados conservan contraste sobre blanco. */
html[data-bs-theme="light"] {
    color-scheme: light;
    --bg-light: #f2f2f2;
    --text-dark: #0d0d0d;
    --text-dark-rgb: 13, 13, 13;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f5f1fa;
    --ui-surface-hover: #eee4f7;
    --ui-input: #ffffff;
    --ui-border: #ddd3e8;
    --ui-muted: #6e627d;
    --ui-accent-text: #7130ae;
    --ui-surface-rgb: 255, 255, 255;
    --success-bg: #e7f5ec;
    --success-text: #146c43;
    --success-border: #a3cfbb;
    --danger-bg: #fcebed;
    --danger-text: #b02a37;
    --danger-border: #f1aeb5;
    --warning-bg: #fff3cd;
    --warning-text: #805b00;
    --warning-border: #e5c365;
    --info-bg: #e5f5fc;
    --info-text: #075985;
    --info-border: #9acfe8;
    --swal-success: #15803d;
    --swal-success-ring: rgba(21, 128, 61, .25);
    --swal-error: #b91c1c;
    --swal-warning: #a16207;
    --swal-info: #0369a1;
    --swal-question: #7130ae;
}

html[data-bs-theme="dark"] {
 color-scheme: dark;
 --bg-light: #151121;
 --text-dark: #eeeaf5;
 --text-dark-rgb: 238, 234, 245;
 --dark-surface: #211a30;
 --dark-surface-hover: #302440;
 --dark-border: #42334f;
 --dark-muted: #b9adc9;
 --ui-surface: var(--dark-surface);
 --ui-surface-soft: #291f38;
 --ui-surface-hover: var(--dark-surface-hover);
 --ui-input: #191323;
 --ui-border: var(--dark-border);
 --ui-muted: var(--dark-muted);
 --ui-accent-text: #cf7ef2;
 --ui-surface-rgb: 33, 26, 48;
 --ink: var(--text-dark);
 --muted: var(--ui-muted);
 --blue: var(--brand-primary);
 --line: var(--ui-border);
}

body {
    font-family: 'Nunito', sans-serif;
    height: 100vh;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.swiper {
    width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
}

.swiper-button-next,
.swiper-button-prev {
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;  
    height: 40px;
}

/* ==========================================================================
   ESTILOS UNIFICADOS DE TARJETAS (CARDS)
   ========================================================================== */
.card {
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    background-color: var(--ui-surface) !important;
    color: var(--text-dark);
    box-shadow: 0 4px 6px -1px rgba(var(--ui-shadow-rgb), 0.05), 0 2px 4px -1px rgba(var(--ui-shadow-rgb), 0.03);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden; /* Evita que los hijos sobresalgan y corten los bordes */
}

.card .card-header {
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border-bottom: 1px solid var(--ui-border);
    font-weight: 700;
    padding: 12px 16px;
    /* Eliminamos radios individuales ya que overflow: hidden en .card se encarga de redondear todo limpiamente */
}

.card .card-body {
    background-color: var(--ui-surface);
    color: var(--text-dark);
    padding: 16px;
}

.card .card-body p,
.card .card-body label,
.card .card-body .form-label {
    color: var(--text-dark);
}

.card .card-footer {
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border-top: 1px solid var(--ui-border);
    padding: 12px 16px;
    /* Asegura que el borde inferior no quede solapado o cortado */
    margin-bottom: -1px; 
}

.stats-icon {
    border-radius: 50% !important; 
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   BOTONES DE ACCIÓN RÁPIDA (Quick Actions)
   ========================================================================== */
.btn-index a {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important; 
    border-radius: 12px; 
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(var(--ui-shadow-rgb),0.05); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.btn-index a:hover {
    background-color: var(--ui-surface-hover) !important;
    border-color: var(--brand-primary) !important; 
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(var(--brand-primary-rgb), 0.15), 0 4px 6px -2px rgba(var(--ui-shadow-rgb), 0.05);
}

.btn-index a img {
    width: 42px;
    height: auto;
    margin-bottom: 15px;
    filter: grayscale(20%) brightness(95%);
    transition: all 0.3s ease;
}

.btn-index a:hover img {
    filter: grayscale(0%) brightness(100%);
    transform: scale(1.05);
}

.btn-index a p {
    color: var(--text-dark) !important; 
    font-weight: 600;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    text-transform: uppercase; 
    letter-spacing: 0.3px;
}

.btn-index a:hover p {
    color: var(--brand-primary) !important; 
}

.btn-index a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--brand-primary);
    transition: width 0.3s ease;
}

.btn-index a:hover::after {
    width: 100%;
}

.recent-message {
    border-bottom: 1px solid var(--ui-border);
}
.recent-message:last-child {
    border-bottom: none;
}
.tblboxmoney tr td{
    vertical-align: middle;
    font-size: 11px;
    text-align: center !important;
}
.mensajeGral{
    position: fixed;
    bottom: 2px;
    right: 2px;
    width: 50%;
    z-index: 10500;
}

.swiper-button-next {
    background-image: url('../images/iconos/derecha.png');
}
.swiper-button-prev {
    background-image: url('../images/iconos/izquierda.png');
}
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../../assets/images/gif/circle-9360_128.gif') 50% 50% no-repeat rgba(var(--ui-shadow-rgb),0.7);
    background-size: 20%;
}
.modal .modal-body p, .card-body p {
    color: var(--text-dark);
}

#main-content {
    position: relative;
}

/* ==========================================================================
   CABECERAS Y MENÚS
   ========================================================================== */
.sidebar-wrapper {
    background: linear-gradient(180deg, var(--brand-dark) 0%, var(--ui-strong) 100%);
    border-right: 1px solid rgba(255,255,255,0.1);
}
.layout-navbar header {
    background: linear-gradient(0deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0px 5px 8px 2px rgba(var(--ui-shadow-rgb),0.1);
}
.layout-navbar header .burger-btn {
    color: #fff;
}
.user-menu .user-name h6, .user-menu .user-name p {
    color: #fff;
}
.page-title {
    position: relative;
}
.page-title button {
    position: absolute;
    top:  0;
    right: 0;
}

/* ListGroup */
.list-group .list-group-item {  
    position: relative;
    padding: 11px;
    font-size: 14px;
}
.list-group .list-group-item .actions-btn {
    position: absolute;
    padding: 3px;
    top: 3px;
    right: 3px;
    bottom: 3px;
}
.list-group .active {
    padding: 14px;
    background-color: var(--brand-primary);
    color: #fff;
    font-weight: bold;
    border: 0;
}
#main-content .footer .text-color {
    color: var(--text-dark);
    opacity: 0.7;
}
.img-error {
    width: 75%;
}

.shFooter .card-footer {
    border-top: solid var(--ui-border) 1px;
    border-bottom: solid var(--ui-border) 1px;
    color: var(--text-dark);
    background-color: var(--bg-light);
    font-weight: bold;
    font-size: 18px;
}

/* ==========================================================================
   LISTAS DE BÚSQUEDA Y AUTOCOMPLETADO
   ========================================================================== */
.lisverCLN { position: relative; }
.lisverCLN #fmClientes, .buscarp { position: absolute; top: 0%; bottom: 0%; right: 0; }
.listConsulta { display: none; position: absolute; top: 59px; width: 80%; height: 250px; z-index: 100; overflow: auto; }
.listConsulta ul {
    border: 1px solid var(--ui-border);
    box-shadow: 0px 7px 5px -5px rgba(var(--ui-shadow-rgb),0.2);
    background: var(--ui-surface);
    color: var(--text-dark);
}
.listConsulta li {
    padding: 6px 6px 6px 10px;
    cursor: pointer;
    width: 100%;
    color: var(--text-dark);
    font-size: 13px;
    transition: .3s all;
}
.listConsulta li:hover { background: var(--bg-light); color: var(--brand-primary); }

#listDTECCF { display: none; position: absolute; top: 59px; height: 250px; z-index: 100; overflow: auto; }
.colorPS { background-color: var(--brand-dark); color: #fff; }

/* ==========================================================================
   BOTONES COLORES
   ========================================================================== */
.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); transition: .3s ease; color: #fff;}
.btn-primary:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff;}

.btn-success { background-color: #48b60c; transition: .3s ease; color: #fff;}
.btn-success:hover { background-color: #358907; color: #fff;}

.btn-detalles { background-color: var(--brand-light); color: var(--ui-on-light-accent); transition: .3s ease; }
.btn-detalles:hover { background-color: var(--brand-primary); color: #fff; }

.btn-danger { background-color: #d50000; color: #fff; transition: .3s ease; }
.btn-danger:hover { background-color: #940000; color: #fff; }

.btn-orange { background-color: #ff9000; color: #5b3300; transition: .3s ease; }
.btn-orange:hover { background-color: #b66700; color: #fff; }

.btn-purple { background-color: var(--brand-primary); color: #fff; transition: .3s ease; }
.btn-purple:hover { background-color: var(--brand-dark); color: #fff; }

.btn-green { background-color: #baff00; color: #3f5504; transition: .3s ease; }
.btn-green:hover { background-color: #90c306; color: #fff; }
.btn-green:disabled { background-color: #adba8b; color: #3f5504; }

.btn-purple2 { background-color: var(--brand-dark); color: #fff; transition: .3s ease; }
.btn-purple2:hover { background-color: var(--brand-primary); color: #fff; }

.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.btn-xs { padding: 1px 5px !important; font-size: 12px !important; line-height: 1.5 !important; border-radius: 3px !important; }

.form-control { color: var(--text-dark); font-family: 'Nunito', sans-serif; }

/* ==========================================================================
   TABLAS GENERALES
   ========================================================================== */
table thead th {
    background: linear-gradient(0deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
    border-color: transparent;
    color: #fff;
}

.alert-warning-icon { background: url('../../assets/images/iconos/warning.png'); background-color: #fddd76; background-size: contain; background-repeat: no-repeat; background-position: 102% center; color: #5d3d00; border: 1px solid #bfa34c; }
.alert-danger-icon { background: url('../../assets/images/iconos/danger.png'); background-color: #e89098; background-size: contain; background-repeat: no-repeat; background-position: 102% center; color: #710b14; border: 1px solid #a05259; }
.alert-success-icon { background: url('../../assets/images/iconos/success.png'); background-color: #9bebae; background-size: contain; background-repeat: no-repeat; background-position: 102% center; color: #034212; border: 1px solid #367b46; }

.imgBTN { position: relative; transition: all .3s; }
.imgBTN .delIMG { display: none; position: absolute; right: 19px; bottom: 15px; transition: .3s all; }
.imgBTN:hover .delIMG { display: inline-block; }
.delIMG .dtImg { font-size: 18px; cursor: pointer; }

@media screen and (max-width: 600px) {
    .nsucursal { display: none; }
}

/*================================ESTILOS PARA DATA TABLE=====================================*/
.tbl-lpedidos tr td { font-size: 12px; vertical-align: middle; }
.tbl-lpedidos tr td:nth-child(1), td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7), td:nth-child(8), td:nth-child(9) { text-align: center; }

/* ==========================================================================
   ESTILOS SEMÁNTICOS OSCUROS (ADAPTADOS PARA MODO OSCURO)
   ========================================================================== */

/* .bg1: Azul profundo (Informativo / Primario) */
.bg1 { 
    background: linear-gradient(180deg, rgba(15, 39, 68, 1) 0%, rgba(29, 78, 216, 1) 81%) !important; 
    color: #e0f2fe !important; 
    font-weight: bold; 
}

/* .bg2: Ámbar / Oro oscuro (Advertencia / Alerta) */
.bg2 { 
    background: linear-gradient(180deg, rgba(69, 26, 3, 1) 0%, rgba(120, 53, 15, 1) 81%) !important; 
    color: #fef08a !important; 
    font-weight: bold; 
}

/* .bg3: Verde esmeralda oscuro (Éxito / Aprobado) */
.bg3 { 
    background: linear-gradient(180deg, rgba(6, 78, 59, 1) 0%, rgba(2, 44, 34, 1) 81%) !important; 
    color: #d1fae5 !important; 
    font-weight: bold; 
}

/* .bg4: Gris pizarra oscuro (Neutral / Neutro-Azulado) */
.bg4 { 
    background: linear-gradient(180deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 81%) !important; 
    color: #f1f5f9 !important; 
    font-weight: bold; 
}

/* .bg5: Verde azulado / Teal oscuro (Proceso activo) */
.bg5 { 
    background: linear-gradient(180deg, rgba(4, 47, 46, 1) 0%, rgba(19, 78, 74, 1) 81%) !important; 
    color: #ccfbf1 !important; 
    font-weight: bold; 
}

/* .bg6: Naranja tostado / Óxido (Pendiente / Destacado) */
.bg6 { 
    background: linear-gradient(180deg, rgba(67, 20, 7, 1) 0%, rgba(124, 45, 18, 1) 81%) !important; 
    color: #ffedd5 !important; 
    font-weight: bold; 
}

/* .bg7: Rojo carmesí oscuro (Peligro / Cancelado) */
.bg7 { 
    background: linear-gradient(180deg, rgba(69, 10, 10, 1) 0%, rgba(127, 29, 29, 1) 81%) !important; 
    color: #fee2e2 !important; 
    font-weight: bold; 
}

/* .bg9: Gris carbono oscuro (Inactivo / Deshabilitado) */
.bg9 { 
    background: linear-gradient(180deg, rgba(24, 24, 27, 1) 0%, rgba(39, 39, 42, 1) 81%) !important; 
    color: #f4f4f5 !important; 
    font-weight: bold; 
}

/* .bgv: Vino / Borgoña oscuro (Especial / Alerta crítica) */
.bgv { 
    background: linear-gradient(180deg, rgba(76, 5, 25, 1) 0%, rgba(136, 19, 55, 1) 81%) !important; 
    color: #ffe4e6 !important; 
    font-weight: bold; 
}

#tbl-lCotizaciones tr td { vertical-align: middle; font-weight: bold; }
#tbl-lCotizaciones tr td:nth-child(2), td:nth-child(1), td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7) { text-align: center; }

#tbl_productos { font-size: 11px; }
#tbl_productos tr td { vertical-align: middle; font-weight: bold; }
#tbl_productos tr,td:nth-child(1),td:nth-child(3) { text-align: left; }

#tbl-contribuyentes tr td { vertical-align: middle; font-weight: bold; }
#tbl-contribuyentes tr td:nth-child(2), td:nth-child(5), td:nth-child(6) { text-align: left; }
#tbl-contribuyentes tr td:nth-child(0),td:nth-child(7) { text-align: center !important; }

#tbl-fondosReserva { font-size: 11px; }
.tblUser tr td { vertical-align: middle; font-size: 12px; color: var(--text-dark) !important; }

#ventasTBL tr td { vertical-align: middle; font-weight: bold; }
#ventasTBL tr td:nth-child(2), td:nth-child(3) { text-align: left; }
#ventasTBL tr td:nth-child(5), td:nth-child(6) { text-align: center; }

#tbl-factEmitidas tr td { vertical-align: middle; font-size: 13px; font-weight: bold; }
#tbl-factEmitidas tr td:nth-child(2), td:nth-child(3) { text-align: left; }

/*drop area*/
.modal-contenido { background-color: var(--bg-light); width:300px; padding: 10px 20px; margin: 20% auto; position: relative; }
.modalF { background-color: rgba(var(--ui-shadow-rgb),.8); position:fixed; top:0; right:0; bottom:0; left:0; opacity:0; pointer-events:none; transition: all 1s; }
#miModal:target { opacity:1; pointer-events:auto; }

#drop-area { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,200px)); grid-gap: 4px; grid-auto-rows: 150px; grid-auto-flow: row dense; }
#drop-area img { width: 100%; height: 100%; object-fit: cover; }
#drop-area img:nth-child(5n) { grid-area: span 2 / span 2; }


/* ==========================================================================
   CALCULADORA (Estilo Oscuro Integrado)
   ========================================================================== */
.calculator {
    width:400px; height:auto; padding:8px 0; margin: auto;
    background: var(--ui-strong);
    border: 1px solid var(--brand-dark); border-radius:7px;
    box-shadow:rgba(var(--ui-shadow-rgb),0.4) 0px 2px 5px;
    background-image: linear-gradient(to bottom, var(--brand-dark), var(--ui-strong));
    overflow: hidden; text-align: center;
}

.screen {
    width:350px; height:70px; margin: 8px auto 20px; padding:10px 10px;
    color: var(--text-dark); text-align: right; font-size: 2.2em; letter-spacing: 3px;
    overflow:hidden; border: 1px solid var(--ui-strong); border-radius:7px;
    box-shadow:inset rgba(var(--ui-shadow-rgb),1) 0px 1px 4px;
    background-image: linear-gradient(to bottom, var(--brand-light) 0%, var(--ui-surface) 100%);
    box-sizing:border-box;
}

.buttons { padding:7px; width:367px; margin:auto; overflow: hidden; list-style: none; }
.buttons li { display:inline; float:left; padding:0px; margin-right:10px; margin-bottom:8px; }
.buttons li:nth-child(4n) { margin-right:0; }

.buttons a {
    display:block; width:80px; height:68px; padding:15px 0 10px;
    color: var(--brand-light) !important;
    font-family: 'Myriad Pro', Arial, sans-serif; font-size:1.6em; font-weight: 500;
    letter-spacing: -2px;
    background-color: var(--ui-strong);
    border: 1px solid var(--ui-strong); border-radius:5px;
    text-align: center; text-decoration: none;
    box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px;
    background-image: linear-gradient(to bottom, var(--ui-surface) 0%, var(--ui-strong) 100%);
    box-sizing:border-box; cursor: pointer;
}
.buttons a:active {
    box-shadow: inset rgba(0,0,0,0.5) 0px 2px 8px;
    background-image: linear-gradient(to bottom, var(--ui-strong) 0%, var(--ui-surface-hover) 100%);
}
.tall { height:151px !important; }
.wide { width:169px !important; }
.shift { margin-top:-78px; }

.ctrls { list-style: none; margin:5px 0 0 20px; padding:0; position: absolute; }
.ctrls li { float:left; display:inline; }
.ctrls li a {
    display: block; width:18px; height:18px; margin-right:10px; border-radius:100%;
    box-shadow:rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(0,0,0,1) 0px 1px 2px 1px;
}

/* ==========================================================================
   DROPDOWN & ESTILOS FORMULARIO
   ========================================================================== */
.btn-dropdown { background-color: var(--ui-surface); color: var(--text-dark); transition: .3s ease; border: 1px solid var(--ui-border); }
.btn-dropdown:hover { background-color: var(--brand-primary); color: #fff !important; border-color: var(--brand-primary); }
.btn-dropdown:disabled { color: #ccc; }

@media only screen and (max-width:1024px) {
    .btn-index a { margin-top: 6px; }
}

.headBTN { position: relative; }
.headBTN span { position: absolute; top: 11px; right: 10px; }

/* FIELDSET */
fieldset { border: 1px solid var(--brand-primary); border-radius: 6px; position: relative; padding-top: 19px; }
fieldset legend {
    width: auto; position: absolute; padding: 6px; border-radius: 6px;
    font-size: 14px; color: #fff; font-weight: bold;
    background-color: var(--brand-dark); border: 1px solid var(--brand-primary);
    top: -19px; left: 15px;
}

.busqueda { position: relative; }

/* DROPDOWNS BÚSQUEDA */
.busqueda .listDistri, .busqueda .listActivieco, .busqueda .listClientes, .busqueda .listDistriSL {
    position: absolute; background-color: transparent !important; margin-top: 5px; width: 100%;
    max-height: 250px; min-height: 30px; overflow-x: hidden; overflow-y: auto;
    box-shadow: 0 4px 6px rgba(var(--ui-shadow-rgb), 0.1);
}
.busqueda .listDistri li, .busqueda .listActivieco li, .busqueda .listClientes li, .busqueda .listDistriSL li {
    width: 75%; color: var(--text-dark); margin-bottom: 0; padding: 6px;
    cursor: pointer; font-size: 18px !important; transition: .3s all;
}
.busqueda .listDistri li:hover, .busqueda .listActivieco li:hover, .busqueda .listClientes li:hover, .busqueda .listDistriSL li:hover {
    background-color: var(--brand-primary); color: #fff;
}

.busqueda .listPoductos {
    position: absolute; background-color: var(--ui-surface) !important; margin-top: 2px; width: 100%;
    max-height: 250px; min-height: 30px; overflow-x: hidden; overflow-y: auto;
    box-shadow: 0 4px 6px rgba(var(--ui-shadow-rgb), 0.1);
}
.busqueda .listPoductos li { color: var(--text-dark); margin-bottom: 0; padding: 0; cursor: default; font-size: 18px !important; transition: .3s all; }
.busqueda .listPoductos li:hover { background-color: var(--bg-light); }

.tbl_productos thead tr th {
    background: linear-gradient(0deg, var(--brand-dark) 0%, var(--brand-primary) 100%); color: #fff; font-size: 13px;
}
.tbl_productos tr td { vertical-align: middle; font-size: 12px; }
.tbl_productos tr ,td:nth-child(2),td:nth-child(3) { text-align: left; }
.tbl_productos tr td:nth-child(1) { text-align: center; }

.tblClientes thead tr th { color: #fff; font-size: 13px; }
.tblClientes tr td { vertical-align: middle; font-weight: bold; font-size: 13px; }
.tblClientes tr td:nth-child(1) { text-align: left; }

.section-dashini .card-body .text-muted { font-size: 12px !important; }
.form-select, .select2, .form-control { font-family: 'Nunito', sans-serif; font-size: 14px; }
.item-notifi { font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--ui-border); }
.item-notifi:last-child { border-bottom: 0; }
.custom-file-button input[type=file]::-webkit-file-upload-button { display: none; }
.custom-file-button input[type=file]::file-selector-button { display: none; }
.verImagen { width: 100%; height: 200px; border: 0; object-fit: contain; }
.btn .imgCL { width: 32px; filter: Invert(100%); }

/* ==========================================================================
   CALCULADORA & POS
   ========================================================================== */
#Principal { width: 100%; }
#Pantalla {
    width: 100%; background: var(--brand-dark); font-size: 30px; height: 50px; border: 0; margin: 0;
    text-align: right; padding: 10px; color: white; font-family: 'Roboto Condensed', sans-serif;
}
#buttons { width: 100%; }
#Teclado {
    width: 100%; background: var(--ui-strong); display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 0;
}
.button {
    background: var(--ui-strong); font-family: 'Roboto Condensed', sans-serif; font-size: 25px;
    color: #FCFCFD; margin: 0; padding: 15px; border: 0; width: 70px; height: 70px;
    min-width: 10px; min-height: 10px; transition: all .2s ease-in-out;
}
.button:hover { background: var(--brand-primary); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
.button:active { transform: scale(1); }

.form-control:focus, .form-select:focus{
    box-shadow: 0 0 0 4px rgba(var(--brand-light-rgb), 0.25) !important;
    border-color: var(--brand-primary);
}

.btnAccionesVP { display: grid; grid-template-columns: repeat(4,100px); grid-template-rows: repeat(3,100px); justify-content: center; grid-gap: 2px; }
.reistrarYguardar { grid-column-start: 2; grid-column-end: 5; }
.reistrarYguardar button { height: 100px; }
.btnAccionesVP .g1 { width: 100px; height: 100px; }
.btnAccionesVP .g1 img { width: 48px; }
.btnAccionesVP .g1 span { font-size: 12px; }

.listPV { min-height: 350px; max-height: 70vh; overflow-x: auto; }
.listPV::-webkit-scrollbar { width: 8px; background-color: var(--brand-dark); border-radius: 20px; }
.listPV::-webkit-scrollbar:window-inactive { display: none; }
.listPV::-webkit-scrollbar-thumb  { background-color: var(--brand-primary); border-radius: 6px; }

.listPoductos .producto .agregar-carrito { border-radius: 0px; }
.listPoductos .producto .agregar-carrito:last-of-type { border-radius: 0 0 5px 0 !important; }
.cantidad-control button { border-radius: 100%; height: 35px; width: 35px; cursor: pointer; }
.cantidad-control input { width: 40px; text-align: center; margin: 0 5px; border: 1px solid var(--ui-border); height: 30px; }

.bodyprDetalle { position: relative; overflow: hidden; }
.bodyprDetalle #calVer { position: absolute; top: 0; right: -410px; transition: all 0.5s ease; }
.bodyprDetalle #calVer.show { right: 0; }
.bodyprDetalle #calVer #calVerOK { position: absolute; left: -40px; cursor: pointer; }
.bodyprDetalle .img-fluid { width: 200px; height: 200px; object-fit: cover; }
.imgPrd { width: 50px; height: 50px; object-fit: contain; }

.checkbo label { color: var(--text-dark) !important; }

#modalFormPago .modal-content { border: 0; }
#registroPago .form-floating label { font-size: 14px; color: var(--text-dark) !important; }

.bti { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); justify-content: center; gap: 0px; }
.bti button img, .btig button img { width: 52px; padding: 5px; margin-bottom: 8px; }
.bti a img, .btig a img { width: 64px; padding: 5px; margin-bottom: 8px; }
.bti .btn, .btig .btn { font-size: 12px !important; }
.btig button { width: 100px; }

.btn-greenP { background-color: #baff00; font-size: 16px; color: #3f5504; transition: .3s ease; }
.btn-greenP:hover { background-color: #90c306; color: #fff; }
.btn-greenP:disabled { background-color: #adba8b; color: #3f5504; }

.btn-purple2P { background-color: var(--brand-dark); font-size: 16px; color: #fff; transition: .2s ease; }
.btn-purple2P:hover { background-color: var(--brand-primary); color: #fff; }

.btn-hao-lblue { background-color: var(--brand-light); font-size: 16px; color: var(--ui-on-light-accent); transition: .2s ease; }
.btn-hao-lblue:hover { background-color: var(--brand-primary); color: #fff; }

.btn-hao-second { background-color: var(--bg-light); font-size: 16px; color: var(--text-dark); transition: .2s ease; border: 1px solid var(--ui-border);}
.btn-hao-second:hover { background-color: var(--ui-surface-hover); color: var(--text-dark); }

.btn-hao-blk { background-color: var(--ui-strong); font-size: 16px; color: #fff; transition: .2s ease; }
.btn-hao-blk:hover { background-color: var(--ui-surface-hover); color: #fff; }

.btn-hao-ylw { background-color: #ffa800; font-size: 16px; color: #6b4702; transition: .2s ease; }
.btn-hao-ylw:hover { background-color: #fec454; color: #6b4702; }

.btn-redpp { background-color: var(--brand-dark); font-size: 14px; color: #fff; transition: .3s ease; }
.btn-redpp:hover { background-color: var(--brand-primary); color: #fff; }

.btn-hao-red { background-color: #df0000; font-size: 16px; color: #ffa8a8; transition: .2s ease; }
.btn-hao-red:hover { background-color: #ff3a3a; color: #fff; }

.btnAccionesVPX, .btnAccionesVPXAT, .listCat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-content: center; gap: 0px; }
.listCat { border-radius: 15px; overflow: hidden; }

.prdList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 5px; max-height: 100%; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: var(--brand-primary) var(--ui-strong);
    padding: 5px; -webkit-overflow-scrolling: touch;
}
.prdList::-webkit-scrollbar { width: 6px; }
.prdList::-webkit-scrollbar-track { background: var(--ui-strong); }
.prdList::-webkit-scrollbar-thumb { background-color: var(--brand-primary); border-radius: 10px; }

.prdList .producto { width: 100%; max-width: 250px; margin: 0 auto; border-radius: 7px !important; }
.prdList img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; }
.prdList .textPRD { height: 65px; font-size: 10px !important; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
.prdList .textPRD span { font-size: 12px !important; }
.prdList .addOK { border-radius: 0px 0px 8px 8px; }

.border-responsive { border: 1px solid var(--ui-border) !important; border-bottom: 0 !important; }
@media (min-width: 768px) { .border-responsive { border-bottom: 1px solid var(--ui-border) !important; border-right: 0 !important; } }

/* TOOLTIPS */
.tooltip-box {
    position: absolute; visibility: hidden; opacity: 0;
    background-color: rgba(var(--ui-shadow-rgb), 0.85); color: white; padding: 6px 12px;
    border-radius: 4px; font-size: 13px; z-index: 1000; pointer-events: none;
    white-space: nowrap; transition: opacity 0.2s ease;
}
.tooltip-box.visible { visibility: visible; opacity: 1; }

.custom-tooltip {
    position: absolute; visibility: hidden; opacity: 0;
    background-color: var(--ui-strong); color: white; padding: 6px 12px;
    border-radius: 4px; font-size: 13px; z-index: 9999; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s; transform: translateY(0); white-space: nowrap;
}
.custom-tooltip.visible { visibility: visible; opacity: 1; transform: translateY(-5px); }
.custom-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: var(--ui-strong) transparent transparent transparent;
}
#global-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: var(--ui-strong) transparent transparent transparent;
}

.hover-fila:hover { background-color: rgba(var(--brand-primary-rgb), 0.1) !important; transition: background-color 0.2s ease-in-out; }
.nom-prd-click:hover { color: var(--brand-primary) !important; text-decoration: underline; }

@media screen and (max-width:1024px) {
    .bti, .btnAccionesVP { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); }
    .btnAccionesVP .g1 { width: 100%; height: 100px; }
}

.modal-payment-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary) 100%);
    color: white;
}

.summary-card {
    background-color: var(--ui-surface);
    border-radius: 0.5rem;
}

.summary-row {
    font-size: 0.95rem;
    color: var(--text-dark);
}

.summary-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-accent-text);
}

.payment-btn {
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    background-color: var(--ui-surface);
    color: var(--text-dark);
}

.payment-btn:hover:not([disabled]) {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: var(--brand-primary);
    background-color: var(--ui-surface-soft);
    color: var(--ui-accent-text);
}

.payment-btn img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.action-btn-grid .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: 0.5rem;
}

.action-btn-grid img {
    width: 24px;
    height: 24px;
}

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: var(--ui-surface); }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--ui-surface); border-radius: 4px; }

.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--ui-border) !important; 
}

.form-select:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--ui-border) !important;
}

.btn:focus, 
.btn:active:focus {
    outline: none !important;
}

.form-check-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Contenedor principal de la barra de acciones */
.barra-iconos {
    display: flex;
    gap: 0.75rem; /* Espaciado entre botones */
    flex-wrap: wrap;
    padding: 0.5rem;
    background-color: transparent; 
}

/* Diseño del botón individual (.icono) - Efecto 3D */
.barra-iconos .icono {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 65px; 
    height: 60px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background-color: var(--ui-surface);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none; /* Por si el botón es una etiqueta <a> */
    
    /* El truco del 3D: Una sombra sólida hacia abajo */
    box-shadow: 0 4px 0 var(--ui-border);
}

/* Ajuste para las imágenes (PNGs) dentro del botón */
.barra-iconos .icono img {
    width: 28px; 
    height: 28px;
    object-fit: contain;
    margin-bottom: 4px;
    transition: transform 0.2s;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

/* Efecto Hover (Pasar el cursor) */
.barra-iconos .icono:hover:not(:disabled) {
    background-color: var(--ui-surface-hover);
    border-color: var(--brand-primary);
    box-shadow: 0 4px 0 var(--brand-primary);
    transform: translateY(-2px); /* Se levanta ligeramente */
}
.barra-iconos .icono:hover:not(:disabled) img {
    transform: scale(1.1); /* La imagen crece un poquito */
}

/* Efecto Active (El clic o "hundimiento" 3D) */
.barra-iconos .icono:active:not(:disabled) {
    transform: translateY(4px); /* Baja el botón */
    box-shadow: 0 0 0 transparent; /* Desaparece la sombra 3D */
}

/* Estado deshabilitado (Disabled) */
.barra-iconos .icono:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--ui-surface-soft);
    box-shadow: 0 4px 0 var(--ui-border);
    transform: none;
}
.barra-iconos .icono:disabled img {
    filter: grayscale(100%) opacity(70%); /* Vuelve gris el ícono si está bloqueado */
}

/* Diseño del Badge de teclas (F4, F6, etc.) */
.barra-iconos .badge-tecla {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand-primary);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    letter-spacing: 0.5px;
    pointer-events: none; /* Evita que el badge estorbe al hacer clic */
}

/* Sutil ajuste del badge en Hover para que coincida con el botón */
.barra-iconos .icono:hover:not(:disabled) .badge-tecla {
    background-color: var(--text-dark); 
    color: var(--ui-surface);
}

@media (max-width: 768px) {
  .icono {
    width: 55px;
    height: 55px;
  }
  
  .badge-tecla {
    font-size: 10px;
    bottom: -8px;
    padding: 2px 6px;
  }
}

/* =========================================
   ESTILOS PARA HEADER COMPACTO Y MODERNO
   ========================================= */
.navbar-compact {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    background: rgba(var(--ui-surface-rgb), 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.burger-btn-compact i {
    font-size: 1.4rem !important;
    color: var(--text-dark);
    transition: color 0.2s;
}

.burger-btn-compact:hover i {
    color: var(--ui-accent-text);
}

.user-name-compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-name-compact h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0;
    line-height: 1.1;
}

.user-name-compact p {
    font-size: 0.7rem;
    color: var(--ui-muted);
    margin-bottom: 0;
    line-height: 1.2;
    margin-top: 2px;
}

.avatar-compact {
    position: relative;
    width: 36px;
    height: 36px;
}

.avatar-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--ui-border);
}

/* =========================================
   DISEÑO MODERNO (GLASSMORPHISM Y MONTOS)
   ========================================= */
.resumen-glass {
    background: rgba(var(--ui-surface-rgb), 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
}

.fila-resumen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.fila-resumen:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detallesRSTXT {
    font-size: 0.85rem;
    width: 100%;
    color: var(--text-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.montodetallesTXT {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    font-family: 'Nunito', sans-serif;
    margin: 0;
    width: 32%;
    
    /* Cambiamos block/text-align por Flexbox para separar el $ del número */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Mantiene los números alineados verticalmente aunque uses Nunito */
    font-variant-numeric: tabular-nums; 
}

/* Aquí inyectamos el signo de dólar por defecto */
.montodetallesTXT::before {
    content: "$";
    color: var(--text-dark);
    font-weight: normal; /* Puedes ponerlo bold si prefieres */
}

.totalpagarView {
    display: flex;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.caja-total-label {
    background-color: var(--ui-surface);
    padding: 14px 20px;
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.caja-total-label p {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.caja-total-monto {
    background-color: var(--brand-primary);
    padding: 14px 20px;
    min-width: 150px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.caja-total-monto p {
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
}

/* =========================================
   ESPACIO DE TRABAJO POS (MOBILE RESPONSIVE)
   ========================================= */
.pos-layout-main {
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.pos-workspace {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}
.verPRDCAT {
    flex-grow: 1;
    overflow-y: hidden;
    min-height: 0 !important;
    height: 0;
    padding: 0 !important;
    margin: 0 !important;
}
.verPRDCATN {
    overflow-y: auto;
    max-height: 100vh;
}
@media (max-width: 767px) {
    .pos-workspace {
        flex-direction: column;
    }

    .pos-workspace > .col-md-8 {
        height: 100% !important; 
        overflow-y: auto; 
    }

    .detalleVenta:not(.cesta-abierta) .card-body,           
    .detalleVenta:not(.cesta-abierta) .resumen-glass,       
    .detalleVenta:not(.cesta-abierta) .flex-shrink-0 ~ div  
    {
        display: none !important;
    }

    .detalleVenta:not(.cesta-abierta) {
        height: auto !important; 
        flex-shrink: 0;
    }

    .detalleVenta.cesta-abierta {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background-color: var(--ui-surface);
        z-index: 1040;
        padding-bottom: 90px;
        overflow-y: auto;
    }

    .totalpagarView {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1050;
        margin: 0 !important;
        border-radius: 0;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
        cursor: pointer;
    }

    .verPRDCAT {
        padding-bottom: 90px !important; 
    }
}

.detalleMTpago {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
}

.textMpago {
    color: var(--text-dark);
    font-size: 1rem;
    white-space: nowrap;
}

.montoPag {
    color: var(--text-dark);
    font-family: monospace;
}

.input-linea {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px dashed var(--ui-border);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.input-linea:focus {
    box-shadow: none;
    border-bottom: 2px solid var(--brand-primary);
    outline: none;
}

.invoice-header {
    background-color: var(--ui-surface);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ui-border);
    margin-bottom: 20px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.data-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.data-value {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 700;
}

.highlight-box {
    background-color: var(--ui-surface);
    padding: 16px;
    border-radius: 8px;
    border: 1px dashed var(--ui-border);
}

.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

.invoice-table-container {
    margin-top: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    overflow: hidden;
}

.invoice-table {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.invoice-table thead .table-title {
    background-color: var(--ui-surface);
    color: var(--text-dark);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.invoice-table thead .table-headers {
    background-color: var(--ui-surface-soft);
    color: var(--ui-accent-text);
    font-weight: 600;
    border-bottom: 2px solid var(--brand-primary);
}

.invoice-table th, 
.invoice-table td {
    vertical-align: middle;
    padding: 12px 10px;
    border-color: var(--ui-border);
}

.invoice-table tbody tr:hover {
    background-color: var(--ui-surface-hover);
    transition: background-color 0.2s ease;
}

.totals-box {
    background-color: var(--ui-surface);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--ui-border);
}

.total-pagar-row {
    border-top: 2px solid var(--ui-border);
}

.total-pagar-row td {
    padding-top: 12px !important;
}

.form-check-input.item-checkbox {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

.input-cantidad {
    max-width: 80px;
    margin: 0 auto;
}
.input-cantidad:disabled {
    background-color: var(--ui-surface);
    border-color: var(--ui-border);
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 750;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -.04em;
}

.subtitle {
  color: var(--muted);
  max-width: 680px;
}

.tag {
  display: inline-block;
  border-radius: 30px;
  background: var(--ui-surface-soft);
  color: var(--ui-accent-text);
  padding: 6px 11px;
  font-size: .72rem;
  font-weight: 700;
}

#notice:empty {
  display: none;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: 0 5px 20px #14263d04;
  margin-bottom: 20px;
}

.panel-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-head h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.panel-body {
  padding: 24px;
}

.step {
  display: grid;
  place-items: center;
  background: var(--ui-surface-soft);
  color: var(--blue);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 750;
}

.editor {
  background: var(--ui-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}

.form-label {
  font-size: .8rem;
  font-weight: 650;
  margin-bottom: 7px;
}

.form-control, 
.form-select {
  border-color: var(--ui-border);
  border-radius: 9px;
  min-height: 44px;
  font-size: .9rem;
}

.form-control:focus, 
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .15);
}

.form-control[readonly] {
  background: var(--ui-surface);
  color: var(--text-dark);
}

.form-text {
  font-size: .75rem;
  color: var(--muted);
}

.required::after {
  content: ' *';
  color: var(--blue);
}

.reference {
  font-family: monospace;
}

.btn {
  border-radius: 9px;
  font-weight: 600;
  font-size: .85rem;
  padding: 10px 16px;
}

.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
}

button:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}

.sumarryList .table th {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  background: var(--ui-surface);
  white-space: nowrap;
  padding: 13px;
}

.sumarryList .table td {
  padding: 14px 13px;
  font-size: .8rem;
  vertical-align: middle;
}

.sumarryList .table .btn {
  padding: 5px 8px;
  font-size: .72rem;
}

.empty {
  padding: 34px;
  text-align: center;
  color: var(--muted);
}

.empty b {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
}

.summary {
  position: sticky;
  top: 24px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .85rem;
  padding: 9px 0;
}

.grand-total {
  background: var(--ui-surface-soft);
  border-radius: 12px;
  padding: 18px;
  margin: 14px 0;
}

.grand-total strong {
  font-size: 2rem;
  letter-spacing: -.04em;
}

.hint {
  background: var(--ui-surface);
  border-radius: 12px;
  padding: 15px;
  font-size: .8rem;
  color: var(--ui-muted);
  line-height: 1.65;
}

.notes {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 575px) {
  .panel-head, 
  .panel-body {
    padding: 18px;
  }
  
  .editor {
    padding: 14px;
  }
  
  .summary {
    position: static;
  }
}

#listPRDVER {
    position: absolute;
    width: 100%;
    max-height: 350px;
    overflow-y: auto;
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    margin-top: 2px;
    display: none;
}

#listPRDVER .selProducADD {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--text-dark); 
    cursor: pointer; 
    transition: all 0.2s ease-in-out; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#listPRDVER .selProducADD:last-child {
    border-bottom: none; 
}

#listPRDVER .selProducADD:hover {
    background-color: var(--ui-surface-soft);
    border-left: 4px solid var(--brand-primary);
    padding-left: 12px;
}

#listPRDVER .item-resultado, 
#listPRDVER > div {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#listPRDVER > div:last-child {
    border-bottom: none;
}

#listPRDVER > div:hover {
    background-color: var(--ui-surface-soft);
    border-left: 4px solid var(--brand-primary);
    padding-left: 12px;
}

#listPRDVER::-webkit-scrollbar {
    width: 6px;
}
#listPRDVER::-webkit-scrollbar-track {
    background: var(--ui-surface);
    border-radius: 8px;
}
#listPRDVER::-webkit-scrollbar-thumb {
    background: var(--ui-surface);
    border-radius: 8px;
}
#listPRDVER::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* Integración con el tema oscuro del aplicativo. */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .panel,
html[data-bs-theme="dark"] .editor,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .modal-content {
    background-color: var(--ui-surface);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .cantidad-control input {
    background-color: var(--ui-input);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ui-muted);
    opacity: 1;
}
html[data-bs-theme="dark"] .form-control[readonly],
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .input-cantidad:disabled {
    background-color: var(--ui-surface-soft);
    color: var(--ui-muted);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .input-linea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .2) !important;
}
html[data-bs-theme="dark"] .btn:focus-visible,
html[data-bs-theme="dark"] button:focus-visible,
html[data-bs-theme="dark"] .form-check-input:focus-visible {
    outline: 2px solid var(--brand-light) !important;
    outline-offset: 3px;
}
html[data-bs-theme="dark"] .form-control-plaintext,
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .form-group label {
    color: var(--text-dark);
}
html[data-bs-theme="dark"] .input-group-text {
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
html[data-bs-theme="dark"] .btn-primary:hover {
    background: #7130ae;
    border-color: #7130ae;
}
html[data-bs-theme="dark"] .btn-index a:hover p,
html[data-bs-theme="dark"] .listConsulta li:hover,
html[data-bs-theme="dark"] .nom-prd-click:hover {
    color: var(--ui-accent-text) !important;
}
html[data-bs-theme="dark"] .list-group .list-group-item.active {
    background-color: var(--brand-primary);
    color: #fff;
}
html[data-bs-theme="dark"] .calculator,
html[data-bs-theme="dark"] #Teclado {
    background: var(--ui-strong);
}
html[data-bs-theme="dark"] .screen {
    background: var(--ui-input);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .buttons a,
html[data-bs-theme="dark"] .button {
    background: var(--ui-strong);
    color: #eeeaf5;
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .buttons a:hover,
html[data-bs-theme="dark"] .buttons a:active,
html[data-bs-theme="dark"] .button:hover {
    background: var(--brand-primary);
    color: #fff !important;
}
html[data-bs-theme="dark"] .badge-tecla {
    background-color: var(--brand-dark);
    border-color: var(--ui-surface);
}
html[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--ui-surface);
    --bs-table-color: var(--text-dark);
    --bs-table-border-color: var(--ui-border);
    --bs-table-striped-bg: var(--ui-surface-soft);
    --bs-table-striped-color: var(--text-dark);
    --bs-table-hover-bg: var(--ui-surface-hover);
    --bs-table-hover-color: var(--text-dark);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .invoice-table thead .table-title,
html[data-bs-theme="dark"] .invoice-table thead .table-title > th {
    background: var(--ui-surface-soft);
    color: var(--text-dark);
}
html[data-bs-theme="dark"] .invoice-table thead .table-headers,
html[data-bs-theme="dark"] .invoice-table thead .table-headers > th {
    background: var(--brand-dark);
    color: #fff;
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .sumarryList .table th {
    background: var(--ui-surface-soft);
    color: var(--text-dark);
}

html[data-bs-theme="dark"] .select2-container .select2-selection,
html[data-bs-theme="dark"] .select2-dropdown,
html[data-bs-theme="dark"] .select2-container .select2-search__field {
    background-color: var(--ui-input);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .select2-container .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-results__option {
    color: var(--text-dark);
}
html[data-bs-theme="dark"] .select2-container .select2-selection__placeholder {
    color: var(--ui-muted);
}
html[data-bs-theme="dark"] .select2-container .select2-selection__choice {
    background-color: var(--ui-surface-hover);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .select2-results__option[aria-selected="true"],
html[data-bs-theme="dark"] .select2-results__option--selected {
    background-color: var(--ui-surface-hover);
}
html[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected],
html[data-bs-theme="dark"] .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-primary);
    color: #fff;
}
html[data-bs-theme="dark"] .select2-results__option[aria-disabled="true"],
html[data-bs-theme="dark"] .select2-results__option--disabled {
    color: var(--ui-muted);
}

html[data-bs-theme="dark"] .dataTables_wrapper,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-bs-theme="dark"] .dataTables_wrapper label {
    color: var(--text-dark);
}
html[data-bs-theme="dark"] .dataTables_wrapper input,
html[data-bs-theme="dark"] .dataTables_wrapper select,
html[data-bs-theme="dark"] .page-link {
    background-color: var(--ui-input);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
html[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--ui-surface-soft);
    color: var(--ui-muted);
    border-color: var(--ui-border);
}

html[data-bs-theme="dark"] .note-editor,
html[data-bs-theme="dark"] .note-editor .note-editing-area .note-editable,
html[data-bs-theme="dark"] .note-dropdown-menu {
    background-color: var(--ui-surface);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .note-editor .note-toolbar,
html[data-bs-theme="dark"] .note-editor .note-statusbar,
html[data-bs-theme="dark"] .note-btn {
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border-color: var(--ui-border);
}
html[data-bs-theme="dark"] .note-btn:hover,
html[data-bs-theme="dark"] .note-btn.active {
    background-color: var(--ui-surface-hover);
}
.form-floating input::placeholder,
.form-floating input:focus::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}



/* ==========================================================================
   ESTILOS DE FORMULARIOS Y TARJETAS ESPECÍFICAS (.form-card, drop-area, etc.)
   ========================================================================== */
.form-card {
    background: var(--ui-surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(var(--ui-shadow-rgb), 0.05);
    border: 1px solid var(--ui-border);
    padding: 25px;
    margin-bottom: 20px;
    overflow: hidden; /* Previene cortes y asegura que los bordes se dibujen bien */
}

.product-img-card {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(var(--ui-shadow-rgb), 0.05);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

.product-img-card img {
    border-radius: 8px;
    max-height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-img-card img:hover {
    transform: scale(1.05);
}

.modern-drop-area {
    border: 2px dashed var(--ui-border);
    border-radius: 12px;
    background-color: var(--ui-surface-soft);
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    color: var(--ui-muted);
}

.modern-drop-area:hover {
    background-color: var(--ui-surface-hover);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.modern-drop-area i {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--ui-muted);
}

.modern-drop-area:hover i {
    color: var(--brand-primary);
}

.form-floating > .form-control, 
.form-floating > .form-select {
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    background-color: var(--ui-input);
    color: var(--text-dark);
}

.form-floating > .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), .15);
}

.custom-checkbox-wrapper {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px 15px;
    transition: all 0.2s;
    color: var(--text-dark);
}

.custom-checkbox-wrapper:hover {
    background: var(--ui-surface-hover);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--ui-border);
    padding-bottom: 8px;
}

/* ==========================================================================
   INPUTS DE TIPO ARCHIVO (imgPDOD)
   ========================================================================== */
input[type="file"].imgPDOD {
    min-height: calc(1.5em + 0.75rem + 2px); 
    background-color: var(--ui-input);
    color: var(--text-dark);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}

input[type="file"].imgPDOD::file-selector-button {
    margin: -0.375rem -0.75rem; 
    margin-inline-end: 0.75rem; 
    padding: 0.375rem 0.75rem;
    height: calc(100% + 0.75rem); 
    background-color: var(--ui-surface-soft); 
    color: var(--text-dark);
    border: none;
    border-right: 1px solid var(--ui-border);
    cursor: pointer;
}

/* Soporte para navegadores basados en WebKit (Chrome, Safari, Edge) */
input[type="file"].imgPDOD::-webkit-file-upload-button {
    margin: -0.375rem -0.75rem;
    margin-inline-end: 0.75rem;
    padding: 0.375rem 0.75rem;
    height: calc(100% + 0.75rem);
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border: none;
    border-right: 1px solid var(--ui-border);
    cursor: pointer;
}

/* ==========================================================================
   ESTILOS PARA INPUTS READONLY Y DISABLED (MODO CLARO Y OSCURO)
   ========================================================================== */

/* Modo Claro / Por defecto */
.form-control[readonly],
.form-select[readonly],
input[readonly] {
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border-color: var(--ui-border);
    opacity: 1; /* Evita que Bootstrap baje la opacidad por defecto en algunos navegadores */
}

/* Modo Oscuro explícito para inputs readonly y disabled */
html[data-bs-theme="dark"] .form-control[readonly],
html[data-bs-theme="dark"] .form-select[readonly],
html[data-bs-theme="dark"] input[readonly],
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] input:disabled {
    background-color: var(--ui-input) !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-border) !important;
    opacity: 1;
}

/* ==========================================================================
   ESTILOS PARA TEXTAREA (Normal, Readonly y Disabled)
   ========================================================================== */

/* Estilo base para textarea */
textarea.form-control {
    background-color: var(--ui-input);
    color: var(--text-dark);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    min-height: 90px; /* Altura cómoda predeterminada para áreas de texto */
    resize: vertical;  /* Permite redimensionar verticalmente de forma segura */
}

/* Foco en textarea */
textarea.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), .15);
}

/* Textarea Readonly y Disabled (Modo Claro) */
textarea.form-control[readonly],
textarea.form-control:disabled {
    background-color: var(--ui-surface-soft);
    color: var(--text-dark);
    border-color: var(--ui-border);
    opacity: 1;
}

/* Textarea Readonly y Disabled (Modo Oscuro) */
html[data-bs-theme="dark"] textarea.form-control[readonly],
html[data-bs-theme="dark"] textarea.form-control:disabled {
    background-color: var(--ui-input) !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-border) !important;
    opacity: 1;
}

/* ==========================================================================
   CORRECCIÓN DE ESTILOS PARA SUMMERNOTE (MODO CLARO Y OSCURO)
   ========================================================================== */

/* Contenedor principal de Summernote */
.note-editor.note-frame {
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px;
    background-color: var(--ui-surface);
}

/* Barra de herramientas de Summernote */
.note-editor.note-frame .note-toolbar {
    background-color: var(--ui-surface-soft) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Botones dentro de la barra de herramientas */
.note-editor .note-btn {
    background-color: var(--ui-surface) !important;
    color: var(--text-dark) !important;
    border-color: var(--ui-border) !important;
}

.note-editor .note-btn:hover {
    background-color: var(--ui-surface-hover) !important;
}

/* Área editable donde escribe el usuario (Modo Claro) */
.note-editor .note-editing-area .note-editable {
    background-color: var(--ui-input) !important;
    color: var(--text-dark) !important;
}

/* Pie de página / barra de redimensionamiento de Summernote */
.note-editor.note-frame .note-statusbar {
    background-color: var(--ui-surface-soft) !important;
    border-top: 1px solid var(--ui-border) !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* --- MODO OSCURO ESPECÍFICO PARA SUMMERNOTE --- */
html[data-bs-theme="dark"] .note-editor.note-frame {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-surface) !important;
}

html[data-bs-theme="dark"] .note-editor .note-editing-area .note-editable {
    background-color: var(--ui-input) !important;
    color: var(--text-dark) !important;
}

html[data-bs-theme="dark"] .note-editor.note-frame .note-toolbar,
html[data-bs-theme="dark"] .note-editor.note-frame .note-statusbar {
    background-color: var(--ui-surface-soft) !important;
    color: var(--text-dark) !important;
}

html[data-bs-theme="dark"] .note-editor .note-dropdown-menu {
    background-color: var(--ui-surface) !important;
    color: var(--text-dark) !important;
    border-color: var(--ui-border) !important;
}

html[data-bs-theme="dark"] .note-editor .note-dropdown-menu a {
    color: var(--text-dark) !important;
}

html[data-bs-theme="dark"] .note-editor .note-dropdown-menu a:hover {
    background-color: var(--ui-surface-hover) !important;
}

/* ==========================================================================
   ADAPTACIÓN DE DISEÑO 3D PARA TODOS LOS BOTONES (.btn)
   ========================================================================== */
.btn {
    font: inherit;
    border: 0;
    border-radius: 0.5em;
    font-size: 1rem; /* Ajustado a un tamaño estándar de Bootstrap (puedes cambiarlo si prefieres 1.35rem) */
    padding: 0.375em 1em;
    font-weight: 600;
    text-shadow: none; /* Sin sombra de texto para que no choque con los colores personalizados */
    
    /* Sombra 3D basada en capas sutiles utilizando el color de fondo actual del botón */
    box-shadow: inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.3), 
                0 0.0625em 0 0 rgba(0, 0, 0, 0.1),
                0 0.125em 0 0 rgba(0, 0, 0, 0.1), 
                0 0.25em 0 0 rgba(0, 0, 0, 0.15), 
                0 0.3125em 0 0 rgba(0, 0, 0, 0.15),
                0 0.375em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.425em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.425em 0.5em 0 rgba(0, 0, 0, 0.25);
    
    transition: transform 0.15s ease, box-shadow 0.15s ease, translate 0.15s ease;
    cursor: pointer;
}

/* Efecto al presionar cualquier botón */
.btn:active, 
.btn.active {
    translate: 0 0.225em;
    box-shadow: inset 0 0.03em 0 0 rgba(255, 255, 255, 0.2), 
                0 0.03em 0 0 rgba(0, 0, 0, 0.1),
                0 0.0625em 0 0 rgba(0, 0, 0, 0.1), 
                0 0.125em 0 0 rgba(0, 0, 0, 0.15), 
                0 0.125em 0 0 rgba(0, 0, 0, 0.15),
                0 0.2em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.225em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.225em 0.375em 0 rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   COMPATIBILIDAD CON .btn-group
   ========================================================================== */
.btn-group .btn {
    /* Mantiene el efecto 3D pero evita conflictos de radio de bordes entre botones agrupados */
    border-radius: 0; 
}

/* Redondear solo las esquinas exteriores del grupo de botones */
.btn-group .btn:first-child {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}

.btn-group .btn:last-child {
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

/* Para grupos de botones verticales si se llegan a usar (.btn-group-vertical) */
.btn-group-vertical .btn {
    border-radius: 0;
}
.btn-group-vertical .btn:first-child {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
.btn-group-vertical .btn:last-child {
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.dropdown-menu {
    position: absolute !important;
    z-index: 99999 !important;
}

/* Evita que el contenedor con scroll de la tabla oculte los elementos flotantes */
.dataTables_wrapper .dataTables_scrollBody,
.table-responsive,
.card {
    overflow: visible !important;
}

/* ==========================================================================
   CORRECCIÓN DE MODO OSCURO PARA TABLAS (TEXTOS Y BORDES)
   ========================================================================== */

/* Asegurar color de texto y bordes en todas las tablas y celdas */
html[data-bs-theme="dark"] table,
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .table th,
html[data-bs-theme="dark"] .table td {
    color: var(--text-dark) !important;
    border-color: var(--ui-border) !important;
    background-color: transparent;
}

/* Encabezados de tabla en modo oscuro */
html[data-bs-theme="dark"] .table thead th {
    background-color: var(--ui-surface-soft) !important;
    color: var(--text-dark) !important;
    border-bottom: 2px solid var(--ui-border) !important;
}

/* Filas alternas (Striped) en modo oscuro */
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--ui-surface-soft) !important;
    color: var(--text-dark) !important;
}

/* Efecto Hover en filas de tabla en modo oscuro */
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--ui-surface-hover) !important;
    color: var(--text-dark) !important;
}

/* Compatibilidad general con DataTables y paginación dentro de tablas */
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--text-dark) !important;
}

/* ==========================================================================
   MEJORAS PARA EL TABLERO (DASHBOARD) EN MODO OSCURO
   ========================================================================== */

/* Tarjetas de estadísticas y paneles superiores */
html[data-bs-theme="dark"] .section-dashini .card,
html[data-bs-theme="dark"] .page-heading .card {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--text-dark) !important;
}

/* Ajuste de textos atenuados (muted) en modo oscuro para mayor legibilidad */
html[data-bs-theme="dark"] .section-dashini .text-muted,
html[data-bs-theme="dark"] .page-heading .text-subtitle,
html[data-bs-theme="dark"] .recent-message .text-muted {
    color: var(--ui-muted) !important;
}

/* Títulos y montos dentro de las tarjetas */
html[data-bs-theme="dark"] .font-extrabold {
    color: var(--text-dark) !important;
}

/* Líneas divisorias en la lista de actividad de personal */
html[data-bs-theme="dark"] .recent-message {
    border-bottom: 1px solid var(--ui-border) !important;
}

/* Botones de acceso rápido (.btn-index) optimizados para modo oscuro */
html[data-bs-theme="dark"] .btn-index a {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
}

html[data-bs-theme="dark"] .btn-index a p {
    color: var(--text-dark) !important;
}

.card:has(.table-responsive),
.card:has(.dataTables_wrapper) {
    overflow: visible !important;
}

/* ==========================================================================
   ESTILO PLANO PARA ESTADÍSTICAS (SIN CARDS)
   ========================================================================== */
.stat-box {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    color: var(--text-dark);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-box:hover {
    border-color: var(--brand-primary);
}

table thead th,
.ventasCard table thead th {
    background: linear-gradient(0deg, var(--brand-dark) 0%, #4a2182 100%) !important;
    border-color: var(--ui-border) !important;
    color: #fff !important;
}

/* ==========================================================================
   ESTILOS PARA ELEMENTOS DISABLED DENTRO DE LOS DROPDOWNS
   ========================================================================== */

/* Estado disabled general para ítems y botones en el menú desplegable */
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled,
.dropdown-menu button:disabled {
    background-color: transparent !important;
    color: var(--ui-muted) !important;
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none; /* Evita que se puedan hacer clic */
}

/* Efecto hover nulo para asegurar que no cambien de color al pasar el ratón */
.dropdown-menu .dropdown-item.disabled:hover,
.dropdown-menu .dropdown-item:disabled:hover,
.dropdown-menu button:disabled:hover {
    background-color: transparent !important;
    color: var(--ui-muted) !important;
}

/* Ajuste específico para el modo oscuro */
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item.disabled,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:disabled,
html[data-bs-theme="dark"] .dropdown-menu button:disabled {
    color: var(--ui-muted) !important;
    background-color: rgba(255, 255, 255, 0.02) !important; /* Un fondo ultra sutil opcional */
}

/* ==========================================================================
   FORZAR CUADRICULA COMPLETA EN TABLAS (MODO OSCURO)
   ========================================================================== */
.table-bordered, 
.table-bordered th, 
.table-bordered td {
    border: 1px solid #000 !important;
}

/* Forzar fondo y bordes oscuros en todo el contenedor del modal */
.modal .modal-content {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--text-dark) !important;
}

.modal .modal-header, 
.modal .modal-footer,
.modal .modal-body {
    background-color: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
    color: var(--text-dark) !important;
}

/* Línea divisoria superior del footer en modo oscuro */
.modal .modal-footer {
    border-top: 1px solid var(--ui-border) !important;
}

/* Línea divisoria inferior del header */
.modal .modal-header {
    border-bottom: 1px solid var(--ui-border) !important;
}

/* ==========================================================================
   ESTILOS TÁCTILES POS (MODO OSCURO)
   ========================================================================== */

/* Estilos táctiles (Regla del Dedo Gordo) */
.btn-touch {
    min-height: 75px; /* Altura generosa para pantallas táctiles */
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Coloca el ícono arriba del texto */
    line-height: 1.2;
    white-space: normal; /* Permite que el texto largo use dos líneas */
    border: 1px solid var(--ui-border) !important;
    border-radius: 0;
    background-color: var(--ui-surface-soft) !important;
    color: var(--text-dark) !important;
    transition: background-color 0.2s ease, transform 0.1s ease-in-out;
}

/* Efecto hover suave en modo oscuro */
.btn-touch:hover {
    background-color: var(--ui-surface) !important;
    color: var(--text-dark) !important;
}

/* Efecto de hundimiento al presionar la pantalla */
.btn-touch:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
    opacity: 0.8;
}

.img-pos-icon {
    width: 28px;  
    height: 28px; 
    object-fit: contain; /* ¡Vital! */
    margin-bottom: 7px; /* Espacio de separación con el texto de abajo */
}

/* Estilos cuando el botón está deshabilitado (Modo Oscuro) */
.btn-touch:disabled,
.btn-touch.disabled {
    color: #6c757d !important; /* Texto en gris oscuro atenuado */
    pointer-events: none; /* Evita que se aplique el efecto :active */
    cursor: not-allowed;
    background-color: var(--ui-surface) !important; /* Fondo coherente en superficie oscura */
    border-color: var(--ui-border) !important;
    opacity: 0.5;
}

/* Estilos para la imagen cuando el botón está deshabilitado */
.btn-touch:disabled .img-pos-icon,
.btn-touch.disabled .img-pos-icon {
    filter: grayscale(100%) brightness(0.7); /* Escala de grises y ajuste de brillo */
    opacity: 0.5;
}

#formDte .compras-resultados{max-height:240px;overflow-y:auto;border:1px solid var(--ui-border,#ced4da);border-radius:8px;margin-bottom:10px;background:var(--ui-surface,#fff);color:var(--text-dark,#212529)}
#formDte .compras-opcion{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--ui-border,#dee2e6);overflow-wrap:anywhere;white-space:normal}
#formDte .compras-opcion span{display:block;font-size:12px;opacity:.85}
#formDte .compras-opcion:hover,#formDte .compras-opcion[aria-selected="true"]{background:var(--ui-surface-soft,#e9ecef);outline:2px solid #0d6efd;outline-offset:-2px}
@media print{.compras-resultados{display:none!important}}
.compras-resultados.compras-flotante {
  position: absolute;
  z-index: 1090;
  box-sizing: border-box;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  background: var(--ui-surface, #fff);
  color: var(--text-dark, #212529);
  border: 1px solid var(--ui-border, #ced4da);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.compras-flotante[hidden] { display: none !important; }
.compras-flotante .compras-opcion {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--ui-border, #dee2e6);
  white-space: normal;
  overflow-wrap: anywhere;
}
.compras-flotante .compras-opcion:last-child { border-bottom: 0; }
.compras-flotante .compras-opcion span { display: block; font-size: 12px; opacity: .85; }
.compras-flotante .compras-opcion:hover,
.compras-flotante .compras-opcion[aria-selected="true"] {
  background: var(--ui-surface-soft, #e9ecef);
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}
@media print { .compras-flotante { display: none !important; } }

.badge-success, .alert-success {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
    border: 1px solid var(--success-border) !important;
}

.badge-danger, .badge-error, .alert-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    border: 1px solid var(--danger-border) !important;
}

.badge-warning, .alert-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    border: 1px solid var(--warning-border) !important;
}

.badge-info, .alert-info {
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
    border: 1px solid var(--info-border) !important;
}

.table {
    font-size: 13px !important;
    vertical-align: middle !important; /* Centra el contenido de las celdas verticalmente */
}

/* Opcional: Si quieres que la cabecera resalte un poquito más */
.table thead th {
    font-size: 13.5px !important;
    font-weight: 600;
}
/* ==========================================================================
   CORRECCIÓN DEFINITIVA: SIN BORDES DE ENFOQUE + SOMBRA 3D INTACTA
   ========================================================================== */
.btn:focus, 
.btn:focus-visible,
button:focus,
button:focus-visible,
html[data-bs-theme="dark"] .btn:focus-visible,
html[data-bs-theme="dark"] button:focus-visible {
    outline: none !important; /* Elimina el molesto borde al hacer clic */
    
    /* Mantiene la sombra 3D en su estado normal al soltar el clic */
    box-shadow: inset 0 0.0625em 0 0 rgba(255, 255, 255, 0.3), 
                0 0.0625em 0 0 rgba(0, 0, 0, 0.1),
                0 0.125em 0 0 rgba(0, 0, 0, 0.1), 
                0 0.25em 0 0 rgba(0, 0, 0, 0.15), 
                0 0.3125em 0 0 rgba(0, 0, 0, 0.15),
                0 0.375em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.425em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.425em 0.5em 0 rgba(0, 0, 0, 0.25) !important; 
}

/* Sombra 3D hundida mientras se mantiene presionado el botón */
.btn:active:focus, 
.btn.active:focus {
    outline: none !important;
    box-shadow: inset 0 0.03em 0 0 rgba(255, 255, 255, 0.2), 
                0 0.03em 0 0 rgba(0, 0, 0, 0.1),
                0 0.0625em 0 0 rgba(0, 0, 0, 0.1), 
                0 0.125em 0 0 rgba(0, 0, 0, 0.15), 
                0 0.125em 0 0 rgba(0, 0, 0, 0.15),
                0 0.2em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.225em 0 0 rgba(0, 0, 0, 0.2), 
                0 0.225em 0.375em 0 rgba(0, 0, 0, 0.25) !important; 
}

/* ==========================================================================
   ADAPTACIÓN DE SWEETALERT2 AL TEMA (CON VARIABLES)
   ========================================================================== */

/* Contenedor principal de la alerta */
.swal2-popup {
    background-color: var(--swal-bg) !important;
    color: var(--swal-text) !important;
    border: 1px solid var(--swal-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Título y texto de contenido */
.swal2-title,
.swal2-html-container {
    color: var(--swal-text) !important;
}

/* Botón de Confirmar / OK */
.swal2-actions .swal2-confirm {
    background-color: var(--swal-confirm-bg) !important;
    color: var(--swal-confirm-text) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
}

.swal2-actions .swal2-confirm:hover {
    background-color: var(--swal-confirm-hover) !important;
}

/* Botón de Cancelar */
.swal2-actions .swal2-cancel {
    background-color: var(--swal-cancel-bg) !important;
    color: var(--swal-cancel-text) !important;
    border: 1px solid var(--swal-cancel-border) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
}

.swal2-actions .swal2-cancel:hover {
    background-color: var(--swal-cancel-hover) !important;
}

/* Evitar contornos gruesos nativos al hacer clic en los botones de swal */
.swal2-actions button:focus {
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.2) !important;
    outline: none !important;
}

/* Inputs dentro de SweetAlert (Por si pides datos en la alerta) */
.swal2-input, 
.swal2-textarea, 
.swal2-select {
    background-color: var(--swal-input-bg) !important;
    color: var(--swal-text) !important;
    border: 1px solid var(--swal-border) !important;
    border-radius: 8px !important;
}

.swal2-input:focus, 
.swal2-textarea:focus, 
.swal2-select:focus {
    border-color: var(--swal-confirm-bg) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15) !important;
}

/* ==========================================================================
   PERSONALIZACIÓN DE ÍCONOS SWEETALERT2
   ========================================================================== */

/* SUCCESS (Éxito) */
.swal2-icon.swal2-success {
    border-color: var(--swal-success) !important;
    color: var(--swal-success) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--swal-success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--swal-success-ring) !important;
}

/* ERROR (Peligro) */
.swal2-icon.swal2-error {
    border-color: var(--swal-error) !important;
    color: var(--swal-error) !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--swal-error) !important;
}

/* WARNING (Advertencia) */
.swal2-icon.swal2-warning {
    border-color: var(--swal-warning) !important;
    color: var(--swal-warning) !important;
}

/* INFO (Información) */
.swal2-icon.swal2-info {
    border-color: var(--swal-info) !important;
    color: var(--swal-info) !important;
}

/* QUESTION (Pregunta) */
.swal2-icon.swal2-question {
    border-color: var(--swal-question) !important;
    color: var(--swal-question) !important;
}

/* ==========================================================================
   CORRECCIÓN DEL BOTÓN "EXAMINAR" EN INPUT FILE (ALTURA COMPLETA)
   ========================================================================== */
.form-control[type="file"] {
    overflow: hidden; /* Mantiene la esquina redondeada del input padre */
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
    display: flex;
    align-items: center; /* Centra el nombre del archivo seleccionado */
}

.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--ui-surface-soft) !important;
    color: var(--text-dark) !important;
    border: none !important;
    border-right: 1px solid var(--ui-border) !important;
    
    /* Obligamos al botón a tener la misma altura que tu .form-control */
    height: 44px; 
    min-height: 100%;
    
    /* Márgenes para que se pegue al borde izquierdo y se separe del texto */
    margin-left: -0.75rem;
    margin-right: 0.75rem;
    margin-top: 0;
    margin-bottom: 0;
    
    /* Centrado interno del texto "Examinar..." */
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Efecto hover sutil al pasar el mouse por "Examinar..." */
.form-control[type="file"]:hover::file-selector-button,
.form-control[type="file"]:hover::-webkit-file-upload-button {
    background-color: var(--ui-surface-hover) !important;
}


/* ==========================================================================
   ESTILOS GENERALES Y LAYOUT BASE
   ========================================================================== */
.ventas-ui { 
    background: transparent; 
    color: var(--text-dark); 
    font-size: 14px; 
}

.ventas-ui .container-xl { 
    max-width: 100%; 
}

/* ==========================================================================
   TOPBAR Y ENCABEZADOS (HEADING)
   ========================================================================== */
.ventas-ui .topbar { 
    background: var(--ui-surface); 
    border-bottom: 1px solid var(--ui-border); 
    padding: 18px 24px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.ventas-ui .logo { 
    background: var(--brand-primary); 
    color: #fff; 
    border-radius: 10px; 
    width: 36px; 
    height: 36px; 
    display: grid; 
    place-items: center; 
    font-size: 20px; 
}

.ventas-ui .brand { 
    font-weight: 750; 
    font-size: 17px; 
}

.ventas-ui .topbar small { 
    margin-left: auto; 
    color: var(--ui-muted, #657782); 
}

.ventas-ui .heading { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    margin-bottom: 25px; 
}

.ventas-ui .eyebrow { 
    font-size: 11px; 
    letter-spacing: 1.8px; 
    font-weight: 750; 
    color: var(--brand-primary); 
    text-transform: uppercase; 
}

.ventas-ui h1 { 
    font-size: 30px; 
    letter-spacing: -1px; 
    margin: 5px 0; 
    color: var(--text-dark); 
}

.ventas-ui p { 
    margin: 0; 
    color: var(--text-dark); 
    opacity: 0.7; 
}

/* Demo badge (Cargando) */
.ventas-ui .demo { 
    border: 1px solid var(--brand-primary); 
    background: var(--ui-surface-soft); 
    color: var(--brand-primary); 
    padding: 7px 12px; 
    border-radius: 20px; 
    font-size: 12px; 
    white-space: nowrap; 
}

/* ==========================================================================
   TARJETAS DE ESTADÍSTICAS (STATS)
   ========================================================================== */
.ventas-ui .card { 
    border-color: var(--ui-border); 
    border-radius: 12px; 
    background: var(--ui-surface); 
    color: var(--text-dark); 
}

.ventas-ui .stat { 
    padding: 5px 7px; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Distribuye el espacio sobrante arriba y abajo */
}

.ventas-ui .stat-featured { 
    background: var(--ui-surface-hover); 
    border-color: var(--brand-primary); 
}

.ventas-ui .stat span { 
    display: block; 
    color: var(--text-dark); 
    opacity: 0.8; 
    font-size: 16px; 
    font-weight: 600; 
}

.ventas-ui .stat-featured span, 
.ventas-ui .stat-featured small { 
    color: var(--brand-primary); 
}

.ventas-ui .stat strong { 
    display: block; 
    font-size: 28px; 
    letter-spacing: -.7px; 
    margin: 8px 0 3px; 
    font-variant-numeric: tabular-nums; 
    color: var(--brand-primary); 
}

.ventas-ui .stat small { 
    font-size: 11px; 
}

.ventas-ui .stat:not(.stat-featured) small { 
    color: var(--text-dark); 
    opacity: 0.6; 
}

/* ==========================================================================
   FORMULARIOS Y BÚSQUEDA
   ========================================================================== */
.ventas-ui .form-label { 
    font-size: 11px; 
    font-weight: 700; 
    color: var(--text-dark); 
    opacity: 0.8; 
}

.ventas-ui .form-control, 
.ventas-ui .form-select { 
    font-size: 13px; 
    min-height: 42px; 
    background: var(--ui-input, var(--ui-surface-soft)); 
    color: var(--text-dark); 
    border-color: var(--ui-border); 
}

.ventas-ui .form-control:focus, 
.ventas-ui .form-select:focus { 
    border-color: var(--brand-primary); 
    background: var(--ui-input, var(--ui-surface-soft)); 
    color: var(--text-dark); 
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb, 8, 124, 114), 0.25); 
}

/* ==========================================================================
   TÍTULO DE LISTADO (DÍA Y CONTEO)
   ========================================================================== */
.ventas-ui .day { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 14px; 
    gap: 14px; 
}

.ventas-ui .day h2 { 
    font-size: 16px; 
    margin: 0; 
    color: var(--text-dark); 
}

.ventas-ui .day span { 
    font-size: 12px; 
    color: var(--text-dark); 
    opacity: 0.7; 
}

/* ==========================================================================
   TARJETAS DE VENTA INDIVIDUALES (.sale)
   ========================================================================== */
.ventas-ui .sale { 
    transition: box-shadow .2s, border-color .2s; 
    min-width: 0; 
    background: var(--ui-surface); 
}

.ventas-ui .sale:hover { 
    border-color: var(--brand-primary); 
    box-shadow: 0 6px 24px rgba(0,0,0,0.15); 
}

.ventas-ui .sale:has(.dropdown-menu.show) { 
    z-index: 5; 
    border-color: var(--brand-primary); 
}

.ventas-ui .customer { 
    display: flex; 
    gap: 13px; 
    align-items: center; 
    min-width: 0; 
}

.ventas-ui .avatar { 
    width: 42px; 
    height: 42px; 
    flex-shrink: 0; 
    border-radius: 11px; 
    background: var(--ui-surface-soft); 
    color: var(--brand-primary); 
    display: grid; 
    place-items: center; 
    font-weight: 700; 
    font-size: 13px; 
    border: 1px solid var(--brand-primary); 
}

.ventas-ui .name { 
    font-size: 15px; 
    margin: 0 0 3px; 
    font-weight: 700; 
    color: var(--text-dark); 
}

.ventas-ui .sub { 
    color: var(--text-dark); 
    opacity: 0.75; 
    font-size: 12px; 
}

.ventas-ui .sub b { 
    color: var(--text-dark); 
    font-weight: 600; 
    opacity: 1; 
}

.ventas-ui .badge { 
    font-size: 10px; 
    line-height: 1.4; 
    padding: 4px 8px; 
    white-space: normal; 
    text-align: left; 
    border: 1px solid var(--ui-border); 
}

.ventas-ui .amount strong { 
    display: block; 
    font-size: 22px; 
    font-variant-numeric: tabular-nums; 
    letter-spacing: -.5px; 
    color: var(--success-text, #4ade80); 
}

.ventas-ui .amount small { 
    font-size: 11px; 
    color: var(--text-dark); 
    opacity: 0.7; 
}

/* ==========================================================================
   MENÚS DESPLEGABLES (DROPDOWNS)
   ========================================================================== */
.ventas-ui .dropdown-toggle { 
    font-size: 12px; 
    padding: 9px 12px; 
    white-space: nowrap; 
    background: var(--ui-surface-soft); 
    color: var(--text-dark); 
    border-color: var(--ui-border); 
}

.ventas-ui .dropdown-toggle:hover { 
    background: var(--ui-surface-hover); 
    color: var(--text-dark); 
}

.ventas-ui .dropdown-menu { 
    min-width: 215px; 
    background: var(--ui-surface); 
    border-color: var(--ui-border); 
    border-radius: 9px; 
    padding: 6px; 
    box-shadow: 0 14px 35px rgba(0,0,0,0.4); 
}

.ventas-ui .dropdown-item { 
    border-radius: 5px; 
    padding: 10px 12px; 
    font-size: 12px; 
    color: var(--text-dark); 
}

.ventas-ui .dropdown-item:hover, 
.ventas-ui .dropdown-item:focus { 
    background: var(--ui-surface-hover); 
    color: var(--brand-primary); 
}

.ventas-ui .dropdown-item.text-secondary { 
    color: var(--text-dark) !important; 
    opacity: 0.6; 
}

/* ==========================================================================
   PANEL INTERNO DE DTE
   ========================================================================== */
.ventas-ui .dte { 
    background: var(--ui-surface-soft); 
    border: 1px solid var(--ui-border); 
    border-radius: 8px; 
}

.ventas-ui .dte-label { 
    display: block; 
    text-transform: uppercase; 
    letter-spacing: .7px; 
    font-size: 9px; 
    font-weight: 750; 
    color: var(--text-dark); 
    opacity: 0.7; 
    margin-bottom: 5px; 
}

.ventas-ui .dte code { 
    display: block; 
    font: 11px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; 
    overflow-wrap: anywhere; 
    color: var(--text-dark); 
    user-select: all; 
    font-weight: bold; 
}

.ventas-ui .dte .pending { 
    font: 12px/1.65 system-ui; 
    color: var(--warning-text, #fbbf24); 
    font-weight: normal; 
}

/* ==========================================================================
   FOOTER DE LA VENTA Y ESTADOS VACÍOS
   ========================================================================== */
.ventas-ui .sale-foot { 
    font-size: 11px; 
    color: var(--text-dark); 
    opacity: 0.75; 
    border-top: 1px solid var(--ui-border); 
}

.ventas-ui .items { 
    color: var(--text-dark); 
    opacity: 0.9; 
}

.ventas-ui .empty { 
    padding: 50px; 
    text-align: center; 
    background: var(--ui-surface); 
    border: 1px dashed var(--ui-border); 
    border-radius: 12px; 
    color: var(--text-dark); 
    opacity: 0.8; 
}

.ventas-ui .footer { 
    color: var(--text-dark); 
    opacity: 0.6; 
    font-size: 11px; 
}

.ventas-ui [hidden] { 
    display: none !important; 
}

/* ==========================================================================
   AJUSTES RESPONSIVOS (MÓVILES)
   ========================================================================== */
@media(max-width: 575.98px) {
    .ventas-ui .topbar { padding: 14px; }
    .ventas-ui .topbar small { font-size: 10px; }
    .ventas-ui .heading { align-items: start; }
    .ventas-ui h1 { font-size: 26px; }
    .ventas-ui .heading p { font-size: 12px; }
    .ventas-ui .demo { font-size: 10px; padding: 5px 8px; }
    .ventas-ui .stat { padding: 15px; }
    .ventas-ui .stat strong { font-size: 23px; }
    .ventas-ui .name { font-size: 13px; }
    .ventas-ui .avatar { width: 34px; height: 34px; }
    .ventas-ui .amount strong { font-size: 20px; }
    .ventas-ui .day h2 { font-size: 14px; }
    .ventas-ui .day span { font-size: 10px; }
}

/* ==========================================================================
   AJUSTES ESPECÍFICOS DEL VISOR (#visorVentas)
   ========================================================================== */
#visorVentas .sale .row { 
    min-width: 0; 
}

#visorVentas .dte [class*="col-"] { 
    min-width: 0; 
}

#visorVentas .venta-cargando { 
    opacity: .55; 
    pointer-events: none; 
}