/***********************************************************/
/*                                                         */
/* Plataforma e-ducativa - Argentina                       */
/*                                                         */
/* Copyright (c) 2026 de e-ducativa Educación Virtual S.A. */
/*                                                         */
/***********************************************************/
/* -----------------------------------------------------------
   EDU_NAV_SUBMENU Component - Submenu acordeon de navegacion
   ----------------------------------------------------------- */
:root {
    /* Interfaz del componente: el contexto que lo usa ata estos valores a los
       suyos. Los defaults sirven para una barra de navegacion de fondo oscuro. */
    --edu-nav-submenu-text: #ffffff;
    --edu-nav-submenu-hover-bg: rgba(255, 255, 255, .16);
    --edu-nav-submenu-border: rgba(255, 255, 255, .12);

    /* Sangrado lateral del hover sobre el padding del contenedor. En 0 el
       fondo termina donde termina el link. */
    --edu-nav-submenu-bleed: 0;

    /* El cuarto valor alinea el texto con el icono del item que lo abre. */
    --edu-nav-submenu-padding: 8px 4px 9px 15px;
    --edu-nav-submenu-gap: 8px;

    --edu-nav-submenu-font-size: .813rem;
    --edu-nav-submenu-caret-size: .75rem;
    --edu-nav-submenu-caret-opacity: .7;
    --edu-nav-submenu-ext-size: .625rem;
    --edu-nav-submenu-ext-opacity: .75;
}

/* -----------
   Base Styles
   ----------- */
/* Acordeon <details> nativo: apertura, foco y teclado los da el navegador. */
.edu_nav_submenu { border: none; }

/* El disparador hereda su apariencia del item que lo contiene; el componente
   solo lo vuelve pulsable y le saca el marker. Se apunta el <summary> por
   etiqueta porque el consumidor elige que clase ponerle. */
.edu_nav_submenu > summary {
    list-style: none;
    cursor: pointer;
}
/* WebKit dibuja su propio marker de <summary>, aparte del list-style. */
.edu_nav_submenu > summary::-webkit-details-marker { display: none; }

.edu_nav_caret {
    margin-left: auto;
    font-size: var(--edu-nav-submenu-caret-size);
    opacity: var(--edu-nav-submenu-caret-opacity);
}
/* Cerrado apunta abajo (hay mas contenido); abierto apunta arriba (se pliega). */
.edu_nav_submenu[open] .edu_nav_caret { transform: rotate(180deg); }

/* border-top separa el submenu del item que lo abrio. */
.edu_nav_submenu_list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--edu-nav-submenu-border);
}
.edu_nav_submenu_link {
    display: flex;
    align-items: center;
    gap: var(--edu-nav-submenu-gap);
    padding: var(--edu-nav-submenu-padding);
    font-size: var(--edu-nav-submenu-font-size);
    text-decoration: none;
    white-space: nowrap;
    color: var(--edu-nav-submenu-text);
    border-bottom: 1px solid var(--edu-nav-submenu-border);
}
/* box-shadow lateral: extiende el fondo del hover sobre el padding del grupo. */
.edu_nav_submenu_link:hover {
    background-color: var(--edu-nav-submenu-hover-bg);
    box-shadow: var(--edu-nav-submenu-bleed) 0 0 0 var(--edu-nav-submenu-hover-bg);
}

/* Marca del destino cuando no es navegacion normal: enlace externo
   (edu_nav_ext) o direccion de correo (edu_nav_mail). Misma posicion y peso
   visual; cambia solo el icono. Sin color propio: hereda el del contexto. */
.edu_nav_ext,
.edu_nav_mail {
    margin-left: auto;
    padding-left: var(--edu-nav-submenu-gap);
    font-size: var(--edu-nav-submenu-ext-size);
    opacity: var(--edu-nav-submenu-ext-opacity);
}