/* =========================================================
   ACCESO Y CAMBIO DE CONTRASEÑA
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.login-page {
  display: grid;

  min-height: 100vh;
  min-height: 100dvh;

  grid-template-columns:
    minmax(390px, .93fr)
    minmax(0, 1.07fr);

  background:
    var(--surface);
}


/* =========================================================
   PANEL INFORMATIVO
   ========================================================= */

.login-story {
  position: relative;

  display: flex;

  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  flex-direction: column;

  padding:
    clamp(2rem, 5vw, 4.5rem);

  background:
    var(--navy);

  color:
    #fff;
}


.login-story::before {
  position: absolute;

  right: -160px;
  bottom: -160px;

  width: 520px;
  height: 520px;

  border:
    85px solid
    rgba(255, 255, 255, .04);

  border-radius:
    50%;

  content:
    "";
}


/* =========================================================
   BOTÓN REGRESAR - ESCRITORIO
   ========================================================= */

.login-story__back {
  position: relative;

  z-index: 2;

  display: inline-flex;

  align-items: center;

  gap: .65rem;

  align-self: flex-start;

  border:
    1px solid
    rgba(255, 255, 255, .18);

  border-radius:
    10px;

  padding:
    .7rem
    1rem;

  background:
    rgba(255, 255, 255, .06);

  color:
    #fff;

  font-size:
    .95rem;

  font-weight:
    750;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


.login-story__back:hover {
  border-color:
    rgba(255, 255, 255, .32);

  background:
    rgba(255, 255, 255, .11);

  transform:
    translateX(-2px);
}


.login-story__back:focus-visible {
  outline:
    3px solid
    rgba(255, 255, 255, .3);

  outline-offset:
    3px;
}


.login-story__back-icon {
  display: grid;

  width: 22px;
  height: 22px;

  flex:
    0 0 22px;

  place-items:
    center;

  font-size:
    1.15rem;
}


/* =========================================================
   CONTENIDO INFORMATIVO
   ========================================================= */

.login-story__content {
  position: relative;

  z-index: 1;

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

  margin-block:
    auto;
}


.login-story__content h1 {
  margin-bottom:
    1.35rem;

  font-size:
    clamp(2.6rem, 5vw, 4.8rem);

  letter-spacing:
    -.06em;

  line-height:
    .98;
}


.login-story__content
> p:not(.eyebrow) {
  max-width:
    560px;

  color:
    #cbd2f2;

  line-height:
    1.75;
}


.login-story__points {
  display: grid;

  gap:
    .75rem;

  margin-top:
    1.6rem;

  color:
    #edf0ff;

  font-size:
    .9rem;

  font-weight:
    650;
}


.login-story__points span {
  display: flex;

  align-items: center;

  gap:
    .6rem;
}


.login-story__points svg {
  flex:
    0 0 auto;

  color:
    var(--red);
}


/* =========================================================
   DECORACIÓN
   ========================================================= */

.login-story__decoration {
  position: absolute;

  top:
    2rem;

  right:
    2rem;

  display: flex;

  gap:
    .45rem;
}


.login-story__decoration span {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #fff;

  opacity:
    .35;
}


.login-story__decoration
span:nth-child(2) {
  background:
    var(--red);

  opacity:
    1;
}


/* =========================================================
   PANEL DEL FORMULARIO
   ========================================================= */

.login-panel {
  display: grid;

  min-width: 0;

  min-height:
    100vh;

  min-height:
    100dvh;

  place-items:
    center;

  padding:
    clamp(1.25rem, 4vw, 2.5rem);
}


/* =========================================================
   TARJETA
   ========================================================= */

.login-card {
  width:
    min(100%, 490px);

  border:
    1px solid
    var(--border);

  border-radius:
    26px;

  padding:
    clamp(1.8rem, 4vw, 2.6rem);

  background:
    #fff;

  box-shadow:
    var(--shadow-md);
}


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

.login-card__brand {
  display: flex;

  justify-content:
    center;

  margin-bottom:
    1.5rem;
}


.login-card__logo {
  display: block;

  width:
    145px;

  max-width:
    100%;

  height:
    auto;

  object-fit:
    contain;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.login-card h2,
.password-change-page h2 {
  margin:
    0
    0
    .8rem;

  color:
    var(--navy-dark);

  font-size:
    clamp(1.9rem, 3vw, 2.35rem);

  font-weight:
    800;

  letter-spacing:
    -.035em;

  line-height:
    1.1;
}


.login-card__lead,
.password-change-page .login-card__lead {
  margin:
    0
    0
    1.65rem;

  color:
    #626d89;

  font-size:
    .96rem;

  font-weight:
    450;

  line-height:
    1.65;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.login-form {
  display: grid;

  min-width:
    0;
}


.login-form > label {
  margin-block:
    .85rem
    .42rem;

  color:
    #343e59;

  font-size:
    .82rem;

  font-weight:
    760;
}


/* =========================================================
   INPUT
   ========================================================= */

.input-shell {
  display: flex;

  width:
    100%;

  min-width:
    0;

  min-height:
    52px;

  align-items:
    center;

  gap:
    .55rem;

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  padding-inline:
    .85rem;

  background:
    #fff;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.input-shell:hover {
  border-color:
    #bcc4d7;
}


.input-shell:focus-within {
  border-color:
    var(--navy);

  box-shadow:
    0 0 0 4px
    rgba(32, 47, 118, .09);
}


.input-shell > span {
  flex:
    0 0 auto;

  color:
    #8791aa;

  font-size:
    .85rem;

  font-weight:
    800;
}


.input-shell input {
  width:
    100%;

  min-width:
    0;

  flex:
    1;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--ink);

  font:
    inherit;
}


.input-shell input::placeholder {
  color:
    #9ba4b9;
}


/* =========================================================
   MOSTRAR / OCULTAR CONTRASEÑA
   ========================================================= */

.input-shell__action {
  flex:
    0 0 auto;

  border:
    0;

  border-radius:
    7px;

  padding:
    .4rem;

  background:
    transparent;

  color:
    var(--navy);

  cursor:
    pointer;

  font-family:
    inherit;

  font-size:
    .73rem;

  font-weight:
    800;

  transition:
    background .18s ease,
    color .18s ease;
}


.input-shell__action:hover {
  background:
    var(--navy-soft);
}


.input-shell__action:focus-visible {
  outline:
    3px solid
    rgba(32, 47, 118, .14);

  outline-offset:
    1px;
}


/* =========================================================
   AYUDA DEL CAMPO
   ========================================================= */

.login-field-hint {
  display:
    block;

  margin-top:
    .35rem;

  color:
    #8992a8;

  font-size:
    .68rem;

  line-height:
    1.4;
}


/* =========================================================
   MENSAJES INLINE
   ========================================================= */

.form-message {
  min-height:
    32px;

  padding-top:
    .45rem;
}


.form-message p {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    .4rem;

  margin:
    0;

  color:
    var(--red);

  font-size:
    .82rem;

  font-weight:
    650;

  line-height:
    1.4;
}


.form-message svg {
  flex:
    0 0 auto;

  margin-top:
    .08rem;
}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.login-submit {
  display:
    flex;

  width:
    100%;

  min-height:
    52px;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    .65rem;
}


.login-submit
[data-submit-label] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .55rem;

  line-height:
    1;
}


.login-submit
[data-icon="arrow"] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  line-height:
    1;
}


