/* Primeira experiência da loja (onboarding.js): boas-vindas com ilustração animada, tour com destaque, convite do colaborador,
   "Primeiros passos" e estados vazios da Visão geral, bloco "dados de exemplo". Prefixo ob-. */

/* ---------------------------------------------------------------- boas-vindas */
.ob-welcome{width:min(580px,calc(100vw - 24px));max-width:calc(100vw - 16px);max-height:calc(100svh - 24px);padding:0;border:0;border-radius:22px;overflow:hidden auto;overscroll-behavior:contain;background:#fff;color:var(--ink);box-shadow:0 40px 100px -24px #0f172a66,0 12px 32px -12px #0f172a33}
.ob-welcome[open]{animation:ob-pop .55s var(--ease-spring) both}
.ob-welcome::backdrop{background:radial-gradient(circle at 50% 28%,#ff632b2e,#111820a6 62%);backdrop-filter:blur(6px)}
.ob-close{position:absolute;top:12px;right:12px;z-index:2;background:#ffffffd9!important;color:var(--ink-2);box-shadow:var(--shadow-xs)}
.ob-close:hover{background:#fff!important}
.ob-art{position:relative;height:208px;overflow:hidden;background:linear-gradient(165deg,#fff6ef 0%,#ffe6d7 48%,#ffd5c0 100%)}
.ob-art::after{content:'';position:absolute;inset:auto 0 0;height:38px;background:linear-gradient(to bottom,#fff0,#fff);pointer-events:none}
.ob-art-svg{position:absolute;inset:0;width:100%;height:100%}
.ob-body{position:relative;padding:4px 28px 26px}
.ob-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:650}
.ob-kicker .icon{width:16px;height:16px}
#ob-title{margin:0 0 10px;font-size:26px;line-height:1.16;letter-spacing:-.035em;font-weight:780;text-wrap:balance}
.ob-title-line{display:block;color:var(--accent-ink)}
.ob-lead{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--muted)}
.ob-lead strong{color:var(--ink)}
.ob-perks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.ob-perks li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-soft);border-radius:14px;background:#fafbfc;animation:ob-rise .5s var(--ease) both;animation-delay:calc(.28s + var(--i,0)*.09s)}
.ob-perk-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink)}
.ob-perk-icon .icon{width:18px;height:18px}
.ob-perks strong{display:block;font-size:14px;font-weight:650;color:var(--ink);line-height:1.35}
.ob-perks small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ob-actions{display:flex;flex-wrap:wrap;gap:10px}
.ob-actions .primary-btn,.ob-actions .outline-btn{min-height:48px;font-size:14px}
.ob-actions .primary-btn{flex:1 1 230px;position:relative;overflow:hidden}
.ob-actions .outline-btn{flex:1 1 150px}
.ob-tour-btn .icon{width:16px;height:16px;fill:currentColor;stroke-width:1.2}
.ob-tour-btn::after{content:'';position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,#fff0,#ffffff59,#fff0);transform:skewX(-18deg);animation:ob-shine 3.6s ease-in-out 1.2s infinite}

/* Ilustração: confete caindo, serpentinas, balões, carro com laço e a chave */
.ob-art-svg *{transform-box:fill-box}
.ob-c{transform-origin:center;animation:ob-fall 4.4s linear var(--d,0s) infinite both}
.ob-s{stroke-dasharray:260;stroke-dashoffset:260;animation:ob-draw 1.3s var(--ease) .25s forwards}
.ob-s.s2{animation-delay:.4s}.ob-s.s3{animation-delay:.55s}.ob-s.s4{animation-delay:.7s}
.ob-balloon{transform-origin:50% 100%;animation:ob-float 5.2s ease-in-out infinite}
.ob-balloon.b2{animation-delay:-1.4s;animation-duration:4.6s}.ob-balloon.b3{animation-delay:-2.6s}.ob-balloon.b4{animation-delay:-.8s;animation-duration:4.8s}
.ob-car{transform-origin:50% 100%;animation:ob-car-in .9s var(--ease-spring) .1s both,ob-bounce 2.8s ease-in-out 1.1s infinite}
.ob-bow{transform-origin:50% 85%;animation:ob-bow 2.8s ease-in-out 1.1s infinite}
.ob-shadow{transform-origin:center;animation:ob-shadow 2.8s ease-in-out 1.1s infinite}
.ob-key{transform-origin:20% 15%;animation:ob-swing 3.2s ease-in-out infinite}
.ob-sp{transform-origin:center;animation:ob-twinkle 2.4s ease-in-out infinite}
.ob-sp.p2{animation-delay:-.7s}.ob-sp.p3{animation-delay:-1.3s}.ob-sp.p4{animation-delay:-1.9s}

@keyframes ob-pop{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes ob-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ob-fall{0%{opacity:0;transform:translate(0,-150px) rotate(0)}8%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),160px) rotate(var(--r,380deg))}}
@keyframes ob-draw{to{stroke-dashoffset:0}}
@keyframes ob-float{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-9px) rotate(2.5deg)}}
@keyframes ob-car-in{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes ob-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ob-bow{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ob-shadow{0%,100%{transform:scaleX(1);opacity:.14}50%{transform:scaleX(.94);opacity:.1}}
@keyframes ob-swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes ob-twinkle{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ob-shine{0%,62%{left:-40%}100%{left:130%}}

/* ---------------------------------------------------------------- dados de exemplo (boas-vindas, primeiros passos e Meu perfil) */
.ob-sample{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;border-radius:14px;background:#fff8f3;border:1px solid color-mix(in srgb,var(--accent) 22%,#fff)}
.ob-sample-icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;background:#fff;color:var(--accent-ink);box-shadow:var(--shadow-xs)}
.ob-sample-icon .icon{width:17px;height:17px}
.ob-sample p{margin:0;min-width:0}
.ob-sample p strong{display:block;font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.4}
.ob-sample p span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ob-sample-btn{min-height:38px!important;padding:0 12px!important;font-size:12.5px!important}
.ob-sample-btn .icon{width:15px;height:15px}
.ob-sample.is-confirm{grid-template-columns:auto minmax(0,1fr)}
.ob-sample-actions{grid-column:1/-1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.ob-sample-actions .primary-btn,.ob-sample-actions .outline-btn{min-height:40px;padding:0 14px}
.ob-sample-error{grid-column:1/-1;margin:0;color:var(--danger);font-size:12.5px}
.ob-sample-error:empty{display:none}
.ob-sample.is-done{grid-template-columns:auto minmax(0,1fr);background:var(--success-soft);border-color:#bfe6d4}
.ob-sample.is-done .ob-sample-icon{color:var(--success)}
.ob-sample.is-kept{grid-template-columns:auto minmax(0,1fr);background:#f7f8fa;border-color:var(--line)}
.ob-sample.is-kept .ob-sample-icon{color:var(--muted)}

/* ---------------------------------------------------------------- tour */
.ob-tour{position:fixed;inset:0;z-index:1000;pointer-events:none}
.ob-shield{position:fixed;inset:0;pointer-events:auto;background:transparent;transition:background-color .25s}
.ob-tour.is-center .ob-shield{background:#0c0f12a6}
.ob-spot{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:12px;pointer-events:none;box-shadow:0 0 0 9999px #0c0f12a6,0 0 0 2px var(--accent),0 0 0 8px color-mix(in srgb,var(--accent) 26%,transparent);transition:left .4s var(--ease-spring),top .4s var(--ease-spring),width .4s var(--ease-spring),height .4s var(--ease-spring),opacity .25s}
.ob-spot::after{content:'';position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 2px var(--accent);animation:ob-ring 1.8s var(--ease) infinite}
.ob-tour.is-center .ob-spot{opacity:0}
.ob-tour:not(.is-on) .ob-spot,.ob-tour:not(.is-on) .ob-tip{opacity:0}
.ob-tip{position:fixed;left:50%;top:50%;width:min(340px,calc(100vw - 24px));padding:16px 18px 14px;pointer-events:auto;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 30px 70px -18px #0008,0 6px 18px -8px #0005;outline:none;transition:opacity .2s var(--ease),transform .28s var(--ease)}
.ob-tip.is-moving{opacity:0;transform:translateY(6px)}
.ob-tip[data-side=center]{inset:0;margin:auto;height:fit-content}
.ob-tip[data-side=sheet],.ob-tip[data-side=sheet-top]{left:12px;right:12px;width:auto}
.ob-tip[data-side=sheet]{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.ob-tip[data-side=sheet-top]{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}
.ob-tip-arrow{position:absolute;width:14px;height:14px;background:#fff;border-radius:3px;transform:rotate(45deg)}
.ob-tip[data-side=right] .ob-tip-arrow{left:-6px;top:calc(var(--ob-arrow,24px) - 7px)}
.ob-tip[data-side=left] .ob-tip-arrow{right:-6px;top:calc(var(--ob-arrow,24px) - 7px)}
.ob-tip[data-side=bottom] .ob-tip-arrow{top:-6px;left:calc(var(--ob-arrow,24px) - 7px)}
.ob-tip[data-side=top] .ob-tip-arrow{bottom:-6px;left:calc(var(--ob-arrow,24px) - 7px)}
.ob-tip[data-side=center] .ob-tip-arrow,.ob-tip[data-side^=sheet] .ob-tip-arrow{display:none}
.ob-tip-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ob-tip-count{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-ink)}
.ob-tip-close{width:34px;height:34px;margin:-8px -10px -4px 0}
.ob-tip-close .icon{width:17px;height:17px}
.ob-tip-dots{display:flex;gap:5px;margin:8px 0 12px}
.ob-tip-dots i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background-color .3s}
.ob-tip-dots i.is-done{background:color-mix(in srgb,var(--accent) 42%,#fff)}
.ob-tip-dots i.is-on{background:var(--accent)}
.ob-tip h3{margin:0 0 6px;font-size:17px;line-height:1.3;letter-spacing:-.3px;font-weight:720}
#ob-tip-text{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ob-tip-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ob-tip-actions>span{display:flex;gap:8px;margin-left:auto}
.ob-tip-actions .outline-btn,.ob-tip-actions .primary-btn{min-height:40px;padding:0 14px;gap:6px}
.ob-tip-actions .icon{width:16px;height:16px}
.ob-tip-actions .text-btn{min-height:40px;padding:0 4px;color:var(--muted)}
@keyframes ob-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}

/* ---------------------------------------------------------------- convite ao tour (colaborador) */
.ob-invite{position:fixed;left:calc(var(--sidebar-width,236px) + 20px);bottom:20px;z-index:110;display:flex;gap:12px;width:min(340px,calc(100vw - 32px));padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);animation:ob-rise .45s var(--ease-spring) both}
.ob-invite-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink)}
.ob-invite strong{display:block;font-size:14px;font-weight:650}
.ob-invite p{margin:3px 0 12px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ob-invite-actions{display:flex;align-items:center;gap:14px}
.ob-invite-actions .primary-btn{min-height:40px;padding:0 14px}
[data-navigation=top] .ob-invite{left:20px}

/* ---------------------------------------------------------------- Visão geral: primeiros passos e estados vazios */
.ob-steps{position:relative;display:grid;gap:14px;margin-bottom:16px;padding:20px 22px;overflow:hidden}
.ob-steps.is-fresh{background:linear-gradient(118deg,#fff 0%,#fff 56%,color-mix(in srgb,var(--accent) 8%,#fff) 100%)}
.ob-steps.is-fresh::after{content:'';position:absolute;right:-90px;top:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent) 0,transparent 68%);pointer-events:none}
.ob-steps>*{position:relative;z-index:1}
.ob-steps-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ob-steps-head .eyebrow{margin:0 0 6px}
.ob-steps-head h2{margin:0 0 4px;font-size:20px;line-height:1.25;letter-spacing:-.5px}
.ob-steps-head p:not(.eyebrow){margin:0;font-size:13px;color:var(--muted)}
.ob-steps-head .text-btn{min-height:32px;color:var(--muted)}
.ob-progress{height:6px;border-radius:6px;background:var(--line-soft);overflow:hidden}
.ob-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#ffb547));transition:width .6s var(--ease)}
.ob-step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(176px,100%),1fr));gap:10px}
.ob-step-list button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;height:100%;padding:14px 34px 14px 14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px}
.ob-step-list button:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.ob-step-mark{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--line-soft);color:var(--ink-2);font-size:12px;font-weight:700}
.ob-step-mark .icon{width:15px;height:15px;stroke-width:2.2}
.ob-step-copy strong{display:block;font-size:13.5px;font-weight:650;line-height:1.35;color:var(--ink)}
.ob-step-copy small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted)}
.ob-step-go{position:absolute;top:16px;right:12px;width:16px!important;height:16px!important;color:var(--muted-2)}
.ob-step-list .is-next button{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.ob-step-list .is-next .ob-step-mark{background:var(--accent);color:var(--on-accent)}
.ob-step-list .is-done button{background:#fbfcfc}
.ob-step-list .is-done .ob-step-mark{background:var(--success-soft);color:var(--success)}
.ob-step-list .is-done strong{color:var(--muted);text-decoration:line-through;text-decoration-color:#c4c9d1}
.ob-steps .ob-sample{margin:0}
.ob-steps.is-simple{display:flex;align-items:center;gap:16px}
.ob-steps.is-simple h2{margin:0 0 4px;font-size:17px;letter-spacing:-.3px}
.ob-steps.is-simple p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.ob-steps.is-simple>div{flex:1;min-width:0}
.ob-steps-badge{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink)}
.ob-steps+.two-column{margin-top:0}
.ob-empty-stock{grid-column:1/-1;flex:1 0 100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 22px!important;border:1px dashed #d9dde3;border-radius:12px;background:#fafbfc}
.ob-empty-stock p{margin:0;max-width:380px}
.ob-empty-stock .primary-btn{min-height:42px}

/* ---------------------------------------------------------------- telas menores */
@media(max-width:960px){.ob-invite{left:16px;right:16px;bottom:16px;width:auto}}
@media(max-width:560px){
  .ob-welcome{width:calc(100vw - 16px);max-height:calc(100svh - 16px);border-radius:18px}
  .ob-art{height:150px}
  .ob-body{padding:2px 18px 20px}
  #ob-title{font-size:22px}
  .ob-lead{font-size:13.5px;margin-bottom:14px}
  .ob-perks{gap:8px;margin-bottom:14px}.ob-perks li{padding:10px 12px}
  .ob-actions{flex-direction:column}.ob-actions .primary-btn,.ob-actions .outline-btn{flex:none;width:100%}
  .ob-sample{grid-template-columns:auto minmax(0,1fr)}.ob-sample-btn{grid-column:1/-1;width:100%}
  .ob-sample-actions>*{flex:1}
  .ob-steps{padding:16px}.ob-steps-head h2{font-size:18px}
  .ob-step-list button{flex-direction:row;align-items:center;gap:12px;padding:12px 34px 12px 12px}
  .ob-step-go{top:50%;margin-top:-8px}
  .ob-steps.is-simple{flex-wrap:wrap}.ob-steps.is-simple .outline-btn{width:100%}
  .ob-tip{padding:14px 16px 12px}
  .ob-tip-actions>span{gap:6px}.ob-tip-actions .outline-btn,.ob-tip-actions .primary-btn{padding:0 12px}
}
@media(max-height:700px){.ob-art{height:136px}.ob-art-svg{inset:auto 0 0 0;height:auto}.ob-perks small{display:none}}
@media(prefers-reduced-motion:reduce){
  .ob-welcome[open],.ob-welcome *,.ob-tour *,.ob-invite,.ob-progress i,.ob-step-list button{animation:none!important;transition:none!important}
  .ob-s{stroke-dashoffset:0}
  .ob-tour-btn::after,.ob-spot::after{display:none}
}