/* =========================================================
   RESPONSIVE GLOBAL
   Capa de adaptación para escritorio reducido, tablet y móvil.
   Mantiene intactos los estilos de escritorio de app.css.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
.mobile-topbar{display:none}

@media (max-width:1280px){
  .page-content{padding:20px!important}
  .topbar.topbar-compact{padding-left:20px!important;padding-right:20px!important}
  .topbar.topbar-compact .search-box{min-width:280px!important;flex-basis:460px!important}
  .top-shortcuts{width:auto!important;order:initial!important}
  .panel-header,.card-header,.module-header,.page-header{gap:14px;flex-wrap:wrap}
  .toolbar,.filters,.filter-bar,.actions-bar{flex-wrap:wrap}
}

/* =========================================================
   AVANCE 077: CONTROLES FUNCIONALES EN CABECERA MOVIL
   Evita que la capa de acciones de escritorio intercepte
   los toques sobre menú, logo, avisos, búsqueda y perfil.
   ========================================================= */
@media (max-width: 850px) {
  .topbar.topbar-compact {
    isolation: isolate !important;
  }

  .topbar.topbar-compact > .mobile-topbar {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }

  .mobile-topbar-button,
  .mobile-profile-button,
  .mobile-topbar-brand {
    position: relative !important;
    z-index: 11 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  .topbar.topbar-compact > .topbar-actions {
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 9 !important;
  }

  .topbar.topbar-compact .notification-dropdown.open,
  .topbar.topbar-compact .profile-dropdown.open {
    pointer-events: auto !important;
  }
}

@media (max-width:1050px) and (min-width:851px){
  .sidebar:not(.collapsed){width:240px!important}
  .sidebar:not(.collapsed)+.main-shell{margin-left:240px!important;width:calc(100% - 240px)!important}
  .topbar.topbar-compact .search-box{min-width:230px!important;flex-basis:360px!important}
  .top-icon-button{width:42px!important;height:42px!important}
  .profile.profile-trigger strong{display:none}
  .page-content{padding:18px!important}
  .kpi-grid,.stats-grid,.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:850px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body.mobile-menu-open{overflow:hidden!important;touch-action:none}
  .app-shell,.main-shell{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
  .main-shell{margin-left:0!important}

  .sidebar,.sidebar.collapsed{
    display:flex!important;position:fixed!important;z-index:1200!important;inset:0 auto 0 0!important;
    width:min(286px,86vw)!important;height:100dvh!important;max-height:100dvh!important;
    transform:translateX(-105%)!important;transition:transform .25s ease!important;
    overflow:hidden!important;box-shadow:18px 0 45px rgba(15,35,70,.2)!important;
  }
  .sidebar.mobile-open,.sidebar.collapsed.mobile-open{transform:translateX(0)!important}
  .sidebar.collapsed .brand-row,.sidebar .brand-row{height:88px!important;padding:8px 16px!important;flex-direction:row!important;justify-content:center!important}
  .sidebar.collapsed .brand-system-logo,.sidebar .brand-system-logo{height:65px!important;max-width:145px!important}
  .sidebar.collapsed .brand-row .sidebar-toggle,.sidebar .brand-row .sidebar-toggle{display:flex!important;position:absolute!important;right:14px!important;width:40px!important;height:40px!important}
  .sidebar.collapsed .sidebar-nav,.sidebar .sidebar-nav{overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:24px!important}
  .sidebar.collapsed .sidebar-section{display:flex!important}
  .sidebar.collapsed .nav-link{justify-content:flex-start!important}
  .sidebar.collapsed .nav-link>span{display:inline!important;position:static!important;transform:none!important;opacity:1!important;background:transparent!important;color:inherit!important;padding:0!important;box-shadow:none!important;white-space:normal!important}
  .sidebar.collapsed .nav-group .submenu{position:static!important;width:auto!important;max-height:0!important;display:block!important;overflow:hidden!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;border:0!important;padding:0!important;transform:none!important}
  .sidebar.collapsed .nav-group.open .submenu{max-height:720px!important}
  .sidebar.collapsed .nav-group-toggle .chevron{display:block!important}

  .mobile-overlay.open{display:block!important;position:fixed!important;z-index:1190!important;inset:0!important;background:rgba(12,29,53,.48)!important;backdrop-filter:blur(2px);pointer-events:auto!important}

  .topbar.topbar-compact{position:sticky!important;top:0!important;z-index:900!important;display:flex!important;min-height:68px!important;height:68px!important;padding:max(8px,env(safe-area-inset-top)) 14px 8px!important;background:var(--surface,#fff)!important}
  .topbar.topbar-compact>.topbar-actions{display:block!important;position:absolute!important;width:auto!important}
  .topbar.topbar-compact>.topbar-actions>.search-box,.topbar.topbar-compact>.topbar-actions>.top-shortcuts,.topbar.topbar-compact>.topbar-actions>.dark-mode-button,.topbar.topbar-compact>.topbar-actions>.notification-menu,.topbar.topbar-compact>.topbar-actions>.profile-menu>.profile-trigger{display:none!important}
  .mobile-topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mobile-topbar-button,.mobile-profile-button{width:42px;height:42px;min-width:42px;border:1px solid var(--line,#dfe7f2);border-radius:12px;background:var(--surface,#fff);color:var(--navy,#12396c);display:grid;place-items:center;font-size:17px}
  .mobile-profile-button{border-radius:50%;padding:0;background:linear-gradient(135deg,#17608d,#15a0a9);color:#fff;border:0;font-weight:700}
  .mobile-alert-button{position:relative}
  .mobile-alert-button>span{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--surface,#fff);border-radius:999px;background:#ef4444;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700}
  .mobile-topbar-brand{min-width:0;display:flex;align-items:center;gap:8px;color:var(--navy,#12396c);text-decoration:none;font-weight:700}
  .mobile-topbar-brand img{width:40px;height:40px;object-fit:contain}
  .mobile-topbar-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-topbar-actions{display:flex;align-items:center;gap:8px}
  .profile-dropdown{position:fixed!important;z-index:1300!important;top:62px!important;right:12px!important;left:12px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 78px)!important;overflow-y:auto!important}
  .notification-dropdown{position:fixed!important;z-index:1300!important;top:62px!important;right:12px!important;left:12px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 78px)!important;overflow-y:auto!important}
  .global-search-overlay{z-index:1400!important;padding:12px!important;align-items:flex-start!important}
  .global-search-dialog{width:100%!important;max-width:none!important;max-height:calc(100dvh - 24px)!important;margin-top:0!important}

  .page-content{width:100%!important;min-width:0!important;padding:14px!important;overflow-x:hidden!important}
  .page-content>*{min-width:0;max-width:100%}
  .panel,.card,.module-card,.content-card,.workspace,.page-hero{max-width:100%;min-width:0}

  .page-header,.module-header,.panel-header,.card-header,.hero-header,.toolbar-header{flex-direction:column;align-items:stretch!important}
  .page-actions,.header-actions,.panel-actions,.card-actions,.toolbar-actions{width:100%;display:flex;flex-wrap:wrap;gap:9px}
  .page-actions>*,.header-actions>*,.panel-actions>*,.card-actions>*{flex:1 1 auto;justify-content:center}

  .toolbar,.filters,.filter-bar,[class*="-filters"],[class*="-toolbar"]{max-width:100%;min-width:0}
  .toolbar>*,.filters>*,.filter-bar>*{min-width:0}
  .customer-filter-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .customer-filter-toolbar>*{width:100%!important;max-width:none!important}
  .customer-head-actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .customer-head-actions>*{width:100%!important;min-width:0!important}
  .customer-head-actions .primary-button{grid-column:1/-1}

  .kpi-grid,.stats-grid,.summary-grid,.dashboard-kpis,[class*="-kpi-grid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid,.fields-grid,[class*="-form-grid"],[class*="-field-grid"]{grid-template-columns:1fr!important}

  .table-wrapper,.table-responsive,[class*="table-wrap"],[class*="table-wrapper"]{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  table{max-width:none}
  th,td{white-space:nowrap}

  .app-modal{padding:10px!important;align-items:flex-end!important}
  .modal-window,.app-modal .modal-window{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 20px)!important;border-radius:18px 18px 12px 12px!important;margin:0!important}
  .modal-window>header,.modal-window>form>header{padding:16px!important;gap:10px}
  .modal-content,.modal-window>form>.modal-content{padding:16px!important}
  .modal-window>footer,.modal-window>form>footer{padding:13px 16px calc(13px + env(safe-area-inset-bottom))!important;display:flex!important;flex-wrap:wrap!important;gap:9px!important}
  .modal-window>footer>*,.modal-window>form>footer>*{flex:1 1 140px;justify-content:center}

  input,select,textarea,button{max-width:100%}
  input,select,textarea{font-size:16px!important}
  .primary-button,.secondary-button,.outline-button{min-height:44px}
}

@media (max-width:600px){
  .page-content{padding:10px!important}
  .mobile-topbar-brand span{display:none}
  .kpi-grid,.stats-grid,.summary-grid,.dashboard-kpis,[class*="-kpi-grid"]{grid-template-columns:1fr!important}
  .customer-head-actions{grid-template-columns:1fr!important}
  .customer-head-actions .primary-button{grid-column:auto}
  .page-actions>*,.header-actions>*,.panel-actions>*,.card-actions>*,.toolbar-actions>*{flex:1 1 100%;width:100%}
  .pagination,.customer-pagination{gap:10px!important;padding:12px!important}
  .customer-pagination-controls{max-width:100%;overflow-x:auto}
  .import-upload-body,.import-mapping-form,.import-page-head,.import-result-kpis{padding-left:16px!important;padding-right:16px!important}
  .import-guide-step{grid-template-columns:26px minmax(0,1fr)!important;gap:10px!important}
  .import-dropzone{min-height:170px!important;padding:18px 12px!important}
  .import-result-kpis{grid-template-columns:1fr!important}
  .import-preview-table-wrap{margin-left:16px!important;margin-right:16px!important}
  .order-quick-actions{grid-template-columns:1fr!important}
  .ticket-config-actions,.ticket-footer-actions,.preview-large-actions{grid-template-columns:1fr!important;flex-direction:column!important}
}

@media (max-width:380px){
  .page-content{padding:8px!important}
  .topbar.topbar-compact{padding-left:9px!important;padding-right:9px!important}
  .mobile-topbar-button,.mobile-profile-button{width:39px;height:39px;min-width:39px}
  .modal-window>footer>*,.modal-window>form>footer>*{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.mobile-overlay{transition:none!important}
}

@media print{.mobile-topbar{display:none!important}}

[data-theme="dark"] .mobile-topbar-button{background:var(--surface,#172033);border-color:var(--border-theme,#334155);color:#dbeafe}