/* TúPOS v2.1 — componentes. Rangos: S ≤640 (max-width:40em) · M 641–1024 · L >1024 (min-width:64.0625em) */
@layer components{

/* ───────── Página ───────── */
.kx-page{--kx-gutter:var(--sp-4);width:100%;max-width:var(--page-max);margin-inline:auto;padding:var(--sp-4) var(--kx-gutter) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-6) + var(--sp-4));display:flex;flex-direction:column;gap:var(--sp-5)}
.kx-page--narrow{max-width:var(--page-narrow)}
.kx-page--wide{max-width:var(--page-wide)}
@media (min-width:40.0625em){.kx-page{--kx-gutter:var(--sp-6);padding-top:var(--sp-6);gap:var(--sp-6)}}
@media (min-width:64.0625em){.kx-page{--kx-gutter:var(--sp-8)}}
@media (max-width:40em){.kx-page:has(.kx-actionbar){padding-bottom:calc(var(--nav-h) + var(--actionbar-h) + env(safe-area-inset-bottom) + var(--sp-6))}}
@media (max-width:64em){.kx-page:has(.kx-pos-sum){padding-bottom:calc(var(--nav-h) + var(--actionbar-h) + env(safe-area-inset-bottom) + var(--sp-6))}}
.kx-split{display:grid;gap:var(--sp-5);align-items:start}
.kx-split__main,.kx-split__aside{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
@media (min-width:64.0625em){.kx-split{grid-template-columns:minmax(0,1fr) 26rem;gap:var(--sp-6)}.kx-split__aside{position:sticky;top:var(--sp-4)}}
.kx-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);min-width:0}
.kx-form{display:flex;flex-direction:column;gap:inherit;min-width:0}
.kx-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.kx-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────── Encabezado ───────── */
.kx-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-3) var(--sp-4)}
.kx-page-header__back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:var(--border-w) solid var(--border-control);border-radius:var(--r-pill);background:var(--surface-1);color:var(--fg-1);text-decoration:none}
.kx-page-header__back svg{width:var(--icon);height:var(--icon)}
@media (hover:hover){.kx-page-header__back:hover{background:var(--surface-2);color:var(--fg-1)}}
.kx-page-header__text{flex:1 1 16rem;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.kx-page-header__title{font-size:var(--text-24);font-weight:var(--w-700);line-height:var(--lh-tight)}
.kx-page-header__subtitle{font-size:var(--text-16);font-weight:var(--w-400);color:var(--fg-2)}
.kx-page-header__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
@media (min-width:64.0625em){.kx-page-header__title{font-size:var(--text-30)}}
@media (max-width:40em){.kx-page-header__actions{width:100%}.kx-page-header__actions:not(:has(>:not(.kx-actionbar))){display:contents}}

/* ───────── Nav inferior (todos los rangos) ───────── */
.kx-nav{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-nav);display:flex;align-items:stretch;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:0 var(--sp-2) env(safe-area-inset-bottom);background:var(--surface-1);border-top:var(--border-w) solid var(--border)}
.kx-nav__item{position:relative;flex:1 1 0;min-width:0;min-height:var(--tap);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:0;border:0;background:none;color:var(--fg-2);font-size:var(--text-16);font-weight:var(--w-600);line-height:var(--lh-tight);text-decoration:none;white-space:nowrap;cursor:pointer}
.kx-nav__item svg{width:var(--icon-xl);height:var(--icon-xl);flex:none}
.kx-nav__item[aria-current="page"],.kx-nav__item[aria-expanded="true"]{color:var(--accent);font-weight:var(--w-700)}
.kx-nav__item:not(.kx-nav__item--sell) svg{box-sizing:content-box;padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill);transition:background-color var(--dur-fast) var(--ease)}
.kx-nav__item:is([aria-current="page"],[aria-expanded="true"]):not(.kx-nav__item--sell) svg{background:var(--accent-soft)}
@media (hover:hover){.kx-nav__item:is(:hover,[data-demo="hover"]):not([aria-current="page"]){color:var(--fg-1)}}
.kx-nav__item--sell{flex:1 1 0;min-width:4rem;padding-inline:var(--sp-1);color:var(--fg-1)}
.kx-nav__item--sell svg{box-sizing:content-box;padding:var(--sp-4);margin-top:calc(var(--sp-7) * -1);border-radius:var(--r-pill);background:var(--sell-bg);color:var(--sell-fg);outline:var(--sp-1) solid var(--surface-1);box-shadow:var(--shadow-sell)}
.kx-nav__item--sell[aria-current="page"]{color:var(--fg-1)}
.kx-nav__badge{position:absolute;top:var(--sp-2);left:calc(50% + var(--sp-2));min-width:var(--icon-lg);height:var(--icon-lg);padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--bad);color:var(--bad-fg);outline:calc(var(--border-w) * 2) solid var(--surface-1);font:var(--w-600) var(--text-13)/var(--icon-lg) var(--font-mono);text-align:center}
@media (max-width:27em){.kx-nav__item{font-size:var(--text-14)}}
.kx-nav__acct{display:none}
@media (min-width:40.0625em){
.kx-nav:has(.kx-nav__acct){padding-inline-end:0}
.kx-nav__acct{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);width:6rem;min-height:var(--tap);margin-inline-start:var(--sp-1);margin-bottom:calc(env(safe-area-inset-bottom) * -1);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0;border:0;border-inline-start:var(--border-w) solid var(--border);background:var(--surface-2);color:var(--fg-2);font-family:inherit;font-size:var(--text-16);font-weight:var(--w-600);line-height:var(--lh-tight);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.kx-nav__acct-av{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--avatar) - var(--sp-2));height:calc(var(--avatar) - var(--sp-2));border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:var(--text-16);font-weight:var(--w-700);line-height:1}
@media (hover:hover){.kx-nav__acct:hover{background:var(--surface-3);color:var(--fg-1)}}
.kx-nav__acct[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
.kx-nav__acct:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:calc(var(--focus-w) * -1)}
}
@media (max-width:23.75em){.kx-nav__item{font-size:var(--text-13)}}

/* ───────── Nav lateral (EXPERIMENTAL, docs/NAV_LATERAL.md) ─────────
   El mismo .kx-nav, vuelto barra lateral cuando html[data-nav="side"] (js/v4/kx_nav.js) y desde M. Contraída: solo
   íconos (--side-w), centrados en el alto. Expandida: --side-w-open SOBRE el contenido (no lo empuja) con velo; la
   marca y las etiquetas aparecen, los íconos suben y entran «Tus atajos» de Más en cascada (--i). El alto que
   reservaba abajo (--nav-h) vale 0 en este modo (tokens/tupos.css). */
