/* Componente header (shell; v2: #54). Solo tokens de style.css.
 * Variantes: home (sin filete: se funde con el hero), general (filete
 * inferior) y landing (marca y conmutador). Tono: claro | suave | tinta
 * (data-pf-theme="dark", como el hero tinta).
 * Fija (.pf-header--fija): pegada arriba; compacta al bajar
 * ([data-pf-compacta], lo pone script.js): logotipo al 80 % y sombra. Solo
 * cambian transform y sombra: la altura es la misma y nada se mueve de sitio.
 * La disposición depende del ancho de la propia cabecera (container query):
 * estrecha → botón «Menú» y panel a pantalla completa (popover nativo, entra
 * con un fundido); ancha (≥ 64rem) → menú, conmutador y CTA en línea.
 * Con movimiento reducido no hay desplazamientos ni escalas animadas. */

.pf-header {
    container: pf-header / inline-size;
    color: var(--pf-color-text);
    background-color: var(--pf-color-bg);
    border-bottom: 1px solid transparent;
}

.pf-header--suave {
    background-color: var(--pf-color-bg-alt);
}

.pf-header--general {
    border-bottom-color: var(--pf-color-border);
}

/* -------------------------------------------------------------------------
 * Fija y compacta
 * ---------------------------------------------------------------------- */

.pf-header--fija {
    position: sticky;
    top: 0;
    z-index: var(--pf-z-header);
    transition: box-shadow var(--pf-transition), border-color var(--pf-transition);
}

/* Con la barra de administración de WordPress (sesión iniciada), debajo de
 * ella; en móvil esa barra se va con la página. */
.admin-bar .pf-header--fija {
    top: var(--wp-admin--admin-bar--height, 0px);
}

@media screen and (max-width: 600px) {
    .admin-bar .pf-header--fija {
        top: 0;
    }
}

/* Alto de la cabecera fija, para quien tenga que quedar por debajo (índice
 * del artículo) y para que un ancla o el foco no queden tapados al saltar
 * (con 8px de aire: la cabecera lleva además su filete). */
:root:has(.pf-header--fija) {
    --pf-header-fija: 4rem;

    scroll-padding-top: calc(var(--pf-header-fija) + var(--pf-space-2xs));
}

@media (min-width: 64rem) {
    :root:has(.pf-header--fija) {
        --pf-header-fija: 4.5rem;
    }
}

/* Con la barra de administración fija encima (más de 600px), también su alto. */
@media screen and (min-width: 601px) {
    :root:has(.admin-bar .pf-header--fija) {
        scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--pf-header-fija) + var(--pf-space-2xs));
    }
}

.pf-header[data-pf-compacta] {
    box-shadow: var(--pf-shadow-md);
}

.pf-header--general[data-pf-compacta] {
    border-bottom-color: transparent;
}

.pf-header__marca {
    flex: none;
    transform-origin: left center;
}

.pf-header[data-pf-compacta] .pf-header__marca {
    transform: scale(0.8);
}

@media (prefers-reduced-motion: no-preference) {
    .pf-header__marca {
        transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
}

/* -------------------------------------------------------------------------
 * Barra
 * ---------------------------------------------------------------------- */

.pf-header__barra {
    --pf-header-alto: 4rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--pf-space-md);
    min-height: var(--pf-header-alto);
    max-width: calc(var(--pf-container) + 2 * var(--pf-gutter));
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

/* Hasta 360px (reflow a 320px, 1.4.10): logotipo de 32px. Así cabe la barra
 * de landing (marca y conmutador); en un contenedor aún más estrecho, el
 * conmutador baja de línea en lugar de salirse. */
@container pf-header (max-width: 22.5rem) {
    .pf-header__barra {
        column-gap: var(--pf-space-sm);
    }

    .pf-header__marca {
        --pf-marca-alto: 2rem;
    }
}

/* Botones «Menú» y «Cerrar»: píldora blanca con sombra suave, como los
 * controles del ERP. 44px de alto (objetivo táctil). */
.pf-header__boton {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--pf-space-2xs);
    min-height: 2.75rem;
    padding: 0 var(--pf-space-sm) 0 var(--pf-space-xs);
    font-family: var(--pf-font-sans);
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-weight-bold);
    line-height: 1;
    color: var(--pf-color-heading);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border-control);
    border-radius: var(--pf-radius-pill);
    box-shadow: var(--pf-shadow-sm);
    cursor: pointer;
    transition: background-color var(--pf-transition), border-color var(--pf-transition), box-shadow var(--pf-transition);
}

