body{
    background-color: #fff !important;

}
.super-contenedor{
    background-color: rgb(255, 255, 255) !important;
}
.panel-medio-principal{
    position: relative !important;
    background-color: rgb(245, 245, 245) !important;
    
}
.panel-medio{
    margin-top:  10px !important;
    background-color: rgb(245, 245, 245) !important;
}
/* .panel-medio .box-header{
    padding-left: 30px !important;
    font-size: 1.5em !important;
    border-bottom: 1px solid rgb(224, 224, 224);
} */
.panel-medio .box-header .box-title{
    font-size: 1.1em !important;
}
.custom-sidebar-container {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    width: 232px !important;
    transition: width 0.3s ease-in-out !important;
}
.custom-sidebar {
    padding: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content-wrapper {
    margin-left: 233px !important;
    transition: margin-left 0.3s ease-in-out !important;
}
.sidebar-collapse .content-wrapper {
    margin-left: 50px !important;
}
.dashboard-header, .panel-medio, .content-fluid {
    margin-left: 0px !important;
}
.modal-footer .btn-primary{
    background-image: linear-gradient(106.9deg, rgba(124, 12, 51) 60.3% , rgb(75, 75, 75) 10.9%) !important;
border: 0 !important;
}
.cabecera-m{
    background-image: linear-gradient(135deg, #2c3e50 0%, #0f172a 100%) !important;
}
.cabecera-m .logo{
    background-image: linear-gradient(135deg, #2c3e50 0%, #0f172a 100%) !important;
}

/* CUSTOM SIDEBAR-MENU STYLE (LIGHT THEME) */
.custom-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #ffffff;
    margin-bottom: 12px;
    transition: all 0.3s ease-in-out;
}
.profile-avatar-wrapper {
    position: relative;
    margin-bottom: 12px;
}
.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    object-fit: cover;
    transition: transform 0.3s ease;
}
.profile-avatar:hover {
    transform: scale(1.05);
}
.status-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.status-indicator.online {
    background-color: #10b981;
}
.profile-details {
    text-align: center;
    transition: opacity 0.2s ease;
}
.profile-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px 0;
    white-space: nowrap;
}
.profile-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #cbd5e1;
    color: #334155;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.custom-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 0 8px;
}
.custom-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom-menu-item {
    margin: 4px 0;
    border-radius: 8px;
    position: relative;
    transition: all 0.2s ease;
}
.custom-menu-link {
    display: flex;
    align-items: center;
    padding: 12px 22px 12px 14px;
    color: #111111 !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    position: relative;
    transition: all 0.2s ease;
}
.custom-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 18px;
    color: #333333 !important;
    transition: all 0.2s ease;
}
.custom-menu-label {
    margin-left: 10px;
    flex: 1;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.custom-menu-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-menu-arrow i {
    transition: transform 0.25s ease;
}
.custom-menu-item:not(.is-active) > .custom-menu-link:hover {
    background-color: #f1f5f9;
    color: #3b82f6 !important;
    padding-left: 18px;
}
.custom-menu-item:not(.is-active) > .custom-menu-link:hover .custom-menu-icon {
    color: #3b82f6 !important;
    transform: scale(1.1);
}
.custom-menu-item.is-active > .custom-menu-link {
    background-color: #e2e8f0;
    color: #3b82f6 !important;
    font-weight: 600;
}
.custom-menu-item.is-active > .custom-menu-link .custom-menu-icon {
    color: #3b82f6 !important;
}
.custom-menu-item.has-submenu.is-open > .custom-menu-link .custom-menu-arrow i {
    transform: rotate(90deg);
}
.custom-submenu {
    list-style: none;
    padding: 4px 0;
    margin: 0 0 4px 14px;
    display: none;
}
.custom-submenu li {
    margin: 2px 0;
}
.custom-submenu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #222222 !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.custom-submenu li a i {
    font-size: 13px;
    color: #444444 !important;
    width: 16px;
    text-align: center;
}
.custom-submenu li a:hover {
    background-color: #f1f5f9;
    color: #3b82f6 !important;
    padding-left: 16px;
}
.custom-submenu li a:hover i {
    color: #3b82f6 !important;
}
.custom-submenu li.is-active a {
    background-color: #e2e8f0;
    color: #3b82f6 !important;
    font-weight: 600;
}
.custom-submenu li.is-active a i {
    color: #3b82f6 !important;
}

/* Collapsed Sidebar overrides */

