:root {
  --clientes-rosa: #de6b97;
  --clientes-rosa-forte: #cf527f;
  --clientes-rosa-claro: #fceaf1;
  --clientes-nude: #fff8f7;
  --clientes-creme: #fffdfb;
  --clientes-marrom: #5f3431;
  --clientes-marrom-suave: #795c5a;
  --clientes-texto: #62494a;
  --clientes-texto-suave: #9a8184;
  --clientes-borda: #efd9df;
  --clientes-borda-clara: #f7e9ed;
  --clientes-verde: #419b62;
  --clientes-verde-claro: #eaf8ef;
  --clientes-laranja: #db8d18;
  --clientes-laranja-claro: #fff3dd;
  --clientes-roxo: #8f55cb;
  --clientes-roxo-claro: #f3eafd;
  --clientes-azul: #3d78df;
  --clientes-azul-claro: #eaf2ff;
  --clientes-sombra:
    0 16px 42px rgba(91, 52, 52, 0.07);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;

  color: var(--clientes-texto);
  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(222, 107, 151, 0.09),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #fffafa 0%,
      #fffdfc 100%
    );

  font-family: "Poppins", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(222, 107, 151, 0.2);
  outline-offset: 2px;
}

/* =========================================================
                         LAYOUT
========================================================= */

.clientes-admin-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
}

.clientes-conteudo {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;

  /*
   * A sidebar antiga já reserva o espaço lateral no
   * .admin-content. Não pode existir outra margem aqui,
   * pois isso deslocaria a página de Clientes duas vezes.
   */
  margin-left: 0 !important;
  padding: 36px;

  /*
   * Evita a barra horizontal na página inteira.
   * A tabela continua tendo sua própria rolagem horizontal
   * em .clientes-tabela-responsiva.
   */
  overflow-x: hidden;
}



/* =========================================================
                       CABEÇALHO
========================================================= */

.clientes-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  margin-bottom: 27px;
  padding: 30px 31px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 247, 250, 0.96)
    );

  border: 1px solid var(--clientes-borda);
  border-radius: 24px;

  box-shadow: var(--clientes-sombra);
}

.clientes-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 6px;

  color: var(--clientes-rosa-forte);

  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clientes-cabecalho h1 {
  margin: 0;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
}

.clientes-cabecalho p {
  max-width: 650px;
  margin: 8px 0 0;

  color: var(--clientes-marrom-suave);

  font-size: 0.84rem;
  line-height: 1.65;
}

.clientes-cabecalho-acoes {
  display: flex;
  align-items: center;

  gap: 11px;
}

.btn-clientes-principal,
.btn-clientes-secundario,
.btn-limpar-clientes {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 45px;
  padding: 0 17px;

  border-radius: 13px;

  font-size: 0.74rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.17s ease,
    box-shadow 0.17s ease,
    background 0.17s ease;
}

.btn-clientes-principal {
  color: #ffffff;
  background: var(--clientes-rosa);

  border: 1px solid var(--clientes-rosa);

  box-shadow:
    0 9px 20px rgba(222, 107, 151, 0.2);
}

.btn-clientes-principal:hover {
  background: var(--clientes-rosa-forte);

  transform: translateY(-1px);
}

.btn-clientes-secundario {
  color: var(--clientes-marrom);
  background: #ffffff;

  border: 1px solid var(--clientes-borda);
}

.btn-clientes-secundario:hover {
  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);
}

/* =========================================================
                         AVISO
========================================================= */

.clientes-aviso {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 1100;

  max-width: min(360px, calc(100vw - 35px));
  padding: 14px 17px;

  color: #ffffff;
  background: #4b9562;

  border-radius: 13px;

  box-shadow:
    0 14px 32px rgba(46, 107, 66, 0.2);

  font-size: 0.76rem;
  font-weight: 500;
}

.clientes-aviso.erro {
  background: #c85462;
}

/* =========================================================
                    CARDS DE RESUMO
========================================================= */

.clientes-resumo {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 17px;

  margin-bottom: 24px;
}

.cliente-resumo-card {
  position: relative;

  display: flex;
  align-items: center;

  gap: 15px;

  min-height: 132px;
  padding: 21px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid var(--clientes-borda);
  border-radius: 21px;

  box-shadow:
    0 10px 28px rgba(91, 52, 52, 0.05);
}

.cliente-resumo-card::after {
  position: absolute;
  right: -28px;
  bottom: -38px;

  width: 105px;
  height: 105px;

  background: var(--card-cor-clara);

  border-radius: 50%;

  content: "";
}

.cliente-resumo-card.rosa {
  --card-cor: var(--clientes-rosa);
  --card-cor-clara: var(--clientes-rosa-claro);
}

.cliente-resumo-card.laranja {
  --card-cor: var(--clientes-laranja);
  --card-cor-clara: var(--clientes-laranja-claro);
}

.cliente-resumo-card.verde {
  --card-cor: var(--clientes-verde);
  --card-cor-clara: var(--clientes-verde-claro);
}

.cliente-resumo-card.dourado {
  --card-cor: #c58419;
  --card-cor-clara: #fff3da;
}

.cliente-resumo-icone {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  color: var(--card-cor);
  background: var(--card-cor-clara);

  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 15px;

  font-size: 1.25rem;
}

.cliente-resumo-card > div {
  position: relative;
  z-index: 1;

  min-width: 0;
}

.cliente-resumo-card small,
.cliente-resumo-card span:not(.cliente-resumo-icone) {
  display: block;
}