.kx-nav__toggle,.kx-nav__sp,.kx-nav__pins,.kx-nav__acct-who,.kx-nav__scrim{display:none}
@media (min-width:40.0625em){
[data-nav="side"] body{padding-inline-start:calc(var(--side-w) + env(safe-area-inset-left))}
[data-nav="side"] .kx-nav{inset:0 auto 0 0;width:calc(var(--side-w) + env(safe-area-inset-left));height:auto;flex-direction:column;align-items:stretch;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom)) calc(var(--sp-3) + env(safe-area-inset-left));border-top:0;border-inline-end:var(--border-w) solid var(--border-weak);overflow:hidden;touch-action:pan-y;transition:width var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
[data-nav="side"] .kx-nav.kx-nav--open{width:calc(var(--side-w-open) + env(safe-area-inset-left));box-shadow:var(--shadow-overlay);overflow-y:auto;scrollbar-width:none}
[data-nav="side"] .kx-nav__scrim{display:block;position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease)}
[data-nav="side"] .kx-nav__scrim--on{opacity:.6;pointer-events:auto}
[data-nav="side"] .kx-nav__toggle{display:flex;flex:none;align-items:center;gap:var(--sp-3);height:var(--row-list);padding:0 var(--sp-4);border:0;border-radius:var(--r-md);background:none;color:var(--fg-1);font-family:inherit;white-space:nowrap;cursor:pointer}
.kx-nav__toggle-ic{position:relative;flex:none;width:var(--icon-xl);height:var(--icon-xl)}
.kx-nav__toggle-ic svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease),filter var(--dur) var(--ease)}
.kx-nav__toggle-ic svg+svg{opacity:0;transform:translateX(calc(var(--sp-2) * -1)) scale(.9);filter:blur(3px)}
.kx-nav--open .kx-nav__toggle-ic svg:first-child{opacity:0;transform:translateX(var(--sp-2)) scale(.9);filter:blur(3px)}
.kx-nav--open .kx-nav__toggle-ic svg+svg{opacity:1;transform:none;filter:none;transition-delay:var(--dur-fast)}
.kx-nav__brand{font-size:var(--text-24);font-weight:var(--w-700);line-height:1;letter-spacing:-.02em;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.kx-nav__brand em{font-style:normal;color:var(--accent)}
.kx-nav--open .kx-nav__brand{opacity:1}
[data-nav="side"] .kx-nav__sp{display:block;flex:1 1 0;min-height:0;transition:flex-grow var(--dur-slow) var(--ease)}
[data-nav="side"] .kx-nav--open .kx-nav__sp--t{flex-grow:0}
[data-nav="side"] .kx-nav .kx-nav__item{flex:none;flex-direction:row;justify-content:flex-start;gap:var(--sp-4);min-width:0;height:var(--row-list);padding:0 var(--sp-4);border-radius:var(--r-md);transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
[data-nav="side"] .kx-nav .kx-nav__item svg{box-sizing:border-box;width:var(--icon-xl);height:var(--icon-xl);margin:0;padding:0;border-radius:0;background:none;outline:0;box-shadow:none}
[data-nav="side"] .kx-nav .kx-nav__item>span:not(.kx-nav__badge){opacity:0;transition:opacity var(--dur-fast) var(--ease)}
[data-nav="side"] .kx-nav--open .kx-nav__item>span:not(.kx-nav__badge){opacity:1}
[data-nav="side"] .kx-nav .kx-nav__item:is([aria-current="page"],[aria-expanded="true"]){background:var(--accent-soft);color:var(--accent)}
[data-nav="side"] .kx-nav .kx-nav__item.kx-nav__item--sell{background:var(--sell-bg);color:var(--sell-fg)}
@media (hover:hover){[data-nav="side"] .kx-nav .kx-nav__item:not(.kx-nav__item--sell,[aria-current="page"]):hover{background:var(--surface-2)}}
[data-nav="side"] .kx-nav__badge{top:var(--sp-2);left:calc(var(--sp-4) + var(--icon-xl) - var(--sp-2))}
[data-nav="side"] .kx-nav--open .kx-nav__badge{position:static;margin-inline-start:auto}
[data-nav="side"] .kx-nav__pins{display:grid;flex:none;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--dur-slow) var(--ease),opacity var(--dur) var(--ease)}
[data-nav="side"] .kx-nav--open .kx-nav__pins{grid-template-rows:1fr;opacity:1;transition-delay:calc(var(--dur-fast) / 2),var(--dur-fast)}
.kx-nav__pins-in{display:flex;flex-direction:column;gap:var(--sp-1);min-height:0;overflow:hidden}
.kx-nav__pins-h{margin:var(--sp-3) var(--sp-2) var(--sp-1);padding-top:var(--sp-3);border-top:var(--border-w) solid var(--border-weak);color:var(--fg-3);font:var(--w-500) var(--text-13)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.kx-nav__pin{--kx-pin-delay:calc(var(--dur-fast) + var(--i,0) * var(--dur-fast) / 3);display:flex;flex:none;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-md);color:var(--fg-1);font-size:var(--text-14);font-weight:var(--w-600);line-height:var(--lh-tight);text-decoration:none;white-space:nowrap;opacity:0;transform:translateX(calc(var(--sp-3) * -1));transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.kx-nav--open .kx-nav__pin{opacity:1;transform:none;transition-delay:var(--kx-pin-delay)}
.kx-nav__pin svg{flex:none;width:var(--icon);height:var(--icon);color:var(--accent)}
.kx-nav__pin span{overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.kx-nav__pin:hover{background:var(--surface-2)}}
:is(.kx-nav__toggle,.kx-nav__pin):focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:calc(var(--focus-w) * -1)}
[data-nav="side"] .kx-nav .kx-nav__acct{flex:none;flex-direction:row;justify-content:flex-start;gap:var(--sp-3);width:auto;height:var(--row-list);margin:0;padding:0 var(--sp-2);border:var(--border-w) solid var(--border-weak);border-radius:var(--r-md);background:none}
[data-nav="side"] .kx-nav__acct-label{display:none}
[data-nav="side"] .kx-nav__acct-av{flex:none;width:var(--tap);height:var(--tap)}
[data-nav="side"] .kx-nav__acct-who{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);min-width:0;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
[data-nav="side"] .kx-nav--open .kx-nav__acct-who{opacity:1}
.kx-nav__acct-who :is(b,small){max-width:100%;overflow:hidden;text-overflow:ellipsis}
.kx-nav__acct-who b{color:var(--fg-1);font-size:var(--text-14);font-weight:var(--w-600)}
.kx-nav__acct-who small{color:var(--fg-3);font-size:var(--text-13);font-weight:var(--w-500)}
[data-nav="side"] .kx-pop{right:auto;left:calc(var(--side-w) + env(safe-area-inset-left) + var(--sp-2));bottom:var(--sp-3);transform-origin:0 100%}
[data-nav="side"] .kx-nav--open~.kx-pop{left:calc(var(--side-w-open) + env(safe-area-inset-left) + var(--sp-2))}
[data-nav="side"] .kx-toast-region{inset-inline-start:calc(var(--side-w) + var(--sp-4))}
[data-nav="side"] .kx-pos-sum{inset-inline-start:var(--side-w)}
}
@media (prefers-reduced-motion:reduce){[data-nav="side"] :is(.kx-nav,.kx-nav *,.kx-nav__scrim){transition:none!important}}

/* ───────── Barra de acción (S fija sobre la nav; M/L se disuelve en el encabezado) ───────── */
.kx-actionbar{display:contents}
@media (max-width:40em){.kx-actionbar{position:fixed;inset-inline:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:var(--z-actionbar);display:flex;align-items:center;gap:var(--sp-2);height:var(--actionbar-h);padding:0 var(--sp-4);background:var(--surface-1);border-top:var(--border-w) solid var(--border)}.kx-actionbar>*{flex:1 1 0}}

/* ───────── Tabs de sección + chips ───────── */
.kx-scroll-wrap{min-width:0}
.kx-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
@media (max-width:64em){.kx-scroll-wrap{overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--kx-gutter,var(--sp-4)) * -1);padding-inline:var(--kx-gutter,var(--sp-4));scroll-padding-inline:var(--kx-gutter,var(--sp-4))}.kx-scroll-wrap::-webkit-scrollbar{display:none}.kx-scroll-wrap>.kx-tabs{flex-wrap:nowrap;width:max-content}}
/* .kx-tabs suelto (sin .kx-scroll-wrap) también hace scroll nativo en S y M */
@media (max-width:64em){.kx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}.kx-tabs::-webkit-scrollbar{display:none}.kx-scroll-wrap>.kx-tabs{overflow:visible;max-width:none}}
.kx-chip,.kx-filter-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);border:var(--border-w) solid var(--border-control);border-radius:var(--r-pill);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-14);line-height:var(--lh-tight);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.kx-chip{font-weight:var(--w-700)}
.kx-filter-chip{font-weight:var(--w-600)}
.kx-chip svg{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.kx-filter-chip svg{display:none}
@media (hover:hover){.kx-chip:is(:hover,[data-demo="hover"]):not(.kx-chip--active,[aria-current="page"],[aria-disabled="true"]),.kx-filter-chip:is(:hover,[data-demo="hover"]):not(.kx-filter-chip--active,[aria-current="true"],[aria-pressed="true"],[aria-disabled="true"]){background:var(--surface-2);border-color:var(--fg-2);color:var(--fg-1)}}
.kx-chip:is(:active,[data-demo="active"]),.kx-filter-chip:is(:active,[data-demo="active"]){background:var(--surface-3)}
.kx-chip:is(.kx-chip--active,[aria-current="page"]){background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.kx-filter-chip:is(.kx-filter-chip--active,[aria-current="true"],[aria-pressed="true"]){background:var(--fg-1);border-color:var(--fg-1);color:var(--bg)}
.kx-chip[aria-disabled="true"],.kx-filter-chip[aria-disabled="true"]{background:var(--disabled-bg);border-style:dashed;border-color:var(--disabled-border);color:var(--disabled-fg)}
.kx-chip__count,.kx-filter-chip__count{min-width:var(--icon-lg);padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--surface-2);color:var(--fg-1);font-family:var(--font-mono);font-size:var(--text-13);font-weight:var(--w-600);font-variant-numeric:tabular-nums;line-height:var(--icon-lg);text-align:center}
.kx-chip:is(.kx-chip--active,[aria-current="page"]) .kx-chip__count{background:var(--accent-hover);color:var(--accent-fg)}
.kx-filter-chip:is(.kx-filter-chip--active,[aria-current="true"],[aria-pressed="true"]) .kx-filter-chip__count{background:var(--fg-2);color:var(--bg)}
.kx-filter-chip__dot{flex:none;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--fg-3)}
.kx-filter-chip__dot--ok{background:var(--ok)}.kx-filter-chip__dot--warn{background:var(--warn)}.kx-filter-chip__dot--bad{background:var(--bad)}
.kx-filter-chip:is(.kx-filter-chip--active,[aria-current="true"],[aria-pressed="true"]) .kx-filter-chip__dot{outline:calc(var(--border-w) * 2) solid var(--surface-1)}