.sidebar-collapse .custom-profile-card {
    padding: 12px 4px !important;
}
.sidebar-collapse .profile-avatar {
    width: 36px !important;
    height: 36px !important;
    border-width: 2px !important;
}
.sidebar-collapse .status-indicator {
    width: 8px !important;
    height: 8px !important;
    bottom: 0 !important;
    right: 0 !important;
}
.sidebar-collapse .profile-details {
    display: none !important;
}
.sidebar-collapse .custom-menu-label,
.sidebar-collapse .custom-menu-arrow {
    display: none !important;
}
.sidebar-collapse .custom-menu-link {
    padding: 12px 0 !important;
    justify-content: center !important;
}
.sidebar-collapse .custom-menu-icon {
    width: auto !important;
    font-size: 18px !important;
}
.sidebar-collapse .custom-menu-item.has-submenu:hover .custom-submenu {
    display: block !important;
    position: absolute !important;
    left: 50px !important;
    top: 0 !important;
    width: 200px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    z-index: 1000 !important;
}
.sidebar-collapse .custom-menu-item.has-submenu:hover .custom-submenu li a {
    padding: 8px 12px !important;
}
.rounded{
    box-shadow: 1px 0 0 white !important;
    border-radius: 15px 15px !important;
    border-style: none;
}
.dashboard-header{
    background-color: rgb(255, 255, 255) !important;
    border-radius: 5px !important;
    margin-top: 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.dashboard-header button{
    background-image: linear-gradient( 105.3deg,  rgba(30,39,107,1) 21.8%, rgba(77,118,221,1) 100.2% );
    background-image: linear-gradient( 105.3deg,  rgb(69, 79, 160) 21.8%, rgb(118, 156, 253) 100.2% );
    background-image: linear-gradient(106.9deg, rgb(68, 68, 68) 60.9%,  rgba(124, 12, 51) 60.3%);
    outline: 0;
    border-style: none;
    border-radius: 8px;
    margin-left: 20px !important;
    font-size: 1.12em !important;
    color: rgb(255, 255, 255);
    padding: .6em .9em .6em .9em !important;
    /* border-right: 12px solid  rgb(252, 215, 7);  */
    text-transform: uppercase;
    
}
.dashboard-header button i{
    margin-right: 6px !important;
}
.boton-user{
    background-image: linear-gradient(106.9deg, rgb(59, 59, 59) 60.9%,  rgb(81, 81, 81) 60.3%);
/* background-image: linear-gradient( 105.3deg,  rgb(69, 79, 160) 21.8%, rgb(118, 156, 253) 100.2% ); */
/* border-radius: 2em; */
color: #fff !important;
outline: 0;
border-style: none;
width: 100% !important;
}
.icon-user{
    color: #fff !important;
    background-color: #fff !important;
    padding: 4px !important;
    border-radius: 2em !important;
    margin-right:  4px !important;
   
}
/* BOTON DE AGREGAR,  EDITAR, ETCX */
.btn-radius{
    position:  relative !important;   
    outline: 0 !important;
    background-color: #0093E9;
    background-image: linear-gradient( 105.3deg,  rgb(69, 79, 160) 21.8%, rgb(118, 156, 253) 100.2% ) !important;
    background-image: linear-gradient(106.9deg, rgba(124, 12, 51) 60.3% , rgb(80, 80, 80) 10.9%) !important;
    border-radius: 5px !important;
    font-size: .7em !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 550 !important;
    border-left:2em solid #f1ae1c !important;
	border-right: 0;
    border-style: none;
    
    
}

.btn-radius .glyphicon-plus-sign, .fa-plus-circle, .fa-plus-square{
    position: absolute !important;
    /* left: -25% !important;  */
    top: 25% !important;
    left: -20px;
    color: white;
    
}
.btn-radius:link{
    background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%) !important;
} 
.btn-radius:visited{
    background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%) !important;
} 
.btn-radius:hover{
    background-color: #21D4FD;
    background-image: linear-gradient( 105.3deg,  rgb(97, 109, 201) 21.8%, rgb(118, 156, 253) 100.2% ) !important;
    background-image: linear-gradient(106.9deg, rgba(124, 12, 51) 60.3% , rgb(80, 80, 80) 10.9%) !important;
} 
.btn-radius:active{
    background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%) !important;
}
/* FIN BOTON-RADIUS */

/* DATA TABLE */
.dataTables_length label, .dataTables_filter label{
    font-size: 1.1em;
    font-weight: bold !important;
}
.box-body .table-user{
    display: flex !important;
    flex-flow: row wrap !important;

}
.dataTables_length{
    position: absolute;

}
.dataTables_filter {
    position:  relative !important;
    float: right;
}

.table th {
    text-transform: uppercase;
    color: rgb(73, 73, 73);
    font-weight: 700 !important;
    font-size: 0.9em !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
}
.table td{
    border-style: none !important;
}
.input-group-search .btn.dropdown-toggle{
    border-style: none !important;
    border: 1px solid rgb(190, 190, 190) !important;
    border-radius: 5px !important;
    color: rgb(0, 0, 0) !important;
}

.table input[type=search]{   
    border-radius: 5px 0 0em 5px !important;
    font-size: 1.1em !important;
    font-weight: 500 !important; 
    outline:0;
    line-height: center !important;
    padding: .2em !important; 
    letter-spacing: 1px ;
    border: 1px solid rgb(190, 190, 190);
   padding-left: 10px !important;
   margin-left: 5px !important;
   height:35px;
   border-right: 0;
   
    
}
.table .icon-search{
    border-radius: 0em 5px 5px 0em !important;
    background-color: #21D4FD;
    background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
    height: 35px;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(190, 190, 190) !important;
}
/* FIN DATA TABLE */

/* PAGINACIÓN */
 /* .dataTables_paginate{
     position: relative !important;
     width  : 100% !important;
    text-align: center !important;
    background-color: red;
    margin: 0 auto;
} */
/*.dataTables_paginate > a{

    padding: 10px;
    background-color: #ffffff;
    border-radius: 1em;
    color: #000;
    border: 1px solid #dfdfdf !important;
    cursor: pointer;
}
.dataTables_paginate span > a{
    width: 20px !important;
    height: 20px !important;
    padding: 10px;
    background-color: #ffffff;
    border-radius: .5em;
    color: #000;
    border: 1px solid #dfdfdf !important;
    cursor: pointer;
}

.dataTables_paginate span > a:link{
    background-color: #ffffff;

}
.dataTables_paginate span > a:visited{
    background-color: #ff5050;

}
.dataTables_paginate span > a:hover{
    background-color: #f1f1f1;

}
.dataTables_paginate span > a:active{
    background-color: #ff4848;

} */
/* FIN PAGINACIÓN */
/* BOTONES WEB */

