/* Tesla.Identity/wwwroot/assets/css/login.css */

/* =========================
   CONTROLES (DESKTOP DEFAULT)
   ========================= */
:root{
  --split-left: 60%;
  --split-right: 40%;
  --right-padding: 32px;
  --form-max: 560px;
  --base-font: 14px;

  --h3-size: 20px;
  --h1-size: 32px;
  --h3-gap: 4px;

  --input-font: 14px;
  --label-font: 14px;

  --bg-zoom: 135% auto;
  --bg-pos-x: 10%;
  --bg-pos-y: 0%;

  /* Desktop: si quieres inputs más “cortos” */
  --field-max: 420px;
}

/* =========================
   BASE
   ========================= */
html, body { height: 100%; }

body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
  font-size: var(--base-font);
}

/* =========================
   LAYOUT 2 COLUMNAS
   ========================= */
.login-page{
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.login-left{
  flex: 0 0 var(--split-left);
  max-width: var(--split-left);

  background-image: url("/assets/media/custom/bg-home.jpg");
  background-repeat: no-repeat;
  background-size: var(--bg-zoom);
  background-position: var(--bg-pos-x) var(--bg-pos-y);
}

.login-right{
  flex: 0 0 var(--split-right);
  max-width: var(--split-right);

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

  background: #fff;
  padding: var(--right-padding);
  box-sizing: border-box;
}

/* =========================
   BLOQUE FORM
   ========================= */
.login-form{
  width: 100%;
  max-width: var(--form-max);
  margin: 0 auto;
}

/* =========================
   HELPERS
   ========================= */
.text-align-center{ text-align: center; }

.pb-13{ padding-bottom: 3.25rem; }
.pt-5{ padding-top: 1.25rem; }
.pt-lg-0{ padding-top: 1.25rem; }
@media (min-width: 992px){
  .pt-lg-0{ padding-top: 0; }
}

.mb-4{ margin-bottom: 1rem; }
.mb-10{ margin-bottom: 2.5rem; }

.my-3{ margin-top: .75rem; margin-bottom: .75rem; }
.mr-3{ margin-right: .75rem; }

.pb-5{ padding-bottom: 1.25rem; }
.pb-lg-0{ padding-bottom: 0; }

.max-h-70px{ max-height: 70px; }

.d-flex{ display: flex; }
.justify-content-between{ justify-content: space-between; }
.mt-n5{ margin-top: -1.25rem; }

/* =========================
   TYPO
   ========================= */
.font-weight-bolder{ font-weight: 600; }
.text-dark{ color: #181C32; }
.font-size-h6{ font-size: 14px; line-height: 1.2; }

h3.font-size-h3{
  font-size: var(--h3-size);
  line-height: 1.1;
  margin: 0;
}

h3.font-size-h3 + h3.font-size-h3{
  margin-top: var(--h3-gap);
}

h3.font-size-h3.font-size-h1-lg{
  font-size: var(--h1-size);
  line-height: 1.15;
}

/* =========================
   FORM
   ========================= */
.form-group{ margin-bottom: 1.75rem; }

label{
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: var(--label-font);
  color: #181C32;
}

.form-control{
  width: 100%;
  border: 0;
  outline: none;
  box-sizing: border-box;

  border-radius: .75rem;
  font-size: var(--input-font);
  color: #3F4254;
}

.form-control-solid{ background: #F3F6F9; }
.h-auto{ height: auto; }
.py-7{ padding-top: 1.25rem; padding-bottom: 1.25rem; }
.px-6{ padding-left: 1.5rem; padding-right: 1.5rem; }
.rounded-lg{ border-radius: .75rem; }

.form-control::placeholder{ color: #B5B5C3; }

/* Desktop: inputs “cortos” */
.form-group .form-control{
  max-width: var(--field-max);
}

/* Desktop: alineación a la izquierda */
.form-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Inputs más altos (global, se ve bien en móvil también) */
.form-control.py-7{
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

/* Labels tamaño */
#kt_login_signin_form label{
  font-size: 17px;
}

/* Links */
.text-primary{ color: #3699FF; }
.text-hover-primary:hover{ color: #1a88ff; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* =========================
   BUTTON
   ========================= */
.btn{
  border: 0;
  cursor: pointer;
  border-radius: .5rem;
  padding: 1rem 2rem;
  font-size: 14px;
  font-weight: 600;
}

.btn-primary{
  background: #3699FF;
  color: #fff;
}
.btn-primary:hover{ background: #1a88ff; }

.px-8{ padding-left: 2rem; padding-right: 2rem; }
.py-4{ padding-top: 1rem; padding-bottom: 1rem; }

/* =========================
   ALERT
   ========================= */
.alert{ border-radius: .75rem; padding: 1rem 1.25rem; }
.alert-light-danger{ background: #FFF5F8; color: #F64E60; }
.alert-text{ font-weight: 600; }

/* =========================
   RESPONSIVE (TABLET + MÓVIL)
   ========================= */
@media (max-width: 991px){
  :root{
    /* más amigable en pantallas chicas */
    --right-padding: 20px;
    --form-max: 520px;
    --field-max: 9999px; /* quita el “corte” en móvil */
    --h3-size: 18px;
    --h1-size: 28px;
    --bg-zoom: cover;
    --bg-pos-x: 50%;
    --bg-pos-y: 50%;
  }

  .login-page{ flex-direction: column; }

  .login-left{
    flex: 0 0 auto;
    max-width: none;
    height: 200px;
    background-size: cover;
    background-position: center;
  }

  .login-right{
    flex: 1 1 auto;
    max-width: none;
    align-items: center;     /* ✅ centra */
    justify-content: center; /* ✅ centra */
    padding: var(--right-padding);
  }

  .login-form{
    max-width: 520px;
    margin: 0 auto;          /* ✅ centra el bloque */
  }

  /* ✅ En móvil/tablet: que el input ocupe todo el ancho y se vea centrado */
  .form-group{
    align-items: stretch;    /* ✅ NO a la izquierda */
  }

  .form-group .form-control{
    max-width: 100%;
  }

  /* ✅ Quita el movimiento del header en pantallas chicas */
  #kt_login_signin_form .pb-13.pt-lg-0.pt-5{
    transform: none;
  }
}

@media (max-width: 576px){
  :root{
    --right-padding: 16px;
    --h3-size: 17px;
    --h1-size: 24px;
  }

  .login-left{ height: 160px; }

  .max-h-70px{ max-height: 56px; }

  /* ✅ Botón full width en móvil (se ve mejor) */
  .btn{
    width: 100%;
    display: block;
  }

  .mr-3{ margin-right: 0; }

  /* ✅ link “olvidé” más usable */
  #kt_login_forgot{
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 15px;
  }

  .form-group{ margin-bottom: 1.25rem; }
}

/* =========================
   (Opcional) SOLO PC: si quieres mover header a la izquierda
   ========================= */
@media (min-width: 992px){
  #kt_login_signin_form .pb-13.pt-lg-0.pt-5{
    transform: translateX(-40px);
  }
}