/* ============================================================================
 * styles-mobile.css — ERP responsive móvil
 * MODO-MOBILE F0 (2026-08-02): SIN @media wrapper interno. La activación la
 * decide el atributo media del <link> en index.html:
 *   auto (default HTML): media="(max-width: 768px)"  → como siempre
 *   forzado ON  (localStorage erp_modo_mobile="1"):  media="all"
 *   forzado OFF (localStorage erp_modo_mobile="0"):  media="not all"
 * (script inline en index.html + aplicarModoMobileCss() en app.js).
 * NO volver a envolver las reglas en un wrapper de ancho ≤768px — eso rompe
 * el botón "Modo mobile" que fuerza la UI mobile en pantallas grandes.
 * Breakpoint principal: <=768px (phone + tablet vertical)
 * Cargado DESPUES de styles.css. Necesita !important para vencer al bloque
 * "FIX FINAL V1.36" de styles.css (línea ~2573-2820) que define el menu
 * horizontal-top-bar de desktop con muchas reglas !important.
 *
 * Scope mobile (F5 2026-08-02): en ERP completo mobile se ven TODOS los
 * grupos del menu (data-mobile-hide solo aplica en modo lite, ver selector
 * body:not(.mobile-erp-full) mas abajo). Foco de cobertura: Inicio, Ventas,
 * Compras, Stock, Clientes, Tesoreria, Informes + Productos + Ctas Ctes.
 * ============================================================================ */

/* ============================================================
   F1 MODO-MOBILE (2026-08-02): bloques mobile migrados desde styles.css.
   Los de 768px vienen des-envueltos (el gate es el media del <link>).
   Los sub-768 (480..767) conservan su wrapper: son refinamientos de
   ancho fisico de telefono, no del modo.
   PREPENDEADOS (antes del resto de esta hoja) para preservar el orden
   de cascada original: styles.css cargaba antes que styles-mobile.css.
   ============================================================ */

/* ── migrado de styles.css:520 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 640px) {
  .grid-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ── migrado de styles.css:1092 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 640px) {
  .doc-total { justify-content: stretch; }
  .total-box { min-width: 0; width: 100%; box-sizing: border-box; }
  .total-row.big { font-size: 20px; }
}

/* ── migrado de styles.css:1617 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 540px) {
  .login-topbrand {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
  }
  .login-card {
    margin-top: 78px;
    padding: 30px 22px 26px;
    border-radius: 20px;
  }
  .login-card-hero h2 { font-size: 22px; }
  .login-input.input { height: 48px; font-size: 14px; }
  .btn.login-submit { height: 48px; }
  .login-footer { font-size: 11px; bottom: 12px; padding: 0 16px; }
}

/* ── migrado de styles.css:2429 (@media (max-width: 768px)) — F1 des-envuelto ── */
.tes-ayuda-medio {
  position: fixed;
  inset: 0;
  z-index: 9000;
  border-radius: 0;
  margin: 0;
  overflow-y: auto;
  border: none;
  background: #f0f7ff;
  animation: none;
}

.tes-ayuda-header {
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 16px 12px;
}

.tes-ayuda-titulo { font-size: 14px; }

.tes-ayuda-body {
  grid-template-columns: 1fr;
  padding: 16px;
  gap: 16px;
}

.tes-ayuda-footer {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px 16px;
}

/* ── migrado de styles.css:3619 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 640px) {
  .document-type-grid {
    grid-template-columns: 1fr;
  }
}

/* ── migrado de styles.css:3988 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 640px) {
  .document-type-grid-compact {
    grid-template-columns: 1fr !important;
  }
}

/* ── migrado de styles.css:5854 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 640px) {
  .product-analysis-grid {
    grid-template-columns: 1fr;
  }

  .product-modal-tab {
    flex: 1 1 100%;
  }
}

/* ── migrado de styles.css:6186 (@media (max-width: 768px)) — F1 des-envuelto ── */
.prod-var-mobile-list {
  display: flex;
  flex-wrap: wrap;
}
/* En mobile, las filas hijas desktop se ocultan (ya hay chips inline en el card) */
.prod-var-hija {
  display: none !important;
}
/* El triangulito de expand no tiene sentido en mobile */
.prod-var-expand-icon {
  display: none;
}

/* ── migrado de styles.css:6262 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 700px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── migrado de styles.css:6925 (@media (max-width: 768px)) — F1 des-envuelto ── */
.main:has(> .view:has(.comprobante-page)) {
  height: 100dvh;
}
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view:has(.comprobante-page)) {
  height: calc(100dvh - 122px);
}

/* ── migrado de styles.css:6949 (@media (max-width: 768px)) — F1 des-envuelto ── */
.main:has(> .view:has(.comprobante-page.comprobante-fs)) {
  height: 100dvh;
}
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view:has(.comprobante-page.comprobante-fs)) {
  height: calc(100dvh - 122px);
}

/* ── migrado de styles.css:6982 (@media (max-width: 768px)) — F1 des-envuelto ── */
.comprobante-page.comprobante-fs .comprobante-page-header {
  padding: 8px 12px 6px;
}
.comprobante-page.comprobante-fs .comprobante-page-header-entidad {
  gap: 2px 10px;
  margin-top: 4px;
  padding-top: 4px;
  font-size: 11px;
}
.comprobante-page.comprobante-fs .comprobante-header-entidad-cli {
  font-size: 12px;
}
/* En mobile sólo razón social + CUIT + lista; dirección y condición se
   ocultan para ahorrar pantalla vertical (operador toca el header del
   ERP / abre cliente si necesita verlas). */
.comprobante-page.comprobante-fs .comprobante-header-entidad-part[data-field="direccion"],
.comprobante-page.comprobante-fs .comprobante-header-entidad-part[data-field="localidad"],
.comprobante-page.comprobante-fs .comprobante-header-entidad-part[data-field="condicion"] {
  display: none;
}

/* ── migrado de styles.css:7984 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 600px) {
  .horario-row { grid-template-columns: 1fr; }
  .horario-sep { display: none; }
}

/* ── migrado de styles.css:8036 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 600px) {
  .user-editor-toolbar { padding: 8px 10px; }
  .user-editor-actions { padding: 8px 10px; }
  .user-editor-actions .btn { flex: 1; }
}

/* ── migrado de styles.css:9311 (@media (max-width: 768px)) — F1 des-envuelto ── */
#app > .sidebar .menu {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#app > .sidebar .menu-parent,
#app > .sidebar .menu-group.single .menu-item {
  padding: 0 10px;
  font-size: 12px;
}
#mobile-menu-toggle { display: none !important; }
/* Banner ARCA homologación en mobile (2026-06-03): en desktop está `fixed`
   en top:98px y el contenido compensa con padding-top. En mobile el layout
   real (styles-mobile.css) usa topbar `sticky` en flujo + `#app` padding-top:0,
   pero el banner seguía `fixed; top:98px` (regla global de styles.css, sin
   override mobile): quedaba flotando a 98px del viewport, PISANDO las tarjetas
   de KPIs del dashboard (nada reserva su espacio). Solución: en mobile lo
   pasamos al flujo normal — se ubica entre la topbar sticky y el contenido,
   ocupa su alto real (aunque el texto envuelva) y empuja el contenido sin
   solaparlo. Va después de la regla `fixed` de styles.css:8780 (misma
   especificidad + !important → gana por orden). */
#app > #afip-modo-banner {
  position: static !important;
  top: auto !important;
}

/* ── migrado de styles.css:9548 (@media (max-width: 768px)) — F1 des-envuelto ── */
.list-sticky-wrap {
  max-height: none;
  overflow: visible;
}

/* ── migrado de styles.css:9714 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 480px) {
  .welcome-test-modal {
    padding: 22px 18px 18px;
  }
  .welcome-test-modal h2 { font-size: 18px; }
  .welcome-test-cat svg { width: 96px; height: 96px; }
}

/* ── migrado de styles.css:9782 (@media (max-width: 768px)) — F1 des-envuelto ── */
.main:has(> .view.is-listado) {
  height: calc(100dvh - 98px);
}
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view.is-listado) {
  height: calc(100dvh - 122px);
}

/* ── migrado de styles.css:9959 (@media (max-width: 768px)) — F1 des-envuelto ── */
.view.is-listado > .card:last-child .table-wrap,
.view.is-listado > .card:last-child .table-articulos-wrap,
.view.is-listado > .card:last-child .list-sticky-wrap {
  overflow-x: visible;
  overflow-y: visible;
}

/* ── migrado de styles.css:10903 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 640px) {
  .filtros-row { gap: 8px; }
  .filtro-q { min-width: 140px; }
}

/* ── migrado de styles.css:11394 (@media (max-width: 768px)) — F1 des-envuelto ── */
 .inf-cat-grid { grid-template-columns: 1fr; } 

/* ── migrado de styles.css:11397 (@media (max-width: 768px)) — F1 des-envuelto ── */
.m3-dash-tablas        { grid-template-columns: 1fr !important; }
.m3-dash-tablas-inline { grid-template-columns: 1fr !important; }

/* ── migrado de styles.css:11512 (@media (max-width: 768px)) — F1 des-envuelto ── */
.mc-grid {
  grid-template-columns: 1fr;
}

/* ── migrado de styles.css:11849 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 720px) { .twc-menu-modo-grid { grid-template-columns: 1fr; } }

/* ── migrado de styles.css:12012 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 720px) {
  .twc-row,
  .twc-row.three { grid-template-columns: 1fr; }
  .twc-config-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-tab { padding: 10px 14px; font-size: 13px; }
}

/* ── migrado de styles.css:12052 (@media (max-width: 768px)) — F1 des-envuelto ── */
.pv-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ── migrado de styles.css:12170 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 767px) {
  .fc-config-card .fc-admin-pass-field {
    max-width: 100%;
  }
}

/* ── migrado de styles.css:12271 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 480px) {
  #erp-wizard-toast {
    bottom: 16px;
    right: 12px;
    left: 12px;
    max-width: 100%;
    width: auto;
  }
}

/* ── migrado de styles.css:12695 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 600px) {
  #wizard-tour-panel {
    position: fixed !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ── migrado de styles.css:12905 — F1 (wrapper sub-768 conservado) ── */
@media (max-width: 600px) {
  .wizard-cl-paso {
    padding: 8px;
    gap: 8px;
  }
  .wizard-cl-label {
    font-size: .85rem;
  }
}

/* ── fin bloques migrados F1 ── */


/* Footer del sidebar (user + logout) - oculto por defecto en desktop */
.sidebar-mobile-footer {
  display: none;
}

