/* Estilos para el selector de idioma de escritorio */
.lang-selector-desktop {
    display: flex; /* Visible por defecto en escritorio */
    align-items: center;
    margin-left: auto; /* Empuja a la derecha */
}

.lang-selector-desktop .dropdown-toggle {
    color: #fff;
    padding: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.lang-selector-desktop .dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.lang-selector-desktop img {
    margin-right: 5px;
    width: 24px;
    height: 16px;
}

.lang-selector-desktop .dropdown-menu {
    background-color: #333;
}

.lang-selector-desktop .dropdown-menu li a {
    color: #fff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.lang-selector-desktop .dropdown-menu li a:hover {
    background-color: #555;
}

.lang-selector-desktop .dropdown-menu li a.active-lang {
    font-weight: bold;
    color: #5cb85c; /* Color para el idioma activo */
}

/* Estilos para el selector de idioma móvil */
.lang-selector-mobile {
    display: none; /* Oculto por defecto en escritorio */
    align-items: center;
    margin-left: 10px; /* Espacio entre el logo y las banderas */
}

.lang-selector-mobile a img {
    width: 24px;
    height: 16px;
}

.lang-selector-mobile a {
    padding: 5px; /* Ajusta el padding para las banderas móviles */
}

.lang-selector-mobile a.active-lang img {
    border: 2px solid #5cb85c; /* Resaltar bandera activa en móvil */
    border-radius: 3px;
}

/* Media query para pantallas grandes (escritorio) */
@media (min-width: 768px) {
    .lang-selector-desktop {
        display: flex !important; /* Mostrar en escritorio */
    }

    .lang-selector-mobile {
        display: none !important; /* Ocultar en escritorio */
    }
}

/* Media query para pantallas pequeñas (móvil) */
@media (max-width: 767px) {
    .lang-selector-desktop {
        display: none !important; /* Ocultar en móvil */
    }

    .lang-selector-mobile {
        display: flex !important; /* Mostrar en móvil */
    }

    /* Ajustes para el navbar-header en móvil para alinear elementos */
    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Distribuye espacio entre logo, banderas y botón */
        width: 100%;
    }

    .navbar-brand {
        margin-right: auto; /* Empuja el logo a la izquierda */
    }

    .navbar-toggle {
        margin-left: 10px; /* Espacio entre banderas y botón de menú */
    }

    /* Asegurar que el menú colapsable no tenga padding extra de los lang-item */
    .navbar-collapse .navbar-nav .lang-item {
        display: none !important; /* Asegurarse de que no aparezcan duplicados */
    }
}