:root{
  --blue:#2d8ee8;
  --blue-dark:#1f7fd6;
  --celeste:#43a7f6;
  --navy:#1c2546;
  --navy-2:#13203f;
  --ink:#2a2f37;
  --muted:#8b929d;
  --line:#e3e7ee;
  --field:#f3f6fa;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',Arial,sans-serif;color:var(--ink);
  min-height:100vh;background:#eef2f7;
}
a{text-decoration:none;color:inherit}

/* ===== Split a pantalla completa ===== */
.auth-card{
  position:relative;
  width:100%;min-height:100vh;
  display:grid;grid-template-columns:1.1fr 1fr;
  background:#fff;overflow:hidden;
  animation:cardIn .8s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes cardIn{from{opacity:0;transform:scale(.992)}to{opacity:1;transform:none}}

/* Línea de gradiente fluyendo en el borde superior */
.auth-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,#2d8ee8,#43a7f6,#7c5cff,#43a7f6,#2d8ee8);
  background-size:220% 100%;
  animation:topFlow 3.5s linear infinite, lineIn .6s ease both;
}
@keyframes topFlow{to{background-position:220% 0}}
@keyframes lineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* Barrido de luz que cruza la tarjeta una vez al cargar */
.auth-card::after{
  content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;z-index:5;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-16deg);
  animation:cardShine 1.5s ease-in-out .55s both;
}
@keyframes cardShine{0%{left:-65%}100%{left:135%}}

