/**
 * Componente común: diagrama
 *
 * Las cajas son un `<ol>` de verdad y el texto vive en HTML; lo único que
 * dibuja esta hoja es el marco, el destacado, los numerales y las flechas.
 * Ver la cabecera de `component.php` para el porqué.
 *
 * Móvil primero: apilado con la flecha hacia abajo, y en fila con la flecha
 * hacia la derecha a partir de un corte que DEPENDE DEL NÚMERO DE CAJAS
 * (issue #197):
 *
 *   - hasta tres cajas: desde 600 px. Con tres cajas de texto por debajo de eso
 *     cada una se queda en dos palabras por línea.
 *   - cuatro o más (modificador `pf-diagrama--pasos-4`, que pone el render):
 *     desde 48rem (768 px), que es `--pf-bp-md` y el corte que ya usan seis
 *     hojas del tema. Medido el 17 sep 2026 sobre `/como-trabajamos/`, el único
 *     diagrama de cuatro del sitio: la fila de cuatro necesita ≥ 705 px de
 *     viewport con el texto de hoy; a 600 el documento desbordaba 12 px y, con
 *     solo `minmax(0, 1fr)`, el texto atravesaba el relleno 25 px. 48rem deja
 *     margen para el texto y la fuente.
 *
 * `grid-auto-columns: minmax(0, 1fr)` y no `1fr`: un track `1fr` no baja del
 * `min-content` de su contenido (`min-width: auto`), así que una palabra larga
 * ensancha su columna y el `<ol>` desborda el documento. `minmax(0, 1fr)` es la
 * red contra ese desplazamiento, que es el defecto peor; el corte por número de
 * cajas es lo que evita que el texto se estrelle contra el relleno.
 *
 * Cinco y seis cajas (`PF_PFUTURE_DIAGRAMA_MAX_PASOS` = 6) llevan el mismo
 * modificador y el mismo corte; hoy no tienen consumidor y no se han medido.
 *
 * @package pfuture
 * @subpackage common/diagrama
 * @module core
 */

.pf-diagrama {
    margin: 0;
}

.pf-diagrama__pasos {
    display: grid;
    gap: var(--pf-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pf-diagrama;
}

/* Hasta tres cajas: fila desde 600 px. */
@media (min-width: 600px) {
    .pf-diagrama:not(.pf-diagrama--pasos-4) .pf-diagrama__pasos {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

/* Cuatro o más: fila desde 48rem (= --pf-bp-md). */
@media (min-width: 48rem) {
    .pf-diagrama--pasos-4 .pf-diagrama__pasos {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

.pf-diagrama__paso {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-3xs);
    padding: var(--pf-space-md);
    background: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
    counter-increment: pf-diagrama;
}

/* Numeral de expediente. Va por `counter` y no por el marcador del `<ol>`
 * porque el marcador queda fuera de la caja y aquí tiene que estar dentro. */
.pf-diagrama__paso::before {
    content: counter(pf-diagrama, decimal-leading-zero);
    color: var(--pf-color-text-muted);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-weight-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--pf-tracking-caps);
}

/* La caja central, que es la que dice qué hacemos nosotros. Único sitio del
 * sistema donde el tinte `brand-soft` se usa como relleno, junto al cta-box:
 * la dirección lo admite ahí y el borde `brand` es lo que lo separa de la
 * página, no el relleno. */
.pf-diagrama__paso--destacado {
    background: var(--pf-color-brand-soft);
    border-color: var(--pf-color-brand);
}

.pf-diagrama__titulo {
    color: var(--pf-color-heading);
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
}

.pf-diagrama__texto {
    color: var(--pf-color-text-soft);
    font-size: var(--pf-text-sm);
    line-height: var(--pf-leading-normal);
}

/* La flecha. Es un cuadrado con dos lados girado 45°, colocado en el centro
 * del canalón: `--pf-space-md` / 2 más la mitad del propio cuadrado. Decorativa
 * —`content` vacío, así que ningún lector la anuncia—: quien no la ve tiene el
 * orden en el `<ol>`. */
.pf-diagrama__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    inline-size: .5rem;
    block-size: .5rem;
    border-block-start: 2px solid var(--pf-color-border-strong);
    border-inline-end: 2px solid var(--pf-color-border-strong);
    inset-block-end: calc(-1 * (var(--pf-space-md) / 2) - 4px);
    inset-inline-start: 50%;
    transform: translateX(-50%) rotate(135deg);
}

/* La flecha gira a la derecha en el MISMO corte en que la rejilla pasa a
 * fila: mientras esté apilado, sigue centrada bajo cada caja. */
@media (min-width: 600px) {
    .pf-diagrama:not(.pf-diagrama--pasos-4) .pf-diagrama__paso:not(:last-child)::after {
        inset-block-start: 50%;
        inset-block-end: auto;
        inset-inline-start: auto;
        inset-inline-end: calc(-1 * (var(--pf-space-md) / 2) - 4px);
        transform: translateY(-50%) rotate(45deg);
    }
}

@media (min-width: 48rem) {
    .pf-diagrama--pasos-4 .pf-diagrama__paso:not(:last-child)::after {
        inset-block-start: 50%;
        inset-block-end: auto;
        inset-inline-start: auto;
        inset-inline-end: calc(-1 * (var(--pf-space-md) / 2) - 4px);
        transform: translateY(-50%) rotate(45deg);
    }
}

.pf-diagrama__pie {
    margin-block-start: var(--pf-space-sm);
}