:root { 
    --success: #27ae60; 
    --bg: #e9ecef; 
    --accent: #3498db; 
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--bg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    margin: 0; 
    overflow-x: hidden; /* Evita scroll lateral durante la animación */
}

.card { 
    background: white; 
    padding: 30px; 
    border-radius: 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    width: 90%; 
    max-width: 450px; 
    text-align: center; 
    position: relative;
}

/* --- ANIMACIONES DE NAVEGACIÓN --- */

/* Hacia Adelante (Siguiente) */
@keyframes entradaAdelante {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes salidaAdelante {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-100px); }
}

/* Hacia Atrás (Anterior) */
@keyframes entradaAtras {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes salidaAtras {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100px); }
}

/* Clases de control */
.animar-entrada-adelante { animation: entradaAdelante 0.4s ease-out forwards; }
.animar-salida-adelante { animation: salidaAdelante 0.4s ease-in forwards; }
.animar-entrada-atras { animation: entradaAtras 0.4s ease-out forwards; }
.animar-salida-atras { animation: salidaAtras 0.4s ease-in forwards; }

/* Otros elementos */
.barra { background: #eee; border-radius: 10px; height: 8px; margin-bottom: 20px; overflow: hidden; }
.relleno { background: var(--accent); height: 100%; width: 0%; transition: width 0.3s; }
.id-badge { background: #eee; display: inline-block; padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; color: #777; }
.boton-opcion { 
    padding: 12px; border: 2px solid #eee; border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: left; font-size: 1rem; background: white;
}
.boton-opcion:hover { background: #f8f9fa; border-color: #ddd; }