/* ───────── Grupo de filtros ───────── */
.kx-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0}
@media (max-width:40em){.kx-filter-group--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--kx-gutter,var(--sp-4)) * -1);padding-inline:var(--kx-gutter,var(--sp-4))}.kx-filter-group--scroll::-webkit-scrollbar{display:none}.kx-filter-group--scroll>*{flex:none}}
.kx-filter-divider{flex:none;width:var(--border-w);height:var(--icon-lg);background:var(--border)}
.kx-filter-select{position:relative;display:inline-flex;flex:none}
.kx-filter-select select{appearance:none;min-height:var(--tap);padding:0 var(--sp-8) 0 var(--sp-4);border:var(--border-w) solid var(--border-control);border-radius:var(--r-pill);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-14);font-weight:var(--w-600);cursor:pointer}
.kx-filter-select::after{content:"";position:absolute;right:var(--sp-4);top:50%;width:var(--sp-2);height:var(--sp-2);border-right:calc(var(--border-w) * 2) solid var(--fg-2);border-bottom:calc(var(--border-w) * 2) solid var(--fg-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
@media (hover:hover){.kx-filter-select select:hover{background:var(--surface-2);border-color:var(--fg-2)}}
.kx-filter-label{font-size:var(--text-14);font-weight:var(--w-600);color:var(--fg-2)}

/* ───────── Búsqueda ───────── */
.kx-search{position:relative;display:flex;align-items:center;flex:1 1 18rem;min-width:min(100%,14rem)}
.kx-field>.kx-search{flex:none}
.kx-search__icon{position:absolute;left:var(--sp-4);width:var(--icon);height:var(--icon);color:var(--fg-2);pointer-events:none}
.kx-search__input{width:100%;min-height:var(--control);padding:0 var(--sp-9) 0 calc(var(--sp-4) + var(--icon) + var(--sp-3));border:var(--border-w) solid var(--border-control);border-radius:var(--r-pill);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-18);font-weight:var(--w-500);appearance:none}
.kx-search__input::placeholder{color:var(--placeholder);opacity:1;font-weight:var(--w-400)}
.kx-search__input::-webkit-search-cancel-button{appearance:none}
@media (hover:hover){.kx-search__input:is(:hover,[data-demo="hover"]):not(:disabled){border-color:var(--fg-2)}}
.kx-search__input:focus-visible{border-color:var(--accent)}
.kx-search__input:disabled{background:var(--disabled-bg);border-style:dashed;border-color:var(--disabled-border);color:var(--disabled-fg)}
.kx-search__clear{position:absolute;right:calc(var(--border-w) * 2);display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r-pill);background:none;color:var(--fg-2)}
.kx-search__clear svg{width:var(--icon);height:var(--icon)}
@media (hover:hover){.kx-search__clear:hover{background:var(--surface-2);color:var(--fg-1)}}
.kx-search__input:placeholder-shown~.kx-search__clear{display:none}
.kx-search[aria-busy="true"] .kx-search__icon{visibility:hidden}
.kx-search[aria-busy="true"]::before{content:"";position:absolute;left:var(--sp-4);width:var(--icon);height:var(--icon);border:calc(var(--border-w) * 2) solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:kx-spin var(--dur-spin) linear infinite}

/* ───────── Botón ───────── */
.kx-button{--kx-bg:var(--surface-1);--kx-bg-h:var(--surface-2);--kx-bg-a:var(--surface-3);--kx-fg:var(--fg-1);--kx-bd:var(--border-control);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--control);padding:0 var(--sp-5);border:var(--border-w) solid var(--kx-bd);border-radius:var(--r-md);background:var(--kx-bg);color:var(--kx-fg);font-size:var(--text-18);font-weight:var(--w-700);line-height:var(--lh-tight);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.kx-button svg{width:var(--icon);height:var(--icon);flex:none}
.kx-button--primary{--kx-bg:var(--accent);--kx-bg-h:var(--accent-hover);--kx-bg-a:var(--accent-hover);--kx-fg:var(--accent-fg);--kx-bd:var(--accent)}
.kx-button--secondary{--kx-bg:var(--surface-1);--kx-fg:var(--fg-1);--kx-bd:var(--border-control)}
.kx-button--dark{--kx-bg:var(--fg-1);--kx-bg-h:var(--fg-2);--kx-bg-a:var(--fg-2);--kx-fg:var(--bg);--kx-bd:var(--fg-1)}
.kx-button--ghost{--kx-bg:transparent;--kx-fg:var(--fg-1);--kx-bd:transparent}
.kx-button--danger{--kx-bg:var(--bad-soft);--kx-bg-h:var(--bad);--kx-bg-a:var(--bad-hover);--kx-fg:var(--bad);--kx-bd:var(--bad)}
@media (hover:hover){.kx-button:is(:hover,[data-demo="hover"]):not(:disabled,[aria-disabled="true"],[aria-busy="true"]){background:var(--kx-bg-h);color:var(--kx-fg)}.kx-button--primary:is(:hover,[data-demo="hover"]):not(:disabled,[aria-disabled="true"]){border-color:var(--accent-hover)}.kx-button--danger:is(:hover,[data-demo="hover"]):not(:disabled,[aria-disabled="true"],[aria-busy="true"]){color:var(--bad-fg)}}
.kx-button:is(:active,[data-demo="active"]):not(:disabled,[aria-disabled="true"],[aria-busy="true"]){background:var(--kx-bg-a);transform:translateY(var(--border-w))}
.kx-button--danger:is(:active,[data-demo="active"]):not(:disabled,[aria-disabled="true"]){color:var(--bad-fg)}
.kx-button:is(:disabled,[aria-disabled="true"]){background:var(--disabled-bg);border-style:dashed;border-color:var(--disabled-border);color:var(--disabled-fg);cursor:not-allowed;transform:none}
.kx-button[aria-busy="true"]{color:transparent;pointer-events:none}
.kx-button[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:var(--icon);height:var(--icon);border:calc(var(--border-w) * 2.5) solid var(--kx-fg);border-right-color:transparent;border-radius:50%;animation:kx-spin var(--dur-spin) linear infinite}
.kx-button--sm{min-height:var(--tap);padding:0 var(--sp-4)}
.kx-button--lg{min-height:var(--control-lg);padding:0 var(--sp-6)}
.kx-button--icon{min-width:var(--control);padding:0}
.kx-button--icon.kx-button--sm{min-width:var(--tap)}
.kx-button--icon.kx-button--lg{min-width:var(--control-lg)}
.kx-button--block{display:flex;width:100%}
.kx-button--wrap{max-width:100%;min-width:0;justify-content:flex-start;padding-block:var(--sp-2);text-align:start;white-space:normal;overflow-wrap:anywhere}

