/* Flujo de tenants: pantalla de eleccion, alta, borrado y el bloque Datos de la pagina General.
   Solo lo que es propio de estas pantallas: los componentes salen de components.css y las
   medidas, de tokens.css. La pagina General (bloques), proveedores, dominios, productos y
   usuarios van en tenant-sections.css. */

/* Columna de la pantalla de eleccion: busqueda y resultados. */
.tenant-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Ancho del campo de busqueda en la pantalla de eleccion. */
.tenant-picker__search {
  width: 360px;
  max-width: 100%;
}

/* Datos: el formulario es el contenedor de la grilla de dos columnas. Por debajo
   de 34rem de su propio ancho (no del viewport: con la barra lateral abierta o
   plegada el disponible cambia) la grilla se apila: nombre, productos, MFA y
   aviso (el orden lo fija el order de abajo, no el del DOM). */
.tenant-data__form {
  container-type: inline-size;
  container-name: tenant-data;
  min-width: 0;
}

/* Productos ocupa las dos columnas, debajo de Nombre y MFA: sus interruptores con
   el enlace "Roles y permisos" en una sola fila necesitan el ancho de la card. */
.tenant-data__productos {
  grid-column: 1 / -1;
}

@container tenant-data (max-width: 34rem) {
  .tenant-data__form .nb-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Apilado: nombre, productos, MFA y aviso, que es el orden del formulario. */
  .tenant-data__productos {
    order: 1;
  }

  .tenant-data__mfa {
    order: 2;
  }
}

/* Sin cambios el Guardar sigue en el titulo pero no se ofrece. visibility (y
   no display) reserva la caja, asi el titulo no salta al editar, y el boton
   queda fuera del tabulado. */
.tenant-data__save--hidden {
  visibility: hidden;
}

.tenants__kind {
  font: var(--nb-font-body-sm);
  color: var(--color-text-secondary);
}