/* ==========================================================================
   COMPAC - Navbar (escritorio + móvil)
   Se carga desde mod/header.php despues del resto de hojas de estilo,
   por lo que sobreescribe al tema (goodlayers / superfish / dl-menu).
   No modifica la altura del header para no romper los margin-top
   negativos que usan las paginas.
   ========================================================================== */

:root {
    --nav-green: #39ac5f;
    --nav-teal: #30b5b3;
    --nav-blue: #059cbc;
    --nav-panel: #08333c;
    --nav-panel-2: #052730;
    --nav-font: 'Montserrat', 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* No todas las páginas cargan bootstrap (program.php no lo hace), así que no
   se puede dar por hecho el reset global de box-sizing: sin él los anchos en
   % se suman al padding y el header se desborda a lo ancho de la pantalla. */
header .gdlr-logo,
header .gdlr-logo *,
header .containerright,
header .containerright * {
    box-sizing: border-box;
}

/* El tema declara font-family:"Montserrat" sin alternativa, y hay páginas que
   no cargan esa fuente (program.php, por ejemplo). Cuando falta, el navegador
   cae a su tipografía por defecto, que es serif. Aquí se fija una pila con
   respaldo para que el menú siempre salga sin serifa. */
header .topLineBlue-bg-gradient-blue-green,
header .gdlr-header-inner,
#gdlr-responsive-navigation,
#gdlr-responsive-navigation .dl-menu,
#gdlr-responsive-navigation .dl-submenu,
#gdlr-responsive-navigation button,
.gdlr-navigation-wrapper,
.gdlr-navigation,
.gdlr-main-menu,
.gdlr-main-menu a {
    font-family: var(--nav-font);
}

/* --------------------------------------------------------------------------
   Barra superior (login / campus)
   -------------------------------------------------------------------------- */

.topLineBlue-bg-gradient-blue-green {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}

.topLineBlue-bg-gradient-blue-green .containerright {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    padding-right: 28px;
}

.nav-toplink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.nav-toplink:hover {
    background: #fff;
    border-color: #fff;
    color: #0c6c62 !important;
    transform: translateY(-1px);
}

.nav-toplink i {
    font-size: 11px;
}

.nav-toplink-name {
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    margin-right: 2px;
}

/* --------------------------------------------------------------------------
   Velo degradado detras del header: mantiene el menu legible sobre las fotos
   -------------------------------------------------------------------------- */

.gdlr-header-container {
    position: relative;
}

.gdlr-header-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2px;
    right: 0;
    bottom: -35px;
    left: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(2, 26, 32, .72) 0%,
            rgba(2, 26, 32, .48) 45%,
            rgba(2, 26, 32, 0) 100%);
}

/* --------------------------------------------------------------------------
   Menu principal (escritorio)
   -------------------------------------------------------------------------- */

.gdlr-navigation-wrapper .gdlr-main-menu>li {
    padding: 0 5px;
}

/* el tema pintaba un bloque gris #373737 al pasar el mouse */
.gdlr-navigation-wrapper .gdlr-main-menu>li:hover {
    background-color: transparent !important;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>a {
    position: relative;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li:first-child>a {
    padding-left: 14px;
}

/* subrayado animado */
.gdlr-navigation-wrapper .gdlr-main-menu>li>a::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--nav-green), var(--nav-teal));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

/* Hover: solo aclara el fondo. Sin subrayado, para no confundirse con la
   sección en la que está parado el visitante. */
.gdlr-navigation-wrapper .gdlr-main-menu>li:hover>a,
.gdlr-navigation-wrapper .gdlr-main-menu>li.sfHover>a {
    background-color: rgba(255, 255, 255, .13);
    color: #fff !important;
}