/* ===== Brand panel ===== */
.auth-brand{
  position:relative;color:#fff;padding:46px 44px;
  display:flex;flex-direction:column;
  border-top:5px solid var(--celeste);border-bottom:5px solid var(--celeste);
  background:
    linear-gradient(150deg,rgba(28,37,70,.94),rgba(33,72,142,.86) 55%,rgba(45,142,232,.82)),
    url("../img/servers-bg.png") center/cover no-repeat;
}
.auth-brand::after{           /* textura de puntos sutil */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.2px);
  background-size:20px 20px;
}
.brand-logo{width:188px;margin-bottom:auto;position:relative;z-index:1}
.brand-logo img{width:100%;display:block}
.brand-copy{position:relative;z-index:1;margin-top:30px}
.brand-eyebrow{
  font-family:'Orbitron','Raleway',sans-serif;font-weight:700;letter-spacing:2.5px;
  font-size:12px;text-transform:uppercase;color:var(--celeste);margin-bottom:14px;
}
.brand-copy h1{
  font-family:'Rajdhani','Raleway',sans-serif;font-weight:700;font-size:36px;line-height:1.08;
  letter-spacing:.4px;margin-bottom:14px;
}
.brand-copy p{font-size:15px;line-height:1.6;color:#d8e3f3;max-width:340px;margin-bottom:26px}
.brand-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.brand-list li{display:flex;align-items:center;gap:13px;font-size:14.5px;color:#eaf2fd}
.brand-list i{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}

/* ===== Form panel ===== */
.auth-form{padding:52px;display:flex;flex-direction:column;justify-content:center}
.auth-form > *{width:100%;max-width:410px;margin-left:auto;margin-right:auto}
.form-head{margin-bottom:30px}
.form-head .kicker{font-family:'Orbitron','Raleway',sans-serif;font-weight:700;color:var(--blue);letter-spacing:1.5px;font-size:11.5px;text-transform:uppercase}
.form-head h2{font-family:'Rajdhani','Raleway',sans-serif;font-weight:700;font-size:31px;letter-spacing:.4px;color:var(--ink);margin:7px 0 6px}
.form-head p{color:var(--muted);font-size:14.5px}

.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:#4a5160;margin-bottom:8px}
.field-input{position:relative;display:flex;align-items:center}
.field-input>i{position:absolute;left:15px;color:#9aa2af;font-size:15px;pointer-events:none}
.field-input input{
  width:100%;height:50px;background:var(--field);
  border:1.6px solid transparent;border-radius:10px;
  padding:0 46px;font-family:inherit;font-size:15px;color:var(--ink);
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.field-input input::placeholder{color:#aab1bc}
.field-input input:focus{
  outline:none;background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(45,142,232,.14);
}
.toggle-pass{
  position:absolute;right:8px;width:34px;height:34px;border:none;background:none;
  color:#9aa2af;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:8px;transition:color .18s,background .18s;
}
.toggle-pass:hover{color:var(--blue);background:rgba(45,142,232,.08)}

.form-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 26px;font-size:13.5px}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;color:#4a5160;user-select:none}
.remember input{position:absolute;opacity:0;width:0;height:0}
.remember .box{
  width:19px;height:19px;border-radius:5px;border:1.8px solid #c4ccd6;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;
  transition:.18s;
}
.remember input:checked + .box{background:var(--blue);border-color:var(--blue)}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(45,142,232,.3)}
.forgot{color:var(--blue);font-weight:600}
.forgot:hover{text-decoration:underline}

.btn-login{
  width:100%;padding:16px 24px;line-height:1.2;
  border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#2f74d6);color:#fff;
  font-family:'Roboto';font-weight:700;font-size:15.5px;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 26px rgba(45,142,232,.36);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.btn-login i{font-size:15px;line-height:1}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(45,142,232,.46)}
.btn-login:active{transform:translateY(0)}
.btn-login:focus-visible{outline:3px solid rgba(45,142,232,.5);outline-offset:2px}

.form-note{
  margin-top:14px;min-height:20px;font-size:13.5px;text-align:center;
}
.form-note.error{color:#d83a3a}
.form-note.ok{color:#1f9d55}

.form-foot{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--muted);
}
.form-foot a{color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.form-foot a:hover{text-decoration:underline}

/* ===== Responsive ===== */
@media(max-width:820px){
  .auth-card{grid-template-columns:1fr;min-height:0}
  .auth-brand{padding:40px 30px 44px;border-bottom:none;border-top:5px solid var(--celeste)}
  .brand-logo{width:150px;margin-bottom:22px}
  .brand-copy{margin-top:0}
  .brand-copy h1{font-size:25px}
  .brand-list{display:none}
  .auth-form{padding:34px 28px}
}
@media(prefers-reduced-motion:reduce){
  .auth-card{animation:none}
  .btn-login:hover{transform:none}
}

/* ===== Botón en carga ===== */
.btn-login.is-loading{cursor:progress;filter:saturate(.9)}
.btn-login.is-loading i{animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ===== Sacudida en error ===== */
.shake{animation:authShake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes authShake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-9px)} 40%,60%{transform:translateX(9px)}
}

/* ============================================================
   Animación de acceso al panel
   ============================================================ */
.login-fx{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  background:radial-gradient(120% 120% at 50% 42%, #22336a 0%, #16224a 46%, #0a112b 100%);
  color:#fff;opacity:0;transition:opacity .35s ease;
  --fx:#43a7f6;
}
.login-fx.run{opacity:1}
.login-fx *{will-change:transform,opacity}

/* Aurora giratoria */
.fx-aurora{
  position:absolute;inset:-40%;pointer-events:none;opacity:0;filter:blur(22px);
  background:
    radial-gradient(closest-side,rgba(67,167,246,.55),transparent 70%) 30% 34%/60% 60% no-repeat,
    radial-gradient(closest-side,rgba(124,92,255,.42),transparent 70%) 72% 64%/55% 55% no-repeat,
    radial-gradient(closest-side,rgba(34,183,183,.32),transparent 70%) 56% 20%/48% 48% no-repeat;
}
.login-fx.run .fx-aurora{opacity:.9;animation:fxAurora 9s linear infinite}
@keyframes fxAurora{to{transform:rotate(360deg)}}

/* Rejilla tenue con degradado radial */
.fx-grid{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 68%);
          mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 68%);
}
.login-fx.run .fx-grid{opacity:1;animation:fxGrid .9s ease both}
@keyframes fxGrid{from{transform:scale(1.14)}to{transform:scale(1)}}

/* Ondas concéntricas */
.fx-rings{position:absolute;top:calc(50% - 62px);left:50%}
.fx-rings span{
  position:absolute;top:0;left:0;width:190px;height:190px;margin:-95px 0 0 -95px;
  border:2px solid rgba(120,190,255,.5);border-radius:50%;opacity:0;
}
.login-fx.run .fx-rings span{animation:fxRipple 2.4s ease-out infinite}
.login-fx.run .fx-rings span:nth-child(2){animation-delay:.55s}
.login-fx.run .fx-rings span:nth-child(3){animation-delay:1.1s}
@keyframes fxRipple{0%{transform:scale(.28);opacity:.7}80%{opacity:0}100%{transform:scale(2.5);opacity:0}}

/* Núcleo: anillo giratorio + logo */
.fx-core{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.fx-sweep{
  position:absolute;inset:0;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--fx) 92%,#fff 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
}
.login-fx.run .fx-sweep{opacity:1;animation:fxSpin 1.1s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-logo{
  width:106px;height:106px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transform:scale(0);opacity:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.16),rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.45);
}
.fx-logo img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.login-fx.run .fx-logo{animation:fxLogoIn .85s cubic-bezier(.2,1.45,.3,1) .15s both,fxGlow 2.2s ease-in-out 1s infinite}
@keyframes fxLogoIn{0%{transform:scale(0) rotate(-28deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes fxGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 30px rgba(67,167,246,.35),0 18px 50px rgba(0,0,0,.45)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 62px rgba(67,167,246,.7),0 18px 50px rgba(0,0,0,.45)}
}

/* Texto de bienvenida */
.fx-copy{position:relative;text-align:center}
.fx-hello{font-family:'Raleway',sans-serif;font-weight:600;letter-spacing:4px;text-transform:uppercase;font-size:13px;color:#9fc4f4;opacity:0}
.fx-name{font-family:'Raleway',sans-serif;font-weight:700;font-size:30px;line-height:1.1;margin-top:6px;opacity:0;text-shadow:0 4px 24px rgba(67,167,246,.35)}
.fx-sub{font-size:13.5px;color:#aeb9d6;margin-top:10px;opacity:0}
.login-fx.run .fx-hello{animation:fxUp .6s ease .7s both}
.login-fx.run .fx-name{animation:fxUp .6s ease .85s both}
.login-fx.run .fx-sub{animation:fxUp .6s ease 1s both}
@keyframes fxUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Barra de progreso */
.fx-bar{width:230px;max-width:62vw;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;opacity:0}
.fx-bar span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--fx),#7c5cff)}
.login-fx.run .fx-bar{opacity:1;transition:opacity .3s .55s}
.login-fx.run .fx-bar span{animation:fxBar 1.65s cubic-bezier(.4,.1,.2,1) .55s forwards}
@keyframes fxBar{to{width:100%}}

/* Destello final (warp hacia el panel) */
.fx-flash{
  position:absolute;top:calc(50% - 62px);left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;background:#fff;transform:scale(0);opacity:0;
}
.login-fx.warp .fx-flash{opacity:1;animation:fxFlash .55s cubic-bezier(.5,0,.9,.35) forwards}
@keyframes fxFlash{0%{transform:scale(0);opacity:.9}100%{transform:scale(70);opacity:1}}
.login-fx.warp .fx-core{transform:scale(1.35);opacity:0;transition:transform .5s ease,opacity .45s ease}
.login-fx.warp .fx-copy,.login-fx.warp .fx-bar,.login-fx.warp .fx-rings{opacity:0;transition:opacity .35s ease}

@media(prefers-reduced-motion:reduce){
  .login-fx *{animation:none!important;transition:none!important}
}

/* ============================================================
   Entrada espectacular del login (aparición de la pantalla)
   ============================================================ */
@keyframes authFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes authFadeLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}

/* Orbes de luz a la deriva detrás del panel de marca */
.auth-brand{overflow:hidden}
.auth-brand::before{
  content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;filter:blur(34px);opacity:.7;
  background:
    radial-gradient(closest-side,rgba(67,167,246,.55),transparent 70%) 18% 26%/48% 48% no-repeat,
    radial-gradient(closest-side,rgba(124,92,255,.38),transparent 70%) 82% 74%/44% 44% no-repeat,
    radial-gradient(closest-side,rgba(34,183,183,.30),transparent 70%) 60% 92%/40% 40% no-repeat;
  animation:orbDrift 13s ease-in-out infinite alternate;
}
@keyframes orbDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-5%,4%) scale(1.1)}}

