.hidden { display: none; }
.loading { display: flex; align-items: center; justify-content: center; padding: 20px; }
.spinner { width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #00A9FA; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.alert { padding: 15px; border-radius: 10px; margin: 15px 0; font-weight: 500; }
.alert-success { background: #D4EDDA; color: #155724; border: 1px solid #C3E6CB; }
.alert-error { background: #F8D7DA; color: #721C24; border: 1px solid #F5C6CB; }

.message {
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
    font-weight: 500;
    border: 1px solid transparent;
}

.message.success {
    background: #D4EDDA;
    color: #155724;
    border-color: #C3E6CB;
}

.message.error {
    background: #F8D7DA;
    color: #721C24;
    border-color: #F5C6CB;
}

.message.warning {
    background: #FFF3CD;
    color: #856404;
    border-color: #FFE69C;
}

.message.info {
    background: #D1ECF1;
    color: #0C5460;
    border-color: #BEE5EB;
}

/* Animaciones suaves para pantallas y mensajes */
.step, .message {
    transition: opacity 0.4s, transform 0.4s;
}
.step.hidden, .message.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}
.step:not(.hidden), .message:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}