/* ═══════════════════════════════════════════════════════════════
   saldo.css
   ABA 04 — SALDO POSITIVO E NEGATIVO
   Layout premium para Posição Financeira do Período

   Como usar:
   - Substitua o CSS atual da aba 04 por este arquivo.
   - Carregue depois dos CSS globais.
   - Mantém compatibilidade com as classes atuais:
     saldo-card, saldo-split, saldo-detail-panel, saldo-chip etc.
   ═══════════════════════════════════════════════════════════════ */

#panel-4 {
  --saldo-ink: #04152f;
  --saldo-text: #172338;
  --saldo-muted: #6f8198;
  --saldo-faint: #9cafc5;
  --saldo-line: #d9e5f3;
  --saldo-line-soft: #e8eff7;
  --saldo-bg: #f7fbff;
  --saldo-green: #0d7a4e;
  --saldo-green-2: #15a66a;
  --saldo-red: #dc2626;
  --saldo-red-2: #ef4444;
  --saldo-orange: #d97706;
  --saldo-orange-2: #f59e0b;
  --saldo-blue: #2563eb;
  --saldo-blue-2: #60a5fa;
  --saldo-purple: #7c3aed;
  --saldo-shadow: 0 26px 80px rgba(20, 40, 72, .11),
                  0 8px 22px rgba(20, 40, 72, .055),
                  inset 0 1px 0 rgba(255, 255, 255, .98);
  --saldo-shadow-soft: 0 14px 35px rgba(20, 40, 72, .07);
}

#panel-4 * {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER DA ABA 04
   ═══════════════════════════════════════════════════════════════ */

#panel-4 .ph {
  margin-bottom: 18px !important;
}

#panel-4 .ph-eyebrow {
  color: var(--saldo-orange) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

#panel-4 .ph-title {
  margin-top: 5px !important;
  color: var(--saldo-ink) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -1.7px !important;
}

#panel-4 .ph-sub {
  margin-top: 8px !important;
  color: #647893 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

#panel-4 .ph-right .pill,
#panel-4 .pill {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 0 18px !important;
  border-radius: 17px !important;
  background: #ffffff !important;
  border: 1px solid var(--saldo-line) !important;
  box-shadow: var(--saldo-shadow-soft) !important;
  color: #0f1f38 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   KPIS SUPERIORES
   Mantém compatibilidade com .kstrip / .kpi do layout atual
   ═══════════════════════════════════════════════════════════════ */

#panel-4 .kstrip {
  gap: 16px !important;
  margin-bottom: 18px !important;
}

#panel-4 .kpi {
  position: relative !important;
  overflow: hidden !important;
  min-height: 190px !important;
  padding: 24px 24px 20px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(205, 218, 238, .96) !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--kc, #2563eb) 10%, transparent), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: var(--saldo-shadow) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

#panel-4 .kpi:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 32px 90px rgba(20, 40, 72, .15),
              0 10px 28px rgba(20, 40, 72, .08) !important;
}

#panel-4 .kpi::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--kc, #2563eb), transparent 82%) !important;
}

#panel-4 .kpi::after {
  content: "" !important;
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  right: -78px !important;
  top: -80px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--kc, #2563eb) 8%, transparent) !important;
  pointer-events: none !important;
}

#panel-4 .kpi-top {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#panel-4 .kpi-label {
  color: #7789a0 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
}

#panel-4 .kpi-ico {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 19px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--kc, #2563eb) !important;
  background:
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--kc, #2563eb) 13%, #fff)) !important;
  border: 1px solid color-mix(in srgb, var(--kc, #2563eb) 24%, #dce8f8) !important;
  box-shadow: 0 15px 30px color-mix(in srgb, var(--kc, #2563eb) 17%, transparent) !important;
}

#panel-4 .kpi-ico svg {
  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;
}

#panel-4 .kpi-val {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 28px !important;
  color: var(--kc, var(--saldo-ink)) !important;
  font-size: clamp(30px, 2.4vw, 42px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -1.7px !important;
}

#panel-4 .kpi-hint {
  color: #65778e !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

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

#panel-4 .tr {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#panel-4 .tr.up {
  color: var(--saldo-green) !important;
  background: #e9fbf2 !important;
}

#panel-4 .tr.dn {
  color: var(--saldo-red) !important;
  background: #fff0f0 !important;
}

#panel-4 .tr.nu {
  color: var(--saldo-orange) !important;
  background: #fff4df !important;
}

/* Mini sparkline visual caso exista dentro do KPI */
#panel-4 .kpi .spark,
#panel-4 .kpi canvas {
  position: relative !important;
  z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD PRINCIPAL — COMPOSIÇÃO DO RESULTADO
   ═══════════════════════════════════════════════════════════════ */

#panel-4 .saldo-card {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border: 1px solid rgba(205, 218, 238, .96) !important;
  border-radius: 28px !important;
  box-shadow: var(--saldo-shadow) !important;
}

