/* ==========================================================================
   GRACE · Acceso
   Distribuciones Grace — hoja del login

   Va después de grace-pos.css (tokens) y grace-devexpress.css (puente).
   Todo cuelga de .gx-login: ninguna regla de aquí puede alcanzar al ERP ni
   a las páginas viejas DG*.aspx.

   LA JERARQUÍA VIENE DEL LOGOTIPO
   El logotipo pone el nombre en negro y usa el rosa sólo como adorno: el
   corazón, el moño, las hojitas. La pantalla repite eso — la tinta manda y
   el rosa acompaña. Por eso el botón de entrar es negro y no rosa: además
   de que #E9A3AD da 1.9:1 sobre blanco y no pasaría contraste.

   El rosa aparece en tres lugares y en ninguno más: la línea bajo el
   logotipo, el aro de foco al escribir, y el enlace de contraseña olvidada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARMAZÓN
   -------------------------------------------------------------------------- */
.gx-login {
  min-height: 100vh;
  display: grid;
  /* La columna de la marca crece; la del formulario se queda quieta. En un
     monitor ancho el aire sobra del lado del logotipo, que es donde luce. */
  grid-template-columns: minmax(0, 1fr) 520px;
  background: var(--gx-paper);
}

/* --------------------------------------------------------------------------
   2. LADO DE LA MARCA
   -------------------------------------------------------------------------- */
.gx-login__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  border-right: 1px solid var(--gx-line);
  text-align: center;
}

.gx-login__logo {
  display: block;
  width: 268px;
  max-width: 68vw;
  height: auto;
}

/* Respaldo cuando todavía no está el archivo del logotipo: el mismo aro con
   la G que ya usaba la página. Nunca se ve un icono de imagen rota. */
.gx-login__mark {
  position: relative;
  width: 78px;
  height: 78px;
  border: 1px solid var(--gx-line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.gx-login__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid var(--gx-rose-line);
}
.gx-login__mark span {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 43px;
  line-height: 1;
  padding-right: 3px;
}

.gx-login__rule {
  width: 72px;
  height: 1px;
  margin: 40px 0 26px;
  background: var(--gx-rose);
}

.gx-login__tagline {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 27px;
  line-height: 1.3;
  color: var(--gx-ink-2);
}

/* Las esquinas: dan medida al vacío sin pedir atención. */
.gx-login__corner {
  position: absolute;
  top: 44px;
  left: 52px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gx-ink-3);
}
.gx-login__brandfoot {
  position: absolute;
  bottom: 44px;
  left: 52px;
  right: 52px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11.5px;
  color: var(--gx-ink-3);
}

/* --------------------------------------------------------------------------
   3. LADO DEL FORMULARIO
   -------------------------------------------------------------------------- */
.gx-login__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: var(--gx-surface);
}
.gx-login__form { width: 100%; max-width: 372px; }

.gx-login__title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.026em;
}
.gx-login__sub {
  margin: 8px 0 36px;
  font-size: 14px;
  color: var(--gx-ink-3);
}

/* .gx-field y .gx-field__label viven en grace-erp.css, que el acceso NO carga
   —no tiene caso traerse el riel lateral, las tablas y los indicadores para
   dos etiquetas—. Se repiten aquí, acotadas a .gx-login.

   Esto arregla un fallo que traía la página desde antes: las etiquetas
   "Usuario" y "Contraseña" salían con el tipo por omisión del navegador,
   porque la regla que les daba forma nunca llegaba a esta pantalla. */
.gx-login .gx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-bottom: 19px;
}
.gx-login .gx-field__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gx-ink-3);
}

.gx-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
}
.gx-login__row a { font-size: 13px; }

.gx-login__foot {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--gx-line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--gx-ink-3);
}

/* --------------------------------------------------------------------------
   4. AVISOS
   -------------------------------------------------------------------------- */
/* El aspecto base de .gx-alert vive en grace-pos.css, que esta página ya
   carga. Aquí sólo lo que es propio del acceso. */
.gx-login .gx-alert { margin-bottom: 20px; }
.gx-alert__ico {
  flex: 0 0 auto;
  margin-top: 1px;
  line-height: 0;
}
/* El icono es de aviso, no de éxito. En verde sobraría, así que se retira
   en vez de dibujar dos iconos y elegir uno desde el código. */
.gx-alert.alert-success .gx-alert__ico { display: none; }

/* --------------------------------------------------------------------------
   5. AJUSTES A DEVEXPRESS

   El puente ya resolvió borde, radio, aro de foco y placeholder. Aquí sólo
   se sube la altura: los campos del acceso se teclean una vez al día, con
   prisa y a veces sin mirar, y merecen más blanco que los del ERP.
   -------------------------------------------------------------------------- */
.gx-login .dxeEditArea,
.gx-login .dxeEditAreaSys {
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 13px !important;
  font-size: 14.5px !important;
}

.gx-login .gx-login__submit { margin-top: 9px; }
.gx-login .gx-login__submit .dxb {
  height: 52px !important;
  line-height: 52px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

/* El atajo de teclado ya es vocabulario del sistema (.gx-kbd en el POS):
   quien cobra todo el día no suelta el teclado. Se dibuja con ::after para
   no pelear con el marcado que rinde ASPxButton. */
.gx-login .gx-login__submit .dxb::after {
  content: "\21B5";
  display: inline-block;
  min-width: 22px;
  height: 20px;
  margin-left: 10px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVO

   Mismos cortes que el resto del sistema: 1023 y 767.
   -------------------------------------------------------------------------- */

/* Tableta y abajo: la marca pasa a ser encabezado y el formulario sube. */
@media (max-width: 1023px) {
  .gx-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .gx-login__brand {
    padding: 48px 32px 40px;
    border-right: 0;
  }
  .gx-login__logo { width: 214px; }
  .gx-login__rule { margin: 30px 0 20px; }
  .gx-login__tagline { font-size: 22px; }

  /* Las esquinas dejan de tener esquinas: en columna estorban. */
  .gx-login__corner,
  .gx-login__brandfoot { display: none; }

  .gx-login__panel {
    align-items: flex-start;
    padding: 36px 32px 40px;
    border-top: 1px solid var(--gx-line);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 32px -20px rgba(22, 19, 15, .18);
  }
}

/* Teléfono: campos más altos y sin adornos de teclado. */
@media (max-width: 767px) {
  .gx-login__brand { padding: 36px 24px 30px; }
  .gx-login__logo { width: 186px; }
  .gx-login__tagline { font-size: 19px; }
  .gx-login__panel { padding: 30px 24px 34px; }
  .gx-login__title { font-size: 22px; }
  .gx-login__sub { margin-bottom: 28px; }

  .gx-login .dxeEditArea,
  .gx-login .dxeEditAreaSys {
    height: 50px !important;
    line-height: 50px !important;
    /* 16px evita que iOS haga zoom al enfocar el campo. */
    font-size: 16px !important;
  }
  .gx-login .gx-login__submit .dxb {
    height: 54px !important;
    line-height: 54px !important;
    font-size: 16px !important;
  }
  .gx-login .gx-login__submit .dxb::after { display: none; }
}

/* Pantallas muy bajas en horizontal: que el logotipo no empuje el
   formulario fuera de la vista. */
@media (max-height: 620px) and (min-width: 1024px) {
  .gx-login__brand { padding: 40px; }
  .gx-login__logo { width: 208px; }
  .gx-login__rule { margin: 28px 0 18px; }
  .gx-login__tagline { font-size: 22px; }
}

/* Quien pidió menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .gx-login * { transition: none !important; animation: none !important; }
}