body.auth {
  background:
    radial-gradient(120% 60% at 50% 0%, var(--dc-navy-50) 0%, transparent 55%),
    var(--bg-app);
}

body.auth--entrance #main {
  position: relative;
  width: calc(100% - 2 * var(--space-6));
  max-width: 460px;
  margin: var(--space-16) auto var(--space-24);
  padding: var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

body.auth--entrance #main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--dc-navy) 0%,
    var(--dc-sky) 25%,
    var(--dc-green) 50%,
    var(--dc-amber) 75%,
    var(--dc-magenta) 100%);
}

body.auth--manage #main {
  width: calc(100% - 2 * var(--space-6));
  max-width: 720px;
  margin: var(--space-12) auto var(--space-24);
  padding: var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.auth #main h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

body.auth #main h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: var(--fg-1);
  margin: var(--space-8) 0 var(--space-3);
}

body.auth #main p {
  font-size: var(--fs-15);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-3);
}

body.auth #main a {
  color: var(--fg-link);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

body.auth #main a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.auth #main a.btn {
  text-decoration: none;
}

.auth-card__head {
  margin-bottom: var(--space-6);
}

.auth-card__head p:last-child {
  margin-bottom: 0;
}

.auth-card__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-card__foot p {
  margin: 0;
  font-size: var(--fs-13);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

body.auth--entrance .auth-form__actions {
  flex-direction: column;
  align-items: stretch;
}

body.auth--entrance .auth-form__actions .btn {
  width: 100%;
  justify-content: center;
}

.btn-danger {
  background: var(--state-danger-bg);
  color: var(--state-danger-fg);
  border: 1px solid var(--state-danger-line);
}

.btn-danger:hover {
  background: var(--dc-magenta-300);
  border-color: var(--dc-magenta-300);
  color: #fff;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-14);
  color: var(--fg-2);
}

.auth-check input[type="checkbox"],
.auth-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--dc-navy-500);
  flex-shrink: 0;
}

.auth-form__help {
  font-size: var(--fs-12);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.auth-form__error,
.auth-form .errorlist {
  color: var(--state-danger-fg);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  list-style: none;
  padding: 0;
  margin: 0;
}

body.auth #main .field label {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}

body.auth #main .field .help {
  font-size: var(--fs-12);
  color: var(--fg-3);
}

.auth-alert {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-4);
  background: var(--bg-surface-2);
  color: var(--fg-2);
}

.auth-alert p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.auth-alert--success {
  background: var(--state-success-bg);
  border-color: var(--state-success-line);
  color: var(--state-success-fg);
}

.auth-alert--error,
.auth-alert--danger {
  background: var(--state-danger-bg);
  border-color: var(--state-danger-line);
  color: var(--state-danger-fg);
}

.auth-alert--warning {
  background: var(--state-warning-bg);
  border-color: var(--state-warning-line);
  color: var(--state-warning-fg);
}

.auth-alert--info {
  background: var(--state-info-bg);
  border-color: var(--state-info-line);
  color: var(--state-info-fg);
}

body.auth .auth-messages {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-emails {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.auth-email {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  font-size: var(--fs-14);
  color: var(--fg-1);
  cursor: pointer;
}

.auth-email:hover {
  border-color: var(--dc-sky-200);
}

.auth-email__tags {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
  flex-wrap: wrap;
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--fg-3);
}

.auth-badge--success {
  background: var(--state-success-bg);
  border-color: var(--state-success-line);
  color: var(--state-success-fg);
}

.auth-badge--warning {
  background: var(--state-warning-bg);
  border-color: var(--state-warning-line);
  color: var(--state-warning-fg);
}

.auth-badge--primary {
  background: var(--dc-navy-50);
  border-color: var(--dc-navy-100);
  color: var(--dc-navy-700);
}

.auth-hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

@media (max-width: 560px) {
  body.auth--entrance #main,
  body.auth--manage #main {
    width: calc(100% - 2 * var(--space-4));
    margin-top: var(--space-8);
    padding: var(--space-5);
  }

  body.auth #main h1 {
    font-size: var(--fs-24);
  }
}

/* ───── DETALLE PLEGABLE ───── */
.auth-details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
}
.auth-details__summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--fg-1);
}
.auth-details__summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.auth-details__body { padding-top: var(--space-4); }

/* ───── CÓDIGO QR DEL SEGUNDO FACTOR ───── */
.auth-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  background: #FFFFFF;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}