/* Sección actual: es el único ítem con subrayado, y lo mantiene siempre. */
.gdlr-navigation-wrapper .gdlr-main-menu>li.nav-current>a {
    background-color: rgba(255, 255, 255, .18);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.gdlr-navigation-wrapper .gdlr-main-menu>li.nav-current>a::before {
    transform: scaleX(1);
}

/* flecha indicadora de submenu (el tema la ocultaba) */
.gdlr-navigation-wrapper .gdlr-main-menu>li>a.sf-with-ul {
    padding-right: 27px;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>a.sf-with-ul::after {
    display: block;
    content: '\f107';
    font-family: FontAwesome;
    font-size: 11px;
    font-weight: normal;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
    top: 50%;
    right: 12px;
    height: auto;
    margin-top: -5px;
    border: 0;
    transition: transform .26s ease;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li:hover>a.sf-with-ul::after,
.gdlr-navigation-wrapper .gdlr-main-menu>li.sfHover>a.sf-with-ul::after {
    transform: rotate(-180deg);
}

/* Inscripción: llama la atención con un brillo periódico, no con un relleno
   permanente. En reposo es un botón de contorno, para no confundirse con la
   pastilla rellena + subrayado que marca la sección actual. */
.gdlr-navigation-wrapper .gdlr-main-menu>li.nav-cta>a {
    z-index: 0;
    overflow: hidden;
    animation: navCtaPulso 2.5s ease-in-out infinite;
}

/* Al pasar el mouse se corta el ciclo y queda el hover normal, igual que
   el resto de los ítems. */
.gdlr-navigation-wrapper .gdlr-main-menu>li.nav-cta:hover>a,
.gdlr-navigation-wrapper .gdlr-main-menu>li.nav-cta.sfHover>a {
    animation: none;
}

/* El contorno se dibuja con box-shadow inset y no con border: así aparece
   solo durante el destello sin alterar el tamaño del botón en reposo. */
@keyframes navCtaPulso {

    0%,
    20%,
    100% {
        box-shadow: none;
    }

    9% {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95),
            0 0 18px rgba(255, 255, 255, .45);
    }
}

/* El ::before deja de ser el subrayado y pasa a ser el destello que barre
   el botón: 0,5 s de brillo y 2 s de reposo. */
.gdlr-navigation-wrapper .gdlr-main-menu>li.nav-cta>a::before {
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: -1;
    border-radius: 0;
    transition: none;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, .85) 50%,
            rgba(255, 255, 255, 0) 70%);
    animation: navCtaBrillo 2.5s linear infinite;
}

@keyframes navCtaBrillo {
    0% {
        transform: translateX(-130%);
    }

    20%,
    100% {
        transform: translateX(130%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .gdlr-navigation-wrapper .gdlr-main-menu>li.nav-cta>a,
    .gdlr-navigation-wrapper .gdlr-main-menu>li.nav-cta>a::before,
    #gdlr-responsive-navigation.dl-menuwrapper li.nav-cta>a::before {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Submenus (escritorio)
   -------------------------------------------------------------------------- */

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 0 0;
    margin: 0;
    min-width: 248px;
    left: 5px;
    text-transform: none;
    animation: navSubIn .24s cubic-bezier(.2, .7, .3, 1);
}

/* panel dibujado detras de los items para dejar aire bajo el menu */
.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 12px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(165deg, var(--nav-panel) 0%, var(--nav-panel-2) 100%);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .38);
}

/* pico que apunta al item del menu */
.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 6px;
    left: 26px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    border-radius: 3px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-left: 1px solid rgba(255, 255, 255, .12);
    background: var(--nav-panel);
}

