/*:root {
    --blanco: #FFF;
    --success: #38b865;
    --gray-tooltip: #222d32; 
}*/

html,
body {
    height: 100%;    
}

a:hover{
    text-decoration: none;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.btn-disable
{
cursor: not-allowed;
pointer-events: none;

/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: #ffffff;

}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav > li > form {
    padding: 8px;
}

@media(max-width:768px) {
	.nav li > form {
	    padding: 3px;
	}
}

.nav > li > form > button:hover {
    text-decoration: none;
}

.bg-verde1{
    background-color:#B3FFA6;  
  }

.bg-aqua1{
    background-color: #A6FCFF;
}

.bg-red1{
    background-color:#f7d3d37d;
}
.bg-white{
    background-color:#fff!important;
}
.bg-gray1{
    background-color: #d2d6de80;
}
.bg-red {
    background-color: #fd2b1b!important;
}
.bg-fuchsia {
    background-color: #f012be!important;
}
.bg-purple {
    background-color: #867988!important;
}
.bg-orange {
    background-color: #ff851b!important;
}
.bg-yellow {
    background-color: #ffdc00!important;
}
.bg-verde{
    background-color:#A7FFEB!important; 
  }
.bg-azul{
    background-color:#007bff!important; 
    color:#fff!important; 
  }
  .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    color: #f5f5f5;
    background-color: #007bff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}   
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    border-top-color: #c3cbcf!important;
}

.search__input {
    width: 100%;
    padding: 12px 24px;

    background-color: transparent;
    transition: transform 250ms ease-in-out;
    font-size: 14px;
    line-height: 18px;
    
    color: #575756;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 95% center;
    border-radius: 50px;
    border: 1px solid #b8b8b8;
    transition: all 250ms ease-in-out;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.search__input::placeholder {
        color: rgba(87, 87, 86, 0.8);
        /*text-transform: uppercase;*/
        letter-spacing: 1.5px;
    }

.search__input:hover,
    .search__input:focus {
        padding: 12px 0;
        outline: 0;
        border: 1px solid transparent;
        border-bottom: 1px solid #7e7e08;
        border-radius: 0;
        background-position: 100% center;
    }

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #007bff!important;
    border-color: #007bff!important;
}
.btn-success {
    color: #fff;
    background-color: #00b72a !important;
    border-color: #28a745 !important;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.box    .box-primary {
    border-top-color: #007bff !important;
}
  .panel-warning > .panel-heading {
    color: #fff;
    background-color: #ffc107!important;
    border-color: #ffc107!important;
}
.panel-warning {
    border-color: #ffc107!important;
}
.panel-success > .panel-heading {
    color: #fff;
    background-color:#28a745!important;
    border-color: #28a745!important;
}
.panel-success {
    border-color: #28a745!important;
}
.panel-info > .panel-heading {
color: #fff;
background-color: #00c0ef!important;
border-color: #00c0ef!important;
}
.panel-info {
    border-color: #00c0ef!important;
}

.wraper img{
    width: 70px; height: 60px;
}
.wraper a{
    width: 15%;
    float: left;
    margin-left: 15px;
    border: 1px solid #cce9c6;    
}

/******************************************************************************************************/

.skin-blue .main-sidebar, .skin-blue .left-side {
    /* background-color: #222d32; */
    background: white !important;
    background-size: cover;
    
}
.salir{
    width: 100px;
    margin-top: 5px;
    height: 50px;
    background: #132552;
    color: #fff;  
    float: right;
    /* margin-right: 70px;
    padding-top: 15px; */
    font-weight: 500;
    font-size: 16px;        
}



/**********************************************************************************************/
/*ESTILOS PARA EL TITULO DEL HEADER (SISTEMA ERP-GLOBAL)*/

.navbar-custom-title {
    font-size: 20px !important;
    margin-top: 10px;
    color: white !important;
}

/*ESTILOS PARA EL TITULO DEL HEADER (SISTEMA ERP-GLOBAL)*/
/**********************************************************************************************/







/**********************************************************************************************/
/*ESTILOS PARA CONTROLAR TAMAÑO Y POSICION DE LAS IMAGENES DEL MENU*/









/*ESTILOS PARA CONTROLAR TAMAÑO Y POSICION DE LAS IMAGENES DEL MENU*/
/**********************************************************************************************/








