/* The sign-in pages in the approved look (owner, 2026-11-10: "también deberíamos de actualizar la pantalla de inicio"): the
   sign-in, the second-factor code and the invitation's password. The "Vidrio" ground with its three soft lights, one glass
   card in the middle, Plus Jakarta Sans and Sora (ui-fonts.css), the accent button.

   Loaded by those pages only, and every rule is under body.auth, so no other page reads it. Only the look changes: the
   fields, the forms, their addresses and the passkey's hooks are the templates' own, untouched.

   Dark ("Vidrio noche") when the browser asks for it, or when the vgs_look cookie (app/frame.py LOOK_COOKIE) says the last
   person signed in here works on a dark style; the template puts .auth-dark on the body for the cookie. The card's text
   colours are the glass styles' own, checked for WCAG AA on the card (static/ui-glass.css). */

/* ── tokens: the glass styles' (light), re-pointed for app.css's components ───── */
body.auth{
  color-scheme:light;
  --ground:#e6eefc; --surface:#f8faff; --surface-2:#eef3fc; --ink:#0f1729; --ink-2:#334058; --muted:#4d5873;
  --rule:rgba(40,60,110,.18); --rule-2:rgba(40,60,110,.09); --accent:#07617e; --accent-ink:#fff; --blue:#1a5fae;
  --ok:#17703f; --ok-soft:rgba(23,112,63,.12); --danger:#a02c22; --danger-soft:rgba(160,44,34,.10); --info:#1a5fae; --info-soft:rgba(26,95,174,.12);
  --radius:16px; --radius-s:10px;
  --font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --au-display:"Sora","Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --au-g1:#dfe9ff; --au-g2:#e8f6f8; --au-g3:#f3e8ff;
  --au-b1:rgba(70,130,255,.34); --au-b2:rgba(0,180,190,.28); --au-b3:rgba(150,90,255,.30);
  --au-glass:rgba(255,255,255,.45); --au-field:rgba(255,255,255,.86); --au-edge:rgba(255,255,255,.65);
  --au-hi:inset 0 1px 0 rgba(255,255,255,.8); --au-shadow:0 24px 60px -28px rgba(30,50,110,.45);
  --au-solid:#fbfcfe;
}
/* Vidrio noche: by the browser's setting, or by the cookie. The same block twice: a media query cannot be joined to a class. */
@media (prefers-color-scheme:dark){
  body.auth{
    color-scheme:dark;
    --ground:#0a1020; --surface:#121a2e; --surface-2:#18223a; --ink:#e8edf6; --ink-2:#b4bdcf; --muted:#97a2b8;
    --rule:rgba(255,255,255,.14); --rule-2:rgba(255,255,255,.07); --accent:#5fd4ee; --accent-ink:#04202a; --blue:#7ea2ec;
    --ok:#6fd39a; --ok-soft:rgba(111,211,154,.14); --danger:#f08a80; --danger-soft:rgba(240,138,128,.15); --info:#7ea2ec; --info-soft:rgba(126,162,236,.16);
    --au-g1:#0a1020; --au-g2:#0b1326; --au-g3:#0f0f26;
    --au-b1:rgba(56,140,255,.30); --au-b2:rgba(0,200,200,.20); --au-b3:rgba(150,90,255,.26);
    --au-glass:rgba(20,28,48,.45); --au-field:rgba(10,16,32,.72); --au-edge:rgba(255,255,255,.12);
    --au-hi:inset 0 1px 0 rgba(255,255,255,.08); --au-shadow:0 24px 60px -24px rgba(0,0,0,.8);
    --au-solid:#151c2e;
  }
}
body.auth.auth-dark{
  color-scheme:dark;
  --ground:#0a1020; --surface:#121a2e; --surface-2:#18223a; --ink:#e8edf6; --ink-2:#b4bdcf; --muted:#97a2b8;
  --rule:rgba(255,255,255,.14); --rule-2:rgba(255,255,255,.07); --accent:#5fd4ee; --accent-ink:#04202a; --blue:#7ea2ec;
  --ok:#6fd39a; --ok-soft:rgba(111,211,154,.14); --danger:#f08a80; --danger-soft:rgba(240,138,128,.15); --info:#7ea2ec; --info-soft:rgba(126,162,236,.16);
  --au-g1:#0a1020; --au-g2:#0b1326; --au-g3:#0f0f26;
  --au-b1:rgba(56,140,255,.30); --au-b2:rgba(0,200,200,.20); --au-b3:rgba(150,90,255,.26);
  --au-glass:rgba(20,28,48,.45); --au-field:rgba(10,16,32,.72); --au-edge:rgba(255,255,255,.12);
  --au-hi:inset 0 1px 0 rgba(255,255,255,.08); --au-shadow:0 24px 60px -24px rgba(0,0,0,.8);
  --au-solid:#151c2e;
}

