* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; min-height: 100vh; }
    body { background: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1f2937; }
    button, input, select, textarea { font-family: inherit; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    button:hover { filter: brightness(.95); }
    button:active { transform: scale(.97); }
    input:focus, select:focus, textarea:focus { border-color: #1B3A8C !important; box-shadow: 0 0 0 3px rgba(27,58,140,.1); }
    [data-nav]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }

    /* ══ RESPONSIVE MÓVIL ══════════════════════════════════════ */
    #mob-sidebar { transition: transform .25s cubic-bezier(.4,0,.2,1); }
    #mob-topbar  { display: none; }
    #mob-overlay { display: none; }

    @media (max-width: 768px) {
      /* Layout principal */
      #main-layout { flex-direction: column !important; height: auto !important; min-height: 100vh; }

      /* Sidebar como drawer lateral */
      #mob-sidebar {
        position: fixed !important;
        left: 0 !important; top: 0 !important; bottom: 0 !important;
        width: 82vw !important; max-width: 300px !important;
        height: 100dvh !important; height: 100vh !important;
        z-index: 1002;
        transform: translateX(-110%);
        overflow-y: auto !important;
        box-shadow: 4px 0 32px rgba(0,0,0,.22);
      }
      #mob-sidebar.mob-open { transform: translateX(0); }

      /* Overlay oscuro detrás del drawer */
      #mob-overlay {
        display: block !important;
        position: fixed !important; inset: 0 !important;
        background: rgba(0,0,0,.42);
        z-index: 1001;
        opacity: 0; pointer-events: none;
        transition: opacity .25s;
      }
      #mob-overlay.mob-open { opacity: 1; pointer-events: auto; }

      /* Topbar móvil */
      #mob-topbar {
        display: flex !important;
        align-items: center; gap: 10px;
        padding: 10px 14px;
        background: white;
        border-bottom: 1px solid #e2e8f0;
        position: sticky; top: 0; z-index: 100;
        margin: -24px -16px 14px -16px;
      }
      #mob-ham {
        background: none; border: none; cursor: pointer;
        font-size: 24px; color: #1B3A8C;
        padding: 4px 8px; border-radius: 7px; line-height: 1;
        flex-shrink: 0;
      }
      #mob-ham:hover { background: #1B3A8C12; }

      /* Contenido principal */
      #main-content {
        width: 100% !important;
        padding: 24px 16px !important;
        flex: 1 !important;
        min-height: 100vh;
      }

      /* Tablas — el scroll se aplica vía JS (erp-mob-scroll) */
      .erp-mob-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        border-radius: 8px;
      }

      /* Modales — caja interior responsive */
      div[style*="position:fixed"][style*="top:0"] > div[data-action="prevent-close"],
      div[style*="position:fixed"][style*="top:0"] > div[onclick*="stopPropagation"],
      div[style*="position:fixed"][style*="top:0"] > div[style*="background:white"]:not([id]) {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 88dvh !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }

      /* Padding interno de modales reducido */
      div[style*="position:fixed"][style*="top:0"] > div[style*="background:white"] > div[style*="padding:20px"],
      div[style*="position:fixed"][style*="top:0"] > div[style*="background:white"] > div > div[style*="padding:20px"] {
        padding: 12px !important;
      }

      /* Grids 2-col dentro de modales → 1 col */
      div[style*="position:fixed"][style*="top:0"] div[style*="grid-template-columns:1fr 1fr"],
      div[style*="position:fixed"][style*="top:0"] div[style*="grid-template-columns: 1fr 1fr"],
      div[style*="position:fixed"][style*="top:0"] div[style*="grid-template-columns:1fr 1fr 1fr"],
      div[style*="position:fixed"][style*="top:0"] div[style*="repeat(2,"],
      div[style*="position:fixed"][style*="top:0"] div[style*="repeat(3,"] {
        grid-template-columns: 1fr !important;
      }

      /* Header del modal (flex entre título y botón X) */
      div[style*="position:fixed"][style*="top:0"] > div[style*="background:white"] > div:first-child[style*="display:flex"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }

      /* Tablas dentro de modales — scroll horizontal */
      div[style*="position:fixed"][style*="top:0"] table {
        min-width: 480px;
      }
      div[style*="position:fixed"][style*="top:0"] .erp-mob-scroll-modal {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }

      /* Overlay del modal ajustado — menos padding en móvil */
      div[style*="position:fixed"][style*="top:0"][style*="padding:20px"] {
        padding: 6px !important;
        align-items: flex-start !important;
        padding-top: 24px !important;
      }

      /* Ajustes tipográficos */
      input, select, textarea { font-size: 16px !important; } /* evita zoom en iOS */
    }