/* Configuracion y sus pestanas, y el catalogo de permisos de cada producto.
   Los componentes salen de components.css y las medidas, de tokens.css: aca
   solo lo que es propio de estas pantallas. */

/* Solapas, bajada y tabla: el espacio entre la barra y la bajada es el de la
   pantalla. */
.settings-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* El contador va dentro de la solapa: en reposo, gris; en la elegida, en el
   color de marca. */
/* La bajada y la tabla: la pantalla deja space-3 entre las dos. */
.settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
  font: var(--typography-label-xs);
}

.selection-mark[aria-selected="true"] .settings-tab__count {
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
}

.settings-secret {
  color: var(--color-text-secondary);
  font: var(--typography-body-sm);
}

/* Estado y etiqueta apilados: un permiso reservado es Activo o Deprecado, y
   debajo, la marca Reservado. */
.settings-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.settings-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
  font: var(--typography-label-xs);
}

/* Titulo de bloque del catalogo: Permisos y Roles de sistema. */
.settings-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-block__title {
  color: var(--color-text-primary);
  font: var(--typography-title-sm);
}