/* =============================
   BLOQUE AISLADO LOGIN EVOFITPRO
   ============================= */

/* Fuerza box-sizing consistente dentro del login */
#login-box, #login-box * {
  box-sizing: border-box;
}

#login-box {
  background: var(--contrast-2);
  padding: 2.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0,0,0,0.4);
  width: 100%;
  max-width: 420px;            /* ancho total de la caja */
  text-align: center;
  margin: 0 auto;              /* centra horizontalmente */
  display: flex;
  flex-direction: column;
  align-items: stretch;         /* hijos ocupan 100% */
}

/* -----------------------------
   Títulos
----------------------------- */
#login-box .title{
  font-size:1.6rem;
  color:var(--base-2);
  margin-bottom:.3rem;
}
#login-box .subtitle{
  color:var(--base);
  font-size:.9rem;
  margin-bottom:1.8rem;
}

/* -----------------------------
   Formulario (mismo ancho que la caja)
----------------------------- */
#login-box .login-form{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;          /* inputs y botón = 100% */
  gap:1rem;
  margin:0;                     /* sin márgenes que desplacen */
}

#login-box .form-group{
  width:100%;
  text-align:left;
  margin:0;
}

#login-box label{
  display:block;
  font-size:.85rem;
  color:var(--base);
  margin-bottom:.4rem;
}

#login-box input{
  display:block;
  width:100%;
  padding:.75rem;
  border-radius:6px;
  border:1px solid var(--contrast-4);
  background:transparent;
  color:var(--base-2);
  transition:border-color .3s ease, box-shadow .3s ease;
}

#login-box input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 5px var(--accent);
}

/* -----------------------------
   Botón principal (mismo ancho exacto)
----------------------------- */
#login-box .btn-primary{
  display:block;
  width:100%;                   /* rellena todo el ancho disponible */
  padding:.9rem;
  border-radius:6px;
  border:1px solid transparent; /* mantiene la alineación visual con inputs */
  background:var(--accent);
  color:var(--base-2);
  font-weight:600;
  cursor:pointer;
  transition:background .3s ease, transform .2s ease;
}

#login-box .btn-primary:hover{
  background:#ff8a26;
  transform:translateY(-1px);
}

/* -----------------------------
   Enlaces inferiores
----------------------------- */
#login-box .login-links{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:1rem;
  width:100%;                   /* mismos bordes que el botón */
}

#login-box .login-links a{
  font-size:.85rem;
  text-decoration:none !important;
  transition:color .3s ease;
}

#login-box .login-links a:link,
#login-box .login-links a:visited{
  color:var(--contrast-4);
  text-decoration:none !important;
}

#login-box .login-links a:hover,
#login-box .login-links a:focus{
  color:var(--accent);
  text-decoration:none !important;
}

#login-box .login-links a:active{
  color:var(--accent);
}

/* -----------------------------
   Responsive
----------------------------- */
@media (max-width:480px){
  #login-box{ padding:2rem 1.5rem; }
  #login-box .login-links{
    flex-direction:column;
    gap:.5rem;
    text-align:center;
  }
}