/* Capix Demo Kit — componentes comunes de las demos de Capix Web.
   Cada demo define sus variables: --bg --fg --dim --card --line --acc --acc2 --on-acc --radius --font --font-h */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font,system-ui,sans-serif);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-h,inherit);margin:0;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
::selection{background:var(--acc);color:var(--on-acc,#000)}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-m,ui-monospace,Consolas,monospace)}
.dim{color:var(--dim)}
.hide{display:none!important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius,12px);font-weight:600;border:1px solid var(--line);background:var(--card);transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-acc{background:var(--acc);color:var(--on-acc,#000);border-color:transparent}
.btn-acc:hover{box-shadow:0 10px 30px -8px var(--acc)}
.btn-ghost{background:transparent}
.btn-sm{padding:8px 16px;font-size:.9rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--card);transition:.25s}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:.88rem;font-weight:500;transition:.2s}
.chip:hover{border-color:var(--acc)}
.chip[aria-pressed="true"],.chip.on{background:var(--acc);color:var(--on-acc,#000);border-color:var(--acc)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius,16px);padding:24px}
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc)}
.pill-ok{color:#2ee59d}.pill-warn{color:#ffb020}.pill-bad{color:#ff5470}

.field{display:grid;gap:6px;margin-bottom:14px}
.field label,.lbl{font-size:.82rem;font-weight:600;color:var(--dim);letter-spacing:.03em}
.field input,.field select,.field textarea,.inp{width:100%;padding:12px 14px;border-radius:calc(var(--radius,12px) - 2px);background:var(--bg);border:1px solid var(--line);outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.field .err{color:#ff5470;font-size:.8rem;min-height:1em}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#ff5470}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--acc) var(--p,50%),var(--line) var(--p,50%));outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:grab}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--acc)}
.switch{position:relative;width:46px;height:26px;border-radius:99px;background:var(--line);transition:.25s;flex:none}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.25s}
.switch[aria-checked="true"]{background:var(--acc)}.switch[aria-checked="true"]::after{transform:translateX(20px)}

/* Modal / drawer / toast */
.k-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.k-modal.open{opacity:1;pointer-events:auto}
.k-modal .box{position:relative;width:min(var(--mw,760px),100%);max-height:90vh;overflow:auto;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:calc(var(--radius,16px) + 6px);padding:clamp(20px,4vw,36px);transform:translateY(20px) scale(.97);transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:0 40px 100px -20px rgba(0,0,0,.6)}
.k-modal.open .box{transform:none}
.k-modal .x{position:absolute;right:14px;top:14px}
.k-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:900;background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:-30px 0 80px -30px rgba(0,0,0,.6)}
.k-drawer.open{transform:none}
.k-scrim{position:fixed;inset:0;z-index:890;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s}
.k-scrim.open{opacity:1;pointer-events:auto}
.k-toast{position:fixed;left:50%;bottom:90px;z-index:1200;translate:-50% 20px;opacity:0;padding:12px 22px;border-radius:99px;background:var(--fg);color:var(--bg);font-weight:600;font-size:.9rem;pointer-events:none;transition:.35s cubic-bezier(.22,1,.36,1);max-width:90vw;text-align:center}
.k-toast.show{opacity:1;translate:-50% 0}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
.k-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--acc);z-index:1100}
.k-tabs{display:flex;gap:6px;flex-wrap:wrap}
.k-panel[hidden]{display:none}
.k-spot{position:relative;overflow:hidden}
.k-spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 16%,transparent),transparent 45%)}
.k-spot:hover::before{opacity:1}
.ring{--v:0;width:var(--s,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c,var(--acc)) calc(var(--v)*1%),var(--line) 0);position:relative}
.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--card)}
.ring>*{position:relative}
table.k-tbl{width:100%;border-collapse:collapse}
.k-tbl th,.k-tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.k-tbl th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;user-select:none}
.k-tbl th[data-sort]{cursor:pointer}.k-tbl th[data-sort]:hover{color:var(--fg)}
.k-tbl tr:hover td{background:color-mix(in srgb,var(--acc) 5%,transparent)}

/* Píldora de navegación entre demos */
.demo-pill{position:fixed;left:16px;bottom:16px;z-index:1300;font-family:system-ui,sans-serif}
.demo-pill>button{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:99px;background:#0b0b0e;color:#fff;border:1px solid rgba(255,255,255,.18);font-size:.8rem;font-weight:600;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.demo-pill>button i{width:8px;height:8px;border-radius:50%;background:#ff2a3d;box-shadow:0 0 0 0 #ff2a3d;animation:dp 2s infinite}
@keyframes dp{70%{box-shadow:0 0 0 8px transparent}}
.demo-pill .menu{position:absolute;left:0;bottom:48px;width:min(290px,86vw);background:#0b0b0e;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:8px;box-shadow:0 30px 80px -20px #000;opacity:0;transform:translateY(8px);pointer-events:none;transition:.25s}
.demo-pill.open .menu{opacity:1;transform:none;pointer-events:auto}
.demo-pill .menu a,.demo-pill .menu button{display:flex;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:12px;font-size:.85rem;color:#e8e8ee}
.demo-pill .menu a:hover,.demo-pill .menu button:hover{background:rgba(255,255,255,.08)}
.demo-pill .menu small{display:block;padding:8px 12px 4px;color:#8e8e99;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.demo-pill .menu a.cur{color:#ff6b78}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
@media print{.demo-pill,.k-toast,.k-progress{display:none!important}}