/**
 * Gestor de encabezado - Joomla 5/6
 * Diseño fluido: alas laterales + centro máximo configurable (1320px por defecto).
 */
.gestorencabezado {
    --ge-container: 1320px;
    --ge-min-height: 99px;
    --ge-logo-max-height: 78px;
    --ge-left-bg: #fff;
    --ge-left-color: #4c4d4f;
    --ge-right-bg: #f15722;
    --ge-right-color: #212529;

    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ge-container)) minmax(0, 1fr);
    width: 100%;
    min-height: var(--ge-min-height);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.gestorencabezado *,
.gestorencabezado *::before,
.gestorencabezado *::after {
    box-sizing: border-box;
}

.gestorencabezado__center {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    min-height: var(--ge-min-height);
    background: #fff;
}

.gestorencabezado__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--ge-min-height);
    padding: 8px 18px;
}

/* Alineación y escala configurables individualmente desde el backend. */
.gestorencabezado__logo[data-align="left"] {
    justify-content: flex-start;
}

.gestorencabezado__logo[data-align="center"] {
    justify-content: center;
}

.gestorencabezado__logo[data-align="right"] {
    justify-content: flex-end;
}

.gestorencabezado__logo > .gestorencabezado__logo-link,
.gestorencabezado__logo > img {
    transform: scale(var(--ge-logo-scale, 1));
    transform-origin: center;
}

.gestorencabezado__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-decoration: none;
}

.gestorencabezado__logo-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

.gestorencabezado__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--ge-logo-max-height);
    object-fit: contain;
}

.gestorencabezado__side {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--ge-min-height);
    padding: 8px 14px;
    overflow-wrap: anywhere;
}

.gestorencabezado__side--left {
    justify-content: flex-end;
    background: var(--ge-left-bg);
    color: var(--ge-left-color);
}

.gestorencabezado__side--right {
    justify-content: flex-start;
    background: var(--ge-right-bg);
    color: var(--ge-right-color);
}

.gestorencabezado__side p:last-child {
    margin-bottom: 0;
}

.gestorencabezado__side a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: .09em;
    text-underline-offset: .16em;
}

.gestorencabezado__side a:hover {
    text-decoration-thickness: .14em;
}

.gestorencabezado__side a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

.gestorencabezado__reference {
    font-weight: 600;
}

.gestorencabezado__side-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--ge-min-height) - 16px);
    object-fit: contain;
}

