/* Componente toc (shell). Solo tokens de style.css.
 * Móvil: <details> plegado al inicio del contenido. Escritorio (≥ 1025px):
 * lista fija (sticky) en el lateral. La lista va dos veces en el HTML y se ve
 * una, según el ancho: nada depende de JavaScript ni cambia al cargar.
 * La sección que se lee lleva aria-current (lo pone script.js). */

/* Maqueta opcional índice + contenido: dos hijos, el índice primero. La
 * columna no crece con lo que hay dentro (una URL larga del contenido). */
.pf-con-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-lg);
}

.pf-con-toc > * {
    min-width: 0;
}

/* Al saltar a una sección, el título no queda pegado al borde. */
:is(h2, h3)[id] {
    scroll-margin-top: var(--pf-space-lg);
}

/* Desplazamiento suave solo al saltar desde el índice (script.js pone la
 * clase mientras dura el salto): al tabular por la página, el foco llega sin
 * animación y nada se mueve por debajo de la cabecera fija. style.css lo anula
 * con movimiento reducido. */
:root.pf-toc-suave {
    scroll-behavior: smooth;
}

.pf-toc {
    min-width: 0;
    font-size: var(--pf-text-sm);
}

.pf-toc__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Filete vertical; la sección actual lo marca en verde azulado. */
.pf-toc__plegable > .pf-toc__lista,
.pf-toc__fijo > .pf-toc__lista {
    border-left: var(--pf-rule);
}

.pf-toc__enlace {
    display: block;
    margin-left: -1px;
    padding: var(--pf-space-3xs) 0 var(--pf-space-3xs) var(--pf-space-sm);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    overflow-wrap: break-word;
}

.pf-toc__lista--hijos .pf-toc__enlace {
    padding-left: var(--pf-space-lg);
}

.pf-toc__enlace:hover {
    color: var(--pf-color-link-hover);
    text-decoration: underline;
}

.pf-toc__enlace[aria-current] {
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-brand-strong);
    border-left-color: var(--pf-color-brand);
}

/* -------------------------------------------------------------------------
 * Móvil: plegable
 * ---------------------------------------------------------------------- */

.pf-toc__plegable {
    background-color: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
}

.pf-toc__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pf-space-sm);
    min-height: 2.75rem;
    padding: var(--pf-space-2xs) var(--pf-space-sm);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
    list-style: none;
    cursor: pointer;
}

.pf-toc__resumen::-webkit-details-marker {
    display: none;
}

/* Flecha: abajo plegado, arriba desplegado. */
.pf-toc__resumen::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--pf-transition);
}

.pf-toc__plegable[open] > .pf-toc__resumen::after {
    margin-top: 0.25rem;
    transform: rotate(-135deg);
}

.pf-toc__plegable > .pf-toc__lista {
    margin: 0 var(--pf-space-sm) var(--pf-space-sm);
}

.pf-toc__plegable .pf-toc__enlace {
    padding-block: var(--pf-space-2xs);
}

.pf-toc__fijo {
    display: none;
}

/* -------------------------------------------------------------------------
 * Escritorio: fijo en el lateral
 * ---------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .pf-con-toc {
        grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
        gap: var(--pf-space-xl);
    }

    .pf-con-toc > .pf-toc {
        grid-row: 1;
        grid-column: 2;
    }

    .pf-con-toc > :not(.pf-toc) {
        grid-row: 1;
        grid-column: 1;
    }

    .pf-toc__plegable {
        display: none;
    }

    /* Por debajo de la cabecera fija (--pf-header-fija, common/header, #54) y,
     * con sesión iniciada, de la barra de administración. Abajo deja el sitio
     * del botón de volver arriba donde cae sobre la columna
     * (--pf-volver-arriba-zona, common/volver-arriba, #71): la lista entera se
     * puede desplazar y leer. */
    .pf-toc__fijo {
        --pf-toc-arriba: calc(var(--pf-header-fija, 0px) + var(--pf-space-lg));

        position: sticky;
        top: var(--pf-toc-arriba);
        display: block;
        max-height: calc(100vh - var(--pf-toc-arriba) - max(var(--pf-space-lg), var(--pf-volver-arriba-zona, 0px)));
        overflow-y: auto;
    }

    .admin-bar .pf-toc__fijo {
        --pf-toc-arriba: calc(var(--wp-admin--admin-bar--height, 0px) + var(--pf-header-fija, 0px) + var(--pf-space-lg));
    }

    .pf-toc__titulo {
        margin-bottom: var(--pf-space-xs);
    }
}