/*
  ZOW Ventas isolated layout source.
  Loaded after styles.css. Keep Venta POS layout fixes here so legacy global
  styles do not fight future changes.
*/

body.app-ventas {
  background:
    linear-gradient(90deg, rgb(3 45 40 / 5%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(3 45 40 / 5%) 1px, transparent 1px),
    radial-gradient(circle at 14% 8%, rgb(32 201 151 / 18%), transparent 24rem),
    radial-gradient(circle at 90% 14%, rgb(217 164 65 / 14%), transparent 22rem),
    linear-gradient(135deg, #f7fbf8 0%, #eaf8f3 50%, #f8f1df 100%) !important;
  background-size: 56px 56px, 56px 56px, auto, auto, auto !important;
}

body.app-ventas .ventas-operational-shell {
  width: min(1720px, calc(100vw - 32px)) !important;
  margin: 12px auto 26px !important;
}

body.app-ventas .ventas-workspace {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

body.app-ventas .ventas-tabs.module-tabs {
  position: sticky !important;
  top: 100px !important;
  z-index: 70 !important;
  width: 100% !important;
  max-height: calc(100dvh - 112px) !important;
  padding: 12px !important;
  overflow: auto !important;
  border-radius: 22px !important;
}

body.app-ventas .ventas-tabs.module-tabs button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
  text-align: left !important;
}

body.app-ventas .ventas-tabs.module-tabs .module-tab-icon {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
}

body.app-ventas .ventas-tabs.module-tabs .module-tab-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.9rem !important;
  line-height: 1.1 !important;
}

body.app-ventas .ventas-tabs.module-tabs button[hidden],
body.app-ventas .ventas-tabs.module-tabs button[aria-hidden="true"],
body.app-ventas .ventas-tabs.module-tabs button[data-permission-hidden],
body.app-ventas [data-view][hidden],
body.app-ventas [data-view][data-permission-hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.app-ventas .ventas-touch-shell[data-active-view="sell"] .operation-metrics,
body.app-ventas .ventas-touch-shell[data-active-view="sell"] .role-visual-panel,
body.app-ventas .ventas-touch-shell[data-active-view="sell"] .context-help-dock,
body.app-ventas .ventas-touch-shell[data-active-view="sell"] .section-heading {
  display: none !important;
}

body.app-ventas .ventas-touch-shell[data-active-view="sell"] .document-list,
body.app-ventas .ventas-workspace .document-list {
  min-width: 0 !important;
  overflow: visible !important;
}

/* ZOW Ventas clean POS recovery. */
body.app-ventas .pos-shell.touch-pos-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px !important;
  gap: 16px !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.app-ventas .pos-products.touch-panel {
  min-width: 0 !important;
  overflow: visible !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

body.app-ventas .touch-pos-head {
  position: sticky !important;
  top: 100px !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgb(7 94 76 / 14%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 10px 24px rgb(5 41 35 / 8%) !important;
}

body.app-ventas .touch-pos-head h2 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
  line-height: 1.05 !important;
}

body.app-ventas .pos-search-row {
  position: sticky !important;
  top: 166px !important;
  z-index: 49 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgb(7 94 76 / 14%) !important;
  border-radius: 18px !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 10px 24px rgb(5 41 35 / 8%) !important;
}

body.app-ventas .scanner-status,
body.app-ventas .pos-input-hint,
body.app-ventas .pos-result-hint {
  display: none !important;
}

body.app-ventas .product-suggestion-grid.touch-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
}

body.app-ventas .touch-product-card {
  min-width: 0 !important;
  min-height: 176px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

body.app-ventas .pos-cart.touch-cart-panel {
  position: sticky !important;
  top: 100px !important;
  z-index: 45 !important;
  min-width: 0 !important;
  max-height: calc(100dvh - 118px) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / 94%) !important;
}

body.app-ventas .cashier-checkout-bar,
body.app-ventas .pos-visible-checkout-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 55 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 9px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  border-radius: 18px !important;
}

body.app-ventas .touch-cart-head {
  display: none !important;
}

body.app-ventas .touch-cart-panel form,
body.app-ventas .cashier-cart-form {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(130px, 1fr) auto auto !important;
  gap: 10px !important;
}

body.app-ventas .pos-cart-list,
body.app-ventas .cashier-cart-items {
  min-height: 130px !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}

/* ZOW Ventas normal POS layout recovery. */
body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-shell.touch-pos-shell {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.42fr) !important;
  align-items: start !important;
  gap: 18px !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .touch-pos-head,
body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-search-row {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  transform: none !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-cart.touch-cart-panel {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  min-width: 0 !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .cashier-checkout-bar,
body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-visible-checkout-bar {
  position: static !important;
  top: auto !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  margin-bottom: 14px !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .touch-cart-panel form,
body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .cashier-cart-form {
  display: block !important;
  min-height: auto !important;
  overflow: visible !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-customer-row,
body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-sale-options {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-cart-list {
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: grid !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .touch-cart-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .cart-line-controls {
  display: grid !important;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: end !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .cart-line-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .cart-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .cart-summary .is-total {
  grid-column: 1 / -1 !important;
}

/* ZOW Ventas cashier focus recovery. */
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] {
  width: min(1760px, calc(100vw - 18px)) !important;
  margin: 8px auto 18px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .topbar {
  position: sticky !important;
  top: 6px !important;
  z-index: 120 !important;
  min-height: 60px !important;
  margin-bottom: 10px !important;
  padding: 10px 14px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .ventas-workspace {
  display: block !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .ventas-tabs.module-tabs,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .ventas-menu-toggle,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .workflow-panel,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .ventas-footer,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .section-heading,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .role-visual-panel,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .context-help-dock {
  display: none !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .content-grid,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .document-list,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] #mainList {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .pos-shell.touch-pos-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 430px) !important;
  gap: 14px !important;
  align-items: stretch !important;
  width: 100% !important;
  height: calc(100dvh - 92px) !important;
  min-height: 620px !important;
  overflow: hidden !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .pos-ambient-strip,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .pos-mobile-switch,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .mobile-pos-summary,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .mobile-pos-toast {
  display: none !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .touch-pos-head {
  position: static !important;
  display: flex !important;
  margin: 0 0 8px !important;
  padding: 10px 12px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .pos-toast,
body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .scanner-status {
  display: none !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .pos-search-row {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  margin: 0 0 10px !important;
  padding: 8px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .pos-products-block {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .pos-products-block .touch-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  align-content: start !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 2px 6px 4px 0 !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .touch-product-card {
  min-height: 150px !important;
  padding: 12px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-cart-pane {
  position: static !important;
  top: auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 12px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-checkout-bar {
  position: static !important;
  top: auto !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  margin: 0 0 10px !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-cart-form {
  display: grid !important;
  grid-template-rows: auto auto minmax(150px, 1fr) auto auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-cart-items {
  min-height: 150px !important;
  max-height: none !important;
  overflow: auto !important;
}

@media (max-width: 1320px) {
  body.app-ventas .ventas-touch-shell:not(.pos-focus-mode)[data-active-view="sell"] .pos-shell.touch-pos-shell {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  body.app-ventas .ventas-workspace {
    display: block !important;
  }

  body.app-ventas .ventas-menu-toggle {
    display: flex !important;
    position: sticky !important;
    top: 92px !important;
    z-index: 95 !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  body.app-ventas .ventas-tabs.module-tabs {
    display: none !important;
    position: relative !important;
    top: auto !important;
    max-height: 52dvh !important;
    margin-bottom: 12px !important;
  }

  body.app-ventas .ventas-touch-shell.ventas-menu-open .ventas-tabs.module-tabs {
    display: grid !important;
  }

  body.app-ventas .pos-shell.touch-pos-shell {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .pos-shell.touch-pos-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane,
  body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-cart-pane {
    overflow: visible !important;
  }

  body.app-ventas .ventas-touch-shell.pos-focus-mode[data-active-view="sell"] .cashier-products-pane .pos-products-block .touch-product-grid {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  body.app-ventas .pos-search-row,
  body.app-ventas .cashier-checkout-bar,
  body.app-ventas .pos-visible-checkout-bar,
  body.app-ventas .cart-line-controls,
  body.app-ventas .cart-line-footer,
  body.app-ventas .cart-summary,
  body.app-ventas .pos-customer-row,
  body.app-ventas .pos-sale-options {
    grid-template-columns: 1fr !important;
  }

  body.app-ventas .product-suggestion-grid.touch-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}