/* ============================================================
   login.css - Pagina de login responsive (~100 lin)
   Mobile-first: form full width, logo arriba
   ============================================================ */

.login-wrapper {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--brand-primary);
}

.login-brand { display: none; }

.login-form-wrapper {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--brand-surface); padding: 24px;
}

.login-form-inner { width: 100%; max-width: 380px; }

.login-mobile-logo {
  text-align: center; margin-bottom: 32px;
}
.login-mobile-logo img { height: 48px; margin: 0 auto; }

.login-title { font-size: 1.35rem; font-weight: 700; color: var(--brand-text); margin-bottom: 4px; }
.login-subtitle { font-size: 0.85rem; color: var(--brand-text-muted); margin-bottom: 28px; }

/* Password toggle button */
.password-field {
  position: relative;
}
.password-field .form-input {
  padding-right: 44px;
}
.password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--brand-text-muted); padding: 6px 8px;
  border-radius: 4px; transition: color 0.15s;
}
.password-toggle:hover { color: var(--brand-accent); }

/* Footer seguro */
.login-footer-text {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--brand-border);
  text-align: center; font-size: 0.75rem;
  color: var(--brand-text-muted);
}
.login-footer-text i { margin-right: 4px; color: var(--brand-accent); }

/* === Desktop login === */
@media (min-width: 769px) {
  .login-wrapper { flex-direction: row; }
  .login-brand {
    display: flex; flex: 1; flex-direction: column;
    align-items: center; justify-content: center; padding: 40px;
  }
  .login-brand img { height: 64px; margin-bottom: 20px; }
  .login-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; text-align: center; max-width: 300px; }
  .login-form-wrapper {
    flex: 1; max-width: none; padding: 40px;
    display: flex; align-items: center; justify-content: center;
  }
  .login-form-inner { max-width: 400px; }
  .login-mobile-logo { display: none; }
}