/* Demo: tu tienda vendiendo por WhatsApp (prefijo tn-). Colores de producto propios; el resto, variables del kit (dx). */
.dx[data-demo="tiendas"]{--tn-t:#c86a43;--tn-t2:#a9512f;--tn-n:#2d3249;--tn-n2:#1b1e30;--tn-a:#dcc4a1;--tn-a2:#c3a782;
  --tn-straw:#d6b080;--tn-straw2:#a87e4e;--tn-gold:#cf9f3a;--tn-wa:#25d366;--tn-wa-ink:#0b6b4a}
.dx[data-demo="tiendas"] [hidden]{display:none!important}

/* Productos (ilustraciones) */
.tn-art{display:block;width:100%;height:100%}
.tn-art .hk{fill:none;stroke:#8b7f74;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tn-dress .f1{fill:var(--tn-t)}.tn-dress .f2{fill:var(--tn-t2)}.tn-dress .f2.o{opacity:.5}
.tn-dress .hl{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:1.4;stroke-linecap:round}
.tn-dress.c-n .f1{fill:var(--tn-n)}.tn-dress.c-n .f2{fill:var(--tn-n2)}
.tn-dress.c-a .f1{fill:var(--tn-a)}.tn-dress.c-a .f2{fill:var(--tn-a2)}
.tn-bag .hd{fill:none;stroke:var(--tn-straw2);stroke-width:4;stroke-linecap:round}
.tn-bag .f1{fill:var(--tn-straw)}.tn-bag .f2{fill:var(--tn-straw2)}
.tn-bag .wv{stroke:var(--tn-straw2);stroke-opacity:.45;stroke-width:1.2}
.tn-bag .wv.d{stroke-dasharray:3.5 4.5;stroke-opacity:.38}
.tn-shirt .f1{fill:#f7f2ea;stroke:#d6cab9;stroke-width:1.2;stroke-linejoin:round}
.tn-shirt .f2{fill:#ece4d6;stroke:#d6cab9;stroke-width:1.2;stroke-linejoin:round}
.tn-shirt .ln{fill:none;stroke:#d6cab9;stroke-width:1.2}
.tn-shirt .bt{fill:#b39874}
.tn-earr .f1{fill:none;stroke:var(--tn-gold);stroke-width:5}
.tn-earr .hk2{stroke:#b08a35;stroke-width:2.2;stroke-linecap:round}
.tn-earr .gl{fill:#fff;opacity:.65}
.tn-img{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:12px;background:linear-gradient(160deg,#fbf2ea,#f0dccd);overflow:hidden}
.tn-img.sm{width:46px;height:46px;border-radius:11px}
.tn-img.xs{width:36px;height:36px;border-radius:9px}
.tn-img.xxs{width:26px;height:26px;border-radius:7px}
.tn-img svg{width:100%;height:100%}

/* Encabezados de tarjeta */
.tn-oh{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-width:0}
.tn-oh .dx-h5{display:flex;align-items:center;gap:6px;margin:0!important;white-space:nowrap}
.tn-oh .dx-h5 svg{width:15px;height:15px;color:var(--dx-acc-ink)}
.tn-oh .sp{flex:1}
.tn-minfo{display:grid;gap:1px;min-width:0}
.tn-minfo b{font-size:13px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-minfo span{font-size:11.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-swap > span{display:inline-flex;align-items:center;gap:6px}
.tn-swap .b{display:none}
.tn-swap.is-done .a{display:none}
.tn-swap.is-done .b{display:inline-flex}
.tn-swap.is-done{background:var(--dx-ok);box-shadow:0 8px 16px -10px rgba(19,122,70,.7)}
@keyframes tnIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tnNew{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tnCaret{50%{opacity:0}}

/* 1 y 2 · Bandeja de WhatsApp */
.tn-inbox{display:grid;grid-template-columns:192px minmax(0,1fr) 286px;gap:12px;height:504px;min-width:0}
.tn-list{display:flex;flex-direction:column;gap:2px;padding:10px;overflow:hidden}
.tn-search{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:10px;background:var(--dx-canvas);font-size:12px;color:var(--dx-ink-3)}
.tn-search svg{width:14px;height:14px}
.tn-filt{display:flex;gap:4px;margin:8px 0 6px}
.tn-filt span{padding:3px 8px;border-radius:99px;font-size:11px;font-weight:600;color:var(--dx-ink-3);background:var(--dx-canvas)}
.tn-filt .is-on{background:var(--dx-ink);color:#fff}
.tn-conv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 7px;border-radius:12px;transition:background-color .3s}
.tn-conv.is-on{background:var(--dx-peach);box-shadow:inset 3px 0 0 var(--dx-acc)}
.tn-conv.is-new{animation:tnNew .6s var(--spring) both}
.tn-cv{display:grid;gap:2px;min-width:0}
.tn-cv b{font-size:12.5px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-cv > [data-last]{font-size:11.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-cv > [data-ctag]{display:flex;min-width:0}
.tn-cv .dx-tag{justify-self:start;height:19px;margin-top:2px;padding:0 7px;font-size:10px}
.tn-cv .dx-tag svg{width:11px;height:11px}
.tn-ct{display:grid;justify-items:end;gap:5px;font-size:10.5px;color:var(--dx-ink-3);font-variant-numeric:tabular-nums}
.tn-ct i.tn-read{transform:scale(0);opacity:0}
.tn-ct i{transition:transform .35s var(--spring),opacity .3s;display:grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:var(--tn-wa);color:#fff;font-style:normal;font-size:10px;font-weight:700}
.tn-thread{display:flex;flex-direction:column;min-height:0;padding:0;overflow:hidden}
.tn-th-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--dx-line)}
.tn-who{display:grid;min-width:0}
.tn-who b{font-size:13px;color:var(--dx-ink)}
.tn-who span{font-size:11px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-th-top .sp{flex:1}
.tn-chat{flex:1;min-height:0;justify-content:flex-end;padding:12px;border-radius:0}
.tn-chat .dx-msg{max-width:80%}
.tn-compose{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--dx-line);background:#f6f3ef;font-size:12px;color:var(--dx-ink-3)}
.tn-compose > span{flex:1;display:flex;align-items:center;height:32px;padding:0 12px;border-radius:99px;background:#fff;border:1px solid var(--dx-line);white-space:nowrap;overflow:hidden}
.tn-compose > svg{width:17px;height:17px;flex:none}
.tn-compose i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tn-wa-ink);color:#fff;flex:none}
.tn-compose i svg{width:15px;height:15px}
.tn-day{align-self:center;margin-bottom:2px;padding:3px 10px;border-radius:7px;background:rgba(255,255,255,.92);box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:10.5px;font-weight:600;color:#54656f}
.tn-ref{align-self:center;display:flex;align-items:center;gap:8px;max-width:94%;margin-bottom:4px;padding:6px 12px 6px 6px;border-radius:12px;background:rgba(255,255,255,.88);box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:11px;color:#54656f}
.tn-ref > span:last-child{display:grid;min-width:0}
.tn-ref b{display:flex;align-items:center;gap:4px;font-size:11.5px;color:#111b21}
.tn-ref b svg{width:12px;height:12px;color:var(--dx-acc)}
.tn-pic{position:relative;display:block;width:128px;height:128px;margin:-2px -5px 6px;border-radius:7px;overflow:hidden;background:linear-gradient(160deg,#fbe9dd,#eecbb5)}
.tn-pic svg{width:100%;height:100%}
.tn-pic em{position:absolute;left:7px;bottom:6px;padding:2px 6px;border-radius:4px;background:rgba(18,22,51,.78);color:#fff;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.16em}
.tn-ia{display:inline-block;margin-right:4px;padding:0 4px;border-radius:4px;background:var(--dx-peach-2);color:var(--dx-acc-ink);font-size:9px;font-weight:700;letter-spacing:.04em}
.dx[data-demo="tiendas"] .dx-msg.out small::after{content:" ✓✓";color:#53bdeb;letter-spacing:-.12em}
.tn-mini-prod{display:flex;align-items:center;gap:8px;margin:-1px -4px 6px;padding:5px 8px 5px 5px;border-radius:7px;background:rgba(255,255,255,.6)}
.tn-mini-prod > span:last-child{display:grid}
.tn-mini-prod b{font-size:11.5px}
.tn-mini-prod b + span{font-size:11px;color:#54656f}
.tn-side{display:grid;gap:10px;align-content:start;min-width:0}
.tn-mtop{display:flex;gap:10px;align-items:center}
.tn-scanbox{width:64px;height:64px}
.tn-scan{position:absolute;left:0;right:0;top:-34%;height:34%;background:linear-gradient(180deg,rgba(229,97,45,0),rgba(229,97,45,.4),rgba(229,97,45,0));opacity:0;pointer-events:none}
.tn-scanbox.is-in .tn-scan{animation:tnScan 1.1s var(--ease-io) 2 both}
@keyframes tnScan{0%{opacity:0;transform:translateY(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(400%)}}
.tn-corners{--c:var(--dx-acc);position:absolute;inset:5px;opacity:0;transform:scale(1.18);transition:opacity .4s,transform .5s var(--spring);background:
  linear-gradient(var(--c),var(--c)) 0 0/11px 2px,linear-gradient(var(--c),var(--c)) 0 0/2px 11px,
  linear-gradient(var(--c),var(--c)) 100% 0/11px 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px 11px,
  linear-gradient(var(--c),var(--c)) 0 100%/11px 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px 11px,
  linear-gradient(var(--c),var(--c)) 100% 100%/11px 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px 11px;background-repeat:no-repeat}
.tn-scanbox.is-in .tn-corners{opacity:1;transform:none}
.tn-match{transition:opacity .45s var(--ease),transform .55s var(--spring)}
.js-motion .tn-match:not(.is-up){opacity:0;transform:translateY(12px) scale(.98)}
.tn-match .tn-minfo{transition:opacity .45s,filter .45s}
.tn-match:not(.is-in) .tn-minfo{opacity:.3;filter:blur(3px)}
.tn-price{font-size:15px!important;letter-spacing:-.01em}
.tn-stock{display:grid;gap:3px;margin-top:10px;padding:8px;border-radius:12px;background:var(--dx-canvas)}
.tn-srow{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(4,minmax(0,1fr));align-items:center;gap:3px;font-size:12px;text-align:center;opacity:.3;transition:opacity .35s}
.tn-srow.th,.tn-srow.is-in{opacity:1}
.tn-srow > span{padding:4px 0;border-radius:7px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dx-ink);transition:background-color .35s,color .35s,box-shadow .35s}
.tn-srow > span:first-child{display:flex;align-items:center;gap:6px;padding-left:4px;font-weight:500;text-align:left;color:var(--dx-ink-2);white-space:nowrap;overflow:hidden}
.tn-srow.th > span{padding:2px 0;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dx-ink-3)}
.tn-srow .z{color:var(--dx-bad);font-weight:500;opacity:.75}
.tn-stock.is-m .is-m{background:var(--dx-peach-2)}
.tn-stock.is-m .th .is-m{background:var(--dx-acc);color:#fff}
.tn-stock.is-m .is-pick{background:var(--dx-acc);color:#fff;box-shadow:0 0 0 3px rgba(229,97,45,.22)}
.tn-sw{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.tn-sw.c-t{background:var(--tn-t)}.tn-sw.c-n{background:var(--tn-n)}.tn-sw.c-a{background:var(--tn-a)}
.tn-sync{display:flex;align-items:center;gap:5px;margin:8px 0 0;font-size:11px;color:var(--dx-ink-3)}
.tn-sync svg{width:12px;height:12px;color:var(--dx-ok)}
.tn-upsell .dx-row{gap:10px}
.tn-upsell p{font-size:12px!important;color:var(--dx-ink-2)!important}
.tn-order.is-in,.tn-log.is-in{animation:tnIn .5s var(--spring) both}
.tn-log ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.tn-log li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px;color:var(--dx-ink-3);opacity:.45;transition:opacity .35s,color .35s}
.tn-log li i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--dx-canvas);color:var(--dx-ink-3);transition:background-color .35s,color .35s}
.tn-log li i svg{width:12px;height:12px}
.tn-log li time{font-size:10.5px;font-variant-numeric:tabular-nums}
.tn-log li.is-done{opacity:1;color:var(--dx-ink-2)}
.tn-log li.is-done i{background:var(--dx-peach);color:var(--dx-acc-ink)}
.tn-log li.is-new{animation:tnIn .45s var(--spring) both}
.tn-log .dx-muted{font-size:11px}
/* La foto vuela del chat al buscador del catálogo */
.tn-ghost{position:absolute;z-index:5;margin:0!important;transform-origin:0 0;pointer-events:none;box-shadow:0 18px 30px -16px rgba(0,6,42,.45)}
.tn-lines{display:grid;gap:8px}
.tn-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;opacity:.25;transform:translateX(10px);transition:opacity .4s,transform .5s var(--spring)}
.tn-line.is-in{opacity:1;transform:none}
.tn-line > b{font-size:12.5px;color:var(--dx-ink)}
.tn-tot{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--dx-line-2);font-size:12px}
.tn-tot span{color:var(--dx-ink-3)}
.tn-tot b{text-align:right;color:var(--dx-ink)}
.tn-tot .ok{color:var(--dx-ok)}
.tn-tot .t{margin-top:2px;font-size:14px;font-weight:700;color:var(--dx-ink)}
.tn-pay{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.tn-opt{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:10px;border:1px solid var(--dx-line-2);font-size:12px;font-weight:600;color:var(--dx-ink-2);transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.tn-opt svg{width:14px;height:14px}
.tn-opt.is-on{border-color:var(--dx-acc);background:var(--dx-peach);color:var(--dx-acc-ink);box-shadow:0 0 0 3px rgba(229,97,45,.14)}
.tn-note{display:flex;gap:6px;margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--dx-ok)}
.tn-note svg{width:14px;height:14px;flex:none;margin-top:1px}
.tn-ob{display:grid;gap:3px;min-width:196px}
.tn-ob-h{display:flex;align-items:center;gap:5px;margin-bottom:2px;font-size:12px}
.tn-ob-h svg{width:13px;height:13px}
.tn-ob-r{display:flex;justify-content:space-between;gap:12px;font-size:11.5px}
.tn-ob-r b{font-weight:600}
.tn-ob-r .ok{color:var(--tn-wa-ink)}
.tn-ob-r.t{padding-top:4px;border-top:1px solid rgba(0,0,0,.08);font-size:12px;font-weight:700}
.tn-ob-q{margin:4px 0 2px;font-size:11.5px}
.tn-ob-o{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 -9px;padding:6px;border-top:1px solid rgba(0,0,0,.07);font-size:12px;font-weight:600;color:var(--tn-wa-ink);transition:background-color .3s}
.tn-ob-o svg{width:13px;height:13px}
.tn-ob-o.is-on{background:rgba(37,211,102,.2)}
.tn-ob-o.is-on::after{content:"✓";margin-left:4px}

/* 3 · Pedidos y contra entrega */
.tn-orders{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:12px;align-items:start;min-width:0}
.tn-kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.tn-col{min-height:494px;padding:8px}
.tn-col > p{gap:6px}
.tn-col .tn-n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#fff;border:1px solid var(--dx-line);color:var(--dx-ink-2)}
.tn-cards{display:grid;gap:8px;align-content:start}
.tn-ord{gap:4px;padding:9px 10px}
.tn-ord .dx-row b{font-size:12.5px}
.tn-city{font-size:10.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-who2{display:flex;align-items:center;gap:7px;min-width:0}
.tn-thumbs{display:flex;flex:none}
.tn-thumbs .tn-img{width:24px;height:24px;border-radius:7px;box-shadow:0 0 0 2px #fff}
.tn-thumbs .tn-img + .tn-img{margin-left:-7px}
.tn-more{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--dx-ink-3);text-align:center}
.tn-more .tn-mo{display:none}
.tn-ch{display:grid;color:var(--dx-ink-3)}
.tn-ch svg{width:13px;height:13px}
.tn-on{font-size:12px;color:var(--dx-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-orow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 6px}
.tn-orow > b{font-size:12.5px;color:var(--dx-ink)}
.tn-orow .dx-tag{height:20px;padding:0 7px;font-size:10.5px}
.tn-ord.is-new{animation:tnNew .6s var(--spring) both}
.tn-ord.is-hot{border-color:var(--peach-200);box-shadow:0 0 0 3px rgba(229,97,45,.14)}
.tn-ord.is-done{border-color:#bfe3cd;box-shadow:0 0 0 3px rgba(19,122,70,.12)}
.tn-cod{display:grid;gap:8px}
.tn-cod .tn-oh{margin-bottom:0}
.tn-codsub{margin:-4px 0 0;font-size:11.5px;color:var(--dx-ink-3)}
.tn-mini{min-height:112px;padding:8px;gap:5px;justify-content:flex-end}
.tn-mini .dx-msg{max-width:94%;font-size:11.5px}
.tn-checks{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.tn-checks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:center;padding:5px 8px;border-radius:10px;background:var(--dx-canvas);opacity:.45;transition:opacity .35s,background-color .35s}
.tn-checks li i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;color:var(--dx-ink-3);transition:background-color .35s,color .35s}
.tn-checks li i svg{width:14px;height:14px}
.tn-checks b{display:block;font-size:12px;color:var(--dx-ink)}
.tn-checks span span{display:block;font-size:11.3px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-checks li.is-done{opacity:1;background:var(--dx-ok-bg)}
.tn-checks li.is-done i{background:var(--dx-ok);color:#fff}
.tn-checks mark{padding:0 2px;border-radius:4px;background:transparent;color:inherit;transition:background-color .4s}
.tn-checks li.is-done mark{background:#ffe7a8;color:var(--dx-ink)}
.tn-inv{display:grid;gap:5px;opacity:.45;transition:opacity .35s}
.tn-inv.is-in{opacity:1}
.tn-sub{display:flex;align-items:center;gap:5px;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dx-ink-3)}
.tn-sub svg{width:12px;height:12px}
.tn-invrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px;color:var(--dx-ink-2)}
.tn-invrow > span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-invrow b{display:flex;align-items:center;gap:5px;font-size:12.5px}
.tn-invrow s{color:var(--dx-ink-3);font-weight:500}
.tn-invrow i{font-style:normal;color:var(--dx-ink-3)}
.tn-invrow em{min-width:10px;font-style:normal;color:var(--dx-acc-ink)}
.tn-guide{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:var(--dx-ok-bg);border:1px solid #cdebd9}
.tn-guide > span:nth-child(2){flex:1;display:grid;min-width:0}
.tn-guide b{font-size:12.5px;color:var(--dx-ok);font-variant-numeric:tabular-nums}
.tn-guide > span:nth-child(2) > span{font-size:11px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-guide .dx-btn{height:28px;padding:0 10px;font-size:11.5px}

/* 4 · Carritos abandonados */
.tn-cleft{display:grid;gap:12px;min-width:0}
.tn-rules{display:grid;gap:2px}
.tn-rules .tn-oh{margin-bottom:4px}
.tn-rule{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--dx-line);font-size:12px;color:var(--dx-ink-2)}
.tn-rule:first-of-type{border-top:0}
.tn-tg{position:relative;flex:none;width:30px;height:17px;border-radius:99px;background:var(--dx-line-2)}
.tn-tg::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tn-tg.on{background:var(--dx-ok)}
.tn-tg.on::after{left:15px}
.tn-kpis .dx-kpi b{font-size:20px}
.tn-carts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:12px;align-items:start}
.tn-ctable{--cols:minmax(0,1fr) auto}
.tn-cart{min-height:52px}
.tn-cc{display:grid!important;gap:1px}
.tn-cc b{font-size:12.5px;color:var(--dx-ink)}
.tn-cc span{display:block;font-size:11.5px;color:var(--dx-ink-3);overflow:hidden;text-overflow:ellipsis}
.tn-cv2{display:grid!important;justify-items:end;gap:3px}
.tn-cv2 b{font-size:12.5px;color:var(--dx-ink)}
.tn-cv2 .dx-tag{height:20px;padding:0 7px;font-size:10.5px}
.tn-cart.is-hot{box-shadow:inset 3px 0 0 var(--dx-acc)}
.tn-cart.is-ok{box-shadow:inset 3px 0 0 var(--dx-ok)}
.tn-draft p.tn-why{font-size:12px;color:var(--dx-ink-2)}
.tn-cline{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;background:var(--dx-canvas)}
.tn-cline .tn-minfo{flex:1}
.tn-pr{display:grid;justify-items:end;grid-template-columns:auto auto;align-items:center;gap:0 6px}
.tn-pr em{grid-row:1/3;padding:2px 6px;border-radius:99px;background:var(--dx-warn-bg);color:var(--dx-warn);font-style:normal;font-size:10.5px;font-weight:700;opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s var(--spring)}
.tn-pr s{font-size:11px;color:var(--dx-ink-3);max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s}
.tn-pr b{font-size:13.5px;color:var(--dx-ink)}
.tn-cline.is-in .tn-pr em{opacity:1;transform:none}
.tn-cline.is-in .tn-pr s{max-height:16px;opacity:1}
.tn-cline.is-in .tn-pr b{color:var(--dx-acc-ink)}
.tn-draft .acts{padding-top:12px;border-top:1px dashed var(--dx-line-2)}
/* en el computador, «Tu turno» va debajo del botón para no tapar el código y el vencimiento del descuento
   (en el celular cabe encima: .acts tiene más aire arriba) */
@media (min-width:761px){.tn-draft .dx-btn.dx-hint::after{bottom:auto;top:calc(100% + 8px)}}
.tn-why b{color:var(--dx-ink)}
.tn-bubble{padding:8px 10px 6px;border-radius:10px 10px 10px 3px;background:#d9fdd3;font-size:12.3px;line-height:1.42;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.tn-bubble > span{display:block;min-height:70px}
.tn-bubble small{display:block;margin-top:3px;font-size:10px;color:#667781;text-align:right}
.tn-bubble .is-typing::after{content:"";display:inline-block;width:2px;height:13px;margin-left:1px;background:var(--dx-acc);vertical-align:-2px;animation:tnCaret 1s steps(1) infinite}
.tn-disc{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:12px;background:var(--dx-warn-bg);font-size:12px;opacity:.35;transition:opacity .4s}
.tn-disc.is-in{opacity:1}
.tn-disc > svg{width:17px;height:17px;flex:none;color:var(--dx-warn)}
.tn-disc > span:nth-child(2){flex:1;display:grid;min-width:0}
.tn-disc b{color:var(--dx-ink)}
.tn-disc > span:nth-child(2) > span{font-size:11px;color:var(--dx-ink-3)}
.tn-disc .dx-tag{background:#fff}
.tn-sent{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600;color:var(--dx-ok)}
.tn-sent svg{width:16px;height:16px;flex:none}
.tn-sent.is-in{animation:tnIn .45s var(--spring) both}

/* 5 · Catálogo: foto y ficha */
.tn-cat{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
.tn-ba{position:relative;height:246px;border-radius:12px;overflow:hidden;isolation:isolate}
.tn-ba-a,.tn-ba-b{position:absolute;inset:0;display:grid;place-items:center}
.tn-ba-a{background:linear-gradient(115deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 55%),linear-gradient(180deg,#b9ae98,#8f8677);box-shadow:inset 0 0 70px rgba(0,0,0,.42)}
.tn-ba-a .tn-art{width:66%;height:auto;transform:rotate(-5deg) translate(4%,4%);filter:saturate(.45) brightness(.8) contrast(.92)}
.tn-clutter{position:absolute;left:6%;top:8%;width:20%;height:70%;border-radius:12px 12px 4px 4px;background:#6f6a62;opacity:.35}
.tn-clutter.b{left:auto;right:4%;top:66%;width:22%;height:26%;border-radius:6px;background:#b1a697;opacity:.5}
.tn-ba-b{background:radial-gradient(120% 90% at 50% 32%,#fffaf5,#f2e1d3);clip-path:inset(0 0 0 100%);transition:clip-path 1.3s var(--ease)}
.tn-ba-b .tn-art{width:66%;height:auto;filter:drop-shadow(0 12px 12px rgba(120,80,50,.22))}
.tn-floor{position:absolute;left:18%;right:18%;bottom:7%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,100,60,.25),transparent)}
.tn-ba.is-in .tn-ba-b{clip-path:inset(0 0 0 0)}
.tn-ba.is-split .tn-ba-b{clip-path:inset(0 0 0 50%)}
.tn-ba-line{position:absolute;top:0;bottom:0;left:100%;z-index:2;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.25);transition:left 1.3s var(--ease)}
.tn-ba.is-in .tn-ba-line{left:0}
.tn-ba.is-split .tn-ba-line{left:50%}
.tn-ba-line b{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;color:var(--dx-acc-ink);box-shadow:0 4px 12px rgba(0,6,42,.25)}
.tn-ba-line b svg{width:14px;height:14px;transform:rotate(90deg)}
.tn-ba-l,.tn-ba-r{position:absolute;top:8px;z-index:3;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:600}
.tn-ba-l{left:8px;background:rgba(18,22,51,.72);color:#fff}
.tn-ba-r{right:8px;background:#fff;color:var(--dx-acc-ink);opacity:0;transition:opacity .4s .7s}
.tn-ba.is-in .tn-ba-r{opacity:1}
.tn-vars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.tn-var{display:grid;gap:4px;justify-items:center;font-size:11px;color:var(--dx-ink-3);opacity:.3;transform:translateY(6px);transition:opacity .4s,transform .5s var(--spring)}
.tn-var.is-in{opacity:1;transform:none}
.tn-img.sq{width:100%;height:auto;aspect-ratio:1.3;border-radius:10px}
.tn-img.sq svg{width:62%;height:auto}
.tn-img.st{background:radial-gradient(#fffaf5,#f1e1d4)}
.tn-img.sc{background:linear-gradient(180deg,#f7e1cc 0 64%,#c9a57f 64%)}
.tn-img.ad{background:var(--grad)}
.tn-img.ad::after{content:"NUEVO";position:absolute;left:6px;top:6px;padding:1px 5px;border-radius:99px;background:#fff;color:var(--dx-acc-ink);font-size:7.5px;font-weight:700;letter-spacing:.08em}
.tn-keep{display:grid;gap:5px;margin:10px 0 0;padding:0;list-style:none;font-size:12px;color:var(--dx-ink-2)}
.tn-keep li{display:flex;align-items:center;gap:6px}
.tn-keep svg{width:14px;height:14px;flex:none;color:var(--dx-ok)}
.tn-sheet{display:grid;gap:9px}
.tn-sheet .tn-oh{margin-bottom:0}
.tn-src{padding:8px 10px;border-radius:10px;background:var(--dx-canvas);border:1px dashed var(--dx-line-2)}
.tn-src > span,.tn-field > span,.tn-seo > span:first-child{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dx-ink-3)}
.tn-src p{margin:2px 0 0;font-family:inherit;font-style:italic;font-size:11.5px;color:var(--dx-ink-2);transition:color .4s}
.tn-src.is-old p{color:var(--dx-ink-3);text-decoration:line-through;text-decoration-color:rgba(180,35,24,.45)}
.tn-field{display:grid;gap:3px;padding:8px 10px;border-radius:10px;border:1px solid var(--dx-line);transition:border-color .4s,box-shadow .4s}
.tn-field.is-in{border-color:var(--peach-200);box-shadow:0 0 0 3px rgba(229,97,45,.1)}
.tn-field b{min-height:19px;font-size:14px;color:var(--dx-ink)}
.tn-field p{min-height:54px;margin:0;font-size:12.3px;line-height:1.45;color:var(--dx-ink-2)}
.tn-field .is-typing::after{content:"";display:inline-block;width:2px;height:13px;margin-left:1px;background:var(--dx-acc);vertical-align:-2px;animation:tnCaret 1s steps(1) infinite}
.tn-attrs{display:flex;flex-wrap:wrap;gap:6px}
.tn-attr{display:inline-flex;gap:4px;padding:4px 9px;border-radius:99px;background:var(--dx-peach);font-size:11.5px;font-weight:600;color:var(--dx-acc-ink);opacity:.3;transform:scale(.94);transition:opacity .35s,transform .4s var(--spring)}
.tn-attr span{font-weight:500;color:var(--dx-ink-3)}
.tn-attr.is-in{opacity:1;transform:none}
.tn-varg{display:grid;gap:5px}
.tn-varg p{display:flex;justify-content:space-between;gap:8px;margin:0}
.tn-varg p span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dx-ink-3)}
.tn-varg p b{font-size:11.5px;color:var(--dx-ink-2)}
.tn-vrow{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:5px;align-items:center}
.tn-vrow > span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dx-ink-2)}
.tn-vc{display:flex;align-items:baseline;justify-content:center;gap:4px;height:26px;padding-top:5px;border-radius:8px;background:#fff;border:1px solid var(--dx-line);font-size:12px;color:var(--dx-ink);font-variant-numeric:tabular-nums;opacity:.3;transform:translateY(4px);transition:opacity .35s,transform .45s var(--spring),border-color .35s}
.tn-vc span{font-size:10px;font-weight:600;color:var(--dx-ink-3)}
.tn-vc.is-in{opacity:1;transform:none;border-color:var(--peach-200)}
.tn-sw.c-w{background:#f7f2ea}
.tn-seo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center}
.tn-seo b{font-size:11.5px;color:var(--dx-ok)}
.tn-seo .dx-bar-p{grid-column:1/-1;height:6px}
.tn-seo .dx-bar-p i{background:var(--dx-ok)}
.tn-pub{flex-wrap:wrap}

/* 6 · Tablero */
.tn-dash{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.tn-chcard .tn-oh,.tn-best .tn-oh{margin-bottom:4px}
.tn-bars{margin-top:4px}
.tn-bars .vl{font-size:11px}
.tn-top{display:grid;gap:12px;margin:8px 0 0;padding:0;list-style:none}
.tn-top li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.tn-tp{display:grid;gap:6px;min-width:0}
.tn-tp b{font-size:12.5px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-tp .dx-num{flex:none;font-size:11.5px;color:var(--dx-ink-3)}
.tn-tp .dx-bar-p{height:6px}
.tn-k6 .dx-kpi{position:relative;overflow:hidden}
.tn-k6 .dx-kpi > span,.tn-k6 .dx-kpi > em{padding-right:64px}
.tn-spark{position:absolute;right:12px;top:14px;width:64px;height:26px;overflow:visible}
.tn-spark polyline{fill:none;stroke:var(--dx-ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110;transition:stroke-dashoffset 1.3s var(--ease)}
.tn-spark polygon{fill:var(--dx-ok);opacity:0;transition:opacity .6s .7s}
.tn-spark circle{fill:var(--dx-ok);opacity:0;transition:opacity .3s 1.1s}
.tn-k6.is-in .tn-spark polyline{stroke-dashoffset:0}
.tn-k6.is-in .tn-spark polygon{opacity:.1}
.tn-k6.is-in .tn-spark circle{opacity:1}
.tn-tip{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px}
.tn-tipdone{display:none;align-items:center;gap:8px;margin:0}
.tn-tipdone svg{width:20px;height:20px;flex:none;color:var(--dx-ok)}
.tn-tipdone b{display:block;font-size:12.5px;color:var(--dx-ok)}
.tn-tipdone span{font-size:11.5px;color:var(--dx-ink-3)}
.tn-tip.is-done .acts{display:none}
.tn-tip.is-done .tn-tipdone{display:flex;animation:tnIn .45s var(--spring) both}
.tn-tip .who{grid-column:1/-1}
.tn-tip.is-done{background:linear-gradient(var(--dx-ok-bg),var(--dx-ok-bg)) padding-box,linear-gradient(var(--dx-ok),var(--dx-ok)) border-box;box-shadow:none}

/* Tableta y ventanas medianas: menos columnas para que nada quede apretado */
@media (max-width:1180px){
  .tn-spark{display:none}
  .tn-k6 .dx-kpi > span,.tn-k6 .dx-kpi > em{padding-right:0}
  .tn-thumbs{display:none}
}
@media (min-width:761px) and (max-width:1100px){
  .tn-inbox{grid-template-columns:minmax(0,1fr) 270px}
  .tn-list{display:none}
}
@media (min-width:761px) and (max-width:920px){
  .tn-orders{grid-template-columns:minmax(0,1fr)}
  .tn-col{min-height:0}
  .tn-city{display:none}
}
@media (max-width:760px){
  .tn-inbox{grid-template-columns:minmax(0,1fr);height:auto}
  .tn-thread{height:318px}
  .tn-chat{padding:10px}
  .tn-chat .dx-msg{max-width:86%}
  .tn-th-top .dx-tag{height:20px;padding:0 7px;font-size:10px}
  .tn-orders{grid-template-columns:minmax(0,1fr)}
  .tn-kb{gap:6px}
  .tn-col{min-height:0;padding:6px;gap:6px}
  .tn-col > p{min-height:30px;font-size:10.5px;line-height:1.2}
  .tn-ord{gap:3px;padding:7px}
  .tn-ord .dx-row b,.tn-orow > b{font-size:11.5px}
  .tn-on{font-size:11px}
  .tn-orow .dx-tag{height:18px;padding:0 5px;font-size:9.5px}
  .tn-city,.tn-thumbs,.tn-spark{display:none}
  .tn-k6 .dx-kpi > span,.tn-k6 .dx-kpi > em{padding-right:0}
  .tn-k6 .dx-kpi b{font-size:18px}
  .tn-more .tn-mo{display:inline}
  .tn-more{font-size:10.5px}
  .tn-mini{min-height:0}
  .tn-carts{grid-template-columns:minmax(0,1fr)}
  .tn-draft .acts{padding-top:20px}
  .tn-kpis .dx-kpi b{font-size:17px}
  .tn-cat{grid-template-columns:minmax(0,1fr)}
  .tn-ba{height:190px}
  .tn-dash{grid-template-columns:minmax(0,1fr)}
  /* el SVG se reduce al ~70 %: rótulos más grandes para que se lean (a 17 px «Tienda en línea» invadiría «WhatsApp») */
  .tn-bars .lb{font-size:15px}
  .tn-bars .vl{font-size:16px}
  .tn-tip{grid-template-columns:minmax(0,1fr)}
}