/* =================================
GYM CONTROL+
ESTILO GLOBAL
================================= */

html, body{
height:100%;
}

body{

display:flex;
flex-direction:column;

background: radial-gradient(
circle at 20% 20%,
#0f172a 0%,
#020617 40%,
#01030a 100%
);

color:#e5e7eb;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

margin:0;
padding:0;

}

/* =================================
CONTENEDOR PRINCIPAL
================================= */

.container{

flex:1;

max-width:1200px;

margin:auto;

padding:30px;

width:100%;

}

/* =================================
FONDO LOGO TRIBAL LOGIN
================================= */

body::before{

content:"";

position:fixed;

top:50%;
left:50%;

width:900px;
height:900px;

transform:translate(-50%,-50%);

background-image:url("../img/logo-bg.png");

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

opacity:0.04;

pointer-events:none;

}

/* =================================
LOGIN WRAPPER
================================= */

.login-wrapper{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

min-height:100vh;

text-align:center;

padding:20px;

position:relative;
z-index:2;

}

/* =================================
LOGO LOGIN
================================= */

.login-logo{

width:300px;

max-width:90%;

margin-bottom:35px;

filter:brightness(0.9);

animation:logoFloat 6s ease-in-out infinite;

filter: drop-shadow(0 0 12px rgba(51,65,85,0.5));

}

@keyframes logoFloat{

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

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

/* =================================
CAJA LOGIN
================================= */

.login-box{

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

background:#0f172a;

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

border-radius:16px;

padding:40px;

text-align:center;

box-shadow:0 30px 80px rgba(0,0,0,0.9);

animation:fadeLogin .6s ease;

}

@keyframes fadeLogin{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

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

.login-title{

font-size:18px;

font-weight:600;

margin-bottom:10px;

letter-spacing:1px;

color:#ffffff;

}

.login-subtitle{

font-size:13px;

color:#64748b;

margin-bottom:25px;

}

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

input{

width:100%;

padding:13px;

margin-bottom:15px;

border:none;

border-radius:8px;

background:#1f2937;

color:#ffffff;

font-size:14px;

box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);

}

input:focus{

outline:none;

box-shadow:0 0 0 1px #334155;

}

/* =================================
BOTON LOGIN
================================= */

button{

display:block;

margin:15px auto 0 auto;

width:220px;

padding:12px;

border:none;

border-radius:8px;

background:#334155;

color:#ffffff;

font-size:14px;

cursor:pointer;

transition:all .25s ease;

}

button:hover{

background:#475569;

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,0.4);

}

/* =================================
MENSAJE ERROR
================================= */

.error{

color:#f87171;

margin-top:10px;

font-size:13px;

}

/* =================================
FOOTER PROFESIONAL
================================= */

.footer{

width:100%;

padding:50px 20px;

margin-top:60px;

border-top:1px solid #1f2937;

background:transparent;

display:flex;

justify-content:center;

}

.footer-container{

text-align:center;

max-width:500px;

}

.footer-logo{

font-size:16px;

font-weight:600;

letter-spacing:1px;

color:#ffffff;

margin-bottom:6px;

}

.footer-subtitle{

font-size:13px;

color:#94a3b8;

margin-bottom:18px;

}

.footer-divider{

width:60px;

height:1px;

background:#334155;

margin:0 auto 18px auto;

}

.footer-copy{

font-size:12px;

color:#64748b;

}

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

@media(max-width:768px){

.login-logo{
width:200px;
}

.login-box{
padding:30px;
}

button{
width:100%;
}

body::before{

width:600px;
height:600px;

}

}