/* ───────── Carga ───────── */
@keyframes kx-spin{to{transform:rotate(360deg)}}
.kx-spinner{display:inline-block;flex:none;width:var(--icon);height:var(--icon);border:calc(var(--border-w) * 3) solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:kx-spin var(--dur-spin) linear infinite}
.kx-spinner--lg{width:var(--sp-8);height:var(--sp-8)}
.kx-skeleton{display:block;width:var(--kx-w,100%);height:var(--text-18);border-radius:var(--r-xs);background:var(--surface-3)}
.kx-skeleton--title{height:var(--text-24);--kx-w:60%}
.kx-skeleton--row{height:var(--row-list);border-radius:var(--r-md)}
.kx-skeleton--kpi{height:6.5rem;border-radius:var(--r-lg)}
.kx-skeleton--circle{width:var(--avatar);height:var(--avatar);border-radius:50%}
@media (prefers-reduced-motion:reduce){.kx-spinner,.kx-button[aria-busy="true"]::after,.kx-search[aria-busy="true"]::before{animation:none;border-right-color:var(--surface-3)}}

/* ───────── KPIs ───────── */
.kx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--sp-3)}
@media (max-width:40em){.kx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kx-kpi{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;padding:var(--sp-4);border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1);color:var(--fg-1);text-decoration:none}
.kx-kpi__label{font-size:var(--text-14);font-weight:var(--w-500);color:var(--fg-2)}
.kx-kpi__value{font-family:var(--font-mono);font-size:var(--text-24);font-weight:var(--w-700);font-variant-numeric:tabular-nums;line-height:var(--lh-tight);overflow-wrap:anywhere}
.kx-kpi__meta{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-14);color:var(--fg-2)}
@media (min-width:64.0625em){.kx-kpi__value{font-size:var(--text-32)}}
@media (hover:hover){a.kx-kpi:hover{border-color:var(--border-control);color:var(--fg-1)}}

/* ───────── Tag, punto, avatar ───────── */
.kx-tag{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tag-h);padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--surface-2);color:var(--fg-1);font-size:var(--text-14);font-weight:var(--w-600);line-height:var(--lh-tight);white-space:nowrap}
.kx-tag--accent{background:var(--accent-soft);color:var(--accent)}
.kx-tag--wrap{max-width:100%;padding-block:var(--sp-1);white-space:normal}
.kx-dot{flex:none;display:inline-block;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--fg-3)}
.kx-dot--ok{background:var(--ok)}.kx-dot--warn{background:var(--warn)}.kx-dot--bad{background:var(--bad)}.kx-dot--accent{background:var(--accent)}
.kx-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:var(--text-14);font-weight:var(--w-700)}
.kx-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ───────── Tarjeta, grupo, etiqueta, nota, medidor ───────── */
.kx-card{display:flex;flex-direction:column;min-width:0;border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1)}
.kx-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);min-height:var(--row-list);padding:var(--sp-3) var(--sp-5);border-bottom:var(--border-w) solid var(--border-weak)}
.kx-card__head h2,.kx-card__head h3{font-size:var(--text-18);font-weight:var(--w-700)}
.kx-card__body{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.kx-card__body--flush{padding:0}
.kx-label{font-size:var(--text-14);font-weight:var(--w-600);color:var(--fg-2)}
.kx-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--sp-4)}
.kx-group>legend{grid-column:1/-1;margin-bottom:var(--sp-2);font-size:var(--text-18);font-weight:var(--w-700)}
.kx-group__full{grid-column:1/-1}
.kx-note{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);color:var(--fg-1);font-size:var(--text-16)}
.kx-note__icon{display:contents}
.kx-note>svg,.kx-note__icon>svg{flex:none;width:var(--icon-lg);height:var(--icon-lg);color:var(--fg-2)}
.kx-note__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.kx-note__title{font-weight:var(--w-700)}
.kx-note--ok{background:var(--ok-soft)}.kx-note--ok>svg,.kx-note--ok .kx-note__icon>svg{color:var(--ok)}
.kx-note--warn{background:var(--warn-soft)}.kx-note--warn>svg,.kx-note--warn .kx-note__icon>svg{color:var(--warn)}
.kx-note--bad{background:var(--bad-soft)}.kx-note--bad>svg,.kx-note--bad .kx-note__icon>svg{color:var(--bad)}
.kx-note--info{background:var(--accent-soft)}.kx-note--info>svg,.kx-note--info .kx-note__icon>svg{color:var(--accent)}
.kx-note>.kx-button{flex:none;align-self:center}
@media (max-width:40em){.kx-note{flex-wrap:wrap}.kx-note>.kx-button{flex:1 1 100%}}
.kx-meter{display:block;height:var(--sp-2);border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.kx-meter::after{content:"";display:block;width:var(--kx-pct,0%);height:100%;border-radius:inherit;background:var(--accent)}
.kx-meter--ok::after{background:var(--ok)}.kx-meter--warn::after{background:var(--warn)}.kx-meter--bad::after{background:var(--bad)}
.kx-totals{display:flex;flex-direction:column;gap:var(--sp-2)}
.kx-totals__row{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:var(--text-18);color:var(--fg-2)}
.kx-totals__row dd{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-1);font-weight:var(--w-500)}
.kx-totals__row--total{padding-top:var(--sp-3);border-top:var(--border-w) solid var(--border);color:var(--fg-1);font-weight:var(--w-700)}
.kx-totals__row--total dd{font-size:var(--text-24);font-weight:var(--w-700)}
/* Solo los valores de texto (correo, nombre) pueden partirse; un monto nunca (a 360 px «-$389.101» se partía). */
.kx-totals--text .kx-totals__row dd,.kx-totals__row--text dd{min-width:0;overflow-wrap:anywhere;font-family:inherit}

/* ───────── Estado vacío / error ───────── */
.kx-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-7) var(--sp-4);text-align:center}
.kx-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-9);height:var(--sp-9);margin-bottom:var(--sp-2);border-radius:50%;background:var(--surface-2);color:var(--fg-2)}
.kx-empty-state__icon svg{width:var(--icon-xl);height:var(--icon-xl)}
.kx-empty-state__title{font-size:var(--text-18);font-weight:var(--w-700)}
.kx-empty-state__body{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);max-width:28rem;font-size:var(--text-16);color:var(--fg-2)}
.kx-empty-state--error .kx-empty-state__icon{background:var(--bad-soft);color:var(--bad)}
.kx-empty-state--locked .kx-empty-state__icon{background:var(--accent-soft);color:var(--accent)}
/* Alturas bajas (≈666 px): el CTA del estado vacío no debe caer bajo el círculo «Vender» de la barra inferior (GEN-03). */
@media (max-height:44em){.kx-empty-state{padding:var(--sp-4)}.kx-empty-state__icon{width:var(--sp-8);height:var(--sp-8);margin-bottom:0}}

