/* =================================================================
   Archivo: estilos.css
   ================================================================= */

/* --- Fuentes --- */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');


/* --- Fondo --- */

.background-media{
position:fixed;
top:0;
left:0;
min-width:100%;
min-height:100%;
width:100%;
height:100%;
z-index:-100;
object-fit:cover;
}


/* --- Body --- */

body{
margin:0;
padding:0;
font-family:'Share Tech',sans-serif;
color:rgb(174,226,196);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:100vh;
}


/* ================================================================
   TITULO
   ================================================================ */

#logo h1{

font-size:2.8em;
letter-spacing:2px;
text-transform:uppercase;

color:#a6fff0;

text-shadow:
0 0 10px rgba(166,255,240,0.9),
0 0 25px rgba(0,0,0,0.8);

margin-bottom:35px;

}


/* ================================================================
   PANEL LOGIN - GLASS PREMIUM
   ================================================================ */

.stark-login{

background:rgba(255,255,255,0.08);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,0.25);

border-radius:18px;

padding:40px 50px;

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

box-shadow:
0 8px 32px rgba(0,0,0,0.6);

}


/* ================================================================
   FORM
   ================================================================ */

.stark-login form{
display:flex;
flex-direction:column;
}


/* ================================================================
   LABEL
   ================================================================ */

.stark-login label{
margin-bottom:6px;
font-size:0.9em;
color:#e9ffff;
}


/* ================================================================
   INPUTS
   ================================================================ */

.input-container{

position:relative;
margin-bottom:20px;

}

.input-container i{

position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:#3dd6c6;

}

.stark-login input{

width:100%;

padding:12px 40px;

border-radius:8px;

border:none;

outline:none;

background:rgba(255,255,255,0.9);

font-size:1em;

box-sizing:border-box;

transition:0.3s;

}

.stark-login input:focus{

box-shadow:0 0 10px rgba(62,255,210,0.7);

}


/* ================================================================
   VER CONTRASEÑA
   ================================================================ */

.toggle-password{

position:absolute;

right:12px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

color:#444;

}


/* ================================================================
   BOTON CON ANIMACION
   ================================================================ */

.stark-login button{

font-family:'Share Tech',sans-serif;
font-size:1.1rem;
text-transform:uppercase;
font-weight:bold;
letter-spacing:1px;

padding:12px 25px;

border-radius:30px;
border:none;

cursor:pointer;

background:linear-gradient(135deg,#0e7490,#06b6d4,#5eead4);

color:white;

box-shadow:0 0 15px rgba(94,234,212,0.7);

transition:all 0.3s ease;

/* CENTRAR BOTÓN */
display:block;
margin:20px auto 0 auto;
width:fit-content;

}

.stark-login button:hover{

transform:translateY(-3px) scale(1.03);

box-shadow:0 0 25px rgba(94,234,212,1);

}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media(max-width:480px){

#logo h1{
font-size:2em;
}

.stark-login{
width:90%;
padding:30px 25px;
}

}

/* Animación de entrada del login */

.stark-login{
animation: aparecer 1s ease;
}

@keyframes aparecer{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}