/* Componente volver-arriba (shell, #71). Solo tokens de style.css.
 * Botón redondo de 48px, blanco con sombra suave como los nodos del ERP: la
 * flecha y un anillo verde que se llena con el progreso de lectura
 * (--pf-volver-arriba-progreso, de 0 a 1, lo pone script.js).
 *
 * El flotante sale del servidor con `hidden` (sin JS, no se ve). script.js le
 * quita `hidden` en las páginas largas y pone:
 *  - data-pf-visible al bajar más de una pantalla (fundido; oculto, ni se ve
 *    ni se puede enfocar: visibility);
 *  - data-pf-apartado mientras pasa por encima de un botón de pausa o del
 *    control con el foco (transparente y sin puntero, pero enfocable: si el
 *    foco llega a él, vuelve a verse);
 *  - --pf-volver-arriba-elevar (en <html>), el alto de la pestaña de
 *    preferencias de Complianz, para quedar por encima de ella. */

.pf-volver-arriba {
    --pf-volver-arriba-progreso: 0;

    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: var(--pf-color-heading);
    background-color: var(--pf-color-surface-raised);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--pf-shadow-lg);
}

.pf-volver-arriba[hidden] {
    display: none;
}

/* Anillo: pista gris y progreso verde, sobre el borde del círculo. Decorativo. */
.pf-volver-arriba__anillo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 3;
    pointer-events: none;
}

.pf-volver-arriba__pista {
    stroke: var(--pf-color-border);
}

.pf-volver-arriba__progreso {
    stroke: var(--pf-color-brand);
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - 100 * var(--pf-volver-arriba-progreso));
}

.pf-volver-arriba__flecha {
    position: relative;
}

/* -------------------------------------------------------------------------
 * Flotante: abajo a la derecha
 * ---------------------------------------------------------------------- */

.pf-volver-arriba--flotante {
    position: fixed;
    right: calc(var(--pf-gutter) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--pf-space-md) + env(safe-area-inset-bottom, 0px) + var(--pf-volver-arriba-elevar, 0px));
    z-index: var(--pf-z-header);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* Al ocultarse, visibility espera al fundido (180ms, el de --pf-transition). */
    transition: opacity var(--pf-transition), background-color var(--pf-transition), visibility 0s linear 180ms;
}

.pf-volver-arriba--flotante[data-pf-visible] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--pf-transition), background-color var(--pf-transition), visibility 0s;
}

.pf-volver-arriba--flotante[data-pf-visible][data-pf-apartado]:not(:focus) {
    opacity: 0;
    pointer-events: none;
}

.pf-volver-arriba--flotante:hover {
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
}

.pf-volver-arriba--flotante:focus-visible {
    border-radius: 50%;
    outline-offset: 3px;
}

/* Con el menú móvil abierto (popover de la cabecera), no asoma. */
:root:has([data-pf-header-panel]:popover-open) .pf-volver-arriba--flotante {
    visibility: hidden;
    opacity: 0;
}

/* Zona que ocupa abajo a la derecha, para quien no debe quedar debajo: el
 * final del pie y el índice fijo del artículo. Solo donde el botón cae sobre la
 * columna de contenido (por debajo de 1280px; más ancho, va en el margen). */
@media (max-width: 80rem) {
    :root:has(.pf-volver-arriba--flotante:not([hidden])) {
        --pf-volver-arriba-zona: calc(3rem + var(--pf-space-md) + var(--pf-space-xs) + var(--pf-volver-arriba-elevar, 0px));
    }
}

@media print {
    .pf-volver-arriba--flotante {
        display: none;
    }
}