/* ============================================================
   Spinner de navegación · <spinner spinner="sk-wave"> del banco
   ============================================================
   El banco lo muestra en cada petición: al cargar la página, al
   refrescar y en cada cambio de módulo. Aquí se replica igual.

   #spinner{top:0;left:0;height:100%;width:100%;position:fixed;
            z-index:9999;opacity:.7;background-color:#f1f1f1;
            display:flex;align-items:center;justify-content:center}
   ============================================================ */

/* .colored-parent,.colored>div{background-color:#333} → las barras son GRIS OSCURO */
#spinner {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: .7;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Oculto lo controla el JS */
#spinner.is-hidden { display: none; }

/* .sk-wave{position:relative;top:50%;margin:auto;width:50px;height:40px;
            text-align:center;font-size:10px} */
.sk-wave {
    position: relative;
    margin: auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

/* .sk-wave .sk-rect{float:left;margin-right:1px;height:100%;width:6px;
                     display:inline-block;animation:1.2s ease-in-out infinite
                     sk-waveStretchDelay} */
.sk-rect {
    float: left;
    margin-right: 1px;
    height: 100%;
    width: 6px;
    display: inline-block;
    background-color: #333;
    animation: 1.2s ease-in-out infinite sk-waveStretchDelay;
}

.sk-rect1 { animation-delay: -1.2s; }
.sk-rect2 { animation-delay: -1.1s; }
.sk-rect3 { animation-delay: -1.0s; }
.sk-rect4 { animation-delay: -0.9s; }
.sk-rect5 { animation-delay: -0.8s; }

@keyframes sk-waveStretchDelay {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20%           { transform: scaleY(1.0); }
}