*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--rojo:#e30613;
--rojo2:#ff3045;

--glass:
rgba(8,12,20,.50);

--texto:#ffffff;

--gris:#cfd6e2;

}

html,
body{

width:100%;
height:100%;

font-family:
'Segoe UI',
sans-serif;

overflow:hidden;

}

.login-container{

width:100%;
height:100vh;

display:flex;

justify-content:flex-end;

align-items:flex-start;

padding-top:45px;

padding-right:220px;

background:
linear-gradient(
rgba(0,0,0,.12),
rgba(0,0,0,.25)
),
url('../img/bg-login.webp');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

}

.login-panel{

width:420px;

padding:40px;

background:
var(--glass);

backdrop-filter:
blur(30px);

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

border-radius:35px;

box-shadow:
0 0 80px rgba(227,6,19,.18),
0 0 150px rgba(0,0,0,.55);

position:relative;

overflow:hidden;

}

.login-panel::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:3px;

background:
linear-gradient(
90deg,
var(--rojo),
var(--rojo2)
);

}

.logo-text{

font-size:42px;

font-weight:900;

font-style:italic;

letter-spacing:-1px;

line-height:1;

color:var(--rojo2);

text-shadow:
0 0 25px rgba(255,48,69,.45);

margin-bottom:18px;

}

.system-title{

font-size:22px;

font-weight:800;

color:white;

margin-bottom:5px;

}

.system-subtitle{

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

color:var(--gris);

margin-bottom:35px;

}

.input-box{

position:relative;

margin-bottom:20px;

}

.input-box i{

position:absolute;

left:20px;

top:22px;

font-size:18px;

color:#aab2c0;

z-index:2;

}

.input-box input{

width:100%;

height:62px;

padding-left:60px;

border-radius:18px;

background:
rgba(255,255,255,.04);

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

backdrop-filter:
blur(10px);

box-shadow:
inset 0 0 20px rgba(255,255,255,.03);

outline:none;

font-size:16px;

color:white;

transition:.3s;

}

.input-box input::placeholder{

color:#aab2c0;

}

.input-box input:focus{

border-color:
rgba(255,48,69,.45);

box-shadow:
0 0 20px rgba(255,48,69,.20);

}

.remember-box{

margin-top:5px;
margin-bottom:25px;

font-size:14px;

color:#d7deea;

}

.remember-box label{

display:flex;

align-items:center;

gap:10px;

}

.remember-box input{

width:18px;
height:18px;

accent-color:
var(--rojo2);

}

.btn-login{

width:100%;

height:70px;

border:none;

border-radius:18px;

cursor:pointer;

font-size:20px;

font-weight:800;

letter-spacing:1px;

color:white;

background:
linear-gradient(
135deg,
var(--rojo),
var(--rojo2)
);

transition:.3s;

}

.btn-login:hover{

transform:
translateY(-2px);

box-shadow:
0 0 25px rgba(255,48,69,.50),
0 0 50px rgba(255,48,69,.30);

}

.forgot-link{

margin-top:25px;

text-align:center;

font-size:14px;

color:#cfd6e2;

transition:.3s;

cursor:pointer;

}

.forgot-link:hover{

color:white;

}

@media(max-width:1200px){

.login-container{

padding-right:100px;

}

}

@media(max-width:992px){

.login-container{

justify-content:center;

padding-right:20px;
padding-left:20px;

}

.login-panel{

width:100%;
max-width:500px;

}

}

@media(max-width:576px){

.login-panel{

padding:30px;

}

.logo-text{

font-size:36px;

}

.system-title{

font-size:20px;

}

.input-box input{

height:58px;

}

.btn-login{

height:60px;

font-size:18px;

}

}