.cliente-resumo-card small {
  color: var(--clientes-marrom-suave);

  font-size: 0.67rem;
  font-weight: 500;
}

.cliente-resumo-card strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-resumo-card span:not(.cliente-resumo-icone) {
  margin-top: 5px;

  color: var(--clientes-texto-suave);

  font-size: 0.61rem;
}

/* =========================================================
                         FILTROS
========================================================= */

.clientes-filtros {
  display: grid;

  grid-template-columns:
    minmax(260px, 1.5fr)
    repeat(3, minmax(165px, 0.7fr))
    auto;

  align-items: end;

  gap: 14px;

  margin-bottom: 24px;
  padding: 20px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid var(--clientes-borda);
  border-radius: 20px;

  box-shadow:
    0 9px 25px rgba(91, 52, 52, 0.045);
}

.cliente-filtro label {
  display: block;

  margin: 0 0 8px 2px;

  color: var(--clientes-marrom);

  font-size: 0.66rem;
  font-weight: 600;
}

.cliente-filtro input,
.cliente-filtro select {
  width: 100%;
  height: 45px;

  padding: 0 13px;

  color: var(--clientes-texto);
  background: #fffdfd;

  border: 1px solid var(--clientes-borda);
  border-radius: 12px;

  font-size: 0.73rem;

  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.cliente-filtro input:focus,
.cliente-filtro select:focus {
  border-color: var(--clientes-rosa);
  outline: none;

  box-shadow:
    0 0 0 4px rgba(222, 107, 151, 0.1);
}

.cliente-pesquisa-campo {
  position: relative;
}

.cliente-pesquisa-campo i {
  position: absolute;
  top: 50%;
  left: 14px;

  color: var(--clientes-rosa);

  font-size: 0.87rem;

  transform: translateY(-50%);
}

.cliente-pesquisa-campo input {
  padding-left: 40px;
}

.btn-limpar-clientes {
  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);

  border: 1px solid #f5d4df;
}

.btn-limpar-clientes:hover {
  background: #f9dfe8;
}

/* =========================================================
                         TABELA
========================================================= */

.clientes-tabela-card {
  overflow: hidden;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid var(--clientes-borda);
  border-radius: 22px;

  box-shadow: var(--clientes-sombra);
}

.clientes-tabela-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 82px;
  padding: 20px 22px;

  border-bottom: 1px solid var(--clientes-borda-clara);
}

.clientes-tabela-cabecalho h2 {
  margin: 0;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.clientes-tabela-cabecalho p {
  margin: 4px 0 0;

  color: var(--clientes-texto-suave);

  font-size: 0.65rem;
}

.clientes-seguranca {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 8px 11px;

  color: var(--clientes-verde);
  background: var(--clientes-verde-claro);

  border-radius: 999px;

  font-size: 0.62rem;
  font-weight: 600;
}

.clientes-tabela-responsiva {
  overflow-x: auto;
}

.clientes-tabela {
  width: 100%;
  min-width: 1120px;

  border-collapse: collapse;
}

.clientes-tabela th {
  height: 51px;
  padding: 0 16px;

  color: var(--clientes-texto-suave);
  background: #fffafb;

  border-bottom: 1px solid var(--clientes-borda-clara);

  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.clientes-tabela td {
  padding: 15px 16px;

  color: var(--clientes-texto);

  border-bottom: 1px solid var(--clientes-borda-clara);

  font-size: 0.69rem;
  vertical-align: middle;
}

.clientes-tabela tbody tr {
  transition: background 0.16s ease;
}

.clientes-tabela tbody tr:hover {
  background: #fffafb;
}

.clientes-tabela tbody tr:last-child td {
  border-bottom: 0;
}

.cliente-tabela-identidade {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 210px;
}

.cliente-tabela-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);

  border-radius: 13px;

  font-family: "Playfair Display", serif;
  font-size: 0.83rem;
  font-weight: 700;
}

.cliente-tabela-identidade strong,
.cliente-tabela-contato strong {
  display: block;

  color: var(--clientes-marrom);

  font-size: 0.71rem;
  font-weight: 600;
}

.cliente-tabela-identidade span,
.cliente-tabela-contato span {
  display: block;

  margin-top: 3px;

  color: var(--clientes-texto-suave);

  font-size: 0.59rem;
}

.cliente-origens {
  display: flex;
  flex-wrap: wrap;

  gap: 4px;
}

.cliente-origem {
  padding: 4px 7px;

  color: var(--clientes-marrom-suave);
  background: #f7f0ef;

  border-radius: 999px;

  font-size: 0.54rem;
  font-weight: 600;
}

.cliente-numero-destaque {
  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 700;
}

.cliente-progresso {
  min-width: 130px;
}

.cliente-progresso-topo {
  display: flex;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 6px;

  color: var(--clientes-texto-suave);

  font-size: 0.56rem;
}

.cliente-progresso-topo strong {
  color: var(--clientes-marrom);
}

.cliente-progresso-trilho,
.cliente-progresso-grande
  .cliente-progresso-trilho {
  height: 7px;

  overflow: hidden;

  background: #f3e6e9;

  border-radius: 999px;
}

.cliente-progresso-trilho span {
  display: block;

  width: 0;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--clientes-rosa),
      #eb8cab
    );

  border-radius: inherit;
}

.cliente-perfil {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 6px 9px;

  border-radius: 999px;

  font-size: 0.56rem;
  font-weight: 600;
  white-space: nowrap;
}

