/* /operacao-contabil — padrão r2 (texto | motion, alternando) igual à Início.
   Motions mv próprios (prefixo oc-), inspirados nas funções reais: entrada → trabalho com dono (hero), Cliente 360,
   Minha Fila, Obrigações, Processos (kanban), Triagem de documentos, Histórico.
   Estados ocultos só com .sx.is-armed (JS); movimento reduzido: estado final. */

/* ---------- Hero: texto | motion ---------- */
.oc-hero{padding-block:clamp(40px,5vw,88px) var(--space-section)}
.oc-hg{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.oc-hcopy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.oc-hcopy > *{margin:0}
.oc-hcopy .lead{max-width:40ch}
.oc-hg > .sx{max-width:620px;width:100%}
@media (min-width:1100px){
  .oc-hg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(56px,6vw,96px)}
  .oc-h1{font-size:clamp(2.4rem,1.3rem + 2vw,3.3rem);line-height:1.06;max-width:17ch}
  .oc-hg > .sx{justify-self:end}
}
@media (max-width:720px){.oc-hg{gap:36px}.oc-hcopy{gap:20px}.oc-h1{font-size:min(2.2rem,var(--fs-display))}}

/* ---------- peças comuns ---------- */
.oc-pr,.oc-cs,.oc-so,.oc-ob-c,.oc-dc,.oc-tl{background:#fff;border:1px solid var(--sx-line);border-radius:18px}
.oc-who{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--sx-blue-b);color:var(--sx-blue-t);font-size:12px;font-weight:500;flex:none}
.oc-mini{display:block;height:6px;border-radius:999px;background:var(--sx-wash);overflow:hidden}
.oc-mini b{display:block;height:100%;border-radius:999px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--k,0));transition:transform .6s var(--sx-ease)}

/* ---------- 1 · Hero: o que chega vira trabalho com dono ---------- */
.oc-pr{padding:18px}
.oc-pr-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--sx-line)}
.oc-pr-n{font-size:12.5px;color:var(--sx-ink3)}
.oc-pr-n b{font-family:var(--f-brand);font-weight:500;font-size:18px;color:var(--ink);margin-right:2px;font-variant-numeric:tabular-nums}
.oc-pr-k{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.1fr);margin:14px 0 8px;font-size:12px;color:var(--sx-ink3)}
.oc-pr-k span:last-child{grid-column:3}
.oc-pr-l{display:flex;flex-direction:column;gap:10px}
.oc-pr-row{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.1fr);align-items:center}
.oc-pr-in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--paper);transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.oc-pr-ar{position:relative;height:2px;margin:0 6px;background:var(--sx-blue);transform-origin:left;transition:transform .35s var(--sx-ease)}
.oc-pr-ar::after{content:"";position:absolute;right:-1px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--sx-blue)}
.oc-pr-out{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--sx-line);box-shadow:0 14px 30px -24px rgba(10,20,60,.45);transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.oc-pr-out .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.sx.is-armed .oc-pr-row:not(.r1) .oc-pr-in{opacity:0;transform:translateY(8px)}
.sx.is-armed .oc-pr-row:not(.r2) .oc-pr-ar{transform:scaleX(0)}
.sx.is-armed .oc-pr-row:not(.r3) .oc-pr-out{opacity:0;transform:translateX(-8px)}

/* ---------- 2 · Cliente 360: número e áreas ---------- */
.oc-cs{padding:18px 20px}
.oc-cs-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--sx-line)}
.oc-cs-big{padding:12px 0 14px}
.oc-cs-prog{display:block;height:10px;margin-top:10px;border-radius:999px;background:var(--sx-wash);overflow:hidden}
.oc-cs-prog b{display:block;height:100%;border-radius:999px;background:var(--sx-ok);transform-origin:left;transform:scaleX(var(--p,.62));transition:transform .8s var(--sx-ease)}
.oc-cs-k{font-size:12.5px;color:var(--sx-ink3);margin-bottom:6px}
.oc-cs-a li{display:grid;grid-template-columns:minmax(0,1fr) 96px 104px;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--sx-line);transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease),background .3s}
.oc-cs-a li .sx-badge{justify-self:end}
.oc-cs-a li.is-hi{background:var(--sx-blue-b);border-radius:10px;box-shadow:0 0 0 6px var(--sx-blue-b)}
.oc-cs-bar{display:block;height:6px;border-radius:999px;background:var(--sx-wash);overflow:hidden}
.oc-cs-bar b{display:block;height:100%;border-radius:999px;background:var(--sx-ink3);transform-origin:left;transform:scaleX(var(--v));transition:transform .6s var(--sx-ease),background .3s}
[data-a="fis"] .oc-cs-bar b{background:var(--sx-al)}[data-a="con"] .oc-cs-bar b{background:var(--sx-warn)}[data-a="dp"] .oc-cs-bar b{background:var(--sx-ok)}
[data-a="con"].is-ok .oc-cs-bar b{background:var(--sx-ok)}
.oc-cs-ev{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--paper);font-size:13px;color:var(--sx-ink2)}
.oc-cs-ev b{color:var(--ink);font-weight:500;margin-right:4px}

