/* =========================================================================
   ASTRA — pantalla de acceso
   Fondo cósmico generado con CSS y SVG: sin imágenes que descargar.
   ========================================================================= */

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;color:#EAF0FB;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:#05060F;overflow-x:hidden;
}

/* ---------- Escena de fondo ---------- */
.sky{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;}

/* Nebulosas */
.sky::before,.sky::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);}
.sky::before{
  width:70vmax;height:70vmax;right:-24vmax;top:-30vmax;
  background:radial-gradient(circle,rgba(139,92,246,.30),transparent 68%);
}
.sky::after{
  width:62vmax;height:62vmax;left:-26vmax;bottom:-30vmax;
  background:radial-gradient(circle,rgba(59,130,246,.26),transparent 68%);
}

/* Planetas: un disco oscuro con un borde iluminado */
.planet{position:absolute;border-radius:50%;background:#05060F;}
.planet.p1{
  width:46vmax;height:46vmax;right:-19vmax;top:-21vmax;
  box-shadow:inset 6px 10px 0 -3px rgba(167,139,250,.85), 0 0 90px rgba(139,92,246,.30);
}
.planet.p2{
  width:40vmax;height:40vmax;left:-19vmax;bottom:-17vmax;
  box-shadow:inset -6px -8px 0 -3px rgba(96,165,250,.80), 0 0 90px rgba(59,130,246,.26);
}
/* Destello sobre el borde del planeta */
.flare{position:absolute;width:170px;height:170px;border-radius:50%;filter:blur(34px);}
.flare.f1{right:14vmax;top:9vmax;background:rgba(196,181,253,.55);}
.flare.f2{left:7vmax;bottom:14vmax;background:rgba(147,197,253,.45);}

/* Trama de puntos */
.dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(148,163,220,.22) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 45%,transparent 42%,#000 88%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 45%,transparent 42%,#000 88%);
  opacity:.5;
}

/* Estrellas */
.stars{position:absolute;inset:0;}
.stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#DCE6FF;
  opacity:.65;animation:tw 4s ease-in-out infinite;
}
@keyframes tw{0%,100%{opacity:.18;transform:scale(.8);}50%{opacity:.9;transform:scale(1);}}

/* ---------- Tarjeta ---------- */
.wrap{
  position:relative;z-index:1;min-height:100dvh;min-height:100vh;
  display:grid;place-items:center;padding:24px 20px;
}
.card{
  width:100%;max-width:420px;padding:38px 40px 32px;border-radius:24px;
  background:rgba(17,22,44,.55);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}

.logo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px;}
.logo .glyph{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,#4F7DF6,#8B5CF6);
  box-shadow:0 10px 30px rgba(99,102,241,.5);
}
.logo .glyph svg{width:28px;height:28px;fill:#fff;}
.logo b{font-size:19px;font-weight:700;letter-spacing:.32em;text-indent:.32em;}
.logo .rule{
  width:132px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(147,178,255,.75),transparent);
}

