/* Roles y permisos, pantallas 6.1 a 6.28: la pagina de un producto del tenant
   (pestanas Roles, Asignaciones, Alcances y Auditoria; el cajon de un rol con
   su matriz de permisos y el detalle de un cambio), el catalogo de un producto
   en Configuracion, el enlace de General > Productos, el alta automatica del
   proveedor, los roles de una aplicacion, los roles de un usuario, invitar con
   roles iniciales y el filtro de Usuarios. Solo la
   composicion propia de estas pantallas: los componentes salen de
   components.css y las medidas, de tokens.css.

   Prefijos: tenant-product__ para la pagina del producto; rbac- para lo que se
   repite en varias de estas pantallas (descripcion de un bloque, "—", las
   notas, los grupos de permisos). */

/* Pestanas y panel: 24 px (space.6) entre la linea de las pestanas y el
   contenido; entre bloques del panel, los 24 de siempre. */
.tenant-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

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

/* Selector de alcance: 360 px (sizing fix, sin token), el mismo
   ancho que la busqueda de 2.1 y el campo de dominios. Su ayuda parte a ese
   ancho. */
.tenant-product__scope {
  width: 360px;
  max-width: 100%;
}

/* El cuerpo de un drawer es una columna flex: sin esta fila, el enlace se
   estiraria a todo el ancho. */
.rbac-app-roles__link {
  display: flex;
}

/* Bloque con titulo (Roles en {producto}): 12 px entre el titulo y lo que
   sigue, como los bloques de la pagina General. */
.rbac-app-roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.rbac-block__title {
  color: var(--color-text-primary);
  font: var(--nb-font-title-md);
}

/* Descripcion de un bloque: 720 px de ancho maximo (unos 75 caracteres de
   body.sm), medida de la especificacion 6.x, sin token. */
.rbac-description {
  max-width: 720px;
  color: var(--color-text-secondary);
  font: var(--nb-font-body-sm);
}

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

/* "—", "Cargando…": un valor que no esta. */
.rbac-none {
  color: var(--color-text-tertiary);
}

/* Permisos de un rol (6.5): un grupo debajo del otro, cada permiso en dos
   renglones (rotulo y clave). */
.rbac-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rbac-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rbac-group__title {
  color: var(--color-text-primary);
  font: var(--nb-font-label-md);
}

