/**
 * P-04 · Tabla y fila — .scm-ui-table, .scm-ui-table-wrap
 *
 * Cero bordes verticales: la separación entre columnas la hace el espacio.
 * Un único separador horizontal por fila; la última no lo lleva.
 * La cabecera no compite con el dato.
 *
 * .scm-ui-table-wrap es el único mecanismo de scroll horizontal del sistema y
 * sustituye a los 15 puntos sueltos de overflow-x: auto que existen hoy.
 */

.scm-ui-table-wrap {
  width: 100%;
  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;
}

/* El scroll se activa solo cuando la tabla lo declara (salida "scroll
   horizontal" de P-04); no es el comportamiento por defecto. */
.scm-ui-table-wrap--scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scm-ui-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--scm-ui-font);
  color: var(--scm-ui-text);
}

.scm-ui-table :where(th) {
  padding: 12px 20px;
  background: var(--scm-ui-surface-2);
  border-bottom: 1px solid var(--scm-ui-line);
  color: var(--scm-ui-text-3);
  /* Mínimo del sistema. La cabecera no compite con el dato por color, peso y
     versalita, no por tamaño: bajarla a 11px la dejaba fuera de la escala sin
     necesidad. Unificado en la versión 1.3 del documento. */
  font-size: var(--scm-ui-fs-badge);
  font-weight: var(--scm-ui-fw-strong);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.scm-ui-table :where(td) {
  padding: 14px 20px;
  border-bottom: 1px solid var(--scm-ui-line-2);
  font-size: var(--scm-ui-fs-meta);
  vertical-align: middle;
}

.scm-ui-table :where(tbody tr:last-child td) {
  border-bottom: 0;
}

/* Hover de fila completa, nunca de celda. */
.scm-ui-table :where(tbody tr):hover {
  background: var(--scm-ui-surface-2);
}

/* ── Utilidades de columna ───────────────────────────────────────── */
.scm-ui-table__num {
  font-variant-numeric: tabular-nums;
}

.scm-ui-table__actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

/* Mismo rol "Nombre de persona" que .scm-ui-row__name de P-09: la columna de
   nombre de una tabla y el nombre de una fila de lista son el mismo dato, asi
   que comparten familia, tamano, peso, tracking e interlineado. Cualquier
   tabla nueva del sistema consigue esto con solo poner la clase en su celda
   de nombre. */
.scm-ui-table__name {
  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);
  white-space: nowrap;
}

.scm-ui-table__meta {
  color: var(--scm-ui-text-3);
}

/* Salida móvil "resumir u ocultar columnas": la columna marcada desaparece
   cuando hay una que manda y el resto es contexto prescindible. */
@media (max-width: 768px) {
  .scm-ui-table :where(th, td) {
    padding: 12px 14px;
  }

  .scm-ui-table__hide-sm {
    display: none;
  }
}

/* ── Variante `--flush`: la tabla dentro de una card ──────────────────
   Cuando la tabla ya vive dentro de una card —que trae su propio fondo,
   borde, radio y sombra—, el envoltorio dibuja una SEGUNDA caja dentro de
   la primera: el doble reborde que se ve a 1px del borde de la sección.

   La variante lo retira. No cambia nada más del patrón: cabecera,
   divisores, paddings y la salida de desplazamiento de `--scroll` siguen
   siendo los mismos. La caja la pone la card; la tabla, sus filas.

   `overflow: hidden` también se retira: solo servía para que el radio
   recortara las esquinas de la cabecera, y sin radio no hay nada que
   recortar. Cuando se combina con `--scroll`, el `overflow-x: auto` de esa
   variante sigue mandando porque llega después en el archivo. */
.scm-ui-table-wrap--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.scm-ui-table-wrap--flush.scm-ui-table-wrap--scroll {
  overflow-x: auto;
  overflow-y: visible;
}

/* Sin caja, la cabecera pierde su recorte redondeado y compite con el borde
   de la card: se queda sin relleno de superficie y su único trazo es el
   divisor inferior, que es lo que separa cabecera de datos. */
.scm-ui-table-wrap--flush .scm-ui-table :where(th) {
  background: transparent;
}

/* Los datos se alinean con el contenido de la card: el relleno lateral de
   la primera y la última columna sale del padding de la sección, no del de
   la celda. */
.scm-ui-table-wrap--flush .scm-ui-table :where(th, td):first-child {
  padding-left: 0;
}

.scm-ui-table-wrap--flush .scm-ui-table :where(th, td):last-child {
  padding-right: 0;
}