.car-dash{
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.14);
    border: 0;
    padding:  0 15px;
    padding: 15px 0;
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 6px;
    color: #333;
    background: #fff;
    width: 100%;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #eee;
    border-radius: .25rem;
}
.car-stats{
    text-align: right;
}
.car-header{
    margin: 0 15px;
    padding: 0;
    position: relative;
}
.car-icon{
    border-radius: 3px;
    background-color: #999;
    padding: 15px;
    margin-top: -40px;
    float: left;
    width: 86px;
    height: 70px;
}
.material-icons{
  background: url('../check.png') no-repeat center;   
  height: -webkit-fill-available;
}
.car-categoria{
    color: #999;
    font-size: 14px;
        *padding-top: 10px;
        margin-left: 10px;
}
.car-warnig{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
    background: linear-gradient(60deg,#ffa726,#fb8c00); 
}
.car-success{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(76,175,80,.4);
    background: linear-gradient(60deg,#66bb6a,#43a047);
}
.car-danger{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(244,67,54,.4);
    background: linear-gradient(60deg,#ef5350,#e53935);
}
.car-info{
    box-shadow:  0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,188,212,.4);
    background: linear-gradient(60deg,#26c6da,#00acc1);
}
.car-purple{
    box-shadow:  0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
    background: linear-gradient(60deg,#ab47bc,#8e24aa);
}
.car-footer {
    border-top: 1px solid #eee;
    *margin-top: 20px;
}
.anual:hover {
    *background: red; /*Color de fondo*/
    *width: 200px; /*Ancho del div*/
    *height: 100px; /*Alto del div*/
    box-shadow:10px 10px 20px #BEBEBD;
    -moz-box-shadow:10px 10px 20px #BEBEBD;
    -webkit-box-shadow:10px 10px 20px #BEBEBD;
 }

.panel-danger > .panel-heading {
    color: #fff;
    background-color: #F73E3E!important;
    border-color: #F73E3E!important;
    }
    .panel-anger {
        border-color: #F73E3E!important;
    }
    
.btn-blue {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(102, 164, 249, .5);
    background: linear-gradient(60deg, #007bff, #428CEF);
    font-weight: 700;
    color: #fff;
}


.morado{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
    background: linear-gradient(60deg,#b857f8,#8e24aa);
    font-weight: 700;
    color:#fff;
    border-radius: 5px;
    padding:5px 25px;
    margin:5px;
    float: left;
}

.headth{
    background: #F5F5F5;
    font-weight: 700;
    color:rgb(0, 0, 0);   
}
.mdmetas{
    background-image: linear-gradient(90deg,#5b79a2,#2e4469);
    background-position: 0 0;
}
.entrega {
    box-shadow: 0 4px 20px 0 rgba(250, 42, 42, 0.14), 0 7px 10px -5px rgba(248, 82, 82, 0.637);
    background: linear-gradient(60deg, #ff5454, #f85858);
    font-weight: 700;
    color: rgb(0, 0, 0);
}

.entrega-individual {
    box-shadow: 0 4px 20px 0 rgba(29, 45, 182, 0.14), 0 7px 10px -5px rgba(49, 17, 231, 0.637);
    background: linear-gradient(60deg, #2234ae, #20a4f3
    );
    font-weight: 700;
    color: rgb(0, 0, 0);
}

.naranja{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
    background: linear-gradient(60deg,#ffa726,#fb8c00);
    font-weight: 700;
    color:#fff;
    border-radius: 5px;
    float:left;
    padding:5px 25px;
    margin:5px
}

#estn1:hover{
    box-shadow:0px 4px 20px 0 #BEBEBD;
    -moz-box-shadow:0 7px 10px -5px #BEBEBD;
    -webkit-box-shadow:10px 10px 20px #BEBEBD;
}

#estn2:hover{
    box-shadow:0 4px 20px 0 #BEBEBD;
    -moz-box-shadow:0 7px 10px -5px #BEBEBD;
    -webkit-box-shadow:10px 10px 20px #BEBEBD;
}

.azul{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
    background: linear-gradient(60deg,#ab47bc,#8e24aa);
    font-weight: 700;
    color:rgb(255, 255, 255);
    border-radius: 5px;
    padding:5px 25px;
    margin:5px;
    float: left;
}

.rojo{
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,188,212,.4);
    background: linear-gradient(60deg,#26c6da,#00acc1);
    font-weight: 700;
    color:rgb(255, 255, 255);
    border-radius: 5px;
    padding:5px 25px;
    margin:5px;
    float: left;
}

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #0c2c4c !important;
    border-bottom: 1px solid #0e0d0d;
    border-radius: 5px 5px 0 0;
    color: #fff !important;
}

div.fancybox-caption__body{
    font-size: 40px;
}


.card-left {
 float: left;
}
.card-right {
    float: right;
}
.card1 {
    width: 50%;
}
.card1 {
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -webkit-border-radius: 25px 25px 25px 25px;
    border: 0 solid #9db3e8;
    -webkit-box-shadow: 8px 8px 25px 7px rgb(157 179 232 / 50%);
    -moz-box-shadow: 8px 8px 25px 7px rgba(157,179,232,.5);
    box-shadow: 8px 8px 25px 7px rgb(157 179 232 / 50%);
}

.card1 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card3{
    background-color: #FFF;
    margin-left: 20%;
    margin-right: 20%;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 0 solid #9db3e8;
    -webkit-box-shadow: 8px 8px 25px 7px rgb(157 179 232 / 50%);
    -moz-box-shadow: 8px 8px 25px 7px rgba(157,179,232,.5);
    box-shadow: 8px 8px 25px 7px rgb(157 179 232 / 50%);
}

.kv-grouped-row {
    *background-color: #e1bee7 !important;
    font-weight: 500;
    *padding-top: 10px !important;
    *padding-bottom: 10px !important;
    *color: #0b2239;

}




/**********************************************************************************************/
/* SECCIÓN DE ESTILOS PARA EL BOTÓN DASHBOARD PRINCIPAL */
.salir-planilla {
    padding: 15px;
    background: #00293C;
    color: #fff;
    margin-top:5px;
    margin-bottom: 5px;
    height: 55px;
    width: 90px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;

    cursor: pointer;
    display: inline-block;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    
}


/* Se eliminan los efectos hover */
.salir-planilla {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza el cambio de tamaño y sombra */
}

.salir-planilla:hover {
    border: none;
    font-weight: 500;
    outline: none;
    transform: scale(1.1); /* Aumenta el tamaño del botón ligeramente */
    text-decoration: none; /* Elimina cualquier subrayado */
}

.active-planilla {
    background-color: #BDBDBD;
    color: #333;
}

.salir-planilla .bi-box-arrow-right {
    color: white;
    text-shadow: 0 0 2px #293a4a, 0 0 5px #293a4a;
}


/*

.image img {
    width: 70%;
    height: 70%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
/*}

*/

/* SECCIÓN DE ESTILOS PARA EL BOTÓN DASHBOARD PRINCIPAL */
/**********************************************************************************************/








.notification:hover{
    background-color:#2234ae;
}

.notification-all{
    background-color:#023058;
}

.notification-all:hover{
    background-color:#2234ae;
}

.nueva {
    width: 94%;
    background-color: #E6E6E6;
    transition: width 0.3s, height 0.3s, margin 0.3s;
}
.nueva:hover{
    width: 94%;
    background: #EEEEEE;;
}

.visto {
    width: 94%;
    background-color: white;
    transition: width 0.3s, height 0.3s, margin 0.3s;
}
.visto:hover{
    width: 94%;
    background: #EEEEEE;;
}

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid rgb(167, 167, 167);
    border-color: rgb(167, 167, 167) transparent rgb(167, 167, 167) transparent;
    animation: lds-hourglass 1s infinite;
  }
  @keyframes lds-hourglass {
    0% {
      transform: rotate(0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
      transform: rotate(900deg);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
      transform: rotate(1800deg);
    }
  }

.not-notification{
    color:rgb(167, 167, 167);
    font-size: 25px;
}

.btn-borde {
    padding: .375rem .75rem;
    border: 1px solid #007bff;
    background-color: #007bff;
    border-radius: .25rem;
    color: #fff;
    transition: color .15s ease-in-out,
      background-color .15s ease-in-out;
}
  
.btn-borde:hover {
color: #007bff;
background-color: #ffffff;
}

.bs-glyphicons li {
    float: left;
    height: 115px;
    width: 117px;
    padding: 10px;
    font-size: 15px;
    font-family: calibri;
    list-style: none;
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #fff;
}

.bs-glyphicons li:hover {
    background-color: #559eec88;
    border: 1px solid rgb(72, 15, 228);
}


.reloj0{
    width: 80%;
    margin-top: -10px;
    color: white;
    font-size: 25px;
    margin: auto;
    background-color: #000000;
    background-image: linear-gradient(147deg, #a1e760 0%, #02cf2e 74%);
    border-radius: 10px;
}

.reloj{
    width: 80%;
    margin-top: -10px;
    color: white;
    font-size: 25px;
    margin: auto;
    background-color: #000000;
    background-image: linear-gradient(147deg, #56e4e9 0%, #1607f5 74%);
    border-radius: 10px;
}

.fraction {
    display: inline-block;
    vertical-align: middle; 
    margin: 0 0.2em 0.4ex;
    text-align: center;
}
.fraction > span {
    display: block;
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: 2px solid  gray;}
.fraction span.bar {display: none;}

.corte_n{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: table-cell; vertical-align: middle;
}

.label-acciones{
    background-color: #023058;
    color: white;
    padding: 11px !important;
    font-size: 15px;
    border-radius: 5px;
}

.fondo{
    background-color:#f5f5f5; border-radius: 5px;margin: 5px 15px 1px 15px;padding:7px;
}

.contorno{
    background-color:#f5f5f5;
     border-radius: 5px;
     margin-left: 3px;
     margin-right: 3px;
     padding: 4px;
}

.btn-rojo{
    background:#f52b12;color:#fff; border-radius: 5px;width:100%;padding: 7px;
    margin-top: 5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.btn-rojo:hover{
    color:#f5f5f5;
}

.btn-estilo{
    border-radius: 5px;width:100%;padding: 7px;
    margin-top: 5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.btn-elegante{
    background:#62f97e; border-radius: 5px;width:100%;color:#000;padding: 7px;
    margin-top: 5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.btn-elegante:hover{
    background:#62f97e; 
    color:#000;
}

.font-weight-bold {
    font-weight: 700!important;
}


/* ESTILOS PARA LE MODULO JURIDICO***************/
.salir-juridico{
    padding: 15px; 
    background: #ffa726;
    color: #fff;   
    height: 58px;
    text-align: center;
}
.salir-juridico:hover{
   box-shadow: inset 0 0 0 2px #fff;
   color: #0b2239;
   font-weight: 600;       
}

.btn-save-juridico{
    background-color: #fff;
    border: 1px solid #f39c12;
    color: #ff6200;
    transition: box-shadow cubic-bezier(0.23,1,0.32,1) .3s;
    padding: 7px 12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    font-size: 16px;
    line-height: 1.3333333;
    border-radius: 2px;
    margin-top: -5px;
  }

  .btn-save-proveedor{
    background-color: #fff;
    border: 1px solid #605ca8 ;
    color: #605ca8 ;
    transition: box-shadow cubic-bezier(0.23,1,0.32,1) .3s;
    padding: 7px 12px;
    font-size: 16px;
    line-height: 1.3333333;
    border-radius: 2px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    margin-top: -5px;
  }

  .btn-save-juridico:hover{
    background-color: #f5f5f587;
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px; 
}

 .btn-save-proveedor:hover{
    background-color: #f5f5f587;
    box-shadow: inset 0 0 0 2px #fff;
    color: #605ca8;     
 }

 .encabezado{
    background-color:#f5f5f58a;
     border-radius: 5px;
     margin-left: 3px;
     margin-right: 3px;
     padding: 4px;
     box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
    }

.btn-borde-orange{
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #ff6200;
    color: #ff6200;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /*cursor: pointer;*/
    background-image: none;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-borde-blue{
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #4744ff;
    color: #361fff;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /*cursor: pointer;*/
    background-image: none;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-borde-purple{
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #be07a0;
    color: #c20f9b;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /*cursor: pointer;*/
    background-image: none;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-borde-green{
    border-radius: 3px;
    background-color: #fff;
    border: 2px solid #4cb852;
    color: #4aa14a;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-borde-red{
    border-radius: 3px;
    background-color: #fff;
    border: 2px solid #c50b24;
    color: #ff232e;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.top-grid{
    background: linear-gradient(#fff, #dcdcdc);
    color: #4a148c;
}

.active-juridico {
    background-color: #ffffff;
    color: #ff232e;
}

#navbar-juridico   a {
    color: #f39c12;
}


/**********************************************************************************************/
/******** ESTILOS PARA EL LAYOUT DE LOS MODULOS **********/
.circle {
    width: 120px;
    height: 120px;
    background: linear-gradient(218.58deg,#132552 11.5%,#132552 87.95%);
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Asegura que el zoom no se salga del círculo */
}
.circle .animation-bar {
    height: 51%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: -1px;
    transform-origin: bottom;
}

.image {
    padding-top: 20%;
    width: 115px;
    height: 115px;
    /*border: 2px solid #7e8081;*/
    border-radius: 50%;
    margin: 0 auto;
    z-index: 5;
    overflow: hidden;
    background: linear-gradient(110.49deg, #f6f5f5 26.28%, #f6f5f5 94.17%); /*color de fondo para circulos del dashboard*/
    transition: transform 0.2s ease-in-out; /* Agregar transición suave al zoom */
}

/******** ESTILOS PARA EL LAYOUT DE LOS MODULOS **********/
/**********************************************************************************************/



/**********************************************************************************************/
/*SECCION PARA ESTILOS DE ICONOS DEL DASHBOARD*/

.circle:hover {
    box-shadow: rgba(252, 49, 49, 0.3) 0px 1px 1px 0px inset, 
                rgba(255, 49, 49, 0.3) 0px 50px 100px -20px, 
                rgba(255, 49, 49, 0.3) 0px 30px 60px -30px;
}


.image:hover {
    transform: scale(0.9); /* Zoom al 90% del tamaño original */
}


.cards-products-home.circles a:hover .animation-bar {
    opacity: 1;
    animation: hovereffect .5s linear forwards;
}

                

/*SECCION PARA ESTILOS DE ICONOS DEL DASHBOARD*/            
/**********************************************************************************************/                

/* Styles to tittle box */
.tittle-box{
    padding: 10px 25px;
    margin-top: -30px;
}

@media (max-width: 768px){
    .tittle-box{
        padding: 10px 25px;
        margin-top: 5px;
    }
}

.tittle-middle{
    margin-top: 20px;
}

@media (max-width: 768px){
    .tittle-middle{
        margin-top: 1px;
    }
}
/* end styles to tittle box */

/* clases para el tooltip */
.tooltip-personalized {
    position: relative;
    display: inline-block;
    color: var(--success);
}

.tooltip-personalized .tooltip-personalized-text {
    visibility: hidden;
    width: auto;
    background-color: var(--gray-tooltip);
    color:  var(--blanco);
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    top: -15px;
    font-size: 15px;
    font-family: calibri;
    padding: 12px;
}

.tooltip-personalized:hover .tooltip-personalized-text {
    visibility: visible;
}

/* fin clases para el tooltip */


/* clases para el tooltip para ls disenios de los productos */

.tooltip-productos {
    position: relative;
    display: inline-block;
    color: var(--success);
}

.tooltip-productos .tooltip-productos-text {
    visibility: hidden;
    line-height: 0.5;
    background-color: #6f39c5;
    background-color: var(--gray-tooltip);
    color:  var(--blanco);
    
    border-radius: 6px;
    padding: 3px 5px;
    position: absolute;
    z-index: 1;

}

.tooltip-productos:hover .tooltip-productos-text {
    visibility: visible;
}

/* fin clases para el tooltip para los producto*/

.badge-menta{
    background-color: #9dedc8 !important;
    padding: 1px 4px;
    border-radius: 3px;
    color: black !important;
    font-weight: 600;
}

.font_purple{
    font-size: initial;
    color: darkmagenta;
    font-weight: 700;
}

       .fechaIngreso{
            width:350px;
            height:40px;
            background: #f4f6f6;
            border: 2px solid  #154360;
            border-radius: 25px;
            text-align: center;
        }
        
.btnCancel{
    background: #d7d7ff ;
    border: 1px solid #d7d7ff ;
    transition: 0.5s ease;
    color: #000;
    width: 10rem;
    border-radius: 7px;
    }
.btnCancel:hover{
  color: #000 ;
  background: #9dedc8;
}



/* //////////////////////////////////////////////////////////////////////////////////////////////// */
  /*ESTILO PARA DIVS PRINCIPALES DEL DASHBOARD*/
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

.miTextoDiv {
    font-style: italic !important;
    color: #132552 !important;
    font-family: 'Arial', sans-serif !important;
}

/* Hover para los elementos de texto */
.small-box:hover .miTextoDiv {
    color: #339AF0 !important;
}

/* Hover para el icono */
.small-box:hover .icon i {
    color: #339AF0 !important;  /* Cambiar color del icono a blanco */
}

/* Estilo para el texto del footer */
.small-box-footer {
    color: #171a4a;
    font-family: 'Arial', sans-serif !important;
}

.small-box:hover .small-box-footer {
    color: #339AF0 !important;
}

.custom-color {
    color: #171a4a !important; 
}

.custom-color:hover {
    color: #339AF0 !important; /* Cambiar a blanco al hacer hover */
}


/* //////////////////////////////////////////////////////////////////////////////////////////////// */
  /*ESTILO PARA DIVS PRINCIPALES DEL DASHBOARD*/
/* //////////////////////////////////////////////////////////////////////////////////////////////// */




.miTextoTitulo { 
    color: #171a4a !important;
    font-weight: bold;
    font-family: 'Arial', sans-serif !important;
    font-size: x-large;
}


.miTextosubTitulo {
    color: #171a4a !important;
    font-family: 'Arial', sans-serif !important;
}



/* //////////////////////////////////////////////////////////////////////////////////////////////// */
  /*ESTILO PARA LOS ICONOS PEQUEÑOS DE LAS DIFERENTES VISTAS DEL SISTEMA*/
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

.icon-size2 {
    margin-bottom: -5px;
    margin-right: 8px; /* Aumenta el espacio entre el icono y el texto */
    width: 15px; /* Ajusta el tamaño de la imagen */
    height: 15px;
    transform: translateY(-13px); /* Ajusta según sea necesario */
    flex-shrink: 0; /* Evita que la imagen se reduzca demasiado */
    transition: all .2s ease-in-out;
    margin-top: 15px;
}






/* //////////////////////////////////////////////////////////////////////////////////////////////// */
  /*ESTILO PARA LOS ICONOS PEQUEÑOS DE LAS DIFERENTES VISTAS DEL SISTEMA*/
/* //////////////////////////////////////////////////////////////////////////////////////////////// */







/*CODIGO PARA DAR ESTILO A LOS ICONOS DENTRO DE LOS REPORTES*/

.iconreportes{
    color: white !important;
    background-color: #171a4a !important;
    border-radius: 9px; /* Ajusta el valor según el nivel de redondeo que prefieras */
    padding: 5px 10px; /* Opcional, para dar algo de espacio alrededor del texto */
}

.iconcheck{
    color: #171a4a !important;
}

/*CODIGO PARA DAR ESTILO A LOS ICONOS DENTRO DE LOS REPORTES*/





.titulo-ordenes {
    font-weight: bold; /* Texto en negrita */
    font-size: 18px;   /* Tamaño del texto */
    color: #333;       /* Color del texto */    
    letter-spacing: 1px; /* Espaciado entre letras */
}

.colortexto {
    color: #171a4a !important;
    font-weight: bold;
}






/**************** ESTILO PARA TEXTO DEL DASHBOARD PRINCIPAL ****************/

.textodash{
    color:#132552;
    font-weight: 400;
    margin-top: 10px;
    /*font-size: 20px;*/
    font-style: italic;
}


/**************** ESTILO PARA TEXTO DEL DASHBOARD PRINCIPAL ****************/



/**************** ESTILO PARA DIVS PRINCIPALES ****************/

.divprincipal {
    background-color: #FFFFFF; /* Fondo blanco puro */
    border-radius: 12px; /* Bordes ligeramente menos redondeados */
    margin: 8px 8px 2px 8px; /* Márgenes más equilibrados */
    padding: 16px 20px; /* Más espacio interno (vertical/horizontal) */
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.05), /* Sombra sutil */
        0 1px 2px rgba(0, 0, 0, 0.1); /* Profundidad sutil */
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.03); /* Borde casi imperceptible */
    transition: all 0.25s ease; /* Transición suave para hover */
}

/**************** ESTILO PARA DIVS PRINCIPALES ****************/



/**************** ESTILO PARA TITULOS / ICONOS ****************/

/*.textotitulo{
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px 20px 20px 20px;
    margin-top:20px;
    color:#132552;
    font-size: 1.5rem;  Tamaño relativo 
}


*/


.textosubtitulo{
    font-style: italic;
    color:#132552;
    font-size: 1.5rem;
}

.iconcolor{
    vertical-align: middle; /* Centra el ícono verticalmente dentro de su contenedor */
    color: #339AF0; /* Color azul */
    font-size: 20px; /* Tamaño del ícono (ajústalo según lo necesites) */
}

.iconnav{
    vertical-align: middle; /* Centra el ícono verticalmente dentro de su contenedor */
    color: #132552; /* Color azul */
    font-size: 25px; /* Tamaño del ícono (ajústalo según lo necesites) */
}

.color{
    color: #132552;
}

.colorverde{
    background-color: #FDF88C;
    color: #132552;
    font-weight: bold;
}

/**************** ESTILO PARA TITULOS ****************/



/**************** ESTILO PARA TABLAS ****************/


.estilotablas {    
    background-color: #ecedea;
    color: #171a4a !important;
    font-weight: bold;
    padding: 10px 15px; /* Agrega espacio arriba y abajo, izquierda */    
}

/**************** ESTILO PARA TABLAS ****************/




/**************** ESTILO PARA PAGINACION VISTA PC Y TABLET ****************/


/* Estilo básico de la paginación */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    list-style: none;
    margin: 0;
}

/* Ajuste en dispositivos más pequeños */
@media (max-width: 768px) {
    .pagination {
        font-size: 12px; /* Reducir tamaño de fuente en tablets */
        padding: 5px 0;
    }

    .pagination .page-item {
        margin: 2px; /* Reducir márgenes entre elementos */
    }

    .pagination .page-link {
        padding: 8px 12px; /* Ajustar padding de los enlaces */
        font-size: 12px;
    }

    .pagination .page-item.first,
    .pagination .page-item.prev,
    .pagination .page-item.next,
    .pagination .page-item.last {
        display: none; /* Ocultar botones "Primero" y "Último" en tablets */
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
    .pagination {
        font-size: 10px; /* Reducir aún más el tamaño de la fuente en móviles */
    }

    .pagination .page-link {
        padding: 5px 8px; /* Ajustar padding en pantallas más pequeñas */
    }
}


/**************** ESTILO PARA PAGINACION VISTA PC Y TABLET ****************/





/* Estilo para los botones "En proceso" */
.badge-custom {  
    padding: 0px ;
    padding-left:5px;
    padding-right: 5px;
    border-radius: 10px 10px 10px 10px; /* Bordes redondeados */
    font-size: 14px;
    color: white; /* Texto blanco */
    text-align: center;
}

.en-proceso {
    background-color: #339AF0; /* Azul para "En proceso" */
}

.completada {
    background-color: #358248; /* Verde para "Completada" */
}





.guardar{
    border-radius:10px 10px 10px 10px;
    background-color:#358248;
    color:white;
    font-weight:bold;
    padding-top:5px;
    box-shadow: none;
    border: none !important;
}

.cancelar{
    border-radius:10px 10px 10px 10px;
    background-color:#FF0038;
    color:white;
    box-shadow: none;
    border: none !important;
}

.fondotitulo{
    background-color:#F5F5F5;
    border-radius: 10px 10px 10px 10px;
    margin: 5px 5px 1px 5px;
    padding-left:5px;
    padding-right:5px
    
}


.refrescar{
    margin: 5px 5px 1px 5px;
    background-color:#339AF0;
    color: white;
    border-radius: 10px 10px 10px 10px;
    padding-left:5px;
    padding-right:5px;
    margin: 5px 5px 1px 5px;
}

.refrescar:hover{
    color: white !important;
    box-shadow: none;
    border: none !important;
}



.btnnaranja{
    background-color:#EC9704;
    color: white;
    border-radius: 10px 10px 10px 10px;
    margin: 5px 5px 1px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
}

.btnnaranja:hover{
    color:white !important;
}



.btnazul{
    background-color:#339AF0;
    color: white;
    border-radius: 10px 10px 10px 10px;
    margin: 5px 5px 1px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
}

.btnazul:hover{
    color:white !important;
}




.btnverde {
    background-color: #358248;
    color: white;
    margin: 5px 5px 0px 5px;
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: none;
    border: none !important;
    text-decoration: none !important;

    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}


.btnverde:hover{
    color:white !important;
    box-shadow: none;
    text-decoration: none !important;
}


.btnpurple{
    background-color:#815C97;
    color: white;
    margin: 5px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
}

.btnpurple:hover{
    color:white !important;
    box-shadow: none;
}





.btnrojo{
    background-color:#FF0038;
    color: white;
    margin: 5px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
    text-decoration: none !important;
}

.btnrojo:hover{
    color:white !important;
    box-shadow: none;
    text-decoration: none !important;
}



.btnamarillo{
    background-color:#F7C815;
    color: white;
    margin: 5px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
}

.btnamarillo:hover{
    color:white !important;
    box-shadow: none;
}



.btngris{
    background-color:#F5F5F5;
    color: white;
    margin: 5px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
}

.btngris:hover{
    color:white !important;
    box-shadow: none;
}

/*-------------------------------------*/



/* Estilo base para PC */
.btnverdetit {
    background-color: #358248;
    color: white;
    margin: 5px 5px 0px 5px;
    padding: 10px 15px;
    font-size: 40px;
    box-shadow: none;
    border: none !important;
    border-radius: 10px;
    width: 15%;
    text-align: center;    
}

.btnverdetit:hover {
    color: white !important;
    box-shadow: none;    
}

/* Estilo para tablets (pantallas entre 600px y 1024px) */
@media (max-width: 1024px) and (min-width: 600px) {
    .btnverdetit {
        font-size: 15px;
        padding: 8px 12px;
        width: 20%; /* O ajustable al contenedor */
    }
}

/* Estilo para teléfonos (pantallas menores a 600px) */
@media (max-width: 599px) {
    .btnverdetit {
        font-size: 15px;
        padding: 6px 10px;
        width: 25%; /* O ajustable al contenedor */
    }
}


/*----------------------------------------------*/

.btnred{
    background-color:#FF0038;
    color: white;
    margin: 0px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
    width: auto;

    align-items: center;
    justify-content: center; /* opcional, si también quieres centrar horizontalmente */
}

.btnred:hover{
    color:white !important;
    box-shadow: none;
}


.btnyellow{
    background-color:#F7C815;
    color: white;
    margin: 5px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
    width: auto;


    justify-content: center; /* opcional, si también quieres centrar horizontalmente */
}

.btnyellow:hover{
    color:white !important;
    box-shadow: none;
}


.btngreen{
    background-color:#358248;
    color: white;
    margin: 0px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
    width: auto;

    display: flex;
    align-items: center;
    justify-content: center; /* opcional, si también quieres centrar horizontalmente */ 
}

.btngreen:hover{
    color:white !important;
    box-shadow: none;
}

.btnblue{
    background-color:#339AF0;
    color: white;
    margin: 0px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
    width: auto;
}

.btnblue:hover{
    color:white !important;
    box-shadow: none;
}


.btngray{
    background-color:#737E80;
    color: white;
    margin: 0px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
    width: auto;
}

.btngray:hover{
    color:white !important;
    box-shadow: none;
}



.btnfresh{
    background-color:#339AF0;
    color: white;
    margin: 0px 5px 0px 5px;
    padding-left:5px;
    padding-right:5px;
    text-align: center;
    box-shadow: none;
    border: none !important;
    width: auto;

    display: flex;
    align-items: center;
    justify-content: center; /* opcional, si también quieres centrar horizontalmente */
}

.btnfresh:hover{
    color:white !important;
    box-shadow: none;
}
/*-------------------------------------*/



.btnnav{
    background-color:#132552;
    color: white;
    border-radius: 10px 10px 10px 10px;
    margin: 0px 5px 1px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;


    align-items: center;
    justify-content: center; /* opcional, si también quieres centrar horizontalmente */
}

.btnnav:hover{
    color:white !important;
}



.fondogrid{
    background-color:#E1E1E1 !important;
}


.btngris{
    background-color:#737E80;
    color: white;
    border-radius: 10px 10px 10px 10px;
    margin: 5px 5px 1px 5px;
    padding-left:5px;
    padding-right:5px;
    box-shadow: none;
    border: none !important;
}

.btngris:hover{
    color:white !important;
}





/************************************************************************/

/* Estilo base para PC */
.textotitulo {
    font-size: 30px;
    color:#132552;
}

/* Estilo para tablets (pantallas entre 600px y 1024px) */
@media (max-width: 1024px) and (min-width: 600px) {
    .textotitulo {
        font-size: 18px;
        color:#132552;
    }
}

/* Estilo para teléfonos (pantallas menores a 600px) */
@media (max-width: 599px) {
    .textotitulo {
        font-size: 15px;
        color:#132552;
    }
}


/************************************************************************/


/* Ajuste específico para el botón */
.modalButton21 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1.2;
    background-color: #358248;
    color: white !important;
    font-weight: bold;
    border-radius: 10px 10px 10px 10px;
    border: none !important;
}

/* Ajuste para los iconos dentro del botón */
.modalButton21 i {
    margin: 5px 0;
    border: none !important;
}


.modalButton22 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1.2;
    background-color: #339AF0;
    color: white !important;
    font-weight: bold;
    border: none !important;
}

/* Ajuste para los iconos dentro del botón */
.modalButton22 i {
    margin: 5px 0;
    border: none !important;
}

.modalButton288 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1.2;
    background-color: #7B7B7B;
    color: white !important;
    font-weight: bold;
    border: none !important;
}

/* Ajuste para los iconos dentro del botón */
.modalButton288 i {
    margin: 5px 0;
    border: none !important;
}


.modalButton24 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1.2;
    background-color: #132552;
    color: white !important;
    font-weight: bold;
    border: none !important;
}

/* Ajuste para los iconos dentro del botón */
.modalButton23 i {
    margin: 5px 0;
    border: none !important;
}



/********************************************************************************/

/*********** BOTONES CUADRADOS CUSTOMIZADOS ***********/


    /* Nueva clase para el cuadro de información */
    .custom-info-box {
        width: 85px;
        height: 85px;
        border: 2px solid #ccc;
        border-radius: 8px;
        background-color: #F5F5F5; /* Color de fondo diferente */
        text-align: center;
        padding: 8px 3px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s ease-in-out;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
        flex-shrink: 0;
        cursor: pointer; /* Sin puntero de click */
    }

    .custom-info-box:hover {
        background-color: #e9e9e9;
        border-color: #358248; /* Color gris para hover */
    }

    .info-text-top,
    .info-text-bottom {
        font-size: 11px;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
    }

    .info-icon {
        font-size: 22px;
        color: #6c757d; /* Color gris para el texto */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    /* Versión responsive */
    @media (max-width: 992px) {
        .custom-info-box {
            width: 80px;
            height: 80px;
        }
    }

    @media (max-width: 768px) {
        .custom-info-box {
            width: 75px;
            height: 75px;
            padding: 5px 2px;
        }
        
        .info-icon {
            font-size: 20px;
        }
        
        .info-text-top,
        .info-text-bottom {
            font-size: 10px;
        }
    }

    /* Clases para modificación específica */
    .custom-info-box.large {
        width: 110px;
        height: 110px;
    }
    
    .custom-info-box.primary {
        background-color: #e7f1ff;
        border-color: #b8d4ff;
    }
    
    .custom-info-box.success {
        background-color: #e6f7e6;
        border-color: #b8e0b8;
    }


    .info-card {
        width: 120px;  /* Aumentado de 100px a 120px */
        height: 110px; /* Aumentado de 100px a 110px */
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background-color: #ffffff;
        text-align: center;
        padding: 15px 8px; /* Aumentado el padding */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        margin: 0 auto;
    }
    
    .info-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transform: translateY(-2px);
        border-color: #d0d0d0;
    }
    
    .info-card-label {
        font-size: 13px; /* Aumentado de 12px */
        font-weight: 600;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px; /* Aumentado de 8px */
    }
    
    .info-card-value {
        font-size: 32px; /* Aumentado de 28px */
        font-weight: 700;
        color: #2c3e50;
        line-height: 1;
    }
    
    /* Versión responsive */
    @media (max-width: 992px) {
        .info-card {
            width: 110px; /* Aumentado de 90px */
            height: 100px; /* Aumentado de 90px */
            padding: 12px 6px; /* Aumentado */
        }
        
        .info-card-value {
            font-size: 28px; /* Aumentado de 24px */
        }
    }
    
    @media (max-width: 768px) {
        .info-card {
            width: 95px; /* Aumentado de 80px */
            height: 90px; /* Aumentado de 80px */
        }
        
        .info-card-label {
            font-size: 12px; /* Aumentado de 11px */
        }
        
        .info-card-value {
            font-size: 26px; /* Aumentado de 22px */
        }
    }
    
    /* Variantes de color (se mantienen igual) */
    .info-card.primary {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }
    
    .info-card.success {
        background-color: #f0f8f0;
        border-color: #c3e6cb;
    }
    
    .info-card.warning {
        background-color: #fff9f0;
        border-color: #ffeeba;
    }
    
    .info-card.danger {
        background-color: #fff0f0;
        border-color: #f5c6cb;
    }


/********** ESTILO TABLA ASIGNAR KIT **************/


/* Estilos específicos para esta tabla usando el ID como selector */
#asignaciones-table.table-container {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#asignaciones-table .table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: #fff;
}

/* Encabezado de la tabla */
#asignaciones-table .table thead th {
    background-color: #132552;
    color: white;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    border: none;
    font-size: 0.85rem;
    text-align: center;
}

/* Filas de la tabla */
#asignaciones-table .table tbody tr {
    transition: all 0.2s ease;
    text-align: center;
}

#asignaciones-table .table tbody tr:hover {
    background-color: #f8f9fa;
}

#asignaciones-table .table tbody td {
    padding: 12px 15px;
    border-top: 1px solid #efeee9;
    vertical-align: middle;
    color: #495057;
}

/* Estilo para filas alternas */
#asignaciones-table .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Bordes redondeados */
#asignaciones-table .table-bordered {
    border: 1px solid #e9ecef;
}

#asignaciones-table .table-bordered thead th:first-child {
    border-top-left-radius: 8px;
}

#asignaciones-table .table-bordered thead th:last-child {
    border-top-right-radius: 8px;
}

/* Botones y badges específicos para esta tabla */
#asignaciones-table .btn-xs, 
#asignaciones-table .btn-sm {
    /*border-radius: 4px;*/
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
}

#asignaciones-table .btngreen {
    background-color: #28a745;
    color: white;
}

#asignaciones-table .btnred {
    background-color: #dc3545;
    color: white;
}

