/* ════════════════════════════════════════════════════════════════════
   DASHBOARD BANNER STYLE — v4.37.105
   Reimplementação FIEL ao print de referência (3ª tentativa).
   Atenção máxima em:
   - Forma trapezoidal do banner-título (clip-path correto)
   - Gradient sutil saturado (não puro)
   - Tamanho HEROICO do número (52px desktop / 38px mobile)
   - Ícone-papel grande à esquerda do valor
   - Ícone-quadrado branco no canto superior direito
   - Linha pontilhada com transparência correta
   - Pílula branca pura na faixa inferior
   - Padding generoso (não apertado)
   - Sombras 3D internas no banner
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ RESET DO CARD .kpi ═══════════ */
#view-dashboard .kpi {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  min-height: 150px !important;
  transition: transform .2s ease, filter .2s ease !important;
}

#view-dashboard .kpi::before,
#view-dashboard .kpi::after {
  display: none !important;
}

#view-dashboard .kpi:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
}

/* ═══════════ FUNDO COLORIDO PADRÃO (roxo) ═══════════ */
#view-dashboard .kpi {
  background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 50%, #3b1d80 100%) !important;
}

/* ═══════════ TÍTULO DO CARD (banner trapezoidal) ═══════════ */
#view-dashboard .kpi .k-lb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 28px 8px 12px !important;
  margin: 8px 0 0 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  border: none !important;
  border-radius: 8px 0 0 8px !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  align-self: flex-start !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Desktop pequeno: título compacto pra caber */
@media (min-width: 1100px) {
  #view-dashboard .kpi .k-lb {
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
    padding: 7px 24px 7px 10px !important;
  }
}

/* ═══════════ ÁREA DO VALOR + ÍCONE GRANDE ═══════════ */
#view-dashboard .kpi .k-vl {
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 16px 14px 18px 14px !important;
  letter-spacing: -1px !important;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.3), 0 0 1px rgba(255,255,255,.1) !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  /* CRÍTICO: força que o valor numérico fique numa LINHA SÓ (sem quebrar
     "R$ 58.252," / "67"). Se não couber, faz scale ou diminui font. */
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transition: padding-left .15s ease !important;
}

/* Mobile: número maior porque tem largura toda pro card */
@media (min-width: 600px) {
  #view-dashboard .kpi .k-vl {
    font-size: 28px !important;
  }
}

/* Desktop pequeno (3 cards/linha): número médio */
@media (min-width: 1100px) {
  #view-dashboard .kpi .k-vl {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
  }
}

/* Desktop grande: número um pouco maior */
@media (min-width: 1400px) {
  #view-dashboard .kpi .k-vl {
    font-size: 26px !important;
  }
}

/* Quando emoji-papel está presente, abre espaço pra ele */
#view-dashboard .kpi .k-vl:has(.cp-emoji-papel),
#view-dashboard .kpi .k-vl.k-vl-com-emoji {
  padding-left: 80px !important;
}

@media (min-width: 1100px) {
  #view-dashboard .kpi .k-vl:has(.cp-emoji-papel),
  #view-dashboard .kpi .k-vl.k-vl-com-emoji {
    padding-left: 64px !important;
  }
}

/* Remove o ::before antigo */
#view-dashboard .kpi .k-vl::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 600px) {
  #view-dashboard .kpi .k-vl {
    font-size: 32px !important;
    padding: 14px 12px 14px 70px !important;
    letter-spacing: -1px !important;
  }
}

/* Quadrado-papel COM emoji centralizado */
/* Usa display:grid + place-items:center — método mais robusto pra centralizar emoji */
#view-dashboard .kpi .k-vl span.cp-emoji-papel,
#view-dashboard .kpi .k-vl > .cp-emoji-papel {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  line-height: 1 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  /* Fundo do quadrado-papel (era no ::before, agora é direto no span) */
  background: rgba(255,255,255,.85) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5) !important;
  /* Garante que o emoji renderize centralizado independente de fonte */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
}

@media (max-width: 600px) {
  #view-dashboard .kpi .k-vl span.cp-emoji-papel,
  #view-dashboard .kpi .k-vl > .cp-emoji-papel {
    width: 48px !important;
    height: 48px !important;
    left: 12px !important;
    font-size: 26px !important;
  }
}

/* Desktop: quadrado-papel menor pra deixar mais espaço pro número */
@media (min-width: 1100px) {
  #view-dashboard .kpi .k-vl span.cp-emoji-papel,
  #view-dashboard .kpi .k-vl > .cp-emoji-papel {
    width: 42px !important;
    height: 42px !important;
    left: 10px !important;
    font-size: 22px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 600px) {
  #view-dashboard .kpi .k-vl {
    font-size: 32px !important;
    padding: 14px 12px 14px 70px !important;
    letter-spacing: -1px !important;
  }
}

