/***************************/
     /*FONTS*/
/***************************/
@font-face {
    font-family: 'Lato-Regular';
    src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-Light';
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-Medium';
    src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-MediumItalic';
    src: url('../fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins-Regular';
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto/Roboto-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'NotoSans-SemiBold';
    src: url('../fonts/Noto_Sans/static/NotoSans-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'NotoSans-Bold';
    src: url('../fonts/Noto_Sans/static/NotoSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('../fonts/Open_Sans/static/OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/Open_Sans/static/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Cinzel-Regular';
    src: url('../fonts/Cinzel/static/Cinzel-Regular.ttf') format('truetype');
}
/***************************/
     /*COLORS*/
/***************************/
:root {
    --textColor:#252525;
    --color-green:#1B7C44;
    --back-menu: #EDEDED;
    --white: #ffffff;
    --color-dark: #202026;
    --color-yellow: #FFFF00;
    --color-red: #dc3545;
    --txt-green: #116739;
    --color-yellow-boots: #ffc107;
    --border-grey: #dee2e6; /*el gris de los inputs y del borde de las tablas*/
    --txtColor-inputs: #66615b;
    --txth2: #484c4f; /*color de los labels de delete*/
    --color-hover-btns: #cfd5db;  /*paginacion de datatable*/
    --rojo-graficas: #fd3550; /*Metrics/OrdenDelDia*/
}

.icon-green{
    color: var(--color-green);
}

.icon-red{
    color: var(--color-red);
}


/***************************/
     /*GENERAL*/
/***************************/
body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family:Lato-Regular;
}



/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}


/***************************/
     /*FORMS*/
/***************************/
 /*FORMS LABEL*/
.form-label{
    color: var(--textColor);
}

 /*CHECKS*/
.form-check-input:checked {
    background-color: var(--color-green) !important; /*#0d6efd*/
    border-color: var(--color-green) !important; /*#0d6efd*/
}

.form-check-input:checked,
.form-check-label {
    color:var(--textColor) !important;

}

 /*LIST GROUP*/
 .list-group .list-group-item a{
     text-decoration: none !important;
     font-family: Roboto-Regular !important;
     color: var(--textColor);
 }

 .form-control, .form-select, textarea{
     background-color: var(--white) !important;
     font-family: Roboto-Regular !important;
     color: var(--txtColor-inputs) !important;
     font-size: 0.875rem !important;
     padding: 7px 18px !important;
     min-height:40px;
 }

 .control-label{
     font-family:Roboto-Regular !important;
     font-weight: 700;
     color: #9A9A9A !important;
 }

 textarea{
         border: var(--bs-border-width) solid var(--bs-border-color) !important;
         width: 100% !important;
 }

 textarea:focus{
     outline: none !important;
     border-color: var(--bs-primary-border-subtle) !important; 
 }

 /*.form-check-input:checked, .form-check-label {
    font-family:Roboto-Regular !important;
     font-weight: 700;
     color: #9A9A9A !important;
}*/

/***************************/
     /*MENU LATERAL*/
/***************************/
.nav-link{
    font-family:Roboto-Regular !important;
    color: var(--textColor) !important;
     transition: color 400ms ease 0s, background-color 400ms ease 0s; 
}

 .primarIcon, .IconOpenClose{
    color: #706D6D;
}


  header .image-text .name {
        font-family:Roboto-Regular;
    }

header .image-text .userChange {
    font-family:Lato-Regular;

}

#user-initials{
    font-family:Lato-Bold;
}


/***************************/
     /*BODY (RENDER)*/
/***************************/
.contenedorBody{
    background-color: var(--white);
    font-family: Roboto-Regular;
}

/***************************/
     /*FOOTER*/
/***************************/
footer{
    background-color:var(--color-green) !important;
    color:var(--white);
}

footer  a:hover {
    color: var(--color-yellow) !important;
}

footer  a {
    transition: color 400ms ease 0s, background-color 400ms ease 0s; 
}



/***************************/
     /*TOOLTIP*/
/***************************/
.custom-tooltip {
  --bs-tooltip-bg: var(--color-green) !important;
  --bs-tooltip-color: var(--white) !important;
}

.custom-tooltip-red {
  --bs-tooltip-bg: var(--color-red) !important;
  --bs-tooltip-color: var(--white) !important;
}


/***************************/
     /*BTN FAB*/