/* ---------- 3 · Minha Fila: cada tarefa cai no seu grupo ---------- */
.oc-so{padding:18px}
.oc-so-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:13px;color:var(--sx-ink3)}
.oc-so-h p{font-size:14px;color:var(--sx-ink2)}.oc-so-h p b{font-family:var(--f-brand);font-weight:500;color:var(--ink)}
.oc-so-b{position:relative}
.oc-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.oc-bin{background:var(--paper);border-radius:14px;padding:10px;min-height:236px;display:flex;flex-direction:column;gap:8px;min-width:0}
.oc-bin > p{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;padding:2px 2px 4px}
.oc-bin-n{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.oc-bin ul{display:flex;flex-direction:column;gap:8px}
.oc-bin li,.oc-pile li{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--sx-line);min-width:0}
.oc-bin li b,.oc-pile li b{font-family:var(--f-brand);font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-bin li span,.oc-pile li span{font-size:12.5px;color:var(--sx-ink3);line-height:1.35}
.oc-bin li{transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed .oc-bin li:not(.in){opacity:0;transform:translateY(-14px)}
.oc-pile{position:absolute;inset:34px 0 auto 0;height:150px;pointer-events:none;z-index:2}
.oc-pile li{position:absolute;left:var(--x);top:var(--y);width:46%;transform:rotate(var(--r));box-shadow:0 14px 28px -18px rgba(10,20,60,.45);opacity:0;transition:opacity .35s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed .oc-pile li.in{opacity:1}
.sx.is-armed .oc-pile li.out{opacity:0;transform:rotate(0) translateY(24px) scale(.96)}

/* ---------- 4 · Obrigações: trilho de etapas ---------- */
.oc-ob{display:flex;flex-direction:column;gap:12px}
.oc-ob-c{padding:20px}
.oc-ob-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.oc-ob-h .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.oc-ob-h .mv-tt b{font-size:16px}
.oc-trk{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:24px 0 18px}
.oc-trk::before,.oc-trk::after{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:11px;height:3px;border-radius:3px;background:var(--sx-line2)}
.oc-trk::after{background:var(--sx-ok);transform-origin:left;transform:scaleX(var(--k,0));transition:transform .7s var(--sx-ease)}
.oc-trk li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;color:var(--sx-ink3);text-align:center}
.oc-trk li i{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--sx-line2);display:grid;place-items:center;color:transparent;transition:background .3s,box-shadow .3s,color .3s}
.oc-trk li i svg{width:12px;height:12px}
.oc-trk li.done i{background:var(--sx-ok);box-shadow:none;color:#fff}
.oc-trk li.done{color:var(--sx-ink2)}
.oc-trk li.now{color:var(--ink);font-weight:500}
.oc-trk li.now i{box-shadow:inset 0 0 0 7px var(--sx-blue)}
.oc-trk li.block{color:var(--sx-al-t);font-weight:500}
.oc-trk li.block i{box-shadow:inset 0 0 0 7px var(--sx-al)}
.oc-ob-why > p{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:13px;color:var(--sx-ink2);transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.oc-ob-dep{background:var(--sx-al-b)}
.oc-ob-in{background:var(--sx-ok-b)}
.oc-ob-why b{color:var(--ink);font-weight:500}
.oc-ob-why.is-ok .oc-ob-dep{opacity:0;transform:translateY(-6px)}
.oc-ob-o{display:flex;flex-direction:column;gap:8px}
.oc-ob-o li{display:grid;grid-template-columns:minmax(0,1fr) 110px 104px;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--sx-line)}
.oc-ob-o li .sx-badge{justify-self:end}
.oc-ob-o .oc-mini b{transform:scaleX(var(--k))}

/* ---------- 5 · Solicitações: kanban ---------- */
.oc-kb{display:flex;flex-direction:column;gap:14px}
.oc-kb-msg{align-self:flex-start;max-width:80%;padding:10px 14px 8px;border-radius:18px 18px 18px 6px;background:#fff;border:1px solid var(--sx-line);font-size:14px;line-height:1.45}
.oc-kb-msg small{display:block;font-size:12px;color:var(--sx-ink3);margin-top:3px}
.oc-kb-g{--gap:8px;--ch:104px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.oc-kb-col{background:var(--sx-wash);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:background .3s}
.oc-kb-col > p{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:2px 4px;white-space:nowrap;overflow:hidden}
.oc-kb-col.on{background:var(--sx-blue-b)}
.oc-kb-slot{display:block;height:var(--ch)}
.oc-kb-x{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--sx-line);opacity:.62}
.oc-kb-x b{font-family:var(--f-brand);font-weight:500;font-size:13px;line-height:1.3}
.oc-kb-x span{font-size:12px;color:var(--sx-ink3);line-height:1.35}
.oc-kb-card{position:absolute;left:8px;top:40px;width:calc((100% - 3 * var(--gap)) / 4 - 16px);height:var(--ch);display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;background:#fff;box-shadow:0 0 0 2px var(--sx-blue),0 14px 28px -16px rgba(10,20,60,.45);transform:translateX(calc(var(--c) * (100% + 16px + var(--gap))));transition:transform .6s var(--sx-ease),opacity .4s var(--sx-ease),box-shadow .3s;z-index:2}
.sx.is-armed .oc-kb-card:not(.in){opacity:0;transform:translateX(calc(var(--c) * (100% + 16px + var(--gap)))) translateY(8px)}
.oc-kb-card b{font-family:var(--f-brand);font-weight:500;font-size:13.5px;line-height:1.3}
.oc-kb-id{font-size:12px;color:var(--sx-blue-t);font-weight:500}
.oc-kb-et{font-size:12px;color:var(--sx-ink3);line-height:1.35}
.oc-kb-card .oc-mini{margin-top:auto}
.oc-kb-card.is-done{box-shadow:0 0 0 2px var(--sx-ok),0 14px 28px -16px rgba(10,20,60,.45)}
.oc-kb-card.is-done .oc-mini b{background:var(--sx-ok)}

/* ---------- 6 · Documentos: confiança e decisão ---------- */
.oc-dc{padding:20px;display:flex;flex-direction:column;gap:14px}
.oc-dc-f{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.oc-file{width:38px;height:44px;border-radius:8px;background:var(--sx-blue);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;letter-spacing:.02em}
.oc-dc-m{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--paper)}
.oc-dc-m li{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:12px;font-size:13px;color:var(--sx-ink2)}
.oc-dc-m li i{display:block;height:8px;border-radius:999px;background:rgba(29,29,31,.08);overflow:hidden}
.oc-dc-m li i b{display:block;height:100%;border-radius:999px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--v));transition:transform .8s var(--sx-ease),background .3s}
.oc-dc-m li i b.warn{background:var(--sx-warn)}
.oc-dc-m li i b.ok{background:var(--sx-ok)}
.sx.is-armed .oc-dc-m:not(.in) li i b{transform:scaleX(0)}
.oc-m-v{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);font-weight:500}
.oc-dc-q{padding:12px 14px;border-radius:14px;border:1px dashed rgba(29,29,31,.2);display:flex;flex-direction:column;gap:10px}
.oc-dc-q p{font-size:13px;color:var(--sx-warn-t);font-weight:500}
.oc-dc-ch{display:flex;gap:8px;flex-wrap:wrap}
.oc-ch{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--sx-line2);font-size:13px;transition:background .25s,border-color .25s,color .25s,transform .16s var(--sx-ease),opacity .3s}
.oc-ch.is-press{transform:scale(.96)}
.oc-ch.on{background:var(--sx-blue);border-color:var(--sx-blue);color:#fff}
.oc-ch.off{opacity:.4}
.oc-dc-to{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--sx-ok-b)}
.oc-dc-to span:last-child{display:flex;flex-direction:column;font-size:12.5px;color:var(--sx-ink2)}
.oc-dc-to b{font-family:var(--f-brand);font-weight:500;font-size:14px;color:var(--ink)}

