/* Login — tarjeta centrada sobre fondo premium trabajado (2026-07-09).
   Identidad: teal de marca (oklch 195) sobre navy profundo. Splash de un solo mundo
   (fondo oscuro deliberado); la tarjeta es clara para máximo contraste y aire premium. */
:root{
  --navy-1:#0a1a2b; --navy-2:#0c2334; --navy-3:#0e2b40;
  --teal:oklch(62% 0.18 195); --teal-hi:oklch(72% 0.15 195); --teal-lo:oklch(52% 0.18 195);
  --teal-glow:oklch(62% 0.18 195 / .26);
  --card:#ffffff; --ink:#0d1e2e; --muted:#6f8aa6; --line:#e6eef6; --field:#f4f7fb;
  --ring:oklch(62% 0.18 195 / .38);
  --err:oklch(60% 0.2 25);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* PWA en el celular: que NO se mueva de lado ni haga pinch-zoom (se sentía como web).
   `touch-action:pan-y` permite el scroll vertical (si la tarjeta no entra) pero bloquea el
   pan lateral y el pinch; el viewport (user-scalable=no) remata el zoom. Igual que la app. */
html{overscroll-behavior:none; touch-action:pan-y;}

body{
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100dvh; display:grid; place-items:center;
  padding:max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
          max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color:var(--ink); position:relative; overflow-x:hidden;
  overscroll-behavior:none; touch-action:pan-y;
  background:
    radial-gradient(60% 55% at 18% 12%, var(--teal-glow), transparent 60%),
    radial-gradient(55% 50% at 88% 88%, oklch(62% 0.18 195 / .16), transparent 55%),
    linear-gradient(150deg, var(--navy-1), var(--navy-2) 55%, var(--navy-3));
}
/* patrón sutil de puntos, desvanecido hacia los bordes.
   `position:fixed` (no absolute): los decorativos NO cuentan para el alto desplazable, así el
   login no «baja y sube» con el gesto de arrastrar (el halo de 520px generaba scroll). */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 40%, #000 40%, transparent 78%);
          mask-image:radial-gradient(120% 120% at 50% 40%, #000 40%, transparent 78%);
}
/* halo detrás de la tarjeta (fijo y centrado, no crea overflow) */
body::after{
  content:""; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:520px; height:520px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, var(--teal-glow), transparent 62%);
  filter:blur(14px); pointer-events:none;
}

/* El contenedor ocupa TODO el ancho disponible y centra la tarjeta. Sin esto, el
   grid del body dimensionaba .stage al max-content de la tarjeta (404px) y en pantallas
   angostas la centraba recortando ambos lados. */
.stage{ width:100%; max-width:100%; display:flex; justify-content:center; }

.card{
  position:relative; z-index:1; width:100%; max-width:404px; background:var(--card);
  border:1px solid rgba(255,255,255,.6); border-radius:20px; padding:38px 36px 30px;
  box-shadow:0 30px 70px -30px rgba(3,18,32,.65), 0 2px 0 rgba(255,255,255,.6) inset;
}
.brand{display:flex; align-items:center; gap:11px; margin-bottom:26px}
.mark{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg, var(--teal-hi), var(--teal-lo));
  box-shadow:0 8px 18px -6px var(--teal-glow);
}
.mark svg{width:23px;height:23px}
.wordmark{font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1}
.wordmark small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-top:3px}

.head{margin-bottom:22px}
.head h1{font-size:23px; font-weight:800; letter-spacing:-.02em; text-wrap:balance}
.head p{font-size:13.5px; color:var(--muted); margin-top:5px}

.server-error{
  background:oklch(60% 0.2 25 / .08); border:1px solid oklch(60% 0.2 25 / .25);
  color:var(--err); padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px;
}

.field{position:relative; margin-bottom:14px}
.field input{
  width:100%; padding:19px 14px 8px; border:1.5px solid var(--line); border-radius:12px;
  font:inherit; font-size:14px; background:var(--field); color:var(--ink); outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.field input:focus{border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px var(--ring)}
.field label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--muted); pointer-events:none; transition:all .15s;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label{
  top:11px; transform:none; font-size:9.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-lo);
}

.btn{
  width:100%; padding:14px; border:none; border-radius:12px; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700; color:#fff; letter-spacing:.01em; margin-top:6px;
  background:linear-gradient(180deg, var(--teal), var(--teal-lo));
  box-shadow:0 12px 24px -10px var(--teal-glow); transition:filter .15s, transform .05s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.foot{text-align:center; font-size:11.5px; color:var(--muted); margin-top:20px}
/* Enlaces secundarios (¿olvidaste tu contraseña? / volver al login) */
.alt-link{text-align:center; margin-top:14px; font-size:13px}
.alt-link a{color:var(--teal); text-decoration:none; font-weight:600}
.alt-link a:hover{text-decoration:underline}
.auth-msg{font-size:13.5px; color:var(--ink); line-height:1.55; margin-bottom:8px}

@media (max-width:440px){
  body{padding:16px}
  .card{padding:30px 22px 24px; border-radius:18px}
  .head h1{font-size:21px}
  .field input{font-size:16px}   /* evita el zoom automático de iOS al enfocar */
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }