/* AquaControl V79.17.22.9 - mobile responsive hardening.
   Visual-only layer: no business rules or data logic. */

html,
body,
#app {
  max-width: 100%;
}

@supports (height: 100dvh) {
  body.app-locked-scroll,
  body:has(#mainScreen:not(.hidden)),
  #mainScreen {
    height: 100dvh;
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  #mainScreen,
  #mainScreen .layout,
  #mainScreen .content,
  #mainScreen .view,
  #mainScreen .panel,
  #mainScreen .card,
  #mainScreen form,
  #mainScreen fieldset,
  #mainScreen .table-wrap,
  #mainScreen .compact-table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  #mainScreen .content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    scroll-padding-bottom: max(32px, env(safe-area-inset-bottom));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  button,
  [role="button"],
  .mini-btn,
  .module-workspace-tab,
  .enterprise-live-tab {
    min-height: 42px;
  }

  .table-wrap,
  .compact-table-wrap,
  .config-table-wrap,
  .cart-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .module-workspace-tabs,
  #deliveryView .module-workspace-tabs,
  #deliveryView .enterprise-live-tabs,
  .maintenance-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }

  .module-workspace-tabs > *,
  #deliveryView .module-workspace-tabs > *,
  #deliveryView .enterprise-live-tabs > *,
  .maintenance-tabs > * {
    flex: 0 0 auto;
  }

  /* Domicilio: one stage at a time horizontally, cards vertically. */
  #deliveryView .delivery-card-board.delivery-kanban-board {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-gutter: auto;
    padding: 0 0 12px;
  }

  #deliveryView .delivery-kanban {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    width: max-content !important;
    min-width: 100% !important;
    height: auto !important;
  }

  #deliveryView .delivery-kanban-column {
    flex: 0 0 min(78vw, 320px);
    width: min(78vw, 320px) !important;
    min-width: min(78vw, 320px) !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: min(68dvh, 620px);
    scroll-snap-align: start;
  }

  #deliveryView .delivery-kanban-stack {
    min-height: 0;
    max-height: min(58dvh, 540px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  #deliveryView .delivery-order-card,
  #deliveryView .delivery-card-top,
  #deliveryView .delivery-card-customer,
  #deliveryView .delivery-card-order-summary,
  #deliveryView .aq-card-detail-body {
    min-width: 0;
    max-width: 100%;
  }

  #deliveryView .delivery-order-card :is(strong, small, span, p, a) {
    overflow-wrap: anywhere;
  }

  /* Domicilio capture dialog: the dialog owns vertical scrolling on phones. */
  .aq-visual #deliveryOrderDialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .aq-visual #deliveryOrderForm {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .aq-visual #deliveryOrderForm .delivery-order-actions {
    position: static !important;
    bottom: auto !important;
    z-index: auto;
  }

  /* Driver cut: one natural modal scroller instead of stacked scroll traps. */
  .corporate-theme .driver-cut-capture-dialog {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    overflow: hidden;
    border-radius: 10px;
  }

  .driver-cut-modal-shell {
    height: 100%;
    min-height: 0;
  }

  .driver-cut-modal-header {
    flex-direction: column;
    gap: 10px;
  }

  .driver-cut-modal-header-actions {
    width: 100%;
  }

  .driver-cut-modal-header-actions > button {
    flex: 1 1 auto;
  }

  .driver-cut-modal-grid {
    display: block !important;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    scroll-padding-bottom: max(28px, env(safe-area-inset-bottom));
    padding: 8px;
  }

  .driver-cut-modal-pane {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 10px;
  }

  .driver-cut-pane-scroll {
    flex: none;
    min-height: 0;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }

  .driver-cut-modal-form {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .driver-cut-modal-form > *,
  .driver-cut-date-actions,
  .driver-cut-modal-form .form-grid,
  .driver-cut-modal-form .driver-debt-payment-box,
  .driver-cut-modal-form .compact-table-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .driver-cut-modal-form :is(input, select, textarea, button) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .driver-cut-form-spacer {
    height: 0;
  }

  .driver-cut-sticky-actions {
    position: static !important;
    left: auto;
    right: auto;
    bottom: auto !important;
    margin: 12px -14px 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Maintenance dialogs: footer follows content and cannot cover fields. */
  .maintenance-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow: hidden;
  }

  .maintenance-dialog > .dialog-form {
    max-height: calc(100dvh - 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    scroll-padding-bottom: max(28px, env(safe-area-inset-bottom));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .maintenance-dialog-actions {
    position: static !important;
    bottom: auto !important;
  }

  /* Cash workspace: dynamic viewport and non-obstructive mobile actions. */
  .cash-cut-workspace-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .cash-workspace-shell {
    height: 100%;
    min-height: 0;
  }

  .cash-workspace-stage {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    scroll-padding-bottom: max(32px, env(safe-area-inset-bottom));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .cash-workspace-form > .dialog-actions {
    position: static !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Global search: use the real phone viewport, including browser chrome. */
  .global-search-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 10px;
  }

  .global-search-shell,
  .global-search-body,
  .global-search-results-panel,
  .global-trace-panel {
    min-width: 0;
    min-height: 0;
  }

  .global-search-results,
  .global-trace-panel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }

  /* Generic native dialogs. Specific full-screen workspaces above keep their own layout. */
  dialog:not(.driver-cut-capture-dialog):not(.cash-cut-workspace-dialog):not(.global-search-dialog):not(#deliveryOrderDialog) {
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    scroll-padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .audit-detail-dialog {
    max-height: calc(100dvh - 12px) !important;
  }

  .audit-detail-body {
    max-height: calc(100dvh - 116px) !important;
    overscroll-behavior-y: auto;
  }
}

@media (max-width: 620px) {
  .aq-visual .topbar {
    min-height: 0;
    padding-top: max(9px, env(safe-area-inset-top));
  }

  .aq-visual .content {
    padding-left: 10px;
    padding-right: 10px;
  }

  #deliveryView .delivery-filters,
  #deliveryView .delivery-stats,
  .maintenance-kpis,
  .cash-workspace-kpis {
    min-width: 0;
  }

  #deliveryView .delivery-kanban-column {
    flex-basis: min(86vw, 320px);
    width: min(86vw, 320px) !important;
    min-width: min(86vw, 320px) !important;
  }

  #deliveryView .delivery-filters {
    grid-template-columns: 1fr !important;
  }

  #deliveryView #deliverySearch {
    grid-column: auto !important;
  }

  .dialog-actions,
  .ticket-actions,
  .driver-cut-sticky-actions,
  .cash-workspace-header-actions,
  #deliveryView .header-actions {
    flex-wrap: wrap;
  }

  .dialog-actions > button,
  .driver-cut-sticky-actions > button,
  .cash-workspace-header-actions > button {
    min-height: 44px;
  }

  .maintenance-dialog-title,
  .delivery-inline-customer-head,
  .delivery-dispatch-head {
    flex-direction: column;
    align-items: stretch;
  }

  .global-search-header {
    gap: 8px;
  }

  .global-search-input-wrap input {
    font-size: 16px;
  }
}