/***************************/
.fab-btn {
    background-color: transparent; 
    border: solid var(--color-green) 1px; 
    color: var(--color-green); 
    padding: .25rem .5rem; /* Ajuste de padding */
    font-size: .75rem; /* Tamaño de fuente */
    transition: box-shadow 0.3s ease; /* Transición para el sombreado */
    cursor: pointer;
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 1.5rem; 
    height: 1.5rem;
    border-radius: 50%;
    text-align: center; 
}


.fab-btn:hover {
   box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
    background-color: var(--color-green); 
    border: none; 
    color: var(--white);
    transform: scale(1.1); 
}

/***************************/
  /*BTN FAB ICONS TABLES*/
/***************************/
.icon-btn {
    background-color: transparent; 
    border: none; 
    /*color: var(--color-green);*/ 
    padding: .35rem .35rem; 
    /*transition: box-shadow 0.3s ease;*/
    cursor: pointer;
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 2rem; 
    height: 2rem;
    border-radius: 50%;
    text-align: center; 
    text-decoration: none;
}

.icon-btn .fa{
    font-size: 1.5em;
}


.icon-btn:hover .fa{
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);*/
    text-decoration: none;
    /*background-color: rgba(245, 245, 245, 0.7);*/ 
    border: none; 
    /*color: var(--white);*/
    transform: scale(1.1); 
}


/***************************/
     /*DARK BTN*/
/***************************/

.btn-darker{
      box-sizing: border-box;
      border: 2px solid var(--color-dark);
      background-color: transparent;
      font-size: 14px;
      font-weight: 500;
      padding: 7px 18px;
      color: var(--color-dark);
      -webkit-transition: all 150ms linear;
      -moz-transition: all 150ms linear;
      -o-transition: all 150ms linear;
      -ms-transition: all 150ms linear;
      transition: all 150ms linear;
      text-decoration: none;
      font-family:Roboto-Regular;
}

.btn-darker:hover {
    background-color: var(--color-dark);
    color: var(--white) !important;
    border-color: var(--color-dark); 
}

.btn-darker:hover .primarIcon{
    color: var(--white) !important;
}


/***************************/
     /*GREEN BTN*/
/***************************/

.btn-green{
  border-radius: 50rem; /*6px 1.5rem*/
  box-sizing: border-box;
  border-width: 2px; /*2px*/
  background-color: transparent;
  font-size: 16px;
  padding: 4px 12px;
  border-color: var(--color-green);
  color: var(--color-green);
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
  text-decoration: none !important;
  font-family:Poppins-Regular;
  border-style:solid;
   transition: box-shadow 0.3s ease; 
   font-family:Roboto-Regular;
}

  .btn-green:hover,
  .btn-green:focus,
  .btn-green:active
  {
    background-color: var(--color-green);
    color: var(--white); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
    /*transform: scale(1.1);*/ 
  }

  .btn-green:hover .fa,
  .btn-green:focus .fa,
  .btn-green:active .fa{
      color:var(--white);
  }

  /***************************/
     /*BTN ENTER (PRIMARY)*/
/***************************/
.btn-primary, .sppb-btn-primary{
    border-color: #1b7c44 !important;
    background-color: #1b7c44 !important;
     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     border-radius: 50rem !important; /*0.5rem*/
     color: var(--white) !important;
}

.btn-primary{
   
    
}

.btn-primary:hover {
    background-color: #000 !important;
     border-color: #000 !important;

}

.btn-lg{
    font-size: 1.25rem !important;
}

/***************************/
     /*UPLOAD BTN*/
/***************************/
.file-upload-btn{
    border-color: #000;
    background-color:  #000;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: var(--white);
    padding: 10px 20px;
    text-decoration: none !important;
}

.file-upload-btn:hover,
 .file-upload-btn:active{
    border-color:  var(--txt-green) !important; 
    background-color:  var(--txt-green) !important;
    transition: background-color 0.6s ease;
    text-decoration: none !important;
     color: var(--white);
}

.file-upload-btn:visited {
    color: var(--white);
    border-color: #000;
    background-color: #000;
}

/***************************/
     /*BACK BTN*/
/***************************/
.btn-back{
  /*border-radius: 6px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-width: .2em; /*2px*/
  background-color: transparent;
  font-size: 16px;
  /*padding: 7px 18px;*/
  /*border-color: var(--color-green);*/
  color: #9A9A9A;  /*#706D6D*/
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
  text-decoration: none !important;
  font-family:Roboto-Regular;
  /*border-style:solid;*/
   transition: box-shadow 0.3s ease; 
   border: none;
   /*font-weight: 700;*/
}


  .btn-back:hover,
  .btn-back:focus,
  .btn-back:active
  {
    /*background-color: var(--color-green);
    color: var(--white);*/ 
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);*/
    /*transform: scale(1.1);*/ 
     text-decoration: none !important;
       color: var(--color-green);
  }

  .btn-back .fa{
      font-size: 28px;
  }