.btn-un {background-image: linear-gradient(to right, #e52d27 0%, #b31217  51%, #e52d27  100%)}
.btn-un {
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-un:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }
 
 .btn-dos {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%)}
 .btn-dos {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-dos:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
 
  .btn-tres {background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD  51%, #4CB8C4  100%)}
  .btn-tres {
     margin: 10px;
     padding: 15px 45px;
     text-align: center;
     text-transform: uppercase;
     transition: 0.5s;
     background-size: 200% auto;
     color: white;            
     box-shadow: 0 0 20px #eee;
     border-radius: 10px;
     display: block;
   }

   .btn-tres:hover {
     background-position: right center; /* change the direction of the change here */
     color: #fff;
     text-decoration: none;
   }
   
   .btn-cuatro {background-image: linear-gradient(to right, #fe8c00 0%, #f83600  51%, #fe8c00  100%)}
   .btn-cuatro {
      margin: 10px;
      padding: 15px 45px;
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;            
      box-shadow: 0 0 20px #eee;
      border-radius: 10px;
      display: block;
    }

    .btn-cuatro:hover {
      background-position: right center; /* change the direction of the change here */
      color: #fff;
      text-decoration: none;
    }
   
  
/* FIN BOTONES WEB */
.mg-menu{
    padding-left: 10px !important;
}
.bg-menu{
    color: rgb(255, 56, 56) !important;
}
/* FONDO DE PANTALLA LOGIN */
#fondP{
    position: fixed !important;
    top:0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: url('../img/bannerlog.jpg') no-repeat center;
    background-size: cover;
    overflow: hidden !important;
    z-index: -1;
}#fondP .fnd:before {
        content: "";
        background: rgba(0, 0, 0, 0.55);
        position: absolute;
        top: 0;
        min-height: 100%;
        left: 0;
        right: 0;
        z-index: -1;
        background-image: linear-gradient(148.25deg, #12156a 3%, #a4323a 89.85%);
        /* background-image: linear-gradient(148.25deg, #000000 3%, #290e10 89.85%); */
        opacity: .8;
       
}

.log-cont{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    
 

}
.log-cont .login-box, 
.log-cont .register-box{
    position: relative !important;
   margin: 0% auto !important;
   padding: 0% !important;
   top: 0 !important;

}

.logo-empresa{
    position: relative;
    width:  100%;
    height: auto !important;
   text-align: center;  
    flex-flow: column !important;
     justify-content: center !important;
     align-items: center !important;
    margin-bottom: 15px ;
}
.logo-empresa img{
    width: 170px !important;
}
.login-box-body p{
   font-weight: 500 !important;
   font-size: 1.3em
}
.login-box-body{
    background-color: white;
    border-radius: 10px !important;
    
}
.login-box-body form input{
    border-radius: 15px !important;
    outline: 0;
    border-style: none;
    padding: 18px !important;
    font-size: 1.3em !important;
    border-bottom: .5px solid rgb(170, 170, 170);
    color: rgb(75, 75, 75) !important;
    letter-spacing: 2px ;
}
.login-box-body form .content-fluid{
    display: flex !important;
    justify-content: center !important;
}
.login-box-body form button{
    border-radius: 5px !important;
    width: 250px !important;
    text-transform: uppercase;
    font-weight:  600;
    background-color: #21D4FD;
    background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
    background-image: linear-gradient(106.9deg, rgb(75, 75, 75) 60.9%,  rgba(124, 12, 51) 60.3%);
    outline: 0;
    border-style: none;
    color: rgb(255, 255, 255);
    padding: 12px;
    margin-top: 12px  !important;
    font-size: 1.2em !important;

}
/* RECAPTCHA */


.g-recaptcha{
    position: relative !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;    
    transform:scale(0.9);
    -webkit-transform:scale(0.9);
    margin: 5px !important;
    border-radius: 15px !important;
}


/* LINK RECUPRERAR CONTRASEÑA */
.link-recuperar{
    padding-top: 10px;
    width: 100%;
    text-align:center;
}
/* VERIFICA SUNAT LOGO */
.verifica-sunat{
    padding-top:  10px;
    width: 100%;
    text-align: center;
    
}
.verifica-sunat img{
    width: 120px;
    text-align: center;

}
/* RESULT LOGIN DIV */
#resultLogin{
    width: 100%;
    text-align: center;
}
.pagination>li>a, .pagination>li>span { 
    border-radius: 5px !important;margin: 0 2px;
}
/* RELOAD */
#reload, #reloadFull2{
    position: absolute;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    display:flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-content: center !important;
    background-color: rgba(255, 9, 9, 0) !important;
    z-index: inherit !important;
}

#reload img{
width: 80px !important;
height: 80px !important;
background-color: rgba(80, 27, 27,0);
border-radius: 100% !important;
}
.btn-menup{
    height: 50px !important;
    background-color: transparent !important;
    margin-left: 10px !important;
    outline: 0 !important;
    border-style: none !important;
}
/* #reload{
    position: relative;
    width: 100%;
  text-align: center;
    background-color: rgba(255, 9, 9, 0) !important;
}
#reload img{
width: 50px;
height: 50px;
} */
.swal2-modal{
    width: 500px !important ;
    height: auto !important ;
    font-size: 1em !important;
    border-radius: 15px !important;
}
.btns-dash {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    gap: 8px !important;
    flex-flow: row wrap !important;
    justify-content: flex-end !important;
    margin: 0px !important;
}
#contenedor-menur {
    position: relative !important;
    display: flex !important;
    gap: 8px !important;
    flex-flow: row wrap !important;
    justify-content: flex-end !important;
    width: 100% !important;
}
#contenedor-menur .btn-a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    text-transform: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    float: none !important;
    margin: 0 !important;
}
#contenedor-menur .btn-a {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
#contenedor-menur .btn-a:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
#contenedor-menur .btn-a:active,
#contenedor-menur .btn-a:focus {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
#contenedor-menur .btn-a i {
    margin-right: 6px !important;
    font-size: 13px !important;
    color: #64748b !important;
}
#contenedor-menur .btn-a:hover i {
    color: #334155 !important;
}
.dashboard-title-container {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 40px !important;
}
.dashboard-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.dashboard-title i {
    color: #4f46e5 !important;
}

.menu-user li a{
    padding-top:  8px;
    padding-bottom: 8px;
    
}
.btns-dash .btn-menur{
    display: none !important;
    border-style:  none !important;
   outline: 0 !important;
    padding: 0 !important;
    padding: 4px !important;
    background: rgb(255, 255, 255) !important;
    color: black !important;
}
#checkm{
    display: none !important;
}

@media (max-width: 767px){
.skin-blue .main-header .navbar .dropdown-menu li a {
    color: #666666 !important;
}
.contenedor-widget{
    justify-content: space-between;

}
.btns-dash{
    position:  relative !important;
    display: flex !important;
    justify-content: center !important;
}
.btns-dash .btn-menur{
    display: inline !important;
}
#contenedor-menur{
position : absolute !important;
  width: 100% !important;
  top: 0px;
  left: 0;
  transform: translateX(-102%);
  transition: all 0.3s;
}
#contenedor-menur a{
  width: 100% !important;
}
#checkm:checked~ #contenedor-menur{
    position: relative !important;
    transform: translateX(0%);
}
}
/* BOTÓNES MODALES FOOTER  */
.modal-footer button{
    outline: 0 !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.reload-all{
    position: fixed;
    width:  100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.2);
}
.reload-all img{
    border-radius: 100%;
}
.table-responsive{
    overflow-x: inherit;
}

/* WIDGRTS */
/* WIDGRTS */
.contenedor-widget{
    position:  relative;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    
}
.widgets-ini {
    margin-top: 0px !important;
}
.contenedor-widget {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}
.contenedor-widget > div {
    flex: 1 1 220px !important;
    max-width: calc(25% - 12px) !important; /* Spacious 4-per-row layout, capped so wrapped cards don't stretch */
    padding: 0 !important;
}
@media (max-width: 992px) {
    .contenedor-widget > div {
        max-width: calc(50% - 8px) !important; /* 2 cards per row on tablets */
    }
}
@media (max-width: 576px) {
    .contenedor-widget > div {
        max-width: 100% !important; /* 1 card per row on mobile */
    }
}
.contenedor-widget .info-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-radius: 24px 4px !important; /* Asymmetric leaf shape */
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
    min-height: 90px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important; /* Clipped watermarks */
}

