/* =====================================================================================
 * Tela do cliente (#cliente?id=N, 24/10/2026) — substitui a gaveta "Cliente · Visão 360".
 * Usa as classes da tela do negócio (crm-negocio.css: .crm-ng, .crm-ng-cab, .crm-ng-sec, .crm-ng-tbl…) e acrescenta só o
 * que é dela (.crm-cl-*). Só tokens do portal-2026.css (claro e escuro); nenhuma cor fixa.
 * ===================================================================================== */

#crmClienteHost, .crm-cl-ctx {
  --crm-warn-ink: color-mix(in srgb, var(--amber) 62%, var(--ink));
  --crm-warn-line: color-mix(in srgb, var(--amber) 40%, transparent);
  --crm-good-line: color-mix(in srgb, var(--good) 36%, transparent);
  --crm-err-ink: color-mix(in srgb, var(--red) 84%, var(--ink));
}
/* a tela ocupa a área inteira de conteúdo (como a do negócio) */
html body .main .content:has(> #page-cliente.active) { padding: 0 !important; }
html body .main .content > #page-cliente.active { padding: 0 !important; margin: 0; }

.crm-cl { height: calc(100dvh - var(--crm-ng-topo, 94px)); }
.crm-cl-cab { gap: 8px; padding: 10px 16px; }
.crm-cl-cab .crm-ng-nome strong { font-size: 16.5px; }
.crm-cl-meta { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
.crm-cl-meta b { color: var(--ink); font-weight: 700; }
.crm-cl-cred { max-width: 100%; min-width: 0; }

.crm-cl-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.crm-cl-nav {
  flex: none; display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; scrollbar-width: thin;
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
}
.crm-cl-nav .crm-ng-fchip { flex: none; }
.crm-cl-painel { flex: 1; min-height: 0; overflow: auto; outline: none; }
.crm-cl-painel > .crm-ng-pn { max-width: 1180px; margin: 0 auto; padding: 14px 16px 28px; }

.crm-cl-cred-kv { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.crm-cl-conv-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.crm-cl-conv-t small { color: var(--ink-2); font-size: 11.5px; }
.crm-cl-nf-itens > td { background: var(--bg-2); }
.crm-cl-serasa { min-height: 60px; }

/* Pesquisa na internet (seção Dados): a aba "Pesquisas" da gaveta antiga */
.crm-cl-pq-barra { margin: 0 0 10px; }
.crm-cl-pq-barra > .crm-ng-faint { flex: 1; min-width: 200px; font-size: 11.5px; }
.crm-cl-pq { border-top: 1px solid var(--line-soft); padding: 10px 0 4px; min-width: 0; }
.crm-cl-pq-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; margin-bottom: 6px; }
.crm-cl-pq > .crm-ng-tags { margin-bottom: 8px; }
.crm-cl-pq .crm-ng-tag { overflow-wrap: anywhere; }
.crm-cl-pq-corpo { font-size: 13px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.crm-cl-pq-corpo p { margin: 0 0 6px; }
.crm-cl-pq-campo { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 2px 12px; margin-bottom: 6px; }
.crm-cl-pq-campo > span { font-size: 11px; font-weight: 700; color: var(--ink-3); padding-top: 2px; }
.crm-cl-pq-fontes { margin-top: 6px; font-size: 12px; min-width: 0; }
.crm-cl-pq-fontes > span { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.crm-cl-pq-fontes ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.crm-cl-pq-fontes li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-cl-pq-fontes a { font-weight: 600; }

@media (max-width: 700px) {
  .crm-cl { height: auto; min-height: calc(100dvh - var(--crm-ng-topo, 94px)); overflow: visible; }
  .crm-cl-corpo { flex: none; }
  .crm-cl-painel { overflow: visible; }
  .crm-cl-cab { padding: 10px 16px; }
  .crm-cl-cab .crm-ng-h1 { flex-wrap: wrap; }
  .crm-cl-cab .crm-ng-acoes { width: 100%; }
  .crm-cl-cab .crm-ng-acoes .crm-ng-btn { flex: 1; }
  .crm-cl-cab .crm-ng-l1 { flex-wrap: wrap; }
  .crm-cl-cab .crm-ng-nome strong { white-space: normal; }
  /* a tela do negócio esconde a linha de dados e os chips no celular (abre pela seta); aqui o cabeçalho é curto e
     fica inteiro: CNPJ, Uniplus, cidade, carteira e o crédito sempre à vista */
  .crm-cl-cab .crm-ng-meta { display: flex; }
  .crm-cl-cab .crm-ng-h2 { display: flex; flex-wrap: wrap; overflow: visible; }
  .crm-cl-cred .crm-ng-cred-txt { white-space: normal; text-align: left; }
  .crm-cl-cred { height: auto; min-height: 28px; padding: 4px 10px; }
  .crm-cl-nav { padding: 8px 16px; position: sticky; top: 0; z-index: 2; }
  .crm-cl-painel > .crm-ng-pn { padding: 12px 16px 24px; }
  .crm-cl-pq-campo { grid-template-columns: minmax(0, 1fr); }

  /* tabelas viram cartões (rótulo em cima do valor): no celular nada fica escondido na rolagem lateral da tabela.
     Os rótulos vêm do cabeçalho da tabela (data-l, posto pelo crm-cliente-ui.js). Só os filhos diretos: a tabela de
     itens da NF, dentro de um cartão, continua tabela. */
  .crm-ng-tbl-wrap:has(> .crm-cl-cartoes) { overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .crm-cl-cartoes, .crm-cl-cartoes > tbody { display: block; }
  .crm-cl-cartoes > thead { display: none; }
  .crm-cl-cartoes > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 12px; margin-bottom: 8px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  }
  .crm-cl-cartoes > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .crm-cl-cartoes > tbody > tr > td.num { text-align: left; }
  .crm-cl-cartoes > tbody > tr > td[data-l]:not([data-l=""])::before {
    content: attr(data-l); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3);
  }
  .crm-cl-cartoes > tbody > tr > td[data-l=""] { grid-column: 1 / -1; }
  .crm-cl-cartoes > tbody > tr > td .crm-ng-btn { width: 100%; justify-content: center; }
  .crm-cl-cartoes > tbody > tr.crm-cl-nf-itens { display: block; margin-top: -4px; padding: 8px 10px; }
  .crm-cl-cartoes > tbody > tr.crm-cl-nf-itens > td { display: block; background: transparent; overflow-x: auto; }
}

/* detalhe do crédito do vendedor (tela do negócio): uma coluna só */
.crm-ng-cred-grade--um { grid-template-columns: minmax(0, 1fr); }