@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Inter',-apple-system,sans-serif;
  background:#f2f2f7;height:100vh;
  display:flex;justify-content:center;align-items:center;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:absolute;width:500px;height:500px;
  background:radial-gradient(circle,rgba(229,62,62,.16),transparent 70%);
  top:-150px;left:-150px;
  animation:glowMove 10s infinite alternate ease-in-out;z-index:0;
}
body::after{
  content:"";position:absolute;width:400px;height:400px;
  background:radial-gradient(circle,rgba(99,102,241,.1),transparent 70%);
  bottom:-100px;right:-100px;
  animation:glowMove 12s infinite alternate-reverse ease-in-out;z-index:0;
}
@keyframes glowMove{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}

/* PARTICULAS */
.particles{position:absolute;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;}
.particles span{
  position:absolute;width:5px;height:5px;
  background:rgba(229,62,62,.3);border-radius:50%;
  animation:moveP linear infinite;
}
@keyframes moveP{from{transform:translateY(100vh);opacity:0}50%{opacity:.8}to{transform:translateY(-10vh);opacity:0}}

/* CARD */
.login-box{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  padding:74px 32px 36px;
  width:320px;border-radius:24px;text-align:center;
  position:relative;z-index:1;
  box-shadow:0 24px 60px rgba(0,0,0,.1),inset 0 1px 1px rgba(255,255,255,.8);
  animation:floatCard 4s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* LOGO */
.logo-circle{
  width:80px;height:80px;background:#fff;border-radius:50%;
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  display:flex;justify-content:center;align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  animation:floatLogo 4s ease-in-out infinite;
}
.logo-circle img{width:60px;height:60px;object-fit:contain;}
@keyframes floatLogo{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-6px)}
}

/* TEXTOS */
#saludo{font-size:20px;font-weight:800;color:#111827;margin-bottom:4px;letter-spacing:-.3px;}
#nombreUsuario{
  margin:8px auto 18px;display:inline-block;
  padding:5px 16px;border-radius:20px;
  font-weight:700;color:#e53e3e;
  background:rgba(229,62,62,.08);
  font-size:13px;min-height:28px;min-width:60px;
}

/* INPUTS */
.input-group{width:100%;margin-bottom:12px;position:relative;}
.input-group input{
  width:100%;height:46px;padding:0 40px 0 14px;
  border-radius:12px;
  background:rgba(255,255,255,.7);
  border:1.5px solid rgba(229,231,235,.8);
  outline:none;font-size:13px;font-family:inherit;
  transition:all .25s ease;color:#111827;
}
.input-group input:focus{
  border-color:rgba(229,62,62,.5);
  box-shadow:0 0 0 3px rgba(229,62,62,.1);
  background:rgba(255,255,255,.95);
}
.input-group input.error{border-color:rgba(229,62,62,.7)!important;}
.input-group label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#9ca3af;font-size:12px;transition:.22s ease;pointer-events:none;
}
.input-group input:focus+label,
.input-group input:not(:placeholder-shown)+label{
  top:-8px;font-size:10px;color:#e53e3e;
  background:#fff;padding:0 5px;border-radius:5px;font-weight:600;
}
.input-group .eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:14px;cursor:pointer;transition:.2s;user-select:none;color:#9ca3af;
}
.input-group .eye:hover{color:#374151;transform:translateY(-50%) scale(1.15);}

/* BOTON */
button[type="submit"]{
  width:100%;height:44px;
  background:#111827;color:#fff;border:none;border-radius:12px;
  font-weight:700;cursor:pointer;margin-top:8px;
  transition:all .25s cubic-bezier(.34,1.2,.64,1);
  font-size:14px;font-family:inherit;letter-spacing:.1px;
}
button[type="submit"]:hover{background:#374151;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15);}
button[type="submit"]:active{transform:scale(.97);}
button[type="submit"]:disabled{opacity:.65;cursor:not-allowed;transform:none;}

/* ERROR */
.error-msg{
  display:none;background:#fef2f2;border:1px solid #fca5a5;
  border-radius:10px;padding:9px 13px;
  font-size:12px;color:#dc2626;font-weight:600;
  margin-bottom:12px;text-align:left;animation:shake .3s ease;
}
.error-msg.show{display:block;}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}

/* BIENVENIDA */
#welcomeScreen{
  display:none;position:fixed;inset:0;z-index:9999;
  background:#111827;flex-direction:column;justify-content:center;align-items:center;
}
#welcomeScreen.show{display:flex;}
.welcome-logo{
  width:90px;height:90px;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 50px rgba(229,62,62,.3);margin-bottom:32px;
  animation:wLogo .6s cubic-bezier(.34,1.56,.64,1) both;
}
.welcome-logo img{width:66px;height:66px;object-fit:contain;}
@keyframes wLogo{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.welcome-saludo{font-size:14px;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;animation:fadeUp .5s .3s both;}
.welcome-nombre{font-size:42px;font-weight:900;color:#fff;letter-spacing:-1.5px;animation:fadeUp .5s .5s both;}
.welcome-nombre .accent{color:#e53e3e;}
.welcome-cargo{margin-top:12px;padding:7px 20px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;animation:fadeUp .5s .7s both;}
.welcome-barra-wrap{margin-top:36px;width:200px;height:2px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;animation:fadeUp .5s .8s both;}
.welcome-barra{height:100%;background:#e53e3e;border-radius:99px;width:0%;transition:width 1.4s ease;}
.welcome-redirect{margin-top:16px;font-size:11px;color:rgba(255,255,255,.3);font-weight:500;letter-spacing:.5px;animation:fadeUp .5s .9s both;}
@keyframes fadeUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* LOADER */
#loader{position:fixed;inset:0;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:none;justify-content:center;align-items:center;flex-direction:column;gap:14px;z-index:500;}
.spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top:3px solid #e53e3e;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ocultar controles nativos */
input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear{display:none;}
input[type="password"]::-webkit-password-toggle-button{display:none!important;}