/* barra-progreso.css — la barrita de carga que aparece arriba al navegar.
 * Ver assets/js/barra-progreso.js para el porqué de todo esto.
 */

.barra-progreso-acomer {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--primary, #B14B27);

    /* Por encima de todo lo demás. Los modales del panel llegan a 9500 y la espera de la DIAN a
       9999; esto tiene que verse incluso sobre ellos, porque justamente indica que la página se
       está yendo. */
    z-index: 10000;

    opacity: 0;
    pointer-events: none;   /* nunca debe robarle un clic a nada */
    transition: width .16s ease-out, opacity .25s ease-out;

    /* Un halo del mismo color en la punta: da la sensación de movimiento sin necesidad de animar
       nada, que es lo que se apaga más abajo para quien pidió menos movimiento. */
    box-shadow: 0 0 8px rgba(177, 75, 39, .55);
}

.barra-progreso-acomer.visible { opacity: 1; }

/* Con "reducir movimiento" activado se quita la transición y el halo: la barra sigue estando y
   sigue informando, pero deja de deslizarse. A quien marca esa opción le molesta el movimiento,
   no el color. */
@media (prefers-reduced-motion: reduce) {
    .barra-progreso-acomer {
        transition: opacity .01s linear;
        box-shadow: none;
    }
}

/* En pantallas de alta densidad 3px se ven muy finos; 4 se leen mejor sin volverse una franja. */
@media (min-resolution: 2dppx) {
    .barra-progreso-acomer { height: 4px; }
}