/* =========================
   CHART 1 - FLUXO DIÁRIO
   versão limpa e moderna
   ========================= */

#chart-1-fluxo-diario {
  width: 100%;
  height: 100%;
}

/* Altura do gráfico */
.h240 {
  height: 380px;
}

/* Card do gráfico mais moderno */
.chart-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(205, 218, 238, .95);
  background:
    radial-gradient(circle at top right, rgba(46, 107, 230, .08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow:
    0 18px 45px rgba(26, 38, 64, .08),
    0 4px 14px rgba(26, 38, 64, .04),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.chart-card:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 107, 230, .28);
  box-shadow:
    0 26px 60px rgba(26, 38, 64, .12),
    0 8px 24px rgba(46, 107, 230, .08);
}

/* Brilho decorativo no canto */
.chart-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -100px;
  border-radius: 999px;
  background: rgba(46, 107, 230, .08);
  pointer-events: none;
}

/* Cabeçalho do card */
.cc-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.cc-title {
  font-size: 15px;
  font-weight: 850;
  color: #07152f;
  letter-spacing: -.25px;
}

.cc-sub {
  font-size: 11px;
  color: #7d8ca1;
  margin-top: 3px;
}

/* Área do gráfico */
.chart-area {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Total no topo */
.fluxo-total-topo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0b47bd;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  border: 1px solid #bfd6fb;
  border-radius: 14px;
  padding: 10px 15px;
  line-height: 1;
  box-shadow:
    0 8px 18px rgba(46, 107, 230, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Pontinho decorativo antes do total */
.fluxo-total-topo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2e6be6;
  box-shadow: 0 0 0 4px rgba(46, 107, 230, .12);
}

/* Switch de botões */
.fluxo-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid #d4dfef;
  border-radius: 15px;
  background: #f6f9fd;
  box-shadow:
    inset 0 1px 2px rgba(26, 38, 64, .04),
    0 4px 12px rgba(26, 38, 64, .035);
  overflow: visible;
}

/* Botões do switch */
.fluxo-btn {
  border: 0;
  border-radius: 11px;
  padding: 8px 15px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: #66778f;
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.fluxo-btn:hover {
  background: #ffffff;
  color: #0b47bd;
  box-shadow: 0 5px 14px rgba(26, 38, 64, .07);
  transform: translateY(-1px);
}

.fluxo-btn.on {
  background: linear-gradient(135deg, #1458e8 0%, #003fbf 100%);
  color: #ffffff;
  box-shadow:
    0 8px 18px rgba(20, 88, 232, .25),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Responsivo */
@media (max-width: 700px) {
  .h240 {
    height: 320px;
  }

  .cc-head {
    align-items: flex-start;
  }

  .fluxo-switch {
    width: 100%;
    justify-content: space-between;
  }

  .fluxo-btn {
    flex: 1;
    padding: 8px 10px;
  }

  .fluxo-total-topo {
    width: 100%;
    justify-content: center;
  }
}.fluxo-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .fluxo-head-actions {
    width: 100%;
  }
}/* =========================
   KPIs PREMIUM - RECEBIMENTO
   colocar no FINAL do recebimento.css
   ========================= */

.kstrip {
  gap: 18px !important;
}

.kpi {
  min-height: 150px !important;
  padding: 22px 22px 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(205, 218, 238, .95) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(46,107,230,.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
  box-shadow:
    0 18px 45px rgba(26, 38, 64, .08),
    0 4px 14px rgba(26, 38, 64, .04),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.kpi:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(46,107,230,.28) !important;
  box-shadow:
    0 26px 60px rgba(26, 38, 64, .13),
    0 8px 24px rgba(46,107,230,.10) !important;
}

.kpi::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--kc, #2e6be6) !important;
  border-radius: 22px 22px 0 0 !important;
}

.kpi::after {
  content: "" !important;
  position: absolute !important;
  width: 170px !important;
  height: 170px !important;
  right: -85px !important;
  top: -95px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--kc, #2e6be6) 13%, transparent) !important;
  pointer-events: none !important;
}

.kpi-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 2 !important;
}

.kpi-label {
  font-size: 11px !important;
  letter-spacing: 1.35px !important;
  font-weight: 800 !important;
  color: #7b8aa0 !important;
}

.kpi-ico {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.90)) !important;
  border: 1px solid rgba(190, 210, 240, .95) !important;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--kc, #2e6be6) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  color: var(--kc, #2e6be6) !important;
}

.kpi-ico svg {
  display: block !important;
  width: 27px !important;
  height: 27px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.kpi-ico svg path,
.kpi-ico svg circle,
.kpi-ico svg rect,
.kpi-ico svg line,
.kpi-ico svg polyline {
  stroke: currentColor !important;
  fill: none !important;
}

.kpi-val {
  font-size: clamp(25px, 2.1vw, 34px) !important;
  font-weight: 850 !important;
  letter-spacing: -1.25px !important;
  line-height: 1 !important;
  color: #07152f !important;
  margin-top: 8px !important;
  position: relative !important;
  z-index: 2 !important;
}

.kpi-val.sm {
  font-size: clamp(21px, 1.75vw, 28px) !important;
}

.kpi-val.c-bl { color: #0b56d9 !important; }
.kpi-val.c-pu { color: #6d28d9 !important; }
.kpi-val.c-am { color: #c25b00 !important; }
.kpi-val.c-rd { color: #dc2626 !important; }
.kpi-val.c-gr { color: #0d7a4e !important; }
.kpi-val.c-or { color: #c2410c !important; }

.kpi-bot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.kpi-hint {
  font-size: 12px !important;
  color: #708199 !important;
  font-weight: 500 !important;
}

.tr {
  border-radius: 11px !important;
  padding: 7px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  gap: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.tr.up {
  background: linear-gradient(180deg, #e9fbf2, #d9f7e9) !important;
  color: #0b8a55 !important;
}

.tr.nu {
  background: linear-gradient(180deg, #f7f9fc, #edf1f6) !important;
  color: #536174 !important;
}

.tr.dn {
  background: linear-gradient(180deg, #fff0f0, #fde1e1) !important;
  color: #b91c1c !important;
}

.kpi-spark {
  width: 118px !important;
  height: 48px !important;
  right: 16px !important;
  bottom: 12px !important;
  opacity: .8 !important;
  position: absolute !important;
  pointer-events: none !important;
  filter: drop-shadow(0 8px 12px rgba(46,107,230,.12)) !important;
}

/* Header da tela mais parecido com o preview */
.ph-title {
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -1.4px !important;
  color: #07152f !important;
}

.ph-eyebrow {
  font-weight: 900 !important;
  letter-spacing: 2.4px !important;
}

.ph-sub {
  font-size: 13px !important;
  color: #61728a !important;
}

/* Pills do topo */
.pill {
  border-radius: 13px !important;
  padding: 9px 15px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(207,219,236,.95) !important;
  box-shadow: 0 8px 18px rgba(26,38,64,.06) !important;
}

.pill-blue {
  background: linear-gradient(180deg, #ffffff, #edf5ff) !important;
  color: #0b47bd !important;
}

.pill-gray {
  background: linear-gradient(180deg, #ffffff, #f5f7fb) !important;
  color: #344258 !important;
}