/* Acceso (login, registro, 2FA, contraseña) del cliente y del personal: página oscura como el login del PayAndes Payer,
   con el mapa de América, la historia a la izquierda y la tarjeta del formulario. Cabe en una pantalla sin desplazarse. */

.auth-body{background:var(--background)}
.auth-shop{min-height:100vh;min-height:100svh;overflow-x:hidden}

/* Escena de fondo: mapa con rutas y ciudades */
.auth-scene{position:fixed;inset:0;z-index:0;display:grid;place-items:center end;pointer-events:none;color:oklch(1 0 0 / 26%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 70% 50%,#000 30%,transparent 80%)}
.auth-scene .map{width:min(70rem,120vw);height:auto;margin-right:-6rem;opacity:.9}
.auth-scene .route{fill:none;stroke:oklch(1 0 0 / 16%);stroke-width:.45}
.auth-scene .route-pulse{fill:none;stroke:var(--hl);stroke-width:.8;stroke-linecap:round;stroke-dasharray:5 120;stroke-dashoffset:125;animation:map-flow 4.5s linear infinite;filter:drop-shadow(0 0 1.5px var(--hl))}
.auth-scene .r1{animation-delay:-.8s}.auth-scene .r2{animation-delay:-1.6s}.auth-scene .r3{animation-delay:-2.4s}.auth-scene .r4{animation-delay:-3.2s}.auth-scene .r5{animation-delay:-4s}
@keyframes map-flow{to{stroke-dashoffset:0}}
.auth-scene .city .dot{fill:#fff}
.auth-scene .city .ring{fill:none;stroke:var(--hl);stroke-width:.5;transform-box:fill-box;transform-origin:center;animation:map-ping 2.6s var(--ease-out) infinite}
@keyframes map-ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
@media (prefers-reduced-motion:reduce){.auth-scene .route-pulse,.auth-scene .city .ring{animation:none}}

/* Página: barra superior + escenario centrado en el alto que quede */
.auth-page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:1.125rem clamp(1rem,.5rem + 2vw,2.5rem)}
.auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.auth-topbar .brand{color:var(--foreground)}
.auth-brand-text{display:flex;flex-direction:column;line-height:1.2}
.auth-brand-text b{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.auth-brand-text small{color:var(--muted-foreground);font-size:.75rem;font-weight:400}
.auth-brand-text i{font-style:normal;opacity:.65}
.auth-back{display:inline-flex;align-items:center;gap:.25rem;height:2.25rem;padding:0 .75rem;border-radius:var(--radius-md);color:var(--muted-foreground);font-size:.875rem;font-weight:500;transition:color .15s,background-color .15s}
.auth-back:hover{color:var(--foreground);background:oklch(1 0 0 / 6%)}
.auth-back svg{width:1rem;height:1rem}
.auth-badge{display:inline-flex;align-items:center;gap:.375rem;height:1.875rem;padding:0 .75rem;border-radius:.5rem;box-shadow:inset 0 0 0 1px oklch(1 0 0 / 12%);color:var(--muted-foreground);font-size:.8125rem;font-weight:500}
.auth-badge svg{width:.875rem;height:.875rem}
.auth-stage{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;align-items:center;width:100%;max-width:72rem;margin:0 auto;padding-block:clamp(1rem,4vh,2.5rem)}
@media (min-width:1024px){.auth-stage{grid-template-columns:minmax(0,1fr) 26rem;gap:clamp(3rem,6vw,6rem)}}

/* Historia (solo en pantallas grandes) */
.auth-story{display:none;max-width:32rem}
@media (min-width:1024px){.auth-story{display:block}}
.auth-story .kicker-mono{color:var(--muted-foreground);font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.auth-story h2{margin-top:1rem;font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:600;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.auth-story>p:not(.kicker-mono){margin-top:1rem;color:var(--muted-foreground);font-size:1.0625rem;line-height:1.65}
.auth-live{margin-top:2rem;padding:1.125rem;border-radius:1rem;background:oklch(1 0 0 / 4%);box-shadow:inset 0 0 0 1px oklch(1 0 0 / 10%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.auth-live-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.875rem}
.auth-live-head b{display:block;font-size:.9375rem;font-weight:600}
.auth-live-head small{display:block;margin-top:.125rem;color:var(--muted-foreground);font-size:.75rem}
.auth-live-count{text-align:right}
.auth-live-count b{font-size:1.5rem;letter-spacing:-.03em}
.auth-spark{display:block;width:100%;height:2.25rem;margin:0 0 .75rem}
.auth-spark .area{fill:color-mix(in oklab,var(--hl) 9%,transparent)}
.auth-spark .line{fill:none;stroke:var(--hl);stroke-width:1.2;vector-effect:non-scaling-stroke}
.auth-live-list{display:grid;gap:.375rem}
.auth-live-list li{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.75rem;background:oklch(1 0 0 / 3%);box-shadow:inset 0 0 0 1px oklch(1 0 0 / 7%);animation:live-in .6s var(--ease-out) backwards}
.auth-live-list .d1{animation-delay:.15s}.auth-live-list .d2{animation-delay:.3s}
@keyframes live-in{from{opacity:0;transform:translateY(6px)}}
.auth-live-ic{display:grid;place-items:center;flex-shrink:0;width:2rem;height:2rem;border-radius:.5rem;box-shadow:inset 0 0 0 1px oklch(1 0 0 / 12%)}
.auth-live-ic svg{width:1rem;height:1rem}
.auth-live-main{flex:1;min-width:0}
.auth-live-main b{display:block;overflow:hidden;font-size:.8125rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.auth-live-main small,.auth-live-side small{display:block;color:var(--muted-foreground);font-size:.6875rem}
.auth-live-side{text-align:right}
.auth-live-side em{display:inline-flex;align-items:center;gap:.25rem;color:var(--foreground);font-size:.75rem;font-style:normal;font-weight:500}
.auth-live-side em svg{width:.75rem;height:.75rem;color:var(--hl)}

/* Tarjeta del formulario */
.auth-card{width:100%;max-width:26rem;margin-inline:auto;padding:clamp(1.5rem,1rem + 1.6vw,2rem);border-radius:1.25rem;background:linear-gradient(180deg,rgb(48 48 46 / 92%),rgb(38 38 36 / 92%));box-shadow:inset 0 0 0 1px oklch(1 0 0 / 10%),inset 0 1px 0 oklch(1 0 0 / 6%),0 40px 90px -30px rgb(0 0 0 / .8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:rise .5s var(--ease-out) backwards}
.auth-card-lg{max-width:34rem}
@media (min-width:1024px){.auth-card-lg{max-width:none}.auth-stage:has(.auth-card-lg){grid-template-columns:minmax(0,1fr) 34rem}}
.auth-head{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:1.5rem}
.auth-icon{display:grid;place-items:center;flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:.75rem;background:oklch(1 0 0 / 6%);box-shadow:inset 0 0 0 1px oklch(1 0 0 / 12%)}
.auth-icon svg{width:1.25rem;height:1.25rem}
.auth-title{font-size:1.5rem;font-weight:600;letter-spacing:-.035em;line-height:1.2}
.auth-subtitle{margin-top:.375rem;color:var(--muted-foreground);font-size:.9375rem;line-height:1.5}
.auth-form{display:flex;flex-direction:column;gap:1rem}
.auth-form .btn-block{margin-top:.375rem}
.auth-card .input-group,.auth-card .field>.input,.auth-card .field>.select{height:2.75rem;border-radius:.75rem}
.auth-card .input-group-addon:first-child{padding-left:.875rem;padding-right:.125rem}
.auth-card .btn-lg{height:2.75rem;border-radius:.75rem}
.auth-card .btn-block svg{transition:transform .15s var(--ease-out)}
.auth-card .btn-block:hover svg{transform:translateX(2px)}
.auth-foot{margin-top:1.25rem;color:var(--muted-foreground);font-size:.875rem;text-align:center}
.auth-foot a{color:var(--foreground);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in oklab,var(--foreground) 30%,transparent)}
.auth-foot a:hover{text-decoration-color:currentColor}
.auth-legal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .25rem;margin-top:1rem;color:var(--muted-foreground);font-size:.75rem;line-height:1.5;text-align:center}
.auth-legal a{text-decoration:underline;text-underline-offset:3px}
.auth-legal svg{width:.8125rem;height:.8125rem;margin-right:.125rem}
.auth-legal:not(:has(svg)){display:block}

.auth-card .otp-boxes,.auth-card .otp-box{max-width:none}

/* 2FA del personal */
.qr-box{display:grid;place-items:center;width:11rem;height:11rem;margin:0 auto;padding:.75rem;border-radius:var(--radius-lg);background:#fff;box-shadow:0 0 0 1px var(--border)}
.qr-box svg,.qr-box img{width:100%;height:100%}
.recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:1rem;border-radius:var(--radius-lg);background:var(--muted-50);box-shadow:inset 0 0 0 1px var(--border);font-family:var(--font-mono);font-size:.875rem;text-align:center}

/* Pantallas bajas: todo sigue cabiendo sin desplazarse */
@media (min-width:1024px) and (max-height:800px){
  .auth-story h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
  .auth-live{margin-top:1.5rem;padding:1rem}
  .auth-spark{display:none}
  .auth-live-list li:nth-child(3){display:none}
}
@media (max-height:700px){
  .auth-live{display:none}
  .auth-stage{padding-block:.75rem}
  .auth-head{margin-bottom:1.125rem}
  .auth-form{gap:.75rem}
  .auth-foot{margin-top:1rem}
  .auth-legal{margin-top:.75rem}
}
@media (max-width:479.98px){
  .auth-card{padding:1.375rem 1.25rem;border-radius:1rem}
  .auth-icon{width:2.5rem;height:2.5rem}
  .auth-title{font-size:1.375rem}
}