/* Pantallas de acceso (login, recuperación, invitación) — consume tokens + app.css */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-10);
  box-shadow: var(--shadow-md);
}
.auth-card--wide { max-width: 560px; }
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  margin-bottom: var(--s-8);
}
.auth-brand img { width: 24px; height: 24px; }

.auth-card h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-2);
  text-align: center;
}
.auth-card .auth-sub,
.auth-card > p:not(.errorlist):first-of-type {
  color: var(--ink-500);
  text-align: center;
  margin: 0 0 var(--s-6);
  font-size: var(--fs-sm);
}

/* Formularios as_p: apilar label sobre input */
.auth-card form p {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}
.auth-card form label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-700); }
.auth-card form .helptext { font-size: var(--fs-xs); color: var(--ink-400); }
.auth-card .btn-primary { width: 100%; justify-content: center; margin-top: var(--s-2); }

.auth-foot { text-align: center; margin-top: var(--s-6); font-size: var(--fs-sm); }
.auth-foot a { color: var(--ink-500); }
.auth-foot a:hover { color: var(--ink-900); }

.auth-error {
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s-5);
  text-align: center;
}
.auth-success {
  background: #e7f6ec;
  color: #1c7a3f;
  border: 1px solid #bfe6cc;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
}

.input-prefix { display: inline-flex; align-items: center; color: var(--ink-500); font-weight: 600; }

.rut-feedback { display: block; font-size: var(--fs-sm); margin-top: 4px; }
.rut-ok  { color: #1c7a3f; }
.rut-bad { color: #b42318; }
.input-ok      { border-color: #1c7a3f; }
.input-invalid { border-color: #b42318; }

.auth-success--lg { display:flex; align-items:center; gap: var(--s-2); padding: var(--s-4); font-size: var(--fs-body-l); margin-bottom: var(--s-5); }
.auth-success--lg svg { width: 20px; height: 20px; flex: 0 0 auto; }

.return-icon { width: 64px; height: 64px; border-radius: var(--r-full); display:flex; align-items:center; justify-content:center; margin: 0 auto var(--s-4); }
.return-icon svg { width: 28px; height: 28px; }
.return-icon--warn { background: var(--warning-soft); color: var(--warning); }
.btn-lg { min-height: 52px; font-size: var(--fs-body-l); padding: 0 var(--s-6); }

.tel-feedback { display: block; font-size: var(--fs-sm); margin-top: 4px; }
.co-retry {
  background: var(--surface-3);
  color: var(--ink-700);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s-4);
  text-align: center;
}