/* =====================================================================
 *  KRIGGING - tela de CLIENTES E OBRAS (TELAS.clientes, em public/js/app.js).
 *
 *  A tela e uma LISTA (pedido do dono, 13/10/2026: "hoje esta em cards, muda
 *  para lista, mais limpo visualmente, mais organizado"): a tabela padrao da
 *  casa, com o alternador Clientes | Obras no topo.
 *
 *  Toda classe daqui comeca por `co-`. Cor, so por token.
 * ===================================================================== */

/* ---- a barra: alternador Clientes | Obras, a busca unica e a situacao --- */
.filtros.co-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:10px }
.filtros.co-barra input[type="search"]{ flex:1 1 320px; min-width:0; height:42px; box-sizing:border-box; padding-top:0; padding-bottom:0 }
.filtros.co-barra select{ flex:none; height:42px; box-sizing:border-box; padding-top:0; padding-bottom:0 }

.co-visao{
  display:inline-flex; flex:none; padding:3px; gap:3px; height:42px; box-sizing:border-box;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio-sm);
}
.co-visao-btn{
  display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--cinza);
  padding:0 16px; border-radius:6px; min-width:118px; justify-content:center;
}
.co-visao-btn:hover{ color:var(--azul-2) }
.co-visao-btn[aria-pressed="true"]{ background:var(--azul-2); color:var(--branco) }
.co-visao-btn:focus-visible,.co-link:focus-visible{ outline:2px solid var(--azul-2); outline-offset:2px }
.co-conta{
  display:inline-block; min-width:22px; padding:1px 7px; border-radius:var(--raio-pill); box-sizing:border-box;
  font-size:12px; font-weight:700; text-align:center; background:var(--azul-claro); color:var(--azul);
}
/* "12 de 386 clientes", no fim da barra, como nas outras listagens. */
.filtros .co-contagem{ flex:none; margin-left:auto; white-space:nowrap }
.co-contagem:empty{ display:none }

/* ---- a lista ------------------------------------------------------------ */
/* Campo em branco: um traco discreto, para a linha nao parecer quebrada. */
.co-nada{ color:var(--cinza-2) }
/* CNPJ e a contagem de obras nao quebram no meio. */
.co-cnpj,.co-obras{ white-space:nowrap }
/* E-mail comprido nao empurra os botoes para fora da tela: corta com reticencias, e o inteiro fica na dica. */
td.co-email span{ display:block; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* "3 obras": leva para as obras do cliente. Parece link, e botao. */
.co-link{
  border:0; background:transparent; cursor:pointer; padding:2px 0; border-radius:4px; white-space:nowrap;
  font-family:inherit; font-size:inherit; font-weight:700; color:var(--azul-2);
}
.co-link:hover{ text-decoration:underline }
/* As acoes da linha em colunas de largura fixa: caem sempre uma embaixo da outra. */
.acoes-linha.co-acoes,.acoes-linha.co-acoes.obra{ grid-template-columns:76px 76px }
/* Fora do monitor largo o telefone sai da lista (continua no cadastro) para os botoes caberem sem rolar de lado. */
@media (min-width:821px) and (max-width:1700px){ #co-lista .co-fone{ display:none } }

/* Nada cadastrado, ou nada para a busca: diz o proximo passo e da o botao. */
.vazio.co-sem-nada{
  background:var(--branco); border:1px dashed var(--linha); border-radius:var(--raio);
}
.vazio.co-sem-nada p{ margin:0 auto 16px; max-width:520px; color:var(--cinza) }

/* ---- celular: a barra empilha; a tabela vira cartao pelo padrao da casa -- */
@media (max-width:820px){
  .filtros.co-barra{ gap:10px }
  .co-visao{ width:100% }
  .co-visao-btn{ flex:1 1 0; min-width:0 }
  .filtros.co-barra input[type="search"]{ flex:1 1 100% }
  .filtros.co-barra select{ flex:1 1 100% }
  .filtros .co-contagem{ margin-left:0 }
  .acoes-linha.co-acoes,.acoes-linha.co-acoes.obra{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; width:100% }
}