/* ───────── Campos de formulario ───────── */
.kx-field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.kx-field__label{font-size:var(--text-16);font-weight:var(--w-600);color:var(--fg-1)}
.kx-field__label small{font-size:var(--text-14);font-weight:var(--w-400);color:var(--fg-2)}
.kx-field__hint{font-size:var(--text-14);color:var(--fg-2)}
.kx-field__error{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-14);font-weight:var(--w-600);color:var(--bad)}
.kx-field--nested{margin-top:var(--sp-3);padding-left:var(--sp-4);border-left:calc(var(--border-w) * 2) solid var(--border-control)}
.kx-field__error svg{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.kx-input,.kx-select,.kx-textarea{width:100%;min-height:var(--control);padding:0 var(--sp-4);border:var(--border-w) solid var(--border-control);border-radius:var(--r-md);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-18);font-weight:var(--w-500);line-height:var(--lh-tight);appearance:none;transition:border-color var(--dur-fast) var(--ease)}
.kx-input::placeholder,.kx-textarea::placeholder{color:var(--placeholder);opacity:1;font-weight:var(--w-400)}
.kx-textarea{min-height:7.5rem;padding:var(--sp-3) var(--sp-4);line-height:var(--lh);resize:vertical}
.kx-select{padding-right:var(--sp-8);background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);background-position:calc(100% - var(--sp-5)) 52%,calc(100% - var(--sp-4)) 52%;background-size:var(--sp-1) var(--sp-1);background-repeat:no-repeat;cursor:pointer}
.kx-input--num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.kx-input[type="file"]{padding:var(--sp-1);line-height:calc(var(--control) - var(--sp-3));cursor:pointer}
.kx-input[type="file"]::file-selector-button{min-height:calc(var(--control) - var(--sp-3));margin-right:var(--sp-3);padding:0 var(--sp-4);border:var(--border-w) solid var(--border-control);border-radius:var(--r-sm);background:var(--surface-2);color:var(--fg-1);font:inherit;font-weight:var(--w-700);cursor:pointer}
@media (hover:hover){:is(.kx-input,.kx-select,.kx-textarea):is(:hover,[data-demo="hover"]):not(:disabled,[readonly],:focus-visible,[aria-invalid="true"]){border-color:var(--fg-2)}}
:is(.kx-input,.kx-select,.kx-textarea):is(:focus-visible,[data-demo="focus"]){border-color:var(--accent);outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
:is(.kx-input,.kx-select,.kx-textarea)[aria-invalid="true"]{border-color:var(--bad);box-shadow:inset 0 0 0 var(--border-w) var(--bad)}
:is(.kx-input,.kx-select,.kx-textarea):disabled{background-color:var(--disabled-bg);border-style:dashed;border-color:var(--disabled-border);color:var(--disabled-fg);cursor:not-allowed}
:is(.kx-input,.kx-textarea)[readonly]{background:var(--surface-2);border-color:var(--border)}
.kx-input-group{display:flex;align-items:stretch;min-width:0}
.kx-input-group__affix{display:inline-flex;align-items:center;padding:0 var(--sp-3);border:var(--border-w) solid var(--border-control);border-right:0;border-radius:var(--r-md) 0 0 var(--r-md);background:var(--surface-2);color:var(--fg-2);font-family:var(--font-mono);font-size:var(--text-18);font-weight:var(--w-500)}
.kx-input-group>.kx-input{border-radius:0 var(--r-md) var(--r-md) 0;min-width:0}
.kx-input-group:has([aria-invalid="true"]) .kx-input-group__affix{border-color:var(--bad)}
.kx-input-group:has(:disabled) .kx-input-group__affix{border-style:dashed;border-color:var(--disabled-border)}

/* check · radio · switch (label envolvente, área ≥44) */
.kx-check,.kx-radio,.kx-switch{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);font-size:var(--text-18);color:var(--fg-1);cursor:pointer}
.kx-check input,.kx-radio input,.kx-switch input{appearance:none;flex:none;position:relative;margin:0;border:calc(var(--border-w) * 2) solid var(--border-control);background:var(--surface-1);cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.kx-check input{width:var(--icon-lg);height:var(--icon-lg);border-radius:var(--r-xs)}
.kx-radio input{width:var(--icon-lg);height:var(--icon-lg);border-radius:50%}
.kx-switch input{width:3.25rem;height:var(--icon-xl);border-radius:var(--r-pill);background:var(--surface-3)}
.kx-check input:checked,.kx-radio input:checked,.kx-switch input:checked{border-color:var(--accent);background:var(--accent)}
.kx-check input:checked::after{content:"";position:absolute;left:30%;top:10%;width:30%;height:58%;border:solid var(--accent-fg);border-width:0 calc(var(--border-w) * 2.5) calc(var(--border-w) * 2.5) 0;transform:rotate(45deg)}
.kx-check input:indeterminate{border-color:var(--accent);background:var(--accent)}
.kx-check input:indeterminate::after{content:"";position:absolute;inset:45% 20%;background:var(--accent-fg)}
.kx-radio input:checked::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--accent-fg)}
.kx-switch input::after{content:"";position:absolute;top:50%;left:var(--sp-1);width:var(--icon);height:var(--icon);border-radius:50%;background:var(--fg-2);transform:translateY(-50%);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.kx-switch input:checked::after{background:var(--accent-fg);transform:translate(calc(3.25rem - var(--icon) - var(--sp-2) - var(--border-w) * 4),-50%)}
@media (hover:hover){:is(.kx-check,.kx-radio,.kx-switch):is(:hover,[data-demo="hover"]) input:not(:checked,:disabled){border-color:var(--fg-2)}}
:is(.kx-check,.kx-radio,.kx-switch) input:is(:focus-visible,[data-demo="focus"]){outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
:is(.kx-check,.kx-radio,.kx-switch) input[aria-invalid="true"]{border-color:var(--bad)}
:is(.kx-check,.kx-radio,.kx-switch):has(input:disabled){color:var(--disabled-fg);cursor:not-allowed}
:is(.kx-check,.kx-radio,.kx-switch) input:disabled{border-style:dashed;border-color:var(--disabled-border);background:var(--disabled-bg);cursor:not-allowed}
:is(.kx-check,.kx-radio) input:disabled:checked::after{border-color:var(--disabled-fg);background:var(--disabled-fg)}
.kx-check input:disabled:checked::after{background:none}
.kx-switch input:disabled::after{background:var(--disabled-border)}
.kx-choices{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5)}

/* ───────── Lista (resumen de datos; M/L columnas por --kx-cols, S tarjeta 2 columnas) ───────── */
.kx-list{display:flex;flex-direction:column;min-width:0;border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1)}
.kx-card .kx-list{border:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.kx-list__head,.kx-list__row,.kx-list__foot{display:grid;grid-template-columns:var(--kx-cols,minmax(0,1fr) auto);align-items:center;gap:var(--sp-2) var(--sp-4);padding:var(--sp-3) var(--sp-5)}
.kx-list__head{min-height:var(--tap);border-bottom:var(--border-w) solid var(--border);background:var(--surface-2);color:var(--fg-2);font-size:var(--text-13);font-weight:var(--w-600)}
.kx-list>.kx-list__head:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.kx-list__row{position:relative;min-height:var(--row-list);color:var(--fg-1);font-size:var(--text-18);text-decoration:none;transition:padding var(--dur) var(--ease),background-color var(--dur-fast) var(--ease)}
.kx-list__row+.kx-list__row,.kx-list__detail+.kx-list__row{border-top:var(--border-w) solid var(--border-weak)}
.kx-list>.kx-list__row:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.kx-list>.kx-list__row:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
@media (hover:hover){.kx-list__row:is(a,[data-href],.kx-list__row--interactive):is(:hover,[data-demo="hover"]){padding-block:var(--sp-4);background:var(--bg);color:var(--fg-1)}}
.kx-list__row[aria-selected="true"]{background:var(--accent-soft)}
.kx-list__row--muted{color:var(--fg-2)}
.kx-list__cell{min-width:0;display:flex;align-items:center;gap:var(--sp-2)}
.kx-list__cell--primary{flex-direction:column;align-items:flex-start;gap:0;font-weight:var(--w-700);overflow-wrap:anywhere}
.kx-list__cell--primary small{font-size:var(--text-16);font-weight:var(--w-400);color:var(--fg-2);overflow-wrap:break-word}
.kx-list__cell--meta{font-size:var(--text-16);color:var(--fg-2)}
.kx-list__cell--value{justify-content:flex-end;font-family:var(--font-mono);font-weight:var(--w-700);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.kx-list__cell--status{justify-content:flex-start}
.kx-list__cell--actions{justify-content:flex-end;gap:var(--sp-2)}
.kx-list__cell--check{width:var(--tap);justify-content:center}
.kx-list__head .kx-list__cell--value,.kx-list__head .kx-list__cell--actions{justify-content:flex-end}
.kx-list__cell--extra{}
.kx-list__label{display:none;font-size:var(--text-14);font-weight:var(--w-600);color:var(--fg-2)}
.kx-list__foot{border-top:var(--border-w) solid var(--border);background:var(--surface-2);font-weight:var(--w-700);border-radius:0 0 var(--r-lg) var(--r-lg)}
.kx-list__detail{padding:var(--sp-4) var(--sp-5);background:var(--bg);border-top:var(--border-w) dashed var(--border);font-size:var(--text-16);color:var(--fg-2)}
.kx-list__toggle svg{transition:transform var(--dur) var(--ease)}
.kx-list__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* --stack: lista en contenedor angosto (ticket, aside): tarjeta de 2 columnas en todos los rangos */
.kx-list--stack .kx-list__head{display:none}
.kx-list--stack .kx-list__row{grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row dense;padding:var(--sp-3) var(--sp-4)}
.kx-list--stack .kx-list__cell{grid-column:1/-1}
.kx-list--stack .kx-list__cell--primary,.kx-list--stack .kx-list__cell--meta{grid-column:1}
.kx-list--stack .kx-list__cell--value{grid-column:2;grid-row:1}
.kx-list--stack .kx-list__cell--status{grid-column:2;grid-row:2;justify-content:flex-end}
.kx-list--stack .kx-list__cell--actions{grid-column:1/-1;justify-content:flex-start}
/* --form: apila según el ancho de la propia lista (con aside, el viewport no basta para medirlo) */
.kx-list--form{container-type:inline-size}
@container (max-width:56rem){
.kx-list--form .kx-list__head{display:none}
.kx-list--form .kx-list__row{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--sp-3);padding:var(--sp-4)}
.kx-list--form .kx-list__cell{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:var(--sp-1)}
.kx-list--form .kx-list__label{display:block}
.kx-list--form .kx-list__cell--half,.kx-list--form .kx-list__cell--value{grid-column:auto;grid-row:auto}
.kx-list--form .kx-list__cell--value{align-items:flex-end;justify-content:center}
}
/* --fit: tabla ancha (5 columnas, ≥ 60rem) que se apila como --stack cuando la propia lista mide menos
   (tablet, ventana chica, con o sin menú lateral): sin esto la columna del nombre queda en 0 px entre 641 y ~900 */
.kx-list--fit{container-type:inline-size}
@container (max-width:60rem){
.kx-list--fit .kx-list__head{display:none}
.kx-list--fit .kx-list__row{grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row dense;padding:var(--sp-3) var(--sp-4)}
.kx-list--fit .kx-list__cell{grid-column:1/-1}
.kx-list--fit .kx-list__cell--primary,.kx-list--fit .kx-list__cell--meta{grid-column:1}
.kx-list--fit .kx-list__cell--value{grid-column:2;grid-row:1}
.kx-list--fit .kx-list__cell--status{grid-column:2;grid-row:2;justify-content:flex-end}
.kx-list--fit .kx-list__cell--actions{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:40em){
.kx-list__head,.kx-list__cell--extra{display:none}
.kx-list__row,.kx-list__foot{grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row dense;padding:var(--sp-3) var(--sp-4)}
.kx-list__cell{grid-column:1/-1}
.kx-list__cell--primary,.kx-list__cell--meta{grid-column:1}
.kx-list__cell--value{grid-column:2;grid-row:1}
.kx-list__cell--status{grid-column:2;grid-row:2;justify-content:flex-end}
.kx-list__cell--actions{grid-column:1/-1;justify-content:flex-start}
.kx-list__cell--check{grid-column:2;grid-row:1;justify-self:end}
.kx-list__row:has(.kx-list__cell--check) .kx-list__cell--value{grid-row:2}
}

/* ───────── Tabla (ledgers). S siempre con scroll horizontal ───────── */
.kx-table{width:100%;border-collapse:separate;border-spacing:0;border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1);font-size:var(--text-18)}
.kx-table th{height:var(--tap);padding:var(--sp-2) var(--sp-4);background:var(--surface-2);color:var(--fg-2);font-size:var(--text-13);font-weight:var(--w-600);text-align:left;white-space:nowrap;border-bottom:var(--border-w) solid var(--border)}
.kx-table thead tr:first-child th:first-child{border-top-left-radius:var(--r-lg)}.kx-table thead tr:first-child th:last-child{border-top-right-radius:var(--r-lg)}
.kx-table td{height:var(--row-table);padding:var(--sp-2) var(--sp-4);border-top:var(--border-w) solid var(--border-weak);vertical-align:middle}
.kx-table tbody tr:first-child td{border-top:0}
.kx-table tfoot td{background:var(--surface-2);border-top:var(--border-w) solid var(--border);font-weight:var(--w-700)}
.kx-table tfoot tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)}.kx-table tfoot tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)}
.kx-table__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.kx-table th.kx-table__num{text-align:right}
.kx-table__sort{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap);margin:calc(var(--sp-2) * -1) 0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.kx-table__sort svg{width:var(--icon-sm);height:var(--icon-sm);opacity:.5}
th[aria-sort="ascending"] .kx-table__sort,th[aria-sort="descending"] .kx-table__sort{color:var(--fg-1)}
th[aria-sort="ascending"] .kx-table__sort svg,th[aria-sort="descending"] .kx-table__sort svg{opacity:1}
th[aria-sort="descending"] .kx-table__sort svg{transform:rotate(180deg)}
@media (hover:hover){.kx-table tbody tr:hover td{background:var(--bg)}}
/* Tabla ancha (más columnas que pantalla): celdas sin quiebre, dentro de un .kx-table-wrap que hace el scroll.
   La tabla sigue siendo display:table para que sus filas ocupen todo el ancho cuando sí caben. */
