/*
 * Sign-in pages (ufis/ui/templates/auth/_layout.html, owned by ufis/auth): the Login preview
 * (docs/design/previews/Login.dc.html). One narrow column in the middle of the window (logo,
 * title, then the page), the theme and language menu in the corner, the big "Continuar con
 * Microsoft" button, the decorative rings on wide screens. Colours only from the tokens in
 * ufis.css; the Microsoft logo is the brand file img/microsoft.svg.
 */

/* the corner menu replaces the shell header: no title, no olive rule */
.auth-hdr { justify-content: flex-end; border-bottom: 0; padding-bottom: 0; }
.auth {
  position: relative; overflow: hidden; min-height: calc(100vh - 76px);
  align-items: center; justify-content: center; padding-top: 0;
}
.auth-col { position: relative; z-index: 1; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.auth-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 6px; }
.auth-head .logo { margin-bottom: 26px; }
.auth-head h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.3px; line-height: 1.2; overflow-wrap: anywhere; }
.auth-head h1:focus { outline: none; }
.auth-sub { margin: 8px 0 0; font-size: 15px; color: var(--text-2); }
.auth-col-wide { max-width: 600px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.auth-form > .btn { width: 100%; justify-content: center; }

/* "Continuar con Microsoft": a quiet surface button with the four-square logo, as in the preview */
.auth-ms {
  width: 100%; height: 46px; justify-content: center; gap: 12px; padding: 0 16px;
  background: var(--surface); border-color: var(--line-2); color: var(--text); font-size: 15px; font-weight: 600;
}
.auth-ms::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 18px;
  background: url("../img/microsoft.svg") center / contain no-repeat;
}
.auth-ms:hover { border-color: var(--navy); color: var(--text); }
.auth-external { font-size: 13px; color: var(--text-2); }

.auth-foot {
  display: flex; align-items: center; gap: 6px 4px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2);
}
.auth-foot .btn { height: 32px; padding: 0 10px; font-size: 13px; }
.auth-foot .auth-company { margin-left: auto; }

/* the rings of the preview, decorative only */
.auth-rings {
  position: absolute; z-index: 0; right: 6%; top: 50%; transform: translateY(-50%);
  width: 520px; max-width: 45%; opacity: .5; pointer-events: none;
}
.auth-rings circle { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.auth-rings .auth-core { fill: var(--olive); stroke: none; opacity: .55; }

/* set-up: QR code (black on white in both themes, so every app can read it) and the manual key */
.auth-qr { align-self: flex-start; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-qr-box { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.auth-qr-svg { display: block; width: 188px; height: 188px; }
.auth-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .5px; overflow-wrap: anywhere; }
#f-code { max-width: 14ch; font-size: 18px; letter-spacing: .25em; }

/* the fake Microsoft provider (dev and test only) */
.auth-people { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.auth-people li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.auth-people li:first-child { border-top: 0; }

@media (max-width: 720px) {
  .auth { min-height: 0; justify-content: flex-start; padding-top: 18px; }
  .auth-head .logo { margin-bottom: 18px; }
  .auth-head h1 { font-size: 22px; }
  .auth-rings { display: none; }
  .auth-col { max-width: none; }
  .auth-foot .btn { height: var(--touch); }
  /* text links ("Entra con tu correo", "Volver a entrar"): tall enough to tap */
  .auth-col > p a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
  #f-code { font-size: 20px; }
}
@media (pointer: coarse) {
  .auth-col > p a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
}