/* ---------- 7 · Histórico: linha do tempo ---------- */
.oc-tl{padding:20px}
.oc-tl-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--sx-line)}
.oc-tl-h .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.oc-tl-n{font-size:12.5px;color:var(--sx-ink3)}
.oc-tl-n b{font-family:var(--f-brand);font-weight:500;font-size:18px;color:var(--ink);margin-right:2px;font-variant-numeric:tabular-nums}
.oc-tl ol{position:relative;display:flex;flex-direction:column;gap:16px;padding-left:24px}
.oc-tl ol::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--sx-line2)}
.oc-tl li{position:relative;display:flex;flex-direction:column;gap:2px}
.oc-tl li::before{content:"";position:absolute;left:-24px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #AAAAAA;transition:box-shadow .3s}
.oc-tl li.in::before{box-shadow:inset 0 0 0 4px var(--sx-blue)}
.oc-tl time{font-size:12px;color:var(--sx-ink3);font-variant-numeric:tabular-nums}
.oc-tl li p{font-size:14px;line-height:1.4}
.oc-tl li p b{font-family:var(--f-brand);font-weight:500}
.oc-tl-x{font-size:12.5px;color:var(--sx-ink3)}
.oc-tl-chg{align-self:flex-start;margin-top:4px;padding:3px 10px;border-radius:999px;background:var(--sx-blue-b);color:var(--sx-blue-t);font-weight:500}
.oc-tl-chg s{color:var(--sx-ink3);font-weight:400}

/* ---------- Fechamento ---------- */
.oc-close .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:48px clamp(40px,7vw,120px);align-items:end}
.oc-close-main{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.oc-close-main > *{margin:0}
.oc-close-main .h2{max-width:20ch}
.oc-close-main .r2-body{margin:0 !important}
.oc-close-main .btn-row{margin-top:12px}
.oc-next{display:flex;flex-direction:column}
.oc-next-k{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin-bottom:10px}
.oc-next a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;border-top:1px solid var(--line-2);text-decoration:none;font-size:1.05rem;letter-spacing:-.01em;transition:color .2s}
.oc-next a:last-child{border-bottom:1px solid var(--line-2)}
.oc-next a:hover{color:var(--blue-text)}
@media (max-width:900px){.oc-close .wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- celular: cenas pensadas para o telefone ---------- */
@media (max-width:720px){
  .oc-pr,.oc-cs,.oc-so,.oc-ob-c,.oc-dc,.oc-tl{padding:16px}
  .oc-pr-k{display:none}
  .oc-pr-l{gap:14px}
  .oc-pr-row{grid-template-columns:minmax(0,1fr);gap:0}
  .oc-pr-ar{width:2px;height:16px;margin:0 0 0 26px;transform-origin:top}
  .oc-pr-ar::after{right:-3px;top:auto;bottom:-2px}
  .sx.is-armed .oc-pr-row:not(.r2) .oc-pr-ar{transform:scaleY(0)}
  .sx.is-armed .oc-pr-row:not(.r3) .oc-pr-out{transform:translateY(-6px)}
  .oc-cs-a li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .oc-cs-bar{grid-column:1 / -1;grid-row:2}
  .oc-bins{grid-template-columns:minmax(0,1fr)}
  .oc-bin{min-height:0}
  .oc-bin ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc-pile li{width:48%}
  .oc-ob-h{flex-direction:column}
  .oc-trk li{font-size:12px}
  .oc-ob-o li{grid-template-columns:minmax(0,1fr) auto}
  .oc-ob-o .oc-mini{grid-column:1 / -1;grid-row:2}
  .oc-kb-msg{max-width:92%}
  .oc-kb-g{gap:6px}
  .oc-kb-col{padding:8px 4px;align-items:center;gap:0}
  .oc-kb-col > p{flex-direction:column;gap:4px;font-size:12px;white-space:normal;text-align:center;line-height:1.2}
  .oc-kb-slot,.oc-kb-x{display:none}
  .oc-kb-card{position:relative;left:auto;top:auto;grid-column:1 / -1;width:auto;height:auto;min-height:96px;transform:none;margin-top:4px}
  .sx.is-armed .oc-kb-card:not(.in){transform:translateY(8px)}
  .oc-dc-m li{grid-template-columns:86px minmax(0,1fr) 40px}
}