/* The pages outside the shell (templates/auth/): sign-in and the dead ends.
 * The tokens are app.css's, so light and dark follow the app's theme.
 * Prefix au-. */

.au-body { overflow: auto; }
.au-wrap {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 20px;
}
.au-brand { font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.au-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.au-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.au-sub { margin: 0; color: var(--text-2); line-height: 1.5; }
.au-who { margin: 0; color: var(--muted); font-size: 12px; }
.au-icon {
  width: 64px; height: 64px; margin: 0 auto 8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.au-icon-error { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.au-icon-info { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.au-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.au-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
  width: 100%; box-sizing: border-box;
}
.au-btn[disabled] { opacity: .5; cursor: default; }
.au-primary { background: var(--text); color: var(--bg); }
.au-google { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.au-google:not([disabled]):hover, .au-quiet:hover { background: var(--hover); }
.au-quiet { color: var(--text-2); }

.au-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 8px 0; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.au-form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.au-label { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.au-input {
  height: 42px; box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.au-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.au-form .au-btn { margin-top: 12px; }
.au-error { margin: 4px 0 0; color: var(--error); font-size: 13px; }

/* /empezar (org/_empezar_card.html) */
.au-row { display: flex; gap: 12px; }
.au-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
select.au-input { width: 100%; color: var(--text); }
.au-terms { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.au-link { color: var(--primary); }
.au-linkbtn { color: var(--text-2); text-decoration: underline; font-size: 12px; }
.au-invites { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.au-invite {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: 8px; text-align: left;
}
.au-invite b { overflow-wrap: anywhere; }
.au-invite span { grid-column: 1; color: var(--muted); font-size: 12px; }
.au-invite .au-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; height: 36px; text-decoration: none; }
@media (max-width: 420px) { .au-row { flex-direction: column; } }