#panel-4 .saldo-card::after {
  content: "" !important;
  position: absolute !important;
  width: 260px !important;
  height: 260px !important;
  right: -115px !important;
  top: -115px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, .06) !important;
  pointer-events: none !important;
}

#panel-4 .saldo-card .cc-head,
#panel-4 .saldo-card > .cc-head {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 24px 26px 12px !important;
  margin: 0 !important;
}

#panel-4 .saldo-card .cc-title {
  color: var(--saldo-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -.55px !important;
}

#panel-4 .saldo-card .cc-sub {
  margin-top: 6px !important;
  color: #899bb2 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Cabeçalho: título + chips */
#panel-4 .saldo-mini-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ── Chips ────────────────────────────────────────────────────── */
#panel-4 .saldo-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}

#panel-4 .saldo-chip::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

#panel-4 .saldo-chip-pos {
  background: #e8f7ef !important;
  color: var(--saldo-green) !important;
  border-color: #cceedd !important;
}

#panel-4 .saldo-chip-pos::before {
  background: var(--saldo-green) !important;
}

#panel-4 .saldo-chip-neg {
  background: #fdecec !important;
  color: var(--saldo-red) !important;
  border-color: #ffd4d4 !important;
}

#panel-4 .saldo-chip-neg::before {
  background: var(--saldo-red) !important;
}

#panel-4 .saldo-chip-net {
  background: #fff4df !important;
  color: var(--saldo-orange) !important;
  border-color: #ffe3ae !important;
}

#panel-4 .saldo-chip-net::before {
  background: var(--saldo-orange) !important;
}

/* ── Layout split: gráfico + detalhamento ─────────────────────── */
#panel-4 .saldo-split {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, .95fr) !important;
  gap: 0 !important;
  padding: 0 22px 22px !important;
}

#panel-4 .saldo-chart-area {
  position: relative !important;
  width: 100% !important;
  height: 430px !important;
  min-height: 430px !important;
  padding: 16px 18px 10px !important;
  border-right: 1px solid var(--saldo-line) !important;
}

#panel-4 .saldo-chart-area::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 50% !important;
  border-top: 1px dashed rgba(37, 99, 235, .24) !important;
  pointer-events: none !important;
}

#panel-4 #chart-4-composicao {
  width: 100% !important;
  height: 400px !important;
  min-height: 400px !important;
}

/* Painel lateral tipo “finance breakdown” */
#panel-4 .saldo-detail-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 430px !important;
  padding: 0 0 0 20px !important;
}

#panel-4 .saldo-detail-head {
  padding: 15px 16px 13px !important;
  border-bottom: 1px solid var(--saldo-line) !important;
  flex-shrink: 0 !important;
}

#panel-4 .saldo-detail-head-title {
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  color: var(--saldo-ink) !important;
  margin: 0 !important;
  letter-spacing: -.35px !important;
}

#panel-4 .saldo-detail-head-sub {
  font-size: 12px !important;
  color: #8a97a8 !important;
  font-weight: 600 !important;
  margin: 5px 0 0 !important;
}

/* ── Grupos (Entradas / Deduções) ─────────────────────────────── */
#panel-4 .saldo-group {
  border-bottom: 1px solid var(--saldo-line) !important;
}

#panel-4 .saldo-group-label {
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9aacbf !important;
  padding: 13px 16px 6px !important;
}

/* ── Linhas de item ───────────────────────────────────────────── */
#panel-4 .saldo-drow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  border-radius: 0 !important;
}

#panel-4 .saldo-drow + .saldo-drow {
  border-top: 1px solid #f0f3f6 !important;
}

#panel-4 .saldo-drow:hover {
  background: #f8fbff !important;
}

#panel-4 .saldo-drow-child {
  padding: 10px 16px 10px 30px !important;
  background: #fafcfe !important;
}

#panel-4 .saldo-drow-left {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#panel-4 .saldo-drow-name {
  font-size: 13px !important;
  color: #2c3a4a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#panel-4 .saldo-drow-child .saldo-drow-name {
  font-size: 12px !important;
  color: #6b7a8d !important;
  font-weight: 650 !important;
}

#panel-4 .saldo-drow-val {
  font-family: 'DM Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#panel-4 .saldo-drow-child .saldo-drow-val {
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ── Ícones ───────────────────────────────────────────────────── */
#panel-4 .saldo-row-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#panel-4 .saldo-row-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#panel-4 .saldo-drow-child .saldo-row-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
}

#panel-4 .saldo-drow-child .saldo-row-icon svg {
  width: 11px !important;
  height: 11px !important;
}

#panel-4 .saldo-icon-gr {
  background: #e8f7ef !important;
  stroke: var(--saldo-green) !important;
}

#panel-4 .saldo-icon-gr svg {
  stroke: var(--saldo-green) !important;
}

