/* ========================================================
   0) DECLARAÇÃO DAS CORES (variáveis CSS para o fundo dos cards)
   ======================================================== */
:root {
  /* Você pode mudar esses valores para qualquer cor que desejar */
  --kpi-azul:       #007BFF;
  --kpi-vermelho:   #DC3545;
  --kpi-amarelo:    #F1B600;
  --kpi-verde:      #198754;
  --kpi-azul-claro: #0DCAF0;
  --kpi-cinza:      #6C757D;
  --kpi-laranja:    #f39c12;
}

/* ========================================================
   1) CLASSES DE COR — APLICAR EM CADA .ASK-leads-tags-dados
   ======================================================== */
.kpi-azul       { --kpi-color: var(--kpi-azul); }
.kpi-vermelho   { --kpi-color: var(--kpi-vermelho); }
.kpi-amarelo    { --kpi-color: var(--kpi-amarelo); }
.kpi-verde      { --kpi-color: var(--kpi-verde); }
.kpi-azul-claro { --kpi-color: var(--kpi-azul-claro); }
.kpi-cinza      { --kpi-color: var(--kpi-cinza); }
.kpi-laranja    { --kpi-color: var(--kpi-laranja); }

/* ========================================================
   2) ESTILO BASE DOS CARDS (.ASK-leads-tags-dados)
   ======================================================== */
.ASK-leads-tags-dados {
  position: relative;
  display: flex;
  align-items: center;        /* Ícone e texto centralizados verticalmente */
  flex-direction: row;
  
  /* Espaçamento entre ícone e bloco de texto: um pouco maior para dar folga */
  gap: 0.4rem;
  
  /* Padding interno reduzido para caber bem em zoom e mobile */
  padding: 0.8rem 1rem;
  
  /* Canto arredondado */
  border-radius: 0.5rem;
  
  /* Fundo colorido definido pela variável --kpi-color */
  background-color: var(--kpi-color);
  
  /* Texto em branco */
  color: #ffffff;
  
  /* Sombra suave para “elevar” o card */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  
  overflow: hidden;
  
  /* Transição para hover */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* Ocupa 100% da largura do <div class="col-..."> */
  width: 100%;
}
.ASK-leads-tags-dados:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* ========================================================
   3) ÍCONE (lado esquerdo do card)
   ======================================================== */
.ASK-leads-tags-dados .kpi-icon {
  font-size: 1.5rem;        /* tamanho do ícone */
  margin-right: 0.75rem;    /* distância do ícone até o texto */
  z-index: 1;
  color: #ffffff;
  /* Se usar FontAwesome, garanta que a lib esteja carregada na página */
}

/* ========================================================
   4) BLOC O DE TEXTO (LABEL + VALOR)
   ======================================================== */
.ASK-leads-tags-dados .kpi-text {
  display: flex;
  flex-direction: column;
  
  /* Alinha o <small> e o <h3> à esquerda do bloco de texto */
  align-items: flex-start;
  
  /* Faz o bloco de texto caber somente no espaço que ele precisa */
  flex: 0 1 auto;
  min-width: 0;  /* Necessário para permitir o encolhimento em flexbox */
}

/* Label (ex.: “Total de Leads”) */
.ASK-leads-tags-dados .kpi-text small {
  font-size: 0.9rem;
  font-weight: 700;       /* Deixa o texto mais forte (bold) */
  color: #ffffff;         /* Branco puro */
  opacity: 1;             /* Sem transparência */
  margin-bottom: 0.25rem; /* Espaçamento entre o label e o número */
  white-space: nowrap;    /* Evita quebra de palavra no label */
  text-align: left;       /* Alinha o label à esquerda, caso quebre */
}


/* Valor (ex.: “460”) */
.ASK-leads-tags-dados .kpi-text h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;               /* Para centralizar verticalmente, se precisar */
  font-variant-numeric: tabular-nums;
  
  /* Impede quebra do número e controla o estouro */
  white-space: nowrap;          /* Número não deve quebrar em duas linhas */
  overflow: hidden;             /* Esconde qualquer “vazamento” de texto */
  text-overflow: ellipsis;      /* Mostra reticências caso o texto ultrapasse o espaço */
  text-align: left;             /* Alinha sempre o número à esquerda */
  color: #ffffff;
}

/* ========================================================
   5) SEPARADOR VERTICAL ENTRE OS CARDS
   ======================================================== */
/* 
   Cada card está dentro de um <div class="col-...">.
   Aqui adicionamos um ::after no próprio column-container para desenhar
   uma linha vertical entre cada coluna (exceto a última).
*/
.row.mb-4 > div[class*="col-"]:not(:last-child) {
  position: relative;  /* Permite que o pseudo-elemento seja absoluto em relação a ele */
}

.row.mb-4 > div[class*="col-"]:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%;                /* Deixo 10% de “margem” superior e inferior */
  bottom: 10%;
  right: 0;                /* Fica na borda direita da coluna */
  width: 1px;              /* Espessura da linha */
  background-color: #e0e0e0; /* Cor de destaque discreta do separador (cinza claro) */
}

