/* ================================================================
   clientes-table.css
   ================================================================
   Reutiliza los estilos de .tx-card / .tx-table de transactions-table.css.
   Solo agregamos lo específico:
*/

bm-clientes-table {
  display: block;
}

/* Columna de modelos: puede ser larga (varios modelos con separador "·").
   Limitamos ancho y dejamos que se trunque elegantemente. */
bm-clientes-table .tx-modelos {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En tablas grandes el Id_Cliente se ve mejor con tipografía monospace */
bm-clientes-table .tx-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
}

/* ─── Toolbar header con search input — v6.12.4 ─────────────── */
bm-clientes-table .tx-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
bm-clientes-table .tx-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
bm-clientes-table .tx-search {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: #111827;
  background: #fff;
  width: 240px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
bm-clientes-table .tx-search::placeholder {
  color: #9ca3af;
}
bm-clientes-table .tx-search:focus {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

/* ─── Headers sortables — v6.12.4 ────────────────────────────── */
bm-clientes-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.1s;
}
bm-clientes-table th.sortable:hover {
  background: rgba(4, 120, 87, 0.04);
}
bm-clientes-table th.sortable.active {
  color: #047857;
}
bm-clientes-table th .sort-icon {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.7em;
  color: #9ca3af;
  vertical-align: middle;
}
bm-clientes-table th.sortable.active .sort-icon {
  color: #047857;
}