/* ============================================
   AUTH.css
   Propósito: Estilos específicos para las páginas de login y registro.
   Dependencias: components.css (debe cargarse antes).
   Contiene:
   - Contenedor principal (login-container)
   - Tarjeta de login (login-card)
   - Logo y título
   - Campos de formulario específicos (con enfoque en autenticación)
   - Enlaces de "olvidé contraseña" y "registrarse"
   - Checkbox de aceptación de términos
   - Responsive para móviles
   ============================================ */

/* 1. Reset y Seguridad */
body {
    margin: 0; padding: 0; overflow-x: hidden; background: var(--bg-color);
}

.login-container {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
    width: 100%;
}

.login-card {
    background: white; border-radius: 28px; padding: 48px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    width: 100%; max-width: 480px;
    border: 1px solid #e2e8f0; margin: 0 auto;
}

/* ===== CENTRADO DEL LOGO (CORREGIDO) ===== */
.logo-area {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    width: 100%;
    margin-bottom: 24px;
}

.logo-icon img {
    width: 200px;
    max-width: 100%; 
    height: auto;
    display: block; /* Asegura que se comporte como bloque */
}

/* Títulos */
h1 { font-size: 1.8rem; margin-bottom: 10px; color: var(--text-main); font-weight: 700; text-align: center; }
.subtitle { color: #666; font-size: 1rem; text-align: center; margin-bottom: 24px; }

/* Formulario */
.form-group { margin-bottom: 20px; }
.form-label { display: block; color: #333; font-size: 0.9rem; margin-bottom: 8px; font-weight: 600; }
.form-input {
    width: 100%; padding: 14px 18px; background: #f8f9fa;
    border: 1px solid #e2e8f0; border-radius: 14px;
    font-size: 1rem; /* 16px real */
    transition: all 0.3s;
}
.form-input:focus { outline: none; border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }

/* Botón */
.btn-login {
    width: 100%; padding: 16px; background: var(--brand-purple);
    border: none; border-radius: 30px; color: white;
    font-size: 1.1rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; margin-top: 10px;
}
.btn-login:hover { background: var(--brand-purple-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }

/* Alertas y Links */
.alert-error { background: #fee2e2; border-left: 4px solid #ef4444; padding: 12px; border-radius: 12px; color: #b91c1c; margin-bottom: 20px; font-size: 14px; }
.register-link { text-align: center; margin-top: 20px; font-size: 0.95rem; }
.register-link a { color: var(--brand-purple); font-weight: 600; }

/* Nuevo estilo para "Olvidaste tu contraseña" */
.forgot-password {
    text-align: right;
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.forgot-password a {
    color: #666;
    text-decoration: none;
}

.forgot-password a:hover {
    color: var(--brand-purple);
    text-decoration: underline;
}

/* Ajuste para el contenedor de links al pie */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* 4. RESPONSIVE (Móviles) */
@media (max-width: 480px) {
    .login-container { align-items: flex-start; padding-top: 30px; }
    .login-card { padding: 25px 20px; border-radius: 20px; }
    
    h1 { font-size: 1.5rem; }
    .form-input { padding: 12px 14px; font-size: 1rem; }
    .btn-login { padding: 14px; font-size: 1.1rem; }
    .form-label { font-size: 0.85rem; }
}


/* Ajuste para el Select (para que se vea igual al input) */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}
/* Checkbox */
/* Checkbox profesional y uniforme */
.checkbox-label {
    display: flex;
    align-items: flex-start; /* flex-start es mejor para textos largos */
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    margin-bottom: 12px;
}

.checkbox-label input[type="checkbox"] {
    /* Forzamos el tamaño para que nunca se encojan */
    width: 18px; 
    height: 18px;
    min-width: 18px; 
    min-height: 18px;
    
    margin-right: 10px;
    margin-top: 2px; /* Alineación vertical con el texto */
    accent-color: var(--brand-purple);
    cursor: pointer;
}
/* Para que los links dentro del texto sigan el estilo de la web */
.checkbox-label a {
    color: var(--brand-purple);
    text-decoration: none;
    font-weight: 600;
}
.checkbox-label a:hover {
    text-decoration: underline;
}

/* Hint de contraseña */
.form-hint {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
}