/***************************/
     /*TABLE*/
/***************************/
.table tr td{
    font-family: Roboto-Regular;
    /*font-size:1.3em;*/
    font-size:1.1em;
    padding: 0.375em !important;
    /*border-top: 0px !important;*/
}

.table thead tr th{
    /*background-color:var(--color-green) !important;
    color: var(--white) !important;*/
    font-family:Poppins-SemiBold;
    font-weight:800;
    /*font-size:1.45em !important;*/
    font-size:1.2em !important;
    text-transform: uppercase;
    background-color: #f8f9fa;
    color: var(--txt-green);
    /*padding: 0.75rem !important;*/
}

.table .tableFooter tr td{
    background-color: #f8f9fa;
    color: var(--txt-green);
    text-transform: uppercase;
    font-family:Poppins-SemiBold;
    font-weight:800;
}


.table thead tr > th, .table thead tr > td, .table tbody tr > th, .table tbody tr > td, .table tfoot tr > th, .table tfoot tr > td {
    border-top: 1px solid #CCC5B9;
}

.table thead tr th, .table thead tr td {
    /*padding: 10px 18px !important;*/
    border-bottom: 1px solid  #CCC5B9 !important;
}

table.dataTable.no-footer {
     border-bottom: 0px solid #dee2e6 !important; 
}

.table tbody tr td{
    border-top: 0px !important;
    border-color: var(--border-grey) !important;
}


/***************************/
     /*TEXT ALIGN*/
/***************************/
.center{
    text-align: center;
}


/***************************/
     /*DATAPICKER*/
/***************************/

/* Aplicar fuente Roboto al datepicker */
.ui-datepicker {
    font-family:Lato-Bold !important;
}

/* Centrar los números dentro de los círculos */
.ui-datepicker-calendar .ui-state-default {
    background-color:#f9f9f9 !important; /* Fondo blanco para los días no seleccionados */
    color: #000; /* Color del texto para los días no seleccionados */
    border: 1px solid #dee2e6 !important; /* Borde claro */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    margin: auto;
}

/* Fondo al pasar el mouse sobre un día */
.ui-datepicker-calendar .ui-state-hover {
    background-color: #e5f5eb !important; /* Un verde claro al pasar el mouse */
    color: #1B7C44; /* Texto verde */
    border-radius: 50%;
}

/* Cambiar el color del círculo activo al verde */
.ui-datepicker-calendar .ui-state-active {
    background-color: #1B7C44 !important; /* Cambia el color del círculo activo */
    color: #fff !important; /* Cambia el color del texto en el día seleccionado */
}

/* Cambiar el color del botón "Done" al verde */
.ui-datepicker .ui-datepicker-buttonpane button {
    background-color: #1B7C44; /* Cambia el color del botón "Done" */
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background-color: #145531; /* Un tono más oscuro para el hover */
}

/* Cambiar el color de la parte superior (mes y año) al verde */
.ui-datepicker-header {
    background-color: #1B7C44; /* Fondo verde para la cabecera */
    color: #fff; /* Color del texto (mes y año) */
}

/* Cambiar el color de los botones de selección de mes y año (flechas) */
.ui-datepicker-header .ui-datepicker-prev, 
.ui-datepicker-header .ui-datepicker-next {
    /*background-color: #1B7C44;*/ /* Mismo verde para los botones de navegación */
    color: transparent; /* Color del texto en las flechas */
    border: none; 
}


/* Cambiar el color del texto del mes y año seleccionados */
.ui-datepicker-title select {
    background-color: var(--white);
    border: none; 
    color:var(--textColor);
}

.ui-datepicker-header{
    background-color: var(--white) !important;
}


/***************************/
  /*Label y Display en Delete*/
/***************************/

.inputDisplayFor {
    border-bottom: 1.5px solid #dee2e6 !important; 
    display: inline-block;
    /*min-width: 150px;*/
    vertical-align: middle;
    color: var(--txtColor-inputs) !important;
}

.signatureText {
    font-size: 0.6rem; 
    color: var(--txtColor-inputs); 
    text-align: right; 
}

.deleteLabel{
    display: inline-block;
}

 .control-label-delete{
     font-family:Roboto-Medium !important;
     /*font-weight: 700;*/
     color: var(--txth2); /*#9A9A9A #484c4f*/
 } 