.rbac-permissions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rbac-permission {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rbac-permission__label {
  color: var(--color-text-primary);
  font: var(--nb-font-body-md);
}

.rbac-permission__key {
  color: var(--color-text-tertiary);
  font: var(--nb-font-body-sm);
  overflow-wrap: anywhere;
}

/* General > Productos (6.21): el enlace va entre el nombre y el interruptor. El
   interruptor ya trae su propio aire a la izquierda (el gap del .switch); del
   lado del nombre se pone el mismo. */
.tenant-products__roles {
  display: flex;
  flex: none;
  margin-inline-start: var(--space-4);
}

/* Usuarios (6.28): el filtro "Mostrar" mide lo mismo que el selector de
   alcance; la linea de resultado queda a 12 px de la tabla. */
.tenant-users__filter {
  width: 360px;
  max-width: 100%;
}

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

/* Filtros de Asignaciones y Auditoria (6.11, 6.13): en fila, 16 px entre si y
   280 px cada uno (sizing fix, sin token). La linea de resultado va 12 px
   arriba de la tabla. */
.rbac-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.rbac-filters__field {
  width: 280px;
  max-width: 100%;
}

.rbac-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Un dato de solo lectura en un formulario (el alcance de un rol que ya
   existe, 6.4): rotulo, valor y ayuda, sin caja. */
.rbac-static {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rbac-static__label {
  color: var(--color-text-secondary);
  font: var(--nb-font-label-sm);
}

.rbac-static__value {
  color: var(--color-text-primary);
  font: var(--nb-font-body-md);
}

.rbac-static__help {
  color: var(--color-text-tertiary);
  font: var(--nb-font-body-sm);
}

/* Matriz de permisos del cajon de un rol (6.3, 6.4): la cuenta total al lado
   del titulo, un grupo debajo del otro con 24 px entre si, y en cada grupo el
   nombre, su cuenta y "Elegir todos" a la derecha; las casillas en dos
   columnas (16 horizontal, 12 vertical). Los deprecados, a todo el ancho. */
.rbac-matrix__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.rbac-matrix__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rbac-matrix__title-row,
.rbac-matrix__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.rbac-matrix__total,
.rbac-matrix__count {
  color: var(--color-text-tertiary);
  font: var(--nb-font-body-sm);
}

.rbac-matrix__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rbac-matrix__name {
  color: var(--color-text-primary);
  font: var(--nb-font-label-md);
}

.rbac-matrix__toggle {
  display: flex;
  margin-inline-start: auto;
}

.rbac-matrix__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.rbac-matrix__deprecated {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* En un drawer angosto (o una pantalla chica) las dos columnas no entran. */
@media (max-width: 640px) {
  .rbac-matrix__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Detalle de un cambio de la auditoria (6.14): cada diferencia con su marca
   en una columna de 128 px (el ancho de Estado de las tablas), y el antes y el
   despues en dos columnas iguales con 24 px entre si. Lo que cambio va en el
   color primario; lo demas, en el secundario. */
.rbac-audit__changes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rbac-audit__line {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

/* Datos del detalle de un cambio (6.14): la columna de claves mide 160 px
   (fila-campo-valor), no los 96 del kit, y "Id de correlacion" no entra en 96:
   estiraba su fila y corria su valor fuera de la columna. */
.rbac-audit__facts .key-value-row__key {
  width: 160px;
}

.rbac-audit__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.rbac-audit__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.rbac-audit__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rbac-audit__item {
  color: var(--color-text-secondary);
  font: var(--nb-font-body-md);
}

.rbac-audit__item--changed {
  color: var(--color-text-primary);
}

/* Id de correlacion: cifras tabulares, como todo codigo de la consola. */
.rbac-code {
  font: var(--typography-code-md-font-weight) var(--typography-code-md-font-size)/var(--typography-code-md-line-height) var(--typography-code-md-font-family);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* El lugar del error de Invitar: vacio no ocupa lugar, si no el gap del
   cuerpo del modal lo sumaba y bajaba el correo 12 px (6.19). */
.rbac-invite__alert:empty {
  display: none;
}

/* Invitar con roles iniciales (6.19, 6.20): cada fila de rol con su alcance
   en dos columnas iguales (16 px), y el boton de quitar al final. */
.rbac-invite__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rbac-invite__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Siempre media fila: sin alcance, el rol ocupa la primera columna (6.20). */
.rbac-invite__field {
  flex: 0 1 calc((100% - var(--space-4)) / 2);
  min-width: 0;
}

/* El boton de quitar queda a la altura de la caja del select, no del rotulo:
   baja lo que mide el rotulo (label.sm) y el gap del campo. */
.rbac-invite__remove {
  display: flex;
  flex: none;
  padding-top: calc(var(--typography-fontsize-2xs) * var(--typography-lineheight-snug) + var(--space-2) + (var(--size-field-md) - var(--size-control-md)) / 2);
}

.rbac-invite__add {
  display: flex;
}

.rbac-invite__add:empty {
  display: none;
}

@media (max-width: 640px) {
  .rbac-invite__row {
    flex-direction: column;
    align-items: stretch;
  }

  .rbac-invite__remove {
    padding-top: 0;
  }
}

/* Roles de un usuario (6.17): el alcance a todo el ancho del cajon (el
   bloque alinea sus hijos al inicio, para que el boton no se estire), y el
   aviso entre el alcance y las casillas; vacio, no ocupa lugar. */
.tenant-users__roles-scope {
  align-self: stretch;
}

.tenant-users__roles-alert:empty {
  display: none;
}

/* Tablas con muchas columnas fijas (rbacTable() de rbac-shared.js). En una
   pantalla angosta la tabla del kit mide al menos 560 px; con 500 o 600 px de
   columnas fijas, la columna de ancho libre quedaba en cero y su texto se
   partia letra por letra. El contenedor le da un minimo con lugar para esa
   columna (unos 240 px) y se desplaza de costado. */
@media (max-width: 640px) {
  .rbac-table {
    overflow-x: auto;
  }

  .rbac-table > .table {
    min-width: 760px;
  }

  .rbac-table[data-ancho="amplio"] > .table {
    min-width: 880px;
  }
}