/* ============================================================================
   Matchitfy — login y alta
   Depende de tokens.css y site.css.
   ============================================================================ */

.auth-page {
  min-height: 100dvh;              /* dvh y no vh: en movil la barra del
                                      navegador se retrae y vh deja un salto */
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* `minmax(0, 1fr)` y no la columna implicita. Una columna de rejilla implicita
     se dimensiona a `auto`, cuyo minimo es el min-content del hijo mas ancho: un
     solo elemento indivisible estira la columna por encima del viewport y saca
     scroll horizontal a toda la pagina. Con minimo 0 la columna nunca crece mas
     que su contenedor. Medido: a 320px daba 346px de scrollWidth. */
  grid-template-columns: minmax(0, 1fr);
}

.auth-main {
  display: grid; place-items: center;
  padding: 40px var(--gut) 64px;
}

.auth-card { width: 100%; max-width: 420px; }
.auth-card.wide { max-width: 560px; }

.auth-title { font-size: 28px; letter-spacing: -0.025em; font-weight: 600; }

/* ── Aviso de pre-lanzamiento ───────────────────────────────────────────── */

/* Va ARRIBA del formulario, no debajo del boton. Decirle a alguien que no
   puede entrar despues de que llene todo es una falta de respeto por su tiempo.
   Y el formulario sigue completo y usable a proposito: se puede probar entero
   sin que nadie cree una cuenta. */
.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gap);
  background: var(--gap-soft);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink);
}
.notice strong { font-weight: 600; }

/* Resultado del envio. `hidden` de HTML lo oculta; el JS solo lo revela. Sin
   JS el formulario postea de verdad y el servidor responde, que es el
   comportamiento correcto degradado. */
.result {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  background: var(--sunk);
  font-size: 15px; line-height: 1.6;
}
.result[hidden] { display: none; }

/* ── Campos ─────────────────────────────────────────────────────────────── */

.fields { display: grid; gap: 18px; }
.field  { display: grid; gap: 6px; }

.field label { font-size: 14px; font-weight: 550; color: var(--ink); }

/* Las pistas van ENCIMA del control. Debajo quedan tapadas por el popover de
   autocompletado del navegador y por el teclado del telefono, justo cuando se
   necesitan. */
.hint { font-size: 13px; color: var(--ink-2); }

.field input {
  font: inherit; font-size: 16px;   /* 16px o iOS hace zoom al enfocar */
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  width: 100%;
}
.field input::placeholder { color: var(--ink-2); }

/* :user-invalid y no :invalid. `:invalid` marca en rojo un campo vacio nada
   mas cargar la pagina y mientras se escribe; `:user-invalid` espera a que la
   persona termine con el campo o intente enviar. */
.field input:user-invalid {
  border-color: var(--gap);
  background: var(--gap-soft);
}
.field input:user-valid { border-color: var(--ok); }

/* El error nunca va SOLO por color: color mas texto mas simbolo. */
.err { display: none; font-size: 13px; color: var(--gap); }
.field input:user-invalid ~ .err { display: block; }

/* Las reglas de la contrasena se atenuan cuando ya se cumplen, en vez de
   desaparecer: si desaparecen, quien vuelve a editar pierde la referencia. */
.rules { font-size: 13px; color: var(--ink-2); display: grid; gap: 2px; }
.field:has(input:user-invalid) .rules { color: var(--gap); }
.field:has(input:user-valid)   .rules { opacity: 0.55; }

.btn-block { width: 100%; justify-content: center; text-align: center; }

.auth-alt { margin-top: 22px; font-size: 15px; color: var(--ink-2); text-align: center; }

.auth-foot {
  border-top: 1px solid var(--line);
  padding: 20px var(--gut);
  font-size: 13px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}