/* 1. Importaciones y Tipografía */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

/* 2. Estructura de Página (Layout Global para Login/Registro) */
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #10b981 100%);
    display: flex;
    flex-direction: column; /* Esto es clave: apila el contenido y el footer */
}

/* El wrapper que centra el formulario y le da espacio */
.main-wrapper {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
}

/* 3. Estilo Glassmorphism (Usado por tu registro y login) */
.glass-card {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Ajustes para inputs de Bootstrap dentro de la tarjeta */
.glass-card .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-radius: 12px;
}
.glass-card .input-group-text {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* 4. Elementos de Formulario (Botones y otros) */
.btn-registro { 
    background: #10b981 !important; 
    border: none; 
    border-radius: 30px !important; 
    color: white !important; 
}

/* Footer limpio */
footer {
    width: 100%;
    text-align: center;
    color: white;
    padding: 20px;
    font-size: 0.9rem;
}

/* --- Mantenemos la lógica de la animación 3D del login original --- */
.card-3d-wrap { position: relative; width: 440px; max-width: 100%; height: 400px; transform-style: preserve-3d; perspective: 800px; margin: 60px auto; }
.card-3d-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transition: all 600ms ease-out; }
.card-front, .card-back { width: 100%; height: 100%; background-color: #2a2b38; position: absolute; border-radius: 6px; backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); }