/* AutoComex — otimização mobile */
@media (max-width: 900px) {
  aside {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    max-width: 82vw;
    z-index: 99980;
    transform: translateX(-105%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  body.acx-nav-open aside { transform: translateX(0); box-shadow: 0 0 60px rgba(2,6,23,.8); }
  #acx-nav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 99979;
    background: rgba(2,6,23,.6);
  }
  body.acx-nav-open #acx-nav-backdrop { display: block; }
  #acx-hamburger {
    display: flex !important;
    position: fixed; top: 10px; left: 10px; z-index: 99981;
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(15,23,42,.95); border: 1px solid rgba(59,130,246,.35);
    color: #e2e8f0; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 6px 20px rgba(2,6,23,.5);
  }
  main, [class*='ml-64'] { margin-left: 0 !important; padding-left: 0 !important; }
  main { padding-top: 58px !important; }
  html, body { overflow-x: hidden; }
  main { overflow-x: hidden; }
  main > div, main section { max-width: 100vw; box-sizing: border-box; }
  main div[style*='padding'] { padding-left: 12px !important; padding-right: 12px !important; }

  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  div[style*='grid-template-columns'] { grid-template-columns: 1fr !important; }
  .proc-form-grid, .proc-desp-grid, .emp-grid, .retif-grid { grid-template-columns: 1fr !important; }
  .proc-card { padding: 14px !important; }

  main div[style*='display:flex'][style*='flex-wrap'] > div { min-width: 44% !important; }
  input, select, textarea, button { font-size: 16px; }
  /* drawer estilo app */
  aside nav a { padding: 13px 14px !important; font-size: 15px !important; border-radius: 12px !important; }
  aside { border-radius: 0 22px 22px 0; }
}
#acx-hamburger { display: none; }

/* ===== visual de app (todas as páginas) ===== */
@media (max-width: 900px) {
  body.acx-app main { padding-bottom: 96px !important; }

  /* títulos de página */
  main h1 { font-size: 24px !important; line-height: 1.2 !important; }
  main h2 { font-size: 19px !important; }
  main h3 { font-size: 16px !important; }

  /* cards e painéis */
  main section, main [class*='card'], main div[style*='border-radius'] { border-radius: 16px; }

  /* botões com toque de app */
  main button, main a[role='button'], main [class*='btn'] {
    min-height: 44px; border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent;
  }
  main table button { min-height: 36px; }

  /* inputs estilo app */
  main input:not([type='checkbox']):not([type='radio']), main select, main textarea {
    border-radius: 12px !important; padding-top: 11px !important; padding-bottom: 11px !important;
  }

  /* tabelas roláveis com visual melhor */
  main table { border-radius: 14px; }
  main table th { font-size: 11px !important; }
  main table td, main table th { padding: 12px 10px !important; }

  /* modais viram sheets */
  div[style*='position: fixed'][style*='z-index'] > div[style*='border-radius'],
  div[style*='position:fixed'][style*='z-index'] > div[style*='border-radius'] {
    max-width: 100vw !important; width: 100% !important;
    max-height: 92dvh !important; overflow-y: auto;
    border-radius: 20px 20px 0 0 !important;
    align-self: flex-end;
  }

  /* barras de ação em linha viram empilhadas quando estourarem */
  main div[style*='display:flex'][style*='gap'] { flex-wrap: wrap; }

  /* KPI grids do dashboard/financeiro */
  main div[style*='repeat(4'] , main div[style*='repeat(3'] { grid-template-columns: 1fr 1fr !important; }

  /* respiro nas laterais */
  main > div > div { max-width: 100%; }
}
@media (max-width: 900px) {
  main div[style*='justify-content: space-between'], main div[style*='justify-content:space-between'] { flex-wrap: wrap; gap: 10px; }
  main div[style*='display: flex'][style*='gap'] { flex-wrap: wrap; }
  main div[style*='display: flex'] > input[type='text'], main div[style*='display:flex'] > input[type='text'] { min-width: 0; flex: 1 1 160px; }
}
@media (max-width: 900px) {
  .proc-main { padding: 16px 14px 96px !important; }
  .proc-header { flex-wrap: wrap; gap: 12px; margin-bottom: 18px !important; }
  .proc-header h1 { font-size: 23px !important; }
  .proc-header-actions { flex-wrap: wrap; width: 100%; gap: 8px !important; }
  .proc-header-actions button { flex: 1 1 45%; }
  .proc-toolbar, .proc-filters { flex-wrap: wrap; gap: 8px !important; }
  .proc-select { max-width: 100%; flex: 1 1 100%; }
  .proc-search, .proc-search-input { flex: 1 1 100% !important; max-width: 100% !important; }
}
@media (max-width: 900px) {
  select { max-width: calc(100vw - 32px) !important; }
}