/* ═══════════ DESCRIÇÃO INFERIOR (com pontilhado e pílula) ═══════════ */
/* Especificidade alta pra vencer regra inline do index.html linha 500
   que força white-space:nowrap no mobile */
#view-dashboard .kpi .k-sb,
.view#view-dashboard .kpi .k-sb,
#view-dashboard div.kpi .k-sb,
#view-dashboard .kpi > .k-sb {
  font-size: 13px !important;
  color: rgba(255,255,255,.95) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: rgba(0,0,0,.18) !important;
  border-top: 1px dashed rgba(255,255,255,.3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  /* CRÍTICO: força quebra de linha pra texto longo NÃO estourar o card */
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

@media (max-width: 600px) {
  #view-dashboard .kpi .k-sb,
  .view#view-dashboard .kpi .k-sb,
  #view-dashboard div.kpi .k-sb,
  #view-dashboard .kpi > .k-sb {
    font-size: 12px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    word-break: break-word !important;
  }
}

/* Filhos do .k-sb também respeitam quebra */
#view-dashboard .kpi .k-sb,
#view-dashboard .kpi .k-sb *,
#view-dashboard .kpi .k-sb > * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* O CARD pai também precisa de overflow:hidden pra não vazar */
#view-dashboard .kpi {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ícone documento antes da descrição (não quebra) */
#view-dashboard .kpi .k-sb::before {
  content: "📄" !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Pílula de variação (não quebra) */
#view-dashboard .kpi .k-sb [class*="badge"],
#view-dashboard .kpi .k-sb [class*="trend"] {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ═══════════ ÍCONE NO CANTO SUPERIOR DIREITO (DESATIVADO em v4.37.108) ═══════════ */
/* Esconde TODOS os indicadores no canto pra evitar duplicação:
   - .k-ic (ícone original do card)
   - .cp-card-indicator (👆 dedo apontando — adicionado pelo dashboard-v2.js) */
#view-dashboard .kpi .k-ic,
#view-dashboard .kpi > .k-ic,
#view-dashboard div.kpi .k-ic,
.view#view-dashboard .kpi .k-ic,
#view-dashboard .kpi .cp-card-indicator,
#view-dashboard .kpi > .cp-card-indicator,
.view#view-dashboard .kpi .cp-card-indicator {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ═══════════ CORES POR TIPO — CADA CARD COM COR ÚNICA ═══════════ */

/* 🟢 VERDE — MRR Vigente, Saldo Líquido positivo */
#view-dashboard .kpi[onclick*="abrirSaldoLiquido"],
#view-dashboard .kpi[onclick*="cpAbrirListaMRR"],
#view-dashboard .kpi[onclick*="abrirListaMRR"],
#view-dashboard .kpi[style*="#10b981"],
#view-dashboard .kpi[style*="#059669"] {
  background: linear-gradient(135deg, #047857 0%, #065f46 50%, #064e3b 100%) !important;
}

/* 🟣 ROXO — Valor Total da Carteira */
#view-dashboard .kpi[onclick*="cpAbrirListaCarteira"],
#view-dashboard .kpi[onclick*="abrirListaCarteira"] {
  background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 50%, #3b1d80 100%) !important;
}

/* 🟦 TEAL (verde-cyan) — Contratos Ativos */
#view-dashboard .kpi[onclick*="cpAbrirListaAtivos"],
#view-dashboard .kpi[onclick*="abrirListaAtivos"] {
  background: linear-gradient(135deg, #0d9488 0%, #115e59 50%, #134e4a 100%) !important;
}

/* 🩷 ROSA — Ticket Médio (cor diferenciada) */
#view-dashboard .kpi[onclick*="abrirTicketMedio"] {
  background: linear-gradient(135deg, #be185d 0%, #9f1239 50%, #881337 100%) !important;
}

/* 🔵 AZUL — Novos no Mês, Vendas */
#view-dashboard .kpi[onclick*="cpAbrirListaNovos"],
#view-dashboard .kpi[onclick*="abrirListaNovos"],
#view-dashboard .kpi[onclick*="irP('vendas'"],
#view-dashboard .kpi[onclick*="\\'vendas\\'"],
#view-dashboard .kpi[style*="#3d7bff"],
#view-dashboard .kpi[style*="#7c3aed,#3d7bff"] {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%) !important;
}

/* 🟡 ÂMBAR — Renovações Urgentes, Atenção */
#view-dashboard .kpi[onclick*="abrirRenovacoes"],
#view-dashboard .kpi[onclick*="cpAbrirListaRenovacoes"],
#view-dashboard .kpi[onclick*="abrirAtencao"],
#view-dashboard .kpi[style*="#f59e0b"],
#view-dashboard .kpi[style*="#d97706"] {
  background: linear-gradient(135deg, #b45309 0%, #92400e 50%, #78350f 100%) !important;
}

