/* =========================================================================
   Pantallas de acceso: iniciar sesión y restablecer contraseña.

   Las cinco usan el mismo ancho, así pasar de una a otra no "brinca".

   "¿Olvidó su contraseña?" va DEBAJO del campo de contraseña, alineado a
   la izquierda, como en Google y Microsoft. No en el renglón de la
   etiqueta: ahí queda antes del campo en el orden del teclado, y quien
   escribe su correo y presiona Tab cae en el enlace en vez de en la
   contraseña (queja documentada en GitHub y en varios proyectos).
   Pegado al campo y lejos de los botones a propósito: la cercanía dice a
   qué pertenece.
   ========================================================================= */
.acceso { max-width: 440px; margin: 0 auto; }
/* El área de contenido toma el ancho de lo que trae adentro; sin esto, una
   tarjeta con poco texto (el acceso interno, sin "Crear cuenta") se
   encogía. Con el ancho completo, la tarjeta mide siempre sus 440 px. */
body:has(.acceso) .lienzo { width: 100%; }

.enlace-discreto { align-self: flex-start; margin-top: .2rem;
  font-size: .85rem; font-weight: 500; text-decoration: none;
  color: var(--acento-texto, var(--acento)); }
.enlace-discreto:hover { text-decoration: underline; }
.enlace-discreto:focus-visible { outline: 2px solid var(--acento);
  outline-offset: 2px; border-radius: 2px; }

/* El texto de las pantallas de restablecer: un poco más de aire antes de
   los campos o los botones, para que la instrucción se lea aparte. */
.acceso__texto { margin: 0 0 1.25rem; color: var(--tinta-suave); font-size: .92rem; }

/* En celular los dos botones caben en un renglón si no se parten; si no
   caben, el segundo baja completo en vez de partir su texto en dos. */
.acceso .acciones { flex-wrap: wrap; }
.acceso .acciones .boton { white-space: nowrap; }
@media (max-width: 480px) {
  .acceso .acciones .boton { flex: 1 1 auto; justify-content: center; }
}