/* =========================================================================
   Índice del artículo (TOC) · templates/_partials/toc.twig + assets/js/toc.js

   CSS plano y autónomo: no pasa por Tailwind y solo se carga en artículos
   que tienen índice. Para otro sitio o tema basta con redefinir las
   variables de .toc-layout.

   .toc-layout envuelve el índice y el cuerpo del artículo:
     · < 1280px  → barra pegada arriba + lista desplegable.
     · ≥ 1280px  → rejilla de 3 columnas; el índice vive fijo en la primera
                   y el texto conserva su columna centrada de 48rem.
   ========================================================================= */

.toc-layout {
    --toc-ink: #0a0a0a;
    --toc-muted: #6b7280;
    --toc-line: #e5e7eb;
    --toc-surface: #ffffff;
    --toc-bar: 3.25rem;      /* alto de la barra móvil */
    --toc-column: 48rem;     /* ancho de la columna de texto */
    --toc-gutter: 1rem;      /* margen lateral del texto en móvil */
}

/* El salto a una sección deja el título libre de la barra pegada. */
.toc-layout h2[id] {
    scroll-margin-top: calc(var(--toc-bar) + 1rem);
}

/* ---------- Barra móvil ---------- */

.toc {
    position: sticky;
    top: 0;
    z-index: 40;
    margin-bottom: 1.5rem;
    border-block: 1px solid var(--toc-line);
    background: color-mix(in srgb, var(--toc-surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    color: var(--toc-ink);
    font-size: 0.875rem;
    line-height: 1.4;
}

.toc__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: var(--toc-column);
    min-height: var(--toc-bar);
    margin-inline: auto;
    padding: 0 var(--toc-gutter);
    font-weight: 600;
    text-align: left;
}

.toc__label,
.toc__current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Con una sección activa la barra muestra su título en vez del rótulo. */
.toc__current,
.toc[data-active] .toc__label {
    display: none;
}

.toc[data-active] .toc__current {
    display: block;
}

.toc__chevron {
    flex: none;
    transition: transform 0.2s ease;
}

.toc[data-open] .toc__chevron {
    transform: rotate(180deg);
}

.toc__list {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    max-height: min(70vh, 32rem);
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border-block: 1px solid var(--toc-line);
    background: var(--toc-surface);
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.25);
}

.toc[data-open] .toc__list {
    display: block;
}

.toc__list > li {
    max-width: var(--toc-column);
    margin: 0 auto;
}

/* `.toc .toc__link`: le gana a las reglas de enlace del sitio anfitrión
   (`.blogContent a`, `.ofb-scope a`…). */
.toc .toc__link {
    display: block;
    padding: 0.625rem var(--toc-gutter);
    border-left: 2px solid transparent;
    color: var(--toc-muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.toc .toc__link:hover,
.toc .toc__link[aria-current] {
    color: var(--toc-ink);
}

.toc .toc__link[aria-current] {
    border-left-color: var(--toc-ink);
}

.toc__toggle:focus-visible,
.toc__link:focus-visible {
    outline: 2px solid var(--toc-ink);
    outline-offset: -2px;
}

/* ---------- Columna fija (escritorio) ---------- */

@media (min-width: 1280px) {
    .toc-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--toc-column)) minmax(0, 1fr);
    }

    .toc-layout > * {
        grid-column: 2;
    }

    .toc-layout > .toc {
        grid-column: 1;
    }

    .toc-layout h2[id] {
        scroll-margin-top: 2rem;
    }

    .toc {
        top: 2rem;
        align-self: start;
        max-width: 15rem;
        max-height: calc(100vh - 4rem);
        margin: 0;
        overflow-y: auto;
        scrollbar-width: none;
        border: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .toc::-webkit-scrollbar {
        display: none;
    }

    /* El botón pasa a ser solo el rótulo de la columna. */
    .toc__toggle {
        min-height: 0;
        padding: 0 0 0.875rem;
        color: var(--toc-muted);
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        pointer-events: none;
    }

    .toc[data-active] .toc__label {
        display: block;
    }

    .toc[data-active] .toc__current,
    .toc__chevron {
        display: none;
    }

    .toc__list,
    .toc[data-open] .toc__list {
        position: static;
        display: block;
        max-height: none;
        padding: 0;
        overflow: visible;
        border: 0;
        border-left: 1px solid var(--toc-line);
        background: none;
        box-shadow: none;
    }

    .toc .toc__link {
        margin-left: -1px;
        padding: 0.4375rem 0 0.4375rem 1rem;
        border-left-width: 1px;
    }

    /* Títulos largos: dos líneas como máximo (el completo va en `title`). */
    .toc__text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toc__chevron,
    .toc__link {
        transition: none;
    }
}