.cliente-perfil.novo {
  color: var(--clientes-azul);
  background: var(--clientes-azul-claro);
}

.cliente-perfil.recorrente {
  color: var(--clientes-verde);
  background: var(--clientes-verde-claro);
}

.cliente-perfil.vip {
  color: var(--clientes-roxo);
  background: var(--clientes-roxo-claro);
}

.cliente-perfil.beneficio {
  color: #b36f00;
  background: var(--clientes-laranja-claro);
}

.btn-ver-cliente {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 37px;
  height: 37px;

  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);

  border: 1px solid #f3d4df;
  border-radius: 11px;

  cursor: pointer;
}

.btn-ver-cliente:hover {
  color: #ffffff;
  background: var(--clientes-rosa);
}

/* =========================================================
                     ESTADO VAZIO
========================================================= */

.clientes-estado-vazio {
  padding: 65px 20px;

  text-align: center;
}

.clientes-estado-vazio > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  color: var(--clientes-rosa);
  background: var(--clientes-rosa-claro);

  border-radius: 21px;

  font-size: 1.8rem;
}

.clientes-estado-vazio h3 {
  margin: 17px 0 5px;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
}

.clientes-estado-vazio p {
  margin: 0;

  color: var(--clientes-texto-suave);

  font-size: 0.72rem;
}

/* =========================================================
                  PAINEL DE DETALHES
========================================================= */

.cliente-painel {
  width: min(520px, 100vw) !important;

  color: var(--clientes-texto);
  background: #fffdfd;

  border-left: 1px solid var(--clientes-borda) !important;
}

.cliente-painel .offcanvas-header {
  align-items: flex-start;

  padding: 24px;

  background: #fff8fa;

  border-bottom: 1px solid var(--clientes-borda);
}

