:root {
    --backdrop-bg: rgba(0, 0, 0, .35);
    --spinner-size: 48px;
    --spinner-thickness: 4px;
    --z-backdrop: 9999;
}

/* Capa */
#backdrop[aria-hidden="false"] {
    display: flex;
}

#backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--backdrop-bg);
    backdrop-filter: blur(2px);
    z-index: var(--z-backdrop);
    pointer-events: all;
}

/* Spinner GPU-friendly con conic-gradient */
.spinner {
    width: var(--spinner-size);
    height: var(--spinner-size);
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, #fff 0 270deg, transparent 270deg 360deg);
    -webkit-mask:
        radial-gradient(circle calc(50% - var(--spinner-thickness)), #0000 98%, #000 100%);
    mask:
        radial-gradient(circle calc(50% - var(--spinner-thickness)), #0000 98%, #000 100%);
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Respeta usuarios con motion reducido */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --backdrop-bg: rgba(0, 0, 0, .5);
    }
}