.kx-table--scroll td,.kx-table--scroll th{white-space:nowrap}
@media (max-width:40em){.kx-table{display:block;max-width:100%;overflow-x:auto}.kx-table td{white-space:nowrap}}

/* ───────── Paginador ───────── */
.kx-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-5);font-size:var(--text-14);font-weight:var(--w-600);color:var(--fg-2)}
.kx-pagination__info{font-size:var(--text-14)}
.kx-pagination__sizes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.kx-pagination__pages{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.kx-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:0 var(--sp-2);border:var(--border-w) solid transparent;border-radius:var(--r-pill);background:none;color:var(--fg-1);font-family:var(--font-mono);font-size:var(--text-14);font-weight:var(--w-600);text-decoration:none;cursor:pointer}
@media (hover:hover){.kx-pagination__page:is(:hover,[data-demo="hover"]):not(.kx-pagination__page--active,[aria-disabled="true"]){border-color:var(--border-control);background:var(--surface-1);color:var(--fg-1)}}
.kx-pagination__page--active,.kx-pagination__page[aria-current="page"]{background:var(--fg-1);color:var(--bg);cursor:default}
.kx-pagination__page[aria-disabled="true"]{color:var(--disabled-fg);opacity:.7;cursor:not-allowed}
.kx-pagination__page svg{width:var(--icon);height:var(--icon)}
.kx-pagination--sticky{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:var(--z-sticky);padding:var(--sp-2) 0;background:var(--bg)}
@media (max-width:40em){.kx-pagination{justify-content:center}.kx-pagination__info{width:100%;text-align:center}}

/* ───────── Hoja inferior (S) / diálogo (M/L) ───────── */
.kx-sheet{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;align-items:end;justify-items:center}
.kx-sheet[hidden]{display:none}
.kx-sheet__backdrop{position:absolute;inset:0;background:var(--overlay)}
.kx-sheet__panel,.kx-dialog{position:relative;display:flex;flex-direction:column;width:100%;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface-1);color:var(--fg-1);box-shadow:var(--shadow-overlay);overflow:hidden}
.kx-sheet__grip,.kx-dialog::before{flex:none;display:block;width:var(--sp-8);height:var(--sp-1);margin:var(--sp-3) auto 0;border-radius:var(--r-pill);background:var(--border-control)}
.kx-sheet__head,.kx-dialog__head{flex:none;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--row-list);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5)}
.kx-sheet__head h2,.kx-dialog__head h2{flex:1;min-width:0;font-size:var(--text-24);font-weight:var(--w-700)}
.kx-sheet__head>div,.kx-dialog__head>div{flex:1;min-width:0}
.kx-sheet__body,.kx-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-4);padding:0 var(--sp-5) var(--sp-5);font-size:var(--text-18);color:var(--fg-2)}
.kx-sheet__foot,.kx-dialog__foot{flex:none;display:flex;flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));border-top:var(--border-w) solid var(--border-weak)}
.kx-sheet__foot>*,.kx-dialog__foot>*{flex:1 1 0}
.kx-dialog{position:fixed;margin:auto auto 0;padding:0;border:0;max-width:none}
.kx-dialog:not([open]){display:none}
.kx-dialog::backdrop{background:var(--overlay)}
.kx-dialog--danger .kx-dialog__head>svg{flex:none;width:var(--icon-lg);height:var(--icon-lg);color:var(--bad)}
@media (min-width:40.0625em){
.kx-sheet{align-items:center;padding:var(--sp-6)}
.kx-sheet__panel,.kx-dialog{width:min(100% - var(--sp-7) * 2,34rem);max-height:min(88dvh,52rem);border-radius:var(--r-xl)}
.kx-dialog{margin:auto}
.kx-dialog--wide{width:min(100% - var(--sp-7) * 2,48rem)}
.kx-sheet__grip,.kx-dialog::before{display:none}
.kx-sheet__foot,.kx-dialog__foot{justify-content:flex-end;padding-bottom:var(--sp-4)}
.kx-sheet__foot>*,.kx-dialog__foot>*{flex:0 0 auto}
}
@media (prefers-reduced-motion:no-preference){.kx-dialog[open]{animation:kx-rise var(--dur-slow) var(--ease)}}
@keyframes kx-rise{from{transform:translateY(var(--sp-6));opacity:0}}

