/* Foundation shared by every screen; screen layouts remain in style.css. */
:root {
  --bg: #f4fbf8;
  --surface: #ffffff;
  --border: #dce9e3;
  --ink: #17352e;
  --muted: #52665f;
  --quiet: #808080;
  --blue: #087f69;
  --action: #087f69;
  --action-hover: #066653;
  --wash: #d6f4e9;
  --teal: #18764f;
  --positive: #18764f;
  --mint: #e9f8f3;
  --coral: #ff4b50;
  --negative: #b42335;
  --blush: #fff0f1;
  --plum: #734b7e;
  --lavender: #f5eef8;
  --amber: #946200;
  --cream: #fff6df;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: 14px;
  --line: 1.5;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --card: 14px;
  --panel: 20px;
  --pill: 999px;

  /* Bootstrap utilities use RGB companions; components also need local tokens. */
  --bs-primary: var(--action);
  --bs-primary-rgb: 8, 127, 105;
  --bs-success: var(--positive);
  --bs-success-rgb: 24, 118, 79;
  --bs-danger: var(--negative);
  --bs-danger-rgb: 180, 35, 53;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 148, 98, 0;
  --bs-info: #235fa0;
  --bs-info-rgb: 35, 95, 160;
  --bs-info-text-emphasis: var(--bs-info);
  --bs-info-bg-subtle: var(--bg);
  --bs-info-border-subtle: var(--border);
  --bs-success-text-emphasis: var(--positive);
  --bs-success-bg-subtle: var(--mint);
  --bs-success-border-subtle: var(--border);
  --bs-danger-text-emphasis: var(--negative);
  --bs-danger-bg-subtle: var(--blush);
  --bs-danger-border-subtle: var(--border);
  --bs-warning-text-emphasis: var(--amber);
  --bs-warning-bg-subtle: var(--cream);
  --bs-warning-border-subtle: var(--border);
  --bs-primary-text-emphasis: var(--ink);
  --bs-primary-bg-subtle: var(--wash);
  --bs-primary-border-subtle: var(--border);
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 23, 53, 46;
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: var(--bg);
  --bs-tertiary-bg-rgb: 244, 251, 248;
  --bs-secondary-color: var(--muted);
  --bs-secondary: var(--muted);
  --bs-secondary-rgb: 82, 102, 95;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-link-color: var(--action);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--action-hover);
  --bs-link-hover-color-rgb: 6, 102, 83;
  --bs-font-sans-serif: var(--font);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--text);
  --bs-body-line-height: var(--line);
  --bs-border-radius: var(--card);
  --bs-border-radius-sm: var(--card);
  --bs-border-radius-lg: var(--panel);
  --bs-border-radius-xl: var(--panel);
  --bs-border-radius-xxl: var(--panel);
  --bs-border-radius-pill: var(--pill);
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
}

body { background: var(--bg); }
.btn { --bs-btn-border-radius: var(--pill); }
.btn-primary {
  --bs-btn-bg: var(--action);
  --bs-btn-border-color: var(--action);
  --bs-btn-color: var(--surface);
  --bs-btn-hover-bg: var(--action-hover);
  --bs-btn-hover-border-color: var(--action-hover);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-active-bg: var(--action-hover);
  --bs-btn-active-border-color: var(--action-hover);
  --bs-btn-active-color: var(--surface);
  --bs-btn-disabled-bg: var(--action);
  --bs-btn-disabled-border-color: var(--action);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--action);
  --bs-btn-border-color: var(--action);
  --bs-btn-hover-bg: var(--action);
  --bs-btn-hover-border-color: var(--action);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-active-bg: var(--action);
  --bs-btn-active-border-color: var(--action);
  --bs-btn-active-color: var(--surface);
  --bs-btn-disabled-color: var(--action);
  --bs-btn-disabled-border-color: var(--action);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-secondary {
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--wash);
  --bs-btn-hover-border-color: var(--action);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--wash);
  --bs-btn-active-border-color: var(--action);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-success {
  --bs-btn-bg: var(--positive);
  --bs-btn-border-color: var(--positive);
  --bs-btn-color: var(--surface);
  --bs-btn-hover-bg: var(--positive);
  --bs-btn-hover-border-color: var(--positive);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-active-bg: var(--positive);
  --bs-btn-active-border-color: var(--positive);
  --bs-btn-active-color: var(--surface);
  --bs-btn-disabled-bg: var(--positive);
  --bs-btn-disabled-border-color: var(--positive);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-outline-success {
  --bs-btn-color: var(--positive);
  --bs-btn-border-color: var(--positive);
  --bs-btn-hover-bg: var(--positive);
  --bs-btn-hover-border-color: var(--positive);
  --bs-btn-hover-color: var(--surface);
  --bs-btn-active-bg: var(--positive);
  --bs-btn-active-border-color: var(--positive);
  --bs-btn-active-color: var(--surface);
  --bs-btn-disabled-color: var(--positive);
  --bs-btn-disabled-border-color: var(--positive);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-link { --bs-btn-color: var(--action); --bs-btn-hover-color: var(--action-hover); }
/* Bootstrap's compiled status utilities otherwise retain upstream text colors. */
.text-bg-success, .text-bg-danger, .text-bg-info, .text-bg-warning { color: var(--surface) !important; }
.toast { --bs-toast-color: var(--ink); --bs-toast-bg: var(--surface); }
.form-control, .form-select { border-color: var(--quiet); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--action); border-color: var(--action); }
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.btn:focus-visible, .nav-link:focus-visible, .btn-close:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  box-shadow: none;
}
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--border); --bs-card-border-radius: var(--card); }
.modal-content { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--border); --bs-modal-border-radius: var(--panel); }