/* Tablet: las bandas laterales pasan a filas de ancho completo para evitar recortes. */
@media (max-width: 1199.98px) {
    .gestorencabezado {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .gestorencabezado__center {
        grid-column: 1;
        width: min(100%, var(--ge-container));
        margin-inline: auto;
    }

    .gestorencabezado__side {
        grid-column: 1;
        justify-content: center;
        width: 100%;
        min-height: auto;
        padding-block: 10px;
        text-align: center;
    }

    .gestorencabezado--mobile-after .gestorencabezado__center { order: 1; }
    .gestorencabezado--mobile-after .gestorencabezado__side--left { order: 2; }
    .gestorencabezado--mobile-after .gestorencabezado__side--right { order: 3; }

    .gestorencabezado--mobile-before .gestorencabezado__side--left { order: 1; }
    .gestorencabezado--mobile-before .gestorencabezado__side--right { order: 2; }
    .gestorencabezado--mobile-before .gestorencabezado__center { order: 3; }

    .gestorencabezado--mobile-hide .gestorencabezado__side { display: none; }
}

/* Móvil: tres logotipos apilados para mantener legibilidad y proporciones. */
@media (max-width: 575.98px) {
    .gestorencabezado__center {
        grid-template-columns: minmax(0, 1fr);
    }

    /* En móvil, la alineación configurada para escritorio no desplaza los logos. */
    .gestorencabezado__logo,
    .gestorencabezado__logo[data-align="left"],
    .gestorencabezado__logo[data-align="center"],
    .gestorencabezado__logo[data-align="right"] {
        justify-content: center;
        min-height: 0;
        padding: 10px 18px;
        text-align: center;
    }

    .gestorencabezado__logo-link {
        margin-inline: auto;
    }

    .gestorencabezado__logo img {
        margin-inline: auto;
        max-height: min(var(--ge-logo-max-height), 74px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gestorencabezado *,
    .gestorencabezado *::before,
    .gestorencabezado *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/*
 * v1.0.6 - El contenido de Flotante y Lema siempre se adapta al área disponible.
 * El texto puede usar tipografía y color independientes configurados en el backend.
 */
.gestorencabezado__side-content {
    display: flex;
    align-items: center;
    justify-content: inherit;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: var(--ge-min-height);
    overflow: hidden;
}

.gestorencabezado__side-content > * {
    max-width: 100%;
}

.gestorencabezado__side[data-content-type="text"] .gestorencabezado__side-content {
    white-space: normal;
    overflow-wrap: anywhere;
}

.gestorencabezado__side--left[data-content-type="text"] .gestorencabezado__side-content {
    color: var(--ge-left-text-color);
    font-family: var(--ge-left-text-font);
}

.gestorencabezado__side--right[data-content-type="text"] .gestorencabezado__side-content {
    color: var(--ge-right-text-color);
    font-family: var(--ge-right-text-font);
}

.gestorencabezado__side[data-content-type="text"] .gestorencabezado__side-content > :first-child {
    margin-top: 0;
}

.gestorencabezado__side[data-content-type="text"] .gestorencabezado__side-content > :last-child {
    margin-bottom: 0;
}

.gestorencabezado__side[data-content-type="image"] .gestorencabezado__side-content,
.gestorencabezado__side[data-content-type="reference"] .gestorencabezado__side-content,
.gestorencabezado__side[data-content-type="module"] .gestorencabezado__side-content {
    overflow: hidden;
}

.gestorencabezado__side[data-content-type="image"] .gestorencabezado__side-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.gestorencabezado__side[data-content-type="reference"] .gestorencabezado__reference {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.gestorencabezado__side[data-content-type="module"] .gestorencabezado__side-content > * {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    overflow: hidden;
}

.gestorencabezado__side[data-content-type="module"] img,
.gestorencabezado__side[data-content-type="module"] video,
.gestorencabezado__side[data-content-type="module"] iframe {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1199.98px) {
    .gestorencabezado__side-content {
        justify-content: center;
        height: auto;
        max-height: none;
    }
}

/*
 * v1.0.7 - En pantallas móviles todos los logotipos se centran,
 * independientemente de la alineación configurada para escritorio.
 */


/*
 * v1.0.8 - El encabezado deja de imponer una altura fija a la posición de Helix
 * cuando el diseño pasa a varias filas. Así #sp-main-menu queda siempre después
 * del contenido real del módulo y no se producen solapamientos.
 */
@media (max-width: 1199.98px) {
    .gestorencabezado {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .gestorencabezado__center {
        height: auto;
        min-height: 0;
    }
}

/*
 * v1.0.9 - Móvil simplificado: únicamente se muestra el logotipo principal
 * del Observatorio de Género (logositio). Se ocultan logoPJ, logoAux,
 * Flotante y Lema para reducir la altura del encabezado y evitar interferencias
 * con las posiciones siguientes de la plantilla.
 */
@media (max-width: 575.98px) {
    .gestorencabezado__side,
    .gestorencabezado__logo[data-position="logoPJ"],
    .gestorencabezado__logo[data-position="logoAux"] {
        display: none !important;
    }

    .gestorencabezado__center {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin-inline: auto;
        padding-inline: 15px;
    }

    .gestorencabezado__logo[data-position="logositio"] {
        display: flex;
        width: 100%;
        min-height: 0;
        justify-content: center;
        padding: 10px 0;
        text-align: center;
    }

    .gestorencabezado__logo[data-position="logositio"] .gestorencabezado__logo-link,
    .gestorencabezado__logo[data-position="logositio"] img {
        margin-inline: auto;
    }
}


/*
 * v1.0.10 - Centrado reforzado del logotipo principal en teléfonos.
 * Se neutralizan posibles reglas de la plantilla/Bootstrap sobre .container,
 * ancho, márgenes y alineación del enlace del logotipo.
 */
@media (max-width: 575.98px) {
    .gestorencabezado > .container.gestorencabezado__center {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        place-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .gestorencabezado__center > .gestorencabezado__logo[data-position="logositio"] {
        display: grid !important;
        place-items: center !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        text-align: center !important;
    }

    .gestorencabezado__logo[data-position="logositio"] > .gestorencabezado__logo-link {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        transform-origin: center center !important;
    }

    .gestorencabezado__logo[data-position="logositio"] > img,
    .gestorencabezado__logo[data-position="logositio"] > .gestorencabezado__logo-link > img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        object-position: center center !important;
    }
}