#asignaciones-table .btngreen:hover, 
#asignaciones-table .btnred:hover {
    opacity: 0.9;
}

/* Mensaje cuando no hay datos */
#asignaciones-table .textosubtitulo {
    color: #6c757d;
    font-weight: 400;
    font-size: 1rem;
}

/* Icono de trash */
#asignaciones-table .fa-trash {
    font-size: 0.9rem;
}

/* Responsive para tablets */
@media (max-width: 991px) {
    #asignaciones-table .table thead th {
        padding: 10px 8px;
        font-size: 0.75rem;
    }
    
    #asignaciones-table .table tbody td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
    
    #asignaciones-table .btn-xs, 
    #asignaciones-table .btn-sm {
        padding: 3px 6px;
        font-size: 0.7rem;
    }
}




/************************ ESTILOS PARA BOTONES CUADRADOS CUSTOMIZADOS ************************/



/* Estilo base del botón color verde*/
.custom-button-green {
    width: 90px;
    height: 90px;
    border: 2px solid #28a745; /* Borde verde */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris */
    text-align: center;
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */

}

/* Estilo del icono (estado normal) */
.custom-button-green .btn-icon {
    color: #132552; /* Navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-green .btn-text-top,
.custom-button-green .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-green:hover {
    background-color: #28a745; /* Fondo verde */
    border-color: #f0f0f0; /* Borde gris */
}

/* Efecto hover en icono y texto */
.custom-button-green:hover .btn-icon,
.custom-button-green:hover .btn-text-top,
.custom-button-green:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-green {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-green {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
}
                    
.custom-button-green .btn-icon {
    font-size: 20px;
}
                    
.custom-button-green .btn-text-top,
.custom-button-green .btn-text-bottom {
    font-size: 10px;
    }
}
/* Estilo base del botón color verde*/



 /* Estilo base del botón color naranja */
 .custom-button-orange {
    width: 90px;
    height: 90px;
    border: 2px solid #EC9704; /* Borde naranja */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris */
    text-align: center;
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */
    line-height: normal; /* Elimina el line-height por defecto de los botones */
}

/* Estilo del icono (estado normal) */
.custom-button-orange .btn-icon {
    color: #132552; /* Navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-orange .btn-text-top,
.custom-button-orange .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-orange:hover {
    background-color: #EC9704; /* Fondo naranja */
    border-color: #f0f0f0; /* Borde gris */
}

/* Efecto hover en icono y texto */
.custom-button-orange:hover .btn-icon,
.custom-button-orange:hover .btn-text-top,
.custom-button-orange:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-orange {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-orange {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
    }
    
    .custom-button-orange .btn-icon {
        font-size: 20px;
    }
    
    .custom-button-orange .btn-text-top,
    .custom-button-orange .btn-text-bottom {
        font-size: 10px;
    }
}
 /* Estilo base del botón color naranja */



/* Estilo base del botón color navy */
 .custom-button-navy {
    width: 90px;
    height: 90px;
    border: 2px solid #132552; /* Borde navy */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris */
    text-align: center;
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */
    line-height: normal; /* Elimina el line-height por defecto de los botones */
}



/* Estilo del icono (estado normal) */
.custom-button-navy .btn-icon {
    color: #132552; /* Navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-navy .btn-text-top,
.custom-button-navy .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-navy:hover {
    background-color: #132552; /* Fondo navy */
    border-color: #f0f0f0; /* Borde gris */
}

/* Efecto hover en icono y texto */
.custom-button-navy:hover .btn-icon,
.custom-button-navy:hover .btn-text-top,
.custom-button-navy:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-navy {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-navy {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
    }
    
    .custom-button-navy .btn-icon {
        font-size: 20px;
    }
    
    .custom-button-navy .btn-text-top,
    .custom-button-navy .btn-text-bottom {
        font-size: 10px;
    }
}
 /* Estilo base del botón color navy */




 /* Estilo base del botón color azul */
 .custom-button-blue {
    width: 90px;
    height: 90px;
    border: 2px solid #339AF0; /* Borde azul */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris */
    text-align: center;
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */
    line-height: normal; /* Elimina el line-height por defecto de los botones */
}

/* Estilo del icono (estado normal) */
.custom-button-blue .btn-icon {
    color: #132552; /* Navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-blue .btn-text-top,
.custom-button-blue .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-blue:hover {
    background-color: #339AF0; /* Fondo azul */
    border-color: #f0f0f0; /* Borde gris */
}

/* Efecto hover en icono y texto */
.custom-button-blue:hover .btn-icon,
.custom-button-blue:hover .btn-text-top,
.custom-button-blue:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-blue {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-blue {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
    }
    
    .custom-button-blue .btn-icon {
        font-size: 20px;
    }
    
    .custom-button-blue .btn-text-top,
    .custom-button-blue .btn-text-bottom {
        font-size: 10px;
    }
}
 /* Estilo base del botón color azul */



 /* Estilo base del botón color rojo */
 .custom-button-red {
    width: 90px;
    height: 90px;
    border: 2px solid #dc3545; /* Borde rojo */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris claro */
    text-align: center;
    padding: 8px 3px;
    display: inline-block !important;
    float: none !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */
    line-height: normal; /* Elimina el line-height por defecto de los botones */
}

/* Estilo del icono (estado normal) */
.custom-button-red .btn-icon {
    color: #132552; /* Color navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-red .btn-text-top,
.custom-button-red .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Color navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-red:hover {
    background-color: #dc3545; /* Fondo rojo */
    border-color: #f0f0f0; /* Borde gris */
}

/* Efecto hover en icono y texto */
.custom-button-red:hover .btn-icon,
.custom-button-red:hover .btn-text-top,
.custom-button-red:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Estilo para estado deshabilitado */
.custom-button-red:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-red {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-red {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
    }
    
    .custom-button-red .btn-icon {
        font-size: 20px;
    }
    
    .custom-button-red .btn-text-top,
    .custom-button-red .btn-text-bottom {
        font-size: 10px;
    }
}
 /* Estilo base del botón color rojo */






/* Estilo base del botón color amarillo */
 .custom-button-yellow {
    width: 90px;
    height: 90px;
    border: 2px solid #F7C815; /* Borde amarillo */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris claro */
    text-align: center;
    padding: 8px 3px;
    display: inline-block !important;
    float: none !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */
    line-height: normal; /* Elimina el line-height por defecto de los botones */
}

/* Estilo del icono (estado normal) */
.custom-button-yellow .btn-icon {
    color: #132552; /* Color navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-yellow .btn-text-top,
.custom-button-yellow .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Color navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-yellow:hover {
    background-color: #F7C815; /* Fondo amarillo */
    border-color: #f0f0f0; /* Borde gris */
}

/* Efecto hover en icono y texto */
.custom-button-yellow:hover .btn-icon,
.custom-button-yellow:hover .btn-text-top,
.custom-button-yellow:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Estilo para estado deshabilitado */
.custom-button-yellow:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-yellow {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-yellow {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
    }
    
    .custom-button-yellow .btn-icon {
        font-size: 20px;
    }
    
    .custom-button-yellow .btn-text-top,
    .custom-button-yellow .btn-text-bottom {
        font-size: 10px;
    }
}
 /* Estilo base del botón color amarillo */







 /* Estilo base del botón color gris */
.custom-button-gray {
    width: 90px;
    height: 90px;
    border: 2px solid #6c757d; /* Borde gris */
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo gris claro */
    text-align: center;
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    margin-right: 1rem; /* Espacio de 16px a la derecha */
    margin-bottom: 1rem; /* Espacio abajo para responsive */
}

/* Estilo del icono (estado normal) */
.custom-button-gray .btn-icon {
    color: #132552; /* Color navy para el icono */
    font-size: 22px;
    transition: all 0.3s ease;
}

/* Estilo del texto (estado normal) */
.custom-button-gray .btn-text-top,
.custom-button-gray .btn-text-bottom {
    font-size: 11px;
    font-weight: bold;
    color: #132552; /* Color navy para el texto */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Efecto hover */
.custom-button-gray:hover {
    background-color: #6c757d; /* Fondo gris */
    border-color: #f0f0f0; /* Borde gris claro */
}

/* Efecto hover en icono y texto */
.custom-button-gray:hover .btn-icon,
.custom-button-gray:hover .btn-text-top,
.custom-button-gray:hover .btn-text-bottom {
    color: #ffffff; /* Texto blanco en hover */
}

/* Estilo para estado deshabilitado */
.custom-button-gray:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Media queries para responsive */
@media (max-width: 992px) {
    .custom-button-gray {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .custom-button-gray {
        width: 75px;
        height: 75px;
        padding: 5px 2px;
    }
    
    .custom-button-gray .btn-icon {
        font-size: 20px;
    }
    
    .custom-button-gray .btn-text-top,
    .custom-button-gray .btn-text-bottom {
        font-size: 10px;
    }
}


.main-header {
    z-index: 1000 !important;
}



 /* Estilo base del botón color gris */
 
/************************ ESTILOS PARA BOTONES CUADRADOS CUSTOMIZADOS ************************/






/******************************* ESTILO PARA TABLA DE MODULO REQUISICION MP ****************************************/


    .minimalist-table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Segoe UI', Arial, sans-serif;
        color: #333;
        margin: 15px 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .minimalist-table th, 
    .minimalist-table td {
        padding: 12px 15px;
        text-align: left;
        border: 1px solid #e0e0e0;
    }
    
    .minimalist-table tr {
        border-bottom: 1px solid #e0e0e0;
    }
    
    .minimalist-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .minimalist-table tr:hover {
        background-color: #f5f5f5;
    }
    
    .minimalist-table .label {
        font-weight: 600;
        color: #555;
        width: 20%;
    }
    
    /* Estilos para estados */
    .status-creacion {
        background-color: #ffebee;
        color: #c62828;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
    }
    
    .status-solicitud {
        background-color: #fff3e0;
        color: #ef6c00;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
    }
    
    .status-aprobada {
        background-color: #e8f5e9;
        color: #2e7d32;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
    }
    
    /* Estilo para fecha */
    .date-highlight {
        background-color: #e3f2fd;
        color: #1565c0;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.9em;
        border-left: 3px solid #90caf9;
    }
    
    /* Estilos para motivos */
    .motivo-dano {
        background-color: #ffebee;
        color: #c62828;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
        border-left: 3px solid #ef9a9a;
    }
    
    .motivo-extravio {
        background-color: #fff8e1;
        color: #ff8f00;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
        border-left: 3px solid #ffcc80;
    }
    
    .motivo-faltante {
        background-color: #f3e5f5;
        color: #7b1fa2;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
        border-left: 3px solid #ce93d8;
    }
    
    .motivo-sample {
        background-color: #e8f5e9;
        color: #2e7d32;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
        border-left: 3px solid #a5d6a7;
    }
    
    .motivo-capacitacion {
        background-color: #e1f5fe;
        color: #0277bd;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.85em;
        border-left: 3px solid #81d4fa;
    }


/****** ESTILO PARA EL GRID DE LA TABLA **********/


    /* Estilos generales para la tabla */
    .minimalist-grid {
        font-family: 'Segoe UI', Arial, sans-serif;
        color: #333;
    }
    
    .minimalist-grid .table {
        border: 1px solid #e0e0e0;
    }
    
    .minimalist-grid .table > thead > tr > th {
        background-color: #f5f5f5;
        color: #555;
        font-weight: 600;
        border-bottom: 2px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }
    
    .minimalist-grid .table > tbody > tr > td {
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        vertical-align: middle;
    }
    
    .minimalist-grid .table > tbody > tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .minimalist-grid .table > tbody > tr:hover {
        background-color: #f5f5f5;
    }
    
    /* Estilo para el panel */
    .minimalist-panel {
        border: 1px solid #e0e0e0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .minimalist-panel > .panel-heading {
        background-color: #f5f5f5;
        color: #555;
        font-weight: 600;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Estilo para botones */
    .minimalist-grid .btn {
        border-radius: 3px;
        padding: 3px 8px;
        font-size: 12px;
    }
    
    .minimalist-grid .btn-danger {
        background-color: #ffebee;
        color: #c62828;
        border: 1px solid #ef9a9a;
    }
    
    .minimalist-grid .btn-danger:hover {
        background-color: #ef9a9a;
        color: #fff;
    }
    
    .minimalist-grid .btn-danger[disabled] {
        opacity: 0.6;
        background-color: #ffebee;
        color: #c62828;
    }
    
    /* Estilo para la celda RM */
    .rm-cell {
        background-color: #e3f2fd !important;
        color: #1565c0;
    }
    
    /* Responsividad */
    @media (max-width: 768px) {
        .minimalist-grid .table-responsive {
            border: 0;
        }
        
        .minimalist-grid .table > thead > tr > th,
        .minimalist-grid .table > tbody > tr > td {
            padding: 8px 5px;
            font-size: 0.9em;
        }
    }

/****** ESTILO PARA EL GRID DE LA TABLA **********/

/******************************* ESTILO PARA TABLA DE MODULO REQUISICION MP ****************************************/



/**************************** ESTILO MODULO MUESTREO DE TIEMPOS/ASIGNAR PRODUCCION**********************************/



    /* Estilos generales */
    .action-container {
        padding: 15px 0;
        background: transparent;
    }
    
    /* Tarjetas de acción */
    .action-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #4CAF50 0%, #5CCB5F 100%);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    .action-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    
    /* Icono de fondo */
    .action-card .bg-icon {
        position: absolute;
        font-size: 70px;
        opacity: 0.1;
        color: white;
        z-index: 0;
    }
    
    .action-card .bg-icon.asignar {
        right: 15px;
        bottom: 15px;
    }
    
    .action-card .bg-icon.recibir {
        right: 10px;
        bottom: 10px;
    }
    
    /* Botones */
    .action-card .btn-action {
        color: white;
        padding: 20px 10px;
        width: 100%;
        border: none;
        background: transparent;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }
    
    .action-card i {
        font-size: 36px;
        margin-bottom: 8px;
        display: block;
        color: white;
    }
    
    .action-card p {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Área de información */
    .status-info {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .status-info .badge {
        font-size: 12px;
        font-weight: 600;
        background-color: #5CCB5F;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        margin-bottom: 8px;
        display: inline-block;
    }
    
    .status-info b {
        font-size: 18px;
        color: #263238;
        display: block;
        margin-bottom: 5px;
    }
    
    .status-info span {
        font-size: 22px;
        color: #455a64;
        font-weight: 300;
    }
    
    .ready-status {
        font-size: 18px;
        color: #455a64;
        font-weight: 500;
        padding-top: 15px;
        margin: 0;
    }
    
    /* Responsividad */
    @media (max-width: 768px) {
        .action-card {
            padding: 15px 5px;
        }
        
        .action-card i {
            font-size: 28px;
        }
        
        .action-card p {
            font-size: 14px;
        }
        
        .action-card .bg-icon {
            font-size: 50px;
        }
        
        .status-info b {
            font-size: 16px;
        }
        
        .status-info span {
            font-size: 18px;
        }
        
        .ready-status {
            font-size: 16px;
            padding-top: 10px;
        }
    }



/*********************  CARDS PENDIENTE Y RECIBIDO *********************/
    .status-card {
        background-color: #f8f9fa;
        border-radius: 8px;
        color: #495057;
        padding: 15px 10px;
        margin-top: 5px;
        position: relative;
        overflow: hidden;
        border: 1px solid #e9ecef;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    
    .status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .status-card .bg-icon {
        position: absolute;
        font-size: 60px;
        opacity: 0.1;
        color: #495057;
        right: 10px;
        bottom: 10px;
        z-index: 0;
    }
    
    .status-card .status-title {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
        position: relative;
        z-index: 1;
    }
    
    .status-card .status-value {
        font-size: 24px;
        font-weight: 300;
        margin: 0;
        position: relative;
        z-index: 1;
        color: #212529;
    }
    
    /* Color para Pendiente */
    .pending-card {
        border-left: 4px solid #339AF0;
    }
    
    .pending-card .status-title {
        color: #339AF0;
    }
    
    /* Color para Recibido */
    .received-card {
        border-left: 4px solid #51cf66;
    }
    
    .received-card .status-title {
        color: #51cf66;
    }
    
    @media (max-width: 768px) {
        .status-card {
            padding: 12px 8px;
        }
        
        .status-card .bg-icon {
            font-size: 50px;
        }
        
        .status-card .status-title {
            font-size: 12px;
        }
        
        .status-card .status-value {
            font-size: 20px;
        }
    }

/*********************  CARDS PENDIENTE Y RECIBIDO *********************/


/**************************** ESTILO MODULO MUESTREO DE TIEMPOS/ASIGNAR PRODUCCION**********************************/





/**************************** ESTILO MODULO DETALLE DE PACK **********************************/


  .table-custom-detallepack {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    margin: 20px 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.table-custom-detallepack td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    vertical-align: top;
}

.table-custom-detallepack tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-custom-detallepack tr:hover {
    background-color: #f5f5f5;
}

.table-custom-detallepack td:first-child {
    font-weight: 600;
    color: #555;
    background-color: #f8f8f8;
}

.table-custom-detallepack .image-gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.table-custom-detallepack .image-gallery-wrapper img {
    max-height: 80px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease;
}

.table-custom-detallepack .image-gallery-wrapper img:hover {
    transform: scale(1.05);
}

.table-custom-detallepack .status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
}

.table-custom-detallepack .status-active {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.table-custom-detallepack .status-inactive {
    background-color: #ffebee;
    color: #c62828;
}

.table-custom-detallepack .total-row td {
    background-color: #f0f0f0;
    font-weight: 600;
    color: #333;
}

/* Efectos sutiles de acero plateado */
.table-custom-detallepack tr:hover td:first-child {
    background-color: #f0f0f0;
}

.table-custom-detallepack td {
    transition: background-color 0.2s ease;
}




/************* ESTILO TABLA CREAR DETALLES DE PACK ****************/

  .table-custom-createpack {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    margin: 20px 0;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
    background: white;
}

.table-custom-createpack td {
    padding: 12px 15px;
    border: 1px solid #e6e6e6;
    vertical-align: middle;
}

.table-custom-createpack tr:nth-child(even) {
    background-color: #fafafa;
}

.table-custom-createpack tr:hover {
    background-color: #f5f5f5;
}

.table-custom-createpack td:first-child {
    font-weight: 600;
    color: #555;
    background-color: #f8f8f8;
    width: 30%;
}

.table-custom-createpack .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-custom-createpack .status-active {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.table-custom-createpack .status-inactive {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* Efectos sutiles */
.table-custom-createpack tr:hover td:first-child {
    background-color: #f0f0f0;
}

.table-custom-createpack td {
    transition: all 0.2s ease;
}

/************* ESTILO TABLA CREAR DETALLES DE PACK ****************/






/************* ESTILO TABLA DETALLES DE JABA ****************/
    .table-custom-detallejaba {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    margin: 20px 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    background: white;
}

.table-custom-detallejaba td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
}

.table-custom-detallejaba tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-custom-detallejaba tr:hover {
    background-color: #f5f5f5;
}

.table-custom-detallejaba td:first-child {
    font-weight: 600;
    color: #555;
    background-color: #f8f8f8;
    width: 20%;
}

.table-custom-detallejaba .highlight-row td {
    background-color: #fff3f0;
    font-weight: 600;
}

.table-custom-detallejaba .badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
}

.table-custom-detallejaba .bg-navy {
    background-color: #001f3f;
    color: white;
}

.table-custom-detallejaba .bg-orange {
    background-color: #FF851B;
    color: white;
}

.table-custom-detallejaba .bg-red {
    background-color: #FF4136;
    color: white;
}

.table-custom-detallejaba .status-active {
    background-color: #2ecc40;
    color: white;
}

.table-custom-detallejaba .status-inactive {
    background-color: #ff4136;
    color: white;
}

/* Efectos sutiles */
.table-custom-detallejaba tr:hover td:first-child {
    background-color: #f0f0f0;
}

.table-custom-detallejaba td {
    transition: all 0.2s ease;
}
/************* ESTILO TABLA DETALLES DE JABA ****************/





/************* ESTILO TABLA DETALLES DE ACTIVO ****************/

.table-custom-activodet {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    margin: 20px 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.table-custom-activodet td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.table-custom-activodet tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-custom-activodet tr:hover {
    background-color: #f5f5f5;
}

.table-custom-activodet tr:hover td:first-child {
    background-color: #f0f0f0;
}

.table-custom-activodet td:first-child {
    font-weight: 600;
    color: #555;
    background-color: #f8f8f8;
    width: 200px;
}

.table-custom-activodet .badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
}

/* Colores para estados */
.table-custom-activodet .bg-green {
    background-color: #2ecc40;
    color: white;
}

.table-custom-activodet .bg-red {
    background-color: #FF4136;
    color: white;
}

/* Estilo para celdas que ocupan múltiples columnas */
.table-custom-activodet td[colspan] {
    background-color: #fefefe;
}

/************* ESTILO TABLA DETALLES DE ACTIVO ****************/

/**************************** ESTILO MODULO DETALLE DE PACK **********************************/






/**************** ESTILO PARA MENU LATERAL ****************/


/* Estilos generales para el menú lateral */
.sidebar {
    background-color: #FFF !important; /* Fondo gris claro */
    color: #132552 !important; /* Color del texto */
  }
  
  /* Estilos para los elementos principales del menú */
  .skin-blue .sidebar-menu > li > a,
  .skin-blue .sidebar-menu > li > i {
    color: #171a4a !important; /* Color del texto e íconos del menú */
    padding: 12px 15px;
    display: block;
  }
  
  /* Hover: cambia el texto, el ícono y la barra izquierda a rojo, fondo blanco */
  .skin-blue .sidebar-menu > li:hover > a,
  .skin-blue .sidebar-menu > li:hover > i {
    color: red !important;
    background-color: white !important;
  }
  
  .skin-blue .sidebar-menu > li:hover {
    border-left: 3px solid rgb(92, 91, 91) !important; /* Barra gris a la izquierda */
  }
  
  /* Estilos para los elementos activos y desplegados */
  .skin-blue .sidebar-menu > li.active > a,
  .skin-blue .sidebar-menu > li.menu-open > a {
    background-color: white !important; /* Fondo blanco para elementos activos */
    color: #171a4a !important; /* Mantiene el color en activo y menú abierto */
  }
  
  /* Estilos para las opciones dentro del menú desplegable */
  .skin-blue .sidebar-menu > li.menu-open > ul,
  .skin-blue .sidebar-menu > li.active > ul {
    background-color: #f8f8f8 !important; /* Fondo gris claro para submenús */
  }
  
  .skin-blue .sidebar-menu > li.menu-open > ul > li > a,
  .skin-blue .sidebar-menu > li.active > ul > li > a,
  .skin-blue .sidebar-menu > li.menu-open > ul > li > i,
  .skin-blue .sidebar-menu > li.active > ul > li > i {
    color: #171a4a !important; /* Color del texto e íconos del submenú */
  }
  
  /* Asegurar que los estilos se mantengan después de cerrar el menú */
  .skin-blue .sidebar-menu > li > ul {
    background-color: white !important; /* Mantiene el fondo blanco incluso al cerrar */
  }
  
  .skin-blue .sidebar-menu > li > ul > li > a,
  .skin-blue .sidebar-menu > li > ul > li > i {
    color: #171a4a !important; /* Mantiene el color del texto e íconos después de cerrar */
  }
  
  /* Estilos para los bordes decorativos combinados con sombra */
  .skin-blue .sidebar-menu > li {
    position: relative;
  }
  
  .skin-blue .sidebar-menu > li::before,
  .skin-blue .sidebar-menu > li::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%; /* Hacer que ambas sombras ocupen el mismo ancho */
    height: 5px; /* Altura de la sombra */
    border-radius: 10px;
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2); /* Sombra combinada */
  }
  
  /* Ya no es necesario diferenciar entre ::before y ::after */
  


ul, ol {
    list-style: none;
    padding-left: 0; /* Elimina el espacio adicional en la izquierda */
}

.icon-size { 
    width: 30px; /* Ajusta el tamaño de la imagen */
    height: 30px;
    transform: translateY(-7px); /* Ajusta según sea necesario */
    flex-shrink: 0; /* Evita que la imagen se reduzca demasiado */
    transition: all .2s ease-in-out;
    margin-top: 15px;
}

.menu-item {
    color: #132552; /* Color de texto por defecto */
    display: flex;
    align-items: center; /* Alinea verticalmente la imagen y el texto */
    gap: 12px; /* Reduce el espacio entre la imagen y el texto */
    width: 100%; /* Asegura que el item abarque todo el ancho del contenedor (sidebar) */
    height: 40px; /* Ajusta la altura total del menú para que sea fija */
    padding: 10px 15px; /* Mantiene el padding constante */
    overflow: hidden; /* Evita que los elementos lo expandan */
    white-space: nowrap; /* Evita saltos de línea */
    background-color: #d3d3d359; /* Color de fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    margin-bottom: 4px; /* Añade espacio entre cada opción del menú */
    transition: background-color 0.2s ease, color 0.2s ease; /* Solo transición para el cambio de color */
    box-sizing: border-box; /* Asegura que el padding y border no afecten el tamaño */
}

/* Estilo cuando pasas el cursor sobre las opciones del menú */
.menu-item:hover {
    color: #FF0038; /* Cambia el color del texto a rojo cuando el mouse pasa sobre la opción */
    background-color: #f5f5f5; /* Cambia el fondo del elemento */
    /* No hay transiciones de tamaño ni padding */
}

/* Ocultar la flecha */
.pull-right-container {
    display: none; /* Esto oculta la flecha */
}

/* Opcional: Asegura que los submenús se desplieguen cuando se haga clic en cualquier opción del menú principal */
ul.collapse {
    display: none;
}

ul.collapse.show {
    display: block;
}

/* Estilo para los elementos <li> dentro del submenú */
ul.collapse li {
    color: #132552; /* Color de texto por defecto */
}

ul.collapse li a {
    color: inherit; /* Hereda el color del li */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

/* Cambio de color de texto cuando el mouse pasa sobre las opciones del submenú */
ul.collapse li:hover {
    color: #FF0038; /* Rojo cuando se pasa el mouse */
}


.mimagen {
    margin-top: -20px;
    margin-bottom: 5px;
    width: 150px;  /* Aumentar el tamaño de la imagen */
    height: auto;  /* Mantener la proporción */
}


.alineartexto {
    margin-left: 23px; /* Ajusta el valor según lo necesites */
}





/**************** ESTILO PARA MENU LATERAL ****************/








/* =============================================== */
/* =============================================== /*
/*------------ ESTILOS MODULO JURIDICO -------------*

  

/* ESTILO MENU */

.navbar-juridico {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  font-family: 'Montserrat', sans-serif;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.nav-list-juridico {
    justify-content: center !important;
    margin: 0 auto;
  }

/* Centrado horizontal del menú principal */
@media (min-width: 769px) {
  .menu-collapse {
    justify-content: center !important;
  }

  

.container-juridico {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.brand-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.navbar-brand-juridico {
  color: #2c3e50;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: 'Montserrat', serif;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.navbar-brand-juridico:hover {
  color: #5d4e6b;
  transform: scale(1.02);
}

/* Iconos */
.navbar-juridico i {
  font-size: 0.95rem;
  width: 22px;
  text-align: center;
  transition: all 0.3s ease;
}

.dropdown-icon {
  font-size: 0.7rem;
  margin-left: 6px;
  transition: transform 0.3s ease;
}

/* Botón de toggle */
.toggle-button {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  display: none;
  color: #2c3e50;
  padding: 8px;
  transition: all 0.3s ease;
}

.toggle-button:hover {
  color: #5d4e6b;
  transform: scale(1.1);
}

/* Menú principal */
.menu-collapse {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  overflow: hidden; /* Evita desbordamiento */
}

.nav-list-juridico {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.nav-list-juridico li {
  flex-shrink: 0; /* Evita que los items se reduzcan */
}

.nav-list-juridico li a {
  color: #4a5568;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

.nav-list-juridico li a:hover {
  color: #5d4e6b;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.nav-list-juridico li a:hover i {
  transform: scale(1.1);
  color: #7f6b8e;
}

.active-juridico a {
  color: #5d4e6b;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.active-juridico a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background-color: #5d4e6b;
  border-radius: 2px;
}

/* Dropdown */
.dropdown-juridico {
  position: relative;
}

.dropdown-juridico:hover .dropdown-menu-juridico {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

.dropdown-juridico:hover .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-menu-juridico {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 240px;
  padding: 8px 0;
  z-index: 1000;
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
}

.dropdown-menu-juridico li {
  display: block;
}

.dropdown-menu-juridico li a {
  display: flex;
  padding: 12px 24px;
  color: #4a5568;
  font-size: 0.92rem;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}

.dropdown-menu-juridico li a:hover {
  background-color: rgba(93, 78, 107, 0.08);
  transform: translateX(4px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1200px) {
  .container-juridico {
    padding: 0 20px;
  }
  
  .nav-list-juridico li a {
    padding: 10px 10px;
    font-size: 0.85rem;
    gap: 6px;
  }
}

@media (max-width: 992px) {
  .nav-list-juridico li a {
    padding: 10px 8px;
    font-size: 0.8rem;
  }
  
  .navbar-juridico i {
    font-size: 0.85rem;
    width: 18px;
  }
}

@media (max-width: 768px) {
  .toggle-button {
    display: block;
  }

  .brand-toggle {
    margin-right: 0;
    width: 100%;
    justify-content: space-between;
  }

  .menu-collapse {
    display: none;
    width: 100%;
    margin-top: 15px;
    flex-direction: column;
    overflow: visible;
  }

  .menu-collapse.active {
    display: flex;
  }

  .nav-list-juridico {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: flex-start;
  }

  .nav-list-juridico li {
    width: 100%;
  }

  .nav-list-juridico li a {
    padding: 12px 20px;
    background-color: rgba(255, 255, 255, 0.85);
    width: 100%;
    box-sizing: border-box;
  }

  .dropdown-menu-juridico {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 20px;
    background: rgba(255, 255, 255, 0.7);
    animation: none;
    width: 100%;
  }

  .dropdown-menu-juridico li a:hover {
    transform: translateX(8px);
  }

  .active-juridico a::after {
    display: none;
  }
}

/* ESTILO MENU */



/* ESTILO FOOTER */

.footer-minimal {
  background: linear-gradient(135deg, #f9fafb, #e9ecf1);
  border-top: 1px solid #dcdfe3;
  padding: 20px 30px;
 /* font-family: 'Instagram Sans';*/
  font-size: 0.9rem;
  color: #4a5568;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.03);
  margin-left: 250px; /* Ajusta este valor según el ancho de tu menú lateral */
  width: calc(100% - 250px); /* Resta el ancho del menú lateral */
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-left strong {
  font-weight: 600;
  color: #2d3748;
}

.version-label {
  font-weight: 500;
  color: #718096;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .footer-minimal {
    margin-left: 0;
    width: 100%;
    padding: 15px;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ESTILO FOOTER */



/* ESTILO PROVEEDORES */

.proveedores-encabezado {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.proveedores-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  color: #132552;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.proveedores-titulo i {
  color: #132552;
  font-size: 1.3rem;
}

.proveedores-btn-agregar {
  font-family: 'Montserrat', sans-serif;
  background-color: #f0f0f0;
  color: #132552;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #001f3f; /* <-- borde navy */
}

.proveedores-btn-agregar:hover {
  text-decoration: none;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  background-color: #e0e0e0;
}

.proveedores-btn-agregar i {
  margin-right: 6px;
  transition: transform 0.3s ease;
}

.proveedores-btn-agregar:hover i {
  transform: scale(1.1);
}


.ciex-btn-agregar {
  font-family: 'Montserrat', sans-serif;
  background-color: #f0f0f0;
  color: #358248;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #358248; /* <-- borde navy */
}

.ciex-btn-agregar:hover {
  text-decoration: none;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  background-color: #e0e0e0;
}

.ciex-btn-agregar i {
  margin-right: 6px;
  transition: transform 0.3s ease;
}

.ciex-btn-agregar:hover i {
  transform: scale(1.1);
}


/*TABLA PROVEEDORES*/
/* Tabla de Proveedores: estilo general */
.tabla-proveedores .kv-grid-table {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: #333;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

/* Cabecera */
.tabla-proveedores .kv-grid-table thead th {
  background-color: #f3f3f3;
  color: #1a237e;
  font-weight: 600;
  border-bottom: 2px solid #c5cae9;
  text-align: center;
  padding: 6px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Celdas */
.tabla-proveedores .kv-grid-table tbody td {
  padding: 6px 4px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Hover */
.tabla-proveedores .kv-grid-table tbody tr:hover {
  background-color: #f5f5f5;
}

/* Botones personalizados */
.tabla-proveedores .btn-borde-purple {
  padding: 3px 8px;
  font-size: 0.75rem;
}

.tabla-proveedores .btn-borde-purple:hover {
  background-color: #4a148c;
  color: white;
}

/* Exportar botón */
.tabla-proveedores .btn.bg-purple {
  padding: 4px 10px;
  font-size: 0.8rem;
}

.tabla-proveedores .btn.bg-purple:hover {
  background-color: #4a148c;
  box-shadow: 0 4px 10px rgba(106, 27, 154, 0.2);
}

/* Badges personalizados */
.badge.bg-purple {
  background-color: #6a1b9a;
  color: white;
  font-weight: 500;
}



.badge.bg-orange {
  background-color: #ff7043;
  color: white;
}

.badge.bg-green {
  background-color: #43a047;
  color: white;
}

.badge.bg-blue {
  background-color: #1e88e5;
  color: white;
}

.top-grid {
  background-color: #f5f5f5; /* Plateado claro */
  color: #2c3e50; /* Texto gris oscuro o navy elegante */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 2px solid #dcdcdc;
  padding: 10px 15px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}


/* Estilo uniforme para botones del toolbar */
.tabla-proveedores-toolbar-btn {
  background-color: #f5f5f5;         /* Fondo plateado claro */
  color: #1a237e;                    /* Texto navy */
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid #cfd8dc;         /* Borde gris claro */
  border-radius: 6px;
  padding: 8px 16px;
  margin-right: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.tabla-proveedores-toolbar-btn:hover {
  background-color: #e0e0e0;
  transform: scale(1.03);
  text-decoration: none;
  color: #0d47a1;
}

.tabla-proveedores-toolbar-btn i {
  margin-right: 6px;
}


/* PROVEEDORES /VIEW */

.proveedor-header {
  margin-bottom: 15px;
}

.proveedor-text {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-green {
  color: #28a745; /* o cualquier verde que prefieras */
}


/************************/




/* PROVEEDORES /VIEW */

/*TABLA PROVEEDORES*/


/* ESTILO PROVEEDORES */




/*BOTONES TABLAS*/

.badge-proveedor-purple {
  display: inline-block;
  padding: 0.4em 0.7em;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  color: #132552; /* Color del texto */
  background-color: #DBD6EE; /* Fondo púrpura */
  border: 1px solid #4a148c; /* Borde púrpura oscuro */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1;
  white-space: nowrap;
}

.badge-proveedor-orange {
  display: inline-block;
  padding: 0.4em 0.7em;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  color: #132552; /* Color del texto */
  background-color: #FFCC50; /* Fondo púrpura */
  border: 1px solid #4a148c; /* Borde púrpura oscuro */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1;
  white-space: nowrap;
}

.badge-proveedor-green {
  display: inline-block;
  padding: 0.4em 0.7em;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  color: #132552; /* Color del texto */
  background-color: #96D74C; /* Fondo púrpura */
  border: 1px solid #4a148c; /* Borde púrpura oscuro */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1;
  white-space: nowrap;
}

.badge-proveedor-blue {
  display: inline-block;
  padding: 0.4em 0.7em;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  color: #132552; /* Color del texto */
  background-color: #B0E0E6; /* Fondo púrpura */
  border: 1px solid #4a148c; /* Borde púrpura oscuro */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1;
  white-space: nowrap;
}


.btn-borde-green-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;       /* Un poco más grande que btn-sm */
  font-size: 1rem;         /* Texto más grande */
  color: #2e7d32;          /* Verde navy suave */
  background-color: transparent;
  border: 2px solid #2e7d32;
  border-radius: 6px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.btn-borde-green-edit:hover, 
.btn-borde-green-edit:focus {
  background-color: #2e7d32;
  color: white;
  text-decoration: none;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
}

.btn-borde-green-edit .fa-pencil-alt {
  margin: 0; /* Sin margen para el icono */
  font-size: 1.2rem;
}




.btn-borde-red-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;       /* Un poco más grande que btn-sm */
  font-size: 1rem;         /* Texto más grande */
  color: #FF0038;          /* Verde navy suave */
  background-color: transparent;
  border: 2px solid #FF0038;
  border-radius: 6px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.btn-borde-red-delete:hover, 
.btn-borde-red-delete:focus {
  background-color: #FF0038;
  color: white;
  text-decoration: none;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
}

.btn-borde-red-delete .fa fa-trash {
  margin: 0; /* Sin margen para el icono */
  font-size: 1.2rem;
}



/*BOTONES TABLAS*/


/*BOTONES HEADER*/

/*NARANJA*/
.btn-header-orange {
  background-color: #f5f5f5; /* plateado claro */
  color: #e67e22; /* naranja */
  border: 2px solid #e67e22;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-header-orange:hover {
  background-color: #e67e22; /* naranja intenso */
  color: #f5f5f5; /* texto plateado */
  border-color: #f5f5f5; /* bordes plateados */
  box-shadow: 0 6px 12px rgba(230, 126, 34, 0.4);
  transform: scale(1.05);
}

.btn-header-orange:hover .fa {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
/*NARANJA*/

/*VERDE*/
.btn-header-green {
  background-color: #f5f5f5; /* plateado claro */
  color: #4CAF50; /* naranja */
  border: 2px solid #4CAF50;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-header-green:hover {
  background-color: #4CAF50; /* naranja intenso */
  color: #f5f5f5; /* texto plateado */
  border-color: #f5f5f5; /* bordes plateados */
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
  transform: scale(1.05);
}

.btn-header-green:hover .fa {
  transform: scale(1.2);
  transition: transform 0.3s ease;  
}

/*VERDE*/


/*AZUL*/
.btn-header-blue {
  background-color: #f5f5f5; /* plateado claro */
  color: #2978B5; /* naranja */
  border: 2px solid #2978B5;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-header-blue:hover {
  background-color: #2978B5; /* naranja intenso */
  color: #f5f5f5; /* texto plateado */
  border-color: #f5f5f5; /* bordes plateados */
  box-shadow: 0 6px 12px rgba(41, 120, 181,0.4);
  transform: scale(1.05);
}

.btn-header-blue:hover .fa {
  transform: scale(1.2);
  transition: transform 0.3s ease;  
}
/*AZUL*/


/*NAVY*/
.btn-header-navy {
  background-color: #f5f5f5; /* plateado claro */
  color: #1a2a6c; /* naranja */
  border: 2px solid #1a2a6c;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-header-navy:hover {
  background-color: #1a2a6c; /* naranja intenso */
  color: #f5f5f5; /* texto plateado */
  border-color: #f5f5f5; /* bordes plateados */
  box-shadow: 0 6px 12px rgba(26, 42, 108, 0.4);
  transform: scale(1.05);
}

.btn-header-navy:hover .fa {
  transform: scale(1.2);
  transition: transform 0.3s ease;  
}
/*NAVY*/



.row > div > a {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  margin-right: 10px;
  line-height: 1;
}


/*BOTONES HEADER*/


/* =============================================== */
/* =============================================== /*
/*------------ ESTILOS MODULO JURIDICO -------------*









/* =============================================== */
/* =============================================== /*
/*------------ ESTILOS MODULO RRHH -------------*





/**********************************************************/
/****************ESTILOS PARA LOS TITULOS******************/
/**********************************************************/



.titulorh {
   /* font-family: 'Instagram Sans';*/
    font-size: 28px;
    font-weight: 600;
    color: #072E33;
    /* border-left: 5px solid #072E33;*/
    padding-left: 15px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}


/**********************************************************/
/****************ESTILOS PARA LOS TITULOS******************/
/**********************************************************/




/**********************************************************/
/****************ESTILOS PARA LOS DATATABLE******************/
/**********************************************************/



  .custom-grid-view {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 0.875rem; /* 14px */
  }
  
  .custom-grid-view table {
    border-collapse: separate;
    border-spacing: 0 1px; /* Espacio vertical mínimo entre filas */
    width: 100%;
    margin-bottom: 0;
  }

  .custom-grid-view .table > thead > tr > th {
    padding: 6px 8px;
    vertical-align: middle;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
  }

  .custom-grid-view .table > tbody > tr > td {
    padding: 4px 8px; /* Padding compacto pero legible */
    vertical-align: middle;
    border-top: 1px solid #e9ecef;
    line-height: 1.3;
  }

  /* Efecto hover más sutil */
  .custom-grid-view .table-hover > tbody > tr:hover > td {
    background-color: #f1f5fd;
  }

  /* Filas alternas con color muy tenue */
  .custom-grid-view .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(248, 249, 250, 0.5);
  }

  /* Bordes laterales para efecto de separación visual */
  .custom-grid-view .table > tbody > tr > td:first-child {
    border-left: 2px solid transparent;
  }
  
  .custom-grid-view .table > tbody > tr:hover > td:first-child {
    border-left: 2px solid #3d8bfd;
  }

  /* Ajuste para el paginador */
  .custom-grid-view .pagination {
    margin-top: 12px;
    margin-bottom: 6px;
  }


  /****************************************/

  

  /* Estilo minimalista para DataTable - custom-grid-view2 */
  .custom-grid-view2 .table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      font-size: 0.875rem; /* 14px */
      color: #333;
  }

  .custom-grid-view2 .table thead th {
      background-color: #f8f9fa;
      border-bottom: 2px solid #dee2e6;
      padding: 8px 12px;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
  }

  .custom-grid-view2 .table tbody td {
      padding: 8px 12px;
      border-bottom: 1px solid #e9ecef;
      vertical-align: middle;
      white-space: nowrap;
      line-height: 1.3;
  }

  .custom-grid-view2 .table tbody tr:not(:last-child) td {
      border-bottom: 1px solid #e9ecef; /* Línea divisoria sutil */
  }

  .custom-grid-view2 .table tbody tr:hover {
      background-color: #f8f9fa;
  }

  /* Elimina espacios innecesarios y compacta la tabla */
  .custom-grid-view2 .table-condensed > thead > tr > th,
  .custom-grid-view2 .table-condensed > tbody > tr > td {
      padding: 6px 10px;
  }

  /* Estilo para paginación minimalista */
  .custom-grid-view2 .pagination {
      margin: 12px 0;
      font-size: 0.85rem;
  }

  /* Ajuste para botones de acción */
  .custom-grid-view2 .action-column {
      white-space: nowrap;
      width: 1%;
  }






/**********************************************************/
/****************ESTILOS PARA LOS DATATABLE******************/
/**********************************************************/







/**********************************************************/
/****************ESTILOS PARA LOS BOTONES******************/
/**********************************************************/



/*************BOTONES DE ACCIONES HEADER****************/

.btnrh-titverde {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #427322; /* Verde profesional */
    color: #427322;
    padding: 10px 20px;
    font-size: 15px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titverde:hover {
    background-color: #427322; /* Verde de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


.btnrh-titverde2 {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #427322; /* Verde profesional */
    color: #427322;
    padding: 5px 10px;
    font-size: 12px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;

       /* Propiedades para centrado perfecto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    min-width: 80px; /* Ancho mínimo sugerido */
    height: 32px; /* Altura fija para consistencia */
    line-height: 1; /* Reset de línea de base */
    white-space: nowrap; /* Evita salto de línea */
}

.btnrh-titverde2:hover {
    background-color: #427322; /* Verde de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


/********************************************************/


.btnrh-titrojo {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #940000; /* Rojo profesional */
    color: #940000;
    padding: 10px 20px;
    font-size: 15px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titrojo:hover {
    background-color: #940000; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


.btnrh-titrojo2 {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #940000; /* Rojo profesional */
    color: #940000;
    padding: 5px 10px;
    font-size: 12px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titrojo2:hover {
    background-color: #940000; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}



/********************************************************/


.btnrh-titnavy {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #132552; /* Rojo profesional */
    color: #132552;
    padding: 10px 20px;
    font-size: 15px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titnavy:hover {
    background-color: #132552; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


.btnrh-titnavy2 {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #132552; /* Rojo profesional */
    color: #132552;
    padding: 5px 10px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titnavy2:hover {
    background-color: #132552; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}






/********************************************************/


.btnrh-titnaranja {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #fda61b; /* Rojo profesional */
    color: #fda61b;
    padding: 10px 20px;
    font-size: 15px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titnaranja:hover {
    background-color: #fda61b; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


.btnrh-titnaranja2 {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #fda61b; /* Rojo profesional */
    color: #fda61b;
    padding: 5px 10px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titnaranja2:hover {
    background-color: #fda61b; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}



/********************************************************/


.btnrh-titazul {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #000041; /* Rojo profesional */
    color: #000041;
    padding: 10px 20px;
    font-size: 15px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titazul:hover {
    background-color: #000041; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


.btnrh-titazul2 {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #000041; /* Rojo profesional */
    color: #000041;
    padding: 5px 10px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titazul2:hover {
    background-color: #000041; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}



/********************************************************/


.btnrh-titverdec {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #51CC00; /* Rojo profesional */
    color: #51CC00;
    padding: 10px 20px;
    font-size: 15px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titverdec:hover {
    background-color: #51CC00; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}


.btnrh-titverdec2 {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #51CC00; /* Rojo profesional */
    color: #51CC00;
    padding: 5px 10px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titverdec2:hover {
    background-color: #51CC00; /* Rojo de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}



/********************************************************/







.btnrh-titazul {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #000041; /* Azul profesional */
    color: #000041;
    padding: 10px 20px;
    font-size: 15px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titazul:hover {
    background-color: #000041; /* Azul de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}



.btnrh-titgris {
    background-color: #f8f8f8; /* Plateado claro */
    border: 2px solid #4e4e4e; /* Gris profesional */
    color: #4e4e4e;
    padding: 10px 20px;
    font-size: 15px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    text-decoration: none !important;
}

.btnrh-titgris:hover {
    background-color: #4e4e4e; /* Gris de fondo */
    color: #fff;               /* Texto blanco */
    text-decoration: none !important;
}



/*************BOTONES DE ACCIONES HEADER****************/



/*************DIVS PARA TOTALES****************/


.divgrh {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* Degradado plateado */
    border: 1px solid #dee2e6; /* Borde suave */
    border-radius: 10px; /* Esquinas redondeadas */
    padding: 20px;
    margin: 5px 0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; /* Tipografía moderna */
    color: #495057; /* Color de texto equilibrado */
    transition: none;
}



.divrh {
    background-color: #f8f9fa;  /* Fondo claro */
    border: 1px solid #e0e0e0;  /* Borde sutil */
    border-radius: 8px;         /* Esquinas redondeadas */
    padding: 18px;
    margin: 10px 0;
    font-family: 'Arial', sans-serif;
    color: #333;               /* Texto oscuro */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra muy tenue */
    transition: none;           /* Sin efectos hover */
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
        height: auto;               /* Altura flexible según contenido */
    min-height: 60px;           /* Altura mínima sugerida (opcional) */    
}





/*************DIVS PARA TOTALES****************/




/*************BOTONES DE DATATABLES****************/

.btnrh-nbverde {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #2e8b57; /* Verde profesional (SeaGreen) */
    color: #2e8b57; /* Texto verde para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbverde2 {
    background-color: #2e8b57; 
    border: 1.5px solid #2e8b57; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
    font-family: 'Instagram Sans';
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbverde2:hover {
    color: #FFF !important;
    cursor: pointer;
}

/********************************/

.btnrh-nbrojo {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #940000; /* Rojo profesional (SeaGreen) */
    color: #940000; /* Texto verde para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbrojo2 {
    background-color: #940000; 
    border: 1.5px solid #940000; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbrojo2:hover {
    color: #FFF !important;
    cursor: pointer;
}

/**********************************/

.btnrh-nbnavy {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #132552; /* Navy profesional (SeaGreen) */
    color: #132552; /* Texto verde para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbnavy2 {
    background-color: #132552; 
    border: 1.5px solid #132552; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
    /*font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbnavy2:hover {
    color: #FFF !important;
    cursor: pointer;
}


/**********************************/


.btnrh-nbazul {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #1a09f9; /* Azul profesional (SeaGreen) */
    color: #1a09f9; /* Texto verde para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbazul2 {
    background-color: #1a09f9; 
    border: 1.5px solid #1a09f9; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
    font-family: 'Instagram Sans';
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbazul2:hover {
    color: #FFF !important;
    cursor: pointer;
}


/**********************************/


.btnrh-nbnaranja {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #fda61b; /* Naranja profesional (SeaGreen) */
    color: #fda61b; /* Texto naranja para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbnaranja2 {
    background-color: #fda61b; 
    border: 1.5px solid #fda61b; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
    font-family: 'Instagram Sans';
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbnaranja2:hover {
    color: #FFF !important;
    cursor: pointer;
}


/**********************************/


.btnrh-nbmorado {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #800180; /* Morado profesional (SeaGreen) */
    color: #800180; /* Texto morado para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbmorado2 {
    background-color: #800180; 
    border: 1.5px solid #800180; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
    font-family: 'Instagram Sans';
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbmorado2:hover {
    color: #FFF !important;
    cursor: pointer;
}



/********************************/

.btnrh-nbgris {
    background-color: #f8f8f8; /* Plateado claro */
    border: 1.5px solid #4e4e4e; /* Gris profesional (SeaGreen) */
    color: #4e4e4e; /* Texto verde para contraste en estado normal */
    padding: 1px 8px;
    font-size: 12px;
  /*  font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbgris2 {
    background-color: #4e4e4e; 
    border: 1.5px solid #4e4e4e; 
    color: #fff; 
    padding: 1px 8px;
    font-size: 12px;
   /* font-family: 'Instagram Sans';*/
    border-radius: 3px;
    cursor: default;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: none;
    letter-spacing: 0.4px;
    font-weight: 500;
    outline: none; /* Elimina el contorno al hacer focus para mejor estética */
}

.btnrh-nbgris2:hover {
    color: #FFF !important;
    cursor: pointer;
}



/**********BOTON ELIMINAR************/


/* Botón Eliminar Compacto - btnrh-delete */
.btnrh-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #940000;
    color: white !important;
    border: none;
    border-radius: 4px;
    padding: 6px 8px; /* Reducido de 6px 12px */
    font-size: 14px;  /* Reducido de 13px */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: auto; /* Elimina cualquier ancho fijo */
    min-width: 0; /* Elimina el mínimo ancho */
    text-decoration: none !important;
}

.btnrh-delete i {
    margin-right: 4px; /* Reducido de 6px */
    transition: transform 0.3s ease;
    font-size: 12px; /* Ajuste para icono */
}

/* Versión solo icono (más compacta) */
.btnrh-delete.btn-icon {
    padding: 4px; /* Más compacto */
    width: 26px;  /* Ancho fijo pequeño */
    height: 26px; /* Alto fijo */
}

.btnrh-delete.btn-icon i {
    margin: 0; /* Sin margen en versión icono */
}



/* Botón Eliminar Compacto - btnrh-delete */
.btnrh-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2e8b57;
    color: white !important;
    border: none;
    border-radius: 4px;
    padding: 6px 8px; /* Reducido de 6px 12px */
    font-size: 14px;  /* Reducido de 13px */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: auto; /* Elimina cualquier ancho fijo */
    min-width: 0; /* Elimina el mínimo ancho */
    text-decoration: none !important;
}

.btnrh-update i {
    margin-right: 4px; /* Reducido de 6px */
    transition: transform 0.3s ease;
    font-size: 12px; /* Ajuste para icono */
}

/* Versión solo icono (más compacta) */
.btnrh-update.btn-icon {
    padding: 4px; /* Más compacto */
    width: 26px;  /* Ancho fijo pequeño */
    height: 35px; /* Alto fijo */
}

.btnrh-update.btn-icon i {
    margin: 0; /* Sin margen en versión icono */
}



/**********BOTON ELIMINAR************/


/*************BOTONES DE DATATABLES****************/

/**********************************************************/
/****************ESTILOS PARA LOS BOTONES******************/
/**********************************************************/




/* =============================================== */
/* =============================================== /*
/*------------ ESTILOS MODULO RRHH -------------*



/***************************************************************************************************************/
/*************************************ESTILOS PARA MENUS LATERALES*********************************************/
/***************************************************************************************************************/



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 10 - ADMINISTRADOR */
/* --------------------------------------------- */

  .menu10-admin,
  .menu10-admin-sub {
    list-style: none;
    padding: 0;
    margin: 0;
  /*  font-family: 'Instagram Sans';*/
  }

  .menu10-admin > li > a,
  .menu10-admin-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu10-admin > li.active > a,
  .menu10-admin-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu10-admin > li > a:hover {
      background-color: #1a4b8c; /* Navy suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #1a4b8c;
  }

  /* Efecto hover para subitems */
  .menu10-admin-sub a:hover {
      background-color: #f0f0f0; /* Plateado */
      color: #333;
      border: 1px solid #e0e0e0;
      transform: translateX(3px);
  }

  .menu10-admin-sub {
      padding-left: 15px;
      display: none;
  }

  .menu10-admin-sub li a {
      font-size: 14px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu10-admin > li > a > .fa,
  .menu10-admin-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu10-admin > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu10-admin-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu10-admin-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu10-admin > li > a,
  .main-sidebar.collapsed .menu10-admin-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu10-admin > li > a > span,
  .main-sidebar.collapsed .menu10-admin-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu10-admin > li > a > .fa,
  .main-sidebar.collapsed .menu10-admin-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu10-admin > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu10-admin > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu10-admin-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu10-admin > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu10-admin > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 10 - ADMINISTRADOR */
/* --------------------------------------------- */








/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 11 - ENCARGADO DE COMPRAS */
/* --------------------------------------------- */

  .menu11-encargadodecompras,
  .menu11-encargadodecompras-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
  }

  .menu11-encargadodecompras > li > a,
  .menu11-encargadodecompras-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu11-encargadodecompras > li.active > a,
  .menu11-encargadodecompras-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu11-encargadodecompras > li > a:hover {
      background-color: #1a4b8c; /* Navy suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #1a4b8c;
  }

  /* Efecto hover para subitems */
  .menu11-encargadodecompras-sub a:hover {
      background-color: #f0f0f0; /* Plateado */
      color: #333;
      border: 1px solid #e0e0e0;
      transform: translateX(3px);
  }

  .menu11-encargadodecompras-sub {
      padding-left: 15px;
      display: none;
  }

  .menu11-encargadodecompras-sub li a {
      font-size: 14px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu11-encargadodecompras > li > a > .fa,
  .menu11-encargadodecompras-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu11-encargadodecompras > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu11-encargadodecompras-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu11-encargadodecompras-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu11-encargadodecompras > li > a,
  .main-sidebar.collapsed .menu11-encargadodecompras-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu11-encargadodecompras > li > a > span,
  .main-sidebar.collapsed .menu11-encargadodecompras-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu11-encargadodecompras > li > a > .fa,
  .main-sidebar.collapsed .menu11-encargadodecompras-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu11-encargadodecompras > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu11-encargadodecompras > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu11-encargadodecompras-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu11-encargadodecompras > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu11-encargadodecompras > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 11 - ENCARGADO DE COMPRAS */
/* --------------------------------------------- */




/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 13 - ENCARGADO DESIGNACION PO */
/* --------------------------------------------- */

  .menu13-encargadodesignacionpo,
  .menu13-encargadodesignacionpo-sub {
    list-style: none;
    padding: 0;
    margin: 0;
   /* font-family: 'Instagram Sans';*/
  }

  .menu13-encargadodesignacionpo > li > a,
  .menu13-encargadodesignacionpo-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu13-encargadodesignacionpo > li.active > a,
  .menu13-encargadodesignacionpo-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu13-encargadodesignacionpo > li > a:hover {
      background-color: #5CCB5F; /* Verde suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #5CCB5F;
  }

  /* Efecto hover para subitems */
  .menu13-encargadodesignacionpo-sub a:hover {
      background-color: #5CCB5F; /* Verde suave */
      color: #333;
      border: 1px solid #5CCB5F;
      transform: translateX(3px);
  }

  .menu13-encargadodesignacionpo-sub {
      padding-left: 15px;
      display: none;
  }

  .menu13-encargadodesignacionpo-sub li a {
      font-size: 14px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu13-encargadodesignacionpo > li > a > .fa,
  .menu13-encargadodesignacionpo-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu13-encargadodesignacionpo > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu13-encargadodesignacionpo-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu13-encargadodesignacionpo-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li > a,
  .main-sidebar.collapsed .menu13-encargadodesignacionpo-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li > a > span,
  .main-sidebar.collapsed .menu13-encargadodesignacionpo-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li > a > .fa,
  .main-sidebar.collapsed .menu13-encargadodesignacionpo-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu13-encargadodesignacionpo-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu13-encargadodesignacionpo > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 13 - ENCARGADO DESIGNACION PO */
/* --------------------------------------------- */



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 14 - ENCARGADO DE PRODUCTOS */
/* --------------------------------------------- */

  .menu14-encargadodeproductos,
  .menu14-encargadodeproductos-sub {
    list-style: none;
    padding: 0;
    margin: 0;
   /* font-family: 'Instagram Sans';*/
  }

  .menu14-encargadodeproductos > li > a,
  .menu14-encargadodeproductos-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu14-encargadodeproductos > li.active > a,
  .menu14-encargadodeproductos-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu14-encargadodeproductos > li > a:hover {
      background-color: #EC9704; /* Naranja suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #EC9704;
  }

  /* Efecto hover para subitems */
  .menu14-encargadodeproductos-sub a:hover {
      background-color: #EC9704; /* Naranja suave */
      color: #333;
      border: 1px solid #EC9704;
      transform: translateX(3px);
  }

  .menu14-encargadodeproductos-sub {
      padding-left: 15px;
      display: none;
  }

  .menu14-encargadodeproductos-sub li a {
      font-size: 14px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu14-encargadodeproductos > li > a > .fa,
  .menu14-encargadodeproductos-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu14-encargadodeproductos > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu14-encargadodeproductos-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu14-encargadodeproductos-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu14-encargadodeproductos > li > a,
  .main-sidebar.collapsed .menu14-encargadodeproductos-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu14-encargadodeproductos > li > a > span,
  .main-sidebar.collapsed .menu14-encargadodeproductos-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu14-encargadodeproductos > li > a > .fa,
  .main-sidebar.collapsed .menu14-encargadodeproductos-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu14-encargadodeproductos > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu14-encargadodeproductos > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu14-encargadodeproductos-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu14-encargadodeproductos > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu14-encargadodeproductos > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 14 - ENCARGADO DE PRODUCTOS */
/* --------------------------------------------- */



/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 15 - PACK */
/* --------------------------------------------- */



  .menu15-pack,
  .menu15-pack-sub {
    list-style: none;
    padding: 0;
    margin: 0;
  /*  font-family: 'Instagram Sans';*/
  }

  .menu15-pack > li > a,
  .menu15-pack-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu15-pack > li.active > a,
  .menu15-pack-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu15-pack > li > a:hover {
      background-color: #464e5d; /* Gris suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #464e5d;
  }

  /* Efecto hover para subitems */
  .menu15-pack-sub a:hover {
      background-color: #464e5d; /* Gris suave */
      color: #fff;
      border: 1px solid #464e5d;
      transform: translateX(3px);
  }

  .menu15-pack-sub {
      padding-left: 15px;
      display: none;
  }

  .menu15-pack-sub li a {
      font-size: 14px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu15-pack > li > a > .fa,
  .menu15-pack-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu15-pack > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu15-pack-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu15-pack-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu15-pack > li > a,
  .main-sidebar.collapsed .menu15-pack-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu15-pack > li > a > span,
  .main-sidebar.collapsed .menu15-pack-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu15-pack > li > a > .fa,
  .main-sidebar.collapsed .menu15-pack-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu15-pack > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu15-pack > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu15-pack-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu15-pack > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu15-pack > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }


/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 15 - PACK */
/* --------------------------------------------- */




/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 19 - GERENTES */
/* --------------------------------------------- */

  .menu19-gerentes,
  .menu19-gerentes-sub {
    list-style: none;
    padding: 0;
    margin: 0;
   /* font-family: 'Instagram Sans';*/
  }

  .menu19-gerentes > li > a,
  .menu19-gerentes-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu19-gerentes > li.active > a,
  .menu19-gerentes-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu19-gerentes > li > a:hover {
      background-color: #9C4A1A; /* Marron suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #9C4A1A;
  }

  /* Efecto hover para subitems */
  .menu19-gerentes-sub a:hover {
      background-color: #9C4A1A; /* Marron suave */
      color: #fff;
      border: 1px solid #9C4A1A;
      transform: translateX(3px);
  }

  .menu19-gerentes-sub {
      padding-left: 15px;
      display: none;
  }

  .menu19-gerentes-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu19-gerentes > li > a > .fa,
  .menu19-gerentes-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu19-gerentes > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu19-gerentes-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu19-gerentes-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu19-gerentes > li > a,
  .main-sidebar.collapsed .menu19-gerentes-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu19-gerentes > li > a > span,
  .main-sidebar.collapsed .menu19-gerentes-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu19-gerentes > li > a > .fa,
  .main-sidebar.collapsed .menu19-gerentes-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu19-gerentes > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu19-gerentes > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu19-gerentes-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu19-gerentes > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu19-gerentes > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 19 - GERENTES */
/* --------------------------------------------- */





/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 20 - ENCARGADO DE ALMACEN */
/* --------------------------------------------- */

  .menu20-encargadoalmacen,
  .menu20-encargadoalmacen-sub {
    list-style: none;
    padding: 0;
    margin: 0;
   /* font-family: 'Instagram Sans';*/
  }

  .menu20-encargadoalmacen > li > a,
  .menu20-encargadoalmacen-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu20-encargadoalmacen > li.active > a,
  .menu20-encargadoalmacen-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu20-encargadoalmacen > li > a:hover {
      background-color: #640000; /* Rojo suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #640000;
  }

  /* Efecto hover para subitems */
  .menu20-encargadoalmacen-sub a:hover {
      background-color: #640000; /* Rojo suave */
      color: #fff;
      border: 1px solid #640000;
      transform: translateX(3px);
  }

  .menu20-encargadoalmacen-sub {
      padding-left: 15px;
      display: none;
  }

  .menu20-encargadoalmacen-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu20-encargadoalmacen > li > a > .fa,
  .menu20-encargadoalmacen-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu20-encargadoalmacen > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu20-encargadoalmacen-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu20-encargadoalmacen-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu20-encargadoalmacen > li > a,
  .main-sidebar.collapsed .menu20-encargadoalmacen-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu20-encargadoalmacen > li > a > span,
  .main-sidebar.collapsed .menu20-encargadoalmacen-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu20-encargadoalmacen > li > a > .fa,
  .main-sidebar.collapsed .menu20-encargadoalmacen-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu20-encargadoalmacen > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu20-encargadoalmacen > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu20-encargadoalmacen-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu20-encargadoalmacen > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu20-encargadoalmacen > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* ---------------------------------------------- */
 /* ESTILOS PARA MENÚ 20 - ENCARGADO DE ALMACEN */
/* --------------------------------------------- */




/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 21 - ENCARGADO DE ALMACENMPG */
/* ----------------------------------------------- */

  .menu21-encargadoalmacenmpg,
  .menu21-encargadoalmacenmpg-sub {
    list-style: none;
    padding: 0;
    margin: 0;
  /*  font-family: 'Instagram Sans';*/
  }

  .menu21-encargadoalmacenmpg > li > a,
  .menu21-encargadoalmacenmpg-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu21-encargadoalmacenmpg > li.active > a,
  .menu21-encargadoalmacenmpg-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu21-encargadoalmacenmpg > li > a:hover {
      background-color: #a62113; /* Rojo suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #a62113;
  }

  /* Efecto hover para subitems */
  .menu21-encargadoalmacenmpg-sub a:hover {
      background-color: #a62113; /* Rojo suave */
      color: #fff;
      border: 1px solid #a62113;
      transform: translateX(3px);
  }

  .menu21-encargadoalmacenmpg-sub {
      padding-left: 15px;
      display: none;
  }

  .menu21-encargadoalmacenmpg-sub li a {
      font-size: 14px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu21-encargadoalmacenmpg > li > a > .fa,
  .menu21-encargadoalmacenmpg-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu21-encargadoalmacenmpg > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu21-encargadoalmacenmpg-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu21-encargadoalmacenmpg-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li > a,
  .main-sidebar.collapsed .menu21-encargadoalmacenmpg-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li > a > span,
  .main-sidebar.collapsed .menu21-encargadoalmacenmpg-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li > a > .fa,
  .main-sidebar.collapsed .menu21-encargadoalmacenmpg-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu21-encargadoalmacenmpg-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu21-encargadoalmacenmpg > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 21 - ENCARGADO DE ALMACENMPG */
/* ----------------------------------------------- */




/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 22 - ASISTENTE GERENCIA */
/* ----------------------------------------------- */

  .menu22-asistentegerencia,
  .menu22-asistentegerencia-sub {
    list-style: none;
    padding: 0;
    margin: 0;
   /* font-family: 'Instagram Sans';*/
  }

  .menu22-asistentegerencia > li > a,
  .menu22-asistentegerencia-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu22-asistentegerencia > li.active > a,
  .menu22-asistentegerencia-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu22-asistentegerencia > li > a:hover {
      background-color: #000058; /* Azul suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #000058;
  }

  /* Efecto hover para subitems */
  .menu22-asistentegerencia-sub a:hover {
      background-color: #000058; /* Azul suave */
      color: #fff;
      border: 1px solid #000058;
      transform: translateX(3px);
  }

  .menu22-asistentegerencia-sub {
      padding-left: 15px;
      display: none;
  }

  .menu22-asistentegerencia-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu22-asistentegerencia > li > a > .fa,
  .menu22-asistentegerencia-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu22-asistentegerencia > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu22-asistentegerencia-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu22-asistentegerencia-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu22-asistentegerencia > li > a,
  .main-sidebar.collapsed .menu22-asistentegerencia-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu22-asistentegerencia > li > a > span,
  .main-sidebar.collapsed .menu22-asistentegerencia-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu22-asistentegerencia > li > a > .fa,
  .main-sidebar.collapsed .menu22-asistentegerencia-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu22-asistentegerencia > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu22-asistentegerencia > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu22-asistentegerencia-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu22-asistentegerencia > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu22-asistentegerencia > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 22 - ASISTENTE GERENCIA */
/* ----------------------------------------------- */




/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 37 - SUPERVISOR DE GESTORES */
/* ----------------------------------------------- */

  .menu37-supervisorgestores,
  .menu37-supervisorgestores-sub {
    list-style: none;
    padding: 0;
    margin: 0;
 /*   font-family: 'Instagram Sans';*/
  }

  .menu37-supervisorgestores > li > a,
  .menu37-supervisorgestores-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu37-supervisorgestores > li.active > a,
  .menu37-supervisorgestores-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu37-supervisorgestores > li > a:hover {
      background-color: #96bda8; /* Azul suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #96bda8;
  }

  /* Efecto hover para subitems */
  .menu37-supervisorgestores-sub a:hover {
      background-color: #96bda8; /* Azul suave */
      color: #fff;
      border: 1px solid #96bda8;
      transform: translateX(3px);
  }

  .menu37-supervisorgestores-sub {
      padding-left: 15px;
      display: none;
  }

  .menu37-supervisorgestores-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu37-supervisorgestores > li > a > .fa,
  .menu37-supervisorgestores-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu37-supervisorgestores > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu37-supervisorgestores-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu37-supervisorgestores-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu37-supervisorgestores > li > a,
  .main-sidebar.collapsed .menu37-supervisorgestores-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu37-supervisorgestores > li > a > span,
  .main-sidebar.collapsed .menu37-supervisorgestores-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu37-supervisorgestores > li > a > .fa,
  .main-sidebar.collapsed .menu37-supervisorgestores-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu37-supervisorgestores > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu37-supervisorgestores > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu37-supervisorgestores-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu37-supervisorgestores > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu37-supervisorgestores > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 37 - SUPERVISOR DE GESTORES */
/* ----------------------------------------------- */




/* -------------------------------------------------------- */
 /* ESTILOS PARA MENÚ 45 - SUPERVISOR PRODUCCION PROCESOS */
/* -------------------------------------------------------- */

  .menu45-supervisorprodprocesos,
  .menu45-supervisorprodprocesos-sub {
    list-style: none;
    padding: 0;
    margin: 0;
  /*  font-family: 'Instagram Sans';*/
  }

  .menu45-supervisorprodprocesos > li > a,
  .menu45-supervisorprodprocesos-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 11px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu45-supervisorprodprocesos > li.active > a,
  .menu45-supervisorprodprocesos-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu45-supervisorprodprocesos > li > a:hover {
      background-color: #96bda8; /* Azul suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #96bda8;
  }

  /* Efecto hover para subitems */
  .menu45-supervisorprodprocesos-sub a:hover {
      background-color: #96bda8; /* Azul suave */
      color: #fff;
      border: 1px solid #96bda8;
      transform: translateX(3px);
  }

  .menu45-supervisorprodprocesos-sub {
      padding-left: 15px;
      display: none;
  }

  .menu45-supervisorprodprocesos-sub li a {
      font-size: 11px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu45-supervisorprodprocesos > li > a > .fa,
  .menu45-supervisorprodprocesos-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu45-supervisorprodprocesos > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu45-supervisorprodprocesos-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu45-supervisorprodprocesos-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li > a,
  .main-sidebar.collapsed .menu45-supervisorprodprocesos-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li > a > span,
  .main-sidebar.collapsed .menu45-supervisorprodprocesos-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li > a > .fa,
  .main-sidebar.collapsed .menu45-supervisorprodprocesos-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu45-supervisorprodprocesos-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu45-supervisorprodprocesos > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* -------------------------------------------------------- */
 /* ESTILOS PARA MENÚ 45 - SUPERVISOR PRODUCCION PROCESOS */
/* -------------------------------------------------------- */




/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 48 - ENCARGADO DE COSTOS */
/* ------------------------------------------------ */

  .menu48-encargadocostos,
  .menu48-encargadocostos-sub {
    list-style: none;
    padding: 0;
    margin: 0;
  /*  font-family: 'Instagram Sans';*/
  }

  .menu48-encargadocostos > li > a,
  .menu48-encargadocostos-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu48-encargadocostos > li.active > a,
  .menu48-encargadocostos-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu48-encargadocostos > li > a:hover {
      background-color: #259073; /* Azul suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #259073;
  }

  /* Efecto hover para subitems */
  .menu48-encargadocostos-sub a:hover {
      background-color: #259073; /* Azul suave */
      color: #fff;
      border: 1px solid #259073;
      transform: translateX(3px);
  }

  .menu48-encargadocostos-sub {
      padding-left: 15px;
      display: none;
  }

  .menu48-encargadocostos-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu48-encargadocostos > li > a > .fa,
  .menu48-encargadocostos-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu48-encargadocostos > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu48-encargadocostos-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu48-encargadocostos-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu48-encargadocostos > li > a,
  .main-sidebar.collapsed .menu48-encargadocostos-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu48-encargadocostos > li > a > span,
  .main-sidebar.collapsed .menu48-encargadocostos-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu48-encargadocostos > li > a > .fa,
  .main-sidebar.collapsed .menu48-encargadocostos-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu48-encargadocostos > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu48-encargadocostos > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu48-encargadocostos-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu48-encargadocostos > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu48-encargadocostos > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* ------------------------------------------------ */
 /* ESTILOS PARA MENÚ 48 - ENCARGADO DE COSTOS */
/* ------------------------------------------------ */




/* -------------------------------------------------- */
 /* ESTILOS PARA MENÚ 49 - SUPERVISOR CORTE DE HILO */
/* -------------------------------------------------- */

  .menu49-supervisorcortehilo,
  .menu49-supervisorcortehilo-sub {
    list-style: none;
    padding: 0;
    margin: 0;
   /* font-family: 'Instagram Sans';*/
  }

  .menu49-supervisorcortehilo > li > a,
  .menu49-supervisorcortehilo-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu49-supervisorcortehilo > li.active > a,
  .menu49-supervisorcortehilo-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu49-supervisorcortehilo > li > a:hover {
      background-color: #e74328; /* Azul suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #e74328;
  }

  /* Efecto hover para subitems */
  .menu49-supervisorcortehilo-sub a:hover {
      background-color: #e74328; /* Azul suave */
      color: #fff;
      border: 1px solid #e74328;
      transform: translateX(3px);
  }

  .menu49-supervisorcortehilo-sub {
      padding-left: 15px;
      display: none;
  }

  .menu49-supervisorcortehilo-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu49-supervisorcortehilo > li > a > .fa,
  .menu49-supervisorcortehilo-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu49-supervisorcortehilo > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu49-supervisorcortehilo-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu49-supervisorcortehilo-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu49-supervisorcortehilo > li > a,
  .main-sidebar.collapsed .menu49-supervisorcortehilo-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu49-supervisorcortehilo > li > a > span,
  .main-sidebar.collapsed .menu49-supervisorcortehilo-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu49-supervisorcortehilo > li > a > .fa,
  .main-sidebar.collapsed .menu49-supervisorcortehilo-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu49-supervisorcortehilo > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu49-supervisorcortehilo > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu49-supervisorcortehilo-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu49-supervisorcortehilo > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu49-supervisorcortehilo > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* -------------------------------------------------- */
 /* ESTILOS PARA MENÚ 49 - SUPERVISOR CORTE DE HILO */
/* -------------------------------------------------- */



/* -------------------------------------------------------------- */
 /* ESTILOS PARA MENÚ 55 - SUPERVISOR CALIDAD PRODUCTO PROCESOS */
/* -------------------------------------------------------------- */

  .menu55-supervisorcalproductprocesos,
  .menu55-supervisorcalproductprocesos-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    /*font-family: 'Instagram Sans';*/
  }

  .menu55-supervisorcalproductprocesos > li > a,
  .menu55-supervisorcalproductprocesos-sub a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 12px 18px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #f5f5f5;
    margin: 2px 8px;
    background-color: #f9f9f9;
  }

  .menu55-supervisorcalproductprocesos > li.active > a,
  .menu55-supervisorcalproductprocesos-sub li.active > a {
      background-color: #e5f3ff;
      font-weight: 600;
      color: #0056b3;
      border: 1px solid #cce5ff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  /* Efecto hover para items principales */
  .menu55-supervisorcalproductprocesos > li > a:hover {
      background-color: #200ec7; /* Azul suave */
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #200ec7;
  }

  /* Efecto hover para subitems */
  .menu55-supervisorcalproductprocesos-sub a:hover {
      background-color: #200ec7; /* Azul suave */
      color: #fff;
      border: 1px solid #e74328;
      transform: translateX(3px);
  }

  .menu55-supervisorcalproductprocesos-sub {
      padding-left: 15px;
      display: none;
  }

  .menu55-supervisorcalproductprocesos-sub li a {
      font-size: 12px;
      padding: 10px 15px;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      color: #555;
      margin: 2px 0;
  }

  /* Estilos para los iconos del menú */
  .menu55-supervisorcalproductprocesos > li > a > .fa,
  .menu55-supervisorcalproductprocesos-sub li a > .fa {
      width: 24px;
      margin-right: 15px;
      text-align: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

  /* Cambio de color de iconos en hover */
  .menu55-supervisorcalproductprocesos > li > a:hover > .fa {
      color: #ffffff;
  }

  .menu55-supervisorcalproductprocesos-sub li a:hover > .fa {
      color: #1a4b8c;
  }

  .pull-right-container {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .treeview.menu-open > .menu55-supervisorcalproductprocesos-sub {
      display: block;
  }

  .treeview.menu-open > a .pull-right-container i {
      transform: rotate(-90deg);
  }

  .main-sidebar {
      background: #ffffff;
      border-right: 1px solid #eaeaea;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
      z-index: 1000;
      width: 250px;
      transition: width 0.3s ease;
      box-shadow: 1px 0 5px rgba(0,0,0,0.05);
  }

  .sidebar {
      padding: 10px;
      position: relative;
  }

  .user-panel {
      height: 70px;
  }

  .content-wrapper {
      margin-left: 250px;
      transition: margin 0.3s;
  }

  /* ------------------------- */
  /* ESTILOS PARA MENÚ CONTRAÍDO */
  /* ------------------------- */
  .main-sidebar.collapsed {
      width: 100px;
  }

  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li > a,
  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos-sub a {
      justify-content: center;
      padding: 15px 0;
      margin: 0;
      background-color: transparent !important;
      border: none !important;
      border-radius: 0;
  }

  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li > a > span,
  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos-sub a > span,
  .main-sidebar.collapsed .pull-right-container {
      display: none !important;
      visibility: hidden;
  }

  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li > a > .fa,
  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos-sub li a > .fa {
      margin-right: 0;
      font-size: 22px;
      color: #555;
  }

  /* Efecto hover en modo contraído */
  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li > a:hover {
      background-color: transparent !important;
      transform: scale(1.15);
      box-shadow: none;
  }

  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li > a:hover > .fa {
      color: #1a4b8c;
  }

  /* Ocultar submenús en modo contraído */
  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos-sub {
      display: none !important;
  }

  /* Mantener activo el ítem seleccionado */
  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li.active > a {
      background-color: transparent !important;
  }

  .main-sidebar.collapsed .menu55-supervisorcalproductprocesos > li.active > a > .fa {
      color: #0056b3;
      font-weight: bold;
  }

/* -------------------------------------------------------------- */
 /* ESTILOS PARA MENÚ 55 - SUPERVISOR CALIDAD PRODUCTO PROCESOS */
/* -------------------------------------------------------------- */



.textoinstasm{  
   /* font-family: Instagram Sans Light;*/
    font-size: 14px;
    color: #000;
}




/***** PARA LOS HEADER DEL DATATABLE ******/

.panel-silver {    
    background-color: #c0c0c0;
    color: #000 !important;
    font-weight: bold;
    padding: 10px 15px; /* Agrega espacio arriba y abajo, izquierda */    
}


.titulo-con-icono {
    display: flex;
    align-items: center;
   /* gap: 12px;*/
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: #132552;
    font-weight: 600;
    /*letter-spacing: -0.5px;*/
    line-height: 1.3;
    margin: 0 0 1rem 0;
    padding-left: 10px;
    /*font-family: 'Instagram Sans Light';*/
}

/* Tamaño específico para tablets */
@media (max-width: 1024px) and (min-width: 768px) {
    .titulo-con-icono {
        font-size: 0.6rem;
    }
}

.icono-titulo {
    font-size: 0.9em; /* Tamaño proporcional al texto */
    color: #3a5cb7; /* Color ligeramente más claro que el texto */
    opacity: 0.9; /* Sutil transparencia */
}

/* Responsive */
@media (max-width: 1024px) {
    .titulo-con-icono {
        font-size: clamp(1.25rem, 2vw, 1.75rem);
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .titulo-con-icono {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
        gap: 8px;
    }
    .icono-titulo {
        font-size: 0.85em;
    }
}



/* ------------------------------------- */
 /* ESTILOS PARA BOTONES DE TITULO */
/* ------------------------------------- */

.btngris-tit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5; /* Fondo plateado */
    color: #333; /* Texto oscuro para contraste */
    border: 3px solid #464e5d; /* Borde gris */
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    /*font-family: 'Instagram Sans';*/
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.3;
    text-decoration: none;
    min-width: 100px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Estructura interna del botón */
.btngris-tit > span {
    display: block;
    transition: inherit;
}

.btngris-tit > i {
    display: block;
    margin: 4px 0;
    font-size: 1.1em;
    transition: inherit;
}

/* Efecto hover */
.btngris-tit:hover {
    background-color: #464e5d; /* Fondo gris */
    color: white; /* Texto blanco */
    transform: scale(1.03); /* Efecto zoom */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Efecto hover en elementos internos */
.btngris-tit:hover > span,
.btngris-tit:hover > i {
    transform: scale(1.05); /* Zoom adicional al texto/icono */
}

/* Efecto al hacer clic */
.btngris-tit:active {
    transform: scale(0.98);
}





.btnverde-tit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5; /* Fondo plateado */
    color: #333; /* Texto oscuro para contraste */
    border: 3px solid #427322; /* Borde verde */
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    /*font-family: 'Instagram Sans';*/
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.3;
    text-decoration: none;
    min-width: 100px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Estructura interna del botón */
.btnverde-tit > span {
    display: block;
    transition: inherit;
}

.btnverde-tit > i {
    display: block;
    margin: 4px 0;
    font-size: 1.1em;
    transition: inherit;
}

/* Efecto hover */
.btnverde-tit:hover {
    background-color: #427322; /* Fondo verde */
    color: white; /* Texto blanco */
    transform: scale(1.03); /* Efecto zoom */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Efecto hover en elementos internos */
.btnverde-tit:hover > span,
.btnverde-tit:hover > i {
    transform: scale(1.05); /* Zoom adicional al texto/icono */
}

/* Efecto al hacer clic */
.btnverde-tit:active {
    transform: scale(0.98);
}




.btnazul-tit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5; /* Fondo plateado */
    color: #333; /* Texto oscuro para contraste */
    border: 3px solid #00457E; /* Borde azul */
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    /*font-family: 'Instagram Sans';*/
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.3;
    text-decoration: none;
    min-width: 100px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Estructura interna del botón */
.btnazul-tit > span {
    display: block;
    transition: inherit;
}

.btnazul-tit > i {
    display: block;
    margin: 4px 0;
    font-size: 1.1em;
    transition: inherit;
}

/* Efecto hover */
.btnazul-tit:hover {
    background-color: #00457E; /* Fondo azul */
    color: white; /* Texto blanco */
    transform: scale(1.03); /* Efecto zoom */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Efecto hover en elementos internos */
.btnazul-tit:hover > span,
.btnazul-tit:hover > i {
    transform: scale(1.05); /* Zoom adicional al texto/icono */
}

/* Efecto al hacer clic */
.btnazul-tit:active {
    transform: scale(0.98);
}





.btnnavy-tit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5; /* Fondo plateado */
    color: #333; /* Texto oscuro para contraste */
    border: 3px solid #00416B; /* Borde azul */
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans';*/
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.3;
    text-decoration: none;
    min-width: 100px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Estructura interna del botón */
.btnnavy-tit > span {
    display: block;
    transition: inherit;
}

.btnnavy-tit > i {
    display: block;
    margin: 4px 0;
    font-size: 1.1em;
    transition: inherit;
}

/* Efecto hover */
.btnnavy-tit:hover {
    background-color: #00416B; /* Fondo azul */
    color: white; /* Texto blanco */
    transform: scale(1.03); /* Efecto zoom */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Efecto hover en elementos internos */
.btnnavy-tit:hover > span,
.btnnavy-tit:hover > i {
    transform: scale(1.05); /* Zoom adicional al texto/icono */
}

/* Efecto al hacer clic */
.btnnavy-tit:active {
    transform: scale(0.98);
}


/* ------------------------------------- */
 /* ESTILOS PARA BOTONES DE TITULO */
/* ------------------------------------- */



/* ---------------------------------------------------------------------------- */
 /* ESTILOS PARA BOTONES DE FORMULARIOS (ACEPTAR,CANCELAR,GUARDAR,ACTUALIZAR */
/* ---------------------------------------------------------------------------- */


.btnverde-sub {
    display: inline-flex; /* Cambiado a flex para mejor centrado */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    background-color: #427322;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif; *//* Fallback fonts */
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1; /* Ajustado a 1 para mejor centrado */
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px; /* Altura mínima consistente */
    box-sizing: border-box; /* Para incluir padding en dimensiones */
}

.btnverde-sub:hover {
    transform: scale(1.02);
    color: #fff !important;
    background-color: #3a6a1e; /* Verde un poco más oscuro para hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btnverde-sub:active {
    transform: scale(0.98);
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnverde-sub {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}


.btnrojo-sub {
    display: inline-flex; /* Cambiado a flex para mejor centrado */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    background-color: #FF0038;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif; *//* Fallback fonts */
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1; /* Ajustado a 1 para mejor centrado */
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px; /* Altura mínima consistente */
    box-sizing: border-box; /* Para incluir padding en dimensiones */
}

.btnrojo-sub:hover {
    transform: scale(1.02);
    color: #fff !important;
    background-color: #ab2517; /* Verde un poco más oscuro para hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btnrojo-sub:active {
    transform: scale(0.98);
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnrojo-sub {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}
/* ---------------------------------------------------------------------------- */
 /* ESTILOS PARA BOTONES DE FORMULARIOS (ACEPTAR,CANCELAR,GUARDAR,ACTUALIZAR */
/* ---------------------------------------------------------------------------- */




/* -------------------------------------- */
 /* ESTILOS PARA BOTONES DE DATATABLES 
/* -------------------------------------- */

.btnverde-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #358248;
    border: 1px solid #358248; /* Borde más grueso (de 2px a 3px) */
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.80rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnverde-noborder:hover,
.btnverde-noborder:focus,
.btnverde-noborder:active {
    background-color: transparent;
    color: #358248;
    border-color: #358248;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnverde-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}





.btnazul-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #00457E;
    border: 1px solid #00457E; /* Borde más grueso (de 2px a 3px) */
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.80rem;
    font-weight: 500;
  /*  font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnazul-noborder:hover,
.btnazul-noborder:focus,
.btnazul-noborder:active {
    background-color: transparent;
    color: #00457E;
    border-color: #00457E;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnazul-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}




.btnrojo-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #FF0038;
    border: 1px solid #FF0038; /* Borde más grueso (de 2px a 3px) */
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.80rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnrojo-noborder:hover,
.btnrojo-noborder:focus,
.btnrojo-noborder:active {
    background-color: transparent;
    color: #FF0038;
    border-color: #FF0038;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnrojo-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}




.btnnaranja-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #DA6A00;
    border: 2px solid #DA6A00; /* Borde más grueso (de 2px a 3px) */
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.80rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnnaranja-noborder:hover,
.btnnaranja-noborder:focus,
.btnnaranja-noborder:active {
    background-color: transparent;
    color: #DA6A00;
    border-color: #DA6A00;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnnaranja-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}





.btnamarillo-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #00416B;
    border: 2px solid #ffdf30; /* Borde más grueso (de 2px a 3px) */
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.80rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnamarillo-noborder:hover,
.btnamarillo-noborder:focus,
.btnamarillo-noborder:active {
    background-color: transparent;
    color: #00416B;
    border-color: #ffdf30;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnamarillo-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}




.btnnavy-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #00416B;
    border: 1px solid #00416B; /* Borde más grueso (de 2px a 3px) */
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnnavy-noborder:hover,
.btnnavy-noborder:focus,
.btnnavy-noborder:active {
    background-color: transparent;
    color: #00416B;
    border-color: #00416B;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnnavy-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}



.btnmorado-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #7c117c;
    border: 2px solid #7c117c; /* Borde más grueso (de 2px a 3px) */
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btnmorado-noborder:hover,
.btnmorado-noborder:focus,
.btnmorado-noborder:active {
    background-color: transparent;
    color: #7c117c;
    border-color: #7c117c;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnmorado-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}



.btngris-noborder {
    display: flex; /* Cambiado a flex para mejor centrado */
    margin: 0 auto; /* Centrado horizontal */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #464e5d;
    border: 2px solid #464e5d; /* Borde más grueso (de 2px a 3px) */
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
   /* font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    cursor: default;
    transition: none;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px;
    box-sizing: border-box;
    text-align: center;
    width: fit-content; /* Ajusta el ancho al contenido */
}

/* Sin efecto hover */
.btngris-noborder:hover,
.btngris-noborder:focus,
.btngris-noborder:active {
    background-color: transparent;
    color: #464e5d;
    border-color: #464e5d;
    box-shadow: none;
    transform: none;
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btngris-noborder {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}





/* -------------------------------------- */
 /* ESTILOS PARA BOTONES DE DATATABLES 
/* -------------------------------------- */



.btnfresh {
    display: inline-flex; /* Cambiado a flex para mejor centrado */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    background-color: #339AF0;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    /*font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, sans-serif; *//* Fallback fonts */
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1; /* Ajustado a 1 para mejor centrado */
    white-space: nowrap;
    text-decoration: none;
    min-height: 32px; /* Altura mínima consistente */
    box-sizing: border-box; /* Para incluir padding en dimensiones */
}

.btnfresh:hover {
    transform: scale(1.02);
    color: #fff !important;
    background-color: #339AF0; /* Verde un poco más oscuro para hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btnfresh:active {
    transform: scale(0.98);
}

/* Versión móvil más compacta */
@media (max-width: 768px) {
    .btnfresh {
        padding: 5px 12px;
        font-size: 0.8rem;
        min-height: 28px;
    }
}

/***ESTILOS FICHA TECNICA DEL PRODUCTO***/
.product-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .product-header {
        padding: 2rem;
    }
}

.type-badge {
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    margin-bottom: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .type-badge {
        width: auto;
    }
}

.type-prefab {
    background: linear-gradient(135deg, #4a8d9d, #5ba0b2);
    color: white;
}

.type-producible {
    background: linear-gradient(135deg, #e9ecef, #f8f9fa);
    color: #495057;
    border: 2px solid #dee2e6;
}

.type-undefined {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.image-container {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .image-container {
        padding: 1.5rem;
        margin-bottom: 0;
    }
}

.main-image {
    border-radius: 8px;
    transition: transform 0.3s ease;
    max-width: 100%;
    height: auto;
}

.main-image:hover {
    transform: scale(1.05);
}

.thumbnail {
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    margin: 2px;
}

.thumbnail:hover {
    border-color: #007bff;
    transform: translateY(-2px);
}

.info-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.section-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem;
    font-size: 0.8rem;
    text-align: center;
}

@media (min-width: 768px) {
    .section-header {
        font-size: 0.9rem;
    }
}

.info-table td {
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .info-table td {
        padding: 1rem;
        font-size: 1rem;
    }
}

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

.label-cell {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    font-weight: 600;
    color: #495057;
    border-right: 1px solid #f1f3f4;
}

@media (max-width: 767px) {
    .label-cell {
        width: 40%;
        font-size: 0.85rem;
    }
    
    .info-table td:nth-child(even) {
        width: 60%;
    }
    
    /* En móvil, hacer que cada fila tenga solo 2 columnas */
    .mobile-stack tr {
        display: table;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .mobile-stack td {
        display: table-cell;
        width: 50%;
    }
}

@media (min-width: 768px) {
    .label-cell {
        width: 25%;
    }
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

@media (min-width: 768px) {
    .status-badge {
        padding: 6px 16px;
        font-size: 0.85rem;
    }
}

.status-verified {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.status-unverified {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

.client-badge {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    border: 2px solid #e3f2fd;
    font-size: 0.8rem;
    display: inline-block;
}

@media (min-width: 768px) {
    .client-badge {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

.code-style {
    background: #f8f9fa;
    padding: 3px 6px;
    border-radius: 4px;
    color: #495057;
    font-family: monospace;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .code-style {
        padding: 4px 8px;
        font-size: 0.85rem;
    }
}

/* Ajustes adicionales para móviles */
@media (max-width: 576px) {
    .product-header {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .section-header {
        padding: 0.75rem;
        font-size: 0.75rem;
    }
    
    .d-flex.align-items-center.flex-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .d-flex.align-items-center.flex-wrap .mr-3 {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
}

/*******ESTILOS PARA EL DASHBOARD DE RECURSOS HUMANOS ****/
   .dashboard-card {
            background: white;
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .dashboard-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .card-icon-wrapper {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .card-icon-wrapper i {
            font-size: 28px;
            color: white;
        }

        .card-body {
            padding: 24px;
            display: flex;
            align-items: center;
            min-height: 90px;
        }

        .card-content {
            flex: 1;
            min-width: 0;
        }

        .card-title {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 8px;
            font-weight: 500;
            line-height: 1.4;
        }

        .card-number {
            font-size: 32px;
            font-weight: 700;
            color: #212529;
            margin-bottom: 4px;
            line-height: 1;
        }

        .card-subtitle {
            font-size: 13px;
            color: #868e96;
            margin-bottom: 12px;
        }

        .employee-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #e9ecef;
        }

        .employee-stat {
            text-align: center;
            flex: 1;
        }

        .employee-stat-number {
            font-size: 18px;
            font-weight: 600;
            color: #495057;
        }

        .employee-stat-label {
            font-size: 12px;
            color: #6c757d;
            margin-top: 2px;
        }

        .contracts-section {
            margin-top: 8px;
        }

        .contract-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .contract-row:last-child {
            margin-bottom: 0;
        }

        .contract-info {
            display: flex;
            align-items: center;
        }

        .contract-badge {
            background-color: #dc3545;
            color: white;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            margin-right: 10px;
            min-width: 35px;
            text-align: center;
        }

        .contract-text {
            font-size: 13px;
            color: #495057;
            font-weight: 500;
        }

        .btn-custom {
            padding: 6px 14px;
            font-size: 12px;
            border-radius: 6px;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }

        .btn-custom:hover {
            text-decoration: none;
            transform: translateY(-1px);
        }

        .btn-custom i {
            font-size: 11px;
        }

        /* Alert cards */
        .alert-danger .card-icon-wrapper {
            background: linear-gradient(135deg, #dc3545, #c82333);
        }

        /* Employee category colors */
        .category-1 .card-icon-wrapper {
            background: linear-gradient(135deg, #007bff, #0056b3);
        }

        .category-2 .card-icon-wrapper {
            background: linear-gradient(135deg, #dc3545, #c82333);
        }

        .category-3 .card-icon-wrapper {
            background: linear-gradient(135deg, #28a745, #1e7e34);
        }

        .disability-card .card-icon-wrapper {
            background: linear-gradient(135deg, #17a2b8, #138496);
        }

        .contracts-card .card-icon-wrapper {
            background: linear-gradient(135deg, #6f42c1, #5a32a3);
        }

        .page-title {
            color: #212529;
            font-weight: 700;
            margin-bottom: 30px;
            font-size: 2rem;
        }

        @media (max-width: 768px) {
            .card-body {
                padding: 20px;
            }
            
            .employee-stats {
                flex-direction: column;
                gap: 8px;
            }
            
            .employee-stat {
                text-align: left;
            }
            
            .contract-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }
        
/* ******EFECTOS PARA LA PLANILLA ***********/
       .planilla-header {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid #e9ecef;
        }

        .info-label {
            font-size: 16px;
            font-weight: 600;
            color: #072E33;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .info-label i {
            color: #1e90ff;
            margin-right: 8px;
            font-size: 16px;
        }

        .info-badge {
            background-color: #f8f8f8;
            color: #072E33;
            padding: 4px 12px;
            border-radius: 4px;
            font-weight: normal;
            font-size: 14px;
            margin-left: 8px;
            border: 1px solid #dee2e6;
        }

        .btn-planilla {
            border-radius: 8px;
            font-weight: 500;
            font-size: 13px;
            padding: 8px 12px;
            margin-top: 6px;
            width: 100%;
            border: none;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .btn-planilla:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        }

        .btn-planilla:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        .btn-planilla i {
            margin-right: 6px;
        }

        .btn-success-custom {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }

        .btn-danger-custom {
            background: linear-gradient(135deg, #dc3545, #c82333);
            color: white;
        }

        .btn-warning-custom {
            background: linear-gradient(135deg, #ffc107, #e0a800);
            color: #212529;
        }

        .btn-info-custom {
            background: linear-gradient(135deg, #17a2b8, #138496);
            color: white;
        }

        .btn-secondary-custom {
            background: linear-gradient(135deg, #6c757d, #5a6268);
            color: white;
        }

        .btn-orange-custom {
            background: linear-gradient(135deg, #ff5722, #e64a19);
            color: white;
        }

        .btn-blue-grey-custom {
            background: linear-gradient(135deg, #607d8b, #455a64);
            color: white;
        }

        .btn-yellow-custom {
            background: linear-gradient(135deg, #ffbc00, #ffa000);
            color: #212529;
        }

        .dropdown-menu {
            border-radius: 8px;
            border: none;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            padding: 8px 0;
            min-width: 200px;
        }

        .dropdown-item {
            padding: 8px 16px;
            font-size: 13px;
            transition: all 0.2s ease;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .dropdown-item i {
            margin-right: 8px;
            width: 16px;
        }

        @media (max-width: 768px) {
            .planilla-header {
                padding: 15px 10px;
            }
            
            .info-label {
                font-size: 14px;
                text-align: center;
                margin-bottom: 10px;
            }
            
            .btn-planilla {
                font-size: 12px;
                padding: 6px 10px;
            }
        }