/* ========================================================
   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;

  /* Ajuste de espaçamento: gap reduzido para dar mais folga, evitando “fuga” do número ao dar zoom */
  gap: 0.1rem;          
  /* Padding reduzido para mais espaço interno */
  padding: 0.8rem 1rem; 

  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: 1.5rem; /* Tamanho do ícone */
  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 na esquerda do bloco */
  align-items: flex-start;

  /* Não esticamos para preencher, apenas encolhe ou expande conforme o conteúdo */
  flex: 0 1 auto;
  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: left;       /* alinha o label à esquerda, caso quebre */
}

/* Valor (ex.: “R$ 230.553,00”) — ficará encostado à esquerda abaixo do <small> */
.ASK-leads-tags-dados .kpi-text h3 {
  margin: 0;
  font-size: 1.4rem;           /* ajuste para 1.4rem se perceber overflow */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;

  /* Impede quebra e controla estouro do texto */
  white-space: nowrap;         /* o número não quebra em duas linhas */
  overflow: hidden;            /* esconde qualquer parte que transborde */
  text-overflow: ellipsis;     /* mostra “…” caso ainda exceda por um pixel */
  text-align: left;            /* mantém o texto alinhado à esquerda */
}

/* ========================================================
   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) Se o rótulo estiver muito grande, ajustar o font-size ou permitir quebra em duas linhas. */
.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: left;                /* alinha o label à esquerda, caso quebre */
}

/* 3) Reduzir levemente o padding horizontal do próprio card, para ganhar mais “largura” interna */
.kpi-azul-claro {
  padding-left: 0.2rem !important;
 
  gap: 0.2rem !important; /* mantém o gap reduzido igual ao base */
}

/* ========================================================
   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;      /* mantém um gap razoável no mobile */
    padding: 1rem;    /* padding uniforme no mobile */
  }
  .ASK-leads-tags-dados .kpi-icon {
    font-size: 1.6rem; /* reduzido em relação a 1.8rem, para melhor encaixe ao dar zoom */
  }
  /* No mobile, alinhar o texto à esquerda para legibilidade */
  .ASK-leads-tags-dados .kpi-text {
    align-items: flex-start;
    flex: 0 1 auto;
    min-width: auto;
  }
  .ASK-leads-tags-dados .kpi-text small {
    text-align: left;
  }
  .ASK-leads-tags-dados .kpi-text h3 {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ========================================================
   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;
}