/* Trocabem · sistema "Etiqueta e canhoto". Tokens claro/escuro + componentes que a página de venda, o painel (/app/) e as páginas
   públicas (peça, extrato) compartilham. Tema: prefers-color-scheme ou data-tema="claro|escuro" na raiz (chave tb_tema). Ver DESIGN.md. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces.woff2) format("woff2-variations"),url(/fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-italico.woff2) format("woff2-variations"),url(/fonts/fraunces-italico.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans.woff2) format("woff2-variations"),url(/fonts/instrument-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600.woff2) format("woff2")}
:root{
  --bg:#faf6ef;--sup:#fffdf8;--sup2:#f3ecdf;--sup3:#ebe2d2;
  --ink:#2e2a22;--mut:#685e4f;--line:#e5dccd;--line2:#d2c4ad;
  --brand:#b5663f;--brand-ink:#99502b;--brand-deep:#7d3f20;--brand-soft:#f6e3d6;
  --sage:#4e6353;--sage-ink:#3f5444;--sage-soft:#e2eae1;--sage-deep:#2c3a30;
  --kraft:#d4b48a;--kraft2:#c49e6d;--kraft-ink:#4a3620;--fio:#8a7457;
  --ok:#3f6b4a;--ok-bg:#e3eee4;--warn:#8a5a0f;--warn-bg:#f8ecd2;--bad:#a2392a;--bad-bg:#f8e1dc;--info:#3e5d78;--info-bg:#e1eaf2;
  --focus:#b5663f;
  --on-sage:#fff;--on-brand:#fff;--av-brand:var(--brand-ink);--av-c:#7a5f45;--on-av-c:#fff;
  --band:#24302a;--band2:#1b241f;--band-ink:#f3ecdf;--band-mut:#b9c4b8;
  --f-disp:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --f-txt:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r1:10px;--r2:16px;--r3:24px;
  --sh1:0 1px 2px rgba(60,42,20,.06),0 2px 6px rgba(60,42,20,.05);
  --sh2:0 2px 4px rgba(60,42,20,.06),0 12px 28px -6px rgba(60,42,20,.16),0 30px 60px -24px rgba(60,42,20,.18);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* aliases do neg.css (portal e páginas públicas) */
  --n-cor:var(--brand-ink);--n-cor-t:#fff;--n-fundo:var(--bg);--n-tinta:var(--ink);--n-linha:var(--line2);--n-sec:var(--mut);--n-fonte:var(--f-txt);--n-titulo:var(--f-disp);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --bg:#16130e;--sup:#1f1b15;--sup2:#28231b;--sup3:#322b21;
  --ink:#f2eadc;--mut:#b7aa95;--line:#3a3227;--line2:#4b4133;
  --brand:#e08a5f;--brand-ink:#eda07a;--brand-deep:#f3b998;--brand-soft:#3a2418;
  --sage:#9db8a3;--sage-ink:#b3cbb8;--sage-soft:#1f2a22;--sage-deep:#cfe0d2;
  --kraft:#6f5434;--kraft2:#7a5d3b;--kraft-ink:#f8ecd9;--fio:#a88f6e;
  --ok:#8fc49c;--ok-bg:#1d2b21;--warn:#e7b763;--warn-bg:#33270f;--bad:#f0907e;--bad-bg:#3a1c16;--info:#9cbcd8;--info-bg:#1b2632;
  --focus:#eda07a;--band:#111813;--band2:#0c110e;
  --sh1:0 1px 2px rgba(0,0,0,.35);--sh2:0 2px 4px rgba(0,0,0,.3),0 16px 36px -8px rgba(0,0,0,.55);
  --on-sage:#1c241f;--on-brand:#1a120c;--av-brand:var(--brand);--av-c:#c9a984;--on-av-c:#1c1712;
  --on-sage:#1c241f;--on-brand:#1a120c;--av-brand:var(--brand);--av-c:#c9a984;--on-av-c:#1c1712;
  --n-cor-t:#1a120c;color-scheme:dark;
}}
:root[data-tema="escuro"]{
  --bg:#16130e;--sup:#1f1b15;--sup2:#28231b;--sup3:#322b21;
  --ink:#f2eadc;--mut:#b7aa95;--line:#3a3227;--line2:#4b4133;
  --brand:#e08a5f;--brand-ink:#eda07a;--brand-deep:#f3b998;--brand-soft:#3a2418;
  --sage:#9db8a3;--sage-ink:#b3cbb8;--sage-soft:#1f2a22;--sage-deep:#cfe0d2;
  --kraft:#6f5434;--kraft2:#7a5d3b;--kraft-ink:#f8ecd9;--fio:#a88f6e;
  --ok:#8fc49c;--ok-bg:#1d2b21;--warn:#e7b763;--warn-bg:#33270f;--bad:#f0907e;--bad-bg:#3a1c16;--info:#9cbcd8;--info-bg:#1b2632;
  --focus:#eda07a;--band:#111813;--band2:#0c110e;
  --sh1:0 1px 2px rgba(0,0,0,.35);--sh2:0 2px 4px rgba(0,0,0,.3),0 16px 36px -8px rgba(0,0,0,.55);
  --on-sage:#1c241f;--on-brand:#1a120c;--av-brand:var(--brand);--av-c:#c9a984;--on-av-c:#1c1712;
  --n-cor-t:#1a120c;color-scheme:dark;
}