/* ========================================================
   6) AJUSTES RESPONSIVOS (até 576px de largura)
   ======================================================== */
@media (max-width: 576px) {
  /* Se a tela for pequena, vamos permitir quebra de linha nos cards */
  .row.mb-4 {
    flex-wrap: wrap;       /* Se estiver usando flex na row, mas aqui já é row do Bootstrap */
  }
  
  /* Cards empilhados: cada card passa a ter padding e gap ajustados */
  .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.6rem;   /* Ícone um pouco menor no mobile */
  }
  
  .ASK-leads-tags-dados .kpi-text small {
    font-size: 0.85rem;  /* label um pouco menor */
  }
  
  .ASK-leads-tags-dados .kpi-text h3 {
    font-size: 1.3rem;   /* número um pouco menor */
  }
  
  /* Remove o separador vertical no mobile (fica “poluído”) */
  .row.mb-4 > div[class*="col-"]:not(:last-child)::after {
    display: none;
  }
}
/* ================================================/* ─────────────────────────────────────────────────────────
   Reestruturação em GRID apenas para o ÚLTIMO CARD
   (Potencial Receita, classe kpi-azul-claro)
───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   Ajustes em GRID somente para o ÚLTIMO CARD (kpi-azul-claro)
───────────────────────────────────────────────────────── */

/* 1) Fazemos o container do último card virar um grid 2×2 */
/* ─────────────────────────────────────────────────────────
   Ajustes em GRID somente para o ÚLTIMO CARD (kpi-azul-claro)
───────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
   Ajustes em GRID somente para o ÚLTIMO CARD (kpi-azul-claro)
───────────────────────────────────────────────────────── */
/* ========================================================
   1) Transformamos o container do ÚLTIMO CARD em grid 2×2
   (classe kpi-azul-claro)
======================================================== */
.row.mb-4 > div[class*="col-"]:last-child 
  .ASK-leads-tags-dados.kpi-azul-claro {
  display: grid;
  /* Coluna 1: ícone; Coluna 2: label (texto) */
  grid-template-columns: auto 1fr;
  /* Linha 1: ícone + label; Linha 2: valor (embaixo do ícone) */
  grid-template-rows: auto auto;
  /* Definição de áreas para posicionamento */
  grid-template-areas:
    "icon   label"
    "value  value";
  /* Espaçamento entre colunas e linhas do grid */
  column-gap: 0.3rem;  /* reduza se quiser aproximar mais ícone e texto */
  row-gap:    0.25rem;
  /* Alinha verticalmente todos os itens ao centro de cada célula */
  align-items: center;
}

/* ========================================================
   2) Posiciona o ÍCONE na área "icon" (linha 1, coluna 1)
======================================================== */
.row.mb-4 > div[class*="col-"]:last-child 
  .ASK-leads-tags-dados.kpi-azul-claro 
  .kpi-icon {
  grid-area: icon;
  justify-self: start;  /* alinha o ícone à esquerda da coluna 1 */
  margin-top: 0;        /* ajuste vertical, se necessário */
}

/* ========================================================
   3) Faz o .kpi-text “sumir” como wrapper, liberando <small> e <h3>
======================================================== */
.row.mb-4 > div[class*="col-"]:last-child 
  .ASK-leads-tags-dados.kpi-azul-claro 
  .kpi-text {
  display: contents;
}

/* ========================================================
   4) Posiciona o LABEL (<small>) na área "label" (linha 1, coluna 2)
      e impede que ele pule para baixo do ícone quando os dados forem inseridos
======================================================== */
.row.mb-4 > div[class*="col-"]:last-child 
  .ASK-leads-tags-dados.kpi-azul-claro 
  .kpi-text small {
  /* Fixa o small sempre em "label" (linha 1, coluna 2) */
  grid-area: label;
  /* Caso queira explicitar, force a coluna 2 e linha 1:
     grid-column: 2;
     grid-row: 1; */
  justify-self: start;   /* alinha o texto à esquerda dentro da célula 2 */
  text-align: left;
  font-size: 0.9rem;
  font-weight: 700;      /* opcional: texto em negrito/branco mais forte */
  color: #ffffff;        /* força branco puro */
  margin: 0;             /* zera margens preexistentes */

  /* Remove definitivamente qualquer posicionamento anterior */
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
}

/* ========================================================
   5) Posiciona o VALOR (<h3>) na área "value" (linha 2, colunas 1 e 2)
      embaixo do ícone, usando toda a largura disponível
======================================================== */
.row.mb-4 > div[class*="col-"]:last-child 
  .ASK-leads-tags-dados.kpi-azul-claro 
  .kpi-text h3 {
  /* “value” abrange coluna 1 e coluna 2 da linha 2 */
  grid-area: value;
  justify-self: start;   /* alinha o valor à esquerda da coluna 1 */
  font-size: 1.2rem;
  font-weight: 700;      /* opcional: branco mais forte */
  color: #ffffff;        /* branco puro */
  margin: 0;             /* zera margens preexistentes */

  /* Evita quebra e controla transbordamento */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Remove qualquer posicionamento antigo */
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
}