/* cockgit — nova-clientes.css
   vista /nova · tela CLIENTES: o cadastro em CARDS. O porquê do desenho (e do
   status derivado) está no cabeçalho de js/app-nova-clientes.js.

   Arquivo próprio porque `nova.css` está a ~47,5KB e o teto POR ARQUIVO é 48KB.
   CARD, NÃO TABELA: sem coluna, sem linha de grade, sem cabeçalho fixo — nada que
   peça leitura em varredura. A ORDEM dos cards (que o JS decide) é a única
   hierarquia, porque card não tem coluna para ordenar. */

#nv:not([data-tela="clientes"]) #nv-clientes{display:none}
#nv-clientes{padding:0 16px 20px}
#nv-clientes .nv-cap{margin:14px 0 10px}

/* a barra de cadastro: um form só, em dois modos (incluir / associar). Desenhada
   UMA vez por `_nvClCasca` e nunca no render — esta tela repinta pelo poll e pelo
   canal, e reescrever o form comeria o foco e o texto no meio da digitação. */
.nv-cl-barra{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--ruleS);background:var(--surface);padding:12px 14px}
.nv-cl-barra .rot{font-size:var(--t-cap);letter-spacing:.12em;text-transform:uppercase;
  color:var(--p3);flex:none}
/* 44px de alvo de toque e letra grande: esta tela é para agir, e o dono usa no
   celular. Os campos crescem juntos para não virar três caixinhas apertadas. */
.nv-cl-barra input,.nv-cl-barra select{min-height:44px;font-size:var(--t-dat);
  flex:1 1 180px;min-width:0;background:var(--surface2)}
.nv-cl-barra button{min-height:44px;padding:6px 16px;font-size:var(--t-dat)}
.nv-cl-barra input[hidden]{display:none}
.nv-cl-msg{min-height:1.3em;font-size:var(--t-cap);color:var(--p3);margin:8px 0 2px;
  word-break:break-word}
.nv-cl-msg.ok{color:var(--accent)}
.nv-cl-msg.bad{color:var(--p0)}
.nv-cl-conta{font-size:var(--t-cap);color:var(--p3);margin:10px 0}

/* A GRADE. `auto-fill` com mínimo de 260px: no desktop cabem 3–4 cards por
   fileira, e a 390px UM por fileira sem nenhuma media query — a coluna única do
   celular sai da mesma regra, e é por isso que ela não quebra quando a tela
   ganha um card a mais. */
.nv-cl-cards{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.nv-cl-card{border:2px solid var(--border);background:var(--surface);padding:12px 14px 13px;
  display:flex;flex-direction:column;gap:9px;min-width:0}
.nv-cl-card header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.nv-cl-card h3{font-family:var(--display);font-size:var(--t-sec);font-weight:400;
  margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
/* a cor da BORDA repete o status: quem bate o olho vê o estado antes de ler o selo */
.nv-cl-card.ativo{border-color:var(--accent)}
.nv-cl-card.prospect{border-color:var(--accent2);border-style:dotted}
.nv-cl-card.fora,.nv-cl-card.frio{border-style:dashed;opacity:.86}

/* o SELO de status — derivado do mesmo mapa da Sala de Vidro, nunca um campo */
.nv-cl-st{margin-left:auto;font-size:var(--t-cap);letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--p3);color:var(--p3);
  padding:2px 8px 3px;white-space:nowrap;cursor:help}
.nv-cl-st.ok{border-color:var(--accent);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 10%,transparent)}
.nv-cl-st.prosp{border-color:var(--accent2);color:var(--accent2)}
.nv-cl-st.fora,.nv-cl-st.frio{border-style:dashed}
.nv-cl-nicho{margin:0;font-size:var(--t-cap);color:var(--muted)}

/* os PROJETOS como chips: cada um é a pasta que ele leva à mesa */
.nv-cl-projs{display:flex;gap:6px;flex-wrap:wrap}
.nv-cl-proj{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  border:1px solid var(--p2);color:var(--p2);font-size:var(--t-cap);
  padding:3px 4px 4px 9px;background:color-mix(in oklab,var(--p2) 8%,transparent)}
.nv-cl-proj.viva{border-color:var(--accent);color:var(--accent);
  background:color-mix(in oklab,var(--accent) 12%,transparent)}
.nv-cl-proj.fora{border-style:dashed;opacity:.7}
/* o × de desassociar: 32px é o mínimo que ainda cabe DENTRO do chip; o alvo de
   44px vale para os botões de ação do card, que são os gestos de verdade. */
.nv-cl-proj button{min-height:32px;min-width:32px;padding:0 4px;border:0;
  background:none;color:inherit;font-size:var(--t-dat);line-height:1;opacity:.7}
.nv-cl-proj button:hover{opacity:1;color:var(--p0)}
.nv-cl-vazio{font-size:var(--t-cap);color:var(--p3);font-style:italic}

.nv-cl-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.nv-cl-acoes button{min-height:44px;padding:4px 12px;font-size:var(--t-cap);
  flex:1 1 auto}
.nv-cl-nada{border:1px dashed var(--ruleS);padding:16px;color:var(--p3);
  font-size:var(--t-dat);line-height:1.5}

@media (max-width:820px){
  #nv-clientes{padding:0 12px 20px}
  /* a grade já cai para uma coluna sozinha (minmax de 260px); aqui só a barra,
     que em duas linhas fica mais legível do que três campos espremidos */
  .nv-cl-barra{gap:8px}
  .nv-cl-barra input,.nv-cl-barra select{flex:1 1 100%}
  .nv-cl-barra button{width:100%}
}