/* Secciones del detalle de tenant: la pagina General (bloques de dominios y
   productos), proveedores de identidad y usuarios, pantallas 2.4 a 2.20 y 2.22. Hoja aparte de tenants.css para que la
   lista y el detalle no se pisen con las secciones. Solo lo que es propio de estas
   pantallas: los componentes salen de components.css y las medidas, de tokens.css.

   Clases compartidas por los archivos de esta ola (prefijo tenant-section__):
   cada seccion arma su propia columna con 24px entre barra y tabla. General junta
   nombre, productos, MFA y dominios en la card "Informacion del tenant". */

.tenant-detail__general {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Datos y Dominios dentro de la card "Informacion del tenant", con 20px entre si. */
.tenant-detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* A 320 px la barra de la card mide unos 200 px y el titulo mas el Guardar piden unos 256:
   sin ajuste el Guardar se sale de la pantalla. Aqui el Guardar baja a su renglon, y el
   titulo toma el espacio libre. A 390 px, que ya entra, la barra queda como estaba. */
.tenant-detail__general .nb-section__barra {
  flex-wrap: wrap;
}

.tenant-detail__general .nb-section__barra > .nb-section__titulo {
  flex: 1 1 0;
}

.tenant-domains {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.tenant-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Proveedores: el aviso de "ya hay uno de cada tipo" y la tabla, con 16px entre si. */
.tenant-providers {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Sin aviso el hueco vacio no suma el gap: la tabla queda pegada a la cabecera. */
.tenant-providers > :empty {
  display: none;
}

/* Las notas de cada proveedor (avisos), con el mismo hueco que los campos federados. */
.tenant-providers__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tenant-providers__notes:empty {
  display: none;
}

/* Parrafo secundario generico (descripcion de un modal, mensaje de una seccion
   vacia dentro de un drawer), sin depender de las piezas internas del kit
   (.modal__text es de overlay.js). */
.tenant-section__description {
  color: var(--color-text-secondary);
  font: var(--nb-font-body-md);
}

/* Celda secundaria (fecha, el texto de Uso en Proveedores): mas chica y en
   text.secondary, distinta de la celda principal de la tabla. */
.tenant-section__cell-muted {
  color: var(--color-text-secondary);
  font: var(--nb-font-body-sm);
}

/* Campo de un solo uso (token de invitacion, enlace de contraseña) mas su boton
   "Copiar": 2.17 y 2.19. El campo crece, el boton mide lo suyo. */
.tenant-section__value-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.tenant-section__value-row > .text-field {
  flex: 1 1 auto;
  min-width: 0;
}

/* El hueco antes del primer dominio: explica el estado de confianza, no
   compite con el formulario que ya esta encima. */
.tenant-domains__empty {
  max-width: 65ch;
}

/* La fila cuyo estado acaba de cambiar se asienta con un fondo que vuelve al
   reposo. Sin movimiento, el status de la fila alcanza. */
@media (prefers-reduced-motion: no-preference) {
  .nb-table__fila[data-arrived] > .nb-table__td {
    animation: tenant-domain-settle var(--motion-duration-slow) ease-out;
  }
}

@keyframes tenant-domain-settle {
  from {
    background-color: var(--color-bg-selected);
  }
  to {
    background-color: transparent;
  }
}

/* Invitaciones pendientes (2.15): titulo + tabla con el mismo gap de 24px que
   separa las secciones entre si (V-M1). Sin esto, el margen por defecto del
   <h2> suma un aire que no es el del diseno: ni entre el titulo y su tabla, ni
   entre esta tabla y la de usuarios de arriba. */
.tenant-users__invitations {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tenant-users__invitations > h2 {
  margin: 0;
}

/* Productos: pares en linea que se envuelven. column-gap 40px entre pares. Dentro
   del par, el enlace "Roles y permisos" va 16px despues del interruptor y su
   nombre. */
.tenant-products__items {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-10);
  row-gap: var(--space-4);
}

.tenant-products__item {
  display: flex;
  align-items: center;
  /* Un nombre mas ancho que la card no debe desbordarla: el par se encoje
     y el texto parte. */
  min-width: 0;
  max-width: 100%;
}

.tenant-products__item > .nb-switch-field {
  flex: none;
}

.tenant-products__roles {
  margin-inline-start: var(--space-4);
}

/* Estado de error de Productos: el mensaje y el Reintentar, uno debajo del otro. */
.tenant-products__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Roles de un usuario (2.18): cada producto es su propio <form> (un Guardar por
   producto), con un gap de 12px entre el titulo, cada casilla y el boton. Las
   secciones del cajon no llevan separador: las separa el gap del cuerpo. */
.tenant-users__roles-product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* El fieldset agrupa las casillas de un producto para el lector de pantalla
   (R-B5): sin el reset, el navegador le suma su propio borde y relleno, que
   el diseno no dibuja. La legend hereda la tipografia del h3 que reemplaza. */
.tenant-users__roles-fieldset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.tenant-users__roles-fieldset > legend {
  padding: 0;
}

/* Campos de un proveedor federado dentro del cajon (2.10, 6.25): el mismo gap
   de 12 px que el cuerpo del drawer pone entre sus hijos. Sin esto quedaban
   pegados, porque el contenedor no es hijo directo del cuerpo sino uno mas. Con
   un proveedor local esta vacio y no suma un gap de mas. */
.tenant-providers__federated {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tenant-providers__federated:empty {
  display: none;
}

/* Insignia "Sin acceso" junto al nombre (D9): la cuenta la creo el alta
   automatica con un correo verificado y todavia no tiene otro rol que el guest.
   No es un estado de la cuenta (sigue activa), por eso va al lado del nombre y
   no en la columna Estado, con los colores de info del sistema. La de
   "Invitado" ya no se dibuja: lo dice la columna Roles. */
.tenant-users__guest-badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width-default) solid var(--color-info-border);
  border-radius: var(--radius-full);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
  font: var(--nb-font-body-sm);
  white-space: nowrap;
}

/* Columna Roles de Usuarios: un renglon por producto ("Producto: rol, rol
   (alcance)"), como mucho dos, y el "+N" de los que no entran al final del
   ultimo. Cada renglon se corta con elipsis en vez de partirse: la fila sigue
   en su alto, y el title de la celda y el texto oculto para lectores llevan la
   lista entera. El "+N" no se encoge, para que la elipsis no lo tape. */
.tenant-users__role-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tenant-users__role-line {
  display: flex;
  gap: var(--space-1);
  min-width: 0;
  font: var(--nb-font-body-sm);
}

.tenant-users__role-text {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-users__role-line > .tenant-section__cell-muted {
  flex: none;
}