/* ===========================
   LOADING OVERLAY
   =========================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px); /* efecto de desenfoque */
    background: rgba(0, 0, 0, 0.3); /* fondo oscuro semitransparente */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.3s ease;
}

#loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===========================
   LOADER SVG (onda expansiva)
   =========================== */
.loader {
    width: 150px;
    height: 150px;
}

.loader svg {
    width: 100%;
    height: 100%;
}

.loader circle {
    stroke: var(--color-principal, #28a745);
}

/* ===========================
   TEMAS OPCIONALES
   =========================== */
.theme-success {
    --color-principal: var(--color-principal, #28a745);
}

.theme-danger {
    --color-principal: #dc3545;
}

.theme-primary {
    --color-principal: #007bff;
}