/***************************/
 /*HEADER DE SECCION CON COLOR*/
/***************************/
.headerSeccionDelete{
    /*background-color:var(--color-green) ; 
    width: 100%;
    border-left: 10px solid #ffc107  !important; 
    color: var(--white); 
    font-family:Poppins-SemiBold;
    font-size: 1.1rem;*/
    background-color: #f8f9fa ; /*var(--color-green)*/
    width: 100%;
    border-left: 10px solid #dee2e6   !important; /*#ffc107*/
    color: #dee2e6; /*var(--white)*/
    font-family:Poppins-SemiBold;
    font-size: 1.1rem;
    
}


/***************************/
 /*HEADER DE SECCION GRISES*/
/***************************/
.headerSeccion{
    background-color:#D3D3D3 ; /*var(--color-green)*/
    width: 100%;
    border-left: 10px solid #9C9A94  !important; /*#ffc107*/
    color: #403D39; /*var(--white)*/
    font-family:Poppins-SemiBold;
    font-size: 1.1rem;
    /*text-align:center;*/
}


  /***************************/
     /*BTN ENTER (PRIMARY)*/
/***************************/
.btn-delete{
    border-color: var(--color-red) !important;
    background-color: var(--color-red) !important;
     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     border-radius: 50rem !important; /*0.5rem*/
     color: var(--white) !important;
}

.btn-delete:hover {
    background-color: #000 !important;
     border-color: #000 !important;

}

.btn-lg{
    font-size: 1.25rem !important;
}

/***************************/
  /*TITULOS DE LAS VISTAS*/
/***************************/
.custom-section{
     text-align:center !important;
}

/*.custom-section  > h1{
   color:olive !important;
}*/

/***************************/
  /*CHECKBOX DE LAS VISTAS*/
/***************************/
/*.form-check-input[disabled] {
    opacity: 1 !important;
    pointer-events: none !important;
}*/


/***************************/
  /*GROUP BTNS: VERDE*/
/***************************/
.btn-outline-primary {
        border-color: #1B7C44 !important;
        color:  #1B7C44 !important;
}

/* Cambia el color de fondo y texto cuando el botón está activo (seleccionado) */
.btn-outline-primary:checked,
.btn-outline-primary.active,
.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary {
    color: white !important;
    background-color: #1B7C44 !important;
    border-color: #1B7C44 !important;
}

/* Opcional: Cambia el color cuando está en hover (sin seleccionar) */
.btn-outline-primary:hover {
    background-color: #1B7C44 !important;
    color: white !important;
}

/***************************/
  /*GROUP BTNS: GRIS*/
/***************************/
.btn-outline-secondary {
        border-color:  var(--border-grey) !important;
        color:  var(--border-grey) !important;
}

/* Cambia el color de fondo y texto cuando el botón está activo (seleccionado) */
.btn-outline-secondary:checked,
.btn-outline-secondary.active,
.btn-outline-secondary:focus,
.btn-outline-secondary:hover,
.btn-check:checked + .btn-outline-secondary {
    color: var(--txtColor-inputs) !important;
    background-color: var(--border-grey) !important;
    border-color:  var(--border-grey) !important;
}

/* Opcional: Cambia el color cuando está en hover (sin seleccionar) */
.btn-outline-secondary:hover {
    background-color:  var(--border-grey) !important;
    color: var(--txtColor-inputs) !important;
}

/***************************/
    /*DATA TABLA*/
/***************************/

/*--- BTNS DE EXPORTAR ---*/
.dt-buttons{
    padding-left: .5%;
}

.dt-button-custom {
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    width: auto; /*50px - auto*/
    height: auto; /*50px - auto*/
    margin: 5px;
    border: none;
    /*border-radius: 5px;*/
    font-size: 12px;
    padding: 5px;
    vertical-align: top; 
    border: none !important;
    /*border-radius: 25% !important;*/
}

.dt-button-copiar {
    background-color: var(--color-red) !important;
    color: white !important;
}

.dt-button-pdf {
    background-color: var(--color-yellow-boots) !important;
    color: white !important;
}

.dt-button-excel {
    background-color: var(--color-green)  !important; 
    color: white !important;
}

.dt-button-csv {
    background-color: #fd7e14; 
    color: white;
}

.dt-button-print {
    background-color: #6f42c1;
    color: white;
}

.dt-button-custom i {
    font-size: 14px;
    /*display: block;*/ /* Asegura que el ícono esté encima del texto */
}