h1{
  margin:0 0 6px;text-align:center;font-size:25px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(90deg,#8FB6FF,#C4A8FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin:0 0 26px;text-align:center;font-size:14px;color:#A8B6D4;}

/* ---------- Campos ---------- */
.field{position:relative;margin-bottom:14px;}
.field .ico{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:#8FA3C8;stroke-width:1.7;fill:none;pointer-events:none;transition:stroke .16s;
}
.field input{
  width:100%;height:56px;padding:0 16px 0 48px;
  background:rgba(10,14,30,.62);border:1px solid rgba(255,255,255,.10);border-radius:14px;
  color:#EAF0FB;font-family:inherit;font-size:15px;outline:none;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.field input::placeholder{color:#7F8DAD;}
.field input:focus{
  border-color:rgba(129,140,248,.75);background:rgba(12,17,38,.8);
  box-shadow:0 0 0 4px rgba(99,102,241,.16);
}
.field input:focus ~ .ico{stroke:#A5B4FC;}
.field input:-webkit-autofill{
  -webkit-text-fill-color:#EAF0FB;
  -webkit-box-shadow:0 0 0 1000px #0D1226 inset;
  caret-color:#EAF0FB;
}
.field .peek{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;
  background:none;cursor:pointer;color:#8FA3C8;
}
.field .peek:hover{color:#C7D2FE;background:rgba(255,255,255,.05);}
.field .peek svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;}

/* ---------- Fila de opciones ---------- */
.row{display:flex;align-items:center;gap:12px;margin:16px 0 22px;flex-wrap:wrap;}
.remember{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:#B9C6E2;user-select:none;}
.remember input{position:absolute;opacity:0;width:0;height:0;}
.remember .box{
  width:19px;height:19px;flex:none;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.22);background:rgba(10,14,30,.6);
  display:grid;place-items:center;transition:background .16s,border-color .16s;
}
.remember .box svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none;opacity:0;transition:opacity .12s;}
.remember input:checked + .box{background:linear-gradient(140deg,#4F7DF6,#8B5CF6);border-color:transparent;}
.remember input:checked + .box svg{opacity:1;}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(99,102,241,.35);}
.forgot{margin-left:auto;font-size:13px;color:#8AA6F0;text-decoration:none;}
.forgot:hover{color:#B4C6FF;text-decoration:underline;}

/* ---------- Botón ---------- */
.submit{
  width:100%;height:56px;border:0;border-radius:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:16px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,#4F8DF7,#8B5CF6,#A855F7);
  box-shadow:0 12px 34px rgba(88,101,242,.42);
  transition:filter .16s,transform .12s,box-shadow .16s;
}
.submit:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 16px 40px rgba(88,101,242,.5);}
.submit:active{transform:none;}
.submit svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none;}

.foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:24px;font-size:12.5px;color:#7C8AA8;text-align:center;
}
.foot svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;}

/* ---------- Avisos ---------- */
.msg{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;
  border-radius:12px;font-size:13px;line-height:1.5;
}
.msg svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;stroke-width:1.8;fill:none;}
.msg.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#FCA5A5;}
.msg.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#86EFAC;}
.msg.info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.28);color:#A5C8FF;}

.back{
  display:inline-flex;align-items:center;gap:7px;margin-top:22px;
  font-size:13.5px;color:#8AA6F0;text-decoration:none;
}
.back:hover{color:#B4C6FF;}
.back svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;}
.body-txt{font-size:13.5px;color:#A8B6D4;line-height:1.65;margin:0 0 14px;}
.body-txt strong{color:#D6E0F5;font-weight:600;}
.body-txt code{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:12.5px;
  background:rgba(255,255,255,.07);padding:2px 7px;border-radius:6px;color:#C7D2FE;
}

/* ---------- Móvil ---------- */
@media(max-width:560px){
  .wrap{padding:0;align-items:stretch;}
  .card{
    max-width:none;min-height:100dvh;min-height:100vh;
    border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.06);
    padding:calc(env(safe-area-inset-top) + 46px) 22px calc(env(safe-area-inset-bottom) + 32px);
    display:flex;flex-direction:column;justify-content:center;
    background:rgba(10,14,32,.72);
  }
  .logo{margin-bottom:22px;}
  .logo .glyph{width:56px;height:56px;}
  h1{font-size:23px;}
  .lede{margin-bottom:24px;}
  /* 16px evita que iOS haga zoom al enfocar un campo */
  .field input{height:54px;font-size:16px;}
  .submit{height:54px;}
  /* Área táctil cómoda sin cambiar el aspecto */
  .row{margin:10px 0 20px;}
  .remember{min-height:44px;}
  .forgot{display:inline-flex;align-items:center;min-height:44px;}
  .back{min-height:44px;}
  .planet.p1{width:76vmax;height:76vmax;right:-40vmax;top:-34vmax;}
  .planet.p2{width:66vmax;height:66vmax;left:-36vmax;bottom:-28vmax;}
  .dots{background-size:22px 22px;opacity:.32;}
}
@media(max-height:640px) and (min-width:561px){
  .card{padding:28px 34px 24px;}
  .logo{margin-bottom:18px;}
  .lede{margin-bottom:18px;}
}
@media(prefers-reduced-motion:reduce){.stars i{animation:none;opacity:.5;}}