/* -----------------------------------------------------------
   6. PÁGINA DE CLIENTES (lista/tabela)
   ----------------------------------------------------------- */

.pagina {
  padding: 24px 32px;
}

.pagina-cabecalho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.pagina-cabecalho__icone {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: var(--cor-laranja);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pagina-cabecalho__icone svg { width: 22px; height: 22px; }

.pagina-cabecalho h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--cor-texto-principal);
}

.pagina-cabecalho p {
  font-size: 13px;
  color: var(--cor-texto-secundario);
  margin-top: 4px;
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  text-decoration: none; /* pro botão "Novo Cliente", que agora é um link <a> */
}

.btn svg { width: 16px; height: 16px; }

.btn--laranja { background-color: var(--cor-laranja); color: #ffffff; }
.btn--laranja:hover { filter: brightness(1.08); }

.btn--azul { background-color: var(--cor-azul); color: #ffffff; }
.btn--azul:hover { filter: brightness(1.08); }

.btn--verde { background-color: var(--cor-verde); color: #ffffff; }
.btn--verde:hover { filter: brightness(1.08); }

.btn--roxo { background-color: #7c3aed; color: #ffffff; }
.btn--roxo:hover { filter: brightness(1.08); }

/* texto escuro em cima do amarelo, mesmo motivo do .ranking-circulo--ouro
   (fundo claro — texto branco não teria contraste suficiente) */
.btn--amarelo { background-color: #f5a623; color: #1a1a1a; }
.btn--amarelo:hover { filter: brightness(1.08); }

.btn--fantasma {
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-cartao);
  color: var(--cor-texto-principal);
}
.btn--fantasma:hover { background-color: var(--cor-hover); }

/* barra de busca e filtros */

.barra-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.campo {
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-cartao);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--cor-texto-principal);
  font-family: inherit;
}

.campo::placeholder { color: var(--cor-texto-fraco); }

.campo-busca { flex: 1; min-width: 220px; }

.btn--limpar {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-cartao);
  color: var(--cor-texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.btn--limpar:hover { background-color: var(--cor-hover); color: var(--cor-texto-principal); }
.btn--limpar svg { width: 16px; height: 16px; }

/* painel de filtros avançados (Data inicial, Estados, Servidores...) */

.painel-filtros {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end; /* alinha pela base, pra ficar parelho mesmo com os 2 campos de data (que têm um rótulo em cima) */
  gap: 12px;
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-cartao);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}

.painel-filtros--visivel { display: grid; }

.campo-filtro {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.campo-filtro label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.painel-filtros select.campo,
.painel-filtros input.campo {
  width: 100%;
}

/* -----------------------------------------------------------
   Ajuste pedido só pra tela de Ordens de Serviço (não é
   compartilhado com Clientes) — layout flexível, sem sobrar
   campo sozinho numa linha, com as datas mais estreitas.
   Só faz efeito quando a página adiciona a classe extra
   "painel-filtros--flex" no elemento (ver ordens-servico.html).
   ----------------------------------------------------------- */

.painel-filtros--flex.painel-filtros--visivel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Data inicial + Data Final dividem UMA célula do grid (metade cada),
   pra "1 par de datas" ocupar o mesmo espaço que 1 campo normal —
   é assim que a linha fecha com 6 caixas (2 metades + 4 inteiras =
   5 "espaços", igual às outras linhas). */
.painel-filtros--flex .par-datas {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.painel-filtros--flex .par-datas .campo {
  min-width: 0;
}