/* Pantalla de carga — sutil y minimalista */
.mia-loader {
    position: fixed;
    top: 0;
    left: 0;
    /* dvw/dvh (no solo vw/vh): en emulación móvil de Chrome (DevTools > Toggle
       device toolbar, o un celular real) position:fixed + inset:0 puede anclarse
       contra un "layout viewport" más alto que el visible, dejando el loader
       descentrado hacia abajo/derecha. dvw/dvh sí siguen el viewport visible real. */
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mia-loader-truck {
    position: relative;
    width: 140px;
    animation: mia-loader-pulse 1.8s ease-in-out infinite;
}

.mia-loader-truck img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

@keyframes mia-loader-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.97); opacity: 0.88; }
}

/* Llantas: mismo recorte de la imagen, giradas sobre su propio eje */
.mia-wheel {
    position: absolute;
    border-radius: 50%;
    background-image: url('../img/pantallaCarga.png');
    animation: mia-wheel-spin 0.9s linear infinite;
}
@keyframes mia-wheel-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mia-wheel-1, .mia-wheel-2 {
    width: 21.6px;  height: 21.6px;
    top: 38.91px;
    background-size: 140px 61.81px;
}
.mia-wheel-1 { left: 16.2px;  background-position: -16.2px -38.91px; }
.mia-wheel-2 { left: 40.96px; background-position: -40.96px -38.91px; }
.mia-wheel-3 {
    width: 23.08px; height: 23.08px;
    left: 109.86px; top: 39.1px;
    background-size: 140px 61.81px;
    background-position: -109.86px -39.1px;
}

@media (min-width: 768px) {
    .mia-loader-truck { width: 180px; }

    .mia-wheel-1, .mia-wheel-2 {
        width: 27.76px; height: 27.76px;
        top: 50.03px;
        background-size: 180px 79.47px;
    }
    .mia-wheel-1 { left: 20.83px; background-position: -20.83px -50.03px; }
    .mia-wheel-2 { left: 52.66px; background-position: -52.66px -50.03px; }
    .mia-wheel-3 {
        width: 29.68px; height: 29.68px;
        left: 141.22px; top: 50.27px;
        background-size: 180px 79.47px;
        background-position: -141.22px -50.27px;
    }
}

.mia-loader.mia-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}