/*!
 * Indicadores de carga para el formulario de eventos
 * Muestra progreso durante la carga de datos de usuario
 */

/* ============================
   INDICADOR DE CARGA PRINCIPAL
   ============================ */

.fre-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin: 15px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fre-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e9ecef;
    border-top: 2px solid #0066cc;
    border-radius: 50%;
    animation: fre-spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes fre-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fre-loading-text {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

/* ============================
   PROGRESO DE REINTENTOS
   ============================ */

.fre-retry-progress {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 13px;
    color: #856404;
}

.fre-retry-progress .progress-bar {
    background-color: #ffeaa7;
    height: 4px;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.fre-retry-progress .progress-fill {
    background-color: #0066cc;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ============================
   ESTADOS DE CARGA
   ============================ */

.fre-loading-state {
    transition: all 0.3s ease;
}

.fre-loading-state.loading {
    opacity: 0.7;
    pointer-events: none;
}

.fre-loading-state.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.fre-loading-state.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* ============================
   MENSAJES DE ESTADO
   ============================ */

.fre-status-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.fre-status-message.loading {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.fre-status-message.success {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.fre-status-message.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.fre-status-message .icon {
    margin-right: 8px;
    font-size: 16px;
}

/* ============================
   ANIMACIONES DE ENTRADA
   ============================ */

.fre-fade-in {
    animation: freFadeIn 0.5s ease-in;
}

@keyframes freFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fre-slide-in {
    animation: freSlideIn 0.3s ease-out;
}

@keyframes freSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 480px) {
    .fre-loading-indicator {
        padding: 16px;
        margin: 10px 0;
    }
    
    .fre-loading-text {
        font-size: 13px;
    }
    
    .fre-status-message {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ============================
   MODOS OSCUROS (SI SE IMPLEMENTAN)
   ============================ */

@media (prefers-color-scheme: dark) {
    .fre-loading-indicator {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .fre-loading-text {
        color: #a0aec0;
    }
    
    .fre-retry-progress {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .fre-status-message.loading {
        background-color: #2c5282;
        color: #90cdf4;
        border-color: #3182ce;
    }
    
    .fre-status-message.success {
        background-color: #22543d;
        color: #9ae6b4;
        border-color: #38a169;
    }
    
    .fre-status-message.error {
        background-color: #742a2a;
        color: #feb2b2;
        border-color: #e53e3e;
    }
}