/* Logo: reveal con rebote + flotación continua */
.brand-logo{animation:logoReveal 1s cubic-bezier(.2,1.3,.3,1) .15s both, logoFloat 5.5s ease-in-out 1.15s infinite}
@keyframes logoReveal{0%{opacity:0;transform:translateY(-14px) scale(.7) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Texto del panel de marca, escalonado */
.brand-eyebrow{animation:authFadeUp .7s ease .35s both}
.brand-copy h1{animation:authFadeUp .8s cubic-bezier(.2,.7,.2,1) .45s both}
.brand-copy p{animation:authFadeUp .7s ease .6s both}

/* Lista de características: entran desde la izquierda, una tras otra */
.brand-list li{animation:authFadeLeft .6s cubic-bezier(.2,.7,.2,1) both}
.brand-list li:nth-child(1){animation-delay:.72s}
.brand-list li:nth-child(2){animation-delay:.82s}
.brand-list li:nth-child(3){animation-delay:.92s}
.brand-list li:nth-child(4){animation-delay:1.02s}
.brand-list i{transition:transform .2s,background .2s}
.brand-list li:hover i{transform:scale(1.12) rotate(-6deg);background:rgba(255,255,255,.22)}

/* Formulario: encabezado, campos, opciones y botón escalonados */
.form-head .kicker{display:inline-block;animation:authFadeUp .6s ease .5s both}
.form-head h2{animation:authFadeUp .6s ease .58s both}
.form-head p{animation:authFadeUp .6s ease .66s both}
.auth-form .field:nth-of-type(1){animation:authFadeUp .6s ease .74s both}
.auth-form .field:nth-of-type(2){animation:authFadeUp .6s ease .82s both}
.auth-form .form-row{animation:authFadeUp .6s ease .9s both}
.btn-login{animation:authFadeUp .6s ease .98s backwards, btnGlow 2.8s ease-in-out 1.9s infinite}
.form-note{animation:authFadeUp .6s ease 1.06s both}
.form-foot{animation:authFadeUp .6s ease 1.14s both}
@keyframes btnGlow{
  0%,100%{box-shadow:0 12px 26px rgba(45,142,232,.36)}
  50%{box-shadow:0 14px 34px rgba(45,142,232,.6),0 0 0 4px rgba(45,142,232,.12)}
}

/* Respeta "menos movimiento": todo aparece sin animación */
@media(prefers-reduced-motion:reduce){
  .auth-card,.auth-card::before,.auth-card::after,.auth-brand::before,
  .brand-logo,.brand-eyebrow,.brand-copy h1,.brand-copy p,.brand-list li,
  .form-head .kicker,.form-head h2,.form-head p,
  .auth-form .field,.auth-form .form-row,.btn-login,.form-note,.form-foot{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}