/* Componente home-hub (paginas, #56): el hub radial del ERP. Solo tokens.
 *
 * Geometría: la escena es un contenedor (`cqi`); la pista (anillos e isotipo)
 * es un cuadrado de lado --pf-hub-lado centrado arriba, y cada nodo (`h3` con
 * su botón) se coloca en su ángulo sobre una circunferencia de radio
 * --pf-hub-radio, con el centro de su círculo encima de ella. El script mueve
 * solo variables: --pf-hub-giro (órbita, en la lista), --pf-hub-k (radio, de
 * 0 a 1) y --pf-hub-espiral (grados de más) en la entrada. Todo es transform.
 *
 * Tres estados:
 *   - sin JS (sin .pf-hub--vivo): anillo quieto y, debajo, todos los paneles
 *     como lista de fichas;
 *   - estrecho con JS: anillo compacto y el panel del módulo elegido debajo;
 *   - ancho con JS (contenedor ≥ 56rem): el panel flota junto a su nodo, con
 *     los chips en abanico (los coloca el script) y el beneficio al pie.
 * Los círculos son geometría (50 %), no radio de tarjeta. */

.pf-hub {
    display: flex;
    flex-direction: column;
}

.pf-hub__escena {
    --pf-hub-lado: min(100cqi, 22rem);
    --pf-hub-nodo: 3rem;
    --pf-hub-radio: calc(var(--pf-hub-lado) / 2 - var(--pf-hub-nodo) / 2 - 0.75rem);

    container: pf-hub / inline-size;
    position: relative;
    isolation: isolate;
}

/* Pista: anillos e isotipo, en flujo (reserva el alto del anillo). */
.pf-hub__pista {
    position: relative;
    width: var(--pf-hub-lado);
    height: var(--pf-hub-lado);
    margin-inline: auto;
}

.pf-hub__anillos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pf-hub__anillo {
    fill: none;
    stroke: var(--pf-color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
}

.pf-hub__anillo:first-child {
    fill: var(--pf-color-brand-soft);
    fill-opacity: 0.45;
}

.pf-hub__anillo--fino {
    stroke-dasharray: 2 6;
}

.pf-hub__centro {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: calc(var(--pf-hub-lado) * 0.3);
    aspect-ratio: 1;
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-round);
    box-shadow: var(--pf-shadow-md);
    transform: translate(-50%, -50%);
}

.pf-hub__centro .pf-marca {
    --pf-marca-alto: calc(var(--pf-hub-lado) * 0.17);
}

/* Conectores: los dibuja el script entre el nodo abierto y sus chips. */
.pf-hub__conectores {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.pf-hub__conector {
    fill: none;
    stroke: var(--pf-color-brand);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Lista de módulos. */
.pf-hub__modulos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-hub__modulo {
    margin: 0;
}

/* Nodo en su sitio del anillo: el centro del círculo sobre la circunferencia. */
.pf-hub__cabeza {
    --pf-hub-a: calc((var(--pf-hub-angulo, 0) + var(--pf-hub-giro, 0) + var(--pf-hub-espiral, 0)) * 1deg);
    --pf-hub-r: calc(var(--pf-hub-radio) * var(--pf-hub-k, 1));

    position: absolute;
    top: calc(var(--pf-hub-lado) / 2);
    left: 50%;
    z-index: 2;
    margin: 0;
    font-size: inherit;
    line-height: 1;
    /* Navegadores sin cos()/sin(): giro y contragiro (el nodo queda derecho). */
    transform: translate(-50%, calc(var(--pf-hub-nodo) / -2)) rotate(var(--pf-hub-a)) translateX(var(--pf-hub-r)) rotate(calc(-1 * var(--pf-hub-a)));
}

@supports (transform: translateX(calc(1px * cos(0deg)))) {
    .pf-hub__cabeza {
        transform: translate(
            calc(-50% + cos(var(--pf-hub-a)) * var(--pf-hub-r)),
            calc(var(--pf-hub-nodo) / -2 + sin(var(--pf-hub-a)) * var(--pf-hub-r))
        );
    }
}

.pf-hub .pf-hub__nodo {
    --pf-nodo-lado: var(--pf-hub-nodo);
}

.pf-hub .pf-hub__nodo .pf-nodo__icono {
    width: 1.25rem;
    height: 1.25rem;
}

.pf-hub .pf-hub__nodo .pf-nodo__etiqueta {
    max-width: 7.5rem;
    font-size: var(--pf-text-xs);
}

/* Abierto: crece con el halo verde (el anillo de 2px lo pone `nodo` con aria-expanded). */
.pf-hub .pf-hub__nodo[aria-expanded="true"] .pf-nodo__circulo {
    box-shadow: 0 0 0 0.375rem var(--pf-color-brand-soft), var(--pf-shadow-lg);
}

.pf-hub__modulo--activo .pf-hub__cabeza {
    z-index: 4;
}

/* Panel: nombre (para la vista; el lector ya tiene el botón), beneficio y chips. */
.pf-hub__panel {
    padding: var(--pf-space-sm) var(--pf-space-md);
    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);
}

.pf-hub__beneficio {
    margin: 0;
    color: var(--pf-color-text-soft);
}

.pf-hub__beneficio-nombre {
    display: block;
    margin-bottom: var(--pf-space-3xs);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
}

.pf-hub__submodulos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-2xs);
    margin: var(--pf-space-sm) 0 0;
    padding: 0;
    list-style: none;
}

