/*
 * DistribuYa Mobile Native Layer v1
 * 2026-09-15
 * Mobile-only presentation layer. No business logic, no desktop rules.
 * Goal: every operational screen fits the device viewport without zoom,
 * horizontal page scrolling, clipped actions or inaccessible bottom sheets.
 */

@media (max-width: 980px) {
  :root {
    --dy-mobile-topbar: calc(56px + env(safe-area-inset-top));
    --dy-mobile-gutter: max(12px, env(safe-area-inset-left));
    --dy-mobile-gutter-r: max(12px, env(safe-area-inset-right));
    --dy-mobile-bottom: env(safe-area-inset-bottom);
    --dy-mobile-radius: 18px;
    --dy-mobile-touch: 44px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh !important;
    overscroll-behavior-x: none;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  /* Safari/iOS must not zoom the viewport when a seller focuses a field. */
  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  button,
  a,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Long commercial labels must wrap instead of colliding with adjacent UI. */
  .main-scroll :where(
    [class*="badge"],
    [class*="pill"],
    [class*="chip"],
    [class*="tag"]
  ) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.22;
  }

  /* ================================================================
     APP SHELL — app_base.html + app_shell.html
     Full-bleed, native-like shell; desktop is untouched.
     ================================================================ */
  .layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .layout > .side {
    display: none !important;
  }

  .layout > .mobile-topbar {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--dy-mobile-topbar) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) var(--dy-mobile-gutter-r) 0 var(--dy-mobile-gutter) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9997 !important;
  }

  .mobile-left,
  .mobile-title,
  .mobile-head-right {
    min-width: 0 !important;
  }

  .mobile-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-head-right .subpill {
    max-width: min(36vw, 150px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .layout > .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100dvh - var(--dy-mobile-topbar)) !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--surface) !important;
  }

  .main > .pagehead {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px var(--dy-mobile-gutter-r) 9px var(--dy-mobile-gutter) !important;
    border-radius: 0 !important;
    position: sticky !important;
    top: var(--dy-mobile-topbar) !important;
    z-index: 80 !important;
    gap: 8px !important;
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    backdrop-filter: blur(16px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
  }

  .pagehead .breadcrumbs {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .pagehead .breadcrumbs .pill {
    max-width: min(70vw, 270px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .pagehead .breadcrumbs .pill + .pill {
    display: none !important;
  }

  .pagehead .actions {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .pagehead .actions :where(a, button) {
    min-height: 40px;
  }

  .main > .main-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .main > .main-scroll > div,
  .main > div[style] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px var(--dy-mobile-gutter-r) calc(20px + var(--dy-mobile-bottom)) var(--dy-mobile-gutter) !important;
  }

  /* Native navigation drawer, never a floating desktop panel. */
  .layout > .drawer {
    background: rgba(2, 6, 23, .42) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .layout > .drawer > .panel {
    inset: 0 auto 0 0 !important;
    width: min(88vw, 360px) !important;
    max-width: 88vw !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .dy-toasts {
    top: calc(10px + env(safe-area-inset-top)) !important;
    width: calc(100vw - 20px) !important;
    max-width: 520px !important;
  }

  .dy-confirm-backdrop {
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .dy-confirm {
    width: min(100%, 520px) !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
  }

  .dy-confirm-actions {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  /* ================================================================
     COMMON MOBILE COMPONENT CONTRACTS
     ================================================================ */
  .main-scroll :where(
    .dy-btn, .hbtn, .crmNew, .viewBtn, .sh-btn, .pm-btn, .pf-submit,
    .pl-btn, .pld-btn, .plf-btn, .plx-btn, .vpi-btn, .vpd-btn, .vgf-btn,
    .inv-btn, .btn, .ocr-btn, .sva-btn, .sc-btn-save, .dy-team-btn,
    .dy-bc-btn, .dy-bc-back, .dy-bc-save, .dy-bf-btn, .dy-bs-btn,
    .dy-action, .cj-btn-new, .sk-submit, .rcm-cta-btn, .cc-cobrar-btn
  ) {
    min-height: var(--dy-mobile-touch) !important;
  }

  .main-scroll :where(
    .dy-actions, .crmActions, .sh-toolbar, .pm-topbar, .pf-actions,
    .pl-actions, .pld-head, .pld-filters, .plx-actions, .vpi-head,
    .vpd-head, .vpd-actions, .vgf-actions, .inv-actions, .cfg-actions,
    .ocr-actions, .sva-actions, .dy-branches-hero, .dy-branch-actions,
    .dy-team-hero, .dy-result-actions, .sc-save-actions
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .main-scroll :where(
    .dy-card, .crmPanel, .dc, .od-card, .pf7-card, .bulk4,
    .pm-panel, .pfw, .panel, .rc-card, .sh-card, .pl-card, .pld-card,
    .plf-card, .plx-card, .vpi-card, .vpd-section, .vgf-card,
    .cfg-card, .inv-card, .h-card, .rs-card, .dy-bc-table-card,
    .dy-bf-section, .dy-bs-card, .dy-branch-card, .ib-card, .ocr-card,
    .sva-card, .dy-member, .dy-editor
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ================================================================
     DASHBOARD
     ================================================================ */
  .dw,
  .catalog-bar,
  .dc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dw {
    grid-template-columns: 1fr !important;
    grid-template-areas: "hero" "kpis" "urgency" "status" !important;
    gap: 10px !important;
  }

  .d-hero,
  .d-kpis,
  .d-status,
  .urg-wrap {
    padding: 14px !important;
  }

  .hero-row,
  .hero-actions,
  .catalog-bar-inner,
  .catalog-bar-left {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-actions .hbtn {
    min-height: 44px !important;
  }

  .today-plan {
    grid-template-columns: 1fr !important;
  }

  .step {
    min-height: 72px;
  }

  .catalog-bar-inner {
    padding: 10px 12px !important;
  }

  .catalog-bar-url {
    min-width: 0 !important;
    font-size: .73rem !important;
  }

  .catalog-copy-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* ================================================================
     ORDERS LIST + CLIENTS
     Existing mobile cards remain the source of truth; this only polishes.
     ================================================================ */
  .dy-page,
  .dy-panel,
  .crmPanel,
  .crmHead,
  .crmBody,
  .crmCards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dy-filters,
  .crmSearchBar {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .dy-card,
  .crmCard,
  .crmCards > * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  .dy-card :where(.dy-pill, .dy-captured-by),
  .crmCards :where(.freq, .estimateTag) {
    white-space: normal !important;
  }

  .dy-pager,
  .crmPager,
  .pager {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Client detail */
  .dy-hero,
  .dy-client-admin-grid,
  .dy-kpis,
  .dy-tabs-bar,
  .dy-mobile-cards {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dy-client-admin-grid,
  .dy-ca-grid {
    grid-template-columns: 1fr !important;
  }

  .dy-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dy-tabs-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .dy-tab-btn {
    min-width: 0 !important;
    min-height: 42px;
    white-space: normal !important;
    line-height: 1.15;
  }

  .dy-identity-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .dy-identity-modal > * {
    max-width: min(100%, 560px) !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* ================================================================
     ORDER DETAIL — critical: never squeeze badges against money totals.
     ================================================================ */
  .od-root,
  .od-desktop-grid,
  .od-col-left,
  .od-col-right,
  .od-card,
  .od-items,
  .od-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .od-desktop-grid {
    display: block !important;
  }

  .od-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 13px 14px !important;
  }

  .od-item-left,
  .od-item-right,
  .od-item-meta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .od-item-name {
    font-size: .92rem !important;
    line-height: 1.2 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .od-item-meta {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .od-item-badge {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    padding: 5px 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .od-item-right {
    text-align: left !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 5px 10px !important;
    align-items: baseline !important;
  }

  .od-item-total {
    grid-row: 1 / span 2;
    font-size: 1.02rem !important;
    white-space: nowrap !important;
  }

  .od-item-sub {
    margin: 0 !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
  }

  .od-fin-row,
  .od-order-flow,
  .od-status-actions,
  .od-hero-actions {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .od-hero-actions {
    grid-template-columns: 1fr !important;
  }

  .od-hero-actions > * {
    width: 100% !important;
  }

  .od-chips {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .od-chip {
    width: 100% !important;
    min-width: 0 !important;
  }

  .od-sticky-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  /* Prepare/pay overlays become inset dialogs; no inaccessible bottom sheets. */
  .prep-overlay,
  .pay-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .prep-sheet,
  .pay-sheet {
    width: min(100%, 680px) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  .prep-card-grid,
  .prep-card-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .prep-card-foot {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  #od-toast {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 24px) !important;
    max-width: 520px !important;
    white-space: normal !important;
    text-align: center;
  }

  /* ================================================================
     PRODUCTS / CATEGORIES / IMAGE BANK / BULK
     ================================================================ */
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .product-card,
  .pc-body,
  .pc-actions,
  .dy-results-shell {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .pl-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  .pl-table tbody tr {
    display: block !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background: var(--card) !important;
    overflow: hidden !important;
  }

  .pl-table td {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .pf7,
  .pf7-grid,
  .pf7-option-grid,
  .pf7-header,
  .pf7-savecopy {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pf7-grid,
  .pf7-option-grid {
    grid-template-columns: 1fr !important;
  }

  .pf7-col-3,
  .pf7-col-4,
  .pf7-col-6,
  .pf7-col-8,
  .pf7-col-12 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .pf7-header,
  .pf7-card-head,
  .pf7-savecopy {
    flex-wrap: wrap !important;
  }

  .pf7-savecopy {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .bulk4,
  .b4-grid,
  .b4-kpis,
  .b4-contract,
  .b4-head {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .b4-grid,
  .b4-kpis,
  .b4-contract {
    grid-template-columns: 1fr !important;
  }

  .b4-head,
  .b4-actions,
  .b4-change {
    flex-wrap: wrap !important;
  }

  .cat-grid {
    grid-template-columns: 1fr !important;
  }

  .cat-hero,
  .cat-hero-inner,
  .cat-hero-right,
  .clist-top,
  .csearch {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .csearch {
    width: 100% !important;
  }

  .citem {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .ib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .ib-card,
  .ib-staging-item,
  .top-actions,
  .dy-toolbar,
  .search-form {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .top-actions,
  .dy-toolbar,
  .search-form {
    flex-wrap: wrap !important;
  }

  .ib-modal-backdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .ib-modal-backdrop > * {
    max-width: min(100%, 620px) !important;
    max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* ================================================================
     PROMOTIONS
     ================================================================ */
  .pm-hero,
  .pm-hero-inner,
  .pm-topbar,
  .pm-cards,
  .pm-card,
  .pfw,
  .pf-grid,
  .pf-picker,
  .pf-actions {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pm-topbar,
  .pm-card-acts,
  .pf-actions,
  .pf-picker-top {
    flex-wrap: wrap !important;
  }

  .pm-card-meta,
  .pf-grid {
    grid-template-columns: 1fr !important;
  }

  .pm-btn,
  .pf-cta {
    min-height: 44px !important;
  }

  .pm-modal-back {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .pm-modal-back > * {
    width: min(100%, 620px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* ================================================================
     ANALYTICS — tables become native cards, no horizontal swipe.
     ================================================================ */
  .an-page,
  .an-header,
  .an-filterbar,
  .kpi-grid,
  .grid2,
  .grid2b,
  .tscroll {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .an-header {
    display: block !important;
  }

  .an-filterbar {
    margin-top: 12px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .kpi-grid,
  .grid2,
  .grid2b {
    grid-template-columns: 1fr !important;
  }

  .tscroll {
    overflow: visible !important;
  }

  .an-page .dy-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .an-page .dy-table thead {
    display: none !important;
  }

  .an-page .dy-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  .an-page .dy-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 12px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--surface-2) !important;
  }

  .an-page .dy-table td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .an-page .dy-table td:first-child {
    grid-row: 1 / span 2;
    font-weight: 900 !important;
  }

  .an-page .dy-table td:nth-child(2),
  .an-page .dy-table td:nth-child(3) {
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* ================================================================
     RISK CENTER
     ================================================================ */
  .rc-page,
  .rc-kpis,
  .rc-controls,
  .rc-ctrl,
  .rc-cards,
  .mcard,
  .mcard-top,
  .mcard-body,
  .mcard-foot {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .rc-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

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

  .rc-filters {
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    padding-bottom: 6px !important;
  }

  .fchip {
    min-height: 38px;
    scroll-snap-align: start;
  }

  .mcard-top,
  .mcard-body,
  .mcard-foot,
  .do-mid,
  .d-wa-row {
    flex-wrap: wrap !important;
  }

  /* ================================================================
     STOCK / OCR / VOICE
     ================================================================ */
  .sh-page,
  .sh-hero,
  .sh-kpis,
  .sh-toolbar,
  .sh-card,
  .sh-action-row-top,
  .sh-aform,
  .ocr-wrap,
  .ocr-grid,
  .sva-shell,
  .sva-hero,
  .sva-query-row,
  .sva-action-top {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sh-kpis,
  .ocr-grid {
    grid-template-columns: 1fr !important;
  }

  .sh-toolbar,
  .sh-action-row-top,
  .sva-action-top,
  .sva-query-row {
    flex-wrap: wrap !important;
  }

  .sh-card {
    overflow: hidden !important;
  }

  .sva-candidates {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .sva-candidate {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* OCR result table as cards */
  .ocr-table-wrap {
    overflow: visible !important;
    border: 0 !important;
  }

  .ocr-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .ocr-table thead { display: none !important; }
  .ocr-table tbody { display: grid !important; gap: 10px !important; }
  .ocr-table tr {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 15px !important;
    background: var(--card) !important;
  }
  .ocr-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 32%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    min-width: 0 !important;
  }
  .ocr-table td:last-child { border-bottom: 0 !important; }
  .ocr-table td:nth-child(1)::before { content: "Estado"; }
  .ocr-table td:nth-child(2)::before { content: "Detectado"; }
  .ocr-table td:nth-child(3)::before { content: "Producto"; }
  .ocr-table td:nth-child(4)::before { content: "Cantidad"; }
  .ocr-table td:nth-child(5)::before { content: "Stock actual"; }
  .ocr-table td:nth-child(6)::before { content: "Stock nuevo"; }
  .ocr-table td::before {
    color: var(--muted2);
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* ================================================================
     PRICE LISTS + VOLUME PRICING
     ================================================================ */
  .pl-page,
  .pl-hero,
  .pl-grid,
  .pl-card,
  .pld,
  .pld-hero,
  .pld-grid,
  .pld-prices,
  .plf,
  .plf-grid,
  .plx,
  .plx-body,
  .plx-kpis,
  .vpi,
  .vpi-list,
  .vpi-card,
  .vpd,
  .vpd-body,
  .vpd-products,
  .vpd-tier-fields,
  .vgf,
  .vgf-min-grid,
  .vgf-modes {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pl-grid,
  .pld-grid,
  .plf-grid,
  .plx-kpis,
  .vgf-min-grid,
  .vgf-modes {
    grid-template-columns: 1fr !important;
  }

  .pl-hero,
  .pld-head,
  .pld-hero-top,
  .pld-filters,
  .plf-head,
  .plf-foot,
  .plx-hero,
  .plx-actions,
  .vpi-head,
  .vpd-head,
  .vpd-section-head,
  .vpd-price-controls,
  .vpd-membership-foot,
  .vgf-head,
  .vgf-actions {
    flex-wrap: wrap !important;
  }

  .vpd-products {
    grid-template-columns: 1fr !important;
  }

  .vpd-tier-fields {
    grid-template-columns: 1fr !important;
  }

  .vpd-product-action,
  .vpd-list-control {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Price-list Excel: no 900px table on a phone. */
  .plx-table-wrap {
    overflow: visible !important;
    border: 0 !important;
  }
  .plx-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  .plx-table thead { display: none !important; }
  .plx-table tbody { display: grid !important; gap: 10px !important; }
  .plx-table tr {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 15px !important;
    background: var(--card) !important;
  }
  .plx-table td {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: normal !important;
    min-width: 0 !important;
  }
  .plx-table td:last-child { border-bottom: 0 !important; }
  .plx-table td:nth-child(1)::before { content: "Fila"; }
  .plx-table td:nth-child(2)::before { content: "Producto"; }
  .plx-table td:nth-child(3)::before { content: "Acción"; }
  .plx-table td:nth-child(4)::before { content: "Actual"; }
  .plx-table td:nth-child(5)::before { content: "Nuevo"; }
  .plx-table td:nth-child(6)::before { content: "Final actual"; }
  .plx-table td:nth-child(7)::before { content: "Final nuevo"; }
  .plx-table td::before {
    color: var(--muted2);
    font-size: .61rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
  }

  /* ================================================================
     BRANCHES / BUSINESS / TEAM / SETTINGS
     ================================================================ */
  .dy-bc,
  .dy-bc-head,
  .dy-bc-info,
  .dy-bc-search,
  .dy-bf,
  .dy-bf-grid,
  .dy-bs,
  .dy-bs-grid,
  .dy-branches-page,
  .dy-branches-grid,
  .dy-team,
  .dy-member-row,
  .dy-editor,
  .dy-perms,
  .sc-page,
  .sc-section,
  .sc-identity-grid,
  .sc-social-grid,
  .sc-public-url {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dy-bf-grid,
  .dy-bs-grid,
  .dy-branches-grid,
  .dy-perms,
  .sc-identity-grid,
  .sc-social-grid {
    grid-template-columns: 1fr !important;
  }

  .dy-bc-head,
  .dy-bc-search,
  .dy-branches-hero,
  .dy-branch-actions,
  .dy-team-hero,
  .dy-member-row,
  .dy-editor-top,
  .sc-page-header,
  .sc-save-actions {
    flex-wrap: wrap !important;
  }

  /* Branch catalog table -> native cards. */
  .dy-bc-table-card,
  .dy-bc-table-card > div {
    overflow: visible !important;
  }
  .dy-bc-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  .dy-bc-table thead { display: none !important; }
  .dy-bc-table tbody { display: grid !important; gap: 10px !important; }
  .dy-bc-table tr {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 15px !important;
    background: var(--card) !important;
  }
  .dy-bc-table td {
    display: grid !important;
    grid-template-columns: minmax(102px, 34%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .dy-bc-table td:last-child { border-bottom: 0 !important; }
  .dy-bc-table td:nth-child(1)::before { content: "Producto"; }
  .dy-bc-table td:nth-child(2)::before { content: "Stock"; }
  .dy-bc-table td:nth-child(3)::before { content: "Publicado"; }
  .dy-bc-table td:nth-child(4)::before { content: "Disponible"; }
  .dy-bc-table td:nth-child(5)::before { content: "Imagen"; }
  .dy-bc-table td:nth-child(6)::before { content: "Guardar"; }
  .dy-bc-table td::before {
    color: var(--muted2);
    font-size: .61rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .dy-bc-img {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  .dy-bc-save { width: 100% !important; }

  .dy-modal,
  .sc-crop-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }
  .dy-modal > *,
  .sc-crop-overlay > * {
    max-width: min(100%, 620px) !important;
    max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* ================================================================
     INVOICING / FISCAL
     ================================================================ */
  .inv-root,
  .inv-kpi-strip,
  .emit-panel,
  .order-row,
  .h-root,
  .h-topbar,
  .h-filters,
  .rs-root,
  .rs-card,
  .cfg-root,
  .cfg-stepper,
  .field-grid,
  .fp-root,
  .fp-table-wrap,
  .d-root,
  .d-grid {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .inv-kpi-strip,
  .field-grid,
  .d-grid {
    grid-template-columns: 1fr !important;
  }

  .order-row,
  .emit-headline,
  .emit-cta-wrap,
  .h-topbar,
  .h-filters,
  .rs-pref-row,
  .cfg-env-strip,
  .conn-check,
  .fp-head {
    flex-wrap: wrap !important;
  }

  .cfg-stepper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .st-item {
    min-height: 48px;
  }

  /* Invoice/retry/modal surfaces: always inside the visual viewport. */
  .inv-overlay,
  .rs-success {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }
  .inv-modal,
  .rs-success > * {
    width: min(100%, 640px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
  }
  .retry-debug-panel {
    inset: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
  }

  /* Invoice history table -> cards. */
  .h-table-wrap { overflow: visible !important; }
  .h-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .h-table thead { display: none !important; }
  .h-table tbody { display: grid !important; gap: 10px !important; }
  .h-table tr {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--edge, var(--border)) !important;
    border-radius: 15px !important;
    background: var(--surf, var(--card)) !important;
  }
  .h-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 30%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--edge, var(--border)) !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .h-table td:last-child { border-bottom: 0 !important; }
  .h-table td:nth-child(1)::before { content: "Tipo"; }
  .h-table td:nth-child(2)::before { content: "Número"; }
  .h-table td:nth-child(3)::before { content: "Fecha"; }
  .h-table td:nth-child(4)::before { content: "Cliente"; }
  .h-table td:nth-child(5)::before { content: "Total"; }
  .h-table td:nth-child(6)::before { content: "CAE"; }
  .h-table td:nth-child(7)::before { content: "Vto. CAE"; }
  .h-table td:nth-child(8)::before { content: "Acciones"; }
  .h-table td::before {
    color: var(--ink3, var(--muted2));
    font-size: .61rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;
  }

  /* Fiscal customer table -> cards. */
  .fp-table-wrap { overflow: visible !important; }
  .fp-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .fp-table thead { display: none !important; }
  .fp-table tbody { display: grid !important; gap: 9px !important; }
  .fp-table tr {
    display: grid !important;
    padding: 8px 12px !important;
    border: 1px solid var(--edge, var(--border)) !important;
    border-radius: 14px !important;
    background: var(--surf, var(--card)) !important;
  }
  .fp-table td {
    display: grid !important;
    grid-template-columns: minmax(90px, 30%) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--edge, var(--border)) !important;
    min-width: 0 !important;
  }
  .fp-table td:last-child { border-bottom: 0 !important; }
  .fp-table td:nth-child(1)::before { content: "Comprobante"; }
  .fp-table td:nth-child(2)::before { content: "Fecha"; }
  .fp-table td:nth-child(3)::before { content: "Total"; }
  .fp-table td:nth-child(4)::before { content: "CAE"; }
  .fp-table td:nth-child(5)::before { content: "PDF"; }
  .fp-table td::before {
    color: var(--ink3, var(--muted2));
    font-size: .61rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  /* Invoice detail items -> cards. */
  .d-items-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .d-items-table thead { display: none !important; }
  .d-items-table tbody { display: grid !important; gap: 8px !important; }
  .d-items-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--edge, var(--border)) !important;
    border-radius: 13px !important;
  }
  .d-items-table td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
  }
  .d-items-table td:first-child { grid-row: 1 / span 3; }
  .d-items-table td:not(:first-child) { text-align: right !important; white-space: nowrap !important; }

  /* ================================================================
     RETAIL / POS — app_shell pages
     ================================================================ */
  .hoy-wrap,
  .hoy-kpis,
  .hoy-pagos-grid,
  .hoy-acciones,
  .pos-body,
  .pos-top,
  .pos-stats,
  .prod-row,
  .tkt-row,
  .rh-hero,
  .rh-kpi,
  .rh-filters,
  .rh-sale-card,
  .cj-main,
  .cj-stats,
  .cj-product,
  .sk-body,
  .sk-kpis,
  .sk-item,
  .cj-shell,
  .cj-summary-grid,
  .rcm-page,
  .rcm-grid,
  .rcm-period-summary-grid,
  .cc-wrap,
  .cc-stats,
  .cc-client {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hoy-kpis,
  .hoy-pagos-grid,
  .hoy-acciones,
  .pos-stats,
  .rh-kpis,
  .cj-stats,
  .sk-kpis,
  .cj-summary-grid,
  .rcm-period-summary-grid,
  .cc-stats {
    grid-template-columns: 1fr !important;
  }

  .pos-top,
  .prod-row,
  .tkt-row,
  .rh-filters,
  .cj-product,
  .sk-item,
  .cc-client,
  .rcm-row {
    flex-wrap: wrap !important;
  }

  .tkt-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .catalog-drawer,
  .wt-back {
    max-width: 100% !important;
  }

  .wt-back {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .wt-back > * {
    width: min(100%, 620px) !important;
    max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* ================================================================
     AUTH / INVITES / PUBLIC CUSTOMER ACCESS
     ================================================================ */
  .dy-login-root,
  .dy-root,
  .dy-grid,
  .dy-card,
  .dy-form-wrap,
  .dy-invite-page,
  .dy-invite-shell,
  .dy-invite-card,
  .dy-login-wrap,
  .dy-a-wrap,
  .dy-pub-page,
  .dy-pub-shell,
  .dy-pub-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dy-grid {
    grid-template-columns: 1fr !important;
  }

  .dy-login-root .dy-left,
  .dy-root .dy-left {
    display: none !important;
  }

  .dy-login-root .dy-right,
  .dy-root .dy-right {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: max(18px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(18px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  .dy-login-root .dy-card,
  .dy-root .dy-form-wrap,
  .dy-invite-card,
  .dy-login-card,
  .dy-a-card,
  .dy-pub-card {
    width: min(100%, 520px) !important;
    margin-inline: auto !important;
  }

  .dy-invite-fields {
    grid-template-columns: 1fr !important;
  }

  .dy-invite-actions,
  .dy-pub-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .dy-invite-btn,
  .dy-login-btn,
  .dy-a-btn,
  .dy-pub-btn {
    min-height: 48px !important;
  }

  /* ================================================================
     SMALL PHONES
     ================================================================ */
  @media (max-width: 430px) {
    .main > .main-scroll > div,
    .main > div[style] {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    .dy-kpis,
    .kpi-grid,
    .ib-grid {
      grid-template-columns: 1fr !important;
    }

    .pagehead .breadcrumbs .pill {
      max-width: 62vw !important;
    }

    .od-order-flow {
      gap: 4px !important;
    }

    .od-flow-label {
      font-size: .62rem !important;
    }

    .od-item-right {
      grid-template-columns: 1fr !important;
    }

    .od-item-total {
      grid-row: auto !important;
    }

    .dy-bc-table td,
    .ocr-table td,
    .plx-table td,
    .h-table td,
    .fp-table td {
      grid-template-columns: 1fr !important;
      gap: 4px !important;
    }
  }

  @media (max-width: 359px) {
    .mobile-title { font-size: .82rem !important; }
    .mobile-head-right .subpill { display: none !important; }
    .pagehead { padding-left: 8px !important; padding-right: 8px !important; }
    .main > .main-scroll > div,
    .main > div[style] { padding-left: 8px !important; padding-right: 8px !important; }
  }

  @media (orientation: landscape) and (max-height: 560px) {
    .layout > .drawer > .panel,
    .dy-confirm,
    .prep-sheet,
    .pay-sheet,
    .inv-modal,
    .retry-debug-panel,
    .pm-modal-back > *,
    .ib-modal-backdrop > *,
    .sc-crop-overlay > * {
      max-height: calc(100dvh - 12px) !important;
    }
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Extra user-facing forms/cards audited after the main layer. */
@media (max-width: 980px) {
  .bl-page,
  .bl-page-header,
  .bl-hero,
  .bl-section,
  .bl-section-body,
  .bl-code-row,
  .bl-restricted-switches,
  .mc-page,
  .mc-card,
  .mc-grid,
  .dy-ready,
  .dy-ready-card,
  .dy-ready-actions,
  .bu-wrap,
  .bu-card,
  .bu-form,
  .bu-head,
  .bu-actions,
  .ih4,
  .ih4-head,
  .ih4-kpis,
  .ih4-change,
  .vxe,
  .vxe-steps,
  .vxe-actions,
  .vxe-preview,
  .vxe-change,
  .plx-list {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .bl-page-header,
  .bl-hero,
  .bl-code-row,
  .bl-restricted-switches,
  .mc-head,
  .mc-actions,
  .dy-ready-head,
  .dy-ready-actions,
  .bu-head,
  .bu-actions,
  .ih4-head,
  .ih4-change,
  .vxe-actions,
  .vxe-change-main {
    flex-wrap: wrap !important;
  }

  .mc-grid,
  .ih4-kpis,
  .vxe-steps {
    grid-template-columns: 1fr !important;
  }

  .mc-field.full,
  .mc-grid > *,
  .bu-form > *,
  .bl-section-body > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mc-actions :where(.mc-btn),
  .dy-ready-actions :where(.dy-ready-btn),
  .bu-actions :where(.bu-btn),
  .bl-btn-submit,
  .bl-btn-copy,
  .vxe-btn {
    min-height: 44px !important;
  }

  .mc-actions,
  .dy-ready-actions,
  .bu-actions,
  .vxe-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .mc-actions > *,
  .dy-ready-actions > *,
  .bu-actions > *,
  .vxe-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }

  .ih4-change {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ih4-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .vxe-change-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* Shared payment modal partial. */
  #payModal {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) var(--dy-mobile-gutter-r) max(12px, env(safe-area-inset-bottom)) var(--dy-mobile-gutter) !important;
  }

  #payModal .pay-card {
    width: min(100%, 620px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
  }

  #payModal .pay-head,
  #payModal .banner,
  #payModal .pay-foot,
  #payModal .btn-row {
    flex-wrap: wrap !important;
  }

  #payModal .grid {
    grid-template-columns: 1fr !important;
  }

  #payModal .pay-foot {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* ==================================================================
   R2 SURGICAL POLISH - PRODUCTS + CLIENTS ONLY
   Mobile-only. Desktop remains untouched.
   ================================================================== */
@media (max-width: 980px) {
  /* Products: keep the secondary action rail fully inside the viewport. */
  .top-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .top-actions > .btn-primary-action {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  .top-actions > .btn-group-secondary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .top-actions > .btn-group-secondary > .btn-secondary-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 8px 6px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
  }

  /* Clients: header content must stack; never squeeze the description. */
  .crmHead {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .crmTitleWrap {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .crmEyebrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .crmSub {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .crmActions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  .crmActions > .crmStat,
  .crmActions > .crmNew {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
}