/* /erp-cliente — ERP do cliente (Locus, Opus, Modus). Hero com motion da Central de Ações;
   seções no padrão r2 (texto | motion mv), motions em page.js (AGGU.sx.register "ec-*"), classes .ecx-.
   Critérios: docs/motion/CRITERIOS_MOTION.md */

/* ---------- Hero ---------- */
.ec-hero{padding-block:clamp(48px,6vw,104px) var(--space-section)}
.ec-hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.ec-h1{font-size:clamp(2.3rem,1.2rem + 3.1vw,4.2rem);line-height:1.04;max-width:20ch}
.ec-lead{max-width:60ch}
.ec-hero-cta{justify-content:center;margin-top:8px}
@media (max-width:560px){.ec-hero-in{align-items:flex-start;text-align:left}.ec-hero-cta{justify-content:flex-start}}
@media (max-width:720px){.ec-h1{font-size:clamp(1.9rem,8.2vw,2.4rem);line-height:1.06}}
@media (min-width:1100px){
  .ec-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(40px,4vw,72px);align-items:center}
  .ec-hero-in{align-items:flex-start;text-align:left}.ec-hero-in .x-pill{margin:0;font-size:13px;max-width:100%;white-space:normal;height:auto;padding-block:8px}
  .ec-h1{font-size:clamp(2.2rem,1.1rem + 2.4vw,3.5rem);max-width:15ch}
  .ec-lead{max-width:44ch}
  .ec-hero-in .x-pill-hero{align-self:flex-start;margin-inline:0}
}
@media (max-width:1099px){.ec-hero-grid{display:flex;flex-direction:column;gap:40px}.ec-hero-vis{width:100%}}

