/* ═══════════════════════════════════════════════════════════════
   TF KPI Customizer — stile card KPI condivise (estratto da tf-kpi-customizer.js)
   Caricato come asset cacheabile; il JS fa da fallback (inietta <link> se assente).
   Marker: TF-KPI-CUSTOMIZER-CSS-2026-06-02
   ═══════════════════════════════════════════════════════════════ */
.tf-kpi-c--simple{padding:18px 20px;gap:6px}
.tf-kpi-c--simple .tf-kpi-c__head{align-items:flex-start;flex-direction:column;gap:6px;min-height:0}
.tf-kpi-c--simple .tf-kpi-c__label{font-size:12px;font-weight:500;color:rgba(60,60,67,.7)}
.tf-kpi-c--simple .tf-kpi-c__value{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.05;color:#0f172a}
.tf-kpi-c--simple::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kpi-color);border-radius:14px 0 0 14px;opacity:.85}
.tf-kpi-c--loading .tf-kpi-c__value{position:relative;color:transparent !important;background:linear-gradient(90deg,rgba(15,23,42,0.06) 0%,rgba(15,23,42,0.12) 50%,rgba(15,23,42,0.06) 100%);background-size:200% 100%;border-radius:6px;animation:tfKpiSkel 1.4s ease-in-out infinite;min-width:80px;height:24px;display:inline-block;line-height:1}
.tf-kpi-c--loading .tf-kpi-c__progress-fill{background:linear-gradient(90deg,rgba(15,23,42,0.06) 0%,rgba(15,23,42,0.12) 50%,rgba(15,23,42,0.06) 100%) !important;background-size:200% 100% !important;animation:tfKpiSkel 1.4s ease-in-out infinite}
.tf-kpi-c--loading .tf-kpi-c__progress-label{color:transparent !important;background:linear-gradient(90deg,rgba(15,23,42,0.06) 0%,rgba(15,23,42,0.12) 50%,rgba(15,23,42,0.06) 100%);background-size:200% 100%;border-radius:4px;animation:tfKpiSkel 1.4s ease-in-out infinite;min-width:32px;display:inline-block;height:12px;line-height:1}
.tf-kpi-c--loading .tf-kpi-c__bars{opacity:0.35;filter:blur(0.5px)}
@keyframes tfKpiSkel{0%{background-position:200% 0}
100%{background-position:-200% 0}
}
@media (prefers-reduced-motion:reduce){.tf-kpi-c--loading .tf-kpi-c__value,.tf-kpi-c--loading .tf-kpi-c__progress-fill,.tf-kpi-c--loading .tf-kpi-c__progress-label{animation:none}
}
[data-tf-kpi-grid]{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px}
@media (min-width:640px){[data-tf-kpi-grid]{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1280px){[data-tf-kpi-grid]{grid-template-columns:repeat(4,1fr);gap:14px}
}
@media (min-width:1280px){[data-tf-kpi-grid][data-mag-grid]{grid-template-columns:repeat(6,1fr) !important;gap:12px}
}
.tf-kpi-c{position:relative;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:14px;padding:16px 18px 14px;box-shadow:0 1px 3px rgba(15,23,42,.04),0 0 0 .5px rgba(15,23,42,.02);transition:box-shadow 240ms cubic-bezier(.4,0,.2,1),border-color 200ms ease;display:flex;flex-direction:column;gap:12px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif}
.tf-kpi-c:hover{box-shadow:0 8px 24px -6px rgba(15,23,42,.10),0 0 0 .5px rgba(15,23,42,.06);border-color:rgba(15,23,42,.10)}
.tf-kpi-c__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:32px}
.tf-kpi-c__label{font-size:12px;font-weight:500;color:rgba(60,60,67,.65);letter-spacing:-.005em;line-height:1.3;flex:1;min-width:0}
.tf-kpi-c__value{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1;color:#0f172a;font-feature-settings:"tnum" 1,"cv11" 1;margin:0;white-space:nowrap}
.tf-kpi-c__bars{display:flex;align-items:flex-end;gap:3px;height:36px;padding:2px 0}
.tf-kpi-c__bars .tf-bar{flex:1;min-width:4px;background:var(--kpi-color);border-radius:2px 2px 1px 1px;opacity:.30;transition:opacity 200ms ease,transform 200ms ease;transform-origin:bottom;cursor:pointer}
.tf-kpi-c:hover .tf-kpi-c__bars .tf-bar{opacity:.55}
.tf-kpi-c__bars .tf-bar:hover{opacity:1!important;transform:scaleY(1.08)}
.tf-kpi-c__progress{display:flex;flex-direction:column;gap:4px}
.tf-kpi-c__progress-track{height:4px;background:rgba(15,23,42,.05);border-radius:999px;overflow:hidden}
.tf-kpi-c__progress-fill{height:100%;background:var(--kpi-color);border-radius:999px;transition:width 800ms cubic-bezier(.32,.72,0,1);opacity:.85}
.tf-kpi-c__progress-label{font-size:10.5px;color:rgba(60,60,67,.5);font-weight:500;letter-spacing:-.01em}
.tf-kpi-c--locked{position:relative;overflow:hidden}
.tf-kpi-c--locked .tf-kpi-c__bars,.tf-kpi-c--locked .tf-kpi-c__progress,.tf-kpi-c--locked .tf-kpi-c__value{filter:blur(3px);opacity:.55;pointer-events:none}
.tf-kpi-c__lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.85));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-align:center;padding:12px}
.tf-kpi-c__lock-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:8px;color:#b45309;box-shadow:0 4px 10px -2px rgba(245,158,11,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.tf-kpi-c__lock-text{font-size:11.5px;font-weight:500;color:rgba(60,60,67,.7);letter-spacing:-.005em;line-height:1.35}
.tf-kpi-c__lock-cta{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:999px;font-size:11.5px;font-weight:600;text-decoration:none;letter-spacing:-.005em;box-shadow:0 4px 10px -2px rgba(245,158,11,.4);transition:transform .15s ease,box-shadow .2s ease}
.tf-kpi-c__lock-cta:hover{transform:translateY(-1px);box-shadow:0 6px 14px -2px rgba(245,158,11,.5)}
.tf-kpi-customize{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:transparent;border:0;color:rgba(60,60,67,.4);cursor:pointer;opacity:0;transition:opacity .18s ease,background .15s ease}
[data-tf-kpi-grid]:hover .tf-kpi-customize{opacity:1}
.tf-kpi-customize:hover{background:rgba(15,23,42,.05);color:rgba(15,23,42,.7)}
@media (max-width:640px){.tf-kpi-c{padding:14px 16px 12px;border-radius:12px;gap:10px}
.tf-kpi-c__value{font-size:22px}
.tf-kpi-c__bars{height:30px}
.tf-kpi-c__bars .tf-bar{min-width:3px}
}
[data-theme="dark"] .tf-kpi-c{background:#131826;border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .tf-kpi-c__value{color:#f1f5f9}
[data-theme="dark"] .tf-kpi-c__label{color:rgba(203,213,225,.65)}
[data-theme="dark"] .tf-kpi-c__progress-track{background:rgba(255,255,255,.06)}
[data-theme="dark"] .tf-kpi-c__lock{background:linear-gradient(180deg,rgba(15,23,42,.4),rgba(15,23,42,.85))}
[data-theme="dark"] .tf-kpi-c__lock-text{color:rgba(203,213,225,.7)}
@media (prefers-reduced-motion:reduce){.tf-kpi-c,.tf-kpi-c__bars .tf-bar,.tf-kpi-c__progress-fill{transition:none!important}
}