/* 🟠 LARANJA — Inadimplência */
#view-dashboard .kpi[onclick*="abrirInadimpl"],
#view-dashboard .kpi[onclick*="abrirAtrasados"],
#view-dashboard .kpi[id*="inadimpl"] {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 50%, #7c2d12 100%) !important;
}

/* 🟣 VIOLETA — LTV Top Clientes */
#view-dashboard .kpi[onclick*="abrirLTV"],
#view-dashboard .kpi[id*="ltv"] {
  background: linear-gradient(135deg, #7e22ce 0%, #6b21a8 50%, #581c87 100%) !important;
}

/* 🔴 VERMELHO — Cancelados, Churn */
#view-dashboard .kpi[onclick*="abrirChurnProdutos"],
#view-dashboard .kpi[onclick*="abrirChurn"],
#view-dashboard .kpi[onclick*="cpAbrirListaChurn"],
#view-dashboard .kpi[style*="#f43f5e"],
#view-dashboard .kpi[style*="#ef4444"] {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 50%, #7f1d1d 100%) !important;
}

/* 🔴 VERMELHO — Saldo Líquido NEGATIVO (sobrescreve verde quando negativo) */
#view-dashboard .kpi.saldo-negativo {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 50%, #7f1d1d 100%) !important;
}

/* ═══════════ COR DO BANNER-TÍTULO POR TIPO ═══════════ */
/* Cada card tem banner-título com versão MAIS CLARA da sua cor */

/* Default: banner roxo claro */
#view-dashboard .kpi .k-lb {
  background: linear-gradient(180deg, rgba(167,139,250,.4) 0%, rgba(139,92,246,.2) 100%) !important;
}

/* Verde: banner verde-menta claro */
#view-dashboard .kpi[onclick*="abrirSaldoLiquido"] .k-lb,
#view-dashboard .kpi[onclick*="cpAbrirListaMRR"] .k-lb {
  background: linear-gradient(180deg, rgba(52,211,153,.5) 0%, rgba(16,185,129,.3) 100%) !important;
}

/* Roxo: banner lilás claro */
#view-dashboard .kpi[onclick*="cpAbrirListaCarteira"] .k-lb,
#view-dashboard .kpi[onclick*="abrirListaCarteira"] .k-lb {
  background: linear-gradient(180deg, rgba(196,181,253,.5) 0%, rgba(167,139,250,.3) 100%) !important;
}

/* Teal: banner cyan claro */
#view-dashboard .kpi[onclick*="cpAbrirListaAtivos"] .k-lb,
#view-dashboard .kpi[onclick*="abrirListaAtivos"] .k-lb {
  background: linear-gradient(180deg, rgba(94,234,212,.5) 0%, rgba(45,212,191,.3) 100%) !important;
}

/* Rosa: banner pink claro */
#view-dashboard .kpi[onclick*="abrirTicketMedio"] .k-lb {
  background: linear-gradient(180deg, rgba(244,114,182,.5) 0%, rgba(236,72,153,.3) 100%) !important;
}

/* Azul: banner azul claro */
#view-dashboard .kpi[onclick*="cpAbrirListaNovos"] .k-lb,
#view-dashboard .kpi[onclick*="abrirListaNovos"] .k-lb {
  background: linear-gradient(180deg, rgba(96,165,250,.5) 0%, rgba(59,130,246,.3) 100%) !important;
}

/* Âmbar: banner amarelo claro */
#view-dashboard .kpi[onclick*="abrirRenovacoes"] .k-lb,
#view-dashboard .kpi[onclick*="cpAbrirListaRenovacoes"] .k-lb,
#view-dashboard .kpi[onclick*="abrirAtencao"] .k-lb {
  background: linear-gradient(180deg, rgba(251,191,36,.5) 0%, rgba(245,158,11,.3) 100%) !important;
}

/* Laranja: banner laranja claro */
#view-dashboard .kpi[onclick*="abrirInadimpl"] .k-lb,
#view-dashboard .kpi[onclick*="abrirAtrasados"] .k-lb {
  background: linear-gradient(180deg, rgba(253,186,116,.5) 0%, rgba(251,146,60,.3) 100%) !important;
}

/* Violeta: banner violeta claro */
#view-dashboard .kpi[onclick*="abrirLTV"] .k-lb {
  background: linear-gradient(180deg, rgba(216,180,254,.5) 0%, rgba(192,132,252,.3) 100%) !important;
}