/* ---------- Fechamento ---------- */
.ec-close{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.ec-close-side{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
@media (max-width:900px){.ec-close{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.ec-close-side .btn-row{width:100%}.ec-close-side .btn{flex:1 1 100%}}
@media (min-width:1100px){.ec-close{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
@media (min-width:901px){
  .ec-close{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:18px !important;text-align:left}
  .ec-close > *{margin:0 !important;max-width:62ch;grid-column:auto !important;grid-row:auto !important}
  .ec-close :is(.h1,.h2,h1,h2){max-width:22ch}
}

/* =====================================================================
   Motions (mv) desta página — formatos variados, inspirados no ERP do cliente
   ===================================================================== */
.ec-hero-vis{min-width:0}
.sx .ecx-cx .mv-tt b,.sx .ecx-st .mv-tt b,.sx .ecx-st .mv-tt span,.sx .ecx-ops .mv-tt b,.sx .ecx-ops .mv-tt span,.sx .ecx-z .mv-tt b,.sx .ecx-z .mv-tt span{white-space:normal}

/* Hero · Central de Ações: grade de números + fontes de dados */
.ecx-ca{display:flex;flex-direction:column;gap:14px}
.ecx-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:#fff;border:1px solid var(--sx-line);border-radius:14px}
.ecx-src .mv-tt b{font-size:13.5px}
.ecx-src .mv-tt span{white-space:normal}
.ecx-ca-k{font-size:13px;color:var(--sx-ink2);margin-top:6px}
.ecx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ecx-tiles li{display:flex;flex-direction:column;gap:10px;padding:14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;min-width:0}
.ecx-tiles li > div{display:flex;flex-direction:column;min-width:0}
.ecx-tiles b{font-family:var(--f-brand);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ecx-tiles span:not(.sx-ic){font-size:13px;font-weight:500;line-height:1.3}
.ecx-tiles small{font-size:12px;color:var(--sx-ink3);line-height:1.35}

/* Pedidos · um pedido, quatro situações */
.ecx-ped{display:flex;flex-direction:column;gap:14px}
.ecx-or{display:flex;flex-wrap:wrap;gap:8px}
.ecx-or li{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--sx-line);font-size:13px;color:var(--sx-ink2)}
.ecx-or li svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
.ecx-or li.on{background:var(--sx-blue);border-color:var(--sx-blue);color:#fff}
.ecx-pc{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 44px -36px rgba(10,20,60,.45)}
.ecx-pc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ecx-pc-h .mv-tt b{font-size:15.5px}
.ecx-val{font-family:var(--f-brand);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ecx-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ecx-ln{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid transparent;transition:border-color .25s,background .25s}
.ecx-ln > span:first-child{font-size:12px;color:var(--sx-ink3)}
.ecx-ln.is-hi{border-color:rgba(0,122,255,.4);background:#fff}
.ecx-ped-f{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sx-ink2);padding-top:12px;border-top:1px solid var(--sx-line)}
.ecx-ped-f.ok{color:var(--sx-ok-t);font-weight:500}

/* Frente de caixa · abertura (pedaço de interface, sem casca) */
.ecx-cx{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:16px}
.ecx-cx-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.ecx-cx-h .mv-tt b{font-size:16px}
.ecx-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ecx-fields > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ecx-fields > div > span{font-size:12px;color:var(--sx-ink2)}
.ecx-in{display:flex;align-items:center;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--sx-line2);font-weight:400;font-size:13.5px;color:var(--sx-ink3);white-space:nowrap;overflow:hidden;transition:border-color .2s}
.ecx-in.typed{color:var(--ink);border-color:rgba(0,122,255,.45)}
.ecx-pre{display:flex;flex-direction:column;gap:8px}
.ecx-pre li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sx-ink2);transition:color .25s}
.ecx-pre em{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--sx-line2);display:grid;place-items:center;color:transparent;flex:none;transition:background .25s,border-color .25s,color .25s}
.ecx-pre em svg{width:12px;height:12px}
.ecx-pre li.ok{color:var(--ink)}
.ecx-pre li.ok em,.sx:not(.is-armed) .ecx-pre em{background:var(--sx-ok);border-color:var(--sx-ok);color:#fff}
.ecx-cx > .sx-btn{height:42px;font-size:14px;width:100%}
.ecx-cx-s{font-size:12px;color:var(--sx-ink3)}

/* Estoque · níveis com o mínimo marcado */
.ecx-st{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px}
.ecx-st-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.ecx-st-h p{font-size:14px;color:var(--sx-ink2)}
.ecx-st-h p b{font-family:var(--f-brand);font-weight:500;font-size:22px;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.ecx-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sx-ink3)}
.ecx-leg i{width:2px;height:14px;background:var(--ink);border-radius:1px}
.ecx-st li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:14px 0;border-top:1px solid var(--sx-line)}
.ecx-st li:first-child{border-top:0}
.ecx-st-r{display:flex;align-items:center;gap:8px}
.ecx-st-r .sx-btn{height:28px}
.ecx-lv{grid-column:1 / -1;position:relative;height:8px;border-radius:999px;background:var(--sx-wash)}
.ecx-lv i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:var(--sx-ok);transform-origin:left;transform:scaleX(var(--v));transition:transform .9s var(--sx-ease)}
.ecx-st li.warn .ecx-lv i{background:var(--sx-warn)}
.ecx-lv em{position:absolute;top:-4px;bottom:-4px;left:calc(var(--m) * 100%);width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
.sx.is-armed .ecx-st li:not(.in) .ecx-lv i{transform:scaleX(0)}
.ecx-st li.is-hi .mv-tt b{color:var(--sx-blue-t)}

/* Notas · operação → documento */
.ecx-nf{display:flex;flex-direction:column;gap:14px}
.ecx-nf-h{display:flex;align-items:baseline;gap:10px}
.ecx-nf-n b{font-family:var(--f-brand);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ecx-nf-l{font-size:14px;color:var(--sx-ink2)}
.ecx-ops{display:flex;flex-direction:column;gap:8px}
.ecx-ops li{display:grid;grid-template-columns:auto minmax(0,1fr) 28px 64px 112px;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transition:border-color .25s,box-shadow .25s}
.ecx-ops li.is-hi{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.ecx-arr{position:relative;height:2px;background:var(--sx-line2);border-radius:1px;transform-origin:left;transition:transform .35s var(--sx-ease),background .25s}
.ecx-arr::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:6px solid var(--sx-line2);border-right:0}
.ecx-ops li.on .ecx-arr{background:var(--sx-blue)}
.ecx-ops li.on .ecx-arr::after{border-left-color:var(--sx-blue)}
.ecx-doc{justify-self:start;height:28px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;font-family:var(--f-brand);font-weight:500;font-size:13px;background:var(--sx-wash);color:var(--sx-ink2);transition:background .25s,color .25s}
.ecx-ops li.on .ecx-doc,.sx:not(.is-armed) .ecx-doc{background:var(--sx-blue-b);color:var(--sx-blue-t)}
.ecx-aut{justify-self:start;transition:opacity .3s var(--sx-ease),transform .3s var(--sx-ease)}
.sx.is-armed .ecx-ops li:not(.ok) .ecx-aut{opacity:0;transform:translateY(6px)}
.ecx-nf-f{font-size:12.5px;color:var(--sx-ink3)}

/* Financeiro · projeção de caixa (linha) */
.ecx-fin{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.ecx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ecx-chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--sx-line2);display:inline-flex;align-items:center;font-size:12.5px;color:var(--sx-ink2);transition:background .2s,color .2s,border-color .2s,transform .16s}
.ecx-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ecx-chip.is-press{transform:scale(.96)}
.ecx-fin-v b{font-family:var(--f-brand);font-weight:400;font-size:34px;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.ecx-fin-s{position:relative;height:20px;font-size:13px;color:var(--sx-ink3)}
.ecx-fin-s span{position:absolute;left:0;top:0;transition:opacity .3s}
.ecx-fin-s .b,.ecx-fin.is-on .ecx-fin-s .a{opacity:0}
.ecx-fin.is-on .ecx-fin-s .b{opacity:1}
.ecx-ch{position:relative;height:150px;margin-top:14px;overflow:hidden}
.ecx-ch svg{width:100%;height:100%;display:block;overflow:visible}
.ecx-ch line{stroke:var(--sx-line);stroke-width:1;vector-effect:non-scaling-stroke}
.ecx-ch .ar{fill:rgba(0,122,255,.08)}
.ecx-ch .ln{fill:none;stroke:var(--sx-blue);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ecx-cover{position:absolute;inset:-2px -2px -2px 0;background:#fff;transform-origin:right;transform:scaleX(0);transition:transform 1.2s var(--sx-ease)}
.sx.is-armed .ecx-fin:not(.is-on) .ecx-cover{transform:scaleX(1)}
.ecx-dot{position:absolute;right:0;width:10px;height:10px;margin:-5px -5px 0 0;border-radius:50%;background:var(--sx-blue);box-shadow:0 0 0 4px rgba(0,122,255,.18);transition:opacity .3s}
.sx.is-armed .ecx-fin:not(.is-end) .ecx-dot{opacity:0}
.ecx-ax{position:relative;height:18px;font-size:12px;color:var(--sx-ink3);margin-top:6px}
.ecx-ax span{position:absolute;top:0}
.ecx-ax span:nth-child(2),.ecx-ax span:nth-child(3){transform:translateX(-50%)}
.ecx-fin-f{font-size:12.5px;color:var(--sx-ink3);margin-top:12px;padding-top:12px;border-top:1px solid var(--sx-line)}

/* Kyra (escuro) · três fontes se juntam numa resposta */
.ecx-ky{display:flex;flex-direction:column}
.ecx-q{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 8px;border-radius:999px;background:#fff;color:var(--ink)}
.ecx-q .sx-av{background:var(--sx-blue);width:36px;height:36px}
.ecx-qt{flex:1;min-width:0;font-size:14.5px;color:var(--sx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecx-qt.typed{color:var(--ink)}
.ecx-srcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.ecx-srcs li{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--paper-2);font-size:12.5px;line-height:1.35}
.ecx-srcs li .sx-dot{margin-top:5px}
.ecx-srcs b{display:block;color:var(--paper);font-weight:500;font-size:13px}
.ecx-conv{display:block;width:100%;height:28px}
.ecx-conv path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s}
.ecx-ky.is-join .ecx-conv path,.sx:not(.is-armed) .ecx-conv path{opacity:1}
.ecx-ans{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px 18px;border-radius:16px;background:#fff;color:var(--ink)}
.ecx-ans-v{font-family:var(--f-brand);font-weight:400;font-size:30px;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.ecx-ans-s{font-size:13px;color:var(--sx-ink3)}
.ecx-prev{margin-top:10px;padding:14px 16px;border-radius:16px;background:#fff;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.ecx-prev-k{font-size:12px;color:var(--sx-ink3)}
.ecx-prev-m{font-size:13.5px;line-height:1.45;padding:9px 12px;border-radius:12px;background:var(--sx-ok-b)}
.ecx-prev-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ecx-prev-w{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sx-ink2)}

/* Minha Contabilidade dentro do ERP · um acesso, duas áreas */
.ecx-two{display:flex;flex-direction:column;align-items:stretch}
.ecx-login{align-self:center;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;border:1px solid var(--sx-line);box-shadow:0 20px 40px -30px rgba(10,20,60,.45)}
.ecx-fork{display:block;width:100%;height:34px}
.ecx-fork path{fill:none;stroke:var(--sx-line2);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s}
.ecx-two.is-fork .ecx-fork path,.sx:not(.is-armed) .ecx-fork path{opacity:1}
.ecx-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ecx-z{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ecx-z.mc{border-color:rgba(0,122,255,.3);background:linear-gradient(#fff,#fff) padding-box}
.ecx-z-k{display:flex;align-items:center;gap:8px;font-family:var(--f-brand);font-weight:500;font-size:14px}
.ecx-z dl{margin:0;display:flex;flex-direction:column}
.ecx-z dl div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--sx-line);font-size:13px}
.ecx-z dt{color:var(--sx-ink2)}
.ecx-z dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.ecx-z-i{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0;border-top:1px solid var(--sx-line)}
.ecx-z-i .mv-tt b{font-size:13.5px}
.ecx-lock{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--sx-ink2)}
.ecx-lock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}

@media (max-width:720px){
  .ecx-src{grid-template-columns:auto minmax(0,1fr)}
  .ecx-src .sx-btn{grid-column:2;justify-self:start}
  .ecx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ecx-tiles b{font-size:24px}
  .ecx-pc{padding:16px}
  .ecx-cx{padding:16px}
  .ecx-cx-h{grid-template-columns:auto minmax(0,1fr)}
  .ecx-cx-h .sx-badge{grid-column:2;justify-self:start}
  .ecx-fields{grid-template-columns:minmax(0,1fr)}
  .ecx-cx > .sx-btn{white-space:normal;height:auto;min-height:42px;padding:8px 12px}
  .ecx-st{padding:14px 16px}
  .ecx-st li{grid-template-columns:minmax(0,1fr)}
  .ecx-ops li{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .ecx-arr{display:none}
  .ecx-doc{grid-column:2}
  .ecx-aut{grid-column:2}
  .ecx-ops li{grid-template-areas:none}
  .ecx-fin{padding:16px}
  .ecx-fin-v b{font-size:30px}
  .ecx-srcs{grid-template-columns:minmax(0,1fr)}
  .ecx-conv{display:none}
  .ecx-ans{margin-top:12px}
  .ecx-ans .sx-badge{white-space:normal;height:auto;min-height:22px;padding:4px 8px;line-height:1.3}
  .ecx-zones{grid-template-columns:minmax(0,1fr)}
  .ecx-fork{display:none}
  .ecx-login{align-self:flex-start;margin-bottom:12px}
}
/* celular: ponto final do gráfico inteiro dentro do quadro */
@media (max-width:720px){.ecx-dot{margin-right:0}}