.dt-button-custom span {
    /*display: block;
    margin-top: 5px;*/
    font-size: 14px;
}


.dt-button {
        border-radius: 50rem; /*6px 1.5rem*/
        box-sizing: border-box;
        border-width: 2px; /*2px*/
        background-color: transparent;
        font-size: 16px;
        padding: 4px 12px;
        margin: 0 0 10px 2px;
        border-color: var(--color-green);
        color: var(--color-green);
        -webkit-transition: all 150ms linear;
        -moz-transition: all 150ms linear;
        -o-transition: all 150ms linear;
        -ms-transition: all 150ms linear;
        transition: all 150ms linear;
        text-decoration: none !important;
        font-family: Poppins-Regular;
        border-style: solid;
        transition: box-shadow 0.3s ease;
        font-family: Roboto-Regular;
    }

        .dt-button:hover,
        .dt-button:focus,
        .dt-button:active {
            background-color: var(--color-green);
            color: var(--white);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
            /*transform: scale(1.1);*/
        }

            .dt-button:hover .fa,
            .dt-button:focus .fa,
            .dt-button:active .fa {
                color: var(--white);
            }

/*--- INPUT DE SEARCH ---*/
/*BUSQUEDA*/
.dataTables_filter input {
    width: auto;
    display: inline-block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-right:0.75em;
    margin-bottom: .5em;

}

.dataTables_filter label {
    /*font-weight: bold;*/ 
    color: var(--textColor);
}

/* Asegurarse de que el input ocupe todo el espacio disponible en pantallas más pequeñas */
@media (max-width: 768px) {
    .dataTables_filter input {
        width: 100%;
    }

    .dt-buttons{
        margin-top: 0.75em;
        display:flex;
        justify-content: center;
    }

}

/*--- SELECT ---*/

.dataTables_length select, .mySelect {
    width: auto;
    display: inline-block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.dataTables_length{
   margin-left:0.75em;
}

@media (max-width: 768px) {
    .dataTables_length select, .mySelect {
        width: 100%;
        text-align:center;
    }
}

/*--- PAGINACION ---*/
/* Estilo para los botones de números */
.dataTables_paginate .paginate_button {
    /*color: #007bff !important;*/ /* Color del texto */
    background-color: var(--white) !important; /* Fondo */
    background: var(--white) !important; /* Fondo */
    border: 1px solid  #dee2e6 !important; /* Borde solo para botones de números */
    padding: .3rem .7rem !important; /* Tamaño del botón */
    margin-left: -1px; /* Alineación con otros botones */
}


/* Quitar el borde de los botones de "Anterior" y "Siguiente" */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    border: none !important;
    /*color: #007bff !important;*/
    background-color: transparent !important;
    padding: .375rem .75rem; /* Tamaño igual al de los botones de números */
}

/* Hover efecto solo para los números */
.dataTables_paginate .paginate_button:hover {
    background-color: var(--color-hover-btns) !important;
    border-color: #dee2e6 !important;
}

/* Hover para "Anterior" y "Siguiente" (sin fondo y borde) */
.dataTables_paginate .paginate_button.previous:hover,
.dataTables_paginate .paginate_button.next:hover {
    background-color: var(--color-hover-btns) !important; /* #cfd5db */
    border-color: transparent !important; /* Sin borde en hover */
}

/* Estilo para el botón activo (número seleccionado) */
.dataTables_paginate .paginate_button.current {
    background-color: var(--color-green) !important;
    background: #f8f9fa !important;
    border-color: #CCC5B9 !important; /*#484c4f*/
}

/* Botón deshabilitado */
.dataTables_paginate .paginate_button.disabled {
    color: #6c757d !important;  
    background-color: #fff !important;
    border-color: transparent !important; 
}

.dataTables_paginate .paginate_button.disabled:hover {
    color:#6c757d !important;
    background-color: #fff !important;
    border-color: transparent !important; 
}

/*--- DROP DE MENU LATERAL ---*/

.form-select-menu{
     background-color: var(--border-grey) !important;
     font-family: Roboto-Regular !important;
     color: var(--color-green) !important;
     font-size: 0.875rem !important;
     padding: 7px 18px !important;
     min-height:40px;
     font-weight: 700;
     border: 1px solid var(--border-grey) !important; 
 }

/***************************/
     /*TABLAS: STICKY*/
/***************************/
.tableModel thead tr th {
    /*position: sticky !important;*/
    /*top: 120px  !important;*/ 
    /*z-index: 1050  !important; 
    border-bottom: 2px solid red !important;*/
}