/* 🖥️ Desktop (pantallas grandes) */
@media only screen and (min-width: 1024px) {

    /* 🌐 Estilos generales */
    html {
        font-size: 16px;
        position: relative;
        min-height: 100%;
    }

    .responsive-logo {
        width: 200px; /* Tamaño por defecto para desktop */
        height: auto; /* Mantener proporción */
        display: block;
    }

    body {
        font-size: 16px;
        margin-bottom: 60px;
    }

    .navbar-collapse {
        display: block !important;
        width: 100%;
        background-color: white;
    }

    .navbar-toggler {
        margin-bottom: 10px;
    }

    .button-text {
        display: inline; /* Mostrar el texto */
    }

    .dropdown-item {
        font-size: 16px;
    }

    header .d-flex {
        flex-wrap: nowrap; /* Mantiene elementos alineados */
        align-items: center;
    }

    .navbar-toggler {
        margin-left: auto; /* Asegura alineación a la derecha */
    }
}

/* 📱 Móviles */
@media only screen and (max-width: 767px) {

    /* 🌐 Estilos generales */
    html {
        font-size: 12px;
        position: relative;
        min-height: 100%;
    }

    .responsive-logo {
        width: 100px; /* Ajustar tamaño en móvil */
        height: auto;
    }

    body {
        font-size: 12px;
        margin-bottom: 60px;
    }

    .navbar-collapse {
        display: none; /* Oculta inicialmente */
    }

    .navbar-collapse.show {
        display: block; /* Se muestra cuando Bootstrap la activa */
    }

    .navbar-toggler {
        display: block;
        margin-bottom: 10px;
    }

    .button-text {
        display: none !important; /* Oculta el texto */
    }

    .dropdown-item {
        font-size: 12px;
    }

    header .d-flex {
        flex-wrap: wrap; /* Permite mejor adaptación en pantallas pequeñas */
        justify-content: space-between;
    }

    .navbar-collapse {
        position: fixed; /* Hace que el menú se mantenga en pantalla */
        top: 60px; /* Ajusta la distancia desde el header */
        left: 0;
        width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.95); /* Ligera transparencia */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    }

     .navbar-nav {
        width: 100%; /* Expande la lista completa */
    }

     .navbar-nav .nav-link {
        color: #333 !important; /* Ajustar color de texto para mayor contraste */
        font-weight: bold;
        width: 100%; /* Asegura que cada opción tenga un ancho completo */
        text-align: center; /* Centra los textos dentro del menú */

    }

}

/* 📊 Tablets (intermedio) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

    /* 🌐 Estilos generales */
    html {
        font-size: 14px;
        position: relative;
        min-height: 100%;
    }

    .responsive-logo {
        width: 150px; /* Ajustar tamaño en tablets */
        height: auto;
    }

    body {
        font-size: 14px;
        margin-bottom: 60px;
    }

    .navbar-collapse {
        display: flex;
        flex-direction: column;
        background-color: #f8f9fa; /* Color de fondo más claro */
    }

    .button-text {
        display: none !important; /* Oculta el texto */
    }

    .dropdown-item {
        font-size: 14px;
    }
}

/* 🔹 Ajustes generales */
.dropdown-menu {
    position: absolute;
     min-width: 180px; /* Reduce el tamaño mínimo del menú */
    max-width: 250px; /* Limita el ancho máximo */
    padding: 5px 10px; /* Ajusta el espacio interior */
    right: 50%;
    transform: translateX(50%);
    text-align: left; /* Asegura que el contenido dentro del menú esté centrado */
    min-width: 200px;
    background-color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Borde sutil */
}