/* ================================
AUTH WRAPPER
================================ */

.auth-wrapper{

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:20px;

background:#F1F5F9;

}

/* ================================
CARD LOGIN
================================ */

.auth-card{

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

padding:40px 30px;

border-radius:20px;

}

/* HEADER */

.auth-header{

background:linear-gradient(135deg,#1F6FE5,#114ABF);

color:white;

padding:20px;

border-radius:14px;

margin-bottom:25px;

text-align:center;

}

.auth-header h2{

margin:0;
font-size:1.4rem;

}

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

.auth-logo{
  display:flex;
  justify-content:center;
  margin-bottom:15px;
}

.auth-logo img{
  width:150px; /* ajusta tamaño */
  height:auto;
}

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

.auth-form{

display:flex;
flex-direction:column;

gap:10px;

}

.auth-error{
  display:none;
  background:#fee2e2;
  color:#b91c1c;
  padding:10px;
  border-radius:8px;
  font-size:14px;
  margin-top:10px;
  text-align:center;
}

/* ================================
INPUT GROUP (ICON + INPUT)
================================ */

.input-group{

position:relative;

display:flex;
align-items:center;

}

.input-group i{

position:absolute;

left:12px;

color:#6B7280;

font-size:14px;

}

/* INPUT */

.input-group input{

width:100%;

padding:12px 12px 12px 36px;

border-radius:10px;

font-size:14px;

background:white;

transition:.2s;

}

/* INPUT FOCUS */

.input-group input:focus{

outline:none;

border-color:#1F6FE5;

box-shadow:0 0 0 2px rgba(31,111,229,.15);

}

/* ================================
BUTTONS
================================ */

.auth-btn{

margin-top:10px;

width:100%;

display:flex;

align-items:center;
justify-content:center;

gap:8px;

}

/* ================================
LINKS
================================ */

.auth-links{

margin-top:20px;

display:flex;
flex-direction:column;

gap:10px;

text-align:center;

font-size:14px;

}

.auth-links a{

color:#1F6FE5;

cursor:pointer;

}

.auth-links a:hover{

text-decoration:underline;

}

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

@media(max-width:500px){

.auth-card{

padding:30px 20px;

}

}