.pf-header__boton:hover {
    background-color: var(--pf-color-brand-soft);
    border-color: var(--pf-color-accent-edge);
    box-shadow: var(--pf-shadow-md);
}

.pf-header__boton:focus-visible {
    border-radius: var(--pf-radius-pill);
}

.pf-header__boton .pf-icono {
    flex: none;
}

/* -------------------------------------------------------------------------
 * Menú (disposición estrecha: filas como las tarjetas del ERP)
 * ---------------------------------------------------------------------- */

.pf-header__menu {
    display: grid;
    gap: var(--pf-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-header__enlace {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-sm);
    min-height: 3.5rem;
    padding: var(--pf-space-xs) var(--pf-space-sm);
    font-size: var(--pf-text-lg);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-heading);
    text-decoration: none;
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-sm);
    transition: background-color var(--pf-transition), border-color var(--pf-transition);
}

.pf-header__enlace:focus-visible {
    border-radius: var(--pf-radius-card);
}

.pf-header__enlace:hover {
    background-color: var(--pf-color-brand-soft);
    border-color: var(--pf-color-accent-edge);
}

/* Página o sección actual: borde verde y barra a la izquierda (no solo color). */
.pf-header__enlace[aria-current] {
    border-color: var(--pf-color-accent-edge);
    box-shadow: inset 4px 0 0 var(--pf-color-accent), var(--pf-shadow-sm);
}

.pf-header__chevron {
    flex: none;
    color: var(--pf-color-text-muted);
}

/* -------------------------------------------------------------------------
 * Estrecha: panel a pantalla completa (popover). Anula los estilos que el
 * navegador da a [popover]. Solo donde existe popover (2024+).
 * Entra y sale con un fundido; sin movimiento reducido, además baja 8px y las
 * filas del menú entran una tras otra (en total, menos de medio segundo).
 * ---------------------------------------------------------------------- */

@supports selector(:popover-open) {
    .pf-header__panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0 var(--pf-gutter) var(--pf-space-xl);
        overflow-y: auto;
        overscroll-behavior: contain;
        color: var(--pf-color-text);
        background-color: var(--pf-color-bg);
        border: 0;
        opacity: 0;
        transition-property: opacity, display, overlay;
        transition-duration: 200ms;
        transition-timing-function: ease;
        transition-behavior: allow-discrete;
    }

    .pf-header__panel:popover-open {
        display: flex;
        flex-direction: column;
        gap: var(--pf-space-lg);
        opacity: 1;
    }

    @starting-style {
        .pf-header__panel:popover-open {
            opacity: 0;
        }
    }

    .pf-header__panel::backdrop {
        background-color: transparent;
    }

    /* Con el panel abierto, la página de debajo no se desplaza. */
    :root:has(.pf-header__panel:popover-open) {
        overflow: hidden;
    }

    @media (prefers-reduced-motion: no-preference) {
        .pf-header__panel {
            translate: 0 -0.5rem;
            transition-property: opacity, translate, display, overlay;
            transition-duration: 200ms, 260ms, 260ms, 260ms;
            transition-timing-function: ease, cubic-bezier(0.2, 0.7, 0.2, 1), linear, linear;
        }

        .pf-header__panel:popover-open {
            translate: none;
        }

        @starting-style {
            .pf-header__panel:popover-open {
                translate: 0 -0.5rem;
            }
        }

        .pf-header__panel:popover-open .pf-header__menu li,
        .pf-header__panel:popover-open .pf-header__tema,
        .pf-header__panel:popover-open .pf-header__cta {
            animation: pf-header-entra 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
        }

        .pf-header__panel:popover-open .pf-header__menu li:nth-child(2) {
            animation-delay: 40ms;
        }

        .pf-header__panel:popover-open .pf-header__menu li:nth-child(3) {
            animation-delay: 80ms;
        }

        .pf-header__panel:popover-open .pf-header__menu li:nth-child(4) {
            animation-delay: 120ms;
        }

        .pf-header__panel:popover-open .pf-header__menu li:nth-child(n+5),
        .pf-header__panel:popover-open .pf-header__tema,
        .pf-header__panel:popover-open .pf-header__cta {
            animation-delay: 160ms;
        }
    }
}

