/* ==========================================================
   componentes_ui.css
   Componentes reutilizables de UI: overlay procesando, etc.
   ========================================================== */

/* --- Overlay: Procesando --- */

@keyframes spinner-giro {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#overlayProcesando {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 15, 25, 0.72);
    z-index: 3000 !important;
    justify-content: center;
    align-items: center;
}

.overlay-procesando-card {
    background: #fff;
    border-radius: 14px;
    padding: 44px 52px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    min-width: 290px;
}

.overlay-procesando-spinner {
    width: 54px;
    height: 54px;
    border: 5px solid #ede8f8;
    border-top: 5px solid #7c3aed;
    border-radius: 50%;
    margin: 0 auto 22px;
    animation: spinner-giro 0.75s linear infinite;
}

.overlay-procesando-titulo {
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.overlay-procesando-nombre {
    font-size: 12px;
    color: #aaa;
    max-width: 250px;
    margin: 0 auto;
    line-height: 1.5;
}