@keyframes navSubIn {
    from {
        transform: translateY(-8px);
    }

    to {
        transform: translateY(0);
    }
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu li {
    background-color: transparent !important;
    border: 0 !important;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu a {
    position: relative;
    padding: 11px 20px 11px 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 18px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    border: 0 !important;
    transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}

/* punto/acento a la izquierda */
.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--nav-teal);
    opacity: 0;
    transition: opacity .18s ease;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu a:hover,
.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu .current-menu-item>a {
    color: #fff;
    background-color: rgba(255, 255, 255, .07);
    padding-left: 30px;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu a:hover::before,
.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu .current-menu-item>a::before {
    opacity: 1;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu li:first-child>a {
    padding-top: 14px;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li>.sub-menu li:last-child>a {
    padding-bottom: 14px;
}

/* el ultimo submenu se alinea a la derecha para no salirse de pantalla */
.gdlr-navigation-wrapper .gdlr-main-menu>li:last-child>.sub-menu,
.gdlr-navigation-wrapper .gdlr-main-menu>li:nth-last-child(2)>.sub-menu {
    left: auto;
    right: 5px;
}

.gdlr-navigation-wrapper .gdlr-main-menu>li:last-child>.sub-menu::after,
.gdlr-navigation-wrapper .gdlr-main-menu>li:nth-last-child(2)>.sub-menu::after {
    left: auto;
    right: 26px;
}

/* pantallas de escritorio angostas: evita que el menu se parta en dos lineas */
@media only screen and (max-width: 1280px) {
    .gdlr-navigation-wrapper .gdlr-main-menu>li {
        padding: 0 2px;
    }

    .gdlr-navigation-wrapper .gdlr-main-menu>li>a {
        padding: 9px 10px;
        font-size: 11px;
        letter-spacing: .05em;
    }

    .gdlr-navigation-wrapper .gdlr-main-menu>li>a.sf-with-ul {
        padding-right: 24px;
    }

    .gdlr-navigation-wrapper .gdlr-main-menu>li>a::before {
        left: 10px;
        right: 10px;
    }
}

/* --------------------------------------------------------------------------
   MOVIL / TABLET (<= 959px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 959px) {

    /* fila del header: logo a la izquierda, boton a la derecha */
    body .gdlr-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 18px 18px 26px !important;
        float: none;
        position: relative;
    }

    body .gdlr-logo>a {
        flex: 0 1 auto;
        line-height: 0;
    }

    body .gdlr-logo>a>img {
        width: 175px;
        max-width: 48vw;
        height: auto;
    }

    #gdlr-responsive-navigation.dl-menuwrapper {
        flex: 0 0 auto;
        width: auto;
        float: none;
        height: auto;
        margin: 0;
        position: relative;
    }

    /* --- boton hamburguesa --- */
    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger {
        position: relative;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        width: 50px;
        height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .28);
        background-color: transparent !important;
        background-image: linear-gradient(to left top, var(--nav-green), var(--nav-teal));
        box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger:active {
        transform: scale(.95);
    }

    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger::before,
    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger::after {
        content: '';
        position: absolute;
        left: 14px;
        width: 22px;
        height: 2.5px;
        border-radius: 3px;
        background: #fff;
        box-shadow: none;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease, opacity .18s ease, top .2s ease;
    }

    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger::after {
        top: 15px;
        box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
    }

    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger::before {
        top: 22px;
        opacity: 0;
    }

    /* estado abierto: se convierte en una X */
    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger.dl-active {
        background-image: linear-gradient(to left top, #0b4f52, #0b4f52);
        border-color: rgba(255, 255, 255, .45);
    }

    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger.dl-active::after {
        top: 22px;
        box-shadow: 0 7px 0 rgba(255, 255, 255, 0), 0 14px 0 rgba(255, 255, 255, 0);
        transform: rotate(45deg);
    }

    #gdlr-responsive-navigation.dl-menuwrapper button.dl-trigger.dl-active::before {
        opacity: 1;
        transform: rotate(-45deg);
    }

    /* --- panel desplegable --- */
    #gdlr-responsive-navigation.dl-menuwrapper>.dl-menu,
    #gdlr-responsive-navigation.dl-menuwrapper>.dl-submenu {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        width: 82vw;
        max-width: 340px;
        min-width: 260px;
        margin: 14px 0 0;
        padding: 3px 0 0;
        text-align: left;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .12);
        background-color: transparent;
        background-image: linear-gradient(165deg, rgba(9, 56, 64, .98) 0%, rgba(4, 32, 40, .98) 100%);
        box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
        overflow: hidden;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    /* franja degradada superior del panel */
    #gdlr-responsive-navigation.dl-menuwrapper>.dl-menu::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(to right, var(--nav-green), var(--nav-teal), var(--nav-blue));
    }

    #gdlr-responsive-navigation.dl-menuwrapper li {
        background-color: transparent !important;
    }

    #gdlr-responsive-navigation.dl-menuwrapper li>a {
        padding: 15px 44px 15px 22px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .03em;
        line-height: 20px;
        color: rgba(255, 255, 255, .88);
        border-top: 1px solid rgba(255, 255, 255, .07);
        transition: background-color .18s ease, color .18s ease;
    }

    #gdlr-responsive-navigation.dl-menuwrapper li:first-child>a {
        border-top: 0;
    }

    #gdlr-responsive-navigation.dl-menuwrapper li>a:hover,
    #gdlr-responsive-navigation.dl-menuwrapper li>a:active {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    /* chevron de los items con submenu */
    #gdlr-responsive-navigation.dl-menuwrapper li>a:not(:only-child)::after {
        right: 20px;
        line-height: 50px;
        font-size: 15px;
        color: var(--nav-teal);
    }

    /* pagina actual */
    #gdlr-responsive-navigation.dl-menuwrapper li.nav-current>a,
    #gdlr-responsive-navigation.dl-menuwrapper li.current-menu-item>a {
        color: #fff;
        background: rgba(48, 181, 179, .14);
        box-shadow: inset 3px 0 0 var(--nav-teal);
    }

    /* Inscripción: mismo destello que en escritorio. Va en ::before porque el
       ::after de los enlaces ya lo ocupa el chevron de submenú. */
    #gdlr-responsive-navigation.dl-menuwrapper li.nav-cta>a {
        position: relative;
        z-index: 0;
        overflow: hidden;
    }

    #gdlr-responsive-navigation.dl-menuwrapper li.nav-cta>a::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: linear-gradient(100deg,
                rgba(255, 255, 255, 0) 35%,
                rgba(255, 255, 255, .30) 50%,
                rgba(255, 255, 255, 0) 65%);
        animation: navCtaBrillo 2.5s linear infinite;
    }

    /* fila "volver" */
    #gdlr-responsive-navigation.dl-menuwrapper li.dl-back>a {
        padding: 13px 22px 13px 42px;
        font-size: 0;
        background: rgba(0, 0, 0, .28);
        border-top: 0;
    }

    #gdlr-responsive-navigation.dl-menuwrapper li.dl-back>a::before {
        content: 'Volver';
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .7);
    }

    #gdlr-responsive-navigation.dl-menuwrapper li.dl-back::after {
        left: 22px;
        line-height: 46px;
        color: var(--nav-teal);
    }

    /* velo oscuro detras del panel abierto */
    #gdlr-responsive-navigation.dl-menuwrapper:has(.dl-menuopen)::before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: rgba(2, 18, 22, .55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        animation: navScrimIn .25s ease;
    }

    @keyframes navScrimIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* el velo del header estorba menos en movil */
    .gdlr-header-container::before {
        bottom: -20px;
        background: linear-gradient(180deg,
                rgba(2, 26, 32, .62) 0%,
                rgba(2, 26, 32, .35) 55%,
                rgba(2, 26, 32, 0) 100%);
    }

    .topLineBlue-bg-gradient-blue-green .containerright {
        padding-right: 18px;
    }
}

@media only screen and (max-width: 400px) {
    body .gdlr-logo {
        padding: 14px 14px 20px !important;
    }

    body .gdlr-logo>a>img {
        width: 150px;
    }

    #gdlr-responsive-navigation.dl-menuwrapper>.dl-menu,
    #gdlr-responsive-navigation.dl-menuwrapper>.dl-submenu {
        width: calc(100vw - 28px);
        min-width: 0;
    }
}