.pf-hub__submodulo {
    margin: 0;
}

.pf-hub__ayuda {
    margin: var(--pf-space-sm) auto 0;
    max-width: var(--pf-measure-narrow);
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
    text-align: center;
}

.pf-hub__pausa {
    align-self: flex-end;
    min-height: 2.75rem;
    margin-top: var(--pf-space-sm);
}

/* ---------------------------------------------------------------------
 * Sin JS: todos los paneles, en fichas, debajo del anillo.
 * ------------------------------------------------------------------ */

.pf-hub:not(.pf-hub--vivo) .pf-hub__modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--pf-space-sm);
    margin-top: var(--pf-space-lg);
}

.pf-hub:not(.pf-hub--vivo) .pf-hub__nodo {
    cursor: default;
}

/* ---------------------------------------------------------------------
 * Con JS, estrecho: el panel del módulo elegido debajo del anillo.
 * ------------------------------------------------------------------ */

.pf-hub--vivo .pf-hub__modulos {
    --pf-hub-modo: estrecho;
}

.pf-hub--vivo .pf-hub__panel {
    margin-top: var(--pf-space-md);
}

.pf-hub--vivo .pf-hub__panel[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
 * Ancho (contenedor ≥ 56rem)
 * ------------------------------------------------------------------ */

@container pf-hub (min-width: 56rem) {
    /* Las medidas se redefinen en los hijos de la escena (el contenedor no
     * puede consultarse a sí mismo); el radio, donde se usa. */
    .pf-hub__escena > * {
        --pf-hub-lado: min(100cqi, 36rem);
        --pf-hub-nodo: 4.5rem;
    }

    .pf-hub__cabeza {
        --pf-hub-radio: calc(var(--pf-hub-lado) / 2 - var(--pf-hub-nodo) / 2 - 1.5rem);
    }

    .pf-hub .pf-hub__nodo .pf-nodo__icono {
        width: 1.875rem;
        height: 1.875rem;
    }

    .pf-hub .pf-hub__nodo .pf-nodo__etiqueta {
        font-size: var(--pf-text-sm);
    }

    .pf-hub--vivo .pf-hub__modulos {
        --pf-hub-modo: ancho;

        /* Banda del beneficio, al pie de la escena. */
        padding-bottom: 6.5rem;
    }

    /* Panel sin caja (en la esquina de la escena, sin tapar nada): sus piezas
     * se colocan respecto a ella, que es la de la escena. */
    .pf-hub--vivo .pf-hub__panel {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Beneficio: en la banda del pie, centrado bajo el anillo. */
    .pf-hub--vivo .pf-hub__beneficio {
        position: absolute;
        top: calc(var(--pf-hub-lado) + var(--pf-space-sm));
        left: 50cqi;
        width: min(100cqi, 40rem);
        font-size: var(--pf-text-md);
        text-align: center;
        transform: translateX(-50%);
    }

    .pf-hub--vivo .pf-hub__beneficio-nombre {
        font-size: var(--pf-text-lg);
        color: var(--pf-color-brand-strong);
    }

    /* Chips en abanico: cada uno en su sitio (left/top del script). */
    .pf-hub--vivo .pf-hub__submodulos {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 0;
        height: 0;
        margin: 0;
    }

    .pf-hub--vivo .pf-hub__submodulo {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
    }

    .pf-hub--vivo .pf-hub__ayuda {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        width: min(100%, 40rem);
        margin: 0;
        transform: translateX(-50%);
    }
}

/* Movimiento: crece al abrirse (sin movimiento reducido, solo el halo). */
@media (prefers-reduced-motion: no-preference) {
    .pf-hub .pf-hub__nodo .pf-nodo__circulo {
        transition: box-shadow var(--pf-transition), border-color var(--pf-transition), color var(--pf-transition), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .pf-hub .pf-hub__nodo[aria-expanded="true"] .pf-nodo__circulo {
        transform: scale(1.14);
    }
}

/* Antes de la entrada (arranque del motor en el <head>): lo que va a entrar,
 * oculto. Sin JS no hay marca; sin el script del hub, el motor la quita. */
html.pf-movimiento .pf-hub__cabeza,
html.pf-movimiento .pf-hub__centro,
html.pf-movimiento .pf-hub__anillos {
    opacity: 0;
}

@media print {
    .pf-hub .pf-hub__panel[hidden] {
        display: block;
    }

    .pf-hub__pausa {
        display: none;
    }
}