/* Desktop Collapse and the responsive drawer share the same navigation nodes. */
.nav-icons { position: absolute; overflow: hidden; }
.bi { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; vertical-align: middle; }
#section-drawer { min-width: 0; --bs-offcanvas-width: min(320px, 90vw); }
#section-drawer .offcanvas-header { padding: var(--s4); border-bottom: 1px solid var(--border); }
.drawer-close { width: 44px; min-height: 44px; padding: 0; }
.nav-group { display: grid; gap: var(--s1); }
.nav-group-title { margin: var(--s2) var(--s3) var(--s1); color: var(--muted); font-size: 12px; font-weight: 500; }
#section-menu .nav-link { display: flex; align-items: center; gap: var(--s3); width: 100%; }
@media (min-width: 992px) {
  #section-drawer { position: sticky; top: 0; align-self: start; }
  #section-drawer:has(> .collapse:not(.show)) { display: none; }
}
@media (max-width: 991px) {
  #section-drawer {
    --bs-offcanvas-height: auto;
    max-height: 80dvh;
    overflow-y: auto;
    border-radius: var(--panel) var(--panel) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #section-drawer .offcanvas-header { flex-shrink: 0; }
  .bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s1);
    padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .bottom-nav .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
    min-width: 44px;
    min-height: 44px;
    padding: var(--s1);
    color: var(--ink);
    font-size: var(--text);
  }
  .bottom-nav-icon { display: inline-flex; justify-content: center; padding: var(--s1) var(--s4); border-radius: var(--pill); }
  .bottom-nav .active .bottom-nav-icon, .bottom-nav .btn:hover .bottom-nav-icon { background: var(--wash); }
  #app.sales-active .bottom-nav { display: none; }
  /* Keep notification dismissal above navigation, never on top of Más. */
  #app:not(.sales-active) #notification-area > #toast-container { bottom: calc(var(--s8) * 3 + env(safe-area-inset-bottom)) !important; }
  #section-menu, #section-menu.show { display: flex; flex-direction: column; flex-wrap: nowrap; height: auto !important; border: 0 !important; gap: var(--s4); }
}
.topbar {
  gap: var(--s4);
  min-height: 72px;
  padding: var(--s3) var(--s6);
}
.brand {
  color: var(--blue);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -1.5px;
}
.brand:hover, .brand-dot { color: var(--blue); }
.topbar .brand { margin-right: var(--s6); }
.topbar .btn { padding: var(--s2) var(--s4); }
#connection { display: inline-flex; align-items: center; gap: var(--s2); }
.connection-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--pill); }
.connection-online .connection-dot { background: var(--positive); }
.connection-connecting .connection-dot { background: var(--amber); }
.connection-offline .connection-dot { background: var(--negative); }
.topbar > .btn { width: 44px; padding: 0; flex-shrink: 0; }
.tabs {
  --bs-nav-link-color: var(--muted);
  --bs-nav-link-hover-color: var(--ink);
  --bs-nav-pills-link-active-bg: var(--wash);
  --bs-nav-pills-link-active-color: var(--ink);
  --bs-nav-pills-border-radius: var(--card);
  gap: var(--s2);
  padding: var(--s6) var(--s4);
}
.tabs .nav-link {
  min-height: 48px;
  padding: var(--s3);
  font-size: var(--text);
}
.tabs .nav-link:hover { background: var(--wash); }
main { padding: var(--s6); }
#app:not(.sales-active) main { padding-top: var(--s4); }