/* ── the ground: the gradient, and the three lights as two fixed layers behind the card ───── */
body.auth{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);font-family:var(--font);
  background:linear-gradient(135deg,var(--au-g1),var(--au-g2) 52%,var(--au-g3)) fixed}
body.auth::before,body.auth::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body.auth::before{background:radial-gradient(46% 46% at 10% 12%,var(--au-b1),transparent 70%),radial-gradient(40% 42% at 92% 28%,var(--au-b2),transparent 70%)}
body.auth::after{background:radial-gradient(48% 42% at 58% 98%,var(--au-b3),transparent 70%)}

/* ── the page: the language switch up on the right, the card in the middle; on a phone the card is full width with 16px gutters ───── */
body.auth main.narrow{max-width:none;margin:0;padding:16px;min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column}
body.auth .signed-out-lang{text-align:right;margin:0}
body.auth .lang-switch{background:var(--au-glass);border-color:var(--au-edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.auth .lang-switch a.on{background:var(--accent);color:var(--accent-ink)}
body.auth .auth-card{width:100%;max-width:420px;box-sizing:border-box;margin:auto;padding:28px 26px 24px;border-radius:20px;
  background:var(--au-glass);border:1px solid var(--au-edge);box-shadow:var(--au-hi),var(--au-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
@media (min-width:768px){body.auth main.narrow{padding:20px 28px}body.auth .auth-card{padding:34px 34px 28px}}

/* ── the brand: the logo for the ground it sits on, and its line ───── */
body.auth .auth-brand{text-align:center;margin-bottom:22px}
body.auth .auth-brand h1{margin:0 0 8px;line-height:0}
body.auth .auth-logo{height:48px;width:auto}
body.auth .auth-on-dark{display:none}
@media (prefers-color-scheme:dark){body.auth .auth-on-light{display:none}body.auth .auth-on-dark{display:inline}}
body.auth.auth-dark .auth-on-light{display:none}
body.auth.auth-dark .auth-on-dark{display:inline}
body.auth .auth-tag{margin:0;color:var(--ink-2);font-size:13.5px}
body.auth .auth-card h1:not(.auth-logo-h){font-family:var(--au-display);font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
body.auth .auth-card .lead{font-size:13.5px;margin:0 0 18px}

/* ── fields and buttons: solid frosted fields so the text keeps its contrast; the accent button full width ───── */
body.auth .auth-card label{font-size:12.5px;color:var(--ink-2)}
body.auth .auth-card :is(input[type=email],input[type=password],input[type=text]){background:var(--au-field);border-color:var(--rule);
  padding:11px 12px;font-size:15px;border-radius:12px}
body.auth .auth-card :is(input[type=email],input[type=password],input[type=text]):focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
body.auth .auth-card button{justify-content:center;border-radius:12px;padding:11px 16px;font-size:14.5px}
body.auth .auth-card button[type=submit]:not(.secondary){width:100%;background:var(--accent);color:var(--accent-ink);
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent) 90%,transparent)}
body.auth .auth-card button.secondary{background:var(--au-field);color:var(--ink);border:1px solid var(--rule)}
body.auth .auth-card button.secondary:hover{filter:none;border-color:var(--accent)}
body.auth .auth-card :is(input,button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.auth .auth-card a{color:var(--accent)}
body.auth .auth-passkey{width:100%;gap:9px}
body.auth .auth-passkey svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.auth .auth-help{margin:8px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
body.auth .auth-foot{margin:18px 0 0;font-size:13px;color:var(--muted)}

/* ── the divider "o" ───── */
body.auth .auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12.5px}
body.auth .auth-or::before,body.auth .auth-or::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── messages inside the card: the error in the danger tone, and it shakes once when the computer allows motion ───── */
body.auth .auth-card .msg{border-radius:12px;font-size:13.5px}
@keyframes au-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:no-preference){
  body.auth .auth-card .msg.error:not([hidden]){animation:au-shake .4s ease .15s 1}
}

/* ── less transparency, asked for or not available: a solid card ───── */
@media (prefers-reduced-transparency:reduce){
  body.auth .auth-card,body.auth .lang-switch{background:var(--au-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.auth .auth-card,body.auth .lang-switch{background:var(--au-solid)}
}