/* #/clientes — grid de tarjetas de cliente. */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.client-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.client-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.client-card:active { transform: translateY(1px); }

.client-card-logo {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  object-fit: contain;
  background: var(--bg-soft);
}
/* El placeholder de iniciales es del componente (components.css); aquí solo el
   tamaño de fuente que le corresponde en la tarjeta. */
.client-card-logo.client-logo-ph { font-size: var(--fs-md); }

.client-card-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.client-card-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.2;
}
.client-card-contract { font-size: var(--fs-xs); }
.client-card-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.client-card-foot { font-size: var(--fs-xs); }

.client-card-del {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--t), background var(--t), color var(--t);
}
.client-card:hover .client-card-del { opacity: 1; }
.client-card-del:hover { background: #fff2f1; color: var(--red); border-color: var(--red); }

/* Candidatos en el modal de importación */
.import-candidates { display: flex; flex-direction: column; gap: var(--sp-2); }
.import-candidate {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.import-candidate:hover { background: var(--bg-hover); border-color: var(--text); }
.import-candidate-web { font-size: var(--fs-xs); }

/* Línea de recuento sobre la rejilla (con filtros + carga por scroll, el total
   deja de ser evidente a ojo). */
.clients-count {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.clients-count:empty { display: none; }

/* Chip de "sin producto activo": mismo tamaño que los demás, en gris. */
.chip-muted { color: var(--text-soft); border-style: dashed; }

/* Centinela del render por lotes: ocupa una fila entera de la rejilla para no
   robar una celda a las tarjetas. */
.clients-grid > .chunk-sentinel { grid-column: 1 / -1; height: 1px; }

/* Barra de filtros por producto (casillas combinables). Los cuatro grupos son
   disjuntos y se combinan en OR: ninguno marcado = todos. */
.filter-checks {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.filter-checks-label { font-size: var(--fs-sm); margin-right: var(--sp-1); }

.filter-check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--t), border-color var(--t);
}
.filter-check:hover { background: var(--bg-hover); }
.filter-check input { accent-color: var(--accent); cursor: pointer; margin: 0; }
/* Marcada: se invierte, igual que el resto de estados activos de la app. */
.filter-check:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-inv);
}
/* Sobre el chip invertido, la casilla nativa se pinta al revés para que no
   desaparezca contra el fondo negro. */
.filter-check:has(input:checked) input { accent-color: var(--accent-inv); }
.filter-check:has(input:checked) .filter-check-count { color: var(--accent-inv); opacity: 0.75; }
.filter-check:has(input:disabled) { opacity: 0.45; cursor: default; }
.filter-check:has(input:disabled):hover { background: var(--bg); }

.filter-check-count { font-size: var(--fs-xs); color: var(--text-soft); }

.filter-checks-clear { margin-left: auto; }
.filter-checks-clear[disabled] { visibility: hidden; }