/* 3.0.37: comparação animada (SimpliDANFE x outras ferramentas). Escopo .cx */
.cx{--bad:#d1453b;--bad-2:#9e2f27;--bad-soft:#fff1f0;--good:#0e8a67;--good-2:#0b6b50;--good-soft:#eaf7f1;--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  position:relative;margin-top:36px;border:1px solid var(--line);border-radius:26px;padding:20px 20px 14px;font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 300px at 50% -120px,#eef3ff 0%,transparent 60%),var(--card);box-shadow:0 40px 80px -48px #0f1a2b66,0 2px 4px #0f1a2b0a}
.cx-top{display:grid;gap:16px;margin-bottom:18px}
.cx-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cx-bars i{display:block;height:4px;border-radius:99px;background:#0f1a2b14;overflow:hidden}
.cx-bars b{display:block;height:100%;width:0;background:var(--ink);border-radius:99px}
.cx-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cx-tabs button{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--mut);border-radius:999px;padding:9px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s var(--ease)}
.cx-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.cx-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}

.cx-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:600px}
.cx-side{position:relative;border-radius:20px;padding:18px 18px 16px;display:flex;flex-direction:column;align-items:center;overflow:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cx-side.bad{background:linear-gradient(180deg,var(--bad-soft),#fff8f7)}
.cx-side.good{background:linear-gradient(180deg,var(--good-soft),#f5fbf8)}
.cx-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px!important}
.cx-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff}
.cx-dot .icon{width:15px;height:15px}
.bad .cx-tag{color:var(--bad)}.bad .cx-dot{background:var(--bad)}
.good .cx-tag{color:var(--good)}.good .cx-dot{background:var(--good)}

.cx-scene{display:none;width:100%;flex-direction:column;align-items:center}
.cx[data-scene=size] .sc-size,.cx[data-scene=batch] .sc-batch,.cx[data-scene=any] .sc-any{display:flex;animation:cxEnter .55s var(--ease) both}
@keyframes cxEnter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.cx-verdict{margin-top:auto!important;padding-top:16px;max-width:360px;text-align:center;font-size:15px;line-height:1.45;font-weight:700;min-height:66px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cx-verdict.show{opacity:1;transform:none}
.bad .cx-verdict{color:var(--bad-2)}.good .cx-verdict{color:var(--good-2)}

/* Cena 1: tamanho da etiqueta */
.cx-paper{position:relative;width:236px;aspect-ratio:2/3;background:#fff;border-radius:8px;box-shadow:0 1px 2px #0f1a2b22,0 24px 44px -22px #0f1a2b70}
.cx-paper>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:8px}
.cx-paper .lay{transform-origin:50% 50%;transition:transform 1.25s var(--ease-io)}
.cx.ph1 .bad .lay{transform:translateY(27.78%) rotate(90deg) scale(.667)}
.decl{position:absolute;inset:0 0 auto 0;height:52%;display:flex;flex-direction:column;flex-wrap:wrap;align-content:center;gap:2px;padding:10px 14px;writing-mode:vertical-rl;font-family:Arial,Helvetica,sans-serif;font-size:6.5px;line-height:1.2;color:#1d2330;border-bottom:1px dashed #9aa3b2;opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.decl b{font-size:7.5px;letter-spacing:.02em}
.cx.ph2 .decl{opacity:1;transform:none}
.cx-paper .orig{transition:opacity .7s var(--ease)}
.cx-paper .final{opacity:0;transition:opacity .7s var(--ease)}
.cx.ph1 .good .orig{opacity:0}.cx.ph1 .good .final{opacity:1}
.strip{position:absolute;left:2.5%;right:2.5%;bottom:1.8%;height:9.5%;border:2px solid var(--good);border-radius:5px;opacity:0;transform:scale(1.06);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cx.ph2 .strip{opacity:1;transform:none;animation:cxGlow 1.6s ease-out .2s 1}
@keyframes cxGlow{0%{box-shadow:0 0 0 0 #0e8a6766}100%{box-shadow:0 0 0 14px #0e8a6700}}
.cx-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%,-4px);white-space:nowrap;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:800;color:#fff;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cx-badge.warn{background:#b3362d}.cx-badge.ok{background:var(--good)}
.cx.ph2 .cx-badge{opacity:1;transform:translate(-50%,0)}
.scan{position:absolute;left:-6%;right:-6%;height:3px;top:26%;border-radius:3px;opacity:0;background:currentColor;box-shadow:0 0 14px 4px currentColor}
.bad .scan{color:#ff5a4f;top:58%}.good .scan{color:#17c38f;top:18%}
.cx.ph3 .scan{animation:cxScan 1.05s var(--ease-io) 1 both}
.cx.ph3 .bad .scan{animation-name:cxScanShort}
@keyframes cxScan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(190px)}}
@keyframes cxScanShort{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(80px)}}
.cx-stamp{position:absolute;left:50%;top:70%;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;font-size:15px;font-weight:850;white-space:nowrap;color:#fff;opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-8deg);box-shadow:0 14px 30px -10px #0f1a2b88}
.cx-stamp .icon{width:18px;height:18px}
.cx-stamp.no{background:var(--bad)}.cx-stamp.yes{background:var(--good)}
.cx.ph4 .cx-stamp{animation:cxStamp .5s var(--ease) forwards}
.cx.ph4 .cx-stamp.no{animation:cxStamp .5s var(--ease) forwards,cxShake .4s ease .5s 1}
@keyframes cxStamp{to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}}
@keyframes cxShake{0%,100%{margin-left:0}25%{margin-left:-6px}75%{margin-left:6px}}

/* Consequências sob a etiqueta */
.cx-cons{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:320px}
.cx-cons li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font-size:12.5px;font-weight:700;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cx-cons li::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bad-cons li{background:#ffe1de;color:#a42f26}.good-cons li{background:#d6f1e5;color:#0b6b50}
.cx.ph2 .cx-cons li:nth-child(1){opacity:1;transform:none}
.cx.ph4 .cx-cons li:nth-child(2){opacity:1;transform:none}
.cx.ph5 .cx-cons li:nth-child(3){opacity:1;transform:none}
.cx.ph5 .bad-cons li:nth-child(3){animation:cxShake .4s ease .3s 1}

/* Cena 2: 200 pedidos */
.lotbox{width:100%;max-width:330px;background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 2px #0f1a2b14,0 18px 36px -24px #0f1a2b55}
.lot-head{display:flex;align-items:baseline;gap:6px;margin-bottom:12px;white-space:nowrap}
.lot-head b{font-size:19px;font-weight:850;color:#0f1a2b}
.lot-head span{font-size:14px;color:#5b6678}
.lot-dots{margin-left:auto;display:flex;gap:5px}
.lot-dots i{width:10px;height:10px;border-radius:50%;background:#e4e8ef;transition:background .3s var(--ease),transform .3s var(--ease)}
.lot-dots i.on{background:var(--bad);transform:scale(1.15)}
.mini{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mini li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:#f4f6f9;color:#8a94a6;font-size:14px;font-weight:650;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.mini li .icon{width:18px;height:18px;padding:3px;border-radius:50%;background:#dde2ea;color:#fff;transition:background .25s var(--ease)}
.mini li.on{color:#0f1a2b;transform:translateX(3px)}
.bad .mini li.on{background:#ffe7e5}.bad .mini li.on .icon{background:var(--bad)}
.good .mini li.on{background:#dcf3ea}.good .mini li.on .icon{background:var(--good)}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:330px;margin-top:14px}
.nums div{background:#ffffffc9;border-radius:14px;padding:10px 12px;text-align:center}
.nums b{display:block;font-size:34px;line-height:1.05;font-weight:850;letter-spacing:-.02em;color:#0f1a2b;font-variant-numeric:tabular-nums}
.nums small{font-size:12px;font-weight:700;color:#5b6678}
.bad .nums div:first-child b{color:var(--bad)}.good .nums div:first-child b{color:var(--good)}

/* Cena 3: Mac */
.win{position:relative;width:100%;max-width:330px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 2px #0f1a2b1f,0 24px 44px -24px #0f1a2b70}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef0f4;border-bottom:1px solid #e1e4ea}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:8px;font-size:12px;font-weight:700;color:#5b6678}
.zpl{margin:0;height:230px;padding:12px 14px;background:#0f1a2b;color:#9fe7c7;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;overflow:hidden}
.win-alert{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:8px;align-items:flex-start;padding:11px 12px;border-radius:10px;background:var(--bad);color:#fff;font-size:13px;font-weight:700;line-height:1.35;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.win-alert .icon{width:18px;height:18px;flex-shrink:0}
.cx.ph3 .win-alert{opacity:1;transform:none}
.pdfview{position:relative;height:150px;display:flex;align-items:center;justify-content:center;gap:16px;background:#f6f7f9}
.pdfview img{height:124px;width:auto;border-radius:3px;box-shadow:0 6px 14px -8px #0f1a2b88;background:#fff}
.printbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;background:#2455d6;color:#fff;font-size:13px;font-weight:750;transition:transform .15s ease,box-shadow .3s var(--ease)}
.printbtn .icon{width:16px;height:16px}
.cx.ph1 .printbtn{transform:scale(.94);box-shadow:0 0 0 6px #2455d62e}
.printer{position:relative;height:110px;background:#fff;display:flex;flex-direction:column;align-items:center}
.slot{width:78%;height:22px;border-radius:0 0 10px 10px;background:linear-gradient(#3a4252,#1f2531);box-shadow:inset 0 -3px 0 #0b0f16}
.paperout{width:44%;height:0;overflow:hidden;transition:height 1.3s var(--ease-io)}
.paperout img{display:block;width:100%;border-radius:0 0 3px 3px;box-shadow:0 6px 12px -8px #0f1a2b99}
.cx.ph2 .paperout{height:84px}

/* Marcas de impressora */
.brands{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:330px}
.brands li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:#fff;font-size:12.5px;font-weight:700;color:#0f1a2b;box-shadow:0 1px 2px #0f1a2b14;opacity:0;transform:scale(.9);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.brands li .icon{width:16px;height:16px;padding:2px;border-radius:50%;color:#fff}
.brands.yes li .icon{background:var(--good)}
.brands.no li .icon{background:var(--bad)}
.cx.ph3 .brands.yes li,.cx.ph4 .brands.no li{opacity:1;transform:none}
.brands li:nth-child(2){transition-delay:.08s}.brands li:nth-child(3){transition-delay:.16s}.brands li:nth-child(4){transition-delay:.24s}.brands li:nth-child(5){transition-delay:.32s}.brands li:nth-child(6){transition-delay:.4s}.brands li:nth-child(7){transition-delay:.48s}.brands li:nth-child(8){transition-delay:.56s}

/* Final: teste agora mesmo */
.cx-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 28px;border-radius:20px;color:#fff;
  background:radial-gradient(700px 260px at 50% 0%,#2f5fe0 0%,transparent 70%),linear-gradient(160deg,#0f213f,#0b1628);opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s}
.cx[data-scene=cta] .cx-side{opacity:0;transform:scale(.97);pointer-events:none}
.cx[data-scene=cta] .cx-final{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cx-final-kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fb0ff;margin-bottom:12px!important}
.cx-final h3{color:#fff!important;font-size:clamp(26px,3.2vw,40px);font-weight:850;letter-spacing:-.03em;line-height:1.12;max-width:640px}
.cx-final-list{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:10px;text-align:left}
.cx-final-list li{display:flex;align-items:center;gap:10px;font-size:16px;color:#dbe5f7}
.cx-final-list .icon{width:22px;height:22px;padding:4px;border-radius:50%;background:#17c38f;color:#0b1628}
.cx .cx-final-btn{background:#fff;color:#0f213f;min-height:60px;padding:0 32px;font-size:18px;font-weight:800;border:0;box-shadow:0 18px 40px -14px #000a}
.cx .cx-final-btn:hover{transform:translateY(-2px)}
.cx[data-scene=cta] .cx-final-btn{animation:cxBtn 2.4s ease-in-out .8s infinite}
@keyframes cxBtn{0%,100%{box-shadow:0 18px 40px -14px #000a,0 0 0 0 #ffffff55}50%{box-shadow:0 18px 40px -14px #000a,0 0 0 12px #ffffff00}}
.cx-final small{margin-top:12px;font-size:13px;color:#a9b8d4}
.cx[data-scene=cta] .cx-final>*{animation:cxEnter .6s var(--ease) both}
.cx[data-scene=cta] .cx-final>*:nth-child(2){animation-delay:.08s}.cx[data-scene=cta] .cx-final>*:nth-child(3){animation-delay:.16s}.cx[data-scene=cta] .cx-final>*:nth-child(4){animation-delay:.24s}.cx[data-scene=cta] .cx-final>*:nth-child(5){animation-delay:.32s}

.cx-replay{display:flex;align-items:center;gap:6px;margin:12px auto 0;background:none;border:0;color:var(--mut);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cx-replay .icon{width:16px;height:16px}

html[data-theme=dark] .cx{background:var(--card);--bad-soft:#35191a;--good-soft:#12302a}
html[data-theme=dark] .cx-side.bad{background:linear-gradient(180deg,#35191a,#2a1617)}
html[data-theme=dark] .cx-side.good{background:linear-gradient(180deg,#12302a,#10261f)}
html[data-theme=dark] .bad .cx-verdict{color:#ffb4ad}html[data-theme=dark] .good .cx-verdict{color:#9be6c9}
html[data-theme=dark] .cx-bars i{background:#ffffff1f}

@media(max-width:760px){
  .cx{padding:14px 10px 10px;border-radius:20px}
  .cx-tabs button{padding:8px 12px;font-size:13px}
  .cx-stage{gap:8px;min-height:560px}
  .cx-side{padding:12px 8px 10px;border-radius:16px}
  .cx-tag{font-size:10.5px;letter-spacing:.03em;gap:5px;text-align:center}
  .cx-dot{width:20px;height:20px}
  .cx-paper{width:100%;max-width:160px}
  .decl{font-size:4.6px;gap:1px;padding:6px 8px}.decl b{font-size:5.4px}
  .cx-cons li,.brands li{font-size:10.5px;padding:4px 8px}
  .cx-badge{font-size:10px;padding:4px 8px}
  .cx-stamp{font-size:12px;padding:7px 9px}
  .cx-verdict{font-size:12.5px;min-height:80px}
  .lotbox{padding:10px;border-radius:12px}.lot-head{gap:4px}.lot-head b{font-size:14px}.lot-head span{font-size:11px}.lot-dots i{width:7px;height:7px}
  .mini li{padding:7px;font-size:12px;gap:6px}.mini li .icon{width:15px;height:15px}
  .nums{gap:6px}.nums b{font-size:24px}.nums small{font-size:10.5px}
  .zpl{height:190px;font-size:9.5px;padding:8px}
  .win-alert{font-size:11px;padding:8px}
  .pdfview{height:120px;flex-direction:column;gap:8px}.pdfview img{height:78px}.printbtn{font-size:11px;padding:6px 9px}
  .printer{height:96px}
  .cx-final{padding:24px 16px}.cx-final-list li{font-size:14px}.cx .cx-final-btn{width:100%;font-size:16px;padding:0 18px}
}
@media(prefers-reduced-motion:reduce){.cx *,.cx *::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 3.0.39: logo no lado do SimpliDANFE e destaque do QR Code pequeno */
.cx-tag-logo{gap:10px}
.cx-tag-logo .sd-logo{display:inline-flex;height:26px}
.cx-tag-logo .sd-logo img{height:26px;width:161px;object-fit:contain}
.qr-ring{position:absolute;right:3%;bottom:2.5%;width:18%;aspect-ratio:1;border:3px solid var(--bad);border-radius:8px;opacity:0;transform:scale(1.4)}
.cx.ph3 .qr-ring{animation:cxRing 1.1s var(--ease) forwards}
@keyframes cxRing{0%{opacity:0;transform:scale(1.4)}60%{opacity:1;transform:scale(.95)}100%{opacity:1;transform:scale(1);box-shadow:0 0 0 6px #d1453b33}}
@media(max-width:760px){.cx-tag-logo .sd-logo,.cx-tag-logo .sd-logo img{height:18px}.cx-tag-logo .sd-logo img{width:111px}}