/* ============================================================================
   SFV CRM · CHARTS (SVG/CSS puro — sin Chart.js/canvas)
   Donut (conic-gradient + máscara), columnas, barras horizontales, leyenda.
   El color de cada serie se pasa con la variable --sfv-c (inline o .sfv-c1..9).
   ============================================================================ */

.sfv-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 18px; }
@media (max-width: 900px){ .sfv-charts-grid { grid-template-columns: 1fr; } }

/* Paleta categórica como variable de color */
.sfv-c1 { --sfv-c: var(--sfv-c1); } .sfv-c2 { --sfv-c: var(--sfv-c2); } .sfv-c3 { --sfv-c: var(--sfv-c3); }
.sfv-c4 { --sfv-c: var(--sfv-c4); } .sfv-c5 { --sfv-c: var(--sfv-c5); } .sfv-c6 { --sfv-c: var(--sfv-c6); }
.sfv-c7 { --sfv-c: var(--sfv-c7); } .sfv-c8 { --sfv-c: var(--sfv-c8); } .sfv-c9 { --sfv-c: var(--sfv-c9); }

/* ---------------- DONUT / PIE ---------------- */
.sfv-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sfv-donut {
  width: 140px; height: 140px; border-radius: 50%; flex: 0 0 140px;
  -webkit-mask: radial-gradient(transparent 54%, #000 55%);
          mask: radial-gradient(transparent 54%, #000 55%);
  /* background: conic-gradient(...) se inyecta inline por datos */
}

/* ---------------- LEYENDA ---------------- */
.sfv-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--sfv-graphite); }
.sfv-legend.col { flex-direction: column; gap: 7px; }
.sfv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sfv-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--sfv-c, var(--sfv-mint)); }
.sfv-legend b { font-family: var(--sfv-num); font-variant-numeric: tabular-nums; color: var(--sfv-ink); }
.sfv-legend .pct { color: var(--sfv-muted); }

/* ---------------- COLUMNAS VERTICALES ---------------- */
.sfv-cols { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding: 18px 4px 0; border-bottom: 1px solid #eef0ed; }
.sfv-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.sfv-col-bar { width: 28px; min-height: 3px; border-radius: 7px 7px 0 0; background: var(--sfv-c, var(--sfv-mint)); position: relative; transition: height .5s var(--sfv-ease); }
.sfv-col-val { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--sfv-ink); font-family: var(--sfv-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfv-col-name { font-size: 10.5px; color: var(--sfv-graphite); text-align: center; }

/* ---------------- BARRAS HORIZONTALES (embudo) ---------------- */
.sfv-bar-row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; margin: 8px 0; }
.sfv-bar-row .lbl { color: var(--sfv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfv-bar-track { height: 12px; background: var(--sfv-sand); border-radius: 6px; overflow: hidden; }
.sfv-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sfv-mint-dark), var(--sfv-mint)); }
.sfv-bar-fill[class*="sfv-c"] { background: var(--sfv-c) !important; }
.sfv-bar-val { text-align: right; font-family: var(--sfv-num); font-variant-numeric: tabular-nums; color: var(--sfv-graphite); font-weight: 700; }

/* ---------------- KANBAN (columnas de etapa) ---------------- */
.sfv-kanban { display: flex; gap: 13px; overflow-x: auto; padding-bottom: 8px; }
.sfv-kcol { flex: 0 0 240px; background: var(--sfv-sand); border-radius: 14px; display: flex; flex-direction: column; }
.sfv-kcol-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 13px; font-size: 12.5px; font-weight: 800; color: var(--sfv-ink); background: var(--sfv-white); border-top: 4px solid var(--sfv-mint); border-radius: 14px 14px 0 0; }
.sfv-kcount { background: var(--sfv-sand); border-radius: 999px; padding: 1px 9px; font-size: 11px; color: var(--sfv-graphite); }
.sfv-kcol-body { padding: 9px; display: flex; flex-direction: column; gap: 8px; }
.sfv-kcard { background: var(--sfv-white); border: 1px solid var(--sfv-line); border-radius: 12px; padding: 11px; cursor: pointer; transition: transform .2s var(--sfv-ease), box-shadow .2s var(--sfv-ease), border-color .2s var(--sfv-ease); }
.sfv-kcard:hover { transform: translateY(-2px); box-shadow: var(--sfv-shadow-hover); border-color: var(--sfv-mint); }