/*
 * Pantallas de acceso y cuenta (/acceso, /acceso/enlace, /cuenta y /cuenta/organizacion).
 *
 * Solo usa los tokens de tokens.css y los componentes de componentes.css; aquí van las
 * pocas piezas propias de estas pantallas. Sin colores sueltos, sin recursos externos.
 */

.pagina-acceso {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.pagina-acceso > * {
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.pagina-acceso--ancha {
  max-width: var(--ancho-contenido);
}

.pagina-acceso__passkey {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding-bottom: var(--esp-5);
  border-bottom: 1px solid var(--color-borde);
}

.pagina-acceso__bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
}

.pagina-acceso__bloque > * {
  margin-top: 0;
  margin-bottom: 0;
}

.pagina-acceso h1:focus {
  outline: none;
}

/* Datos de la persona: etiqueta y valor en dos columnas que se apilan en pantallas estrechas. */
.datos {
  display: grid;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-4);
}

.datos > div {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: var(--esp-3);
}

.datos dt {
  color: var(--color-secundario);
  font-weight: 600;
}

.datos dd {
  margin: 0;
}

@media (max-width: 30rem) {
  .datos > div {
    grid-template-columns: 1fr;
    gap: var(--esp-1);
  }
}

.lista-organizaciones,
.lista-simple {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-organizaciones .boton {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* Modo de desarrollo: el enlace de entrada se enseña en el login (nunca en producción). */
.enlace-dev {
  overflow-wrap: anywhere;
  word-break: break-all;
}