/* ==========================================================================
   ESTILOS DE NAVEGACIÓN Y MENÚ HOVER HUANIQUEO
   ========================================================================== */

/* Ajustes del Logo */
.navbar-logo {
    height: 75px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.navbar-logo:hover {
    transform: scale(1.02);
}

/* Tipografía y enlaces del menú principal */
.navbar-nav .nav-link {
    color: #2c3e50;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 0.8rem 1rem !important;
    transition: color 0.25s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #e67e22 !important;
    /* Tonalidad cálida ambarina institucional */
}

.text-amber {
    color: #f39c12 !important;
}

/* Configuración de Dropdowns en Hover (Escritorio) */
@media (min-width: 992px) {
    .hover-dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
        animation: fadeIn 0.25s ease;
    }

    /* Submenús de 2º Nivel (Ayuntamiento y OOAPAS) */
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        display: none;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
        animation: fadeIn 0.25s ease;
    }
}

/* Estilos de los ítems de las listas desplegables */
.dropdown-menu {
    padding: 0.5rem 0;
    min-width: 240px;
    border-radius: 12px !important;
}

.dropdown-item {
    font-size: 0.85rem;
    font-weight: 500;
    color: #34495e;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #f1f2f6;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu li:last-child>.dropdown-item {
    border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #fcf3cf;
    color: #d35400;
}

/* Animación suave de aparición */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   HOVER Y DESPLEGABLES MULTINIVEL (DROPDOWN / SUBMENÚS)
   ========================================================================== */

/* 1. DESPLEGAR MENÚS AL PASAR EL CURSOR (DESKTOP) */
@media (min-width: 992px) {

    /* Muestra el primer nivel de desplegable al pasar el cursor */
    .navbar .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
        animation: fadeIn 0.2s ease-in-out;
    }

    /* Posicionamiento para submenús de segundo nivel (ej. Ayuntamiento / OOAPAS) */
    .dropdown-menu .dropdown-submenu {
        position: relative;
    }

    /* Muestra el submenú lateral hacia la derecha al hacer hover */
    .dropdown-menu .dropdown-submenu:hover>.dropdown-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: -1px;
        animation: fadeIn 0.2s ease-in-out;
    }
}

/* 2. SOPORTE PARA EL MENÚ DE HAMBURGUESA / MÓVIL (PANTALLAS PEQUEÑAS) */
@media (max-width: 991.98px) {

    /* En móvil se muestran indentados hacia abajo para facilitar la navegación */
    .dropdown-menu .dropdown-submenu>.dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: #f8f9fa;
        border: none;
        box-shadow: none;
        padding-left: 1.5rem;
        /* Indentación visual */
    }

    /* Muestra el submenú si tiene la clase .show activa o al tocar */
    .dropdown-menu .dropdown-submenu:hover>.dropdown-menu,
    .dropdown-menu .dropdown-submenu>.dropdown-menu.show {
        display: block;
    }
}

/* Animación suave para la apertura */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}