/* ==========================================================================
   NAVEGACIÓN HOMOGÉNEA Y MODULAR - SANTA ANA MAYA 2024-2027 (PALETA PT)
   ========================================================================== */
:root {
    --pt-rojo: #E30613;
    --pt-rojo-hover: #B8000A;
    --pt-amarillo: #FFED00;
    --pt-negro: #1F1F1F;
    --pt-gris-bg: #F8F9FA;
}

/* Contenedor principal del menú fijo */
.header-nav-wrapper {
    background-color: #FFFFFF !important;
    border-bottom: 3px solid var(--pt-rojo);
    z-index: 1040;
}

/* Logo de navegación */
.nav-logo {
    transition: transform 0.2s ease;
}

.nav-logo:hover {
    transform: scale(1.03);
}

/* ==========================================================================
   1. BARRA SUPERIOR (TOP NAV BAR)
   ========================================================================== */
.top-nav-bar {
    background-color: var(--pt-gris-bg);
    border-bottom: 1px solid #E9ECEF;
    padding: 6px 0;
}

/* Botones homogéneos de acceso directo en la barra superior */
.btn-nav-top {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50rem;
    padding: 0.35rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.25s ease-in-out;
    white-space: nowrap;
    text-decoration: none;
}

.btn-nav-top-red {
    background-color: var(--pt-rojo);
    color: #FFFFFF !important;
    border: 1px solid var(--pt-rojo);
}

.btn-nav-top-red:hover {
    background-color: var(--pt-rojo-hover);
    color: var(--pt-amarillo) !important;
    box-shadow: 0 4px 10px rgba(227, 6, 19, 0.25);
}

.btn-nav-top-outline {
    background-color: transparent;
    color: var(--pt-negro) !important;
    border: 1px solid #CED4DA;
}

.btn-nav-top-outline:hover {
    background-color: var(--pt-amarillo);
    color: var(--pt-rojo) !important;
    border-color: var(--pt-amarillo);
}

/* ==========================================================================
   2. FILAS Y ENLACES DEL MENÚ DE NAVEGACIÓN
   ========================================================================== */
.navbar-nav {
    gap: 0.15rem;
}

.navbar-nav .nav-link {
    color: var(--pt-negro) !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.45rem 0.55rem !important;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

/* Hovers y estados activos */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
    color: var(--pt-rojo) !important;
    background-color: rgba(255, 237, 0, 0.35);
}

/* ==========================================================================
   3. MENÚS DESPLEGABLES (DROPDOWNS) Y SUBMENÚS
   ========================================================================== */
.dropdown-menu {
    border: none;
    border-top: 3px solid var(--pt-rojo);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 10px 10px;
    padding: 0.5rem 0;
}

.dropdown-item {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pt-negro);
    padding: 0.5rem 1.2rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--pt-amarillo);
    color: var(--pt-rojo);
    font-weight: 700;
}

/* Submenús anidados */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -3px;
    display: none;
    border-left: 3px solid var(--pt-rojo);
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.fs-xs {
    font-size: 0.7rem;
}

/* ==========================================================================
   4. ADAPTACIÓN RESPONSIVA (PANTALLAS PEQUEÑAS Y MÓVILES)
   ========================================================================== */
@media (max-width: 1199px) {
    .dropdown-submenu>.dropdown-menu {
        position: static !important;
        left: 0 !important;
        margin-left: 1rem;
        border-left: 2px solid var(--pt-rojo);
    }

    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }
}