/*Libreria de fuentes*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300&display=swap');

* {
    font-family: "Montserrat", sans-serif;
}

:root,
[data-bs-theme=light] {

    --main-color       : #002224;
    --sencond-color    : #2B2926;
    --active-color     : #009AA0;
    --font-color       : white;
    --main-color-active: #00222489;
}

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color  : var(--tercer-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
}


.btn {
    border-radius: 0px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--main-color);
}

.btn-success {
    background-color: #449D44 !important;
    border          : 0px !important;

}

.btn {
    font-size: 14px !important;
    height   : 40px;
}

.btn-check:checked+.btn,
:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    color           : var(--main-color) !important;
    background-color: var(--bs-btn-active-bg);
    border-color    : var(--main-color) !important;
}

.icon-button {
    margin-right: 5px;
}

.dropdown-filter {
    margin-top: 3px;
}

.btn-filter {
    background-color   : #F5F5F5 !important;
    text-align         : start !important;
    border: 0px !important;
    border-inline-start: 10px solid var(--main-color) !important;
    height             : 50px;
    font-size          : 17px;

}

.btn-check:checked+.btn-filter,
:not(.btn-check)+.btn-filter:active,
.btn-filter:first-child:active,
.btn-filter.active,
.btn-filter.show {

    border-bottom: 0px solid !important;
    border-right : 0px solid !important;
    border-top   : 0px solid !important;
}

.btn-filter::after {
    content: none !important;
}

.btn-primary {
    background-color: var(--main-color) !important;
    border-color    : var(--main-color) !important;
}

.dropdown-menu-filter {
    background-color: #F5F5F5 !important;
    width           : 100%;
    border-radius   : 0px !important;

    margin-bottom: 50px !important;
    border       : 0px !important;
    border-left  : 10px solid var(--main-color) !important;
}

.btn-search-filter {
    height   : 30px;
    font-size: 11px !important;
}

.form-label-filter {
    font-size: 12px;
}

.form-control {
    border-radius: 0px !important;
    font-size    : 12px !important;
}

.form-select {
    border-radius: 0px !important;
    font-size    : 12px !important;
}


/* Estilos para los controles de paginación */
.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    /* Alinea los controles a la derecha */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    height       : 30px;
    border-radius: 0px !important;

    margin-left     : -0px !important;
    /* Ajusta el espacio entre los botones */
    border          : 1px solid #ccc !important;
    /* Añade un borde alrededor de los botones */
    background-color: white !important;
    /* Color de fondo de los botones */
    color           : var(--main-color);
    /* Color del texto en los botones */
    font-size       : 12px;


}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #F9F9F9 !important;
    /* Cambia el color de fondo al pasar el ratón por encima */
    color           : #eee !important;
    /* Cambia el color del texto al pasar el ratón por encima */
}

/* Estilos para el botón activo (página actual) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--main-color-active) !important;
    /* Color de fondo del botón activo */
    color           : white !important;
    border          : 1px solid var(--main-color-active) !important;
    /* Borde del botón activo */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current>* {
    color: white !important;
    /* Color del texto en el botón activo */
}

/* Estilos para el botón de 'Primero' y 'Último' */
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.last {
    margin-left: 0;
    /* Elimina el margen izquierdo del primer botón y el margen derecho del último botón */
}

.dataTables_info {
    font-size       : 13px;
    background-color: white;
    color           : var(--main-color);
}

.fila-par {
    background-color: #F9F9F9 !important;
    /* Cambia el color de fondo de las filas pares */
    border-bottom   : 0px;
    font-size       : 12px;
}

/* Estilos para filas impares */
.fila-impar {
    background-color: white !important;
    /* Cambia el color de fondo de las filas impares */
    font-size       : 12px;
    border-bottom   : 0px;
}


/* Estilos para filas pares */
.dataTable tbody tr.fila-par:hover {
    background-color: var(--main-color-active) !important;
    /* Cambia el color de fondo al pasar el ratón por encima de filas pares */
}

/* Estilos para filas impares */
.dataTable tbody tr.fila-impar:hover {
    background-color: var(--main-color-active) !important;
    /* Cambia el color de fondo al pasar el ratón por encima de filas impares */
}

/* Estilos para la fila seleccionada actualmente */
.dataTable tbody tr.fila-par.selected,
.dataTable tbody tr.fila-impar.selected {
    background-color: var(--main-color-active) !important;
}

/* Cambia el tamaño de la fuente de los encabezados */
.dataTable thead th {
    font-size: 12px;
    /* Ajusta el tamaño de la fuente según tus necesidades */
}

/* Ajusta el alto de los encabezados (cambia el valor según sea necesario) */
.dataTable thead th {
    height: 40px;
    color : var(--main-color) !important;
}

/* Cambia el tamaño de fuente y el alto juntos */
.dataTable thead th {
    font-size: 12px;
    height   : 15px;
    color    : var(--main-color) !important;
}

/*ESTILO DE SWAL*/
.custom-swal-container {
    /* Estilos para el contenedor */
}

.custom-swal-popup {
    border-radius: 0px !important;
}

.custom-swal-header {
    /* Estilos para el encabezado del modal */
}

.custom-swal-title {
    /* Estilos para el título del modal */
}

.custom-swal-close-button {
    /* Estilos para el botón de cierre */
}

.custom-swal-icon {
    /* Estilos para el icono */
}

.custom-swal-content {
    /* Estilos para el contenido del modal */
}

.custom-swal-input {
    /* Estilos para el campo de entrada si lo usas */
}

.custom-swal-actions {
    /* Estilos para las acciones (botones) del modal */
}

.custom-swal-confirm-button {
    border-radius   : 0px !important;
    background-color: var(--main-color) !important;
}

/* Estilos cuando el botón está activo (clicado) */
.custom-swal-confirm-button:active {
    /* Agrega los estilos que deseas aplicar cuando el botón está activo */
    border-color: var(--main-color-active) !important;
    box-shadow  : none !important;
}

/* Estilos cuando el botón está enfocado (seleccionado) */
.custom-swal-confirm-button:focus {
    /* Agrega los estilos que deseas aplicar cuando el botón está enfocado */
    outline   : none !important;
    box-shadow: 0 0 0 3px var(--main-color-active) !important;
    /* Ejemplo: resaltado de borde azul */
}

.custom-swal-cancel-button {
    border-radius: 0px !important;
}

.custom-swal-footer {
    /* Estilos para el pie del modal */
}

.icon-success {
    color    : #449D44;
    font-size: 15px;
}

.icon-cancel {
    color    : #C9302C;
    font-size: 15px;
}

.icon-label {
    color    : var(--main-color);
    font-size: 15px;
    cursor   : pointer;
}

.active {
    color: var(--main-color) !important;
}

.nav-link-tabs {
    color    : var(--main-color) !important;
    font-size: 13px !important;
}

.dataTables_filter {
    display: none;
}

.modal-content {
    border-radius: 0px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border          : 1px solid #dddddd !important;
    border-radius   : 0px !important;
    height          : 30px !important;
}