.header-profile2 .dropdown-menu {
    right: 0;
    left: auto;
    transform: translateX(0); 
}

.user-imagen {
    width: 30px; 
    height: 30px;
    object-fit: cover;
    border-radius: 50%; 
}

#header-btn-routes-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; 
}

.header {
    height: auto !important;
}


@media (max-width: 768px) {
    #header-btn-routes-container {
        width: 100%; /* Ocupa todo el ancho */
        flex-direction: column; /* Coloca los botones en columna */
        gap: 5px; /* Espacio entre botones */
    }
}
/*-------------------------------------------------------------*/

/* Estilo personalizado para el tab activo */
.nav-tabs .nav-link.active {
    background-color: var(--bs-primary); /* Color de fondo para el tab activo */
}

.menu-toggle .deznav .metismenu > li:hover:nth-last-child(-n + 1) > ul {
    bottom: auto !important;
    top: auto;
}

.metismenu li a i{
    color: var(--bs-gray) !important;
}

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

/* Estilo para el tab en hover */
.nav-tabs .nav-link:hover {
    background-color: var(--bs-primary);
}

/* Estilo para las pestañas no activas */
.nav-tabs .nav-link {
    color: var(--bs-primary); 
}

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

/* ESTILO DE PAGINAS HEADER Y FOOTER */
html, body {
    height: 100%;
    margin: 0;
}

#page-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#main-wrapper {
    flex: 1 0 auto;
}

#footer {
    flex-shrink: 0;
}
/*-------------------------------------------------------------*/

/* ESTILO DE ZONAS PARA SOLTAR IMAGENES */

.drop-zone {
    border: 2px dashed #007bff;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}

.drop-zone__prompt {
    color: #007bff;
}

.drop-zone.dragover {
    background-color: #e9f5ff;
}

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