@keyframes pf-header-entra {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
}

/* Marca y «Cerrar» en el mismo sitio que en la barra. */
.pf-header__panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-md);
    min-height: var(--pf-header-alto);
}

.pf-header__cta .pf-boton {
    width: 100%;
    min-height: 2.75rem;
    font-size: var(--pf-text-base);
}

/* Conmutador de tema (#49): en el menú móvil, con «Tema» y los textos; en la
 * disposición ancha y en la barra de landing, solo iconos (los textos quedan
 * para el lector de pantalla). */
.pf-header__tema {
    flex: none;
}

/* Navegadores sin popover: menú y CTA en línea, sin botones. */
@supports not selector(:popover-open) {
    .pf-header__barra {
        flex-wrap: wrap;
        padding-block: var(--pf-space-xs);
    }

    .pf-header__boton,
    .pf-header__panel-cabecera,
    .pf-header__chevron {
        display: none;
    }

    .pf-header__panel,
    .pf-header__menu {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: var(--pf-space-2xs) var(--pf-space-md);
    }

    .pf-header__enlace {
        min-height: 2.75rem;
        padding-block: 0;
        font-size: var(--pf-text-base);
        background: none;
        border: 0;
        box-shadow: none;
    }

    .pf-header__enlace[aria-current] {
        text-decoration: underline;
        text-decoration-color: var(--pf-color-accent);
        text-decoration-thickness: 3px;
        text-underline-offset: 0.3em;
        box-shadow: none;
    }

    .pf-header__cta .pf-boton {
        width: auto;
    }
}

/* -------------------------------------------------------------------------
 * Ancha: menú, conmutador y CTA en línea, sin botones.
 * ---------------------------------------------------------------------- */

@container pf-header (min-width: 64rem) {
    .pf-header__barra {
        --pf-header-alto: 4.5rem;
    }

    .pf-header__boton,
    .pf-header__panel-cabecera,
    .pf-header__chevron {
        display: none;
    }

    .pf-header__panel,
    .pf-header__panel:popover-open {
        position: static;
        inset: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--pf-space-md);
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        color: inherit;
        background: none;
        border: 0;
        opacity: 1;
        translate: none;
        transition: none;
    }

    .pf-header__panel .pf-header__menu li,
    .pf-header__panel .pf-header__tema,
    .pf-header__panel .pf-header__cta,
    .pf-header__panel:popover-open .pf-header__menu li,
    .pf-header__panel:popover-open .pf-header__tema,
    .pf-header__panel:popover-open .pf-header__cta {
        animation: none;
    }

    .pf-header__menu {
        display: flex;
        flex-flow: row wrap;
        gap: 0 var(--pf-space-3xs);
    }

    /* Enlaces en píldora: fondo verde suave al pasar; la página actual, con
     * una barra verde debajo del texto. */
    .pf-header__enlace {
        min-height: 2.75rem;
        padding: 0 var(--pf-space-sm);
        font-size: var(--pf-text-base);
        background: none;
        border: 0;
        border-radius: var(--pf-radius-pill);
        box-shadow: none;
    }

    .pf-header__enlace:focus-visible {
        border-radius: var(--pf-radius-pill);
    }

    .pf-header__enlace:hover {
        background-color: var(--pf-color-brand-soft);
    }

    .pf-header__enlace[aria-current] {
        box-shadow: none;
    }

    .pf-header__enlace[aria-current]::after {
        content: "";
        position: absolute;
        right: var(--pf-space-sm);
        bottom: 0.3125rem;
        left: var(--pf-space-sm);
        height: 3px;
        background-color: var(--pf-color-accent);
        border-radius: var(--pf-radius-pill);
    }

    .pf-header__cta .pf-boton {
        width: auto;
        font-size: var(--pf-text-sm);
    }

    .pf-header__tema .pf-tema__leyenda,
    .pf-header__tema .pf-tema__texto {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .pf-header__tema .pf-tema__opcion {
        padding: 0;
    }
}