/* =========================================================
   LOGIN FASE 4 (COMÚN) —
   Base: portátil 1366×768
   Scope: body.body-login
   ========================================================= */

/* ---------- Reset mínimo (seguro) ---------- */
body.body-login,
body.body-login * ,
body.body-login *::before,
body.body-login *::after{
  box-sizing: border-box;
}

/* ---------- Body ---------- */
body.body-login{
  margin: 0;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #123;
  overflow-x: hidden;
}

/* ---------- Wrapper (BASE portátil) ---------- */
body.body-login .login-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: flex-start; /* BASE portátil: arriba */
  min-height: 100dvh;

  padding: 10px 12px;
  gap: 10px;
}

/* ---------- Caja login (BASE portátil) ---------- */
body.body-login .login-box{
  width: 100%;
  max-width: 480px;
  margin: 0;

  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(6,24,44,.12), 0 2px 6px rgba(6,24,44,.10);

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 12px 18px 26px 18px; /* aire abajo controlado */
}

body.body-login .login-box.login-box--general{
  margin-top: 12px;
}

/* ---------- Header row (si existe) ---------- */
body.body-login .login-header-row{
  width: 100%;
  max-width: 422px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* =========================
Logos
========================= */
/* Contenedor base de logos dentro de login (vertical + centrado) */
body.body-login .login-box .brand{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

/* Imagen base de logo (neutral; themes pueden sobreescribir) */
body.body-login .login-box .brand__logo{
  display: block;
  height: 50px;      /* base portátil: evita comer altura */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Texto bajo logo (si existe) */
body.body-login .login-box .brand label{
  width: 100%;
  max-width: 422px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
}

/* Modificadores opcionales (si tú los defines en TPL) */
body.body-login .login-box .brand--allx .brand__logo{
  height: 50px;
  width: auto;
}

body.body-login .login-box .brand--allura .brand__logo{
  height: 34px;      /* más compacto, sin perder presencia */
  width: auto;
}

/* LOGIN GENERAL */
/* Logo superior – LOGIN GENERAL (logo_sup_login) */
body.body-login .login-box .brand.logo_sup_login{
  width: 100%;               /* necesario para que “izquierda” tenga efecto */
  align-items: flex-start;   /* alinea logo + texto a la izquierda */
  margin-top: 10px;           
}

body.body-login .login-box .brand.logo_sup_login .brand__logo{
  height: 56px;
  width: auto;
}

/* (opcional pero recomendado) coherencia del texto bajo el logo */
body.body-login .login-box .brand.logo_sup_login label{
  text-align: left;
}

/*FIN LOGOS*/

/* ---------- Separador HR  ---------- */
body.body-login .login-box .login-separator{
  display: block;
  width: 100%;
  max-width: 422px;
  align-self: center;

  height: 1px;
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.20);

  margin-top: 12px;
  margin-bottom: 0;
  padding: 0;
  opacity: 1;
}

/* ---------- Selector de idioma ---------- */
body.body-login .login-lang{
  width: 100%;
  max-width: 480px;          /* coherente con login general */
  margin: 0;

  display: flex;
  justify-content: flex-end; /* a la derecha */
  align-items: center;
  gap: 10px;

  white-space: nowrap;       /* SIEMPRE en una sola línea */
  text-align: right;
}

body.body-login .login-lang a{
  font-size: 12px;
  line-height: 14px;
  text-decoration: none;
}

/* ---------- Form / Links wrapper ---------- */
body.body-login .login-box form,
body.body-login .login-box .links,
body.body-login .login-box .login-links{
  width: 100%;
  max-width: 422px;
}

/* ---------- Form ---------- */
body.body-login .login-box form{
  margin: 0;
  padding: 0;
}

/* ---------- Grupos ---------- */
body.body-login .login-box form .form-group{
  margin: 0 0 8px 0; /* compacto portátil */
}

/* ---------- Título login GENERAL ---------- */
body.body-login .login-box .titulo-login_gral{
  font-size: clamp(18px, 5vw, 22px);
  margin: 8px 0 14px 0;
  text-align: center;
  color: #0b3c6f;
}

/* ---------- Labels (no tocar “a lo loco”) ---------- */
body.body-login .login-box form .form-group label{
  display: block;
  margin: 0 0 6px 0;
  font-size: 13px;
  line-height: 15px;
  color: #1A1615;
}

/* ---------- Inputs ---------- */
body.body-login .login-box form .form-group input[type="text"],
body.body-login .login-box form .form-group input[type="password"]{
  width: 100%;
  height: 30px;
  padding: 8px 10px; 

  border: 1px solid #cfd8e3;
  border-radius: 8px;
  outline: none;

  font-size: 14px;
  line-height: 16px;
  background: #fff;
  color: #123;

  box-sizing: border-box;
  padding: 0 10px;     
}

body.body-login .login-box form .form-group input[type="text"]:focus,
body.body-login .login-box form .form-group input[type="password"]:focus{
  border-color: rgba(30, 90, 160, 0.60);
  box-shadow: 0 0 0 3px rgba(30, 90, 160, 0.12);
}

/* ---------- Botón ---------- */
body.body-login .login-box form button,
body.body-login .login-box form input[type="submit"]{
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;

  font-size: 14px;
  font-weight: 400; /*600 = BOLD */
  background: #0b3c6f;  /* color original GENERAL */
  color: #FFFFFF;
}

/* ---------- Links (debajo del botón) ---------- */
body.body-login .login-box .links,
body.body-login .login-box .login-links{
  margin-top: 10px;

  width: 100%;
  max-width: 422px;              /* mismo ancho útil del contenido/botón */

  display: flex;
  justify-content: space-between; /* distribución tipo Figma */
  align-items: center;
  gap: 10px;

  flex-wrap: wrap;               /* si no cabe, baja ordenado */
  text-align: center;
}

body.body-login .login-box .links a,
body.body-login .login-box .login-links a{
  font-size: 13px;
  line-height: 15px;
  text-decoration: none;
  white-space: nowrap;           /* evita que “Olvidó…” se parta raro */
  color: #0b3c6f;
}

/* ---------- Footnotes externos (BASE portátil) ---------- */
body.body-login .login-footnote{
  width: 100%;
  max-width: 480px;
  text-align: center;

  font-size: 12px;
  line-height: 14px;

  margin-top: 8px;
}

body.body-login .login-footnote p{
  margin: 0;
}

body.body-login .login-footnote--copyright p + p{
  margin-top: 4px;
}

body.body-login .login-footnote--legal a{
  text-decoration: underline;
}

/* ---------- Footnote dentro de caja (si existe) ---------- */
body.body-login .login-box .login-footnote{
  margin-top: 10px; /* compacto */
}

body.body-login .login-box .login-footnote p{
  margin: 0;
}

/* =========================================================
   1 SOLO @media para desktop grande (opcional / limpio)
   ========================================================= */
@media (min-width: 1440px){
  body.body-login .login-wrapper{
    padding: 18px 16px;
    gap: 14px;
  }

  body.body-login .login-box{
    max-width: 520px;
    padding: 16px 22px 30px 22px;
  }

  body.body-login .login-footnote{
    max-width: 520px;
  }
}

/* =========================================================
   MEDIA - responsive
   ========================================================= */

/* PC – ajuste vertical caja login GENERAL */
@media (min-width: 1440px){
  body.body-login .login-box.login-box--general{
    margin-top: 34px; 
  }
}

@media (max-width: 1024px){
  body.body-login .login-wrapper{
    padding: 10px 12px;
    gap: 10px;
  }

  body.body-login .login-box{
    max-width: 460px;
    padding: 12px 16px 22px 16px;
  }

  /* Un poco más compacto en logos para ganar aire vertical */
  body.body-login .login-box .brand__logo{
    height: 46px;
  }

  /* Links: mantener orden, permitir wrap bonito si hace falta */
  body.body-login .login-box .links,
  body.body-login .login-box .login-links{
    gap: 8px;
  }
}

@media (max-width: 768px){
  body.body-login .login-wrapper{
    padding: 10px 10px;
    gap: 10px;
  }

  body.body-login .login-box{
    max-width: 420px;
    padding: 12px 14px 20px 14px;
  }

  body.body-login .login-box .brand__logo{
    height: 42px;
  }

  body.body-login .login-box form .form-group input[type="text"],
  body.body-login .login-box form .form-group input[type="password"]{
    height: 42px;           /* un poquito menos que portátil */
  }

  body.body-login .login-box form button,
  body.body-login .login-box form input[type="submit"]{
    height: 44px;           /* acompaña al input */
  }
}


@media (max-width: 600px){
  body.body-login .login-wrapper{
    padding: 10px 10px;
  }

  body.body-login .login-box{
    max-width: 100%;
    padding: 12px 14px 22px 14px;
  }

  body.body-login .login-box form,
  body.body-login .login-box .links,
  body.body-login .login-box .login-links,
  body.body-login .login-header-row,
  body.body-login .login-box .login-separator{
    max-width: 100%;
  }
}

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