/* Interfaz SaaS Framework v1.4.0 — motion & sticky surfaces. Spec: MOTION.md.
   Load after ix-saas-shell.css. Curves are tokens: products may not invent their own. */
:root{
  --ix-ease-out:cubic-bezier(.2,.8,.2,1);      /* entrances, expansions */
  --ix-ease-in:cubic-bezier(.4,0,1,1);         /* exits */
  --ix-ease-sheet:cubic-bezier(.22,.8,.18,1);  /* side sheets (DECEN drawer) */
  --ix-ease-pulse:cubic-bezier(.3,.7,.3,1);
  --ix-open-ms:460ms;
  --ix-close-ms:260ms;
  --ix-scrim:rgba(18,19,18,.34);
  --ix-goo-surface:#fff;                       /* header + rail pills material */
  --ix-goo-shadow:0 12px 22px rgba(29,31,28,.075),0 1px 1px rgba(29,31,28,.06);
}

/* ---- Sticky (goo) surfaces ------------------------------------------------ */
.ix-goo-host{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.ix-goo-host>:not(.ix-goo-layer):not(.ix-goo-action):not(.ix-dock-focus){position:relative;z-index:1}
.ix-goo-layer{position:absolute;z-index:0;pointer-events:none;overflow:visible}
.ix-goo-svg{position:absolute;overflow:visible;pointer-events:none}
/* Shadows live outside the filter, as box-shadow twins under each shape. */
.ix-goo-twins,.ix-goo-labels{position:absolute;inset:0;overflow:visible;pointer-events:none}
.ix-goo-twin{position:absolute;left:0;top:0;display:block;box-shadow:var(--ix-goo-shadow)}
.ix-goo-label{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;color:var(--ix-ink)}
.ix-goo-label.is-pulse,.ix-goo-twin.is-pulse{animation:ixPulse .42s var(--ix-ease-pulse) 1}
.ix-dock{--ix-goo-surface:color-mix(in srgb,var(--ix-ink) 96%,black);--ix-goo-shadow:0 12px 30px rgba(0,0,0,.2)}

/* Header rail: lives in the window right under the header, never in the scroller. */
.ix-rail{
  /* Above the header: the pills' copy must paint over the goo bodies the
     header layer draws for them. */
  position:absolute;z-index:1001;
  top:calc(var(--ix-chrome-gap) + var(--ix-header-h) + var(--ix-rail-gap,10px) + var(--ix-vv-top));
  left:50%;transform:translateX(-50%);width:min(var(--ix-site-max),calc(100% - var(--ix-site-gutter)));
  display:flex;gap:var(--ix-pill-gap,8px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 2px;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
}
.ix-rail::-webkit-scrollbar{display:none}
.ix-rail [data-ix-pill]{
  flex:0 0 auto;scroll-snap-align:start;appearance:none;border:0;border-radius:12px;
  padding:10px 14px;background:#fff;color:var(--ix-ink);font:inherit;font-size:13px;font-weight:720;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 20px rgba(24,30,26,.08);
}
.ix-rail [data-ix-pill].is-active,.ix-rail [data-ix-pill][aria-current="page"]{background:var(--ix-ink);color:#fff}
/* Goo mode: the real pills stay put for layout, focus and taps; the header's goo
   layer draws their bodies, shadows and copy. */
.ix-rail.ix-rail-goo [data-ix-pill]{background:transparent!important;box-shadow:none!important;color:transparent!important}
.ix-rail.ix-rail-goo [data-ix-pill]:focus-visible{outline:2px solid var(--ix-ink);outline-offset:2px}
.ix-rail.is-merged{pointer-events:none}
@keyframes ixPulse{0%{scale:1}40%{scale:1.07}100%{scale:1}}
.ix-viewport:has(> .ix-rail){--ix-rail-h:42px}
.ix-viewport:has(> .ix-rail) .ix-scroller{padding-top:calc(var(--ix-content-top) + var(--ix-rail-h) + var(--ix-rail-gap,10px))}
@media(max-width:760px){.ix-rail{--ix-rail-gap:8px;width:calc(100% - 2 * var(--ix-chrome-gap))}}

/* Footer action: the floating CTA that buds out of the dock. */
.ix-dock.has-goo-action{overflow:visible}
.ix-dock .ix-goo-action{
  position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;
  border:0;background:transparent;color:#fff;font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;
}
.ix-dock .ix-goo-action.is-visible{visibility:visible;pointer-events:auto}
.ix-goo-action:disabled{cursor:wait;color:rgba(255,255,255,.78)}
.ix-goo-action-content{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ix-goo-action:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* Dock focus: the lighter background behind the active item travels to the new
   item; the leading edge moves first and the trailing edge follows (stretch). */
.ix-dock>a,.ix-dock>button:not(.ix-goo-action){position:relative;z-index:2}
.ix-dock.has-ix-focus>.is-active,.ix-dock.has-ix-focus>[aria-current="page"]{background:transparent}
.ix-dock-focus{
  position:absolute;z-index:1;top:7px;bottom:7px;left:var(--ix-focus-l,7px);right:var(--ix-focus-r,7px);
  border-radius:calc(var(--ix-dock-radius) - 6px);background:rgba(255,255,255,.12);pointer-events:none;
  transition:left .46s var(--ix-ease-out) var(--ix-focus-dl,0ms),right .46s var(--ix-ease-out) var(--ix-focus-dr,0ms),opacity .2s ease;
}
.ix-dock-focus.is-instant{transition:none}

/* View change (ix-router.js): content leaves fast, the next view rises in. */
.ix-scroller.is-view-leaving{opacity:0;transform:translate3d(0,-6px,0);filter:blur(3px);transition:opacity .16s var(--ix-ease-in),transform .16s var(--ix-ease-in),filter .16s var(--ix-ease-in)}
.ix-scroller.is-view-entering{animation:ixViewIn .34s var(--ix-ease-out) both}
html.ix-nav-back .ix-scroller.is-view-entering{animation-name:ixViewBack}
@keyframes ixViewIn{from{opacity:0;transform:translate3d(0,12px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes ixViewBack{from{opacity:0;transform:translate3d(0,-10px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
/* Shared-image handoff: a floating copy travels from the tapped card to its
   place in the next view (DECEN product handoff, 500ms). */
.ix-handoff{position:absolute;z-index:2400;pointer-events:none;overflow:hidden;box-shadow:0 18px 55px rgba(24,28,24,.08)}
.ix-handoff>*{width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;aspect-ratio:auto!important}
.ix-handoff-target{visibility:hidden}

/* ---- Layers: scrim + modal + side sheet ----------------------------------- */
.ix-modal,.ix-sheet{position:absolute;inset:0;z-index:2000;display:grid}
.ix-modal[hidden],.ix-sheet[hidden]{display:none}
.ix-modal::before,.ix-sheet::before{content:"";position:absolute;inset:0;background:var(--ix-scrim);opacity:0;transition:opacity .42s ease}
.ix-modal.is-open::before,.ix-sheet.is-open::before{opacity:1}
.ix-modal.is-closing::before,.ix-sheet.is-closing::before{opacity:0;transition-duration:var(--ix-close-ms)}
.ix-sheet.is-open::before{opacity:calc(1 - var(--ix-sheet-drag,0))}
.ix-sheet.is-dragging::before{transition:none}

/* Modal: grows out of its trigger (transform-origin set by JS), with depth blur;
   leaves faster than it arrives. */
.ix-modal{place-items:center;padding:calc(var(--ix-content-top) - 10px) 16px 16px}
.ix-modal-card{
  position:relative;width:min(560px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;
  background:var(--ix-paper);border-radius:26px;padding:24px;box-shadow:0 30px 80px rgba(20,22,20,.22);
  opacity:0;filter:blur(10px);transform:translate3d(0,12px,0) scale(.94);
}
.ix-modal.is-open .ix-modal-card{opacity:1;filter:none;transform:none;transition:opacity var(--ix-open-ms) var(--ix-ease-out),filter var(--ix-open-ms) var(--ix-ease-out),transform var(--ix-open-ms) var(--ix-ease-out)}
.ix-modal.is-closing .ix-modal-card{opacity:0;filter:blur(6px);transform:translate3d(0,6px,0) scale(.97);transition:opacity var(--ix-close-ms) var(--ix-ease-in),filter var(--ix-close-ms) var(--ix-ease-in),transform var(--ix-close-ms) var(--ix-ease-in)}
@media(max-width:760px){
  /* On phones the modal is a bottom card that rises from the dock edge. */
  .ix-modal{place-items:end stretch;padding:0 var(--ix-chrome-gap) var(--ix-chrome-gap)}
  .ix-modal-card{width:100%;border-radius:22px;transform:translate3d(0,40px,0)}
  .ix-modal.is-closing .ix-modal-card{transform:translate3d(0,40px,0)}
}

/* Side sheet: attached to the window's right edge; ix-goo.js draws the sticky
   fillets and handles swipe-to-close. */
.ix-sheet{justify-items:end;visibility:hidden;transition:visibility 0s linear .62s}
.ix-sheet.is-open{visibility:visible;transition:visibility 0s linear 0s}
.ix-sheet-panel{
  position:relative;z-index:1;margin:8px 0 8px auto;height:calc(100% - 16px);width:min(440px,calc(100% - 16px));
  overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:var(--ix-paper);border-radius:24px 0 0 24px;padding:22px;
  box-shadow:0 18px 48px rgba(20,21,20,.16);transform:translate3d(calc(100% + 24px),0,0);transition:transform .62s var(--ix-ease-sheet);
}
.ix-sheet.is-open .ix-sheet-panel{transform:none}
.ix-sheet.is-dragging .ix-sheet-panel{transition:none!important}
.ix-sheet-neck{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
@media(max-width:760px){.ix-sheet-panel{width:80%;max-width:80%}}

/* Menu cascade: items of an opening sheet/modal arrive one after another. */
.ix-stagger>*{opacity:0;filter:blur(6px);transform:translate3d(18px,0,0)}
.is-open .ix-stagger>*{opacity:1;filter:none;transform:none;transition:opacity .5s var(--ix-ease-out),filter .5s var(--ix-ease-out),transform .5s var(--ix-ease-out);transition-delay:calc(120ms + var(--ix-i,0) * 40ms)}
.is-closing .ix-stagger>*{opacity:0;transition:opacity .16s var(--ix-ease-in);transition-delay:0s}
.ix-stagger>:nth-child(1){--ix-i:0}.ix-stagger>:nth-child(2){--ix-i:1}.ix-stagger>:nth-child(3){--ix-i:2}.ix-stagger>:nth-child(4){--ix-i:3}.ix-stagger>:nth-child(5){--ix-i:4}.ix-stagger>:nth-child(6){--ix-i:5}.ix-stagger>:nth-child(7){--ix-i:6}.ix-stagger>:nth-child(n+8){--ix-i:7}

/* Expand (card -> detail): shared-element view transition. */
::view-transition-group(ix-expand){animation-duration:.46s;animation-timing-function:var(--ix-ease-out)}
::view-transition-old(ix-expand),::view-transition-new(ix-expand){height:100%;object-fit:cover}

/* Press feedback shared by tappable surfaces. */
.ix-press{transition:transform .18s var(--ix-ease-out)}
.ix-press:active{transform:scale(.97)}

/* Toasts rise from above the dock (or the bottom frame). */
.ix-toasts{position:absolute;z-index:2500;left:50%;bottom:calc(var(--ix-chrome-gap) + var(--ix-dock-h) + 14px);transform:translateX(-50%);display:grid;gap:8px;justify-items:center;pointer-events:none}
.ix-toast{background:var(--ix-ink);color:#fff;border-radius:999px;padding:12px 16px;font-size:13px;font-weight:750;box-shadow:0 14px 34px rgba(0,0,0,.25);opacity:0;transform:translate3d(0,14px,0) scale(.96);transition:opacity .32s var(--ix-ease-out),transform .32s var(--ix-ease-out)}
.ix-toast.is-in{opacity:1;transform:none}
.ix-toast.is-out{opacity:0;transform:translate3d(0,8px,0);transition-timing-function:var(--ix-ease-in)}
.ix-toast.is-error{background:#7c2823}

@media(prefers-reduced-motion:reduce){
  .ix-modal-card,.ix-sheet-panel,.ix-stagger>*,.ix-toast,.ix-modal::before,.ix-sheet::before{transition:none!important;animation:none!important;filter:none!important}
  .ix-goo-label.is-pulse,.ix-goo-twin.is-pulse{animation:none}
  .ix-dock-focus{transition:none!important}
  .ix-scroller.is-view-leaving,.ix-scroller.is-view-entering{animation:none!important;transition:none!important;opacity:1!important;filter:none!important;transform:none!important}
  ::view-transition-group(ix-expand){animation:none}
}