/* La pantalla de acceso.
 *
 * Dos paneles en escritorio y una columna en el teléfono. El panel de marca no
 * es decoración: quien llega aquí casi siempre viene de un enlace de correo, y
 * antes de escribir una contraseña tiene que reconocer dónde está. Una tarjeta
 * suelta en un fondo gris no dice nada; medio lienzo con el logotipo, sí.
 *
 * En el teléfono ese panel se convierte en una banda estrecha: el formulario
 * tiene que verse **sin desplazar**, porque una pantalla de acceso que obliga a
 * buscar el campo ya empezó mal.
 */

.login {
  display: grid;
  grid-template-columns: 1fr;
  /* dvh: con vh, la barra del navegador tapa la última franja y en Safari no
     vuelve a aparecer al desplazar. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- El panel de marca ---------------------------------------------------- */

.login__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  padding-top: max(var(--space-8), calc(env(safe-area-inset-top) + var(--space-5)));
  /* El degradado de la marca, del azul primario al claro. */
  background: linear-gradient(135deg, var(--c-brand-ink), var(--c-primary) 55%,
    var(--c-brand-accent));
  color: #fff;
  text-align: center;
}

.login__logo {
  width: min(14rem, 70%);
  height: auto;
  margin: 0 auto;
}

.login__claim {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/* Las tres frases de qué hace. Solo en escritorio: en un teléfono empujarían
   el formulario fuera de la pantalla, que es lo único que se vino a hacer. */
.login__points {
  display: none;
}

/* --- El panel del formulario ---------------------------------------------- */

.login__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--space-4)
    max(var(--space-6), env(safe-area-inset-bottom));
  background-color: var(--bg-surface);
}

.login__panel {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

.login__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--c-brand-ink);
}

.login__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.login__foot {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Las dos páginas públicas, bajo el dominio. Pequeñas: están para quien las
   busca, no para competir con el botón de entrar. */
.login__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.login__legal a {
  color: var(--text-muted);
}

/* Justo debajo de «¿Olvidó su contraseña?»: dos pies separados por el margen
   entero parecerían de secciones distintas. */
.login__signup {
  margin-top: var(--space-2);
}

/* El botón de entrar respira más que el resto: es lo que se viene a pulsar. */
.login__submit {
  margin-top: var(--space-5);
}

/* --- Escritorio ----------------------------------------------------------- */

@media (min-width: 900px) {
  .login {
    /* El formulario algo más ancho que la marca: lo que se hace pesa más que
       lo que se mira. */
    grid-template-columns: 5fr 6fr;
  }

  .login__brand {
    gap: var(--space-6);
    padding: var(--space-12) var(--space-8);
    text-align: left;
  }

  .login__logo {
    width: min(17rem, 80%);
    margin: 0;
  }

  .login__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    /* Sobre el degradado, el blanco puro en un texto pequeño deslumbra. */
    color: rgb(255 255 255 / 0.85);
  }

  .login__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .login__points li::before {
    content: "✓";
    font-weight: var(--weight-semibold);
    color: #fff;
  }

  .login__form {
    padding: var(--space-12);
  }
}

/* --- Teléfono ------------------------------------------------------------- */

@media (max-width: 899px) {
  .login {
    /* La banda de marca se queda con lo que necesita y el formulario con el
       resto: así el campo de correo se ve sin desplazar. */
    grid-template-rows: auto 1fr;
  }

  .login__brand {
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
  }

  .login__claim {
    font-size: var(--text-sm);
    opacity: 0.9;
  }
}