/* Vermelho: banner vermelho claro */
#view-dashboard .kpi[onclick*="abrirChurnProdutos"] .k-lb,
#view-dashboard .kpi[onclick*="abrirChurn"] .k-lb,
#view-dashboard .kpi[onclick*="cpAbrirListaChurn"] .k-lb,
#view-dashboard .kpi.saldo-negativo .k-lb {
  background: linear-gradient(180deg, rgba(252,165,165,.5) 0%, rgba(239,68,68,.3) 100%) !important;
}

/* ═══════════ COR DO QUADRADO-PAPEL POR TIPO ═══════════ */
/* Cada cor de card tem seu quadrado-papel com tom claro semi-transparente */

/* Default: branco translúcido */
#view-dashboard .kpi .cp-emoji-papel {
  background: rgba(255,255,255,.85) !important;
}

/* Verde — MRR, Saldo+ */
#view-dashboard .kpi[onclick*="abrirSaldoLiquido"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="cpAbrirListaMRR"] .cp-emoji-papel {
  background: rgba(220,252,231,.92) !important;
}

/* Roxo — Carteira */
#view-dashboard .kpi[onclick*="cpAbrirListaCarteira"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="abrirListaCarteira"] .cp-emoji-papel {
  background: rgba(237,233,254,.92) !important;
}

/* Teal — Ativos */
#view-dashboard .kpi[onclick*="cpAbrirListaAtivos"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="abrirListaAtivos"] .cp-emoji-papel {
  background: rgba(204,251,241,.92) !important;
}

/* Rosa — Ticket Médio */
#view-dashboard .kpi[onclick*="abrirTicketMedio"] .cp-emoji-papel {
  background: rgba(252,231,243,.92) !important;
}

/* Azul — Novos */
#view-dashboard .kpi[onclick*="cpAbrirListaNovos"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="abrirListaNovos"] .cp-emoji-papel {
  background: rgba(219,234,254,.92) !important;
}

/* Âmbar — Renovações */
#view-dashboard .kpi[onclick*="abrirRenovacoes"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="cpAbrirListaRenovacoes"] .cp-emoji-papel {
  background: rgba(254,243,199,.92) !important;
}

/* Laranja — Inadimplência */
#view-dashboard .kpi[onclick*="abrirInadimpl"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="abrirAtrasados"] .cp-emoji-papel {
  background: rgba(255,237,213,.92) !important;
}

/* Violeta — LTV */
#view-dashboard .kpi[onclick*="abrirLTV"] .cp-emoji-papel {
  background: rgba(243,232,255,.92) !important;
}

/* Vermelho — Churn, Saldo- */
#view-dashboard .kpi[onclick*="abrirChurnProdutos"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="abrirChurn"] .cp-emoji-papel,
#view-dashboard .kpi[onclick*="cpAbrirListaChurn"] .cp-emoji-papel,
#view-dashboard .kpi.saldo-negativo .cp-emoji-papel {
  background: rgba(254,226,226,.92) !important;
}

/* ═══════════ PÍLULA DA VARIAÇÃO (branca pura, na faixa inferior) ═══════════ */
#view-dashboard .kpi .k-sb [class*="badge"],
#view-dashboard .kpi .k-sb [class*="trend"] {
  background: #ffffff !important;
  color: #1f2937 !important;
  padding: 5px 12px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ═══════════ RESET DE EFEITOS ═══════════ */
#view-dashboard .kpi {
  animation: none !important;
}

#view-dashboard .kpi * {
  animation: none !important;
}

/* ═══════════ GRID DE KPIs (1 por linha mobile, 3-4 desktop) ═══════════ */
#view-dashboard .krow {
  gap: 16px !important;
}

/* ═══════════ GRID DE KPIs ═══════════ */
/* Mobile: 1 por linha em todas as classes */
#view-dashboard .krow.k4,
#view-dashboard .krow.k3,
#view-dashboard .krow.k5,
#view-dashboard .krow.k6 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Tablet: 2 por linha */
@media (min-width: 700px) {
  #view-dashboard .krow.k4,
  #view-dashboard .krow.k3,
  #view-dashboard .krow.k5,
  #view-dashboard .krow.k6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop pequeno: 3 por linha */
@media (min-width: 1100px) {
  #view-dashboard .krow.k3,
  #view-dashboard .krow.k4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #view-dashboard .krow.k5,
  #view-dashboard .krow.k6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Desktop grande: máximo 4 por linha (NUNCA 5 ou 6 — fica apertado) */
@media (min-width: 1400px) {
  #view-dashboard .krow.k4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  #view-dashboard .krow.k5,
  #view-dashboard .krow.k6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ═══════════ TÍTULO DA SEÇÃO ═══════════ */
#view-dashboard .card .ctitle {
  text-shadow: none !important;
}