/* ========================================================
   ESTILOS DE MENÚ - TRANSPARENCIA (MAGENTA / MORADO)
   ======================================================== */

:root {
    --jiq-purple: #B0006D !important;
    /* Morado / Magenta */
    --jiq-purple-light: #fcf0f7 !important;
    /* Fondo tenue hover */
    --jiq-text-gray: #555555 !important;
    /* Texto gris de botones */
}

/* 1. LÍNEA DELGADA MORADA EN LA PARTE SUPERIOR DE LA PÁGINA */
.top-purple-line {
    height: 5px;
    width: 100%;
    background-color: #B0006D !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
}

/* Navbar Base */
.navbar-jiq {
    margin-top: 5px !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0;
}

.brand-logo-jiq {
    max-height: 48px;
    width: auto;
}

/* 2. BOTONES DEL MENÚ (TEXTO GRIS Y ENMARCADO MORADO) */
.nav-btn-jiq {
    color: #555555 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    padding: 6px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    transition: all 0.25s ease-in-out !important;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* Hover en Botones */
.nav-btn-jiq:hover {
    color: #B0006D !important;
    border-color: #B0006D !important;
    background-color: #fcf0f7 !important;
}

/* Botón Activo o Enmarcado (Como AYUNTAMIENTO) */
.nav-btn-jiq.active,
.nav-btn-jiq.active-boxed {
    color: #B0006D !important;
    border-color: #B0006D !important;
    background-color: #FFFFFF !important;
}

/* 3. MENÚ DESPLEGABLE (DROPDOWN) */
.dropdown-menu-jiq {
    border: 1px solid #E2E8F0 !important;
    border-top: 3px solid #B0006D !important;
    border-radius: 0 0 8px 8px !important;
    padding: 6px 0 !important;
    margin-top: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.dropdown-menu-jiq .dropdown-item {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #555555 !important;
    padding: 8px 20px !important;
    transition: all 0.2s ease !important;
}

.dropdown-menu-jiq .dropdown-item:hover {
    background-color: #fcf0f7 !important;
    color: #B0006D !important;
    padding-left: 24px !important;
}