.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-bg); /* Fondo gris claro */
    padding: 20px;
}

.auth-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    max-width: 1000px;
    width: 100%;
    min-height: 600px; /* EVITA QUE SE VEA APLASTADO */
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.auth-card { padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }

/* Gradiente del prototipo */
.auth-info { 
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); 
    color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: center; 
}

.auth-header h1 { font-size: 2rem; color: var(--text-dark); margin-bottom: 5px; font-weight: 800;}
.auth-header p { color: var(--text-muted); margin-bottom: 30px; }

/* INPUTS MÁS GORDOS Y REDONDEADOS */
.input-group { position: relative; margin-bottom: 25px; display: flex; align-items: center; }
/* Usamos > para que solo afecte al primer ícono (el candado/correo) y no al ojo */
.input-group > i { position: absolute; left: 18px; color: #9ca3af; z-index: 5; font-size: 1.1rem; }
.input-group input { 
    width: 100%; 
    padding: 16px 45px 16px 50px !important; /* Más espacio a la derecha para que el texto no pise al ojo */
    border: 2px solid #e5e7eb; 
    border-radius: 16px; 
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    background: #f9fafb;
    color: var(--text-dark);
}
.input-group input:focus { border-color: var(--primary); background: #fff; }

/* EL OJITO DE LA CONTRASEÑA (Reparado) */
.toggle-password {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.toggle-password i {
    position: static;
    font-size: 1.2rem;
    color: inherit;
}
.toggle-password:hover { color: var(--primary); }

/* DISEÑO MEJORADO PANEL DERECHO */
.auth-info h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 15px; line-height: 1.2; }
.auth-info > p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 40px; line-height: 1.6; }
.features { display: flex; flex-direction: column; gap: 20px; }
.feature { 
    display: flex; align-items: center; gap: 15px; font-size: 1.05rem; font-weight: 600; 
    background: rgba(255,255,255,0.1); padding: 15px 20px; border-radius: 16px; 
    border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px); transition: 0.3s; 
}
.feature:hover { background: rgba(255,255,255,0.2); transform: translateX(10px); }
.feature i { font-size: 1.4rem; color: #a5b4fc; width: 30px; text-align: center; }

/* CHECKBOX Y ENLACES */
.form-options { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 25px; color: var(--text-muted); }
.form-options a { color: var(--primary); font-weight: 600; text-decoration: none; }

.btn-block { 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%; 
    padding: 18px; 
    background: var(--primary); 
    color: #fff !important; 
    border: none; 
    border-radius: 16px; 
    font-weight: 700; 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: 0.3s; 
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
}

.btn-block i {
    position: static; /* Quita el posicionamiento absoluto si lo heredaba */
    font-size: 1.2rem;
    color: white !important;
}

.btn-block:hover { transform: translateY(-3px); box-shadow: 0 15px 20px -3px rgba(79, 70, 229, 0.4); }

/* --- OPTIMIZACIÓN PARA MÓVIL --- */
@media (max-width: 600px) {
    .auth-card { padding: 40px 25px; } /* Menos espacio lateral en móvil */
    
    .auth-header h1 { font-size: 1.6rem !important; } /* Título más acorde al móvil */
    
    .btn-block { 
        padding: 16px; 
        font-size: 1rem; 
    }

    /* En móvil, los campos de Nombre/Apellido y Clave se ven mejor uno bajo el otro */
    #registerForm div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    #registerForm .form-group {
        margin-bottom: 20px !important;
    }
}
.btn-block:hover { transform: translateY(-3px); box-shadow: 0 15px 20px -3px rgba(79, 70, 229, 0.4); }

.auth-footer { text-align: center; margin-top: 30px; font-size: 0.95rem; color: var(--text-muted); }
.auth-footer a { color: var(--primary); font-weight: 700; }

@media (max-width: 850px) {
    .auth-container { grid-template-columns: 1fr; max-width: 450px; min-height: auto;}
    .auth-info { display: none; }
}