@media (max-width: 390px) {
  #deliveryView .delivery-stats {
    grid-template-columns: 1fr !important;
  }

  #deliveryView .delivery-stats .aq-kpi:last-child {
    grid-column: auto !important;
  }

  .cash-workspace-kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  .driver-cut-modal-header h3,
  .aq-order-header h3 {
    font-size: 20px !important;
  }
}

/* V79.17.22.10 - Punto de venta movil para operadores de planta. */
.mobile-sale-dock,
.mobile-cart-backdrop,
.mobile-cart-close,
.product-cart-qty {
  display: none;
}

@media (max-width: 760px) {
  /* Venta de planta: prioriza velocidad de captura, producto y cobro. */
  #saleView {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  #saleView .sale-enterprise-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 0 10px;
  }

  #saleView .sale-enterprise-header h3 {
    margin: 2px 0 0;
    font-size: 1.28rem;
  }

  #saleView .sale-enterprise-header p {
    display: none;
  }

  #saleView .sale-enterprise-header .enterprise-eyebrow {
    font-size: .64rem;
    letter-spacing: .07em;
  }

  #saleView .sale-header-actions {
    justify-content: flex-end;
    gap: 4px;
  }

  #saleView #homeDeliveryOutBtn,
  #saleView #homeDeliveryHistoryBtn {
    display: none;
  }

  #saleView #clearCartBtn {
    min-height: 36px;
    padding: 7px 10px;
    font-size: .74rem;
  }

  #saleView .sale-grid {
    display: block !important;
    width: 100%;
  }

  #saleView .product-panel {
    width: 100%;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  #saleView .product-panel .sale-panel-heading {
    align-items: center;
    margin-bottom: 8px;
  }

  #saleView .product-panel .sale-panel-heading h4 {
    font-size: .94rem;
  }

  #saleView .product-panel .enterprise-count {
    min-height: 24px;
    padding: 2px 7px;
    font-size: .68rem;
  }

  #saleView .search-row {
    top: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    background: #fff;
  }

  #saleView .enterprise-search-label {
    display: none;
  }

  #saleView #productSearch {
    min-height: 42px !important;
    border-radius: 10px !important;
    padding: 8px 11px !important;
  }

  #saleView .product-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #saleView .product-btn {
    position: relative;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    align-items: flex-start !important;
    text-align: left !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #saleView .product-btn:active {
    transform: scale(.98) !important;
  }

  #saleView .product-btn.has-cart-qty {
    border-color: #0b6fdc !important;
    background: #f1f7ff !important;
    box-shadow: 0 0 0 2px rgba(11, 111, 220, .10) !important;
  }

  #saleView .product-btn > strong {
    display: block;
    max-width: calc(100% - 26px);
    font-size: .84rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  #saleView .product-btn > small {
    font-size: .65rem !important;
    line-height: 1.15 !important;
  }

  #saleView .product-btn .product-stock {
    display: none;
  }

  #saleView .product-btn .product-price {
    display: block;
    margin-top: auto;
    color: #0b5cab !important;
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #saleView .product-cart-qty {
    display: grid;
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff !important;
    background: #0b6fdc;
    font-size: .74rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(11, 92, 171, .25);
  }

  #saleView .product-cart-qty[hidden] {
    display: none !important;
  }

  /* Carrito como hoja inferior; no obliga al operador a bajar toda la pantalla. */
  #saleView .cart-panel {
    position: fixed !important;
    left: 8px;
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 1102;
    display: flex !important;
    width: auto !important;
    max-height: min(72dvh, 610px);
    padding: 12px !important;
    overflow: hidden !important;
    border-radius: 16px 16px 12px 12px !important;
    background: #fff;
    box-shadow: 0 -12px 34px rgba(8, 27, 44, .22) !important;
    transform: translateY(calc(100% + 110px));
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .18s ease;
  }

  #saleView.mobile-cart-open .cart-panel {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  #saleView .cart-panel-heading-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #saleView .mobile-cart-close {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #173a61;
    background: #fff;
    font-size: 1.4rem;
    line-height: 1;
  }

  #saleView .cart-panel > .small-label {
    display: grid;
    gap: 4px;
    font-size: .72rem;
  }

  #saleView .cart-panel #saleCustomer {
    min-height: 42px;
  }

  #saleView .cart-table-wrap {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 92px !important;
    max-height: 34dvh !important;
    overflow-y: auto !important;
  }

  #saleView .cart-detail-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 8px !important;
    padding: 8px !important;
  }

  #saleView .cart-detail-main strong {
    font-size: .78rem;
  }

  #saleView .qty-cell button {
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 1rem;
  }

  #saleView .compact-total-row {
    min-height: 54px !important;
    max-height: 54px !important;
    flex-basis: 54px !important;
  }

  #saleView .compact-total-row strong {
    font-size: 1.35rem !important;
  }

  #saleView #chargeSaleBtn {
    min-height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
    font-size: 1rem !important;
  }

  .mobile-cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1101;
    background: rgba(8, 27, 44, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  #saleView.mobile-cart-open .mobile-cart-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-sale-dock {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1103;
    grid-template-columns: auto minmax(88px, 1fr) minmax(112px, 1.15fr);
    align-items: stretch;
    gap: 7px;
    min-height: 70px;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border-top: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -7px 20px rgba(8, 27, 44, .13);
    backdrop-filter: blur(8px);
  }

  #saleView.hidden .mobile-sale-dock,
  #saleView.hidden .mobile-cart-backdrop {
    display: none !important;
  }

  .mobile-cart-toggle,
  .mobile-charge-sale {
    min-height: 52px !important;
    border-radius: 11px;
    font-weight: 900;
  }

  .mobile-cart-toggle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 5px;
    min-width: 86px;
    padding: 8px 10px;
    border: 1px solid #bdd0df;
    color: #173a61;
    background: #f4f8fb;
  }

  .mobile-cart-toggle strong {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #173a61;
    font-size: .78rem;
  }

  .mobile-cart-toggle:disabled strong {
    background: #94a3b8;
  }

  .mobile-cart-toggle-label {
    font-size: .74rem;
  }

  .mobile-sale-dock-total {
    display: grid;
    align-content: center;
    justify-items: end;
    min-width: 0;
    padding: 2px 4px;
  }

  .mobile-sale-dock-total span {
    color: #64748b;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-sale-dock-total strong {
    max-width: 100%;
    overflow: hidden;
    color: #081b2c;
    font-size: 1.25rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-charge-sale {
    border: 0;
    color: #fff;
    background: #0b6fdc;
    box-shadow: 0 4px 10px rgba(11, 92, 171, .22);
    font-size: .95rem;
  }

  .mobile-charge-sale:disabled,
  .mobile-cart-toggle:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  /* Cobro: convierte el modal en paso final claro, con controles grandes. */
  #saleChargeDialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 14px !important;
  }

  #saleChargeDialog .dialog-form {
    padding: 14px !important;
  }

  #saleChargeDialog .charge-summary-box {
    padding: 12px !important;
  }

  #saleChargeDialog .charge-summary-box strong {
    font-size: 1.85rem !important;
  }

  #saleChargeDialog #paymentMethod,
  #saleChargeDialog #paidWithInput {
    min-height: 48px;
    font-size: 16px;
  }

  #saleChargeDialog .change-card strong {
    font-size: 1.45rem;
  }

  #saleChargeDialog .dialog-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
  }

  #saleChargeDialog .dialog-actions button {
    min-height: 50px;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  #saleView .product-buttons {
    gap: 6px !important;
  }

  #saleView .product-btn {
    min-height: 88px !important;
    padding: 8px !important;
  }

  .mobile-sale-dock {
    grid-template-columns: auto minmax(72px, .85fr) minmax(102px, 1fr);
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .mobile-cart-toggle {
    min-width: 78px;
    padding-inline: 8px;
  }

  .mobile-sale-dock-total strong {
    font-size: 1.08rem;
  }
}