/* Watermark styles */
.contenedor-widget .info-box::after {
    position: absolute !important;
    right: -10px !important;
    bottom: -15px !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 72px !important;
    line-height: 1 !important;
    opacity: 0.05 !important;
    transition: all 0.4s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.contenedor-widget .info-box:hover::after {
    transform: scale(1.2) rotate(-12deg) !important;
    opacity: 0.12 !important;
}

/* Unique backgrounds, borders, colors and hover glowing effects */
.contenedor-widget > div:nth-child(1) .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%) !important;
    border-left: 5px solid #6366f1 !important;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.05), 0 2px 4px -1px rgba(99, 102, 241, 0.03) !important;
}
.contenedor-widget > div:nth-child(1) .info-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 20px -5px rgba(99, 102, 241, 0.22), 0 4px 6px -2px rgba(99, 102, 241, 0.1) !important;
}
.contenedor-widget > div:nth-child(1) .info-box::after { content: "\f571" !important; color: #6366f1 !important; }
.contenedor-widget > div:nth-child(1) .info-box-text { color: #4338ca !important; }
.contenedor-widget > div:nth-child(1) .info-box-number { color: #1e1b4b !important; }

.contenedor-widget > div:nth-child(2) .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
    border-left: 5px solid #3b82f6 !important;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.05), 0 2px 4px -1px rgba(59, 130, 246, 0.03) !important;
}
.contenedor-widget > div:nth-child(2) .info-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 20px -5px rgba(59, 130, 246, 0.22), 0 4px 6px -2px rgba(59, 130, 246, 0.1) !important;
}
.contenedor-widget > div:nth-child(2) .info-box::after { content: "\f543" !important; color: #3b82f6 !important; }
.contenedor-widget > div:nth-child(2) .info-box-text { color: #1d4ed8 !important; }
.contenedor-widget > div:nth-child(2) .info-box-number { color: #172554 !important; }

.contenedor-widget > div:nth-child(3) .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
    border-left: 5px solid #0ea5e9 !important;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.05), 0 2px 4px -1px rgba(14, 165, 233, 0.03) !important;
}
.contenedor-widget > div:nth-child(3) .info-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 20px -5px rgba(14, 165, 233, 0.22), 0 4px 6px -2px rgba(14, 165, 233, 0.1) !important;
}
.contenedor-widget > div:nth-child(3) .info-box::after { content: "\f46d" !important; color: #0ea5e9 !important; }
.contenedor-widget > div:nth-child(3) .info-box-text { color: #0369a1 !important; }
.contenedor-widget > div:nth-child(3) .info-box-number { color: #0c4a6e !important; }

.contenedor-widget > div:nth-child(4) .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%) !important;
    border-left: 5px solid #ec4899 !important;
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.05), 0 2px 4px -1px rgba(236, 72, 153, 0.03) !important;
}
.contenedor-widget > div:nth-child(4) .info-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 20px -5px rgba(236, 72, 153, 0.22), 0 4px 6px -2px rgba(236, 72, 153, 0.1) !important;
}
.contenedor-widget > div:nth-child(4) .info-box::after { content: "\f2ea" !important; color: #ec4899 !important; }
.contenedor-widget > div:nth-child(4) .info-box-text { color: #be185d !important; }
.contenedor-widget > div:nth-child(4) .info-box-number { color: #4c0519 !important; }

.contenedor-widget > div:nth-child(5) .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%) !important;
    border-left: 5px solid #f43f5e !important;
    box-shadow: 0 4px 6px -1px rgba(244, 63, 94, 0.05), 0 2px 4px -1px rgba(244, 63, 94, 0.03) !important;
}
.contenedor-widget > div:nth-child(5) .info-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 20px -5px rgba(244, 63, 94, 0.22), 0 4px 6px -2px rgba(244, 63, 94, 0.1) !important;
}
.contenedor-widget > div:nth-child(5) .info-box::after { content: "\f573" !important; color: #f43f5e !important; }
.contenedor-widget > div:nth-child(5) .info-box-text { color: #be123c !important; }
.contenedor-widget > div:nth-child(5) .info-box-number { color: #4c051e !important; }

.contenedor-widget > div:nth-child(6) .info-box {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
    border-left: 5px solid #10b981 !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.05), 0 2px 4px -1px rgba(16, 185, 129, 0.03) !important;
}
.contenedor-widget > div:nth-child(6) .info-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 20px -5px rgba(16, 185, 129, 0.22), 0 4px 6px -2px rgba(16, 185, 129, 0.1) !important;
}
.contenedor-widget > div:nth-child(6) .info-box::after { content: "\f555" !important; color: #10b981 !important; }
.contenedor-widget > div:nth-child(6) .info-box-text { color: #047857 !important; }
.contenedor-widget > div:nth-child(6) .info-box-number { color: #064e3b !important; }

.contenedor-widget .info-box-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 12px !important;
    margin-right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease !important;
}
.contenedor-widget .info-box:hover .info-box-icon {
    transform: scale(1.1) rotate(5deg) !important;
}
.contenedor-widget .info-box-icon i {
    color: #ffffff !important;
    font-size: 24px !important;
}
.contenedor-widget .info-box-content {
    margin-left: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.contenedor-widget .info-box-text {
    font-size: clamp(9px, 0.75vw, 11px) !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.contenedor-widget .info-box-number {
    font-size: clamp(14px, 1.2vw, 19px) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Gradients for icon containers */
.contenedor-widget .bg-fa {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}
.contenedor-widget .bg-bo {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}
.contenedor-widget .bg-nv {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
}
.contenedor-widget .bg-nc {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
}
.contenedor-widget .bg-nd {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
}
.contenedor-widget .bg-tn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* Premium Chart and Box Cards */
.panel-medio .box {
    border-top: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
}
/* .panel-medio .box-header {
    background-color: #ffffff !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
} */
.panel-medio .box-title {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.75px !important;
}
.panel-medio .box-body {
    padding-top: 0px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
}
.btn-calendar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
}
.btn-calendar:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
.contenedor_icbper{
    width : 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    align-content: center;

}
/* MODO PRODUCCION BOTÓN */
.modo-contenedor{
    width: 180px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin: 0px;
}
.modo-contenedor-email{
    width: 100px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin: 0px;
}
.modo-contenedor-icbper{
    width: 100px;
    display: flex;
    flex-flow: row;
   justify-content: center;
    margin: 0px !important;
}
.modo-contenedor-unidad{
    width: 100px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin: 0px;
}
.modo-contenedor input,
.modo-contenedor-email input,
.modo-contenedor-icbper input,
.modo-contenedor-unidad input{
display: none !important;
}
.modo-contenedor label{
    font-size:  .6em !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    padding: 8px;
    margin: 0px;
    width: 90px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border : 1px solid rgb(240, 240, 240);
}
.modo-contenedor-email label{
    font-size:  .8em !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    padding: 5px;
    margin: 0px;
    width: 90px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border : 1px solid rgb(240, 240, 240);
}
.modo-contenedor-icbper label{
    font-size:  .8em !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    padding: 5px;
    margin: 0px;
    width: 90px;
    height: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border : 1px solid rgb(240, 240, 240);
}
.modo-contenedor-unidad label{
    font-size:  .8em !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    padding: 5px;
    margin: 0px;
    width: 90px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border : 1px solid rgb(240, 240, 240);
}
#emailtext{
    font-size: 1em !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.modo-contenedor #sim, 
.modo-contenedor-email #sie,
.modo-contenedor-icbper .s,
.modo-contenedor-unidad .siu{
    /* background-color: rgb(93, 170, 99); */
    border-radius: 15px 0px 0px 15px;
}
.modo-contenedor #nom,
.modo-contenedor-email #noe,
.modo-contenedor-icbper .n,
.modo-contenedor-unidad .nou{
    /* background-color: rgb(209, 209, 209);  */
    border-radius: 0px 15px 15px 0px;
}
.btn-modo-sistema{
padding: 2px;
border-radius: 0px;
padding-left: 15px;
padding-right: 15px;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 1px;
}
.prod{
    background-color: rgb(78, 110, 255) !important;
    border-radius: 15px 0px 0px 15px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.emailsi{
    background-color: rgb(78, 110, 255) !important;
    border-radius: 15px 0px 0px 15px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.emailno{
    background-color: rgb(253, 89, 89) !important;
    border-radius: 0px 15px 15px 0px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.icbsi{
    background-color: rgb(78, 110, 255) !important;
    border-radius: 15px 0px 0px 15px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.icbno{
    background-color: rgb(253, 89, 89) !important;
    border-radius: 0px 15px 15px 0px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.unidadsi{
    background-color: rgb(78, 110, 255) !important;
    border-radius: 15px 0px 0px 15px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.unidadno{
    background-color: rgb(253, 89, 89) !important;
    border-radius: 0px 15px 15px 0px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.btnprod{ 
    color: white !important;
    outline: 0 !important;
    border-style: none !important;
    background-image: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important;
}
.prueba{
    background-color: rgb(253, 89, 89) !important;
    border-radius: 15px 0px 0px 15px;
    border : 1px solid rgb(240, 240, 240) !important;
}
.btnprueba{
    color: white;
    outline: 0 !important;
    border-style: none !important;
    background-color: rgb(253, 89, 89) !important;
}
.alterno{
    background-color: rgb(243, 243, 243) !important; 
    border-radius: 0px 15px 15px 0px;
    color: #000 !important;
    border : 1px solid rgb(240, 240, 240) !important;
}
.alterno2{
    background-color: rgb(228, 228, 228) !important; 
    border-radius: 0px 15px 15px 0px;
    color: #000 !important;
    border : 1px solid rgb(240, 240, 240) !important;
}
/* FIN BOTONES MODO| */

/* DIV COMPROBAR CONEXIÓN A INTERNET */
.connection{
    position: fixed;
    bottom: 0%;
    right: 0%;
    padding: 10px;
    background-color: #f0f0f0;
    z-index: 10000;
    color: #000;
    border-radius: 0px 15px 15px 0px;
   
}
.contenedor-selva{
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: row;
    background-color: rgb(253, 253, 253);
    justify-content: center;
    /* border: 1px solid rgba(98, 101, 255, 0.555); */
    padding: 10px;
    border-radius: 15px;

}

/* PREMIUM DETALLES PRODUCTO EXPANSION (LIGHT THEME) */
.tablaVentas .super-contenedor-precios {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #3b82f6 !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none;
    flex-flow: row wrap !important;
    overflow: hidden !important;
}

.tablaVentas .desc-productos {
    position: relative !important;
    width: 100% !important;
    text-align: left !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    padding: 14px 24px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.tablaVentas .desc-productos h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

.tablaVentas .contenedor-precios {
    position: relative !important;
    display: flex !important;
    flex-flow: column !important;
    padding: 20px 24px !important;
    width: 50% !important;
    box-sizing: border-box !important;
}

.tablaVentas .contenedor-precios label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
    margin-top: 14px !important;
    margin-left: 2px !important;
}

.tablaVentas .contenedor-precios .pre-css {
    outline: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.tablaVentas .contenedor-precios .pre-css:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.tablaVentas .contenedor-precios select.pre-css {
    background-color: #ffffff !important;
    cursor: pointer !important;
}

.tablaVentas .contenedor-precios input[readonly].pre-css {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* Styled ICBPER Switch pill */
.tablaVentas .contenedor_icbper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.tablaVentas .modo-contenedor-icbper {
    display: inline-flex !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    background-color: #f1f5f9 !important;
    padding: 3px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

.tablaVentas .modo-contenedor-icbper label {
    margin: 0 !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    border: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tablaVentas .modo-contenedor-icbper .icbsi {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-radius: 16px !important;
}

.tablaVentas .modo-contenedor-icbper .icbno {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 16px !important;
}

.tablaVentas .modo-contenedor-icbper .alterno {
    background-color: transparent !important;
    color: #94a3b8 !important;
}

.tablaVentas .icbper-input {
    flex: 1 !important;
}

/* Action buttons */
.tablaVentas .btn-grupos {
    width: 100% !important;
    display: flex !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    margin-top: 0 !important;
    justify-content: flex-end !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

.tablaVentas .btn-grupos button {
    height: 38px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    border: 0 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.tablaVentas .btn-grupos .closeModalProductos {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.tablaVentas .btn-grupos .closeModalProductos:hover {
    background-color: #e2e8f0 !important;
}

.tablaVentas .btn-grupos .agregarProducto {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

.tablaVentas .btn-grupos .agregarProducto:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3) !important;
}

.tablaVentas .number{
    outline: 0 !important;
    border-style: none !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: 80px;
    height: 38px !important;
    box-sizing: border-box !important;
    text-align: center;
}
.tablaVentas .btn-prod{
    width: 10px !important;
}

@media (max-width: 768px) {
    .tablaVentas .contenedor-precios {
        width: 100% !important;
        padding: 16px 20px !important;
    }
    }
.tabla-items tbody tr td{
    text-align: center;
    font-size: 1.1em;
    padding: 2px !important;
    background-color: rgb(255, 255, 255) !important;
 }

 .tbl-t th{
    font-weight: 700 !important;
    font-size: 0.9em !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
}
/* ESTADOS SUNAT============ */

.contenedor-estados-sunat{
    display: flex;
    flex-flow: row wrap;
    background-color: rgb(255, 255, 255);

}
.contenedor-estados-sunat div{
    position: relative;
    padding: 2px;
    padding-left: 23px;
    margin : 5px;

    
}
.contenedor-estados-sunat label{
    position: absolute;
    top: 2px;
    left: 0;
    padding: 5px;
    width: 1.3em;
    height: 1.3em;
   
}
.contenedor-estados-sunat .sunat-estado{
  font-weight: 600;
}
.contenedor-estados-sunat .estadosunat{
     background-image: url(../img/sunat_logo.png) !important;
  background-size: 1.3em 1.3em !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
 

}
.contenedor-estados-sunat .aceptado{
     background-image: url(../img/success.png) !important;
  background-size: 1.3em 1.3em !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

}
.contenedor-estados-sunat .rechazado{
     background-image: url(../img/svg/rechazo.svg) !important;
  background-size: 1.3em 1.3em !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

}
.contenedor-estados-sunat .baja{
     background-image: url(../img/svg/error.svg) !important;
  background-size: 1.3em 1.3em !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

}
.contenedor-estados-sunat .noenviado{
     background-image: url(../img/svg/get_cdr.svg) !important;
  background-size: 1.3em 1.3em !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

}

/* SWITCH TOGGLE MODERNO */
.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.switch-custom {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0;
}

.switch-custom input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 22px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.switch-custom input:checked + .switch-slider {
  background-color: #2196F3;
}

.switch-custom input:checked + .switch-slider:before {
  transform: translateX(22px);
}

.switch-label {
  font-weight: bold;
  font-size: 13px;
  color: #333;
  user-select: none;
  cursor: pointer;
}

/* SWITCH TOGGLE MODERNO */
.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.switch-custom {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0;
}

.switch-custom input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 22px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.switch-custom input:checked + .switch-slider {
  background-color: #2196F3;
}

.switch-custom input:checked + .switch-slider:before {
  transform: translateX(22px);
}

.switch-label {
  font-weight: bold;
  font-size: 13px;
  color: #333;
  user-select: none;
  cursor: pointer;
}

/* Custom Thin Scrollbar Styles (Light Theme) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Reset margins and paddings for nested boxes to prevent double-boxing in forms */
.panel-medio .box .box {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
.panel-medio .box .box .box-body {
    padding: 0 !important;
}

/* WIDGETS REDESIGNED (NEON GLASSMORPHISM - LIGHT THEME) */
.widgets-ini {
    margin-top: 0px !important;
}

/* Container using Bootstrap columns layout */
.contenedor-widget {
    margin-top: -10px !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    margin-bottom: 25px !important;
    display: block !important;
}
.contenedor-widget > div {
    padding: 10px !important;
}

/* Base wrapper for cards with perspective */
.premium-widget-wrapper {
    position: relative !important;
    z-index: 2 !important;
}

/* Glassmorphism Card style for Light Theme (Solid-contrast) */
.premium-widget-card {
    position: relative !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 2 !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 16px -6px rgba(0, 0, 0, 0.03) !important;
}

/* Background glowing blur sphere */
.premium-widget-card .glow-orb {
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    filter: blur(35px) !important;
    opacity: 0.12 !important;
    transition: all 0.5s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Hover effects */
.premium-widget-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
}

.premium-widget-card:hover .glow-orb {
    opacity: 0.38 !important;
    transform: scale(1.5) translate(-15px, 15px) !important;
}

/* Card Content Layout */
.card-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    z-index: 3 !important;
}

/* Sleek Icon Box */
.card-icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}

.premium-widget-card:hover .card-icon-container {
    transform: rotate(6deg) scale(1.08) !important;
}

.card-icon-container i {
    font-size: 20px !important;
}

/* Badge styling */
.card-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: #475569 !important;
    transition: all 0.3s ease !important;
}

/* Value display */
.card-value-display {
    margin-bottom: 12px !important;
    z-index: 3 !important;
}

.card-value {
    font-size: clamp(20px, 1.6vw, 24px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: #1e293b !important;
    margin: 0 !important;
}

/* Footer & labels */
.card-footer-info {
    display: flex !important;
    flex-direction: column !important;
    z-index: 3 !important;
}

.card-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.75px !important;
    margin-bottom: 6px !important;
}

/* Mini progress line */
.card-bar-indicator {
    height: 3px !important;
    width: 32px !important;
    border-radius: 2px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.premium-widget-card:hover .card-bar-indicator {
    width: 100% !important;
}

/* COLOR SCHEMES */
/* Indigo Accent (Facturas) */
.widget-factura .glow-orb { background: #6366f1 !important; }
.widget-factura .card-icon-container {
    color: #4f46e5 !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    background: rgba(99, 102, 241, 0.04) !important;
}
.widget-factura .card-badge {
    color: #4f46e5 !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}
.widget-factura:hover {
    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.08), 0 0 1px 1px rgba(99, 102, 241, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.widget-factura:hover .card-badge {
    background: rgba(99, 102, 241, 0.1) !important;
}
.widget-factura .card-bar-indicator { background: #6366f1 !important; box-shadow: 0 0 8px #6366f1 !important; }

/* Blue Accent (Boletas) */
.widget-boleta .glow-orb { background: #3b82f6 !important; }
.widget-boleta .card-icon-container {
    color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    background: rgba(59, 130, 246, 0.04) !important;
}
.widget-boleta .card-badge {
    color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}
.widget-boleta:hover {
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.08), 0 0 1px 1px rgba(59, 130, 246, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.widget-boleta:hover .card-badge {
    background: rgba(59, 130, 246, 0.1) !important;
}
.widget-boleta .card-bar-indicator { background: #3b82f6 !important; box-shadow: 0 0 8px #3b82f6 !important; }

/* Sky Accent (Notas de Venta) */
.widget-notaventa .glow-orb { background: #0ea5e9 !important; }
.widget-notaventa .card-icon-container {
    color: #0284c7 !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
    background: rgba(14, 165, 233, 0.04) !important;
}
.widget-notaventa .card-badge {
    color: #0284c7 !important;
    border-color: rgba(14, 165, 233, 0.15) !important;
}
.widget-notaventa:hover {
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.08), 0 0 1px 1px rgba(14, 165, 233, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.widget-notaventa:hover .card-badge {
    background: rgba(14, 165, 233, 0.1) !important;
}
.widget-notaventa .card-bar-indicator { background: #0ea5e9 !important; box-shadow: 0 0 8px #0ea5e9 !important; }

/* Pink Accent (Notas de Crédito) */
.widget-notacredito .glow-orb { background: #ec4899 !important; }
.widget-notacredito .card-icon-container {
    color: #db2777 !important;
    border-color: rgba(236, 72, 153, 0.25) !important;
    background: rgba(236, 72, 153, 0.04) !important;
}
.widget-notacredito .card-badge {
    color: #db2777 !important;
    border-color: rgba(236, 72, 153, 0.15) !important;
}
.widget-notacredito:hover {
    box-shadow: 0 15px 30px rgba(236, 72, 153, 0.08), 0 0 1px 1px rgba(236, 72, 153, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.widget-notacredito:hover .card-badge {
    background: rgba(236, 72, 153, 0.1) !important;
}
.widget-notacredito .card-bar-indicator { background: #ec4899 !important; box-shadow: 0 0 8px #ec4899 !important; }

/* Rose Accent (Notas de Débito) */
.widget-notadebito .glow-orb { background: #f43f5e !important; }
.widget-notadebito .card-icon-container {
    color: #e11d48 !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
    background: rgba(244, 63, 94, 0.04) !important;
}
.widget-notadebito .card-badge {
    color: #e11d48 !important;
    border-color: rgba(244, 63, 94, 0.15) !important;
}
.widget-notadebito:hover {
    box-shadow: 0 15px 30px rgba(244, 63, 94, 0.08), 0 0 1px 1px rgba(244, 63, 94, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.widget-notadebito:hover .card-badge {
    background: rgba(244, 63, 94, 0.1) !important;
}
.widget-notadebito .card-bar-indicator { background: #f43f5e !important; box-shadow: 0 0 8px #f43f5e !important; }

/* Emerald Accent (Total Neto) */
.widget-totalneto .glow-orb { background: #10b981 !important; }
.widget-totalneto .card-icon-container {
    color: #059669 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    background: rgba(16, 185, 129, 0.04) !important;
}
.widget-totalneto .card-badge {
    color: #059669 !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}
.widget-totalneto:hover {
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.08), 0 0 1px 1px rgba(16, 185, 129, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}
.widget-totalneto:hover .card-badge {
    background: rgba(16, 185, 129, 0.1) !important;
}
.widget-totalneto .card-bar-indicator { background: #10b981 !important; box-shadow: 0 0 8px #10b981 !important; }

/* ==========================================================================
   PREMIUM PRODUCT FILTERS AND ADD PRODUCT TABLE (LIGHT THEME)
   ========================================================================== */
.input-group-premium {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}
.input-group-premium:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.input-group-premium-addon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    color: #64748b;
    background-color: #f8fafc;
    border-right: 1px solid #cbd5e1;
}
.form-control-premium {
    flex: 1;
    display: block;
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    background-color: transparent;
    border: none;
    outline: none;
}
.form-control-premium::placeholder {
    color: #94a3b8;
}

.tablaVentas.tabla-add {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    border: none !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.tablaVentas.tabla-add thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: center !important;
}
.tablaVentas.tabla-add thead th:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.tablaVentas.tabla-add thead th:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.tablaVentas.tabla-add tbody tr.contenedor-items {
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
.tablaVentas.tabla-add tbody tr.contenedor-items:hover {
    background-color: #f8fafc !important;
    transform: translateY(-0.5px) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04) !important;
}
.tablaVentas.tabla-add tbody tr td {
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    text-align: center !important;
}
.tablaVentas.tabla-add .cantidad-stock {
    width: 70px !important;
    height: 32px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-align: center !important;
    padding: 2px !important;
}
.tablaVentas.tabla-add .cantidad-stock:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
.tablaVentas.tabla-add .agregarProducto {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
}
.tablaVentas.tabla-add .agregarProducto:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}
.tablaVentas.tabla-add .vermasProductos {
    background-color: #f1f5f9 !important;
    border: none !important;
    color: #475569 !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.tablaVentas.tabla-add .vermasProductos:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    transform: scale(1.05) !important;
}

.btn-calculadora-mora {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.3s ease !important;
}
.btn-calculadora-mora:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.25) !important;
}

/* ==========================================================================
   SWEETALERT2 CUSTOM PREMIUM DESIGN OVERRIDES
   ========================================================================== */

/* Modern Backdrop with blur effect (Modal ONLY) */
body .swal2-container.swal2-backdrop-show {
    backdrop-filter: blur(5px) !important;
    background-color: rgba(15, 23, 42, 0.45) !important;
}

body .swal2-container {
    transition: all 0.3s ease-in-out;
    z-index: 999999 !important; /* Ensure it floats above all Bootstrap modals and menus */
}

/* Elegant & Minimalist Popup Container (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    font-family: 'Source Sans Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .swal2-popup:not(.swal2-toast).swal2-show {
    animation: swal2-show-custom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes swal2-show-custom {
    0% {
        transform: scale(0.9) translateY(10px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Modernized Title Style (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

/* Modernized Content/HTML Container Style (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-html-container,
body .swal2-popup:not(.swal2-toast) .swal2-content {
    font-size: 14.5px !important;
    color: #475569 !important;
    font-weight: 450 !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}

/* Sleek Icon Styling (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-icon {
    border-width: 3px !important;
    transform: scale(0.85) !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    transition: transform 0.3s ease;
}

body .swal2-popup:not(.swal2-toast) .swal2-icon:hover {
    transform: scale(0.92) !important;
}

/* Color and border overrides for specific icons (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #10b981 !important;
}
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring {
    border: 3px solid rgba(16, 185, 129, 0.2) !important;
}
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-left,
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-right,
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix {
    background-color: #ffffff !important;
}

body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: #ef4444 !important;
}

body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

body .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question {
    border-color: #64748b !important;
    color: #64748b !important;
}

/* Action Buttons Area (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-actions {
    margin-top: 15px !important;
    gap: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Common button styles */
body .swal2-actions .swal2-styled {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Primary Confirm Button (Gradient Dark/Blue, matching modern styles) */
body .swal2-actions .swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2) !important;
}

body .swal2-actions .swal2-styled.swal2-confirm:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3) !important;
    filter: brightness(1.05) !important;
}

body .swal2-actions .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
}

/* Secondary Cancel Button */
body .swal2-actions .swal2-styled.swal2-cancel {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

body .swal2-actions .swal2-styled.swal2-cancel:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    transform: translateY(-1px) !important;
}

body .swal2-actions .swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.4) !important;
}

/* Deny Button (Crimson Red / Burgundy Accent) */
body .swal2-actions .swal2-styled.swal2-deny {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2) !important;
}

body .swal2-actions .swal2-styled.swal2-deny:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.3) !important;
}

/* Close Button (top corner) (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-close {
    font-size: 26px !important;
    color: #94a3b8 !important;
    transition: color 0.15s ease !important;
    outline: none !important;
}

body .swal2-popup:not(.swal2-toast) .swal2-close:hover {
    color: #475569 !important;
}

/* Form inputs in Swals (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-input, 
body .swal2-popup:not(.swal2-toast) .swal2-file, 
body .swal2-popup:not(.swal2-toast) .swal2-textarea, 
body .swal2-popup:not(.swal2-toast) .swal2-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

body .swal2-popup:not(.swal2-toast) .swal2-input:focus, 
body .swal2-popup:not(.swal2-toast) .swal2-file:focus, 
body .swal2-popup:not(.swal2-toast) .swal2-textarea:focus, 
body .swal2-popup:not(.swal2-toast) .swal2-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* Validation message (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-validation-message {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    margin-top: 10px !important;
}

/* Loader style (Modal ONLY) */
body .swal2-popup:not(.swal2-toast) .swal2-loader {
    border-color: #2563eb transparent #2563eb transparent !important;
}


/* ==========================================================================
   SWEETALERT2 CUSTOM TOAST STYLING OVERRIDES (CLARO)
   ========================================================================== */
body .swal2-popup.swal2-toast {
    background-color: #ffffff !important;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: 360px !important;
    align-items: center !important;
    display: flex !important;
}

body .swal2-popup.swal2-toast .swal2-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}
body .swal2-popup.swal2-toast .swal2-title h5 {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

body .swal2-popup.swal2-toast .swal2-html-container {
    font-size: 12.5px !important;
    color: #475569 !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}
body .swal2-popup.swal2-toast .swal2-html-container div {
    font-size: 12.5px !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Toast Icon */
body .swal2-popup.swal2-toast .swal2-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 10px 0 0 !important;
    border-width: 2px !important;
    transform: none !important;
}
body .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
    border: 2px solid rgba(16, 185, 129, 0.2) !important;
}
body .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
    height: 2px !important;
    background-color: #10b981 !important;
}
body .swal2-popup.swal2-toast .swal2-success .swal2-success-line-tip {
    width: 6px !important;
    left: 4px !important;
    top: 11px !important;
}
body .swal2-popup.swal2-toast .swal2-success .swal2-success-line-long {
    width: 11px !important;
    right: 4px !important;
    top: 9px !important;
}

/* Timer progress bar in toast */
body .swal2-popup.swal2-toast .swal2-timer-progress-bar {
    background: #10b981 !important; /* Elegant green for success feedback */
    height: 3px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Button styling for Emitir Nota de Venta */
.btn-emitir-nota {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #ffffff !important;
    background-image: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    margin-top: 15px !important;
}

.btn-emitir-nota:hover {
    background-image: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-emitir-nota:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

.btn-emitir-nota i {
    margin-right: 8px !important;
    font-size: 16px !important;
    transition: transform 0.2s ease !important;
}

.btn-emitir-nota:hover i {
    transform: scale(1.15) !important;
}

/* ========================================================
   ESTILOS PREMIUM PARA SWITCHES DE WHATSAPP Y COMPROBANTE MULTIPLE (CLARO)
   ======================================================== */
body .toggle:has(#enviawsc), 
body .toggle:has(#variosc) {
    border-radius: 20px !important;
    border: 1px solid #d1d5db !important; /* Borde gris suave */
    background-color: #f4f4f5 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out !important;
    overflow: hidden !important;
}

body .toggle:has(#enviawsc):hover, 
body .toggle:has(#variosc):hover {
    border-color: #9ca3af !important;
}

body .toggle:has(#enviawsc) .toggle-group,
body .toggle:has(#variosc) .toggle-group {
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Estado ON (Activo) - Azul Profesional Suave */
body .toggle:has(#enviawsc) .toggle-on,
body .toggle:has(#variosc) .toggle-on {
    background-color: #3b82f6 !important; /* Azul profesional suave */
    background-image: none !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Estado OFF (Inactivo) - Rojo Suave */
body .toggle:has(#enviawsc) .toggle-off,
body .toggle:has(#variosc) .toggle-off {
    background-color: #e74c3c !important; /* Rojo suave */
    background-image: none !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Manija deslizadora del switch (Handle) */
body .toggle:has(#enviawsc) .toggle-handle,
body .toggle:has(#variosc) .toggle-handle {
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 24px !important;
}

/* Ajustes para tamaño mini */
body .toggle.btn-mini:has(#enviawsc),
body .toggle.btn-mini:has(#variosc) {
    min-height: 20px !important;
    height: 20px !important;
}

body .toggle.btn-mini:has(#enviawsc) .toggle-handle,
body .toggle.btn-mini:has(#variosc) .toggle-handle {
    width: 18px !important;
    height: 18px !important;
    top: 0px !important;
    border-radius: 50% !important;
}

body .toggle.btn-mini:has(#enviawsc) .toggle-on,
body .toggle.btn-mini:has(#enviawsc) .toggle-off,
body .toggle.btn-mini:has(#variosc) .toggle-on,
body .toggle.btn-mini:has(#variosc) .toggle-off {
    font-size: 9px !important;
    padding-top: 1px !important;
}

/* Collapsible Settings Tray for Moneda, Serie, Fechas */
.config-row-tray {
    display: none;
    padding: 15px 0 5px 0 !important;
    background-color: #f8fafc !important; /* Soft slate gray */
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    margin: 10px 0 15px 0 !important;
}

.btn-config-toggle {
    background-color: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.btn-config-toggle:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* Floating Action Button (FAB) for Settings */
.btn-config-floating {
    position: absolute;
    top: 5px;
    right: 15px;
    z-index: 99;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #4b5563 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}

.btn-config-floating:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
    transform: scale(1.1) rotate(15deg) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}