/*
 * La pantalla de entrada.
 *
 * Existe como hoja aparte porque antes eran ~25 atributos `style=` en la vista más tres media
 * queries con `!important` para deshacerlos. Con el color y el tamaño escritos en línea no había
 * forma de que el tema oscuro llegara a los campos —salían blancos sobre la tarjeta negra— ni de
 * que la tarjeta se midiera por su contenido: llevaba `height: 573px` (670 con el reto de
 * reCAPTCHA), y de ahí el vacío bajo el botón en escritorio y el recorte en un teléfono bajo.
 *
 * Regla que se sigue aquí: la tarjeta se mide por lo que tiene dentro, y el color sale de los
 * tokens. `--fg-on-accent` es para texto *sobre* el acento —el rótulo del botón—; dentro de la
 * tarjeta el texto usa `--fg` y `--fg-muted`, que es lo que faltaba y hacía invisible el pie.
 */

.login-page {
  /* Se mide contra la ventana y no contra el padre porque por debajo de 1024 px el armazón le pone
     `height: auto` y un `100%` no mediría nada. `dvh` y no `vh`: en un móvil la barra del navegador
     se retrae y con `vh` la tarjeta quedaba centrada respecto a una ventana que no existe.
     Para que esto no produzca scroll, la pantalla a sangre pone a cero el relleno del armazón —ver
     `_Layout.cshtml.css`—, que dejaba 2 px arriba y 2 abajo. */
  flex: 1 1 auto;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--accent);
}

.login-card {
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 40px 32px;
  border-radius: 28px;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

/* ---- Bienvenida ------------------------------------------------------------------------------ */

.login-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.login-welcome img {
  margin-bottom: 8px;
}

.login-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--fg);
}

.login-subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ---- Campos ---------------------------------------------------------------------------------- */

.login-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field > label {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-muted);
}

/* Acotado a la tarjeta a propósito: `.form-control` es global y lo comparten las ~20 pantallas
   AngularJS que siguen ancladas en claro. Tocarlo ahí las cambiaría todas. */
.login-card .form-control {
  /* 44 px es el mínimo que un dedo acierta; la regla global deja 28. */
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background-color: var(--surface);
  color: var(--fg);
  font-size: 16px;   /* menos de 16 y el navegador del iPhone hace zoom al enfocar */
}

.login-card .form-control::placeholder {
  color: var(--fg-subtle);
  opacity: 1;
}

.login-card .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.login-error {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  color: var(--danger);
}

/* ---- Recuérdame ------------------------------------------------------------------------------ */

.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  font-size: 15px;
  color: var(--fg);
}

.login-remember input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
}

.login-remember label {
  margin: 0;
  cursor: pointer;
}

/* ---- Botón y pie ----------------------------------------------------------------------------- */

.login-submit {
  width: 100%;
  min-height: 52px;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 20px;
  color: var(--fg-on-accent);
}

.login-footer {
  margin: 0;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  /* Estaba en `--fg-on-accent`: blanco sobre la tarjeta blanca en claro y casi negro sobre la
     oscura en oscuro, o sea invisible en los dos temas. */
  color: var(--fg-muted);
}

.recaptcha-challenge-container {
  display: flex;
  justify-content: center;
}

/* En pantallas bajas la tarjeta puede no caber; que desplace la página es correcto, lo que no lo era
   es forzarle un alto en píxeles y recortarla. */
@media (max-width: 480px) {
  .login-page {
    padding: 16px;
  }

  .login-card {
    gap: 24px;
    padding: 32px 24px 24px;
  }
}