/* ───────── Popover de cuenta (sobre la última pestaña del nav; nace del botón, sin velo) ───────── */
.kx-pop__catch{position:fixed;inset:0;z-index:calc(var(--z-popover) - 1)}
.kx-pop:focus{outline:none}
.kx-pop{position:fixed;right:var(--pop-right,var(--sp-3));bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-2));z-index:var(--z-popover);display:flex;flex-direction:column;gap:var(--sp-2);width:min(19rem,calc(100vw - var(--sp-4)));max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom) - var(--sp-5));overflow-y:auto;padding:var(--sp-3);border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1);color:var(--fg-1);box-shadow:var(--shadow-overlay);transform-origin:calc(100% - var(--pop-ox,var(--sp-7))) 100%}
.kx-pop :is(select,button){font-family:inherit}
.kx-pop__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1)}
.kx-pop__who{display:flex;flex-direction:column;min-width:0}
.kx-pop__who strong{font-size:var(--text-18);font-weight:var(--w-700);line-height:var(--lh-tight)}
.kx-pop__branch{padding:var(--sp-3) 0;border-block:var(--border-w) solid var(--border-weak)}
.kx-pop__links{display:flex;flex-direction:column}
.kx-pop__nav{justify-content:space-between;padding:0 var(--sp-1);font-size:var(--text-16);font-weight:var(--w-600)}
.kx-pop__nav-txt{display:inline-flex;align-items:center;gap:var(--sp-2)}
.kx-pop__nav-txt svg{width:var(--icon);height:var(--icon);color:var(--fg-2)}
@media (max-width:40em){.kx-pop__nav{display:none}}
.kx-pop-enter{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.kx-pop-leave{transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.kx-pop-from{opacity:0;transform:translateY(var(--sp-2)) scale(.94)}
.kx-pop-to{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.kx-pop-enter,.kx-pop-leave{transition:none}}

/* ───────── Toast ───────── */
.kx-toast-region{position:fixed;inset-inline:var(--sp-4);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-3));z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);pointer-events:none}
body:has(.kx-actionbar) .kx-toast-region,body:has(.kx-pos-sum) .kx-toast-region{bottom:calc(var(--nav-h) + var(--actionbar-h) + env(safe-area-inset-bottom) + var(--sp-3))}
@media (min-width:40.0625em){body:has(.kx-actionbar):not(:has(.kx-pos-sum)) .kx-toast-region{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-3))}}
@media (min-width:64.0625em){body:has(.kx-pos-sum) .kx-toast-region{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-3))}}
.kx-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--sp-3);width:100%;max-width:30rem;min-height:var(--control-lg);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border:var(--border-w) solid var(--border-control);border-radius:var(--r-md);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-16);font-weight:var(--w-500);box-shadow:var(--shadow-overlay)}
.kx-toast::before{content:"";flex:none;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--accent)}
.kx-toast--ok::before{background:var(--ok)}.kx-toast--warn::before{background:var(--warn)}.kx-toast--bad::before{background:var(--bad)}
.kx-toast__text{flex:1;min-width:0}
.kx-toast .kx-button{flex:none}
@media (prefers-reduced-motion:no-preference){.kx-toast{animation:kx-rise var(--dur) var(--ease)}}

/* ───────── Menú, popover, tooltip ───────── */
.kx-menu{position:relative;display:inline-flex}
.kx-menu__list,.kx-popover{position:absolute;right:0;top:calc(100% + var(--sp-1));z-index:var(--z-popover);display:flex;flex-direction:column;min-width:15rem;padding:var(--sp-1);border:var(--border-w) solid var(--border);border-radius:var(--r-md);background:var(--surface-1);box-shadow:var(--shadow-overlay)}
.kx-menu__list[hidden],.kx-popover[hidden]{display:none}
.kx-menu--up .kx-menu__list{top:auto;bottom:calc(100% + var(--sp-1))}
.kx-menu__item{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--control);padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:none;color:var(--fg-1);font-size:var(--text-18);font-weight:var(--w-500);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.kx-menu__item svg{width:var(--icon);height:var(--icon);color:var(--fg-2);flex:none}
@media (hover:hover){.kx-menu__item:is(:hover,[data-demo="hover"]):not([aria-disabled="true"]){background:var(--surface-2);color:var(--fg-1)}}
.kx-menu__item:focus-visible{outline-offset:calc(var(--focus-w) * -1)}
.kx-menu__item--danger,.kx-menu__item--danger svg{color:var(--bad)}
.kx-menu__item[aria-disabled="true"]{color:var(--disabled-fg)}
.kx-menu__sep{height:var(--border-w);margin:var(--sp-1) 0;background:var(--border-weak)}
.kx-popover{padding:var(--sp-4);gap:var(--sp-3);min-width:18rem;font-size:var(--text-16);color:var(--fg-2)}
.kx-tooltip{position:relative;display:inline-flex}
.kx-tooltip__bubble{position:absolute;bottom:calc(100% + var(--sp-2));left:50%;z-index:var(--z-popover);width:max-content;max-width:16rem;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--fg-1);color:var(--bg);font-size:var(--text-14);font-weight:var(--w-500);line-height:var(--lh);transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-fast) var(--ease)}
.kx-tooltip:is(:hover,:focus-within,[data-demo="hover"]) .kx-tooltip__bubble{opacity:1;visibility:visible}

/* ───────── Inicio ───────── */
.kx-home-hero{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1)}
.kx-home-hero__greet{font-size:var(--text-24);font-weight:var(--w-700);line-height:var(--lh-tight)}
.kx-home-hero__facts{font-size:var(--text-16);color:var(--fg-2)}
.kx-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (min-width:40.0625em){.kx-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64.0625em){.kx-quick-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kx-quick{--kx-q:var(--quick-accent);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4);min-height:7rem;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--kx-q);color:var(--quick-fg);font-size:var(--text-18);font-weight:var(--w-700);line-height:var(--lh-tight);text-decoration:none}
.kx-quick svg{width:var(--icon-xl);height:var(--icon-xl)}
.kx-quick small{display:block;margin-top:var(--sp-1);font-size:var(--text-14);font-weight:var(--w-500)}
.kx-quick--ink{--kx-q:var(--quick-ink)}.kx-quick--ink-2{--kx-q:var(--quick-ink-2)}.kx-quick--ok{--kx-q:var(--quick-ok)}.kx-quick--warn{--kx-q:var(--quick-warn)}.kx-quick--bad{--kx-q:var(--quick-bad)}
@media (hover:hover){.kx-quick:hover{color:var(--quick-fg);outline:var(--focus-w) solid var(--kx-q);outline-offset:var(--focus-offset)}}

/* ───────── Pasos, ruta, funciones, atajos, favorito ───────── */
.kx-step{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);counter-reset:kx-step}
.kx-step__item{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);font-size:var(--text-16);font-weight:var(--w-600);color:var(--fg-2);counter-increment:kx-step}
.kx-step__item::before{content:counter(kx-step);display:inline-flex;align-items:center;justify-content:center;width:var(--sp-7);height:var(--sp-7);border:calc(var(--border-w) * 2) solid var(--border-control);border-radius:50%;font-family:var(--font-mono);font-size:var(--text-14)}
.kx-step__item[aria-current="step"]{color:var(--fg-1)}
.kx-step__item[aria-current="step"]::before{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.kx-step__item--done::before{content:"✓";border-color:var(--ok);color:var(--ok)}
.kx-route{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);font-size:var(--text-14);color:var(--fg-2)}
.kx-route a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--fg-2)}
.kx-route [aria-current="page"]{color:var(--fg-1);font-weight:var(--w-600)}
.kx-feature{display:flex;gap:var(--sp-3);align-items:flex-start}
.kx-feature>svg{flex:none;width:var(--icon-lg);height:var(--icon-lg);color:var(--accent)}
.kx-feature__title{font-size:var(--text-18);font-weight:var(--w-700)}
.kx-feature__body{font-size:var(--text-16);color:var(--fg-2)}
.kx-shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--sp-2) var(--sp-4);font-size:var(--text-16);color:var(--fg-2)}
.kx-shortcuts kbd{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sp-7);min-height:var(--sp-7);margin-right:var(--sp-2);padding:0 var(--sp-2);border:var(--border-w) solid var(--border-control);border-radius:var(--r-xs);background:var(--surface-1);color:var(--fg-1);font-family:var(--font-mono);font-size:var(--text-14)}
@media (hover:none){.kx-shortcuts{display:none}}
.kx-star{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r-pill);background:none;color:var(--fg-2);cursor:pointer}
.kx-star svg{width:var(--icon);height:var(--icon)}
.kx-star[aria-pressed="true"]{color:var(--warn)}
.kx-star[aria-pressed="true"] svg{fill:currentColor}