.login-submit
[data-icon="arrow"]
svg {
  display:
    block;
}


/* =========================================================
   CAMBIO DE CONTRASEÑA
   ========================================================= */

.password-change-page {
  width:
    100%;
}


.login-card:has(
  .password-change-page
) {
  width:
    min(100%, 540px);
}


/* =========================================================
   BOTÓN REGRESAR - MÓVIL
   ========================================================= */

.login-panel__back {
  display:
    none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .login-page {
    grid-template-columns:
      minmax(320px, .8fr)
      minmax(0, 1.2fr);
  }


  .login-story {
    padding:
      2.25rem;
  }


  .login-story__content h1 {
    font-size:
      clamp(2.4rem, 5vw, 3.5rem);
  }

}


/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 820px) {

  .login-page {
    display:
      block;

    min-height:
      100dvh;
  }


  .login-story {
    display:
      none;
  }


  .login-panel {
    position:
      relative;

    display:
      flex;

    min-height:
      100dvh;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    padding:
      5rem
      1.5rem
      1.5rem;
  }


  .login-card,
  .login-card:has(
    .password-change-page
  ) {
    width:
      min(100%, 540px);
  }


  .login-panel__back {
    position:
      absolute;

    top:
      max(
        1.25rem,
        env(safe-area-inset-top)
      );

    left:
      1.5rem;

    display:
      inline-flex;

    align-items:
      center;

    gap:
      .5rem;

    border:
      1px solid
      var(--border);

    border-radius:
      10px;

    padding:
      .65rem
      .85rem;

    background:
      #fff;

    color:
      var(--navy);

    box-shadow:
      0 4px 14px
      rgba(31, 43, 92, .06);

    font-size:
      .82rem;

    font-weight:
      750;

    line-height:
      1;

    text-decoration:
      none;

    transition:
      background .18s ease,
      border-color .18s ease,
      transform .18s ease;
  }


  .login-panel__back:hover {
    border-color:
      #b9c2d9;

    background:
      var(--navy-soft);

    transform:
      translateX(-2px);
  }


  .login-panel__back:focus-visible {
    outline:
      3px solid
      rgba(32, 47, 118, .12);

    outline-offset:
      2px;
  }


  .login-panel__back-icon {
    display:
      grid;

    width:
      18px;

    height:
      18px;

    place-items:
      center;

    font-size:
      1.1rem;

    line-height:
      1;
  }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 520px) {

  .login-panel {
    padding:
      4.75rem
      1rem
      1rem;
  }


  .login-panel__back {
    top:
      max(
        1rem,
        env(safe-area-inset-top)
      );

    left:
      1rem;
  }


  .login-card {
    border-radius:
      20px;

    padding:
      1.5rem;
  }


  .login-card__brand {
    margin-bottom:
      1.2rem;
  }


  .login-card__logo {
    width:
      125px;
  }


  .login-card h2,
  .password-change-page h2 {
    font-size:
      1.85rem;
  }


  .login-card__lead,
  .password-change-page
  .login-card__lead {
    margin-bottom:
      1.3rem;

    font-size:
      .9rem;
  }


  .input-shell {
    min-height:
      50px;
  }


  .login-submit {
    min-height:
      50px;
  }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 360px) {

  .login-panel {
    padding:
      4.5rem
      .7rem
      .7rem;
  }


  .login-panel__back {
    left:
      .7rem;
  }


  .login-card {
    padding:
      1.2rem;
  }


  .input-shell {
    padding-inline:
      .7rem;
  }


  .input-shell__action {
    font-size:
      .68rem;
  }

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .login-story__back,
  .login-panel__back,
  .input-shell,
  .input-shell__action {
    transition:
      none;
  }

}