/* ========================================================
   CORES PERSONALIZADAS POR CARD (usa variável CSS)
======================================================== */
.kpi-azul       { --kpi-color: #007BFF; }
.kpi-vermelho   { --kpi-color: #DC3545; }
.kpi-amarelo    { --kpi-color: #F1B600; }
.kpi-verde      { --kpi-color: #198754; }
.kpi-azul-claro { --kpi-color: #0DCAF0; }
.kpi-cinza      { --kpi-color: #6C757D; }
.kpi-laranja    { --kpi-color: #f39c12; }

/* ========================================================
   CARD BASE
======================================================== */
.ASK-leads-tags-dados {
  position: relative;
  display: flex;
  /* Alinha ícone e container de texto verticalmente no centro */
  align-items: center;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background-color: var(--kpi-color);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  isolation: isolate;
}
.ASK-leads-tags-dados::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: linear-gradient(to right, rgba(255,255,255,0.04), rgba(255,255,255,0));
  z-index: 0;
}
.ASK-leads-tags-dados:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.ASK-leads-tags-dados::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background-color: rgba(255, 255, 255, 0.2);
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 0;
}
.ASK-leads-tags-dados:hover::after {
  width: 8px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* ========================================================
   ÍCONE
======================================================== */
.ASK-leads-tags-dados .kpi-icon {
  font-size: 2rem;
  z-index: 1;
  opacity: 1;
  color: #ffffff;
}

/* ========================================================
   TEXTO DO KPI (CONTAINER) — AQUI ESTÁ A CHAVE DA CENTRALIZAÇÃO
======================================================== */
.ASK-leads-tags-dados .kpi-text {
  display: flex;
  flex-direction: column;

  /* Faz com que <small> + <h3> fiquem alinhados horizontalmente ao centro */
  align-items: center;

  /* Não esticamos verticalmente; confiamos no align-items do pai para centrar verticalmente */
  /* flex:1 apenas faz a .kpi-text ocupar todo o espaço “entre” o ícone e a borda direita */
  flex: 1;
  min-width: 0; /* necessário para permitir encolher corretamente em flexbox */
}

/* Label (ex.: “Potencial Receita”) */
.ASK-leads-tags-dados .kpi-text small {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.9;
  color: #ffffff;
  margin-bottom: 0.25rem; /* espaçamento pequeno entre o label e o número */
  white-space: nowrap;    /* evita quebra de “Potencial Receita” */
  text-align: center;     /* garante que o texto fique centralizado, caso quebre */
}

/* Valor (ex.: “R$ 230.553,00”) — ficará centralizado abaixo do <small> */
.ASK-leads-tags-dados .kpi-text h3 {
  margin: 0;
  font-size: 1.6rem;           /* ajuste para 1.4rem se perceber overflow */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  white-space: nowrap;         /* garante que o número não quebre em duas linhas */
  text-align: center;          /* centraliza o conteúdo de texto dentro do próprio <h3> */
}
/* ========================================================
   Ajustes ESPECÍFICOS para o card “Potencial Receita”
   (classe: .kpi-azul-claro)
======================================================== */

/* 1) Reduzir font-size do número e evitar quebra de linha */
.kpi-azul-claro .kpi-text h3 {
  font-size: 1.2rem !important;      /* menor que 1.4rem, para caber confortavelmente */
  white-space: nowrap !important;    /* força o número a ficar em apenas UMA linha */
  overflow: hidden;                  /* esconde qualquer eventual “vazamento” */
  text-overflow: ellipsis;           /* (caso ainda sobre um pixel, mostra “…” no final) */
}

/* 2) (Opcional) Se o rótulo “Potencial Receita” também estiver muito grande,
   você pode reduzir o font-size dele ou permitir quebra em duas linhas de forma
   controlada, mas como o objetivo é manter o número em uma linha, vamos apenas
   centralizar o small e deixá-lo possivelmente em duas linhas se for o caso. */

.kpi-azul-claro .kpi-text small {
  font-size: 0.85rem !important;     /* um pouco menor que 0.9rem, para sobrar mais espaço */
  white-space: normal;               /* permite quebrar o rótulo em duas linhas, se necessário */
  text-align: center;                /* centraliza “Potencial Receita”, caso quebre */
}

/* 3) (Opcional) Reduzir levemente o padding horizontal do próprio card,
   para ganhar mais “largura” interna: */
.kpi-azul-claro {
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
   padding-right: 1rem;
     gap: 0.2rem; /* em vez de gap: 1rem, reduz para 0.5rem */

}

/* ========================================================
   CORREÇÕES DE CONTRASTE (amarelo e cinza)
======================================================== */
/* Para caixas de cor-amarelo muito claras, escurece ícone e texto */
.kpi-amarelo .kpi-icon,
.kpi-amarelo .kpi-text small,
.kpi-amarelo .kpi-text h3 {
  filter: brightness(0.25);
  color: inherit !important;
}
/* Em caixas cinza, força texto e ícone a ficarem branco semi-opaco */
.kpi-cinza .kpi-icon,
.kpi-cinza .kpi-text small,
.kpi-cinza .kpi-text h3 {
  color: #ffffff !important;
  opacity: 0.9;
}

/* ========================================================
   RESPONSIVIDADE (até 576px)
======================================================== */
@media (max-width: 576px) {
  .ASK-leads-tags-dados {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
    padding: 1rem;
  }
  .ASK-leads-tags-dados .kpi-icon {
    font-size: 1.8rem;
  }
  /* No mobile, alinhar o texto à esquerda para legibilidade */
  .ASK-leads-tags-dados .kpi-text {
    align-items: flex-start;
    flex: none;
    min-width: auto;
  }
  .ASK-leads-tags-dados .kpi-text small {
    text-align: left;
  }
  .ASK-leads-tags-dados .kpi-text h3 {
    text-align: left;
  }
}

/* ========================================================
   ARREDONDAMENTO ESPECIAL NAS EXTREMIDADES
======================================================== */
.row.mb-4 > div[class*="col-"]:first-child .ASK-leads-tags-dados {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.row.mb-4 > div[class*="col-"]:last-child .ASK-leads-tags-dados {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}