/* Botón logout del topbar mobile — oculto en desktop, se activa dentro del @media */
.mobile-topbar-logout {
  display: none;
}

  /* === LAYOUT base === */
  html {
    -webkit-text-size-adjust: 100%;
  }

  /* Override v1.36 #app display:block para que el drawer sea fixed sobre todo.
     padding-top:0 explícito para anular el padding-top:98px de styles.css
     (que en mobile no aplica porque la topbar pasa a ser un drawer). */
  #app {
    display: block !important;
    flex-direction: row;
    padding-top: 0 !important;
  }

  /* === SIDEBAR: drawer deslizante vertical (override v1.36 horizontal bar) ===
     Selector #app > .sidebar (no solo .sidebar) para vencer la especificidad
     del bloque desktop styles.css:8233 que tiene #app > .sidebar con
     position:fixed; right:0; width:100% !important. Sin esta especificidad
     el drawer mobile heredaba right:0 + width:100% y se veía como una barra
     horizontal encimada (bug reportado 2026-05-31). right:auto explícito
     porque ningún sed de mobile lo resetea. */
  #app > .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(86vw, 320px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background: #0f172a !important;
    color: #e5e7eb !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 24px !important;
    border-bottom: 0 !important;
    box-shadow: 0 0 30px rgba(0,0,0,0) !important;
    /* !important obligatorio: styles.css:8251 define `transform: none
       !important` para el sidebar horizontal de desktop. Sin !important
       acá, el drawer mobile arranca visible (bug reportado por Martín
       2026-05-31, segundo screenshot). */
    transform: translateX(-100%) !important;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  #app > .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 0 0 30px rgba(0,0,0,.45) !important;
  }
  /* FIX 2026-07-03: cuando el .header-row es position:fixed en mobile-completo,
     el primer hijo visible del sidebar pasa a ser el <nav class="menu">.
     Sin padding-top, el menú queda tapado por la topbar fija (50px). */
  body.mobile-erp-full:not(.mobile-lite-mode) #app > .sidebar > nav.menu {
    padding-top: 56px !important;
  }

  /* Main toma todo el ancho cuando el drawer esta cerrado */
  main, .main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* === SIDEBAR: ocultar modulos out-of-scope (solo en modo lite, no en completo) === */
  body:not(.mobile-erp-full) .sidebar [data-mobile-hide] {
    display: none !important;
  }

  /* === SIDEBAR HEADER (brand) — version mobile, override v1.36 === */
  .sidebar-header {
    padding: 8px 4px 12px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    background: transparent !important;
  }
  .sidebar .brand {
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-bottom: 0 !important;
    color: #fff !important;
  }
  .sidebar .brand-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }
  .sidebar .brand h1 {
    color: #fff !important;
    font-size: 14px !important;
  }
  .sidebar .brand p {
    color: #cbd5e1 !important;
    font-size: 11px !important;
  }
  .sidebar-header .brand-empresa span {
    color: #fff !important;
  }

  /* === MENU vertical, override v1.36 horizontal === */
  .sidebar .menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    background: transparent !important;
    position: relative !important;
    z-index: auto !important;
  }

  /* === Menu groups vertical block === */
  .sidebar .menu-group,
  .sidebar .menu-group.single {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* === Menu-parent: oculto en mobile (lista flat sin section labels) === */
  .sidebar .menu-parent {
    display: none !important;
  }
  .sidebar .menu-parent::before,
  .sidebar .menu-parent::after {
    display: none !important;
    content: none !important;
  }

  /* === Submenu: bloque vertical inline (no absolute dropdown) === */
  .sidebar .submenu {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  /* === Items leaves: full-width, vertical, touch-friendly === */
  .sidebar .menu-item,
  .sidebar .submenu .menu-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    background: transparent !important;
    color: #e5e7eb !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: left !important;
    box-shadow: none !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(96,165,250,.25);
    cursor: pointer;
  }

  .sidebar .menu-item:hover,
  .sidebar .menu-item:active,
  .sidebar .submenu .menu-item:hover,
  .sidebar .submenu .menu-item:active {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }

  .sidebar .menu-item.active,
  .sidebar .submenu .menu-item.active {
    background: #2563eb !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  /* === Sidebar mobile footer (user + logout) === */
  .sidebar-mobile-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 14px 8px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .sidebar-mobile-user {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    word-break: break-word;
    line-height: 1.3;
  }

  .sidebar-mobile-footer #sidebar-mobile-logout {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
  }
  .sidebar-mobile-footer #sidebar-mobile-logout:hover,
  .sidebar-mobile-footer #sidebar-mobile-logout:active {
    background: #dc2626 !important;
  }

  /* === BACKDROP === */
  .mobile-backdrop {
    z-index: 1000 !important;
  }

  /* === TOPBAR: override v1.36 top: 116px (sidebar es horizontal en desktop) === */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    justify-content: flex-start !important;
  }

  .topbar h2 {
    font-size: 17px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .topbar p,
  #page-subtitle {
    display: none !important;
  }

  .top-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  /* Hide noisy top elements */
  .top-actions .global-master-search,
  #global-master-search-input,
  #topbar-empresa-switch,
  #btn-candado,
  #ml-status-badge,
  #current-user-badge,
  #api-status,
  #crm-notif-wrap,
  /* fix 2026-05-17b: ocultar también el contenedor .header-status-icons —
     styles.css le pone display:flex !important y sin ocultar el contenedor
     queda un div vacío con gap en el topbar aunque sus hijos estén ocultos. */
  .header-status-icons,
  #btn-logout,
  /* Sprint J6 (2026-05-10): "Mi cuenta" se mueve al footer mobile del
     drawer junto al logout. En el topbar reducido apretaba demasiado. */
  #btn-mi-cuenta,
  /* fix 2026-05-17: el dropdown .header-mi-cuenta rompe en mobile porque su
     submenu position:absolute escapa del overflow:hidden del sidebar-drawer;
     se reemplaza por el botón directo #mobile-topbar-logout. */
  .header-mi-cuenta,
  /* fix 2026-05-24 (Martín): en mobile NO se permite editar configuraciones de
     usuario. El botón "Mi cuenta" del footer del drawer abría la pantalla de
     Configuraciones pisando todo el ERP. Solo queda "Salir". Para gestionar
     la cuenta hay que entrar desde desktop. */
  #sidebar-mobile-mi-cuenta {
    display: none !important;
  }

  /* Botón logout directo en topbar mobile — flecha → que invoca doLogout() */
  .mobile-topbar-logout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15) !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 8px !important;
    cursor: pointer;
    padding: 0 !important;
    transition: background .15s ease;
    -webkit-tap-highlight-color: rgba(0,0,0,.1);
    touch-action: manipulation;
    flex-shrink: 0;
  }
  .mobile-topbar-logout:hover,
  .mobile-topbar-logout:active {
    background: rgba(220, 38, 38, .55) !important;
    border-color: rgba(220, 38, 38, .7) !important;
  }

  #btn-refresh {
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    white-space: nowrap;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    padding: 4px 10px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-right: 0 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,.1);
  }

  /* === VIEW: override v1.36 max-width 1440px === */
  .view {
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  /* === GRIDS: 1 columna === */
  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* === CARDS: padding compacto === */
  .card {
    padding: 14px;
    border-radius: 10px;
  }
  .card h3 {
    font-size: 16px;
    margin: 0 0 10px;
  }

  /* === INPUTS / BOTONES touch-friendly === */
  /* F3 MODO-MOBILE (2026-08-02): 16px en controles de texto — con menos de
     16px iOS Safari hace auto-zoom al enfocar y descoloca toda la pantalla. */
  .input,
  select.input,
  textarea.input,
  input[type="text"].input,
  input[type="number"].input,
  input[type="email"].input,
  input[type="tel"].input,
  input[type="password"].input,
  input[type="date"].input {
    min-height: 44px;
    font-size: 16px;
  }
  .btn,
  button.btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }
  /* F3: checkboxes/radios con zona de toque real (los 13px default son
     insufribles al dedo). accent-color = azul canónico de selección. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #2563eb;
  }

  /* === TABLAS data-entry / autocomplete: scroll horizontal con touch ===
     Las tablas con .table-wrap-autocomplete tienen comportamiento especial
     (sticky, autocomplete) y no se transforman a cards — siguen scrolleando. */
  .table-wrap-autocomplete {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .table-wrap-autocomplete table { font-size: 13px; }
  .table-wrap-autocomplete th,
  .table-wrap-autocomplete td {
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* === LISTADOS: tablas como cards verticales (estilo PWA) ===
     Para listados regulares (.table-wrap.mobile-cards) en mobile, cada fila
     se vuelve un card con label/valor por columna. El helper JS
     applyMobileTableLabels() agrega `data-label` a cada <td> leyendo
     los <th> del thead — eso es lo que aparece como "etiqueta" via ::before.
     Tablas que no quieren la transformación: agregar clase no-mobile-cards. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .table-wrap.no-mobile-cards table { font-size: 13px; }
  .table-wrap.no-mobile-cards th,
  .table-wrap.no-mobile-cards td {
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* Card layout: solo si la tabla está marcada con .mobile-cards
     (lo agrega el helper auto al detectar .table-wrap sin no-mobile-cards).
     !important en display: iOS Safari no respeta cambios de display en elementos
     de tabla sin !important (quirk conocido), lo que deja columnas aplastadas. */
  .table-wrap.mobile-cards { overflow-x: visible !important; }
  .table-wrap.mobile-cards table {
    display: block !important;
    width: 100% !important;
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
  }
  .table-wrap.mobile-cards thead { display: none !important; }
  .table-wrap.mobile-cards tbody { display: block !important; }
  .table-wrap.mobile-cards tr {
    display: block !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  }
  .table-wrap.mobile-cards tr.cliente-row-selected,
  .table-wrap.mobile-cards tr.venta-row-selected,
  .table-wrap.mobile-cards tr.compra-row-selected,
  .table-wrap.mobile-cards tr.row-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
  }
  .table-wrap.mobile-cards td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px dashed #f3f4f6;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: right;
    min-width: 0;
  }
  .table-wrap.mobile-cards td:last-child { border-bottom: 0; }
  .table-wrap.mobile-cards td::before {
    content: attr(data-label);
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    /* 2026-06-22: la etiqueta ENVUELVE en vez de truncar (antes "Tipo de
       producto" → "Ti...", "Modificado" → "Mo...", ilegible). 34% para dar
       más aire al valor (los números no entraban y se cortaban). */
    flex: 0 0 34%;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
  }
  /* Celdas que no llevan label (sin data-label = celdas de acciones,
     checkboxes, etc.) se centran sin mostrar el ::before. */
  .table-wrap.mobile-cards td:not([data-label])::before,
  .table-wrap.mobile-cards td[data-label=""]::before { display: none; }
  .table-wrap.mobile-cards td:not([data-label]),
  .table-wrap.mobile-cards td[data-label=""] {
    justify-content: center;
    text-align: center;
  }
  /* Celdas con botones de acción (.actions) — bloque centrado, sin label. */
  .table-wrap.mobile-cards td:has(> .actions),
  .table-wrap.mobile-cards td:has(> button:only-child) {
    justify-content: center;
  }
  .table-wrap.mobile-cards td:has(> .actions)::before,
  .table-wrap.mobile-cards td:has(> button:only-child)::before { display: none; }
  .table-wrap.mobile-cards td .actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  /* Sortable headers no se ven cuando el thead está oculto, pero por las
     dudas anular el cursor para no confundir si algún día se muestran. */
  .table-wrap.mobile-cards th.sortable-th { cursor: default; }

  /* 2026-06-22: el listado de Artículos (.product-list-table) define min/max-width
     y overflow:hidden por columna para la tabla de ESCRITORIO. En modo tarjeta
     mobile esos anchos amontonan/cortan el contenido (nombre con ellipsis, etc.).
     Los neutralizamos para que cada fila-tarjeta se acomode al ancho del celular. */
  .table-wrap.mobile-cards .product-list-table td[data-col] {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* 2026-08-02 (screenshot Martín: "las tarjetas de productos se ven
     verticales"): styles.css también fija ANCHOS POR COLUMNA de escritorio
     (.product-list-table td:nth-child(N) { width: 10% } etc.). Con el td en
     display:flex ese width deja la fila-tarjeta de ~30px y el valor envuelve
     LETRA POR LETRA en vertical. En modo tarjeta cada td es una fila completa:
     el ancho de columna no aplica NUNCA. Genérico para todos los listados. */
  .table-wrap.mobile-cards td,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td {
    width: auto !important;
  }

  /* 2026-08-02 (screenshot Martín cc-clientes + Inicio): las reglas de
     "scroll forzado" mobile (min-width: 580px/900px en la tabla) no aplican
     NUNCA en modo tarjeta — el wrap tiene overflow hidden y la tabla ancha
     manda todos los valores fuera de la pantalla (se ven las tarjetas con
     los valores "vacíos"). La tarjeta ocupa el ancho del celular y listo. */
  .table-wrap.mobile-cards table,
  body.mobile-erp-full .table-wrap.mobile-cards table,
  body.mobile-erp-full .list-sticky-wrap .table-wrap table {
    min-width: 0 !important;
  }

  /* === MODALES: fullscreen === */
  .app-modal,
  .bulk-modal,
  .comprobante-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    inset: 0 !important;
  }
  .app-modal-overlay,
  .bulk-modal-backdrop,
  .comprobante-modal-overlay {
    padding: 0 !important;
  }
  .app-modal-body,
  .comprobante-modal-body {
    max-height: calc(100vh - 110px) !important;
  }

  /* === OPEN-TABS hidden === */
  .open-tabs {
    display: none !important;
  }

/* ============================================================================
 * PHONE estricto <=480px - mas compactacion
 * ============================================================================ */
@media (max-width: 480px) {
  .topbar {
    padding: 8px 10px !important;
  }
  .topbar h2 {
    font-size: 15px !important;
  }
  #btn-refresh {
    padding: 6px !important;
    font-size: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  #btn-refresh::before {
    content: "↻";
    font-size: 18px;
  }
  .view {
    padding: 10px !important;
  }
  .card {
    padding: 12px;
    border-radius: 8px;
  }
  .sidebar .menu-item,
  .sidebar .submenu .menu-item {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}

/* ============================================================
 * ERP COMPLETO EN MOBILE — F0 (2026-07-03) + F1 (2026-07-03)
 * Estilos que hacen usables las rutas clásicas del ERP en
 * viewport <=768px cuando el usuario activó el modo completo.
 * SCOPE: body.mobile-erp-full @media (max-width:768px)
 * No tocan el modo lite ni el desktop.
 * Usan los tokens :root ya definidos en styles.css.
 * ============================================================ */

/* === F0: LISTADOS: tabla → tarjetas apiladas === */
  body.mobile-erp-full .table-wrap.mobile-cards,
  body.mobile-erp-full .list-sticky-wrap .table-wrap {
    overflow-x: hidden !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards table,
  body.mobile-erp-full .list-sticky-wrap .table-wrap table {
    display: block !important;
    width: 100% !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards thead,
  body.mobile-erp-full .list-sticky-wrap .table-wrap thead {
    display: none !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards tbody,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tbody,
  body.mobile-erp-full .table-wrap.mobile-cards tr,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr {
    display: block !important;
    width: 100% !important;
  }
  /* 2026-07-04 FIX: layout de tarjeta LIMPIO y sin recorte. Cada celda = una
     fila "ETIQUETA (chica, gris, izq) ......... valor (der, negro, envuelve)".
     El valor usa overflow-wrap:anywhere para que un número/código largo
     (WEB-0001-00000123) ENVUELVA en vez de cortarse; el tr NO recorta. */
  body.mobile-erp-full .table-wrap.mobile-cards td,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 8px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink, #172033) !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    min-height: 0 !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards td::before,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td[data-label]::before {
    content: attr(data-label);
    font-weight: 600 !important;
    color: var(--muted, #64748b) !important;
    flex: 0 0 auto !important;
    max-width: 46% !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  /* Primera celda de cada tarjeta (dato principal): más grande y destacada. */
  body.mobile-erp-full .table-wrap.mobile-cards td:first-child,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding-top: 10px !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards td:last-child,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards tr,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr {
    display: block !important;
    background: var(--surface, #fff) !important;
    border-radius: var(--radius-lg, 14px) !important;
    margin-bottom: 12px !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(0,0,0,.08)) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    overflow: visible !important;
  }

  /* === F0: FILTROS Y BARRAS STICKY: apiladas verticalmente === */
  body.mobile-erp-full .section-title-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.mobile-erp-full .section-title-row .actions,
  body.mobile-erp-full .section-title-row .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.mobile-erp-full .list-sticky-wrap .filter-row,
  body.mobile-erp-full .sticky-bar,
  body.mobile-erp-full .filtros-wrap {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  body.mobile-erp-full .list-sticky-wrap .filter-row .input,
  body.mobile-erp-full .list-sticky-wrap .filter-row select {
    width: 100% !important;
    font-size: 15px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* BUGFIX ticket #180 (2026-07-06): "en Productos llego al final de la
     lista y no me deja cambiar de página, se queda en la página 1".
     Causa raíz: styles.css:7685 fija `.pagination-controls { flex-wrap:
     nowrap; white-space: nowrap }` GLOBAL (commit 1e9d54b, 2026-06-14,
     pensado para desktop: que la flecha › no se parta a otro renglón).
     Nunca tuvo excepción mobile porque Productos estaba con
     data-mobile-hide hasta el flip a "ERP completo" default (5c67586,
     2026-07-03) — recién ahí quedó alcanzable desde el celular. Con
     nowrap + un catálogo de varias páginas, los botones "2 3 … ›" quedan
     fuera del ancho del viewport y el layout mobile los recorta
     (overflow-x:hidden de la línea 621) → el usuario solo ve/toca la
     página 1 para siempre. Fix: permitir que los controles bajen de
     línea en mobile en vez de recortarse. Afecta TODOS los listados
     (componente compartido paginarFilas/wirePaginacion en app.js), no
     solo Productos — es la corrección correcta para cualquiera con
     >1 página en mobile-erp-full. Desktop queda intacto (media query). */
  body.mobile-erp-full .pagination-controls {
    flex-wrap: wrap !important;
    white-space: normal !important;
    row-gap: 6px !important;
  }

  /* === F0: MODALES: pantalla completa en mobile === */
  body.mobile-erp-full .app-modal-overlay .app-modal,
  body.mobile-erp-full .app-modal-overlay > div > .app-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.mobile-erp-full .app-modal-body,
  body.mobile-erp-full .app-modal-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .app-modal-footer,
  body.mobile-erp-full .app-modal .modal-actions {
    padding: 12px 16px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    background: var(--surface, #fff) !important;
    position: sticky !important;
    bottom: 0 !important;
  }

  /* === F0: COMPROBANTE MODAL (cv2) === */
  body.mobile-erp-full .comprobante-modal-overlay .comprobante-modal,
  body.mobile-erp-full .comprobante-page {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.mobile-erp-full .comprobante-modal-body,
  body.mobile-erp-full .comprobante-page-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }
  body.mobile-erp-full .comprobante-modal-header {
    flex-shrink: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #fff) !important;
  }

  /* === F0: FORMULARIOS: 1 columna, inputs touch-friendly === */
  body.mobile-erp-full .form-grid,
  body.mobile-erp-full .form-grid-2,
  body.mobile-erp-full .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.mobile-erp-full .form-grid [style*="grid-column:1/-1"],
  body.mobile-erp-full .form-grid-2 [style*="grid-column:1/-1"] {
    grid-column: 1 / -1 !important;
  }
  body.mobile-erp-full .input,
  body.mobile-erp-full .select,
  body.mobile-erp-full input[type="text"],
  body.mobile-erp-full input[type="number"],
  body.mobile-erp-full input[type="date"],
  body.mobile-erp-full input[type="email"],
  body.mobile-erp-full textarea,
  body.mobile-erp-full select {
    min-height: 44px !important;
    /* F3 (2026-08-02): 16px — evita el auto-zoom de iOS al enfocar. */
    font-size: 16px !important;
  }
  body.mobile-erp-full .btn,
  body.mobile-erp-full button.btn,
  body.mobile-erp-full .button {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* === F0: BARRAS DE ACCIONES POR FILA === */
  body.mobile-erp-full .row-actions,
  body.mobile-erp-full .td-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.mobile-erp-full .row-actions .btn,
  body.mobile-erp-full .td-actions .btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* === F0: BARRA STICKY de acciones en listados === */
  body.mobile-erp-full .list-action-bar,
  body.mobile-erp-full .sticky-action-bar {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #fff) !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    padding: 10px 12px !important;
    z-index: 50 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* === F0: CARD view clásica en mobile === */
  body.mobile-erp-full .card.view,
  body.mobile-erp-full .view.card {
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: calc(100dvh - 56px) !important;
  }

  /* === F0: TOPBAR clásica en mobile-completo ===
     FIX 2026-07-03: el .header-row vive DENTRO del .sidebar off-canvas.
     Para que el ☰ y el título sean siempre visibles (aunque el sidebar esté
     cerrado), sacamos el .header-row del flujo del drawer con position:fixed.
     z-index: 1002 > sidebar (1001) → queda por encima del backdrop también. */
  body.mobile-erp-full:not(.mobile-lite-mode) #app > .sidebar > .header-row {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1002 !important;
    background: var(--primary, #2c6ef2) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    box-sizing: border-box !important;
  }
  /* Compensar el espacio que ocupa el header fijo para que el contenido no quede tapado */
  body.mobile-erp-full:not(.mobile-lite-mode) main,
  body.mobile-erp-full:not(.mobile-lite-mode) .main {
    padding-top: 50px !important;
  }
  /* Cuando el sidebar está abierto, el .header-row necesita el mismo ancho del sidebar
     Para que no tape el contenido del drawer, el header-row queda encima como topbar fija */
  body.mobile-erp-full:not(.mobile-lite-mode) #app > .sidebar.open > .header-row {
    width: 100% !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-row {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-title {
    flex: 1 !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-title h2 {
    font-size: 16px !important;
    margin: 0 !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-title p {
    display: none !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .top-actions {
    gap: 4px !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .global-master-search {
    display: none !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) #api-status,
  body.mobile-erp-full:not(.mobile-lite-mode) .status {
    display: none !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-mi-cuenta {
    display: none !important;
  }

  /* Toggle vista simple/completa — chip flotante DISCRETO (2026-07-03: antes
     grande y opaco tapaba contenido). Ahora compacto, semi-transparente, se
     opaca al tocar. */
  #erp-mobile-mode-toggle {
    position: fixed !important;
    right: 10px !important;
    bottom: 62px !important;
    z-index: 8000 !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: .72 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
    cursor: pointer !important;
    transition: opacity .15s ease !important;
  }
  #erp-mobile-mode-toggle:active { opacity: 1 !important; }

  /* Que el contenido no quede tapado por los botones flotantes (Inicio + toggle). */
  body.mobile-erp-full #view { padding-bottom: 96px !important; }

  /* KPIs del dashboard: los montos grandes se cortaban. Escalan al ancho y no
     desbordan la tarjeta. */
  body.mobile-erp-full #dashboard-kpis-wrap .kpi .value {
    font-size: clamp(0.95rem, 4.6vw, 1.35rem) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
  }
  body.mobile-erp-full #dashboard-kpis-wrap .kpi {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ================================================================
   * F1: FILTROS COLAPSABLES en modo completo
   * El buscador de texto principal siempre visible.
   * El resto de filtros (.listado-filtros-extra) colapsa en acordeón.
   * "Filtros" toggle con badge si hay filtros activos.
   * ================================================================ */
  body.mobile-erp-full .listado-filtros-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: var(--surface-alt, #f8fafc) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text, #1e293b) !important;
    cursor: pointer !important;
    text-align: left !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    transition: background .15s !important;
  }
  body.mobile-erp-full .listado-filtros-toggle:active {
    background: var(--surface, #f1f5f9) !important;
  }
  body.mobile-erp-full .listado-filtros-toggle .filtros-badge {
    background: var(--primary, #2c6ef2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
  }
  body.mobile-erp-full .listado-filtros-toggle .filtros-arrow {
    margin-left: auto !important;
    transition: transform .2s !important;
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  body.mobile-erp-full .listado-filtros-toggle[aria-expanded="true"] .filtros-arrow {
    transform: rotate(180deg) !important;
  }
  body.mobile-erp-full .listado-filtros-toggle[aria-expanded="false"] + .listado-filtros-extra {
    display: none !important;
  }
  body.mobile-erp-full .listado-filtros-extra {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
    animation: slideDown .15s ease !important;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* form-grid dentro de listado-filtros en modo completo: 1 columna */
  body.mobile-erp-full .listado-filtros .form-grid,
  body.mobile-erp-full .listado-filtros-extra .form-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.mobile-erp-full .listado-filtros .field,
  body.mobile-erp-full .listado-filtros-extra .field {
    max-width: none !important;
  }

  /* ================================================================
   * F1: COMPROBANTE V2 — grid de ítems touch-friendly
   * Enfoque conservador: scroll horizontal claro + inputs touch-sized.
   * NO se reestructura el DOM de tr/td para no romper la lógica de cv2.
   * ================================================================ */

  /* El grid de ítems cv2 scrollea horizontal en mobile (muchas columnas).
     Envolvemos en un contenedor que hace scroll snapeado. */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 0 !important;
    /* Columnas fijas del comprobante en mobile: más anchas para touch */
    font-size: 13px !important;
  }
  /* Inputs de cantidad y precio: touch-friendly (44px de alto) */
  body.mobile-erp-full .cv2-items-table input[type="number"],
  body.mobile-erp-full .cv2-items-table input[type="text"] {
    min-height: 40px !important;
    font-size: 15px !important;
  }
  /* Inputs de cantidad: más angostos para no colapsar la tabla */
  body.mobile-erp-full .cv2-items-table .col-cant input {
    width: 56px !important;
    text-align: center !important;
  }
  /* Precio: ancho razonable */
  body.mobile-erp-full .cv2-items-table .col-precio input {
    width: 90px !important;
    text-align: right !important;
  }
  /* Botón eliminar fila: zona de toque grande */
  body.mobile-erp-full .cv2-items-table .col-del button,
  body.mobile-erp-full .cv2-items-table td:last-child button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    font-size: 18px !important;
  }
  /* Columna descripción: permite wrap en mobile para no forzar scroll excesivo */
  body.mobile-erp-full .cv2-items-table .col-desc {
    min-width: 120px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Header de la tabla cv2: sticky para que las labels sean visibles al scrollear */
  body.mobile-erp-full .cv2-items-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--surface-alt, #f8fafc) !important;
  }

/* ============================================================
 * ERP COMPLETO EN MOBILE — F2 (2026-07-03)
 * Pulido UX de: tabs overflow → scroll snap, acciones de fila
 * por tarjeta, topbar compacta F2, cv2 ítems apilados, modales ABM.
 * SCOPE ESTRICTO: body.mobile-erp-full @media (max-width:768px)
 * ============================================================ */

  /* ================================================================
   * F2-1: TABS DE LISTADO — scroll horizontal con snap
   * Convierte el wrap de pestañas con flex-wrap en un scroll snap.
   * El container ya tiene id="ventas-tabs-grupo" / id="compras-tabs-grupo"
   * con style="display:flex;flex-wrap:wrap;gap:6px" inline.
   * Con CSS solo reemplazamos flex-wrap por scroll-x.
   * ================================================================ */
  body.mobile-erp-full #ventas-tabs-grupo,
  body.mobile-erp-full #compras-tabs-grupo,
  body.mobile-erp-full #tl-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    /* Fade derecho para indicar que hay más pestañas */
    mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
    /* Separación del contenido de abajo */
    margin-bottom: 12px !important;
    position: relative !important;
  }
  /* Ocultar scrollbar en webkit */
  body.mobile-erp-full #ventas-tabs-grupo::-webkit-scrollbar,
  body.mobile-erp-full #compras-tabs-grupo::-webkit-scrollbar,
  body.mobile-erp-full #tl-tabs::-webkit-scrollbar {
    display: none !important;
  }
  /* Las pestañas individuales: no se achican, snap de izquierda */
  body.mobile-erp-full #ventas-tabs-grupo .open-tab,
  body.mobile-erp-full #compras-tabs-grupo .open-tab,
  body.mobile-erp-full #tl-tabs .open-tab {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  /* Tab activa: subrayado primary visible y auto-scroll via JS */
  body.mobile-erp-full #ventas-tabs-grupo .open-tab.active,
  body.mobile-erp-full #compras-tabs-grupo .open-tab.active,
  body.mobile-erp-full #tl-tabs .open-tab.active {
    border-bottom: 2px solid var(--primary, #2c6ef2) !important;
    color: var(--primary, #2c6ef2) !important;
    font-weight: 600 !important;
  }
  /* Tabs internas de modal (product-modal-tab): igual tratamiento */
  body.mobile-erp-full .product-modal-tabs,
  body.mobile-erp-full .app-modal-body .product-modal-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    padding-bottom: 2px !important;
    mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
  }
  body.mobile-erp-full .product-modal-tabs::-webkit-scrollbar { display: none !important; }
  body.mobile-erp-full .product-modal-tab {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  /* ================================================================
   * F2-2: ACCIONES DE FILA EN TARJETAS
   * Las <td class="actions"> que vienen de la tabla → tarjeta card
   * se muestran como una franja de botones al pie de cada tarjeta.
   * La barra de acciones sobre-la-tabla (.cliente-row-actions) se
   * convierte en sticky abajo cuando hay una fila seleccionada.
   * ================================================================ */

  /* Celda actions dentro de una tarjeta card: franja de botones */
  body.mobile-erp-full .list-sticky-wrap .table-wrap td.actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    background: var(--surface-alt, #f8fafc) !important;
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px) !important;
    /* Quitar el label "before" que se pone en todas las td */
    align-items: center !important;
  }
  body.mobile-erp-full .list-sticky-wrap .table-wrap td.actions::before {
    display: none !important;
  }
  body.mobile-erp-full .list-sticky-wrap .table-wrap td.actions .btn {
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    flex: 0 0 auto !important;
  }

  /* Barra de acciones superior (.cliente-row-actions) → sticky abajo
     cuando hay fila seleccionada (.has-row-selected marca el wrap).
     El JS agrega/quita la clase .has-row-selected en el .list-sticky-wrap. */
  body.mobile-erp-full .list-sticky-wrap .cliente-row-actions,
  body.mobile-erp-full .section-title-row .cliente-row-actions {
    /* Default: visible arriba como siempre. F2 la duplica abajo. */
    /* La versión sticky abajo la provee .mobile-erp-row-action-bar */
  }

  /* Barra de acciones sticky (insertada por JS cuando se selecciona una fila).
     Solo existe dentro de body.mobile-erp-full. */
  body.mobile-erp-full .mobile-erp-row-action-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    background: var(--surface, #fff) !important;
    border-top: 2px solid var(--primary, #2c6ef2) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.12) !important;
    animation: slideUpBar .15s ease !important;
  }
  @keyframes slideUpBar {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  body.mobile-erp-full .mobile-erp-row-action-bar .mobile-erp-bar-label {
    font-size: 11px !important;
    color: var(--text-muted, #64748b) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    flex-basis: 100% !important;
    margin-bottom: 2px !important;
  }
  body.mobile-erp-full .mobile-erp-row-action-bar .btn {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    flex: 0 0 auto !important;
  }
  /* Espacio extra abajo del listado para que la barra no tape content */
  body.mobile-erp-full .list-sticky-wrap {
    padding-bottom: 80px !important;
  }

  /* ================================================================
   * F2-3: TOPBAR COMPACTA en mobile-erp-full
   * La topbar clásica (header.header) ya queda sticky desde F0.
   * Acá la hacemos más compacta y agregamos un indicador de sección.
   * ================================================================ */

  /* Reducir altura total de la topbar */
  body.mobile-erp-full:not(.mobile-lite-mode) .header-row {
    padding: 6px 10px !important;
    min-height: 48px !important;
    align-items: center !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-title h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 45vw !important;
  }
  /* Chip de empresa activa en topbar (si existe) — compacto */
  body.mobile-erp-full:not(.mobile-lite-mode) #topbar-empresa-chip {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    max-width: 28vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
  /* Las top-actions en el modo completo: solo el toggle + el botón de refresh.
     El resto ya estaba oculto desde F0. */
  body.mobile-erp-full:not(.mobile-lite-mode) .top-actions {
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .top-actions .btn,
  body.mobile-erp-full:not(.mobile-lite-mode) .top-actions button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  /* ================================================================
   * F2-4: COMPROBANTE V2 — ítems apilados como tarjetas
   * CSS-only sobre la estructura existente de <tr>/<td>.
   * NO cambia el DOM (que cv2 lee por índice), solo display.
   * Cada <tr data-cv2-line> se convierte en un bloque con:
   *   — fila 1: num + código + descripción (ancho completo)
   *   — fila 2: cantidad + precio + dto + subtotal + eliminar
   * ================================================================ */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table table,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table table {
    /* Sobrescribir overflow-x: auto que venía de F1 */
    overflow-x: visible !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table {
    overflow-x: visible !important;
  }
  /* El tbody completo: cada fila es un bloque */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table tbody,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  /* Cabecera: ocultar, los labels van inline */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table thead,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table thead {
    display: none !important;
  }
  /* Cada fila de ítem: tarjeta apilada.
     Estrategia: CSS grid sin contar columnas fijas.
     Fila 1: num + codigo (en línea)
     Fila 2: desc (span completo)
     Fila 3: todos los controles numéricos en flex */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table tbody tr[data-cv2-line],
  body.mobile-erp-full .comprobante-page-body .cv2-items-table tbody tr[data-cv2-line] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(0,0,0,.06)) !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  /* --- Posicionamiento de celdas: flex row+wrap en el <tr> ---
     Orden de aparición en DOM: num, codigo, desc, cant, precio, dto, [iva], sub, [costo-lic, rentab-lic], del
     Usamos order CSS para reordenar sin tocar el DOM.
     Layout resultado:
       Zona header (fila inline): num + codigo
       Zona desc (bloque ancho completo): desc
       Separador visual
       Zona controles (fila flex wrap): cant + precio + dto + iva + sub + del
  */

  /* Zona header: num + codigo en línea */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-num,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-num {
    order: 1 !important;
    padding: 8px 4px 4px 10px !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-codigo,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-codigo {
    order: 2 !important;
    flex: 1 !important;
    padding: 8px 10px 4px 4px !important;
    min-width: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-codigo input,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-codigo input {
    width: 100% !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }

  /* Descripción: ocupa toda la línea siguiente.
     Con flex-wrap: wrap en el <tr>, width:100% la empuja a su propia fila. */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-desc,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-desc {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 2px 10px 8px !important;
    min-width: 0 !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-desc input,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-desc input {
    width: 100% !important;
    font-size: 14px !important;
    min-height: 38px !important;
    font-weight: 500 !important;
  }

  /* Controles numéricos: orden 4+ → línea inferior, flex wrap */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-cant,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-cant {
    order: 4 !important;
    flex-shrink: 0 !important;
    padding: 6px 6px 10px !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-precio,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-precio {
    order: 5 !important;
    flex-shrink: 0 !important;
    padding: 6px 6px 10px !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-dto,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-dto {
    order: 6 !important;
    flex-shrink: 0 !important;
    padding: 6px 6px 10px !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-iva,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-iva {
    order: 7 !important;
    flex-shrink: 0 !important;
    padding: 6px 4px 10px !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-sub,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-sub {
    order: 8 !important;
    flex: 1 !important;
    padding: 6px 6px 10px !important;
    align-self: center !important;
    font-weight: 700 !important;
    text-align: right !important;
    min-width: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .cv2-lic-col,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .cv2-lic-col {
    order: 9 !important;
    flex-shrink: 0 !important;
    padding: 6px 4px 10px !important;
    align-self: center !important;
    min-width: 0 !important;
    font-size: 11px !important;
    color: var(--text-muted, #64748b) !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-del,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-del {
    order: 10 !important;
    flex-shrink: 0 !important;
    padding: 6px 8px 10px !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  /* Fila de "agregar ítem" — no aplica grid especial */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .cv2-add-line-row,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .cv2-add-line-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px dashed var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    background: var(--surface-alt, #f8fafc) !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .cv2-add-line-row td,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .cv2-add-line-row td {
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
  }
  /* Inputs touch-friendly en la fila de controles */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-cant input,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-cant input {
    width: 64px !important;
    min-height: 40px !important;
    font-size: 15px !important;
    text-align: center !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-precio input,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-precio input {
    width: 80px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    text-align: right !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-dto input,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-dto input {
    width: 52px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    text-align: center !important;
  }
  /* Botón bulto-toggle: tamaño táctil */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .cv2-bulto-toggle,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .cv2-bulto-toggle {
    min-height: 36px !important;
    min-width: 36px !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  /* Botón eliminar */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .cv2-line-del,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .cv2-line-del {
    min-height: 40px !important;
    min-width: 40px !important;
    font-size: 20px !important;
    padding: 0 !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    color: #dc2626 !important;
  }

  /* ================================================================
   * F2-5: MODALES ABM — tabs internas + footer sticky + espaciado
   * ================================================================ */

  /* Tabs internas del modal: detectamos por .product-modal-tabs si existe,
     o por el contenedor .app-modal-body que contiene product-modal-tab */
  body.mobile-erp-full .app-modal-body .product-modal-tab,
  body.mobile-erp-full .comprobante-modal-body .product-modal-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    scroll-snap-align: start !important;
  }
  /* Footer del modal: sticky + touch */
  body.mobile-erp-full .app-modal-footer .btn,
  body.mobile-erp-full .app-modal .modal-actions .btn {
    min-height: 46px !important;
    font-size: 15px !important;
    flex: 1 !important;
    justify-content: center !important;
  }
  /* Fieldsets en modales ABM: buen espaciado */
  body.mobile-erp-full .app-modal-body fieldset {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
  }
  body.mobile-erp-full .app-modal-body fieldset legend {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text-muted, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    padding: 0 6px !important;
  }
  /* Scroll interno del modal ABM: asegurar que sea fluid */
  body.mobile-erp-full .app-modal-body:not(.comprobante-modal-body) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px !important;
  }

  /* ================================================================
   * F3-B2: ROTULOS INLINE en items cv2 apilados (mobile-only)
   * Las celdas de cantidad/precio/dto/subtotal no tienen label porque
   * en desktop el <thead> los da. En mobile el <thead> queda oculto.
   * Usamos ::before con content sobre los data-cv2-label que inyectamos
   * via CSS puro sin tocar el DOM.
   * ================================================================ */
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-cant::before,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-cant::before {
    content: "Cant." !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--text-muted, #94a3b8) !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-precio::before,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-precio::before {
    content: "P.Unit." !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--text-muted, #94a3b8) !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-dto::before,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-dto::before {
    content: "Dto.%" !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--text-muted, #94a3b8) !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }
  body.mobile-erp-full .comprobante-modal-body .cv2-items-table .col-sub::before,
  body.mobile-erp-full .comprobante-page-body .cv2-items-table .col-sub::before {
    content: "Subtotal" !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--text-muted, #94a3b8) !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  /* ================================================================
   * F3-B3: BOTON "..." de acciones en topbar mobile
   * Se inyecta via JS (applyMobileTopbarActionsBtn) — solo CSS aquí.
   * El botón #mobile-topbar-actions-btn abre un menú flotante
   * #mobile-topbar-actions-menu que clona los botones de .section-title-row .actions
   * ================================================================ */
  body.mobile-erp-full #mobile-topbar-actions-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 4px 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    letter-spacing: 2px !important;
  }
  body.mobile-erp-full #mobile-topbar-actions-menu {
    position: fixed !important;
    top: 52px !important;
    right: 10px !important;
    z-index: 600 !important;
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
    min-width: 200px !important;
    padding: 6px 0 !important;
    display: none;
  }
  body.mobile-erp-full #mobile-topbar-actions-menu.open {
    display: block !important;
    animation: fadeInMenu .12s ease !important;
  }
  @keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.mobile-erp-full #mobile-topbar-actions-menu .btn {
    display: block !important;
    width: calc(100% - 16px) !important;
    margin: 3px 8px !important;
    text-align: left !important;
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }

  /* ================================================================
   * TANDA 2 — B1: CONFIG EMPRESA / AFIP — modal pantalla completa
   * El modal de empresa usa .comprobante-modal (patrón canónico).
   * Aseguramos que las tabs internas (.emp-modal-tab) scrolleen
   * y el form-grid colapse a 1 columna.
   * ================================================================ */

  /* Modal empresa: fullscreen en mobile */
  body.mobile-erp-full .comprobante-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Tabs empresa — barra scrollable horizontal */
  body.mobile-erp-full .comprobante-modal .product-modal-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  body.mobile-erp-full .comprobante-modal .product-modal-tabs::-webkit-scrollbar {
    display: none !important;
  }
  body.mobile-erp-full .comprobante-modal .product-modal-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 5px 12px !important;
    scroll-snap-align: start !important;
  }

  /* Form-grid en 1 columna dentro de modales */
  body.mobile-erp-full .comprobante-modal .form-grid,
  body.mobile-erp-full .comprobante-modal .form-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Botones de acción del modal empresa — sticky abajo */
  body.mobile-erp-full .comprobante-modal .comprobante-modal-footer,
  body.mobile-erp-full .comprobante-modal .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface, #fff) !important;
    z-index: 10 !important;
    padding: 10px 14px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    display: flex !important;
    gap: 8px !important;
  }
  body.mobile-erp-full .comprobante-modal .comprobante-modal-footer .btn,
  body.mobile-erp-full .comprobante-modal .modal-actions .btn {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }

  /* ================================================================
   * TANDA 2 — B2: USUARIOS — editor de permisos cómodo en mobile
   * Los permisos se muestran en grilla. En mobile: 1 columna,
   * checkboxes con area de toque generosa.
   * ================================================================ */

  body.mobile-erp-full .permisos-grupo {
    margin-bottom: 14px !important;
  }
  body.mobile-erp-full .permisos-grupo-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Forzar 1 columna también en grillas de permisos/informes */
  body.mobile-erp-full .perm-informe-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Cada checkbox de permiso: area touch generosa */
  body.mobile-erp-full .permisos-grupo-body label,
  body.mobile-erp-full .permisos-grupo-body .perm-check-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    padding: 6px 4px !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--border, #f1f5f9) !important;
    cursor: pointer !important;
  }
  body.mobile-erp-full .permisos-grupo-body input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    accent-color: var(--primary, #2563eb) !important;
  }
  body.mobile-erp-full .permisos-grupo-header {
    padding: 8px 4px 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--text-muted, #64748b) !important;
    border-bottom: 2px solid var(--border, #e2e8f0) !important;
    margin-bottom: 4px !important;
  }

  /* Listado de usuarios: tabla como cards */
  body.mobile-erp-full #usuarios-list-table {
    display: block !important;
  }
  body.mobile-erp-full #usuarios-list-table thead {
    display: none !important;
  }
  body.mobile-erp-full #usuarios-list-table tbody,
  body.mobile-erp-full #usuarios-list-table tr {
    display: block !important;
  }
  body.mobile-erp-full #usuarios-list-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 12px !important;
    border-bottom: 1px solid var(--border, #f1f5f9) !important;
    font-size: 13px !important;
  }
  body.mobile-erp-full #usuarios-list-table td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
  }
  body.mobile-erp-full #usuarios-list-table tr {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
  }
  body.mobile-erp-full #usuarios-list-table tr.cliente-row-selected {
    border-color: var(--primary, #2563eb) !important;
    background: #eff6ff !important;
  }

  /* ================================================================
   * TANDA 2 — B3: MERCADO LIBRE — barra de tabs + publicaciones
   * ================================================================ */

  /* Barra de tabs ML: scroll horizontal tipo carousel */
  body.mobile-erp-full .ml-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 6px !important;
    padding: 6px 0 8px !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
  }
  body.mobile-erp-full .ml-tabs::-webkit-scrollbar {
    display: none !important;
  }
  body.mobile-erp-full .ml-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 5px 14px !important;
    scroll-snap-align: start !important;
    border-radius: 20px !important;
  }

  /* Tabla de publicaciones ML: tarjetas verticales */
  body.mobile-erp-full .pedidos-ml-table {
    display: block !important;
  }
  body.mobile-erp-full .pedidos-ml-table thead {
    display: none !important;
  }
  body.mobile-erp-full .pedidos-ml-table tbody,
  body.mobile-erp-full .pedidos-ml-table tr {
    display: block !important;
  }
  body.mobile-erp-full .pedidos-ml-table tr {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 6px 0 !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
  }
  body.mobile-erp-full .pedidos-ml-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border, #f8fafc) !important;
  }
  body.mobile-erp-full .pedidos-ml-table td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* Thumbnail ML: no necesita label, queda como foto */
  body.mobile-erp-full .pedidos-ml-table td:first-child::before {
    display: none !important;
  }
  body.mobile-erp-full .pedidos-ml-table td:first-child {
    justify-content: center !important;
  }
  /* Botones de acción ML: ancho completo, bien tocables */
  body.mobile-erp-full .pedidos-ml-table td.actions,
  body.mobile-erp-full .pedidos-ml-table td:has(.btn) {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  body.mobile-erp-full .pedidos-ml-table td.actions .btn,
  body.mobile-erp-full .pedidos-ml-table td:has(.btn) .btn {
    flex: 1 !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }
  /* Sincronizar / Empujar stock — botones en sección header ML */
  body.mobile-erp-full .section-title-row .btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* ================================================================
   * TANDA 2 — B4: CRM — bandeja y pipeline
   * ================================================================ */

  /* Bandeja CRM: tabs de estado — scrollable horizontal */
  body.mobile-erp-full #crm-bandeja-tabs,
  body.mobile-erp-full .crm-bandeja-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  body.mobile-erp-full #crm-bandeja-tabs::-webkit-scrollbar,
  body.mobile-erp-full .crm-bandeja-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Conversaciones CRM en bandeja: cada card a ancho completo */
  body.mobile-erp-full .crm-lead-row,
  body.mobile-erp-full .crm-card-row {
    display: block !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    padding: 12px 14px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
    cursor: pointer !important;
  }

  /* Pipeline CRM: columnas apiladas verticalmente (no grilla horizontal) */
  body.mobile-erp-full .crm-pipeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-x: unset !important;
  }
  body.mobile-erp-full .crm-col {
    width: 100% !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 10px !important;
  }
  /* Header de cada columna pipeline: indicador visual del estado */
  body.mobile-erp-full .crm-col > div:first-child {
    border-bottom: 2px solid currentColor !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
  }
  /* Cards de lead dentro del pipeline */
  body.mobile-erp-full .crm-card {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* ================================================================
   * TANDA 2 — B5: AFIP config y Configuración general
   * Pantallas tipo "Config" que usan .card + form-grid internos
   * ================================================================ */

  /* Toggles / switches de configuración: area de toque OK */
  body.mobile-erp-full .toggle-switch,
  body.mobile-erp-full input[type="checkbox"].toggle {
    min-width: 44px !important;
    min-height: 26px !important;
  }

  /* Tablas de configuración AFIP (puntos de venta, etc.): scroll horizontal
     contenido + indicador de overflow visual */
  body.mobile-erp-full .table-wrap:not(.no-mobile-cards) {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Inner-tabs de secciones (Existencias/Movimientos/Controles en Stock,
     sub-tabs en otras secciones): scrollable horizontal */
  body.mobile-erp-full .inner-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  body.mobile-erp-full .inner-tabs::-webkit-scrollbar {
    display: none !important;
  }
  body.mobile-erp-full .inner-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }


  /* ================================================================
   * TANDA 3 — C1: CONTABILIDAD (plan de cuentas, asientos, libros,
   * balance, catálogo de impuestos, centros de costo)
   * ================================================================ */

  /* Plan de cuentas: árbol jerárquico — asegurar scroll horizontal
     en la tabla y botones de acción bien tocables */
  body.mobile-erp-full .pc-tabla-wrap,
  body.mobile-erp-full .plan-cuentas-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Botones de nivel PC: agrandar área de toque */
  body.mobile-erp-full .pc-toggle-btn,
  body.mobile-erp-full [data-pc-toggle] {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
  }

  /* Asientos: tabla de muchas columnas → scroll horizontal
     Filtros apilados en 1 col */
  body.mobile-erp-full [id="as-filtro-periodo"],
  body.mobile-erp-full [id="as-filtro-tipo"],
  body.mobile-erp-full [id="as-filtro-estado"] {
    width: 100% !important;
  }

  /* Libro Diario: tabla con rowspan es compleja para tarjetas;
     se deja como tabla con scroll horizontal + indicador */
  body.mobile-erp-full .no-mobile-cards.table {
    /* Estas tablas (libro diario, libro mayor) no se convierten en tarjetas */
    min-width: 640px !important;
  }

  /* Balance de Sumas y Saldos: tabla 7 cols → scroll forzado.
     2026-08-02 (screenshot Martín cc-clientes: valores "vacíos"): SOLO para
     tablas que siguen siendo tabla (.no-mobile-cards). En modo tarjeta el
     wrap tiene overflow hidden y este min-width empujaba TODOS los valores
     fuera de la pantalla (tabla 580px en viewport 390px). */
  body.mobile-erp-full .table-wrap:not(.mobile-cards) table:not(.list-sticky-table) {
    min-width: 580px !important;
  }

  /* Centros de costo: tabs internas ya cubiertas por .inner-tabs */

  /* ================================================================
   * TANDA 3 — C2: LIBRO IVA VENTAS/COMPRAS
   * Tabla de 18+ columnas — necesita scroll horizontal claro
   * ================================================================ */

  /* La tabla del libro IVA tiene 18 columnas — scroll forzado,
     font-size reducido, sticky header */
  body.mobile-erp-full .informe-layout-wrap .table-wrap,
  body.mobile-erp-full .informe-modal-body .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 2026-08-02: solo si NO se convirtió en tarjetas (misma razón que el
     min-width 580px de arriba). */
  body.mobile-erp-full .informe-layout-wrap .table-wrap:not(.mobile-cards) table {
    min-width: 900px !important;
    font-size: 11px !important;
  }

  /* Filtros del informe motor: apilados 1 col */
  body.mobile-erp-full .informe-layout-wrap .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Botones del toolbar de informes: scroll horizontal si muchos */
  body.mobile-erp-full .informe-layout-wrap .actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body.mobile-erp-full .informe-layout-wrap .actions .btn {
    min-height: 38px !important;
    font-size: 13px !important;
  }

  /* ================================================================
   * TANDA 3 — C3: INFORMES BESPOKE (motor + pantallas propias)
   * renderInformes (index), renderInformeMotor, informes individuales
   * ================================================================ */

  /* Listado de informes: tarjetas en grilla 1 col en mobile */
  body.mobile-erp-full .informes-grid,
  body.mobile-erp-full .inf-categorias-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tarjetas de informe: padding cómodo */
  body.mobile-erp-full .inf-card,
  body.mobile-erp-full .informes-card {
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  /* Informe motor: header + filtros + tabla — ya cubre .informe-layout-wrap */

  /* Informe "Movimientos por depósito": tabla con scroll */
  body.mobile-erp-full #view .informe-movimientos-dep .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Informe "Auditoría Walter": tabla conciliación */
  body.mobile-erp-full .auditoria-walter-tabla .table-wrap {
    overflow-x: auto !important;
  }

  /* Todos los informes bespoke comparten .informeLayout / .informe-layout:
     filtros en 1 col, tabla con scroll */
  body.mobile-erp-full .informe-layout .form-grid,
  body.mobile-erp-full [class*="informe-"] .filtros-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.mobile-erp-full [class*="informe-"] .filtros-row .filtro-inline {
    width: 100% !important;
  }

  /* ================================================================
   * TANDA 3 — C4: CONCILIACIÓN BANCARIA + BANCOS + PSF + RETIRO SOCIO
   * + TRANSFERENCIAS BANCARIAS
   * ================================================================ */

  /* Tabs de conciliación (bancaria / MP): scroll horizontal */
  body.mobile-erp-full .conciliacion-tab-btn,
  body.mobile-erp-full [data-conciliacion-tab] {
    min-height: 38px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Tabla de movimientos bancarios: muchas cols → scroll */
  body.mobile-erp-full #conciliacion-tab-bancaria .table-wrap,
  body.mobile-erp-full #conciliacion-tab-mp .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full #conciliacion-tab-bancaria .table-wrap table,
  body.mobile-erp-full #conciliacion-tab-mp .table-wrap table {
    min-width: 640px !important;
  }

  /* Filtros conciliación bancaria: 1 col */
  body.mobile-erp-full .conc-banc-filtros .form-grid,
  body.mobile-erp-full [id^="conc-banc-"] .filtros-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Saldo/resumen en la conciliación: apilado */
  body.mobile-erp-full .conc-saldo-box {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* PSF (Pagos sin Factura): tabla 8 cols → scroll + data-label cards */
  body.mobile-erp-full #psf-tabla-wrap,
  body.mobile-erp-full .psf-tabla-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Retiro Socio: tabla similar a PSF */
  body.mobile-erp-full .retiro-socio-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Transferencias bancarias: tabla + filtros */
  body.mobile-erp-full .transferencias-banc-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .transferencias-banc-wrap .filtros-row {
    flex-direction: column !important;
  }
  body.mobile-erp-full .transferencias-banc-wrap .filtros-row .filtro-inline {
    width: 100% !important;
  }

  /* Bancos listado: table-wrap scroll */
  body.mobile-erp-full .bancos-wrap .table-wrap,
  body.mobile-erp-full [id="bancos-tabla"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C5: RRHH (empleados, liquidaciones, conceptos, recibos,
   * adelantos/vales)
   * ================================================================ */

  /* Empleados: tabla 8 cols → cards via data-label (ya tiene data-label) */
  body.mobile-erp-full .list-sticky-table tbody,
  body.mobile-erp-full .list-sticky-table tr {
    display: block !important;
  }
  body.mobile-erp-full .list-sticky-table thead {
    display: none !important;
  }
  body.mobile-erp-full .list-sticky-table tr {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 6px 0 !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
  }
  body.mobile-erp-full .list-sticky-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border, #f8fafc) !important;
  }
  body.mobile-erp-full .list-sticky-table td:last-child {
    border-bottom: none !important;
  }
  body.mobile-erp-full .list-sticky-table td[data-label]::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Liquidaciones: filtros 1 col */
  body.mobile-erp-full .rrhh-liquidaciones-filtros .form-grid,
  body.mobile-erp-full .liquidaciones-filtros {
    grid-template-columns: 1fr !important;
  }

  /* Conceptos de liquidación: tabla simple */
  body.mobile-erp-full .conceptos-liq-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C6: LICITACIONES (listado + competidores + organismos)
   * ================================================================ */

  /* Filtros licitaciones: 1 col en mobile (ya usa .form-grid) */
  body.mobile-erp-full .licitaciones-filtros,
  body.mobile-erp-full .licitaciones-wrap .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tabla licitaciones → cards via data-label */
  body.mobile-erp-full .licitaciones-wrap .list-table tbody,
  body.mobile-erp-full .licitaciones-wrap .list-table tr {
    display: block !important;
  }
  body.mobile-erp-full .licitaciones-wrap .list-table thead {
    display: none !important;
  }
  body.mobile-erp-full .licitaciones-wrap .list-table tr {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 6px 0 !important;
    background: var(--surface, #fff) !important;
  }
  body.mobile-erp-full .licitaciones-wrap .list-table td {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border, #f8fafc) !important;
    gap: 6px !important;
  }
  /* Botones de acción en la celda: ancho completo, wrap */
  body.mobile-erp-full .licitaciones-wrap .list-table td .btn {
    flex: 1 !important;
    min-height: 36px !important;
    font-size: 12px !important;
  }

  /* Competidores: tabla simple scroll */
  body.mobile-erp-full .licitaciones-competidores-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C7: LOGÍSTICA / RUTAS (ABM + MAPA)
   * ================================================================ */

  /* ABM Rutas: la función YA tiene .rutas-card-mobile con vista mobile
     nativa (isMobileLiteViewport). Solo necesitamos que los estilos CSS
     de esas cards sean buenos. */
  body.mobile-erp-full .rutas-cards-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 4px 0 !important;
  }
  body.mobile-erp-full .rutas-card-mobile {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.07) !important;
  }
  body.mobile-erp-full .rutas-card-mobile__header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    flex-wrap: wrap !important;
  }
  body.mobile-erp-full .rutas-card-mobile__nombre {
    font-weight: 700 !important;
    font-size: 15px !important;
    flex: 1 !important;
  }
  body.mobile-erp-full .rutas-card-mobile__clientes {
    font-size: 12px !important;
    color: var(--text-muted, #64748b) !important;
    background: #f1f5f9 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
  }
  body.mobile-erp-full .rutas-card-mobile__desc {
    font-size: 13px !important;
    color: var(--text-muted, #64748b) !important;
    margin: 4px 0 8px !important;
  }
  body.mobile-erp-full .rutas-card-mobile__locs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  body.mobile-erp-full .rutas-card-mobile__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.mobile-erp-full .rutas-card-mobile__actions .btn {
    flex: 1 !important;
    min-height: 36px !important;
    font-size: 12px !important;
  }
  body.mobile-erp-full .rutas-card-mobile__baja {
    color: #ef4444 !important;
  }

  /* Mapa Leaflet: altura reducida en mobile (520px → 320px);
     sidebar de "Sin ubicar" oculto en mobile (muy angosto, se pierde) */
  body.mobile-erp-full #rlrm-map {
    min-height: 320px !important;
  }
  body.mobile-erp-full #rlrm-sidebar {
    display: none !important;
  }
  /* Header del mapa: botón volver + título apilado */
  body.mobile-erp-full .rlrm-header-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Llamadas de ruta: tabla scroll */
  body.mobile-erp-full .rutas-llamadas-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Informe logística pedidos pendientes */
  body.mobile-erp-full .logistica-informe-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C8: CRM — mail config, templates, recordatorios
   * ================================================================ */

  /* CRM mail config / SMTP: form-grid 1 col */
  body.mobile-erp-full .crm-mail-config-wrap .form-grid,
  body.mobile-erp-full [id="crm-mail-config"] .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* CRM templates: tabla simple scroll */
  body.mobile-erp-full .crm-templates-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* CRM recordatorios: cards ya funcionan bien, botones touch-friendly */
  body.mobile-erp-full .crm-recordatorio-card .actions,
  body.mobile-erp-full .crm-record-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.mobile-erp-full .crm-recordatorio-card .actions .btn {
    min-height: 36px !important;
  }

  /* ================================================================
   * TANDA 3 — C9: TIENDA WEB (config, editor, pedidos, analytics, SEO,
   * newsletter, páginas, mayoristas)
   * ================================================================ */

  /* Sub-tabs Tienda Web (Config/Editor/Pedidos/etc.): scroll horizontal */
  body.mobile-erp-full .pagina-web-sub-tabs,
  body.mobile-erp-full [class*="tw-subtabs"],
  body.mobile-erp-full .tienda-sub-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  body.mobile-erp-full .pagina-web-sub-tabs::-webkit-scrollbar,
  body.mobile-erp-full .tienda-sub-tabs::-webkit-scrollbar {
    display: none !important;
  }
  body.mobile-erp-full .pagina-web-sub-tab,
  body.mobile-erp-full .tienda-sub-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  /* Config Tienda: secciones colapsables (twc-section) — OK en mobile,
     solo asegurar form-grid 1 col */
  body.mobile-erp-full .twc-section-body .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Editor visual Tienda: la grilla drag-drop de bloques es inviable en
     touch sin reescribir JS. Hacemos lo mejor posible: la lista de bloques
     se muestra apilada y cada bloque tiene touch targets correctos.
     El drag&drop con mouse sigue funcionando en desktop (sin cambios). */
  body.mobile-erp-full .twe-bloques-lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-x: unset !important;
  }
  body.mobile-erp-full .twe-bloque-item {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    cursor: pointer !important;
  }
  body.mobile-erp-full .twe-bloque-acciones {
    display: flex !important;
    gap: 6px !important;
  }
  body.mobile-erp-full .twe-bloque-acciones .btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }
  /* El canvas de preview del editor: solo scroll, no interactivo en mobile */
  body.mobile-erp-full .twe-canvas-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: none !important; /* previene clicks accidentales en preview */
  }
  body.mobile-erp-full .twe-sidebar {
    width: 100% !important;
    max-width: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
  }
  body.mobile-erp-full .twe-layout {
    flex-direction: column !important;
  }

  /* Pedidos tienda: tabla de pedidos web → scroll + cards */
  body.mobile-erp-full .twped-tabla-wrap,
  body.mobile-erp-full #twped-result .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full #twped-result .table-wrap table {
    min-width: 600px !important;
  }
  /* Filtros pedidos tienda: 1 col */
  body.mobile-erp-full .twped-filtros {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.mobile-erp-full .twped-filtros .field {
    width: 100% !important;
  }

  /* Analytics Tienda: gráficos/KPIs apilados */
  body.mobile-erp-full .tienda-analytics-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body.mobile-erp-full .tienda-analytics-kpi-card {
    padding: 12px 10px !important;
  }

  /* SEO: form-grid 1 col, preview Google -> scroll */
  body.mobile-erp-full .tienda-seo-wrap .form-grid {
    grid-template-columns: 1fr !important;
  }
  body.mobile-erp-full .tienda-seo-preview {
    overflow-x: auto !important;
  }

  /* Newsletter: tabla de suscriptores → scroll */
  body.mobile-erp-full .tienda-newsletter-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mayoristas: tabla → scroll */
  body.mobile-erp-full .tienda-mayoristas-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C10: CONFIG RESTANTE
   * (comprobantes/numeración, impositivo, unidades de medida,
   *  tipos de producto/artículo, métodos de pago, sucursales, cajas,
   *  perfiles proveedor PDF, backups, logs, papelera, suscripciones,
   *  notificaciones)
   * ================================================================ */

  /* Config comprobantes/numeración: form-grid 1 col */
  body.mobile-erp-full .config-comprobantes-wrap .form-grid,
  body.mobile-erp-full [id="config-num-form"] .form-grid {
    grid-template-columns: 1fr !important;
  }
  /* Tabla de estado de numeración: scroll */
  body.mobile-erp-full .config-comprobantes-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Config impositivo: regímenes + tabla → scroll */
  body.mobile-erp-full .config-impositivo-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .config-impositivo-wrap .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Maestros genéricos (unidades, tipos, métodos, sucursales):
     renderMaster() genera .table-wrap + .form-grid */
  body.mobile-erp-full .render-master-wrap .form-grid,
  body.mobile-erp-full .archivo-maestro-form .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cajas: tabla → scroll */
  body.mobile-erp-full .cajas-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Perfiles proveedor PDF (parser profiles): tabla + formulario */
  body.mobile-erp-full .parser-profiles-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .parser-profiles-wrap .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Backup: tabla de archivos + botones */
  body.mobile-erp-full .backup-wrap .table-wrap,
  body.mobile-erp-full .backups-pdfs-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .backup-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body.mobile-erp-full .backup-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Logs: tabla de muchas cols → scroll + font-size pequeño */
  body.mobile-erp-full .logs-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .logs-wrap table {
    min-width: 700px !important;
    font-size: 11px !important;
  }
  body.mobile-erp-full .logs-wrap .filtros-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Papelera: tabla de elementos eliminados */
  body.mobile-erp-full .papelera-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Notificaciones: lista de notifs → cards ya funciona */

  /* Suscripciones: dashboard KPI en 1 col en mobile */
  body.mobile-erp-full .m3-dash-tablas-inline {
    grid-template-columns: 1fr !important;
  }
  /* KPI cards suscripciones: 2 por fila */
  body.mobile-erp-full .m3-kpi-wrap {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Tabla de suscripciones activas: scroll */
  body.mobile-erp-full .suscripciones-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .suscripciones-wrap table {
    min-width: 560px !important;
    font-size: 12px !important;
  }

  /* ================================================================
   * TANDA 3 — C11: INTERESES POR MORA
   * ================================================================ */

  body.mobile-erp-full .intereses-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .intereses-wrap .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ================================================================
   * TANDA 3 — C12: REVENDEDORES + ZONAS + TRANSPORTES + DEPOSITIVOS
   * ================================================================ */

  body.mobile-erp-full .revendedores-wrap .table-wrap,
  body.mobile-erp-full .zonas-wrap .table-wrap,
  body.mobile-erp-full .transportes-wrap .table-wrap,
  body.mobile-erp-full .depositos-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C13: MODAL EDITOR CANÓNICO en pantallas restantes
   * app-modal en pantallas de contabilidad, PSF, retiro socio, etc.
   * ================================================================ */

  body.mobile-erp-full .app-modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
  }
  body.mobile-erp-full .app-modal-body {
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-erp-full .app-modal-body .form-grid {
    grid-template-columns: 1fr !important;
  }
  /* Tabla dentro de modal: scroll */
  body.mobile-erp-full .app-modal-body .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ================================================================
   * TANDA 3 — C14: GLOBAL UTILITY — filtros-row universal mobile
   * Toda .filtros-row que no esté en un contexto desktop-only:
   * overflow horizontal para que los chips no rompan el layout
   * ================================================================ */

  body.mobile-erp-full .filtros-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    align-items: center !important;
  }
  body.mobile-erp-full .filtros-row::-webkit-scrollbar {
    display: none !important;
  }
  body.mobile-erp-full .filtros-row .filtro-inline {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Botones principales de acción (section-title-row): wrap en mobile */
  body.mobile-erp-full .section-title-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body.mobile-erp-full .section-title-row .actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Grillas 2-col en cards KPI: siempre 1 col en mobile chico */
  @media (max-width: 480px) {
    body.mobile-erp-full .kpi-grid-2 {
      grid-template-columns: 1fr !important;
    }
  }


  /* ================================================================
   * TANDA 4 — PULIDO ESTETICO (2026-07-04)
   * Objetivo: pasar de "funcional pero tosco" a Material mobile.
   * Scope: body.mobile-erp-full @media (max-width:768px)
   * NO toca styles.css ni el modo desktop.
   * Tokens usados: --primary, --primary-soft, --surface, --surface-2,
   *   --ink, --muted, --border, --space-*, --radius-*, --elev-*, --bg
   * ================================================================ */

  /* --- 0. FONDO DE PAGINA: gris claro como Material bg --- */
  body.mobile-erp-full main,
  body.mobile-erp-full .main {
    background: var(--bg, #f4f7fb) !important;
  }
  body.mobile-erp-full .view {
    background: transparent !important;
    padding: 14px 12px !important;
  }

  /* --- 1. TOPBAR: sombra y tipografia mas nitida --- */
  body.mobile-erp-full:not(.mobile-lite-mode) #app > .sidebar > .header-row {
    background: var(--primary, #2563eb) !important;
    box-shadow: 0 2px 10px rgba(15,23,42,.22) !important;
    border-bottom: none !important;
  }
  body.mobile-erp-full:not(.mobile-lite-mode) .header-title h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
  }
  /* Menu toggle: area tactil clara con feedback */
  body.mobile-erp-full .mobile-menu-toggle {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    transition: background .12s ease !important;
  }
  body.mobile-erp-full .mobile-menu-toggle:active {
    background: rgba(255,255,255,.25) !important;
  }

  /* --- 2. TARJETAS DE LISTADO: jerarquia visual Material --- */

  /* Tarjeta base: padding generoso, sombra suave, radio mayor */
  body.mobile-erp-full .table-wrap.mobile-cards tr,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: var(--radius-lg, 14px) !important;
    margin-bottom: var(--space-3, 12px) !important;
    padding: 0 !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(15,23,42,.06)) !important;
    overflow: hidden !important;
    transition: box-shadow .15s ease !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards tr:active,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr:active {
    box-shadow: var(--elev-2, 0 4px 12px rgba(15,23,42,.1)) !important;
  }

  /* Seleccion de fila: borde primary + fondo tint */
  body.mobile-erp-full .table-wrap.mobile-cards tr.cliente-row-selected,
  body.mobile-erp-full .table-wrap.mobile-cards tr.venta-row-selected,
  body.mobile-erp-full .table-wrap.mobile-cards tr.compra-row-selected,
  body.mobile-erp-full .table-wrap.mobile-cards tr.row-selected,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr.cliente-row-selected,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr.venta-row-selected,
  body.mobile-erp-full .list-sticky-wrap .table-wrap tr.row-selected {
    border-color: var(--primary, #2563eb) !important;
    background: #f0f5ff !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.16) !important;
  }

  /* Filas de datos: padding horizontal con divisor sutil */
  body.mobile-erp-full .table-wrap.mobile-cards td,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td {
    padding: 9px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    font-size: 14px !important;
    color: var(--ink, #172033) !important;
    line-height: 1.4 !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards td:last-child,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td:last-child {
    border-bottom: none !important;
  }

  /* Label de la fila: mas pequeño, muted, uppercase ligero */
  body.mobile-erp-full .table-wrap.mobile-cards td::before,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td[data-label]::before {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--muted, #6b7280) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    line-height: 1.3 !important;
    min-width: 88px !important;
    flex: 0 0 36% !important;
  }

  /* PRIMERA fila de datos (dato principal): mas grande y bold */
  body.mobile-erp-full .table-wrap.mobile-cards td:nth-child(1),
  body.mobile-erp-full .list-sticky-wrap .table-wrap td:nth-child(1) {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink, #172033) !important;
    padding-top: 13px !important;
    padding-bottom: 10px !important;
  }
  /* La label de la primera fila: un poco mas grande tambien */
  body.mobile-erp-full .table-wrap.mobile-cards td:nth-child(1)::before,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td:nth-child(1)::before {
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  /* Celda de acciones: franja footer diferenciada */
  body.mobile-erp-full .table-wrap.mobile-cards td.actions,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td.actions {
    background: var(--surface-2, #f9fafb) !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
    border-bottom: none !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards td.actions::before,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td.actions::before {
    display: none !important;
  }
  body.mobile-erp-full .table-wrap.mobile-cards td.actions .btn,
  body.mobile-erp-full .list-sticky-wrap .table-wrap td.actions .btn {
    flex: 1 !important;
    min-height: 38px !important;
    font-size: 13px !important;
    border-radius: var(--radius-md, 10px) !important;
  }

  /* Pills/badges dentro de tarjetas: mantener tamano legible */
  body.mobile-erp-full .table-wrap.mobile-cards .badge,
  body.mobile-erp-full .table-wrap.mobile-cards .pill,
  body.mobile-erp-full .list-sticky-wrap .table-wrap .badge,
  body.mobile-erp-full .list-sticky-wrap .table-wrap .pill {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* --- 3. DASHBOARD KPI CARDS --- */

  /* Grid 2 columnas, bien aireado */
  body.mobile-erp-full #dashboard-kpis-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3, 12px) !important;
    margin-bottom: var(--space-4, 16px) !important;
  }

  /* Cada KPI card: blanco, radio generoso, sombra suave */
  body.mobile-erp-full #dashboard-kpis-wrap .card.kpi {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: var(--space-4, 16px) !important;
    background: var(--surface, #fff) !important;
    border-radius: var(--radius-lg, 14px) !important;
    box-shadow: var(--elev-2, 0 4px 12px rgba(15,23,42,.08)) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 4px !important;
  }
  body.mobile-erp-full #dashboard-kpis-wrap .card.kpi:hover,
  body.mobile-erp-full #dashboard-kpis-wrap .card.kpi:active {
    transform: none !important;
    box-shadow: var(--elev-2, 0 4px 12px rgba(15,23,42,.1)) !important;
  }

  /* Emoji/icono: mas pequeno y con fondo tint del primary */
  body.mobile-erp-full #dashboard-kpis-wrap .kpi .emoji {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    background: var(--primary-soft, #dbeafe) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  /* Valor principal: grande, bold, compacto */
  body.mobile-erp-full #dashboard-kpis-wrap .kpi .value {
    font-size: clamp(1.2rem, 6vw, 1.6rem) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink, #172033) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  /* Label: debajo, muted, size 11px */
  body.mobile-erp-full #dashboard-kpis-wrap .kpi .label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--muted, #6b7280) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Sub-KPI (variacion, tendencia) */
  body.mobile-erp-full #dashboard-kpis-wrap .kpi .kpi-sub {
    font-size: 11px !important;
    color: var(--muted, #6b7280) !important;
    margin-top: 2px !important;
  }

  /* En pantallas <480px, 1 columna para KPIs */
  @media (max-width: 480px) {
    body.mobile-erp-full #dashboard-kpis-wrap {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }
    body.mobile-erp-full #dashboard-kpis-wrap .kpi .value {
      font-size: clamp(1rem, 7.5vw, 1.4rem) !important;
    }
  }

  /* Dashboard modulos (graficos, tablas rapidas) */
  body.mobile-erp-full .dashboard-module.card {
    border-radius: var(--radius-lg, 14px) !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(15,23,42,.06)) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    padding: var(--space-4, 16px) !important;
    margin-bottom: var(--space-3, 12px) !important;
  }
  body.mobile-erp-full .dashboard-module.card:hover,
  body.mobile-erp-full .dashboard-module.card:active {
    transform: none !important;
  }

  /* --- 4. TARJETAS GENERICAS (.card) --- */
  body.mobile-erp-full .card {
    border-radius: var(--radius-lg, 14px) !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(15,23,42,.06)) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    padding: var(--space-4, 16px) !important;
    background: var(--surface, #fff) !important;
  }
  body.mobile-erp-full .card h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink, #172033) !important;
    margin-bottom: 12px !important;
  }

  /* --- 5. MODALES COMO BOTTOM-SHEET (handle visual) --- */

  /* Modales ABM: bottom-sheet con drag-handle */
  body.mobile-erp-full .app-modal-overlay .app-modal {
    border-radius: 20px 20px 0 0 !important;
    bottom: 0 !important;
    top: auto !important;
    position: fixed !important;
    height: auto !important;
    max-height: 92dvh !important;
    min-height: 30dvh !important;
  }

  /* Handle visual (barrita gris arriba del modal) */
  body.mobile-erp-full .app-modal-overlay .app-modal::before {
    content: "" !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #d1d5db !important;
    margin: 10px auto 0 !important;
    flex-shrink: 0 !important;
  }

  /* Header del modal: titulo + cerrar */
  body.mobile-erp-full .app-modal-header {
    padding: 12px 16px 10px !important;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    background: var(--surface, #fff) !important;
    border-radius: 0 !important;
  }
  body.mobile-erp-full .app-modal-header h3,
  body.mobile-erp-full .app-modal-header h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ink, #172033) !important;
    margin: 0 !important;
  }

  /* Footer del modal: botones full-width, bien separados */
  body.mobile-erp-full .app-modal-footer {
    padding: 14px 16px !important;
    display: flex !important;
    gap: 10px !important;
    background: var(--surface, #fff) !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
    border-radius: 0 !important;
  }
  body.mobile-erp-full .app-modal-footer .btn {
    flex: 1 !important;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-lg, 14px) !important;
  }
  /* Boton primario en footer: shadow suave */
  body.mobile-erp-full .app-modal-footer .btn-primary {
    box-shadow: 0 3px 10px rgba(37,99,235,.28) !important;
  }

  /* --- 6. FORMULARIOS: labels, inputs, grupos --- */

  /* Labels: uppercase small, bien espaciados */
  body.mobile-erp-full .app-modal-body label,
  body.mobile-erp-full .comprobante-modal-body label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--muted, #6b7280) !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1.3 !important;
  }

  /* Inputs: altura tactil, radio uniforme, borde sutil */
  body.mobile-erp-full .app-modal-body .input,
  body.mobile-erp-full .app-modal-body input[type="text"],
  body.mobile-erp-full .app-modal-body input[type="number"],
  body.mobile-erp-full .app-modal-body input[type="date"],
  body.mobile-erp-full .app-modal-body input[type="email"],
  body.mobile-erp-full .app-modal-body input[type="tel"],
  body.mobile-erp-full .app-modal-body textarea,
  body.mobile-erp-full .app-modal-body select,
  body.mobile-erp-full .comprobante-modal-body .input,
  body.mobile-erp-full .comprobante-modal-body input[type="text"],
  body.mobile-erp-full .comprobante-modal-body select {
    min-height: 46px !important;
    font-size: 15px !important;
    border-radius: var(--radius-md, 10px) !important;
    border-color: var(--border, #e5e7eb) !important;
    background: var(--surface, #fff) !important;
    color: var(--ink, #172033) !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  body.mobile-erp-full .app-modal-body .input:focus,
  body.mobile-erp-full .app-modal-body input:focus,
  body.mobile-erp-full .app-modal-body select:focus {
    border-color: var(--primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
    outline: none !important;
  }

  /* Separacion entre campos en modales */
  body.mobile-erp-full .app-modal-body .field,
  body.mobile-erp-full .comprobante-modal-body .field {
    margin-bottom: var(--space-3, 12px) !important;
  }

  /* Fieldsets: fondo ligero, radio, separacion */
  body.mobile-erp-full .app-modal-body fieldset {
    background: var(--surface-2, #f9fafb) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: var(--radius-md, 10px) !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
  }
  body.mobile-erp-full .app-modal-body fieldset legend {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--muted, #6b7280) !important;
    padding: 0 8px !important;
    background: var(--surface-2, #f9fafb) !important;
  }

  /* --- 7. TABS: pills activas con fondo, no solo underline --- */

  /* Tabs horizontales: pills redondeadas */
  body.mobile-erp-full #ventas-tabs-grupo .open-tab,
  body.mobile-erp-full #compras-tabs-grupo .open-tab,
  body.mobile-erp-full #tl-tabs .open-tab,
  body.mobile-erp-full .product-modal-tab,
  body.mobile-erp-full .inner-tab,
  body.mobile-erp-full .ml-tab {
    border-radius: var(--radius-full, 999px) !important;
    background: transparent !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    color: var(--muted, #6b7280) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    min-height: 34px !important;
    transition: background .12s ease, color .12s ease, border-color .12s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Tab activa: fondo primary-soft, color primary */
  body.mobile-erp-full #ventas-tabs-grupo .open-tab.active,
  body.mobile-erp-full #compras-tabs-grupo .open-tab.active,
  body.mobile-erp-full #tl-tabs .open-tab.active,
  body.mobile-erp-full .product-modal-tab.active,
  body.mobile-erp-full .inner-tab.active,
  body.mobile-erp-full .ml-tab.active {
    background: var(--primary-soft, #dbeafe) !important;
    color: var(--primary, #2563eb) !important;
    border-color: transparent !important;
    font-weight: 700 !important;
    /* quitar el underline de F2 que convive con esto */
    border-bottom: none !important;
  }

  /* Contenedor de tabs: padding comodo */
  body.mobile-erp-full #ventas-tabs-grupo,
  body.mobile-erp-full #compras-tabs-grupo,
  body.mobile-erp-full #tl-tabs,
  body.mobile-erp-full .product-modal-tabs,
  body.mobile-erp-full .inner-tabs,
  body.mobile-erp-full .ml-tabs {
    padding: 4px 0 8px !important;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    margin-bottom: var(--space-3, 12px) !important;
  }

  /* --- 8. BOTONES: touch-friendly y consistentes --- */

  /* Boton primario: sombra suave + radius-full */
  body.mobile-erp-full .btn.btn-primary,
  body.mobile-erp-full button.btn.btn-primary {
    border-radius: var(--radius-lg, 14px) !important;
    min-height: 46px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.25) !important;
    transition: box-shadow .12s ease, opacity .12s ease !important;
  }
  body.mobile-erp-full .btn.btn-primary:active {
    box-shadow: none !important;
    opacity: .88 !important;
  }

  /* Botones secundarios: borde, sin sombra */
  body.mobile-erp-full .btn-secondary,
  body.mobile-erp-full .btn-outline {
    border-radius: var(--radius-lg, 14px) !important;
    min-height: 46px !important;
    font-size: 15px !important;
  }

  /* Botones pequenos de accion (en filas de listado): radio-md */
  body.mobile-erp-full .btn-sm,
  body.mobile-erp-full .btn.btn-sm {
    border-radius: var(--radius-md, 10px) !important;
    min-height: 34px !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* --- 9. SECTION TITLE ROW: barra de acciones visible --- */
  body.mobile-erp-full .section-title-row {
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    margin-bottom: 14px !important;
    align-items: center !important;
  }
  body.mobile-erp-full .section-title-row h2,
  body.mobile-erp-full .section-title-row h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--ink, #172033) !important;
    margin: 0 !important;
  }

  /* --- 10. FILTROS COLAPSABLES: aspecto card sutil --- */
  body.mobile-erp-full .listado-filtros-toggle {
    border-radius: var(--radius-md, 10px) !important;
    background: var(--surface, #fff) !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(15,23,42,.06)) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
    border: 1px solid var(--border, #e5e7eb) !important;
  }
  body.mobile-erp-full .listado-filtros-extra {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: var(--radius-md, 10px) !important;
    padding: 12px 14px !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(15,23,42,.06)) !important;
  }

  /* --- 11. BUSCADOR PRINCIPAL (input de texto en listados) --- */
  body.mobile-erp-full .list-sticky-wrap .filter-row .input,
  body.mobile-erp-full .list-sticky-wrap .filter-row select {
    border-radius: var(--radius-md, 10px) !important;
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    min-height: 46px !important;
    box-shadow: var(--elev-1, 0 1px 3px rgba(15,23,42,.06)) !important;
    transition: border-color .15s, box-shadow .15s !important;
  }
  body.mobile-erp-full .list-sticky-wrap .filter-row .input:focus,
  body.mobile-erp-full .list-sticky-wrap .filter-row select:focus {
    border-color: var(--primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
    outline: none !important;
  }

  /* --- 12. STICKY BAR DE ACCION INFERIOR --- */
  body.mobile-erp-full .mobile-erp-row-action-bar {
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 16px rgba(15,23,42,.14) !important;
    border-top: 2px solid var(--primary, #2563eb) !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  body.mobile-erp-full .mobile-erp-row-action-bar .btn {
    border-radius: var(--radius-md, 10px) !important;
    min-height: 42px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* --- 13. TESORERIA: cajas + tabs + tabla movimientos --- */

  /* Cajas: las cards de saldo de caja deben ser claras */
  body.mobile-erp-full .caja-card,
  body.mobile-erp-full .tesoreria-caja-card {
    border-radius: var(--radius-lg, 14px) !important;
    padding: var(--space-4, 16px) !important;
    background: var(--surface, #fff) !important;
    box-shadow: var(--elev-2, 0 4px 12px rgba(15,23,42,.08)) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    margin-bottom: 12px !important;
  }

  /* --- 14. COMPROBANTE (cv2): header compacto pero legible --- */
  body.mobile-erp-full .comprobante-modal-header,
  body.mobile-erp-full .comprobante-page-header {
    background: var(--primary, #2563eb) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-header h3,
  body.mobile-erp-full .comprobante-page-header h3,
  body.mobile-erp-full .comprobante-modal-header h2,
  body.mobile-erp-full .comprobante-page-header h2 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  body.mobile-erp-full .comprobante-modal-header .btn,
  body.mobile-erp-full .comprobante-page-header .btn {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    min-height: 36px !important;
    border-radius: 8px !important;
  }

  /* Footer de cv2: sticky, bien espaciado */
  body.mobile-erp-full .comprobante-modal-footer,
  body.mobile-erp-full .comprobante-page-footer {
    padding: 12px 16px !important;
    display: flex !important;
    gap: 10px !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
    background: var(--surface, #fff) !important;
  }
  body.mobile-erp-full .comprobante-modal-footer .btn,
  body.mobile-erp-full .comprobante-page-footer .btn {
    flex: 1 !important;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-lg, 14px) !important;
  }

  /* Totales de cv2: resaltados, bien legibles */
  body.mobile-erp-full .cv2-totales-wrap {
    background: var(--surface-2, #f9fafb) !important;
    border-radius: var(--radius-md, 10px) !important;
    padding: 14px 16px !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    margin: 10px 0 0 !important;
  }
  body.mobile-erp-full .cv2-totales-wrap .total-principal,
  body.mobile-erp-full .cv2-totales-wrap [class*="cv2-total"] {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--ink, #172033) !important;
  }

  /* --- 15. TIPOGRAFIA GENERAL: legibilidad --- */

  /* Textos secundarios en listas */
  body.mobile-erp-full .table-wrap.mobile-cards td:nth-child(n+2),
  body.mobile-erp-full .list-sticky-wrap .table-wrap td:nth-child(n+2) {
    font-size: 13px !important;
    color: #374151 !important;
    line-height: 1.45 !important;
  }

  /* Valores monetarios: siempre bold */
  body.mobile-erp-full .table-wrap.mobile-cards td[data-label*="Total"],
  body.mobile-erp-full .table-wrap.mobile-cards td[data-label*="Monto"],
  body.mobile-erp-full .table-wrap.mobile-cards td[data-label*="Importe"],
  body.mobile-erp-full .table-wrap.mobile-cards td[data-label*="Saldo"],
  body.mobile-erp-full .list-sticky-wrap .table-wrap td[data-label*="Total"],
  body.mobile-erp-full .list-sticky-wrap .table-wrap td[data-label*="Importe"] {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--ink, #172033) !important;
  }

  /* --- 16. ACCESIBILIDAD: foco visible en mobile --- */
  body.mobile-erp-full .btn:focus-visible,
  body.mobile-erp-full .input:focus-visible,
  body.mobile-erp-full input:focus-visible,
  body.mobile-erp-full select:focus-visible {
    outline: 3px solid var(--primary, #2563eb) !important;
    outline-offset: 2px !important;
  }

  /* --- 17. MENU LATERAL: grupo-header legible --- */
  body.mobile-erp-full #app > .sidebar > nav.menu > .menu-group {
    margin-bottom: 4px !important;
  }
  /* Items activos: radio y transicion suave */
  body.mobile-erp-full .sidebar .menu-item.active,
  body.mobile-erp-full .sidebar .submenu .menu-item.active {
    background: var(--primary, #2563eb) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.28) !important;
  }
  body.mobile-erp-full .sidebar .menu-item:hover,
  body.mobile-erp-full .sidebar .submenu .menu-item:hover {
    background: rgba(255,255,255,.1) !important;
    border-radius: 10px !important;
    transition: background .1s ease !important;
  }


/* ============================================================
   F4 MODO-MOBILE (2026-08-02): bottom-bar tipo app en ERP completo mobile.
   El elemento #mobile-full-bottom-nav (lo inyecta ensureMobileFullBottomNav
   en app.js) reusa las clases canónicas del bottom-nav lite de styles.css;
   acá solo lo fijamos abajo (en lite es sticky dentro de #view) y
   compensamos las alturas de listado para que nada quede tapado.
   ============================================================ */
body.mobile-erp-full .mobile-full-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
/* Listados: el .main tiene alto fijo calc(100dvh - 98px) (bloque migrado F1);
   con la barra de 60px abajo lo acortamos para que el scroll llegue al fondo. */
body.mobile-erp-full.erp-bottomnav .main:has(> .view.is-listado) {
  height: calc(100dvh - 158px);
}
body.mobile-erp-full.erp-bottomnav #app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view.is-listado) {
  height: calc(100dvh - 182px);
}
/* Pantallas no-listado (alto natural): aire al final del scroll para que el
   último botón/campo no quede debajo de la barra. */
body.mobile-erp-full.erp-bottomnav .main:not(:has(> .view.is-listado)) {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Botón flotante "Instalar ILU ERP": nunca en la UI mobile (pisa el bottom-nav
   y su camino manual .bat es solo para PC de escritorio) — pedido Martín
   2026-08-02. Cinturón del gate JS en offlineInstallBtnRefresh. */
#erp-install-btn { display: none !important; }

/* Tarea 3 (2026-09-20): pantalla de Caja/Turno — el layout de 2 columnas
   (.caja-turno-layout, ver styles.css) se apila en mobile: la mesa de
   trabajo (mostrador) es angosta y dos columnas de 320px+ no entran. */
.caja-turno-layout {
  grid-template-columns: 1fr !important;
}