:root{

--bg1:#07111f;
--bg2:#0b1830;
--card:rgba(17,28,48,.82);
--border:rgba(255,255,255,.08);
--text:#ffffff;
--muted:#a8b8d0;

--primary:#0066ff;
--primary2:#00b3ff;

--success:#22c55e;

--danger:#ff4d4f;

--shadow:
0 20px 60px rgba(0,0,0,.45);

--radius:24px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:
"Poppins",
sans-serif;

min-height:100vh;

background:
radial-gradient(
circle at top,
#183b73 0%,
#07111f 45%
);

overflow-x:hidden;

color:var(--text);

display:flex;

justify-content:center;

align-items:center;

padding:40px;

position:relative;

}

/*========================*/

.background{

position:fixed;

inset:0;

overflow:hidden;

z-index:-2;

}

.glow{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.35;

animation:float 10s ease-in-out infinite;

}

.glow1{

width:320px;

height:320px;

background:#0066ff;

left:-80px;

top:-80px;

}

.glow2{

width:280px;

height:280px;

background:#00b3ff;

right:-60px;

bottom:-60px;

animation-delay:2s;

}

.glow3{

width:240px;

height:240px;

background:#00ffaa;

left:45%;

top:60%;

animation-delay:4s;

}

@keyframes float{

0%{

transform:
translateY(0px)
translateX(0px);

}

50%{

transform:
translateY(-30px)
translateX(20px);

}

100%{

transform:
translateY(0px)
translateX(0px);

}

}

/*========================*/

.loginContainer{

width:100%;

max-width:470px;

display:flex;

flex-direction:column;

align-items:center;

}

/*========================*/

.loginCard{

width:100%;

background:var(--card);

backdrop-filter:blur(20px);

border:1px solid var(--border);

border-radius:var(--radius);

padding:45px;

box-shadow:var(--shadow);

animation:fade .7s ease;

}

@keyframes fade{

from{

opacity:0;

transform:
translateY(25px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/*========================*/

.logo{

width:120px;

display:block;

margin:auto;

margin-bottom:18px;

filter:

drop-shadow(
0 0 18px
rgba(0,179,255,.35)
);

transition:.35s;

}

.logo:hover{

transform:scale(1.06);

}

/*========================*/

h1{

text-align:center;

font-size:34px;

font-weight:800;

margin-bottom:5px;

}

.subtitulo{

text-align:center;

color:#7dd3fc;

font-size:18px;

margin-bottom:30px;

}

/*========================*/

.mensaje{

background:

rgba(255,255,255,.05);

padding:18px;

border-radius:16px;

margin-bottom:25px;

border:

1px solid rgba(255,255,255,.05);

}

.mensaje p{

font-size:14px;

color:var(--muted);

text-align:center;

line-height:1.6;

}

/*========================*/

.inputGroup{

margin-bottom:18px;

}

.inputGroup label{

display:block;

margin-bottom:8px;

font-size:15px;

font-weight:600;

}

.inputGroup input{

width:100%;

padding:15px;

border-radius:14px;

border:

1px solid rgba(255,255,255,.08);

background:#081220;

color:#fff;

font-size:15px;

outline:none;

transition:.25s;

}

.inputGroup input:focus{

border-color:#00b3ff;

box-shadow:

0 0 18px
rgba(0,179,255,.25);

}

/*========================*/

button{

width:100%;

padding:16px;

border:none;

border-radius:16px;

cursor:pointer;

font-size:16px;

font-weight:700;

transition:.25s;

margin-top:12px;

}

/*========================*/

.btnLogin{

background:

linear-gradient(
180deg,
#0084ff,
#0052ff
);

color:#fff;

}

.btnLogin:hover{

transform:translateY(-2px);

box-shadow:

0 15px 35px

rgba(0,102,255,.35);

}

/*========================*/

.btnRegister{

background:

linear-gradient(
180deg,
#14b8a6,
#0f766e
);

color:#fff;

}

.btnRegister:hover{

transform:translateY(-2px);

}

/*========================*/

.btnGoogle{

background:#fff;

color:#333;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

}

.btnGoogle:hover{

background:#f5f5f5;

}

.googleIcon{

width:24px;

}

/*========================*/

.btnHelp{

background:

linear-gradient(
180deg,
#22c55e,
#15803d
);

color:#fff;

}

.btnHelp:hover{

transform:translateY(-2px);

}

/*========================*/

.btnReset{

background:none;

margin-top:16px;

color:#8ec9ff;

font-size:15px;

}

.btnReset:hover{

text-decoration:underline;

}

/*========================*/

.separador{

display:flex;

align-items:center;

margin:25px 0;

}

.separador::before,

.separador::after{

content:"";

flex:1;

height:1px;

background:

rgba(255,255,255,.08);

}

.separador span{

padding:0 15px;

color:var(--muted);

}

/*========================*/

footer{

margin-top:30px;

text-align:center;

font-size:13px;

color:var(--muted);

line-height:2;

}

footer a{

color:#8ec9ff;

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}

/*========================*/
/* MODAL */
/*========================*/

.modal{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:

rgba(0,0,0,.7);

backdrop-filter:blur(6px);

z-index:999;

}

.modalCard{

width:92%;

max-width:430px;

background:#111c30;

padding:35px;

border-radius:24px;

border:

1px solid rgba(255,255,255,.08);

animation:fade .3s ease;

}

.modalCard h2{

text-align:center;

margin-bottom:10px;

}

.modalCard p{

text-align:center;

margin-bottom:22px;

color:var(--muted);

}

.modalCard input{

width:100%;

padding:15px;

border:none;

border-radius:14px;

background:#081220;

color:#fff;

font-size:16px;

outline:none;

margin-bottom:20px;

}

.btnGuardarNombre{

background:

linear-gradient(
180deg,
#0084ff,
#0052ff
);

color:#fff;

}

/*========================*/

@media(max-width:600px){

body{

padding:20px;

}

.loginCard{

padding:28px;

}

.logo{

width:90px;

}

h1{

font-size:27px;

}

.subtitulo{

font-size:16px;

}

button{

font-size:15px;

padding:14px;

}

}