@media (min-width: 992px) {
  #app { grid-template-columns: 184px minmax(0, 1fr); }
  #app.menu-collapsed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .topbar { gap: var(--s2); padding: var(--s3) var(--s4); }
  .topbar .brand { margin-right: var(--s2); }
  #connection { justify-content: flex-end; }
  .tabs { padding: var(--s3) var(--s4); }
  main { padding: var(--s4); padding-bottom: calc(var(--s8) * 3 + env(safe-area-inset-bottom)); }
}
/* Vender desktop uses the existing catalog, draft and native payment controls. */
#checkout-catalog > .card { padding: 0; border: 0; background: transparent; }
#category-filters {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  padding: 3px 3px var(--s3);
}
#category-filters .btn {
  flex: 1 0 108px;
  border-color: transparent;
  border-radius: var(--card) !important;
  padding: var(--s3);
  text-align: left;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
}
#category-filters .btn[aria-pressed="true"] { border-color: var(--action); background: var(--wash); color: var(--ink); }
.category-count { display: block; margin-top: var(--s2); color: var(--muted); font-size: 11px; }
#checkout .catalog-search { margin: var(--s2) 0 !important; }
#sale-search { min-height: 54px; border-radius: var(--pill); padding-inline: var(--s4); }
.catalog-tools { display: flex; align-items: center; gap: var(--s2); }
.catalog-tools > * { flex: 1; min-width: 0; }
.catalog-tools .btn, .catalog-tools .form-select { font-size: 12px; }
#checkout-help { font-size: 11px; color: var(--muted); }
#sale-products { gap: var(--s3); }
#sale-products .catalog-product { border-radius: var(--card) !important; padding: var(--s3); gap: var(--s2); min-height: 158px; color: var(--ink); background: var(--surface); }
#sale-products .catalog-product:hover { border-color: var(--action); background: var(--wash); }
#sale-products .catalog-product-photo:not(.visually-hidden) { width: 44px; height: 44px; }
.catalog-monogram { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--card); background: var(--wash); color: var(--ink); font-size: 16px; }
#sale-products .catalog-product-detail { font-size: 12px; gap: var(--s1); }
#sale-products .badge { background: var(--wash) !important; color: var(--ink) !important; font-size: 9px; padding: 5px 8px; white-space: normal; text-align: left; }
#sale-products .catalog-product:nth-child(3n+2) .badge { background: var(--mint) !important; color: var(--positive) !important; }
#sale-products .catalog-product:nth-child(3n) .badge { background: var(--lavender) !important; color: var(--plum) !important; }
#sale-products .catalog-price { font-size: 17px; letter-spacing: -.5px; }
#sale-products .unpriced { align-self: flex-start; background: var(--cream); color: var(--amber); border-radius: var(--pill); padding: 4px 8px; font-size: 12px; }
#checkout .checkout-ticket { border-radius: var(--panel); overflow: hidden; }
#checkout .card-header, #checkout .card-footer { border: 0; padding: var(--s3) var(--s6); }
#checkout .card-header { border-bottom: 1px dashed var(--border); }
.ticket-title { font-size: 20px; margin: 0 0 var(--s1); font-weight: 400; }
#checkout-customer-name { font-size: 13px !important; color: var(--muted); }
#select-customer { font-size: 12px; padding-inline: var(--s2); color: var(--action); border-color: transparent; }
#checkout .checkout-ticket-body { padding: 0 var(--s4); }
#checkout .checkout-line { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s1); padding: var(--s2) 0; border-bottom: 1px dashed var(--border); background: transparent; }
#checkout .checkout-line-detail { grid-column: 2; font-size: 12px; }
#checkout .checkout-line-detail p { font-size: 11px; }
#checkout .checkout-line-actions { grid-column: 2; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--s2); }
#checkout .checkout-line > .btn { grid-column: 3; grid-row: 1 / 3; font-size: 11px; }
#checkout .quantity-stepper { flex-wrap: nowrap; width: 138px; border-radius: var(--pill); background: var(--bg); }
#checkout .quantity-stepper .btn { min-width: 36px; padding: 0; border: 0; background: transparent; color: var(--ink); }
#checkout .quantity-stepper input { background: transparent; border: 0; font-size: 12px; }
.quantity-unit { align-self: center; padding-right: var(--s2); font-size: 11px; }
#checkout .line-subtotal { white-space: nowrap; margin: 0; font-size: 12px; }
#clear-cart { font-size: 11px; }
#checkout .checkout-total { border-top: 1px dashed var(--border); padding-top: var(--s3); }
#checkout-payments legend { font-size: 12px !important; margin-bottom: var(--s2); }
#checkout-payments .btn-group { padding: var(--s1); gap: var(--s1); background: var(--bg); border-radius: var(--pill); }
#checkout-payments .btn-group .btn { border-radius: var(--pill) !important; border-color: transparent; font-size: 12px; padding-inline: var(--s1); }
#checkout-payments .btn-group [aria-pressed="true"] { color: var(--action); border-color: var(--action); background: var(--surface); }
#checkout-payments .form-label:not([hidden]) { display: flex !important; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 12px; }
#checkout-payments .form-control { width: 120px; border-radius: var(--pill); text-align: right; }
#checkout-mode-notice, #checkout-summary { font-size: 11px; line-height: 1.4; margin-bottom: var(--s2); }
#checkout-change { color: var(--positive) !important; }
#confirm-sale { min-height: 52px; }
@media (min-width: 992px) {
  #app.sales-active main { padding-top: var(--s6); }
  #checkout > .row { display: grid; grid-template-columns: minmax(0, 63fr) minmax(0, 37fr); gap: var(--s6); margin: 0; }
  #checkout > .row > * { width: auto; padding: 0; margin: 0; min-width: 0; }
  #checkout .checkout-ticket { height: auto; min-height: calc(100dvh - 100px); }
  #checkout .card-header, #checkout .card-footer { padding: var(--s2) var(--s4); }
  #checkout .card-header > div { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: baseline; }
  #checkout .ticket-title { margin: 0; font-size: 18px; }
  #checkout-customer-name { grid-column: 1 / -1; }
  #checkout .checkout-ticket-body { flex: 1 0 auto; }
  #cart { overflow: visible; }
  #checkout .checkout-line { grid-template-columns: 28px minmax(0, 1fr) 168px; column-gap: var(--s1); row-gap: 0; padding: var(--s1) 0; align-items: center; min-height: 64px; }
  #checkout .checkout-line .catalog-monogram { width: 28px; height: 28px; font-size: 13px; grid-row: 1 / 3; }
  #checkout .checkout-line-detail { grid-row: 1; font-size: 11px; line-height: 1.35; }
  #checkout .checkout-line-detail p { font-size: 10px; margin-top: 2px; }
  #checkout .checkout-line-actions { grid-column: 3; grid-row: 1 / 3; flex-direction: row-reverse; gap: var(--s1); }
  #checkout .quantity-stepper { width: 118px; flex-shrink: 0; }
  #checkout .quantity-stepper .btn { min-width: 28px; }
  #checkout .quantity-stepper input { padding-inline: 0; font-size: 11px; }
  #checkout .quantity-unit { padding-right: var(--s1); font-size: 10px; }
  #checkout .line-subtotal { font-size: 11px; }
  #checkout .checkout-line > .btn { grid-column: 2; grid-row: 2; justify-self: start; min-height: 20px; padding: 0; font-size: 10px; }
  #clear-cart { min-height: 32px; padding-block: var(--s1); }
  #checkout .checkout-ticket-footer { flex-shrink: 0; }
  #checkout .checkout-total { margin-block: var(--s1) !important; padding-top: var(--s1); }
  #checkout-payments legend { margin-bottom: var(--s1); }
  #checkout-payments .btn-group { margin-bottom: var(--s1) !important; }
  #checkout-payments .form-label { margin-bottom: var(--s1); }
  #checkout-mode-notice, #checkout-summary { margin-block: var(--s1) !important; }
  #checkout-mode-notice:empty { margin: 0 !important; }
  #confirm-sale { min-height: 44px; }
  #sale-products { max-height: calc(100dvh - 385px); }
}
/* The same ticket stays in flow until the phone checkout is opened. */
#mobile-cart-bar, #ticket-close, #vender-back { display: none; }
@media (max-width: 991px) {
  #app.sales-active main { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  #app.sales-active:has(#mobile-cart-bar:not([hidden])):not(:has(.ticket-open)) #notification-area > #toast-container { bottom: calc(var(--s8) * 3 + env(safe-area-inset-bottom)) !important; }
  #app.sales-active #vender-back { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  body:has(.ticket-open) { overflow: hidden; }
  #checkout-order.ticket-open {
    position: fixed;
    inset: 0;
    z-index: 1040;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: calc(var(--s4) + env(safe-area-inset-top)) calc(var(--s4) + env(safe-area-inset-right)) calc(var(--s4) + env(safe-area-inset-bottom)) calc(var(--s4) + env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
  }
  .ticket-open #ticket-close { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; margin-bottom: var(--s4); }
  #category-filters .btn {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    max-width: none;
    padding: var(--s2) var(--s4);
    border-color: var(--border);
    border-radius: var(--pill) !important;
    white-space: nowrap;
  }
  #category-filters .category-count { display: inline; margin: 0 0 0 var(--s2); }
  #sale-products { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
  #sale-products .catalog-monogram { width: 44px; height: 44px; }
  #sale-products .catalog-product { min-height: 163px; }
  #checkout .quantity-stepper { width: 160px; }
  #checkout .quantity-stepper .btn { min-width: 44px; }
  #cart-heading { scroll-margin-top: var(--s6); }
  #mobile-cart-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  #mobile-cart-count { display: block; font-size: 11px; color: var(--muted); }
  #mobile-cart-total { font-size: 22px; letter-spacing: -.5px; }
  #mobile-cart-jump { min-width: 44px; min-height: 48px; padding-inline: var(--s6); }
}
/* Productos reuses the original form in a dismissible, non-modal side panel. */
.products-heading { margin-bottom: var(--s6); }
.products-heading h2 { font-size: 28px; font-weight: 400; letter-spacing: -.8px; }
.products-heading p { margin-bottom: 0; }
.products-list { min-width: 0; }
#products-count { font-size: 21px; font-weight: 400; margin-bottom: var(--s3); }
.products-tools { display: grid; gap: var(--s3); position: sticky; top: 0; z-index: 1; padding: var(--s2) 0 var(--s4); background: var(--bg); }
#products-search { min-height: 52px; border-radius: var(--pill); padding-inline: var(--s4); }
.product-category { display: inline-block; background: var(--wash); color: var(--ink); border-radius: var(--pill); padding: var(--s1) var(--s2); }
/* Create and edit live on their own screen (patterns.md P4, P5, P10): one column, grouped sections. */
.products-form-view { max-width: 760px; border-radius: var(--panel); padding: var(--s6); }
.products-form-view .panel-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.products-form-view h2 { font-size: 24px; font-weight: 400; margin: 0; }
.form-section { margin: 0 0 var(--s6); padding: 0 0 var(--s4); border: 0; border-bottom: 1px dashed var(--border); }
.form-section legend { display: flex; align-items: center; gap: var(--s2); float: none; width: auto; margin-bottom: var(--s3); font-size: 16px; }
.products-form-view .form-label, .products-form-view .muted { font-size: 12px; }
.products-form-view .form-row { grid-template-columns: minmax(0, 1fr); }
.products-form-view .actions { margin-block: var(--s3); }
#product-photo-editor { border-top: 1px dashed var(--border); margin-top: var(--s4); padding-top: var(--s4); }
#product-photo-preview, #product-photo-preview .product-photo { width: 96px; height: 96px; }
/* Inventario retains the existing filters, receipt actions and dated lot details. */
.inventory-heading h2 { font-size: 28px; font-weight: 400; letter-spacing: -.8px; }
.inventory-heading p { margin-bottom: 0; }
.inventory-tools { display: grid; grid-template-columns: minmax(0, 1fr) 185px 165px; gap: var(--s3); margin-block: var(--s6); align-items: end; }
.inventory-tools .search { width: 100%; }
.inventory-tools .form-label { min-width: 0; margin: 0; font-size: 12px; color: var(--muted); }
.inventory-tools .form-control, .inventory-tools .form-select { min-height: 48px; border-radius: var(--pill); padding-inline: var(--s4); margin-top: var(--s1); font-size: 14px; }
.inventory-list { border: 1px solid var(--border); border-radius: var(--panel); background: var(--surface); overflow: hidden; }
.inventory-list-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); }
.inventory-list-heading h3 { font-size: 20px; font-weight: 400; margin: 0; }
#inventory-count { margin: 0; font-size: 12px; }
#product-list { display: block; }
#product-list .inventory-row { display: grid; grid-template-columns: 36px minmax(140px, 1fr) minmax(240px, 1.4fr) 100px 190px; align-items: center; gap: var(--s1) var(--s3); border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: var(--s2) var(--s6); margin: 0; }
#product-list .product-photo { width: 36px; height: 36px; margin: 0; font-size: 10px; }
.inventory-identity { min-width: 0; }
.inventory-identity strong { display: block; font-size: 13px; font-weight: 500; margin-bottom: var(--s1); }
.inventory-identity .product-category { font-size: 11px; }
.inventory-tags { display: block; font-size: 11px; }
#product-list .inventory-quantities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); font-size: 12px; margin: 0; }
.inventory-badges { display: flex; flex-wrap: wrap; gap: var(--s1); }
.inventory-status { border-radius: var(--pill); padding: 6px 10px; font-size: 11px; font-weight: 400; }
.inventory-out { color: var(--negative); background: var(--blush); }
.inventory-low { color: var(--plum); background: var(--lavender); }
.inventory-available { color: var(--positive); background: var(--mint); }
.inventory-expiring { color: var(--amber); background: var(--cream); }
.inventory-actions { display: flex; gap: var(--s2); }
#product-list .inventory-actions .btn { margin: 0; padding: var(--s1); min-height: 44px; border: 0; color: var(--action); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.inventory-lots { grid-column: 2 / -1; }
#product-list .inventory-lots p { font-size: 11px; margin: 0; }
#product-list .empty { padding: var(--s4) var(--s6); margin: 0; }
#inventario .history { margin-top: var(--s6); }
@media (max-width: 1199px) {
  #product-list .inventory-row { grid-template-columns: 36px minmax(0, 1fr) 110px; }
  .inventory-badges { grid-column: 3; grid-row: 1; }
  #product-list .inventory-quantities { grid-column: 2 / -1; grid-row: 2; }
  .inventory-actions { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--s3); }
  .inventory-lots { grid-column: 2 / -1; }
}
@media (max-width: 767px) {
  .inventory-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-tools .search { grid-column: 1 / -1; }
  .inventory-list-heading { padding: var(--s3); }
  #product-list .inventory-row { grid-template-columns: 36px minmax(0, 1fr); padding: var(--s3); }
  .inventory-badges { grid-column: 2; grid-row: auto; }
  #product-list .inventory-quantities { grid-column: 1 / -1; grid-row: auto; }
  .inventory-actions, .inventory-lots { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared list, state and form kit (public/ui-kit.js; docs/design-system/patterns.md P7-P9b, P11, P15, P19). */
.ui-table-wrap { border: 1px solid var(--border); border-radius: var(--panel); background: var(--surface); }
.ui-table { --bs-table-bg: transparent; margin: 0; }
.ui-table th { color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ui-table th, .ui-table td { padding: var(--s3) var(--s4); border-color: var(--border); }
.ui-table tbody tr { min-height: 44px; }
.ui-table tbody tr:hover { background: var(--bg); }
.ui-row-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration: none; }
.ui-row-link:hover { color: var(--action); text-decoration: underline; text-underline-offset: 4px; }
.ui-cards { display: grid; gap: var(--s2); }
.ui-card { padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--card); background: var(--surface); }
.ui-card-title { margin-bottom: var(--s1); }
.ui-card dl { display: grid; gap: var(--s1); }
.ui-card-field { display: flex; justify-content: space-between; gap: var(--s3); font-size: 12px; }
.ui-card-field dt { color: var(--muted); font-weight: 400; }
.ui-card-field dd { margin: 0; text-align: right; }
.ui-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; color: var(--muted); font-size: 12px; }
.ui-pager-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.ui-pager .btn { min-width: 44px; min-height: 44px; padding-inline: var(--s3); border-color: transparent; color: var(--ink); }
.ui-pager .btn:hover:not(:disabled) { background: var(--wash); }
.ui-pager .btn.active { background: var(--wash); border-color: var(--action); font-weight: 700; }
.ui-pager .btn:disabled { color: var(--muted); }
.ui-pager-gap { padding-inline: var(--s1); }
.ui-pager-size-label { display: inline-flex; align-items: center; gap: var(--s2); }
.ui-pager-size { width: auto; min-height: 44px; }
.ui-state { padding: var(--s6) var(--s4); text-align: center; border: 1px dashed var(--border); border-radius: var(--panel); background: var(--surface); }
.ui-state-message { margin-bottom: var(--s3); color: var(--muted); }
.ui-state-error .ui-state-message { color: var(--negative); }
.ui-skeleton { height: 52px; margin-bottom: var(--s2); border-radius: var(--card); background: linear-gradient(90deg, var(--mint) 25%, var(--bg) 50%, var(--mint) 75%); background-size: 200% 100%; animation: ui-shimmer 1.4s linear infinite; }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none; } }
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ui-chip { min-height: 44px; padding-inline: var(--s4); border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: 12px; }
.ui-chip:hover { background: var(--wash); }
.ui-chip[aria-pressed="true"] { background: var(--wash); border-color: var(--action); }
.ui-filter { display: grid; gap: var(--s1); max-width: 360px; }
.ui-filter-clear { justify-self: start; min-height: 44px; }
.ui-help { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; color: var(--action); border-radius: var(--pill); }
.ui-help:hover { background: var(--wash); }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--negative); }
.invalid-feedback { color: var(--negative); font-size: 12px; }
.ui-error-summary { border-radius: var(--card); }

