/* ============================================================
   ASBAE Portal — Estilos de autenticación
   ============================================================ */

.page-auth { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-dark) 100%); min-height: 100vh; }

.auth-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
}
.auth-card {
    background: var(--color-white); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); padding: var(--spacing-2xl);
    width: 100%; max-width: 440px; animation: fadeIn 0.4s ease;
}
.auth-wrapper--wide { align-items: flex-start; padding-top: var(--spacing-2xl); }
.auth-card--wide { max-width: 700px; }

.auth-card__logo { text-align: center; margin-bottom: var(--spacing-xl); }
.auth-card__logo img { height: 60px; width: auto; margin: 0 auto; }
.auth-card__logo .logo-fallback { display: block; }

.auth-card__title { font-size: 1.6rem; font-weight: 800; color: var(--color-dark); text-align: center; margin-bottom: var(--spacing-xs); }
.auth-card__subtitle { text-align: center; color: var(--color-gray-mid); font-size: 0.9rem; margin-bottom: var(--spacing-xl); }
.auth-card__switch { text-align: center; margin-top: var(--spacing-xl); font-size: 0.9rem; color: var(--color-gray-mid); }
.auth-card__switch a { color: var(--color-primary); font-weight: 600; }

.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-form .form-group { margin-bottom: var(--spacing-lg); }

/* Indicador fuerza contraseña */
.password-strength { height: 4px; border-radius: 2px; margin-top: var(--spacing-xs); background: var(--color-gray-light); overflow: hidden; }
.password-strength::after { content: ''; display: block; height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.password-strength.weak::after   { width: 33%; background: var(--color-error); }
.password-strength.medium::after { width: 66%; background: var(--color-warning); }
.password-strength.strong::after { width: 100%; background: var(--color-success); }

@media (max-width: 576px) {
    .auth-card { padding: var(--spacing-xl); }
    .auth-card--wide { max-width: 100%; }
}