/* ═══════════════════════════════════════════════════════════════════════════
   Clientes. Escopo .cl-*, só tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--bento-gap);
    margin-bottom: var(--bento-gap);
}
.cl-kpi { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.cl-kpi__valor { font-size: var(--text-h3); }

/* ── Painel ─────────────────────────────────────────────────────────────── */
.cl-panel { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.cl-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
}
.cl-toolbar .cl-search { width: 300px; max-width: 100%; }

.cl-filters {
    display: flex; gap: 2px; padding: 3px;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.cl-filter {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 34px; padding: 0 var(--space-4);
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-tertiary);
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
}
.cl-filter:hover { color: var(--text-primary); }
.cl-filter.is-active { background: var(--accent-muted); color: var(--accent); }
.cl-filter__n {
    font-size: var(--text-xs); font-weight: 700;
    padding: 1px 6px; border-radius: var(--radius-pill);
    background: var(--surface-1); color: inherit;
    font-variant-numeric: tabular-nums;
}

/* ── Cartão de cliente ──────────────────────────────────────────────────── */
.cl-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cl-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-3);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.cl-card:hover { border-color: var(--border-strong); background: var(--surface-4); }

.cl-avatar {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gradient-violet);
    background-size: 200% 200%;
    animation: ds-drift 24s var(--ease-inout) infinite;
    color: var(--accent-contrast);
    font-size: var(--text-h3); font-weight: 700;
}

.cl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-info__topo { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cl-nome {
    font-size: var(--text-body); font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-valor {
    font-size: var(--text-h3); font-weight: 700;
    color: var(--accent); white-space: nowrap;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}
.cl-acao { flex-shrink: 0; }

/* ── Erro ───────────────────────────────────────────────────────────────── */
.cl-erro { background: var(--danger-muted); color: var(--danger); }

/* ── Esqueleto de carregamento ──────────────────────────────────────────────
   Prefere-se ao texto "Carregando…": mantém a altura da lista estável, então
   o conteúdo não pula quando os dados chegam. */
.cl-card--skeleton { pointer-events: none; }
.cl-sk {
    background: linear-gradient(90deg,
        var(--surface-4) 0%, var(--surface-3) 50%, var(--surface-4) 100%);
    background-size: 200% 100%;
    animation: ds-flow 1.6s var(--ease-inout) infinite;
    border-radius: var(--radius-sm);
}
.cl-sk--avatar { width: 44px; height: 44px; border-radius: 50%; }
.cl-sk__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cl-sk--linha { height: 12px; width: 220px; max-width: 100%; }
.cl-sk--curta { width: 320px; opacity: 0.6; }
.cl-sk--botao { width: 150px; height: 34px; border-radius: var(--radius-pill); }

@media (prefers-reduced-motion: reduce) {
    .cl-sk, .cl-avatar { animation: none !important; }
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .cl-card {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-3);
    }
    .cl-valor { grid-column: 1 / -1; }
    .cl-acao  { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 640px) {
    .cl-toolbar { flex-direction: column; align-items: stretch; }
    .cl-toolbar .cl-search { width: 100%; }
    .cl-filters { justify-content: space-between; }
    .cl-filter { flex: 1; justify-content: center; padding: 0 var(--space-2); }
}