/* Pantalla de acceso. */
.auth {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; isolation: isolate;
  display: grid; place-items: center; padding: 56px 16px 36px; background: var(--n1);
}
.auth::before {
  content: ""; position: fixed; inset: 0; z-index: -2; opacity: .18;
  background-image: linear-gradient(#1d4a8a 1px, transparent 1px), linear-gradient(90deg, #1d4a8a 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 36%, #000 15%, transparent 78%);
  mask-image: radial-gradient(75% 65% at 50% 36%, #000 15%, transparent 78%);
}
.auth::after {
  content: ""; position: fixed; z-index: -1; left: 50%; top: -36vh; width: min(980px, 150vw); height: 74vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 176, 32, .15), rgba(255, 176, 32, 0));
}
.a-demo {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font: 500 12px/1.2 var(--body); color: var(--fg2); background: rgba(4, 12, 29, .6); box-shadow: inset 0 0 0 1px var(--line);
}
.a-card {
  position: relative; width: 100%; max-width: 410px; padding: 26px 22px 20px; border-radius: 14px;
  background: rgba(11, 30, 59, .78); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -32px rgba(0, 0, 0, .85);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.a-card::before { content: ""; position: absolute; left: 16%; right: 16%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); }
.a-card.wide { max-width: 560px; }
@media (min-width: 560px) { .a-card { padding: 32px 32px 24px; } }
.a-brand { display: flex; align-items: baseline; gap: 9px; margin-bottom: 22px; }
.a-brand small { color: var(--fg3); font-size: 12.5px; font-weight: 500; }
.a-card h1 { font: 840 26px/1.12 var(--display); font-stretch: 104%; letter-spacing: -.015em; outline: none; }
.a-sub { margin-top: 7px; color: var(--fg2); font-size: 14.5px; }
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 44px; margin-top: 24px; padding: 0 12px;
  border-radius: 22px; background: #fff; border: 1px solid #747775; color: #1f1f1f;
  font: 500 14px/20px Roboto, arial, sans-serif; letter-spacing: .25px;
  transition: background-color .15s, box-shadow .15s, transform .16s var(--ease-out);
}
.gbtn:hover { background: #f8fafd; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.gbtn:active { transform: scale(.98); }
.g-logo { width: 20px; height: 20px; flex: none; }
.a-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--fg3); font-size: 12.5px; }
.a-or::before, .a-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.a-wide { width: 100%; }
.a-foot { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--fg3); font-size: 12.5px; }
.a-foot .i { color: var(--green); }
.a-back { display: inline-block; margin-top: 14px; }
.a-card .field { margin-top: 14px; }
.a-card .input { min-height: 44px; }
.a-note { margin: 10px 0 16px; font-size: 12.5px; color: var(--fg3); }
.a-acct { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; margin-bottom: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--fg2); }
.enroll { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 560px) { .enroll { grid-template-columns: auto 1fr; align-items: center; gap: 22px; } }
.qr { width: 168px; height: 168px; justify-self: center; padding: 3px; border-radius: 10px; background: #fff; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .8); }
.qr svg { display: block; width: 100%; height: 100%; }
.a-steps { display: grid; gap: 11px; counter-reset: paso; }
.a-steps li { counter-increment: paso; display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; font-size: 14px; }
.a-steps li::before { content: counter(paso); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-soft); color: var(--amber); font: 600 11.5px/1 var(--mono); }
.a-steps b { font-weight: 600; }
.a-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; padding: 10px 12px; border-radius: var(--r-m); background: rgba(4, 12, 29, .45); box-shadow: inset 0 0 0 1px var(--line); }
.a-key small { flex-basis: 100%; color: var(--fg3); font-size: 12.5px; }
.a-key code { font: 600 14px/1.2 var(--mono); letter-spacing: .08em; }
.a-key .btn { margin-left: auto; }
.otp-l { display: block; margin-top: 20px; font-size: 12.5px; font-weight: 600; color: var(--fg2); }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.otp input {
  width: 100%; min-width: 0; height: 52px; text-align: center; font: 600 21px/1 var(--mono);
  background: rgba(4, 12, 29, .5); border: 1.5px solid var(--line-2); border-radius: var(--r-m); caret-color: var(--amber); color: var(--fg1);
  transition: border-color .12s, background-color .12s;
}
.otp input:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 176, 32, .22); }
.otp input.filled { border-color: var(--fg3); }
.otp.ok input { border-color: var(--green); background: rgba(69, 212, 131, .08); }
.otp.bad input { border-color: var(--red); }
.otp-err { min-height: 19px; margin: 6px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--red); }
.a-ok { display: grid; justify-items: center; gap: 9px; padding: 20px 0 8px; text-align: center; }
.a-check { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #062414; }
.a-check .i { width: 30px; height: 30px; }
.a-prog { width: 170px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--n4); overflow: hidden; }
.a-prog i { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; }

/* Ventana simulada de Google */
.gsim {
  position: fixed; inset: 0; margin: auto; width: min(400px, calc(100vw - 32px)); height: fit-content; border-radius: 12px; overflow: hidden;
  background: #fff; color: #1f1f1f; font-family: Roboto, arial, sans-serif; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(10px) scale(.98); transition: transform .24s var(--ease-out), opacity .16s;
}
.gsim.in { opacity: 1; transform: none; }
.gsim :focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.gs-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f1f3f4; border-bottom: 1px solid #dadce0; font-size: 12.5px; color: #444746; }
.gs-bar svg { width: 15px; height: 15px; }
.gs-load { height: 3px; background: #e8eaed; overflow: hidden; }
.gs-load i { display: block; height: 100%; background: #0b57d0; transform: scaleX(0); transform-origin: left; }
.gs-body { padding: 22px 24px 6px; }
.gs-body h2 { font: 400 22px/1.3 Roboto, arial, sans-serif; color: #1f1f1f; }
.gs-body p { margin-top: 3px; font-size: 14px; color: #444746; }
.gs-acc { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 11px 8px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; text-align: left; color: #1f1f1f; font-family: inherit; }
.gs-acc:hover { background: #f6f8fc; }
.gs-av { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #0a1f3d; color: #ffb020; font-weight: 500; font-size: 14px; }
.gs-acc b { display: block; font-weight: 500; font-size: 14px; }
.gs-acc small { font-size: 12.5px; color: #444746; }
.gs-other { width: 100%; padding: 11px 8px; border-bottom: 1px solid #e3e3e3; color: #80868b; font-family: inherit; font-size: 13.5px; text-align: left; cursor: not-allowed; }
.gs-foot { padding: 12px 24px 18px; font-size: 12px; color: #5f6368; }

/* Mientras cargan los módulos: el hueco ya tiene la forma de la tarjeta */
.a-skel { display: grid; gap: 14px; }
.a-skel i { display: block; height: 14px; border-radius: 4px; background: var(--n4); animation: skel 1.5s ease-in-out infinite; }
.a-skel i:nth-child(1) { width: 34%; height: 20px; }
.a-skel i:nth-child(2) { width: 78%; height: 26px; }
.a-skel i:nth-child(3) { width: 92%; }
.a-skel i:nth-child(4) { height: 42px; border-radius: 999px; }
.a-skel i:nth-child(5) { height: 42px; border-radius: var(--r-m); }