/* =============================================================================
 * Paquete común ASX · indicador de carga
 *
 * Un velo sobre toda la página con `comun/img/cargando.gif` al centro. Lo
 * enciende y lo apaga `asx-cargando.js` con la clase `asx-cargando` en <html>.
 *
 * Es un pseudoelemento de <html> y no una etiqueta en el <body> a propósito:
 * existe desde el primer pintado sin que cada aplicación tenga que meter nada
 * en su marcado, y no hay un <div> que olvidar en alguna plantilla. Es lo que
 * sustituye a los `#load_screen` que CORK repartía por cada layout.
 *
 * Se sostiene solo, sin `tokens.css`: también lo cargan páginas sin barra
 * —las de entrada, por ejemplo— y ahí esas variables no existen. Por eso cada
 * `var()` lleva su valor de respaldo.
 * ========================================================================== */

html::after {
    content: "";
    position: fixed;
    inset: 0;
    /* Por encima de todo: barra, menú, modales de Bootstrap (1055) y avisos
       efímeros (1090). Mientras carga no se debe poder pulsar nada debajo;
       de paso evita el doble clic que manda dos veces el mismo enlace. */
    z-index: 2147483000;

    /* El respaldo primero: si el navegador no entiende `color-mix`, descarta
       solo la línea de abajo y conserva el velo y el GIF. */
    background: rgb(255 255 255 / .82) url("../img/cargando.gif") center / var(--asx-cargando-tam, 64px) no-repeat;
    background-color: color-mix(in srgb, var(--asxb-fondo, #fff) 82%, transparent);

    /* Apagado por defecto. Se desvanece al quitarse, para que la página nueva
       no aparezca de golpe. `visibility` espera a que termine la opacidad. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility 0s linear .15s;
}

html.asx-cargando::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: progress;
    transition: opacity .15s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    html::after,
    html.asx-cargando::after {
        transition: none;
    }
}