/* ---------- marca ---------- */
.tb-marca{display:inline-flex;align-items:center;gap:10px;font:500 1.55rem/1 var(--f-disp);letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-variation-settings:"opsz" 96}
.tb-marca svg{width:30px;height:30px;flex:none}
.tb-setas .a{stroke:var(--brand)}.tb-setas .b{stroke:var(--sage)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;border:1px solid transparent;
  background:var(--brand-ink);color:#fff;font:600 15.5px/1 var(--f-txt);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px var(--brand-deep)}
.btn:hover{background:var(--brand-deep)}.btn:active{transform:translateY(1px)}
:root[data-tema="escuro"] .btn:not(.sec):not(.perigo):not(.sage){color:#1a120c}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .btn:not(.sec):not(.perigo):not(.sage){color:#1a120c}}
.btn.sec{background:var(--sup);color:var(--ink);border-color:var(--line2);box-shadow:var(--sh1)}
.btn.sec:hover{background:var(--sup2)}
.btn.sage{background:var(--sage);color:var(--on-sage)}
:root[data-tema="escuro"] .btn.sage{color:#10180f}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .btn.sage{color:#10180f}}
.btn.peq{min-height:38px;padding:0 13px;font-size:14px;border-radius:10px}
.btn.perigo{background:var(--sup);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);box-shadow:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ---------- etiqueta (hang tag) ---------- */
.etq{--w:200px;position:relative;width:var(--w);background:var(--kraft);color:var(--kraft-ink);border-radius:10px 10px 14px 14px;padding:34px 16px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 30px -14px rgba(60,40,15,.55);background-image:var(--grao),linear-gradient(160deg,var(--kraft),var(--kraft2));clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%)}
.etq::before{content:"";position:absolute;top:12px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--kraft-ink) 30%,transparent)}
.etq .cod{font:600 12px/1 var(--f-mono);letter-spacing:.08em}
.etq .tit{font:500 17px/1.2 var(--f-disp);margin:8px 0 4px}
.etq .meta{font:500 12px/1.35 var(--f-txt)}
.etq .pr{font:600 22px/1 var(--f-disp);margin-top:10px}
.etq .qr{background:#fffdf7;border-radius:6px;padding:6px;margin-top:10px;color:#1c1712}
.etq .qr svg{display:block;width:100%;height:auto}

/* ---------- canhoto (stub picotado do extrato) ---------- */
.canhoto{position:relative;background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh1)}
.canhoto::after{content:"";position:absolute;left:14px;right:14px;bottom:52px;border-top:2px dashed var(--line2)}
.picote{border:0;border-top:2px dashed var(--line2);margin:14px 0}

/* ---------- etiquetas pequenas ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font:600 12.5px/1.35 var(--f-txt);background:var(--sup3);color:var(--ink)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.aviso{background:var(--warn-bg);color:var(--warn)}.tag.nao{background:var(--bad-bg);color:var(--bad)}.tag.info{background:var(--info-bg);color:var(--info)}
.tag.nada::before{display:none}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num,.tab{font-variant-numeric:tabular-nums}
.costura{height:0;border-top:1.5px dashed color-mix(in srgb,var(--fio) 60%,transparent)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- carregando ---------- */
.skel{display:grid;gap:10px}.skel i{display:block;height:18px;border-radius:8px;background:linear-gradient(90deg,var(--sup2),var(--sup3),var(--sup2));background-size:200% 100%;animation:tbsk 1.2s ease-in-out infinite}
.skel i:nth-child(2){width:80%}.skel i:nth-child(3){width:60%}
@keyframes tbsk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}*{scroll-behavior:auto!important}}

/* botões pequenos também com 44 px de alvo de toque */
.btn.peq{min-height:44px}

/* alvo de toque de 44 px também nos links no meio do texto e nos rodapés, sem mudar a altura da linha */
:where(p, li, dd, td, footer, footer span, footer p) > a:not([class]){display:inline-flex;align-items:center;min-height:44px;margin-block:-13px}
a.marca, a.tb-marca{min-height:44px}