.cliente-painel-legenda {
  display: block;

  margin-bottom: 3px;

  color: var(--clientes-rosa-forte);

  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cliente-painel .offcanvas-title {
  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  font-weight: 700;
}

.cliente-painel .offcanvas-body {
  padding: 22px;
}

.cliente-painel-identidade {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 17px;

  background:
    linear-gradient(
      135deg,
      #fff6f9,
      #fffdfc
    );

  border: 1px solid var(--clientes-borda);
  border-radius: 18px;
}

.cliente-avatar-grande {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 58px;

  width: 58px;
  height: 58px;

  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);

  border-radius: 18px;

  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.cliente-painel-identidade h3 {
  margin: 0 0 4px;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.cliente-painel-identidade div > span {
  color: var(--clientes-texto-suave);

  font-size: 0.66rem;
}

.cliente-painel-secao {
  margin-top: 17px;
  padding: 18px;

  background: #ffffff;

  border: 1px solid var(--clientes-borda);
  border-radius: 18px;
}

.cliente-painel-secao h4 {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0 0 15px;

  color: var(--clientes-marrom);

  font-size: 0.78rem;
  font-weight: 600;
}

.cliente-painel-secao h4 i {
  color: var(--clientes-rosa);
}

.cliente-painel-secao-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.btn-whatsapp-cliente {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 7px 10px;

  color: #298b4e;
  background: var(--clientes-verde-claro);

  border: 1px solid #cfead8;
  border-radius: 10px;

  font-size: 0.61rem;
  font-weight: 600;

  cursor: pointer;
}

.btn-whatsapp-cliente:disabled {
  color: #a59195;
  background: #f4eeee;

  border-color: #eadfe1;

  cursor: not-allowed;
}

.cliente-dados-lista {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;

  margin: 0;
}

.cliente-dados-lista div {
  padding: 11px;

  background: #fffafb;

  border-radius: 11px;
}

.cliente-dados-lista dt {
  margin-bottom: 4px;

  color: var(--clientes-texto-suave);

  font-size: 0.55rem;
  font-weight: 500;
}

.cliente-dados-lista dd {
  margin: 0;

  overflow-wrap: anywhere;

  color: var(--clientes-marrom);

  font-size: 0.65rem;
  font-weight: 600;
}

.cliente-consentimento {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 13px;
  padding: 11px;

  color: var(--clientes-marrom-suave);
  background: var(--clientes-verde-claro);

  border-radius: 11px;

  font-size: 0.62rem;
  font-weight: 500;

  cursor: pointer;
}

.cliente-consentimento input {
  accent-color: var(--clientes-verde);
}

.cliente-fidelidade-detalhes {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 11px;
}

.cliente-fidelidade-detalhes div {
  padding: 13px;

  background: #fff9fb;

  border: 1px solid var(--clientes-borda-clara);
  border-radius: 12px;
}

.cliente-fidelidade-detalhes strong,
.cliente-fidelidade-detalhes span {
  display: block;
}

.cliente-fidelidade-detalhes strong {
  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1rem;
}

.cliente-fidelidade-detalhes span {
  margin-top: 3px;

  color: var(--clientes-texto-suave);

  font-size: 0.55rem;
}

.cliente-progresso-grande {
  margin-top: 15px;
}

.cliente-progresso-grande > div:first-child {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;

  color: var(--clientes-texto-suave);

  font-size: 0.6rem;
}

.cliente-progresso-grande strong {
  color: var(--clientes-marrom);
}

.cliente-cupons-lista,
.cliente-enderecos-lista,
.cliente-pedidos-lista {
  display: flex;
  flex-direction: column;

  gap: 9px;
}

.cliente-cupom,
.cliente-endereco,
.cliente-pedido {
  padding: 12px;

  background: #fffafb;

  border: 1px solid var(--clientes-borda-clara);
  border-radius: 12px;
}

.cliente-cupom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 11px;

  background: var(--clientes-laranja-claro);
}

.cliente-cupom strong,
.cliente-endereco strong,
.cliente-pedido strong {
  display: block;

  color: var(--clientes-marrom);

  font-size: 0.64rem;
}

.cliente-cupom span,
.cliente-endereco span,
.cliente-pedido span {
  display: block;

  margin-top: 3px;

  color: var(--clientes-texto-suave);

  font-size: 0.55rem;
  line-height: 1.5;
}

.btn-copiar-cupom {
  flex: 0 0 auto;

  padding: 7px 9px;

  color: #ad6b00;
  background: #ffffff;

  border: 1px solid #efd7ae;
  border-radius: 9px;

  font-size: 0.57rem;
  font-weight: 600;

  cursor: pointer;
}

.cliente-pedido {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.cliente-pedido > div:last-child {
  text-align: right;
}

.cliente-lista-vazia {
  margin: 0;
  padding: 12px;

  color: var(--clientes-texto-suave);
  background: #fffafb;

  border-radius: 11px;

  font-size: 0.6rem;
  text-align: center;
}

/* =========================================================
                       RESPONSIVO
========================================================= */

@media (max-width: 1350px) {
  .clientes-resumo {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .clientes-filtros {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .cliente-pesquisa {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1000px) {
  .clientes-sidebar {
    width: 230px;
  }

  .clientes-conteudo {
    margin-left: 0 !important;
    padding: 25px;
  }

  .clientes-cabecalho {
    align-items: flex-start;
    flex-direction: column;
  }

  .clientes-cabecalho-acoes {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .clientes-sidebar {
    position: relative;
    inset: auto;

    width: 100%;
    height: auto;
  }

  .clientes-sidebar-menu {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .clientes-sidebar-rodape {
    margin-top: 12px;
  }

  .clientes-conteudo {
    margin-left: 0;
    padding: 18px;
  }

  .clientes-cabecalho {
    padding: 23px 20px;
  }

  .clientes-cabecalho-acoes {
    display: grid;

    grid-template-columns: 1fr;
  }

  .clientes-resumo,
  .clientes-filtros {
    grid-template-columns: 1fr;
  }

  .cliente-pesquisa {
    grid-column: auto;
  }

  .clientes-tabela-cabecalho {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 470px) {
  .clientes-sidebar-menu {
    grid-template-columns: 1fr;
  }

  .clientes-conteudo {
    padding: 13px;
  }

  .clientes-cabecalho {
    border-radius: 18px;
  }

  .cliente-resumo-card {
    min-height: 115px;
  }

  .clientes-filtros {
    padding: 16px;
  }

  .cliente-dados-lista,
  .cliente-fidelidade-detalhes {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   EDIÇÃO DE CLIENTES
   Esta seção já faz parte do clientes.css completo.
========================================================= */

.cliente-acoes-tabela {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.btn-editar-cliente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  color: #a76a05;
  background: var(--clientes-laranja-claro);
  border: 1px solid #f1d7a9;
  border-radius: 11px;
  cursor: pointer;
  transition:
    color 0.17s ease,
    background 0.17s ease,
    transform 0.17s ease;
}

.btn-editar-cliente:hover {
  color: #ffffff;
  background: var(--clientes-laranja);
  transform: translateY(-1px);
}

.cliente-modal-edicao {
  --bs-modal-width: 820px;
  color: var(--clientes-texto);
}

.cliente-modal-edicao .modal-content {
  overflow: hidden;
  border: 1px solid var(--clientes-borda);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(91, 52, 52, 0.18);
}

.cliente-modal-edicao .modal-header {
  align-items: flex-start;
  padding: 22px 24px;
  background:
    linear-gradient(
      135deg,
      #fff8fa,
      #fffdfc
    );
  border-bottom: 1px solid var(--clientes-borda);
}

.cliente-edicao-legenda {
  display: block;
  margin-bottom: 4px;
  color: var(--clientes-rosa-forte);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cliente-modal-edicao .modal-title {
  color: var(--clientes-marrom);
  font-family: "Playfair Display", serif;
  font-size: 1.55rem;
  font-weight: 700;
}

.cliente-modal-edicao .modal-body {
  display: grid;
  gap: 16px;
  padding: 21px 24px;
  background: #fffdfd;
}

.cliente-edicao-mensagem {
  padding: 12px 14px;
  color: #b43845;
  background: #fff1f3;
  border: 1px solid #f1c7cd;
  border-radius: 12px;
  font-size: 0.72rem;
  line-height: 1.55;
}

.cliente-edicao-secao {
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--clientes-borda);
  border-radius: 17px;
}

.cliente-edicao-secao-titulo {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.cliente-edicao-secao-titulo > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 41px;
  width: 41px;
  height: 41px;
  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);
  border-radius: 12px;
  font-size: 1rem;
}

.cliente-edicao-secao-titulo h3 {
  margin: 0;
  color: var(--clientes-marrom);
  font-size: 0.82rem;
  font-weight: 650;
}

.cliente-edicao-secao-titulo p {
  margin: 3px 0 0;
  color: var(--clientes-texto-suave);
  font-size: 0.64rem;
}

.cliente-edicao-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.cliente-edicao-grade.endereco {
  grid-template-columns: 0.75fr 1.7fr 0.65fr;
}

.cliente-edicao-campo {
  min-width: 0;
}

.cliente-edicao-campo.campo-largo {
  grid-column: 1 / -1;
}

.cliente-edicao-grade.endereco
  .cliente-edicao-campo:not(.campo-logradouro):not(.campo-numero) {
  grid-column: auto;
}

.cliente-edicao-grade.endereco
  .cliente-edicao-campo.campo-largo {
  grid-column: 1 / -1;
}

.cliente-edicao-campo label {
  display: block;
  margin-bottom: 7px;
  color: var(--clientes-marrom);
  font-size: 0.64rem;
  font-weight: 600;
}

.cliente-edicao-campo input {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 0 13px;
  color: var(--clientes-marrom);
  background: #fffdfd;
  border: 1px solid var(--clientes-borda);
  border-radius: 12px;
  outline: 0;
  font-size: 0.72rem;
  transition:
    border-color 0.17s ease,
    box-shadow 0.17s ease;
}

.cliente-edicao-campo input:focus {
  border-color: var(--clientes-rosa);
  box-shadow: 0 0 0 4px rgba(222, 107, 151, 0.11);
}

.cliente-edicao-campo input::placeholder {
  color: #b7a2a5;
}

.cliente-edicao-observacao {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 15px 0 0;
  padding: 11px 12px;
  color: #50745e;
  background: var(--clientes-verde-claro);
  border-radius: 11px;
  font-size: 0.61rem;
  line-height: 1.55;
}

.cliente-edicao-observacao i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--clientes-verde);
}

.cliente-modal-edicao .modal-footer {
  gap: 10px;
  padding: 16px 24px 20px;
  background: #fffafb;
  border-top: 1px solid var(--clientes-borda-clara);
}

.btn-cliente-cancelar,
.btn-cliente-salvar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-cliente-cancelar {
  color: var(--clientes-marrom);
  background: #ffffff;
  border: 1px solid var(--clientes-borda);
}

.btn-cliente-salvar {
  min-width: 175px;
  color: #ffffff;
  background: var(--clientes-rosa);
  border: 1px solid var(--clientes-rosa);
  box-shadow: 0 9px 20px rgba(222, 107, 151, 0.2);
}

.btn-cliente-salvar:hover:not(:disabled) {
  background: var(--clientes-rosa-forte);
}

.btn-cliente-salvar:disabled {
  cursor: wait;
  opacity: 0.72;
}

.cliente-salvar-conteudo,
.cliente-salvar-carregando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 760px) {
  .cliente-modal-edicao .modal-dialog {
    margin: 12px;
  }

  .cliente-modal-edicao .modal-header,
  .cliente-modal-edicao .modal-body,
  .cliente-modal-edicao .modal-footer {
    padding-left: 17px;
    padding-right: 17px;
  }

  .cliente-edicao-grade,
  .cliente-edicao-grade.endereco {
    grid-template-columns: 1fr;
  }

  .cliente-edicao-grade.endereco
    .cliente-edicao-campo,
  .cliente-edicao-grade.endereco
    .cliente-edicao-campo.campo-largo {
    grid-column: auto;
  }
}

@media (max-width: 470px) {
  .cliente-modal-edicao .modal-content {
    border-radius: 18px;
  }

  .cliente-modal-edicao .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btn-cliente-cancelar,
  .btn-cliente-salvar {
    width: 100%;
  }
}

/* =========================================================
              ABAS DA PÁGINA DE CLIENTES
========================================================= */

.clientes-abas {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 24px;
  padding: 6px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid var(--clientes-borda);
  border-radius: 16px;

  box-shadow:
    0 8px 24px rgba(91, 52, 52, 0.045);
}

.clientes-aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;
  padding: 0 16px;

  color: var(--clientes-marrom-suave);
  background: transparent;

  border: 0;
  border-radius: 11px;

  font-size: 0.72rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.clientes-aba:hover {
  color: var(--clientes-rosa-forte);
  background: var(--clientes-rosa-claro);
}

.clientes-aba.ativa {
  color: #ffffff;
  background: var(--clientes-rosa);

  box-shadow:
    0 8px 18px rgba(222, 107, 151, 0.22);
}

.clientes-painel-aba[hidden] {
  display: none !important;
}

/* =========================================================
               CARDS DA ANÁLISE DE RISCO
========================================================= */

.cliente-resumo-card.azul {
  --card-cor: var(--clientes-azul);
  --card-cor-clara: var(--clientes-azul-claro);
}

.cliente-resumo-card.roxo {
  --card-cor: var(--clientes-roxo);
  --card-cor-clara: var(--clientes-roxo-claro);
}

.cliente-resumo-card.vermelho {
  --card-cor: #c55361;
  --card-cor-clara: #fff0f2;
}

/* =========================================================
               FILTROS DA ANÁLISE DE RISCO
========================================================= */

.analise-risco-filtros {
  grid-template-columns:
    minmax(280px, 1.6fr)
    repeat(3, minmax(170px, 0.7fr))
    auto;
}

.analise-risco-legenda {
  color: #8a6529;
  background: #fff6e6;
}

/* =========================================================
               TABELA DA ANÁLISE DE RISCO
========================================================= */

.analise-risco-tabela {
  min-width: 1320px;
}

.analise-risco-navegador {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 210px;
}

.analise-risco-navegador-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  color: var(--clientes-roxo);
  background: var(--clientes-roxo-claro);

  border-radius: 13px;

  font-size: 1rem;
}

.analise-risco-navegador strong,
.analise-risco-navegador span,
.analise-risco-dado-duplo strong,
.analise-risco-dado-duplo span {
  display: block;
}

.analise-risco-navegador strong,
.analise-risco-dado-duplo strong {
  color: var(--clientes-marrom);

  font-size: 0.7rem;
  font-weight: 600;
}

.analise-risco-navegador span,
.analise-risco-dado-duplo span {
  margin-top: 3px;

  color: var(--clientes-texto-suave);

  font-size: 0.58rem;
}

.analise-risco-dado-duplo {
  min-width: 190px;
  max-width: 250px;
}

.analise-risco-contador,
.analise-risco-pontuacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  height: 34px;
  padding: 0 9px;

  color: var(--clientes-marrom);
  background: #fff7f9;

  border: 1px solid var(--clientes-borda-clara);
  border-radius: 11px;

  font-family: "Playfair Display", serif;
  font-size: 0.91rem;
  font-weight: 700;
}

.analise-risco-pontuacao {
  color: var(--clientes-roxo);
  background: var(--clientes-roxo-claro);
}

.analise-risco-cancelamentos {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  height: 34px;
  padding: 0 9px;

  color: var(--clientes-verde);
  background: var(--clientes-verde-claro);

  border-radius: 11px;

  font-size: 0.72rem;
  font-weight: 700;
}

.analise-risco-cancelamentos.possui {
  color: #b54856;
  background: #fff0f2;
}

.analise-risco-nivel {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 7px 10px;

  border-radius: 999px;

  font-size: 0.58rem;
  font-weight: 700;
  white-space: nowrap;
}

.analise-risco-nivel.normal {
  color: var(--clientes-verde);
  background: var(--clientes-verde-claro);
}

.analise-risco-nivel.atencao {
  color: #ad6c08;
  background: var(--clientes-laranja-claro);
}

.analise-risco-nivel.alto {
  color: #b54856;
  background: #fff0f2;
}

.btn-ver-analise-risco {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 37px;
  height: 37px;

  color: var(--clientes-roxo);
  background: var(--clientes-roxo-claro);

  border: 1px solid #e4d5f4;
  border-radius: 11px;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.btn-ver-analise-risco:hover {
  color: #ffffff;
  background: var(--clientes-roxo);

  transform: translateY(-1px);
}

/* =========================================================
          PAINEL LATERAL DA ANÁLISE DE RISCO
========================================================= */

.analise-risco-painel {
  width: min(650px, 100vw) !important;

  color: var(--clientes-texto);
  background: #fffdfd;

  border-left: 1px solid var(--clientes-borda) !important;
}

.analise-risco-painel .offcanvas-header {
  align-items: flex-start;

  padding: 24px;

  background: #fff8fa;

  border-bottom: 1px solid var(--clientes-borda);
}

.analise-risco-painel .offcanvas-title {
  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  font-weight: 700;
}

.analise-risco-painel .offcanvas-body {
  padding: 22px;
}

.analise-risco-identidade {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 18px;

  background:
    linear-gradient(
      135deg,
      #fbf7ff,
      #fffdfd
    );

  border: 1px solid #e8dcf3;
  border-radius: 18px;
}

.analise-risco-identidade-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 58px;

  width: 58px;
  height: 58px;

  color: var(--clientes-roxo);
  background: var(--clientes-roxo-claro);

  border-radius: 18px;

  font-size: 1.35rem;
}

.analise-risco-identidade small {
  display: block;

  margin-bottom: 3px;

  color: var(--clientes-texto-suave);

  font-size: 0.58rem;
  font-weight: 600;
}

.analise-risco-identidade h3 {
  margin: 0 0 8px;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.analise-risco-metricas {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 16px;
}

.analise-risco-metricas article {
  padding: 13px;

  background: #ffffff;

  border: 1px solid var(--clientes-borda);
  border-radius: 13px;
}

.analise-risco-metricas span,
.analise-risco-metricas strong {
  display: block;
}

.analise-risco-metricas span {
  color: var(--clientes-texto-suave);

  font-size: 0.56rem;
  font-weight: 500;
}

.analise-risco-metricas strong {
  margin-top: 4px;

  color: var(--clientes-marrom);

  font-family: "Playfair Display", serif;
  font-size: 1.08rem;
  font-weight: 700;
}

.analise-risco-motivos {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.analise-risco-motivo {
  display: flex;
  align-items: flex-start;

  gap: 5px;

  padding: 10px 11px;

  color: #7b5b2d;
  background: #fff8ea;

  border: 1px solid #f1dfbb;
  border-radius: 11px;

  font-size: 0.63rem;
  line-height: 1.45;
}

.analise-risco-motivo i {
  flex: 0 0 auto;

  margin-top: 1px;

  color: var(--clientes-laranja);
}

.analise-risco-explicacao {
  margin: -4px 0 14px;

  color: var(--clientes-texto-suave);

  font-size: 0.62rem;
  line-height: 1.55;
}

.analise-risco-pedidos-lista {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.analise-risco-pedido {
  padding: 14px;

  background: #fffafb;

  border: 1px solid var(--clientes-borda-clara);
  border-radius: 14px;
}

.analise-risco-pedido-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;
}

.analise-risco-pedido-topo strong,
.analise-risco-pedido-topo span {
  display: block;
}

.analise-risco-pedido-topo strong {
  color: var(--clientes-marrom);

  font-size: 0.7rem;
  font-weight: 700;
}

.analise-risco-pedido-topo div > span {
  margin-top: 3px;

  color: var(--clientes-texto-suave);

  font-size: 0.57rem;
}

.analise-risco-pedido-status {
  padding: 6px 9px;

  color: var(--clientes-marrom-suave);
  background: #f5eeee;

  border-radius: 999px;

  font-size: 0.54rem;
  font-weight: 700;
  white-space: nowrap;
}

.analise-risco-pedido-status.entregue {
  color: var(--clientes-verde);
  background: var(--clientes-verde-claro);
}

.analise-risco-pedido-status.cancelado {
  color: #b54856;
  background: #fff0f2;
}

.analise-risco-pedido-status.producao,
.analise-risco-pedido-status.pronto {
  color: #ad6c08;
  background: var(--clientes-laranja-claro);
}

.analise-risco-pedido-dados {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin: 0;
}

.analise-risco-pedido-dados div {
  padding: 10px;

  background: #ffffff;

  border: 1px solid var(--clientes-borda-clara);
  border-radius: 10px;
}

.analise-risco-pedido-dados dt {
  margin-bottom: 4px;

  color: var(--clientes-texto-suave);

  font-size: 0.53rem;
  font-weight: 500;
}

.analise-risco-pedido-dados dd {
  margin: 0;

  overflow-wrap: anywhere;

  color: var(--clientes-marrom);

  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.45;
}

.analise-risco-pedido-motivo {
  margin: 10px 0 0;
  padding: 10px;

  color: #a64653;
  background: #fff0f2;

  border-radius: 10px;

  font-size: 0.61rem;
  line-height: 1.5;
}

.analise-risco-pedido-motivo i {
  margin-right: 5px;
}

/* =========================================================
          RESPONSIVIDADE DA ANÁLISE DE RISCO
========================================================= */

@media (max-width: 1000px) {
  .analise-risco-filtros {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .analise-risco-filtros
  .cliente-pesquisa {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .clientes-abas {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
  }

  .clientes-aba {
    width: 100%;
    padding: 0 10px;
  }

  .analise-risco-filtros {
    grid-template-columns: 1fr;
  }

  .analise-risco-filtros
  .cliente-pesquisa {
    grid-column: auto;
  }

  .analise-risco-metricas {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .analise-risco-pedido-dados {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 470px) {
  .clientes-abas {
    grid-template-columns: 1fr;
  }

  .analise-risco-metricas {
    grid-template-columns: 1fr;
  }

  .analise-risco-pedido-topo {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   MARKETING — MODAIS DE CAMPANHA
   Ajustes visuais da criação e da lista de envios.
========================================================= */

/* O modal de envios precisa de mais espaço que o modal comum. */
#modalEnviosCampanhaMarketing {
  --bs-modal-width: 1120px;
}

/* Mantém o modal confortável mesmo em telas menores. */
#modalEnviosCampanhaMarketing .modal-dialog {
  width: calc(100% - 32px);
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

/* Título secundário da campanha. */
#nomeCampanhaPreparadaMarketing {
  max-width: 720px;
  margin-top: 5px !important;

  overflow: hidden;

  color: var(--clientes-marrom-suave) !important;

  font-size: 0.82rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   CAMPO DE MENSAGEM DA NOVA CAMPANHA
========================================================= */

#modalNovaCampanhaMarketing
  .cliente-edicao-campo
  textarea {
  width: 100%;
  min-width: 0;
  min-height: 150px;

  padding: 13px 14px;

  resize: vertical;

  color: var(--clientes-marrom);
  background: #fffdfd;

  border: 1px solid var(--clientes-borda);
  border-radius: 12px;
  outline: 0;

  font-family: "Poppins", sans-serif;
  font-size: 0.73rem;
  line-height: 1.65;

  transition:
    border-color 0.17s ease,
    box-shadow 0.17s ease;
}

#modalNovaCampanhaMarketing
  .cliente-edicao-campo
  textarea:focus {
  border-color: var(--clientes-rosa);

  box-shadow:
    0 0 0 4px rgba(222, 107, 151, 0.11);
}

#modalNovaCampanhaMarketing
  .cliente-edicao-campo
  textarea::placeholder {
  color: #b7a2a5;
}

/* =========================================================
   PROGRESSO DOS ENVIOS
========================================================= */

#modalEnviosCampanhaMarketing .progress {
  height: 9px !important;

  overflow: hidden;

  background: #f3e6e9;

  border-radius: 999px;
}

#modalEnviosCampanhaMarketing .progress-bar {
  background:
    linear-gradient(
      90deg,
      var(--clientes-rosa),
      #eb8cab
    );

  border-radius: inherit;

  transition: width 0.25s ease;
}

/* =========================================================
   BLOCO DA MENSAGEM PREPARADA
========================================================= */

#mensagemCampanhaPreparadaMarketing {
  padding: 15px 16px !important;

  color: var(--clientes-marrom);
  background: #fffafb !important;

  border: 1px solid var(--clientes-borda-clara) !important;
  border-radius: 13px !important;

  font-size: 0.76rem;
  line-height: 1.7;

  overflow-wrap: anywhere;
}

/* =========================================================
   LISTA DE CONTATOS DA CAMPANHA
========================================================= */

#listaEnviosCampanhaMarketing {
  gap: 10px !important;
}

#listaEnviosCampanhaMarketing > article {
  padding: 15px 16px !important;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fffafb
    );

  border: 1px solid var(--clientes-borda-clara) !important;
  border-radius: 14px !important;

  transition:
    border-color 0.17s ease,
    box-shadow 0.17s ease,
    transform 0.17s ease;
}

#listaEnviosCampanhaMarketing > article:hover {
  border-color: var(--clientes-borda) !important;

  box-shadow:
    0 8px 20px rgba(91, 52, 52, 0.055);
}

/*
 * Primeira div do article:
 * dados do contato à esquerda e ações à direita.
 */
#listaEnviosCampanhaMarketing
  > article
  > .d-flex {
  display: grid !important;

  grid-template-columns:
    minmax(190px, 1fr)
    auto;

  align-items: center !important;

  gap: 18px !important;
}

/* Nome e telefone. */
#listaEnviosCampanhaMarketing
  > article
  > .d-flex
  > div:first-child {
  min-width: 0;
}

#listaEnviosCampanhaMarketing
  > article
  > .d-flex
  > div:first-child
  strong {
  display: block;

  overflow: hidden;

  color: var(--clientes-marrom);

  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#listaEnviosCampanhaMarketing
  > article
  > .d-flex
  > div:first-child
  .small {
  margin-top: 5px !important;

  color: var(--clientes-texto-suave) !important;

  font-size: 0.66rem;
}

/* Grupo com status e botões. */
#listaEnviosCampanhaMarketing
  > article
  > .d-flex
  > div:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  flex-wrap: nowrap !important;

  gap: 8px !important;

  min-width: max-content;
}

/* Status pendente/enviado. */
#listaEnviosCampanhaMarketing .cliente-perfil {
  flex: 0 0 auto;

  min-height: 34px;
  padding: 0 11px;

  font-size: 0.59rem;
}

/*
 * IMPORTANTE:
 * .btn-ver-cliente e .btn-editar-cliente normalmente são
 * botões quadrados de ícone. Dentro da campanha eles possuem
 * texto, então precisam ter largura automática.
 */
#listaEnviosCampanhaMarketing .btn-ver-cliente,
#listaEnviosCampanhaMarketing .btn-editar-cliente {
  width: auto;
  min-width: 112px;
  height: 38px;

  padding: 0 13px;

  gap: 7px;

  flex: 0 0 auto;

  border-radius: 11px;

  font-size: 0.63rem;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

/* WhatsApp da campanha. */
#listaEnviosCampanhaMarketing .btn-ver-cliente {
  color: #298b4e;
  background: var(--clientes-verde-claro);

  border-color: #cfead8;
}

#listaEnviosCampanhaMarketing
  .btn-ver-cliente:hover {
  color: #ffffff;
  background: var(--clientes-verde);

  border-color: var(--clientes-verde);

  transform: translateY(-1px);
}

/* Marcar como enviado / Desmarcar. */
#listaEnviosCampanhaMarketing .btn-editar-cliente {
  min-width: 134px;
}

#listaEnviosCampanhaMarketing
  .btn-editar-cliente:hover {
  transform: translateY(-1px);
}

/* =========================================================
   PÚBLICO SELECIONADO — MODAL NOVA CAMPANHA
========================================================= */

#listaPublicoCampanhaMarketing {
  gap: 8px !important;
}

