/* Approved POS visual master. Scoped to the POS route; the image is the authority. */
body.pos-active {
  --pos-bg: #061315;
  --pos-surface: #0b1b1d;
  --pos-raised: #132a2d;
  --pos-line: #294044;
  --pos-soft-line: #21383b;
  --pos-text: #f0f5f5;
  --pos-muted: #b5c5c7;
  --pos-accent: #00e79e;
  --pos-sidebar-bg: linear-gradient(#061819, #061214);
  --pos-topbar-bg: linear-gradient(#091d20, #081719);
  --pos-panel-bg: radial-gradient(circle at 50% 0%, #0d2527, #091b1d 60%, #08191b);
  --pos-control-bg: #12272a;
  --pos-control-alt-bg: #132b2e;
  --pos-subtle-bg: #142a2b;
  --pos-secondary-bg: #122426;
  --pos-hover-bg: #10282a;
  --pos-selected-bg: #003b2b;
  --pos-selected-border: #0b5942;
  --pos-selected-gradient: linear-gradient(90deg, #006645, #004b36);
  --pos-control-border: #455e61;
  --pos-strong-border: #3a5051;
  --pos-accent-soft: #004330;
  --pos-accent-fg: #041816;
  --pos-mark-bg: #23443c;
  --pos-mark-text: #c0e3d6;
  --pos-shadow: #0008;
  height: 100dvh;
  overflow: hidden;
  background: var(--pos-bg);
}
:root[data-theme='light'] body.pos-active {
  --pos-bg: var(--vx-color-background);
  --pos-surface: var(--vx-color-surface);
  --pos-raised: var(--vx-color-surface-elevated);
  --pos-line: var(--vx-color-border-default);
  --pos-soft-line: var(--vx-color-border-subtle);
  --pos-text: var(--vx-color-text-primary);
  --pos-muted: var(--vx-color-text-secondary);
  --pos-accent: var(--vx-color-accent);
  --pos-sidebar-bg: var(--vx-color-sidebar);
  --pos-topbar-bg: var(--vx-color-surface);
  --pos-panel-bg: var(--vx-color-surface);
  --pos-control-bg: var(--vx-color-surface-input);
  --pos-control-alt-bg: var(--vx-color-surface-input);
  --pos-subtle-bg: var(--vx-color-surface-subtle);
  --pos-secondary-bg: var(--vx-color-surface-subtle);
  --pos-hover-bg: var(--vx-color-surface-hover);
  --pos-selected-bg: var(--vx-color-surface-selected);
  --pos-selected-border: var(--vx-color-accent);
  --pos-selected-gradient: var(--vx-color-surface-selected);
  --pos-control-border: var(--vx-color-border-control);
  --pos-strong-border: var(--vx-color-border-default);
  --pos-accent-soft: var(--vx-status-success-bg);
  --pos-accent-fg: var(--vx-color-on-accent);
  --pos-mark-bg: var(--vx-color-surface-selected);
  --pos-mark-text: var(--vx-color-accent-text);
  --pos-shadow: var(--vx-shadow-popover);
}
body.pos-active .vx-root { display: grid; grid-template-columns: 243px minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; background: var(--pos-bg); color: var(--pos-text); }
body.pos-active .vx-root[data-collapsed='true'] { grid-template-columns: var(--vx-sidebar-collapsed) minmax(0, 1fr); }
body.pos-active .vx-sidebar { position: relative; height: 100dvh; min-height: 0; background: var(--pos-sidebar-bg); border-color: var(--pos-soft-line); }
body.pos-active .vx-sidebar-logo { height: 69px; flex: none; padding: 0 23px; border-bottom: 1px solid var(--pos-soft-line); }
body.pos-active .vx-sidebar-logo .brand { gap: 12px; }
body.pos-active .vx-sidebar-logo .brand::before { width: 30px; height: 30px; border: 3px solid var(--pos-accent); border-radius: 6px; color: var(--pos-accent); font-size: 20px; font-weight: 800; transform: skew(-8deg); }
body.pos-active .vx-sidebar-logo .brand strong { font-size: 20px; letter-spacing: -.045em; }
body.pos-active .vx-sidebar-logo .brand small { color: var(--pos-muted); font-size: 10px; }
body.pos-active .vx-nav { min-height: 0; overflow: auto; padding: 14px 12px; gap: 4px; scrollbar-width: thin; }
body.pos-active .vx-nav-domain, body.pos-active .vx-nav-link { min-height: 43px; padding: 0 12px; border-radius: 5px; color: var(--pos-text); font-size: 14px; letter-spacing: 0; }
body.pos-active .vx-nav-domain:hover, body.pos-active .vx-nav-link:hover { background: var(--pos-hover-bg); color: var(--pos-text); }
body.pos-active .vx-nav-domain[data-active='true'] { background: var(--pos-selected-bg); border: 1px solid var(--pos-selected-border); color: var(--pos-text); box-shadow: none; }
body.pos-active .vx-nav-domain[data-active='true'] .vx-icon { color: var(--pos-accent); }
body.pos-active .vx-nav-subsections { margin: 0 0 5px 4px; padding: 0 3px 10px 21px; border: 1px solid var(--pos-soft-line); border-top: 0; border-radius: 0 0 6px 6px; gap: 0; }
body.pos-active .vx-nav-subsections .vx-nav-link { min-height: 39px; padding-left: 13px; border-left: 1px solid var(--pos-line); border-radius: 0; font-size: 13px; }
body.pos-active .vx-nav-subsections .vx-nav-link[aria-current='page'] { min-height: 37px; margin-left: -16px; padding-left: 12px; border: 0; border-radius: 4px; background: var(--pos-selected-gradient); box-shadow: none; color: var(--pos-text); }
body.pos-active .vx-nav-utility { margin: auto 12px 20px; padding: 0; border: 0; }
body.pos-active .vx-nav-utility .vx-nav-link { min-height: 56px; border: 1px solid var(--pos-line); background: var(--pos-surface); }
body.pos-active .vx-root[data-collapsed='true'] .vx-sidebar-logo { padding-inline: 11px; }
body.pos-active .vx-root[data-collapsed='true'] .vx-nav { padding-inline: 6px; }
body.pos-active .vx-root[data-collapsed='true'] :is(.vx-nav-domain,.vx-nav-link) { justify-content: center; padding-inline: 0; }
body.pos-active .vx-root[data-collapsed='true'] .vx-nav-utility { margin-inline: 6px; }
body.pos-active .vx-nav > .pos-approved-home { min-height: 43px; padding: 0 12px; border: 0; background: transparent; }
body.pos-active .vx-shell-content { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 69px minmax(0,1fr); min-width: 0; height: 100dvh; overflow: hidden; }
body.pos-active .vx-topbar { position: relative; height: 69px; min-height: 69px; padding: 0 17px 0 15px; gap: 12px; background: var(--pos-topbar-bg); border-color: var(--pos-soft-line); }
body.pos-active .vx-topbar-left { flex: 1 1 auto; gap: 12px; }
body.pos-active .vx-topbar-left > .vx-icon-button { width: 44px; height: 44px; min-width: 44px; border: 1px solid var(--pos-line); border-radius: 8px; background: var(--pos-raised); color: var(--pos-text); }
body.pos-active .vx-topbar-right > .vx-company-trigger { min-width: 205px; max-width: 230px; min-height: 44px; border: 1px solid var(--pos-line); border-radius: 8px; color: var(--pos-text); }
body.pos-active .vx-context-indicator { display: none; }
body.pos-active .vx-topbar-right { flex: none; }
body.pos-active .pos-approved-operator { max-width: 130px; overflow: hidden; color: var(--pos-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
body.pos-active .vx-topbar-right .header-actions { display: flex; align-items: center; gap: 10px; margin: 0; }
body.pos-active .global-search-wrap { order: -1; flex: 1 1 auto; min-width: 130px; max-width: 490px; }
body.pos-active #globalSearch { width: 100%; min-height: 44px; border: 1px solid var(--pos-control-border); border-radius: 8px; background: var(--pos-control-bg); color: var(--pos-text); }
body.pos-active .vx-topbar-right .header-actions :is(button,select) { min-height: 40px; }
body.pos-active .vx-shell-content > .vx-workspace { display: grid; grid-template-rows: minmax(0,1fr); width: 100%; height: 100%; min-height: 0; max-width: none; padding: 0; overflow: hidden; }
body.pos-active .vx-migration-content, body.pos-active .vx-workspace-content { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
body.pos-active .vx-page-header, body.pos-active .vx-workspace-content > :not(.active-view) { display: none !important; }
body.pos-active .vx-workspace-content > .active-view { min-width: 0; min-height: 0; height: 100%; max-height: 100%; margin: 0; overflow: hidden; }
body.pos-active #posView { display: grid; grid-template-rows: auto minmax(0,1fr); container: pos-workspace / inline-size; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.pos-active #posView > .panel-head, body.pos-active #posView[data-pos-tab='venta'] > .pos-tabs { display: none; }
body.pos-active #posView .pos-approved-header { display: grid; grid-template-rows: 25px 55px; align-content: start; gap: 0; width: 100%; height: 93px; min-width: 0; padding: 9px 14px 0; }
body.pos-active .pos-approved-breadcrumb { height: 25px; color: var(--pos-muted); font-size: 12px; }
body.pos-active .pos-approved-heading { display: flex; align-items: center; gap: 23px; height: 55px; min-width: 0; }
body.pos-active .pos-approved-title { display: flex; align-items: center; gap: 13px; flex: none; }
body.pos-active .pos-approved-title span { color: var(--pos-accent); font-size: 28px; }
body.pos-active .pos-approved-title h2 { margin: 0; color: var(--pos-text); font-size: 22px; line-height: 28px; letter-spacing: -.02em; }
body.pos-active .pos-operation-context { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--pos-muted); font-size: 12px; white-space: nowrap; }
body.pos-active .pos-operation-context label { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 12px; }
body.pos-active .pos-operation-context select { width: clamp(130px,12vw,190px); min-width: 0; min-height: 30px; padding: 2px 22px 2px 7px; overflow: hidden; border-color: var(--pos-line); background: var(--pos-control-bg); color: var(--pos-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
body.pos-active .pos-session-context { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.pos-active .pos-session-context strong { max-width: 190px; overflow: hidden; color: var(--pos-text); font-size: 12px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
body.pos-active .pos-approved-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
body.pos-active .pos-approved-header-actions > button, body.pos-active .pos-approved-more > summary { display: flex; align-items: center; height: 42px; padding: 0 16px; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-surface); color: var(--pos-text); font-size: 12px; cursor: pointer; }
body.pos-active .pos-approved-header-actions > button:hover, body.pos-active .pos-approved-more > summary:hover { background: var(--pos-hover-bg); }
body.pos-active .pos-approved-header-actions > .pos-approved-new-sale { border-color: var(--pos-accent); background: var(--pos-accent); color: var(--pos-accent-fg); font-weight: 650; }
body.pos-active .pos-approved-more { position: relative; }
body.pos-active .pos-approved-more > summary { list-style: none; }
body.pos-active .pos-approved-more-list { position: absolute; right: 0; top: 46px; z-index: 10; display: grid; width: 180px; padding: 6px; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-raised); box-shadow: var(--pos-shadow); }
body.pos-active .pos-approved-more-list button { min-height: 36px; border: 0; background: transparent; color: var(--pos-text); text-align: left; cursor: pointer; }
body.pos-active .pos-approved-more-list button:hover { background: var(--pos-hover-bg); }
body.pos-active #posView .pos-master-workspace { display: grid; grid-template-rows: minmax(0,1fr); min-width: 0; min-height: 0; margin: 0; padding-inline: clamp(6px,.75cqw,13px); overflow: hidden; }
body.pos-active #posView .pos-task-controls { display: none; }
body.pos-active #posView .pos-master-regions { display: grid; grid-template-columns: minmax(170px,clamp(170px,18cqw,230px)) minmax(490px,1fr) minmax(230px,clamp(230px,20cqw,285px)); gap: clamp(6px,.65cqw,10px); min-width: 0; min-height: 0; overflow: hidden; }
body.pos-active #posView .pos-master-regions > section { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-panel-bg); color: var(--pos-text); box-shadow: none; }
body.pos-active #posView .pos-master-regions > section[hidden] { display: none; }
body.pos-active #posView .pos-master-regions > .pos-payment { overflow-y: auto; scrollbar-width: thin; }
body.pos-active #posView .pos-finder > .panel-head { display: grid; flex: none; gap: 8px; height: 90px; min-height: 90px; margin: 0; padding: 9px 13px; border: 0; border-bottom: 1px solid var(--pos-soft-line); background: transparent; }
body.pos-active #posView .pos-finder .eyebrow, body.pos-active #posView .pos-payment-heading .eyebrow, body.pos-active #posView .pos-transaction .eyebrow { display: none; }
body.pos-active #posView .pos-finder h3 { margin: 0; font-size: 16px; }
body.pos-active #posView .pos-search-label { width: 100%; max-width: none; margin: 0; }
body.pos-active #posView .pos-search-label .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.pos-active #posView #posProductSearch { width: 100%; min-height: 36px; padding: 5px 10px; border: 1px solid var(--pos-control-border); border-radius: 5px; background: var(--pos-control-bg); color: var(--pos-text); font-size: 11px; }
body.pos-active #posView #posProducts { display: block; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow: auto; scrollbar-width: thin; }
body.pos-active #posView .vx-pos-product { display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; gap: 8px; min-height: 55px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--pos-soft-line); border-radius: 0; background: transparent; }
body.pos-active #posView .vx-pos-product:hover { background: var(--pos-hover-bg); }
body.pos-active #posView .vx-pos-product-content, body.pos-active #posView .vx-pos-product-identity { display: grid; gap: 2px; min-width: 0; }
body.pos-active #posView .vx-pos-product-reference { display: block; min-width: 0; overflow: hidden; color: var(--pos-text); font-size: 12px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
body.pos-active #posView .vx-pos-product-name { min-width: 0; overflow: hidden; color: var(--pos-muted); font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
body.pos-active #posView .vx-pos-product-availability { min-width: 0; overflow: hidden; color: var(--pos-muted); font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
body.pos-active #posView .vx-pos-product .vx-button { display: grid; place-items: center; width: 30px; min-width: 30px; min-height: 32px; padding: 0; border: 0; border-radius: 5px; background: var(--pos-accent); color: var(--pos-accent-fg); font-size: 22px; }
body.pos-active .pos-approved-catalog-footer { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 62px; padding: 0 13px; border-top: 1px solid var(--pos-soft-line); color: var(--pos-accent); font-size: 12px; }
body.pos-active .pos-approved-catalog-footer button { padding: 0; border: 0; background: transparent; color: var(--pos-accent); font-size: 12px; cursor: pointer; }
body.pos-active .pos-approved-catalog-footer span:last-child { color: var(--pos-muted); font-size: 11px; }
body.pos-active #posView .pos-transaction > .panel-head { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 86px; margin: 0; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--pos-soft-line); background: transparent; }
body.pos-active .pos-approved-document-kicker { display: block; margin-bottom: 6px; color: var(--pos-muted); font-size: 11px; letter-spacing: .03em; }
body.pos-active #posView .pos-transaction h3 { margin: 0; color: var(--pos-text); font-size: 23px; line-height: 1.1; }
body.pos-active #posView #posItemCount { color: var(--pos-muted); font-size: 11px; }
body.pos-active #posView .pos-document-context { display: flex; align-items: center; flex: none; min-height: 79px; padding: 0 14px; border-bottom: 1px solid var(--pos-soft-line); }
body.pos-active #posView .pos-document-context label { width: 100%; margin: 0; color: var(--pos-muted); font-size: 11px; }
body.pos-active #posView #posCustomerId { width: 100%; min-height: 35px; margin-top: 5px; padding: 5px 10px; border: 1px solid var(--pos-control-border); border-radius: 5px; background: var(--pos-control-alt-bg); color: var(--pos-text); font-size: 12px; }
body.pos-active #posView #posCustomerSuggestions { position: absolute; z-index: 4; width: min(460px,45vw); max-height: 180px; overflow: auto; background: var(--pos-raised); }
body.pos-active #posView .pos-line-columns, body.pos-active #posView .vx-dense-line-item { display: grid; grid-template-columns: 18px minmax(86px,1.35fr) minmax(58px,.7fr) 76px minmax(62px,.8fr) 58px 34px minmax(66px,.9fr) 22px; gap: 6px; align-items: center; min-width: 0; padding-inline: 10px; }
body.pos-active #posView .pos-line-columns { flex: none; min-height: 42px; border-bottom: 1px solid var(--pos-strong-border); background: var(--pos-subtle-bg); color: var(--pos-text); font-size: 9.5px; white-space: nowrap; }
body.pos-active #posView .pos-line-columns span:nth-child(1), body.pos-active #posView .pos-line-columns span:nth-child(4), body.pos-active #posView .pos-line-columns span:nth-child(7), body.pos-active #posView .pos-line-columns span:nth-child(9) { text-align: center; }
body.pos-active #posView .pos-line-columns span:nth-child(2), body.pos-active #posView .pos-line-columns span:nth-child(3) { text-align: left; }
body.pos-active #posView .pos-line-columns span:nth-child(5), body.pos-active #posView .pos-line-columns span:nth-child(6), body.pos-active #posView .pos-line-columns span:nth-child(8) { text-align: right; }
body.pos-active #posView #posCartItems { display: block; flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: auto; scrollbar-width: thin; }
body.pos-active #posView .vx-dense-line-item { min-height: 61px; margin: 0; padding-block: 5px; border: 0; border-bottom: 1px solid var(--pos-line); border-radius: 0; background: transparent; box-shadow: none; color: var(--pos-text); font-size: 11px; }
body.pos-active #posView .vx-dense-line-item::before { content: attr(data-position); grid-column: 1; color: var(--pos-muted); text-align: center; }
body.pos-active #posView .vx-line-cell { display: block; min-width: 0; padding: 0; border: 0; background: transparent; text-align: right; }
body.pos-active #posView .vx-line-label { display: none; }
body.pos-active #posView .vx-line-identity { grid-column: 2; text-align: left; }
body.pos-active #posView .vx-pos-cart-description { display: grid; min-width: 0; gap: 2px; }
body.pos-active #posView .vx-pos-cart-reference, body.pos-active #posView .vx-pos-cart-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
body.pos-active #posView .vx-pos-cart-reference { font-size: 11px; font-weight: 650; }
body.pos-active #posView .vx-pos-cart-name { color: var(--pos-muted); font-size: 9.5px; }
body.pos-active #posView .vx-line-availability { grid-column: 3; overflow: hidden; color: var(--pos-muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
body.pos-active #posView .vx-line-quantity { grid-column: 4; text-align: center; }
body.pos-active #posView .vx-pos-quantity-controls { display: grid; grid-template-columns: 24px minmax(24px,1fr) 24px; grid-template-rows: 32px; align-items: center; align-content: center; justify-content: stretch; gap: 0; height: 36px; padding: 0; overflow: hidden; border: 1px solid var(--pos-line); border-radius: 6px; }
body.pos-active #posView .vx-pos-quantity-controls .vx-button { display: inline-grid; place-items: center; width: 24px; min-width: 24px; height: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--pos-text); font-size: 14px; font-weight: 700; line-height: 1; }
body.pos-active #posView .pos-quantity-input { width: 100%; min-width: 24px; height: 32px; min-height: 32px; padding: 0 2px; border: 0; background: transparent; color: var(--pos-text); text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 32px; }
body.pos-active #posView .pos-quantity-input::-webkit-inner-spin-button, body.pos-active #posView .pos-quantity-input::-webkit-outer-spin-button, body.pos-active #posView .pos-discount-input::-webkit-inner-spin-button, body.pos-active #posView .pos-discount-input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
body.pos-active #posView :is(.pos-quantity-input,.pos-discount-input) { appearance: textfield; -moz-appearance: textfield; }
body.pos-active #posView .vx-line-unit-price { grid-column: 5; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.pos-active #posView .vx-line-adjustments { display: contents; }
body.pos-active #posView .vx-line-discount { grid-column: 6; color: var(--pos-accent); }
body.pos-active #posView .vx-pos-discount-control { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px; }
body.pos-active #posView .pos-discount-input { width: 100%; min-width: 0; min-height: 28px; padding: 2px; border: 1px solid var(--pos-line); background: var(--pos-control-bg); color: var(--pos-text); text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
body.pos-active #posView .vx-line-tax { grid-column: 7; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.pos-active #posView .vx-line-amount { grid-column: 8; overflow: hidden; font-weight: 700; text-align: right; white-space: nowrap; text-overflow: clip; font-variant-numeric: tabular-nums; }
body.pos-active #posView .vx-line-actions { display: flex; grid-column: 9; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; }
body.pos-active #posView .vx-line-actions .vx-button { width: 18px; min-width: 18px; min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--pos-muted); font-size: 18px; }
body.pos-active #posView .vx-line-message { grid-column: 2/-1; font-size: 10px; }
body.pos-active .pos-approved-document-footer { display: flex; justify-content: space-between; align-items: center; flex: none; min-height: 52px; padding: 6px 12px; border-top: 1px solid var(--pos-soft-line); background: var(--pos-surface); }
body.pos-active .pos-approved-document-footer span { align-self: center; color: var(--pos-muted); font-size: 11px; }
body.pos-active #posView #posClearCart { min-height: 34px; padding: 0 12px; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-secondary-bg); color: var(--pos-text); font-size: 12px; }
body.pos-active #posView .pos-payment-heading { display: flex; align-items: center; gap: 12px; flex: none; min-height: 59px; padding: 0 15px; border-bottom: 1px solid var(--pos-soft-line); }
body.pos-active #posView .pos-payment-heading::before { content: '▣'; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--pos-accent-soft); color: var(--pos-accent); font-size: 19px; }
body.pos-active #posView .pos-payment-heading h3 { margin: 0; font-size: 16px; }
body.pos-active #posView .pos-payment-currency { margin-left: auto; color: var(--pos-muted); font-size: 11px; }
body.pos-active #posView .pos-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(88px,auto); gap: 12px 10px; margin: 0 15px; padding: 17px 0 18px; border: 0; border-bottom: 1px solid var(--pos-soft-line); color: var(--pos-text); font-size: 12px; font-variant-numeric: tabular-nums; }
body.pos-active #posView .pos-summary > span { text-align: left; }
body.pos-active #posView .pos-summary > strong { min-width: 0; text-align: right; white-space: nowrap; font-weight: 600; }
body.pos-active #posView .pos-summary span:nth-last-child(2) { grid-column: 1; padding-top: 14px; border-top: 1px solid var(--pos-soft-line); color: var(--pos-muted); font-size: 11px; letter-spacing: .04em; }
body.pos-active #posView .pos-summary strong:last-child { grid-column: 2; margin-top: 0; padding-top: 8px; border-top: 1px solid var(--pos-soft-line); font-size: clamp(22px,2vw,30px); line-height: 1.1; text-align: right; letter-spacing: -.04em; }
body.pos-active #posView .pos-approved-units { margin: -7px 15px 0; padding-bottom: 18px; border-bottom: 1px solid var(--pos-soft-line); color: var(--pos-muted); font-size: 10.5px; }
body.pos-active #posView .pos-payment > label, body.pos-active #posView .pos-payment > .pos-change-label, body.pos-active #posView #posCheckout, body.pos-active #posView #posStatus, body.pos-active #posView .pos-stock-override { margin-inline: 15px; }
body.pos-active #posView .pos-payment > label { display: grid; gap: 7px; margin-top: 14px; color: var(--pos-text); font-size: 12px; }
body.pos-active #posView .pos-payment :is(input,select) { width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--pos-control-border); border-radius: 6px; background: var(--pos-control-bg); color: var(--pos-text); font-size: 12px; }
body.pos-active #posView .pos-change-label { display: flex; justify-content: space-between; margin-top: 18px; color: var(--pos-muted); font-size: 11px; }
body.pos-active #posView .pos-change-label strong { color: var(--pos-text); font-size: 13px; }
body.pos-active #posView #posCheckout { flex: none; min-height: 47px; margin-top: 27px; border: 1px solid var(--pos-accent); border-radius: 6px; background: var(--pos-accent); color: var(--pos-accent-fg); font-size: 13px; font-weight: 650; }
body.pos-active #posView :is(input,select,button,summary):focus-visible { outline: 2px solid var(--vx-color-focus); outline-offset: 2px; }
body.pos-active #posView #posStatus { min-height: 16px; font-size: 11px; }
body.pos-active #posView .pos-approved-kpis { display: none; }
body.pos-active #posView .pos-approved-kpis article { display: flex; align-items: flex-start; gap: 15px; min-width: 0; padding: 18px 13px; border: 1px solid var(--pos-line); border-radius: 6px; background: var(--pos-panel-bg); }
body.pos-active .pos-approved-kpi-icon { display: grid; place-items: center; width: 47px; height: 47px; flex: none; border-radius: 7px; background: var(--pos-accent-soft); color: var(--pos-accent); font-size: 26px; }
body.pos-active .pos-approved-kpis article > div { display: grid; gap: 7px; min-width: 0; color: var(--pos-muted); font-size: 12px; }
body.pos-active .pos-approved-kpis strong { overflow: hidden; color: var(--pos-text); font-size: 18px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
body.pos-active #posView:not([data-pos-tab='venta']) { display: block; height: 100%; overflow: auto; padding: 14px; }
body.pos-active #posView:not([data-pos-tab='venta']) .pos-approved-header, body.pos-active #posView:not([data-pos-tab='venta']) .pos-approved-kpis, body.pos-active #posView:not([data-pos-tab='venta']) .pos-master-workspace { display: none; }
body.pos-active #posView:not([data-pos-tab='venta']) > .pos-tabs { display: flex; }
body.pos-active #posView:not([data-pos-tab='venta']) > .panel-head { display: flex; }
@media (max-width: 1450px) {
  body.pos-active .vx-topbar-right > .vx-company-trigger { min-width: 160px; max-width: 175px; }
  body.pos-active .vx-topbar-right .header-actions { gap: 6px; }
  body.pos-active .pos-approved-operator { display: none; }
  body.pos-active .global-search-wrap { max-width: 360px; }
}
@container pos-workspace (max-width: 1200px) {
  body.pos-active .pos-approved-header { grid-template-rows: 25px auto; height: auto; min-height: 118px; padding-bottom: 4px; }
  body.pos-active .pos-approved-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 42px 34px; align-content: start; gap: 4px 10px; height: auto; }
  body.pos-active .pos-approved-title { grid-column: 1; grid-row: 1; }
  body.pos-active .pos-approved-header-actions { grid-column: 2; grid-row: 1; margin-left: 0; gap: 6px; }
  body.pos-active .pos-operation-context { grid-column: 1/-1; grid-row: 2; justify-content: space-between; gap: 8px; }
  body.pos-active .pos-approved-header-actions > button, body.pos-active .pos-approved-more > summary { padding-inline: 10px; }
  body.pos-active #posView .pos-line-columns, body.pos-active #posView .vx-dense-line-item { grid-template-columns: 14px minmax(58px,1.2fr) minmax(60px,.7fr) 74px minmax(64px,.85fr) 50px 28px minmax(72px,.9fr) 18px; gap: 3px; padding-inline: 8px; }
  body.pos-active #posView .pos-line-columns { font-size: 8.5px; }
  body.pos-active #posView .vx-dense-line-item { font-size: 10px; }
  body.pos-active .pos-approved-catalog-footer { flex-wrap: wrap; align-content: center; gap: 3px 8px; padding: 5px 8px; }
  body.pos-active .pos-approved-catalog-footer button, body.pos-active .pos-approved-catalog-footer span:last-child { font-size: 10px; }
}
@media (max-height: 820px) {
  body.pos-active #posView .pos-payment-heading { min-height: 50px; }
  body.pos-active #posView .pos-summary { gap: 7px 6px; padding-block: 10px; }
  body.pos-active #posView .pos-summary span:nth-last-child(2) { padding-top: 10px; }
  body.pos-active #posView .pos-summary strong:last-child { font-size: 32px; }
  body.pos-active #posView .pos-approved-units { padding-bottom: 10px; }
  body.pos-active #posView .pos-payment > label { gap: 4px; margin-top: 8px; }
  body.pos-active #posView .pos-payment :is(input,select) { min-height: 36px; }
  body.pos-active #posView .pos-change-label { margin-top: 10px; }
  body.pos-active #posView #posCheckout { min-height: 42px; margin-top: 10px; }
}
/* 170 finder + 490 document + 230 payment + two 6px gaps + fluid side padding ≈ 916px. */
@container pos-workspace (max-width: 916px) {
  body.pos-active .pos-approved-heading { flex-wrap: wrap; height: auto; }
  body.pos-active .pos-approved-header { min-height: 105px; }
  body.pos-active #posView .pos-master-workspace { grid-template-rows: auto minmax(0,1fr); }
  body.pos-active #posView .pos-task-controls:not([hidden]) { display: flex; gap: 6px; padding: 5px 0; }
  body.pos-active #posView .pos-master-regions { grid-template-columns: minmax(0,1fr); }
  body.pos-active #posView .pos-master-workspace[data-pos-task='finder'] .pos-master-regions > section:not(.pos-finder),
  body.pos-active #posView .pos-master-workspace[data-pos-task='transaction'] .pos-master-regions > section:not(.pos-transaction),
  body.pos-active #posView .pos-master-workspace[data-pos-task='payment'] .pos-master-regions > section:not(.pos-payment) { display: none; }
}