/* Scanner: the camera fills the phone screen with its controls in the thumb zone (patterns.md P17). */
.scanner-dialog .scanner-status { margin: var(--s2) 0 0; text-align: center; color: var(--muted); }
@media (max-width: 575px) {
  #scanner-dialog .modal-content { height: 100dvh; border: 0; border-radius: 0; }
  #scanner-dialog .modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: var(--s2); }
  #scanner-video { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; }
  #scanner-dialog .modal-footer { justify-content: stretch; padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
  #scanner-dialog .modal-footer .btn { flex: 1 1 0; min-height: 52px; }
}

/* One blocking banner under the header, the most severe first, never dismissible (patterns.md P22, P23). */
#blocking-banner { position: sticky; top: 0; z-index: 4; display: grid; gap: var(--s2); }
#blocking-banner > .alert { margin: 0; border-radius: var(--card); }
#blocking-banner > .alert:not([hidden]) ~ .alert:not([hidden]) { display: none; }
#blocking-banner > .alert:not([hidden]) { margin-bottom: var(--s3); }

/* Compact list toolbar and top pager keep the data in the first screen (patterns.md P9c, P8b, P7b). */
.ui-filter { max-width: none; }
.ui-filter-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s3); }
.ui-filter-pair > .form-label:not(.visually-hidden) { grid-column: 2; grid-row: 1; margin: 0; }
.ui-filter-pair > input { grid-column: 1; grid-row: 2; }
.ui-filter-pair > select { grid-column: 2; grid-row: 2; }
.ui-filter-pair > .ui-filter-clear { grid-column: 1 / -1; }
.ui-pager-top { padding: 0 0 var(--s2); }
@media (min-width: 768px) {
  .products-tools { grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); align-items: end; }
}

/* Density (patterns.md P7b): headings, counts and toolbars stay small so rows reach the first screen. */
.products-heading { margin-bottom: var(--s3); }
#products-count, #customers-count { margin: 0 0 var(--s2); font-size: 14px; color: var(--muted); }
.products-tools { padding-bottom: var(--s2); }
@media (min-width: 768px) {
  .ui-table th, .ui-table td { padding-block: var(--s2); }
  .ui-table .ui-row-link { min-height: 32px; }
  #sale-search-form { padding: var(--s3) var(--s4); }
  #sale-search-form .form-row { display: contents; }
  #sale-search-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--s3); align-items: end; }
  #sale-search-form .form-label { margin: 0; font-size: 12px; }
  #sale-search-form .btn { min-height: 44px; }
}
@media (max-width: 767px) {
  .products-heading p { display: none; }
  .products-heading h2 { font-size: 24px; }
  .ui-card { padding: var(--s2) var(--s3); }
  #sale-search-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  #sale-search-form .form-label { font-size: 12px; margin-bottom: var(--s1); }
  #sale-search-form { padding: var(--s2) var(--s3); margin-bottom: var(--s2) !important; }
}