/* Acceso de Finanzas sobre el sistema visual corporativo. */
.finance-auth-page {
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--bio-primary) 14%, transparent), transparent 30%),
    radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--bio-nav) 9%, transparent), transparent 32%),
    var(--bio-canvas);
}
.login-shell { display: grid; min-height: 100dvh; padding: 24px; place-items: center; }
.login-panel {
  width: min(430px, 100%); overflow: hidden; padding: 34px 36px 27px;
  border: 1px solid var(--bio-line); border-radius: var(--bio-radius-lg);
  background: color-mix(in srgb, var(--bio-surface) 97%, transparent); box-shadow: var(--bio-shadow);
}
.login-panel .brand { display: flex; align-items: center; gap: 14px; padding-bottom: 27px; border-bottom: 1px solid var(--bio-line); }
.login-panel .brand-logo { display: block; width: 68px; height: 48px; object-fit: contain; }
.login-panel .eyebrow { margin: 0; color: var(--bio-nav); font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.brand-subtitle { margin: 3px 0 0; color: var(--bio-muted); font-size: 11px; }
.welcome { margin: 27px 0 22px; }
.login-panel h1 { margin: 0; color: var(--bio-ink); font-size: 25px; font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
.login-form { display: grid; gap: 15px; }
.microsoft-login {
  display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--bio-line); border-radius: var(--bio-radius-sm); color: var(--bio-ink);
  background: var(--bio-surface); font-size: 13px; font-weight: 750; text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.microsoft-login:hover { border-color: var(--bio-primary); background: var(--bio-info-soft); transform: translateY(-1px); }
.microsoft-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; }
.microsoft-mark i { display: block; width: 8px; height: 8px; }
.microsoft-mark i:nth-child(1) { background: #f25022; }
.microsoft-mark i:nth-child(2) { background: #7fba00; }
.microsoft-mark i:nth-child(3) { background: #00a4ef; }
.microsoft-mark i:nth-child(4) { background: #ffb900; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 19px 0; color: var(--bio-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; background: var(--bio-line); content: ""; }
.login-form label { display: grid; gap: 7px; color: var(--bio-ink); font-size: 11px; font-weight: 750; }
.login-form input {
  width: 100%; min-height: 45px; padding: 9px 12px; border: 1px solid var(--bio-line);
  border-radius: var(--bio-radius-sm); outline: 0; color: var(--bio-ink);
  background: var(--bio-surface-soft); font-size: 14px; transition: border-color .18s ease, box-shadow .18s ease;
}
.login-form input:focus { border-color: var(--bio-primary); background: var(--bio-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bio-primary) 16%, transparent); }
.login-form .bio-button, .primary-link { width: 100%; min-height: 46px; margin-top: 4px; }
.logout-content { padding-top: 28px; text-align: center; }
.logout-icon {
  display: grid; width: 54px; height: 54px; margin: 0 auto 18px; place-items: center;
  border-radius: 50%; color: #fff; background: var(--bio-success);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--bio-success) 25%, transparent); font-size: 23px; font-weight: 700;
}
.logout-kicker { margin: 0 0 8px; color: var(--bio-success); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.logout-copy { max-width: 300px; margin: 12px auto 24px; color: var(--bio-muted); font-size: 12px; line-height: 1.6; }
.hint, .error-message { margin: 0 0 15px; padding: 11px 13px; border-radius: var(--bio-radius-sm); font-size: 11px; }
.hint { color: var(--bio-ink); border: 1px solid var(--bio-line); background: var(--bio-info-soft); }
.error-message { color: var(--bio-error); border: 1px solid color-mix(in srgb, var(--bio-error) 28%, var(--bio-line)); background: var(--bio-error-soft); }

@media (max-width: 520px) {
  .login-shell { padding: 14px; }
  .login-panel { padding: 27px 23px 23px; border-radius: var(--bio-radius-md); }
}