#panel-4 .saldo-icon-rd {
  background: #fdecec !important;
}

#panel-4 .saldo-icon-rd svg {
  stroke: var(--saldo-red) !important;
}

#panel-4 .saldo-icon-am {
  background: #fff4df !important;
}

#panel-4 .saldo-icon-am svg {
  stroke: var(--saldo-orange) !important;
}

#panel-4 .saldo-icon-mu {
  background: #f1f5f9 !important;
}

#panel-4 .saldo-icon-mu svg {
  stroke: #8a97a8 !important;
}

#panel-4 .saldo-icon-final {
  background: #e8f7ef !important;
}

#panel-4 .saldo-icon-final svg {
  stroke: var(--saldo-green) !important;
}

/* ── Linha de total deduções ──────────────────────────────────── */
#panel-4 .saldo-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: #f7f9fc !important;
  border-top: 1px solid var(--saldo-line) !important;
}

#panel-4 .saldo-total-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #6b7a8d !important;
}

#panel-4 .saldo-total-val {
  font-family: 'DM Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

/* ── Linha final: saldo líquido ───────────────────────────────── */
#panel-4 .saldo-final-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px !important;
  background: linear-gradient(180deg, #f2fbf6, #e8f7ef) !important;
  border: 1px solid #cceedd !important;
  border-radius: 18px !important;
  margin: 14px 0 0 !important;
}

#panel-4 .saldo-final-left {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}

#panel-4 .saldo-final-name {
  font-size: 17px !important;
  font-weight: 950 !important;
  color: var(--saldo-green) !important;
  letter-spacing: -.35px !important;
}

#panel-4 .saldo-final-val {
  font-family: 'DM Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  color: var(--saldo-green) !important;
  white-space: nowrap !important;
}

/* ── Cores de valor ───────────────────────────────────────────── */
#panel-4 .saldo-val-gr {
  color: var(--saldo-green) !important;
}

#panel-4 .saldo-val-rd {
  color: var(--saldo-red) !important;
}

#panel-4 .saldo-val-mu {
  color: #8a97a8 !important;
}

/* ── Estado de loading ────────────────────────────────────────── */
#panel-4 .saldo-loading-msg {
  padding: 20px !important;
  color: #8a97a8 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  border: 1px dashed #d9e5f3 !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS OPCIONAIS — caso adicione depois no HTML
   ═══════════════════════════════════════════════════════════════ */

#panel-4 .saldo-insights {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 16px !important;
}

#panel-4 .saldo-insight {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(205, 218, 238, .96) !important;
  box-shadow: var(--saldo-shadow-soft) !important;
}

#panel-4 .saldo-insight-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--c, var(--saldo-blue)) !important;
  background: color-mix(in srgb, var(--c, var(--saldo-blue)) 12%, #fff) !important;
}

#panel-4 .saldo-insight-title {
  color: var(--saldo-ink) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#panel-4 .saldo-insight-text {
  margin-top: 4px !important;
  color: #6f8198 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  #panel-4 .saldo-split {
    grid-template-columns: 1fr !important;
  }

  #panel-4 .saldo-chart-area {
    border-right: none !important;
    border-bottom: 1px solid var(--saldo-line) !important;
  }

  #panel-4 .saldo-detail-panel {
    padding: 16px 0 0 !important;
    min-height: auto !important;
  }

  #panel-4 .saldo-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #panel-4 .ph {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #panel-4 .ph-title {
    font-size: 28px !important;
  }

  #panel-4 .ph-right,
  #panel-4 .ph-right .pill {
    width: 100% !important;
  }

  #panel-4 .saldo-card .cc-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 18px 10px !important;
  }

  #panel-4 .saldo-mini-head {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  #panel-4 .saldo-split {
    padding: 0 14px 16px !important;
  }

  #panel-4 .saldo-chart-area {
    height: 340px !important;
    min-height: 340px !important;
    padding: 12px 8px 6px !important;
  }

  #panel-4 #chart-4-composicao {
    height: 310px !important;
    min-height: 310px !important;
  }

  #panel-4 .saldo-detail-panel {
    padding-top: 12px !important;
  }

  #panel-4 .saldo-drow,
  #panel-4 .saldo-total-row,
  #panel-4 .saldo-final-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #panel-4 .saldo-drow-name,
  #panel-4 .saldo-drow-val,
  #panel-4 .saldo-final-name,
  #panel-4 .saldo-final-val {
    font-size: 12px !important;
  }

  #panel-4 .saldo-insights {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAINEL 05 — mantém seus estilos existentes
   ═══════════════════════════════════════════════════════════════ */

#chart-5-comparativo {
  width: 100%;
  height: 340px;
  min-height: 340px;
}

#panel-5 .chart-card {
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}

#panel-5 .cc-head {
  align-items: center;
  margin-bottom: 8px;
}

#panel-5 .cc-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

#panel-5 .cc-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}