#listaPublicoCampanhaMarketing > div {
  padding: 12px 14px !important;

  background: #fffafb;

  border: 1px solid var(--clientes-borda-clara) !important;
  border-radius: 12px !important;
}

#listaPublicoCampanhaMarketing strong {
  display: block;

  color: var(--clientes-marrom);

  font-size: 0.7rem;
  font-weight: 650;
}

#listaPublicoCampanhaMarketing .small {
  margin-top: 3px;

  color: var(--clientes-texto-suave) !important;

  font-size: 0.61rem;
}

/* =========================================================
   RESPONSIVO — CAMPANHAS
========================================================= */

@media (max-width: 900px) {
  #modalEnviosCampanhaMarketing
    > .modal-dialog {
    max-width: calc(100% - 24px);
  }

  #listaEnviosCampanhaMarketing
    > article
    > .d-flex {
    grid-template-columns: 1fr;
  }

  #listaEnviosCampanhaMarketing
    > article
    > .d-flex
    > div:last-child {
    justify-content: flex-start !important;

    min-width: 0;

    flex-wrap: wrap !important;
  }
}

@media (max-width: 560px) {
  #modalEnviosCampanhaMarketing .modal-dialog,
  #modalNovaCampanhaMarketing .modal-dialog {
    width: calc(100% - 20px);
    margin: 10px auto;
  }

  #nomeCampanhaPreparadaMarketing {
    white-space: normal;
  }

  #listaEnviosCampanhaMarketing
    > article {
    padding: 14px !important;
  }

  #listaEnviosCampanhaMarketing
    > article
    > .d-flex
    > div:last-child {
    display: grid !important;

    grid-template-columns: 1fr;

    width: 100%;
  }

  #listaEnviosCampanhaMarketing
    .cliente-perfil,
  #listaEnviosCampanhaMarketing
    .btn-ver-cliente,
  #listaEnviosCampanhaMarketing
    .btn-editar-cliente {
    width: 100%;
    min-width: 0;
  }

  #listaEnviosCampanhaMarketing
    .cliente-perfil {
    justify-content: center;
  }

  #listaPublicoCampanhaMarketing > div {
    align-items: flex-start !important;
  }
}