/* ================================== */
/* PAE Component: Navigation          */
/* ========================== ======= */

/*:root{
	color fondo menu 
	pae-nav__menu :  background-color: var( --pae-color-overlay-gray);*/ /* gris */
    /*color de texto y padding
    pae-nav__link : padding: var(--pae-spacing-sm); color: var(--pae-color-text-light);
    separacion opciones
    .pae-nav__link: gap: var(--pae-spacing-sm);
    sub nmenu color fondo con trnsparencia y texto
    .pae-nav__submenu: background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px);
    .pae-nav__sublink: color: var(--pae-color-text-primary);
    enlace opciones hover focus
    pae-nav__link:hover, pae-nav__link:focus, pae-nav__sublink:hover, pae-nav__sublink:focus
    background-color: var(--pae-color-secondary-dark, #054d91);
    outline: none;
}*/


/* Contenedor principal de la navegación */
.pae-nav {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    font-size: var(--pae-font-size-h4);
}

/* Lista principal del menú */
.pae-nav__menu {
    background-color: var( --pae-color-overlay-gray); /* gris */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Soporte para Safari */
    display: flex;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Elementos de la lista (uniformemente distribuidos) */
.pae-nav__item {
    position: relative;
    /* Cada opción ocupa un espacio equitativo */
    flex: 1;
    text-align: center;
}

/* Enlaces del menú principal */
.pae-nav__link {
    display: flex; /* Usamos flex para centrar contenido (texto + flecha) */
    justify-content: center;
    align-items: center;
    padding: var(--pae-spacing-sm);
    color: var(--pae-color-text-light);
    text-decoration: none;
    transition: var(--pae-transition-base);
    gap: var(--pae-spacing-sm);
}

    /* Estado Hover/Focus: cambia el color de fondo como en la imagen */
    .pae-nav__link:hover,
    .pae-nav__link:focus,
    .pae-nav__sublink:hover,
    .pae-nav__sublink:focus {
        background-color: var(--pae-color-secondary-dark, #054d91);
        color: var(--pae-color-text-light, #ffffff);
        outline: none;
    }

/* Submenús (ocultos por defecto) */
.pae-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 240px;
    background-color: rgba(255, 255, 255, 0.9); /* Efecto glass también en submenús */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--pae-box-shadow);
    /*border-radius: 0 0 var(--pae-border-radius-md) var(--pae-border-radius-md);*/
    text-align: left;
}

.pae-nav__item--has-submenu:hover > .pae-nav__submenu,
.pae-nav__item--has-submenu:focus-within > .pae-nav__submenu {
    display: block;
}

.pae-nav__sublink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pae-spacing-sm) var(--pae-spacing-md);
    color: var(--pae-color-text-primary);
    text-decoration: none;
    transition: var(--pae-transition-base);
}
/*
.pae-nav__submenu--level-2 {
    top: 0;
    left: 100%;
    border-radius: var(--pae-border-radius-md);
}
*/

.pae-nav__submenu--level-2 {
    left: 100%; /* Lo posiciona a la derecha del elemento padre */
    top: -1px;
    /*border-radius: var(--pae-border-radius-md);*/
    border-left: 1px solid var(--pae-color-border);
}

/* Flechas indicadoras de submenú */
.pae-nav__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.2s ease;
}

.pae-nav__arrow--right {
    transform: rotate(-90deg);
}

.pae-nav__toggle {
    display: none;
    background-color: transparent;
    border: 1px solid var(--pae-color-border);
    border-radius: var(--pae-border-radius-md);
    padding: 0.4rem;
    cursor: pointer;
    color: var(--pae-color-text-primary);
}



/* ============================================= */
/* PAE Component: Navigation (Vista Móvil)       */
/* ============================================= */
@media (max-width: 64em) {
    .pae-nav__menu {
        /* Oculto por defecto, se activa con JS desde el botón en el header */
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--pae-color-surface);
        box-shadow: var(--pae-box-shadow);
        border-top: 1px solid var(--pae-color-border);
    }

    .pae-nav__menu--is-open {
        display: flex;
    }

    .pae-nav__item {
        text-align: left;
        border-bottom: 1px solid var(--pae-color-border);
    }

        .pae-nav__item:last-child {
            border-bottom: none;
        }

    .pae-nav__link {
        justify-content: space-between;
        width: 100%;
        background-color: var(--pae-color-overlay-gray);
    }


    .pae-nav__submenu {
        /* En móvil, los submenús son estáticos y no flotantes */
        display: block;
        position: static;
        box-shadow: none;
        background-color: var(--pae-color-background);
        border-top: 1px solid var(--pae-color-border);
        padding-left: var(--pae-spacing-md);
    }

/*    pae-nav__toggle{
        display:flex;
    }*/
}