/* Interfaz SaaS Framework v1.7.0 — live data surfaces. Spec: docs/DATA-MOTION.md.
   Load after ix-motion.css. Reuses its curve tokens; adds the data palette and timings. */
:root{
  --ix-data-1:#efc23f;   /* yellow  · qualification, warm highlights */
  --ix-data-2:#2f5e4e;   /* green   · proposal, positive, collected */
  --ix-data-3:#d9542c;   /* orange  · negotiation, attention, line charts */
  --ix-data-4:#151614;   /* ink     · closing, hot items */
  --ix-data-5:#8fb3a3;   /* sage    · secondary series */
  --ix-data-soft:#ecebe5;
  --ix-count-ms:900ms;
  --ix-draw-ms:1200ms;
  --ix-grow-ms:820ms;
  --ix-grow-step:55ms;
  --ix-lift:0 26px 50px -12px rgba(20,22,18,.38),0 8px 18px rgba(20,22,18,.14);
}
[data-ix-count],.ix-line-tip em,.ix-tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- Staggered entrance (IxData.enter) ------------------------------------ */
.ix-enter>*{animation:ixEnter .62s var(--ix-ease-out) both;animation-delay:calc(var(--ix-i,0) * 45ms)}
@keyframes ixEnter{from{opacity:0;transform:translate3d(0,14px,0) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* Panel swap: the leaving panel softens out; the next one enters with .ix-enter. */
.ix-panel-out{animation:ixPanelOut .2s var(--ix-ease-in) both}
@keyframes ixPanelOut{to{opacity:0;transform:translate3d(0,-6px,0);filter:blur(4px)}}

/* ---- Hover lift for data cards -------------------------------------------- */
.ix-lift{transition:transform .32s var(--ix-ease-out),box-shadow .32s var(--ix-ease-out)}
@media(hover:hover){.ix-lift:hover{transform:translate3d(0,-3px,0);box-shadow:0 18px 34px -16px rgba(20,22,18,.35)}}
.ix-lift:active{transform:scale(.985)}

/* ---- Delta pill (+5% vs last month) --------------------------------------- */
.ix-delta{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800;background:var(--ix-data-2);color:#fff;animation:ixPop .5s var(--ix-ease-pulse) .5s both}
.ix-delta.is-warn{background:var(--ix-data-1);color:var(--ix-data-4)}.ix-delta.is-bad{background:var(--ix-data-3)}
@keyframes ixPop{from{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}to{opacity:1;transform:none}}

/* ---- Line chart ------------------------------------------------------------ */
.ix-line{position:relative;height:220px;color:var(--ix-data-3);touch-action:pan-y;user-select:none}
.ix-line-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ix-line-grid line{stroke:var(--ix-line,#e2e0d8);stroke-width:1}
.ix-line-grid text{fill:var(--ix-muted,#777);font-size:10px;font-weight:650}
.ix-line-path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ix-line-path.is-dashed{stroke-dasharray:5 5!important;stroke-dashoffset:0!important}
.ix-line-target{stroke:var(--ix-data-4);stroke-width:1.4;stroke-dasharray:4 5;transition:opacity .4s}
.ix-line-cross{stroke:var(--ix-data-4);stroke-width:1;opacity:0;transition:opacity .18s}
.ix-line-dot{fill:#fff;stroke:currentColor;stroke-width:2.6;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .18s,transform .18s var(--ix-ease-pulse);transform:scale(.4)}
.ix-line.is-hover .ix-line-cross{opacity:.5}.ix-line.is-hover .ix-line-dot{opacity:1;transform:none}
.ix-line-tip{position:absolute;left:0;top:0;z-index:2;display:grid;gap:3px;min-width:116px;padding:9px 11px;border-radius:13px;background:#fff;color:var(--ix-ink);font-size:11px;box-shadow:0 14px 30px -10px rgba(0,0,0,.28);pointer-events:none;opacity:0;transition:opacity .16s,transform .16s var(--ix-ease-out)}
.ix-line.is-hover .ix-line-tip{opacity:1}
.ix-line-tip b{font-size:12px}.ix-line-tip span{display:flex;justify-content:space-between;gap:12px;color:var(--ix-muted)}
.ix-line-tip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ix-data-3);align-self:center;margin-right:-6px}
.ix-line-tip .is-target::before{background:var(--ix-data-4)}
.ix-line-tip em{font-style:normal;font-weight:800;color:var(--ix-ink);margin-left:auto}
.ix-line-axis{position:absolute;left:0;right:0;bottom:0;height:18px;font-size:10px;color:var(--ix-muted);font-weight:650}
.ix-line-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* ---- Stacked bars ---------------------------------------------------------- */
.ix-bars{display:grid;gap:14px}
.ix-bars-legend{display:flex;flex-wrap:wrap;gap:6px}
.ix-chip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:6px 11px;background:var(--ix-data-4);color:#fff;font:inherit;font-size:12px;font-weight:750;cursor:pointer;transition:background .25s,color .25s,transform .2s var(--ix-ease-pulse)}
.ix-chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.ix-chip[aria-pressed="false"]{background:var(--ix-data-soft);color:var(--ix-muted)}
.ix-chip:active{transform:scale(.94)}
.ix-bars-plot{display:flex;align-items:flex-end;gap:clamp(4px,1.2vw,12px);height:200px;border-bottom:1px solid var(--ix-line,#e2e0d8)}
.ix-bars-plot{justify-content:space-around}.ix-bar{flex:1;max-width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0}
.ix-bar-stack{flex:1;width:100%;display:flex;flex-direction:column-reverse;border-radius:8px 8px 3px 3px;overflow:hidden;background:color-mix(in srgb,var(--ix-data-soft) 60%,transparent)}
.ix-bar-stack span{display:block;height:0;transition:height var(--ix-grow-ms) var(--ix-ease-out);transition-delay:calc(var(--i,0) * var(--ix-grow-step))}
.ix-bar small{font-size:10px;color:var(--ix-muted);font-weight:650;margin-bottom:-22px;white-space:nowrap}
.ix-bars-plot{margin-bottom:22px}
@media(hover:hover){.ix-bar:hover .ix-bar-stack{filter:brightness(1.06) saturate(1.1)}}

/* ---- Rings: donut + gauge -------------------------------------------------- */
.ix-donut,.ix-gauge{position:relative;display:grid;place-items:center;aspect-ratio:1}
.ix-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ix-ring-track{fill:none;stroke:rgba(255,255,255,.18)}
.ix-donut .ix-ring-track{stroke:var(--ix-data-soft)}
.ix-ring-arc{fill:none;stroke-linecap:butt;transition:stroke-dasharray var(--ix-draw-ms) var(--ix-ease-out)}
.ix-gauge .ix-ring-arc{stroke-linecap:round}
.ix-gauge{--ix-gauge:var(--ix-data-1)}
.ix-donut>:not(svg),.ix-gauge>:not(svg){position:relative;text-align:center}

/* ---- Proportional stage bar ------------------------------------------------ */
.ix-mix{display:flex;gap:6px;height:34px}
.ix-mix span{flex:0 1 0;flex-grow:0;min-width:0;border-radius:9px;transition:flex-grow var(--ix-grow-ms) var(--ix-ease-out);transition-delay:calc(var(--i,0) * 90ms)}

/* ---- Segmented control ----------------------------------------------------- */
.ix-seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--ix-data-soft);isolation:isolate}
.ix-seg button{position:relative;z-index:1;border:0;background:transparent;border-radius:999px;padding:7px 13px;font:inherit;font-size:12px;font-weight:780;color:var(--ix-muted);cursor:pointer;transition:color .25s}
.ix-seg button.is-active{color:#fff}
.ix-seg-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:var(--l,3px);right:var(--r,3px);border-radius:999px;background:var(--ix-data-4);box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:left .34s var(--ix-ease-out) var(--dl,0ms),right .34s var(--ix-ease-out) var(--dr,0ms)}
.ix-seg-thumb.is-instant{transition:none}
.ix-seg.is-light .ix-seg-thumb{background:#fff}.ix-seg.is-light button.is-active{color:var(--ix-ink)}

/* ---- Action toast (IxData.toast) ------------------------------------------ */
.ix-toast-action{display:flex;align-items:center;gap:10px;pointer-events:auto;padding:8px 8px 8px 12px}
.ix-toast-action i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ix-data-2);font-style:normal;font-size:12px}
.ix-toast-action button{border:0;border-radius:999px;padding:7px 12px;background:var(--ix-data-1);color:var(--ix-data-4);font:inherit;font-size:12px;font-weight:850;cursor:pointer;transition:transform .2s var(--ix-ease-pulse)}
.ix-toast-action button:active{transform:scale(.93)}

/* ---- Stamp ----------------------------------------------------------------- */
.ix-stamp{display:inline-block;border:3px solid currentColor;border-radius:10px;padding:4px 14px;font-weight:900;letter-spacing:.14em;color:var(--ix-data-2);transform:rotate(-12deg);opacity:0}
.ix-stamp.is-stamped{animation:ixStamp .52s cubic-bezier(.2,1.4,.4,1) both}
@keyframes ixStamp{0%{opacity:0;transform:rotate(-24deg) scale(2.4);filter:blur(3px)}55%{opacity:1;transform:rotate(-10deg) scale(.92);filter:none}100%{opacity:1;transform:rotate(-12deg) scale(1)}}

/* ---- Drag board ------------------------------------------------------------ */
.ix-board{position:relative}
.ix-board [data-ix-card]{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .3s var(--ix-ease-out),box-shadow .3s,opacity .25s}
.ix-board [data-ix-card]:focus-visible{outline:3px solid var(--ix-accent);outline-offset:2px}
.ix-board [data-ix-card].is-armed{transform:scale(.97)}
.ix-board [data-ix-card].is-held{transform:scale(1.03) rotate(-1.5deg);box-shadow:var(--ix-lift);z-index:2}
.ix-board [data-ix-card].is-ghost{opacity:.28;filter:saturate(.3);transform:scale(.98)}
.ix-board [data-ix-card].is-landed{animation:ixLand .46s var(--ix-ease-pulse)}
@keyframes ixLand{0%{transform:scale(1.04)}45%{transform:scale(.97)}100%{transform:none}}
.ix-drag-clone{position:fixed!important;left:0;top:0;z-index:4000;margin:0!important;pointer-events:none;box-shadow:var(--ix-lift);will-change:transform;cursor:grabbing}
.ix-grabbing,.ix-grabbing *{cursor:grabbing!important}
.ix-board [data-ix-col]{transition:background .25s,box-shadow .25s}
.ix-board [data-ix-col].is-over{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ix-ink) 22%,transparent);background:color-mix(in srgb,#fff 70%,transparent)}
.ix-board.is-dragging [data-ix-col]:not(.is-over){opacity:.92}
/* Drop zones rise from the bottom only while a card is in the air. */
[data-ix-drop]{transition:transform .38s var(--ix-ease-out),opacity .3s,background .2s,box-shadow .2s}
.ix-board [data-ix-drop-bar]{opacity:.55}
[data-ix-drop-bar].is-floating{position:absolute;z-index:3900;left:50%;width:min(620px,calc(100% - 32px));transform:translateX(-50%);bottom:calc(var(--ix-chrome-gap,12px) + var(--ix-dock-h,64px) + 26px);opacity:1;animation:ixDropRise .38s var(--ix-ease-out) both}
[data-ix-drop-bar].is-floating [data-ix-drop]{box-shadow:0 18px 40px -14px rgba(0,0,0,.35)}
@keyframes ixDropRise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
[data-ix-drop].is-over{transform:scale(1.03);box-shadow:0 0 0 3px currentColor inset}
[data-ix-drop].is-pulse{animation:ixPulse .5s var(--ix-ease-pulse)}
.ix-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Stage progress (deal detail) ----------------------------------------- */
.ix-stages{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:5px}
.ix-stages span{height:4px;border-radius:4px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.ix-stages span::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ix-ease-out);transition-delay:calc(var(--i,0) * 110ms + 200ms)}
.is-open .ix-stages span.is-done::after{transform:none}

@media (prefers-reduced-motion:reduce){
  .ix-enter>*,.ix-panel-out,.ix-delta,.ix-stamp.is-stamped,[data-ix-drop].is-pulse,.ix-board [data-ix-card].is-landed,[data-ix-drop-bar].is-floating{animation:none!important}
  .ix-stamp.is-stamped{opacity:1}
  .ix-bar-stack span,.ix-ring-arc,.ix-mix span,.ix-seg-thumb,.ix-stages span::after,.ix-lift{transition:none!important}
}