/**
 * P-09 · Fila de lista — .scm-ui-row
 *
 * Listados que no son tabla: funciones, servidores, grupos, líderes.
 * El contenedor es la misma card de P-04.
 *
 * El aire de 18px de padding no es negociable. El sistema lo usan adultos que
 * confunden filas apretadas; la separación la hace el espacio, no la línea.
 */

.scm-ui-rows {
  border: 1px solid var(--scm-ui-line);
  border-radius: var(--scm-ui-r-lg);
  background: var(--scm-ui-surface);
  box-shadow: var(--scm-ui-sh-card);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scm-ui-row {
  display: grid;
  grid-template-columns: var(--scm-ui-row-cols, 44px minmax(0,1fr) auto);
  align-items: center;
  gap: var(--scm-ui-sp-4);
  padding: 18px 20px;
  border-bottom: 1px solid var(--scm-ui-line-2);
  background: var(--scm-ui-surface);
  transition: background .15s ease;
}

.scm-ui-rows > :last-child > .scm-ui-row,
.scm-ui-rows > .scm-ui-row:last-child,
.scm-ui-row:last-child {
  border-bottom: 0;
}

.scm-ui-row:hover {
  background: var(--scm-ui-surface-2);
}

/* ── Identidad ───────────────────────────────────────────────────── */
.scm-ui-row__id {
  min-width: 0;
}

/* Rol "Nombre de persona" (P-00). Familia del sistema y peso propio: 600, no
   el 700 del resto de titulos. Es el nombre que identifica la fila. */
.scm-ui-row__name {
  margin: 0;
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-fs-row);
  font-weight: var(--scm-ui-fw-person-name);
  letter-spacing: var(--scm-ui-lsp-row);
  line-height: var(--scm-ui-lh-name);
  color: var(--scm-ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scm-ui-row__meta {
  margin: 3px 0 0;
  font-size: var(--scm-ui-fs-meta);
  font-weight: var(--scm-ui-fw-soft);
  line-height: 1.35;
  color: var(--scm-ui-text-3);
}

/* Las cifras dentro de la meta van en 700 y en --scm-ui-text-2. */
.scm-ui-row__meta :where(strong, b) {
  font-weight: var(--scm-ui-fw-strong);
  color: var(--scm-ui-text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Controles de la derecha ─────────────────────────────────────── */
.scm-ui-row__ctrl {
  display: flex;
  align-items: center;
  gap: var(--scm-ui-sp-2);
  justify-content: flex-end;
}

/* ── Estado inactivo ─────────────────────────────────────────────────
   La fila sigue siendo legible y accionable — no se esconde ni se difumina
   entera.                                                              */
.scm-ui-row.is-inactive {
  background: var(--scm-ui-row-inactive);
}

.scm-ui-row.is-inactive .scm-ui-row__name {
  color: var(--scm-ui-text-3);
}

.scm-ui-row.is-inactive .scm-ui-avatar {
  filter: grayscale(1);
  opacity: .5;
}

/* ── Móvil ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .scm-ui-row {
    grid-template-columns: var(--scm-ui-row-cols-sm, 38px minmax(0,1fr) auto);
    gap: var(--scm-ui-sp-3);
    padding: 12px 14px;
  }

  .scm-ui-row__ctrl {
    gap: 9px;
  }
}