/* Carrito lateral de las demos. Toma los colores y fuentes de cada demo (--accent, --ink, --bg, --card…). */
.kc-fab{position:fixed;right:18px;bottom:150px;z-index:45;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);color:var(--on-accent,#fff);display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:transform .2s}
.kc-fab:hover{transform:scale(1.06)}
.kc-fab .kc-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#D92D20;color:#fff;font:700 12px/22px "Inter",system-ui,sans-serif;text-align:center;display:none}
.kc-fab.tiene .kc-count{display:block}
.kc-fab.pulse{animation:kc-pulse .5s ease}
@keyframes kc-pulse{40%{transform:scale(1.18)}}
[data-cart-count]:empty{display:none}
[data-cart-count]{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#D92D20;color:#fff;font:700 12px "Inter",sans-serif;margin-left:4px}

.kc-overlay{position:fixed;inset:0;background:rgba(10,10,10,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.kc-panel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--bg,#fff);color:var(--ink,#111);z-index:91;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px -20px rgba(0,0,0,.45);font-family:var(--body,system-ui);outline:none}
body.kc-abierto{overflow:hidden}
body.kc-abierto .kc-overlay{opacity:1;pointer-events:auto}
body.kc-abierto .kc-panel{transform:none}
body.kc-abierto .kc-toast{left:auto;right:16px;transform:translateY(160%)}
body.kc-abierto .kc-toast.on{transform:none}
body.kc-abierto .demo-bar,body.kc-abierto .wa,body.kc-abierto .kc-fab{visibility:hidden}

.kc-head{padding:16px 18px 12px;border-bottom:1px solid var(--line,rgba(127,127,127,.25))}
.kc-top{display:flex;align-items:center;gap:10px}
.kc-top h2{flex:1;margin:0;font:700 20px var(--display,system-ui);letter-spacing:-.01em}
.kc-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:transparent;border:1px solid var(--line,rgba(127,127,127,.3));color:inherit;cursor:pointer}
.kc-bagicon{border:0;background:var(--soft,rgba(127,127,127,.15));color:var(--accent-text,var(--accent))}
.kc-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:6px}
.kc-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;opacity:.55;text-transform:uppercase;letter-spacing:.04em;position:relative}
.kc-steps li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;font-size:12px}
.kc-steps li.on,.kc-steps li.done{opacity:1}
.kc-steps li.on span{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.kc-steps li.done span{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.kc-body{flex:1;display:flex;flex-direction:column;min-height:0}
.kc-list{list-style:none;margin:0;padding:8px 18px;overflow-y:auto;flex:1}
.kc-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line,rgba(127,127,127,.2));align-items:start}
.kc-item img,.kc-noimg{width:72px;height:72px;border-radius:12px;object-fit:cover;background:var(--soft,#eee);display:block}
.kc-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.kc-info b{font-size:15px;line-height:1.25}
.kc-info small{opacity:.65;font-size:13px}
.kc-price{font-size:13px;opacity:.75}
.kc-qty{display:inline-flex;align-items:center;margin-top:6px;border:1px solid var(--line,rgba(127,127,127,.35));border-radius:999px;align-self:flex-start}
.kc-qty button{width:34px;height:34px;border:0;background:transparent;color:inherit;font-size:18px;cursor:pointer;border-radius:999px}
.kc-qty button:hover{background:var(--soft,rgba(127,127,127,.15))}
.kc-qty span{min-width:26px;text-align:center;font-weight:700}
.kc-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kc-del{border:0;background:transparent;color:inherit;opacity:.5;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:8px}
.kc-del:hover{opacity:1;color:#D92D20}

.kc-foot{padding:14px 18px 18px;border-top:1px solid var(--line,rgba(127,127,127,.25));display:flex;flex-direction:column;gap:10px;background:var(--card,transparent)}
.kc-sum{display:flex;flex-direction:column;gap:6px}
.kc-row{display:flex;justify-content:space-between;font-size:15px}
.kc-total{font-size:18px;padding-top:6px;border-top:1px dashed var(--line,rgba(127,127,127,.35));margin-top:2px}
.kc-total b{font-family:var(--display,system-ui)}
.kc-free{color:#12805C}
.kc-progress p{margin:0 0 6px;font-size:13px}
.kc-bar{height:6px;border-radius:999px;background:var(--soft,rgba(127,127,127,.2));overflow:hidden}
.kc-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.kc-note{font-size:12.5px;opacity:.7;margin:2px 0 0}
.kc-warn,.kc-err{font-size:13px;color:#D92D20;margin:0;font-weight:600}
.kc-err:empty{display:none}
.kc-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 18px;border-radius:12px;border:2px solid var(--line,rgba(127,127,127,.4));background:transparent;color:inherit;font:600 16px var(--body,system-ui);cursor:pointer;text-decoration:none;width:100%}
.kc-btn-p{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.kc-btn:disabled{opacity:.45;cursor:not-allowed}
.kc-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;opacity:.6;margin:0}

.kc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 24px;text-align:center}
.kc-emptyic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--soft,rgba(127,127,127,.15));color:var(--accent-text,var(--accent))}

.kc-form{padding:18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.kc-form h3{margin:0 0 4px;font:700 18px var(--display,system-ui)}
.kc-field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.kc-field input,.kc-field select,.kc-field textarea,.kc-select{font:400 16px var(--body,system-ui);padding:11px 12px;border:1px solid rgba(127,127,127,.4);border-radius:10px;background:#fff;color:#111;min-height:46px;width:100%}
.kc-field textarea{min-height:64px;resize:vertical}
.kc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kc-options{display:grid;gap:8px}
.kc-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:2px solid var(--line,rgba(127,127,127,.3));border-radius:12px;background:var(--card,transparent);color:inherit;cursor:pointer;font:inherit}
.kc-opt span{display:flex;flex-direction:column}
.kc-opt small{opacity:.65;font-size:13px}
.kc-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.kc-radio{width:20px;height:20px;border-radius:50%;border:2px solid currentColor;flex:none;opacity:.5}
.kc-opt.on .kc-radio{opacity:1;border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 45%,transparent 50%)}
.kc-qr{display:flex;gap:14px;align-items:center;padding:14px;border-radius:12px;background:var(--soft,rgba(127,127,127,.12))}
.kc-qr small{display:block;opacity:.7;font-size:12.5px}
.kc-qrbox{width:84px;height:84px;flex:none;border-radius:8px;background:
  conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/14px 14px;border:6px solid #fff;outline:1px solid rgba(0,0,0,.15)}
.kc-cardform{display:flex;flex-direction:column;gap:10px}

.kc-done{padding:22px 18px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.kc-doneic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#12805C;color:#fff;animation:kc-pop .4s ease}
@keyframes kc-pop{0%{transform:scale(.5);opacity:0}}
.kc-done h3{margin:0;font:700 24px var(--display,system-ui)}
.kc-wa{width:100%;text-align:left;background:#E9F2E5;color:#111;border-radius:14px;padding:12px;font-family:"Inter",system-ui,sans-serif}
.kc-wahead{display:flex;align-items:center;gap:8px;color:#128C4A;margin-bottom:8px;flex-wrap:wrap}
.kc-wahead small{color:#555;width:100%;font-size:12px}
.kc-bubble{margin:0;background:#D9FDD3;border-radius:10px 10px 2px 10px;padding:10px 12px;font:13px/1.45 "Inter",system-ui,sans-serif;white-space:pre-wrap;word-break:break-word}
.kc-explica{width:100%;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px dashed var(--line,rgba(127,127,127,.5));text-align:left}
.kc-explica p{margin:0;font-size:14px;opacity:.8}

.kc-toast{z-index:95;position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);z-index:95;display:flex;align-items:center;gap:8px;background:#12141A;color:#fff;padding:12px 16px;border-radius:12px;font:500 14px "Inter",system-ui,sans-serif;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transition:transform .3s;max-width:calc(100vw - 32px)}
.kc-toast svg{color:#C6F432;flex:none}
.kc-toast.on{transform:translate(-50%,0)}

.kc-sizes{display:flex;gap:6px;margin:8px 0}
.kc-size{min-width:38px;height:34px;border:1px solid rgba(127,127,127,.45);background:transparent;color:inherit;border-radius:6px;font:600 13px var(--body,system-ui);cursor:pointer}
.kc-size.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kc-select{min-height:40px;padding:8px 10px;font-size:14px;margin-bottom:8px}
[data-add].kc-ok{filter:brightness(.9)}
[data-add]{cursor:pointer;font-family:inherit}

@media (max-width:560px){.kc-panel{width:100vw}.kc-fab{bottom:146px}}
@media (prefers-reduced-motion:reduce){.kc-panel,.kc-overlay,.kc-toast{transition:none}.kc-fab.pulse,.kc-doneic{animation:none}}