@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

main {
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow-x: auto;
}

p {
    white-space: pre-line; /* Preserva los saltos de línea */
}

.p-1 {
    font-size: 16px;
}

/* Reducir el tamaño de fuente de h1 a h6 en 0.1rem */
h1 {
    font-size: calc(2.5rem - 0.1rem); /* Ajustar según el tamaño de fuente base */
}
h2 {
    font-size: calc(2rem - 0.1rem);
}
h3 {
    font-size: calc(1.75rem - 0.1rem);
}
h4 {
    font-size: calc(1.5rem - 0.1rem);
}
h5 {
    font-size: calc(1.25rem - 0.1rem);
}
h6 {
    font-size: calc(1rem - 0.1rem);
}

.dataTables_filter {
    display: none;
}

/* Agregar padding al contenedor Select2 */
.select2-container--default .select2-selection--single {
    padding: 1rem;
    height: auto; /* Ajustar la altura para que se acomode al padding */
    border: 1px solid #dee2e6; /* Borde de color gris */
    border-radius: 4px; /* Bordes redondeados opcionales */
}

/* Ajustar el tamaño del contenedor para que el texto no se desborde */
.select2-selection__rendered {
    line-height: 1.5rem; /* Ajustar el line-height según el padding */
}

/* Centrar verticalmente la flecha del selector */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Ajustar el padding del texto seleccionado */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0rem;
}

/* Personalizar AlertifyJS */
.custom-alertify .ajs-header {
    background-color: #00A3E8;
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 10px;
}

.custom-alertify .ajs-footer {
    background-color: #f8f9fa;
    text-align: right;
    padding: 10px;
}

.custom-alertify .ajs-button.ajs-ok {
    background-color: #28a745;
    color: white;
}

.custom-alertify .ajs-button.ajs-cancel {
    background-color: #dc3545;
    color: white;
}

.welcome-text {
    font-size: 1.1em; /* Puedes ajustar este valor según tus necesidades */
}

/* Auth */
.right-section {
    background-color: #00A3E8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}



/* Usar el color primary en lugar de un color específico */
.navbar-nav .nav-item a {
    color: var(--bs-primary) !important; /* Usa el color primary de Bootstrap */
    background-color: transparent; /* Fondo transparente */
    border: none;
}

/* Estilo específico para el enlace activo */
.navbar-nav .nav-item .link-upper-active {
    border-bottom: 3px solid var(--bs-primary); /* Borde inferior usando el color primary */
    color: var(--bs-primary) !important;
}

/* Mantener el color primary en hover */
.navbar-nav .nav-item a:hover,
.navbar-nav .nav-item a:focus {
    text-decoration: none;
    color: var(--bs-primary) !important; /* Usa el color primary en hover */
}

.link-sidebar {
    background-color: #CCE4FF; /* Fondo del color info para el no activo */
    color: #4A4A4A ; /* Texto gris oscuro */
    padding: 0.5rem 1rem;
    border-radius: 15px; /* Redondeado */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el fondo y el color del texto */
    border: none; /* Sin borde */
}

.link-sidebar-active {
    background-color: #00A3E8; /* Azul menos intenso para el activo */
    color: #FFFFFF !important; /* Texto blanco para mejor contraste */
    padding: 0.5rem 1rem;
    border-radius: 15px; /* Redondeado */
    text-decoration: none;
    font-weight: bold; /* Resalta el texto activo */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el cambio de color */
    border: none; /* Sin borde */
}

.link-sidebar:hover {
    background-color: #B8D8FF; /* Fondo ligeramente más oscuro al pasar el ratón (opcional) */
    color: #4A4A4A !important;  /* Texto un poco más oscuro al pasar el ratón (opcional) */
}


/* para moviles */

@media (max-width: 768px) {
    .navbar-brand img {
        max-width: 80px; /* Ajuste del tamaño del logo */
    }

    .navbar-nav .nav-item h6 {
        font-size: 0.9rem; /* Ajuste del tamaño de fuente para que los ítems sean más compactos */
        margin: 0;
    }

    /* Centra el contenido del menú colapsado */
    .navbar-collapse {
        justify-content: center;
    }

    /* Ajuste de padding y espaciado */
    .navbar-nav .nav-item a {
        padding: 0.5rem;
    }
}