/* ───────── POS ───────── */
.kx-pos-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.kx-pos-tools .kx-search{flex-basis:16rem}
.kx-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (min-width:40.0625em){.kx-product-grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}}
.kx-product{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-2);min-height:7.5rem;padding:var(--sp-4);border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-18);text-align:left;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.kx-product__name{font-weight:var(--w-700);line-height:var(--lh-tight);overflow-wrap:anywhere}
.kx-product__price{font-family:var(--font-mono);font-weight:var(--w-700);font-variant-numeric:tabular-nums}
.kx-product__meta{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-14);color:var(--fg-2)}
@media (hover:hover){.kx-product:is(:hover,[data-demo="hover"]):not(:disabled){border-color:var(--accent);background:var(--accent-soft)}}
.kx-product:active:not(:disabled){background:var(--accent-soft);transform:translateY(var(--border-w))}
.kx-product:disabled{background:var(--disabled-bg);border-style:dashed;border-color:var(--disabled-border);color:var(--disabled-fg);cursor:not-allowed}
.kx-product-grid--list{grid-template-columns:minmax(0,1fr);gap:0;border:var(--border-w) solid var(--border);border-radius:var(--r-lg);background:var(--surface-1)}
.kx-product-grid--list .kx-product{flex-direction:row;flex-wrap:wrap;align-items:center;min-height:var(--row-list);border:0;border-radius:0;padding:var(--sp-3) var(--sp-4)}
.kx-product-grid--list .kx-product+.kx-product{border-top:var(--border-w) solid var(--border-weak)}
.kx-product-grid--list .kx-product__name{flex:1 1 12rem}
.kx-product-grid--list .kx-product__meta{order:3;flex-basis:100%}
.kx-pos-sum{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-top:var(--border-w) solid var(--border);background:var(--surface-1);border-radius:0 0 var(--r-lg) var(--r-lg)}
.kx-pos-sum__count{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--text-14);color:var(--fg-2)}
.kx-pos-sum__count a{color:var(--fg-2)}
.kx-pos-sum .kx-button{flex:0 0 auto}
@media (max-width:64em){.kx-pos-sum{position:fixed;inset-inline:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:var(--z-actionbar);height:var(--actionbar-h);padding:0 var(--sp-4);border-radius:0}}
.kx-pos-total{display:flex;flex-direction:column;gap:0}
.kx-pos-total__label{font-size:var(--text-14);font-weight:var(--w-500);color:var(--fg-2)}
.kx-pos-total__value{font-family:var(--font-mono);font-size:var(--text-24);font-weight:var(--w-700);font-variant-numeric:tabular-nums;line-height:var(--lh-tight);color:var(--fg-1)}
.kx-pos-total--lg .kx-pos-total__value{font-size:var(--text-32)}
.kx-pos-qty{display:inline-flex;align-items:center;gap:var(--sp-1)}
.kx-pos-qty output{min-width:var(--sp-7);text-align:center;font-family:var(--font-mono);font-weight:var(--w-700)}
.kx-pos-pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
@media (min-width:40.0625em){.kx-pos-pay{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kx-pos-pay__method{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--sp-1);min-height:var(--sp-9);padding:var(--sp-3) var(--sp-4);border:var(--border-w) solid var(--border-control);border-radius:var(--r-md);background:var(--surface-1);color:var(--fg-1);font-size:var(--text-18);font-weight:var(--w-700);cursor:pointer}
.kx-pos-pay__method svg{width:var(--icon);height:var(--icon);color:var(--fg-2)}
.kx-pos-pay__method input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kx-pos-pay__method:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 var(--border-w) var(--accent);background:var(--accent-soft)}
.kx-pos-pay__method:has(input:checked) svg{color:var(--accent)}
.kx-pos-pay__method:has(input:focus-visible){outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.kx-pos-pay__method:has(input:disabled){background:var(--disabled-bg);border-style:dashed;border-color:var(--disabled-border);color:var(--disabled-fg);cursor:not-allowed}
@media (hover:hover){.kx-pos-pay__method:hover:not(:has(input:checked,input:disabled)){border-color:var(--fg-2);background:var(--surface-2)}}

/* ───────── Densidad compacta (solo L; nunca baja alturas ni texto) ───────── */
@media (min-width:64.0625em){
.kx-density--compact .kx-page{gap:var(--sp-4);padding-top:var(--sp-4)}
.kx-density--compact .kx-card__body{padding:var(--sp-3) var(--sp-4) var(--sp-4);gap:var(--sp-3)}
.kx-density--compact .kx-card__head{padding:var(--sp-2) var(--sp-4)}
.kx-density--compact .kx-list__row,.kx-density--compact .kx-list__head{padding:var(--sp-2) var(--sp-4)}
.kx-density--compact .kx-kpi{padding:var(--sp-3)}
.kx-density--compact .kx-table td,.kx-density--compact .kx-table th{padding-inline:var(--sp-3)}
}
/* Barra de filtros fija: estándar de toda lista con buscador o chips de filtro (docs/DESIGN_SYSTEM_TABLAS.md §3.1).
   Una por pantalla, hija directa del contenedor que también contiene la lista (si no, el sticky se suelta). */
.kx-filterbar{position:sticky;top:0;z-index:var(--z-sticky);margin-inline:calc(var(--kx-gutter,var(--sp-4)) * -1);padding:var(--sp-2) var(--kx-gutter,var(--sp-4));background:var(--bg)}
.kx-filterbar--stack{display:flex;flex-direction:column;gap:var(--sp-2)}
@media (max-width:40em){
  /* --from-m: formularios sin buscador ni chips (solo campos rotulados): en móvil no se fijan */
  .kx-filterbar--from-m{position:static;margin-inline:0;padding:0;background:none}
  /* --split: en móvil solo se fija __main (buscador / chips); los campos rotulados scrollean */
  .kx-filterbar--split{display:contents}
  .kx-filterbar--split>.kx-filterbar__main{position:sticky;top:0;z-index:var(--z-sticky);margin-inline:calc(var(--kx-gutter,var(--sp-4)) * -1);padding:var(--sp-2) var(--kx-gutter,var(--sp-4));background:var(--bg)}
}
/* --flush: dentro de una columna (p. ej. junto a un riel), sin sangrar al gutter */
.kx-filterbar--flush,.kx-filterbar--flush>.kx-filterbar__main{margin-inline:0;padding-inline:0}
/* Convivencia con el lanzador del chat de ayuda (`.sch-launcher`, components/support-chat.css). Viven acá porque
   `.kx-*` tiene un solo dueño (tests/test_design_guard.py): el lanzador sube sobre la barra de acción y la
   paginación fija, se oculta con una hoja o un diálogo abierto, y la página reserva su alto. */
@media (max-width:40em){
  body:has(.kx-actionbar) .sch-launcher{bottom:calc(var(--nav-h) + var(--actionbar-h) + env(safe-area-inset-bottom) + var(--sp-3))}
}
body:has(.kx-pagination--sticky) .sch-launcher{bottom:calc(var(--nav-h) + var(--row-list) + env(safe-area-inset-bottom) + var(--sp-3))}
body:has(.kx-sheet:not([hidden]),dialog[open]) .sch-launcher{visibility:hidden}
@media (min-width:40.0625em){body:has(.sch-launcher) .kx-page{padding-bottom:calc(var(--nav-h) + var(--control) + env(safe-area-inset-bottom) + var(--sp-7))}}
/* hidden siempre gana (HTMX/estados) — última regla de la capa */
[hidden]{display:none}
/* imprimir: solo el contenido de la pantalla */
@media print{.kx-nav,.kx-tabs,.kx-scroll-wrap,.kx-page-header__actions,.kx-actionbar,.kx-toolbar,.kx-toast-region{display:none}}
}