/* Componente webinar-agenda (webinar, #61). Solo tokens de style.css.
 * La banda, el antetítulo y el título son de `seccion`. Aquí la línea de
 * tiempo: cada bloque con su nodo (círculo blanco con sombra y punto verde,
 * como los del ERP) y un tramo de línea hasta el siguiente.
 * Estrecho: vertical, nodos a la izquierda. Desde 1025px: horizontal, un
 * bloque por columna.
 * Movimiento: los bloques entran con data-pf-escalonar (motor de core) y
 * script.js dibuja los tramos con la variable --pf-tramo (0 → 1). Sin JS o con
 * movimiento reducido, --pf-tramo no existe y la línea está entera. */

.pf-webinar-agenda__bloques {
    --pf-agenda-nodo: 1.5rem;
    --pf-agenda-hueco: var(--pf-space-lg);

    display: grid;
    gap: var(--pf-agenda-hueco);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-webinar-agenda__bloque {
    position: relative;
    min-width: 0;
    padding-left: calc(var(--pf-agenda-nodo) + var(--pf-space-sm));
}

.pf-webinar-agenda__nodo {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pf-agenda-nodo);
    height: var(--pf-agenda-nodo);
    background-color: var(--pf-color-surface);
    border: 2px solid var(--pf-color-brand);
    border-radius: var(--pf-radius-round);
    box-shadow: var(--pf-shadow-md);
}

.pf-webinar-agenda__nodo::after {
    content: "";
    position: absolute;
    inset: 4px;
    background-color: var(--pf-color-brand);
    border-radius: var(--pf-radius-round);
}

/* Tramo hasta el nodo siguiente (decorativo). */
.pf-webinar-agenda__tramo {
    position: absolute;
    top: calc(var(--pf-agenda-nodo) + var(--pf-space-3xs));
    bottom: calc(var(--pf-space-3xs) - var(--pf-agenda-hueco));
    left: calc(var(--pf-agenda-nodo) / 2 - 1px);
    width: 2px;
    background-color: var(--pf-color-accent-edge);
    border-radius: 1px;
    transform: scaleY(var(--pf-tramo, 1));
    transform-origin: top;
}

.pf-webinar-agenda__hora {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pf-space-3xs) var(--pf-space-xs);
    min-height: var(--pf-agenda-nodo);
    margin: 0 0 var(--pf-space-2xs);
}

.pf-webinar-agenda__reloj {
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-brand-strong);
}

.pf-webinar-agenda__duracion {
    padding: 0.125rem var(--pf-space-2xs);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-muted);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-pill);
}

.pf-webinar-agenda__titulo {
    margin: 0;
    font-size: var(--pf-text-lg);
    line-height: var(--pf-leading-snug);
}

.pf-webinar-agenda__texto {
    max-width: var(--pf-measure-narrow);
    margin: var(--pf-space-2xs) 0 0;
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text-soft);
}

@media (min-width: 1025px) {
    .pf-webinar-agenda__bloques {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .pf-webinar-agenda__bloque {
        padding-top: calc(var(--pf-agenda-nodo) + var(--pf-space-sm));
        padding-left: 0;
    }

    .pf-webinar-agenda__tramo {
        top: calc(var(--pf-agenda-nodo) / 2 - 1px);
        right: calc(var(--pf-space-3xs) - var(--pf-agenda-hueco));
        bottom: auto;
        left: calc(var(--pf-agenda-nodo) + var(--pf-space-3xs));
        width: auto;
        height: 2px;
        transform: scaleX(var(--pf-tramo, 1));
        transform-origin: left;
    }
}

/* Antes de que llegue el motor, los tramos esperan sin dibujar (solo si va a
 * haber movimiento: con movimiento reducido no hay estado inicial). */
@media (prefers-reduced-motion: no-preference) {
    html.pf-movimiento .pf-webinar-agenda__tramo {
        --pf-tramo: 0;
    }
}

@media print {
    .pf-webinar-agenda__tramo {
        --pf-tramo: 1 !important;
    }
}