/* Responsividade do celular do portal principal (index.html) — 12/10/2026.
   REGRA: tudo aqui dentro de @media (max-width: 768px) (ou menor). O desktop não muda.
   Este arquivo vem por último (depois de portal-2026.css e portal-2026-dark.css) e o resto do CSS usa
   muito !important, então os seletores abaixo são mais específicos (html body ...) e usam !important
   só onde é preciso para vencer. Só cores do tema (var(--panel), var(--line), var(--ink)...), por isso
   vale também no modo escuro.

   Índice
   1. Base da tela (altura, rolagem, margens, área segura)
   2. Cabeçalho (logo, menu, busca que abre ao tocar, módulo, perfil)
   3. Menu lateral (gaveta) e seletor de módulos
   4. Barra de abas (rola com o dedo)
   5. Campos, botões e alvos de toque
   6. Grades (classes e estilos inline) viram 1 ou 2 colunas
   7. Tabelas com rolagem horizontal própria
   8. Cartões, cabeçalhos de painel, barras de ferramentas
   9. Telas: Cotação, Rastreio, Painel, Vitrine, Estoque, Compras, Financeiro, Tarefas, Perfil
   10. Janelas (modais) e gavetas laterais
   11. Rede de segurança (nada estoura a largura)
*/

/* ========================================================================== */
/* 1. BASE                                                                    */
/* ========================================================================== */
@media (max-width: 768px) {
  /* A altura da área de rolagem usa a altura VISÍVEL (dvh): com 100vh a barra de endereço do
     navegador do celular cobria o fim da página. */
  html body .main { height: 100dvh; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; }
  html body .app { min-height: 100dvh; }

  /* Margens: o styles.css soma 12px do .main + 12px do .page + 12px do .content (36px de cada lado). */
  html body .main { padding: 0 !important; }
  html body .main .content {
    padding: 10px 12px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }
  html body .main .content > .page { padding: 0 !important; }

  /* Evita o zoom automático e o "pulo" de texto do iOS ao girar a tela */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html body { overflow-wrap: break-word; }
  html body button, html body a, html body [role="button"], html body label { touch-action: manipulation; }
  html body img, html body video, html body canvas, html body svg { max-width: 100%; }
  html body img, html body video { height: auto; }
  html body pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
}

/* ========================================================================== */
/* 2. CABEÇALHO                                                               */
/* Uma linha só: menu | logotipo | busca (ícone, abre ao tocar) | módulo | avisos | perfil.   */
/* O logotipo do rail é um ::before "fixed" que cobria a busca; aqui ele vai para dentro do    */
/* cabeçalho (pseudo-elemento do próprio .topbar) e o da gaveta volta ao fluxo normal.         */
/* ========================================================================== */
@media (max-width: 768px) {
  html body .app.casca-rail.casca-rail.casca-rail .topbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
    min-height: 56px; box-sizing: border-box;
    padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
    padding-left: calc(8px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  }
  /* título/breadcrumb ficam fora (a aba já diz onde o usuário está) */
  html body .topbar > div:has(> #breadcrumb) { display: none !important; }

  /* logotipo no cabeçalho */
  html body .app.casca-rail .topbar::before {
    content: ''; order: 2; flex: 1 1 0; min-width: 44px; height: 32px; margin-left: 4px;
    background: url('../../img/logo-oriente-portal.png?v=portal-2026-10') left center / contain no-repeat;
  }
  /* o logotipo fixo do rail sai do alto da tela e vira o cabeçalho da gaveta (ver seção 3) */
  html body .app.casca-rail .logo::before { position: static !important; left: auto !important; top: auto !important; }

  /* ordem: menu, logo, busca, módulo, ações */
  html body .topbar > .sidebar-toggle { order: 1; flex: 0 0 44px; width: 44px; height: 44px; }
  html body .topbar > .topbar-search { order: 3; }
  html body .topbar > #moduloSwitcher { order: 4; }
  html body .topbar > .topbar-actions { order: 5; margin-left: 0; gap: 4px; flex: 0 0 auto; }
  html body .topbar > #cmdPalettePanel { order: 9; }

  html body .topbar .topbar-icon-btn { width: 44px; height: 44px; border-radius: 12px; }
  html body .topbar .sidebar-toggle { border-radius: 12px; }

  /* módulo atual: só o quadradinho com a inicial + seta (o texto "MÓDULO / Nome" já some em 820px) */
  html body .topbar .modulo-switcher-top {
    margin: 0; height: 44px; padding: 0 6px 0 5px; gap: 4px; border-radius: 12px; flex: 0 0 auto;
  }
  html body .topbar .modulo-switcher-top .mst-av { width: 32px; height: 32px; }

  /* perfil: só o avatar */
  html body .topbar .topbar-perfil { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
  html body .topbar .topbar-perfil .topbar-perfil-av { width: 34px; height: 34px; }
  html body .topbar .topbar-perfil .topbar-perfil-chev { display: none; }

  /* busca: ícone de 44px; ao tocar abre por cima da linha toda (o campo já recebe o foco) */
  html body .topbar .topbar-search {
    flex: 0 0 44px; width: 44px; max-width: 44px; height: 44px; margin: 0; padding: 0;
    border-radius: 12px; overflow: hidden; position: relative; justify-content: center;
  }
  html body .topbar .topbar-search .topbar-search-icone {
    position: absolute; left: 50%; top: 50%; margin: 0; width: 20px; height: 20px;
    transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
  }
  html body .topbar .topbar-search .topbar-search-input {
    width: 100%; height: 100%; padding: 0; opacity: 0; font-size: 16px;
  }
  html body .topbar .topbar-search:focus-within {
    position: absolute; left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px));
    top: calc(6px + env(safe-area-inset-top, 0px)); width: auto; max-width: none; flex: none; z-index: 30;
    justify-content: flex-start; padding: 0 12px 0 40px; overflow: visible;
  }
  html body .topbar .topbar-search:focus-within .topbar-search-icone { left: 20px; }
  html body .topbar .topbar-search:focus-within .topbar-search-input { opacity: 1; padding: 0; }
  html body .topbar .topbar-search .topbar-search-input:focus-visible { outline: none; }

  /* resultados da busca: ocupam a largura da tela, logo abaixo do cabeçalho */
  html body .cmd-palette-panel {
    left: 8px !important; right: 8px !important; width: auto !important; transform: none !important;
    top: calc(var(--topbar-height, 56px) + 4px) !important;
    max-height: calc(100dvh - var(--topbar-height, 56px) - 16px); overscroll-behavior: contain;
  }

  /* menus do cabeçalho (perfil, configuração) nunca passam da tela */
  html body #perfilDropdown.perfil-dd { width: min(300px, calc(100vw - 16px)); }
  html body #configDropdown { width: min(280px, calc(100vw - 16px)) !important; }
  html body #perfilDropdown .perfil-dd-item, html body #configDropdown .cfg-dd-item { min-height: 44px; }
  /* painel de notificações: tela cheia no celular */
  html body #notifDrawer { width: 100vw !important; max-width: 100vw !important; padding-top: env(safe-area-inset-top, 0px); }
  html body #notifDrawer #notifFechar { width: 44px !important; height: 44px !important; font-size: 26px !important; }
  html body #notifDrawer #notifMarcarTodas { min-height: 44px; padding: 4px 10px !important; }
}
@media (max-width: 420px) {
  /* engrenagem do administrador: as mesmas telas estão no módulo Sistema do menu lateral */
  html body .topbar .topbar-actions > div:has(> #configBtn) { display: none !important; }
}

/* ========================================================================== */
/* 3. MENU LATERAL (gaveta) E SELETOR DE MÓDULOS                              */
/* ========================================================================== */
@media (max-width: 768px) {
  html body .app > .sidebar, html body .sidebar {
    width: min(86vw, 320px) !important; left: -110vw !important;
    height: 100dvh !important; max-height: 100dvh !important; z-index: 9000 !important;
    border-right: 1px solid var(--line) !important;
    padding-left: env(safe-area-inset-left, 0px);
    box-shadow: none !important; visibility: hidden;
    transition: left .25s ease, visibility 0s linear .25s !important;
  }
  html body.sidebar-aberto .sidebar, html body.sidebar-aberto > .app .sidebar {
    left: 0 !important; visibility: visible; transition: left .25s ease, visibility 0s !important;
    box-shadow: 8px 0 32px rgba(8, 18, 15, .30) !important;
  }
  html body.sidebar-aberto::after { background: rgba(8, 18, 15, .5); }

  /* cabeçalho da gaveta com o logotipo */
  html body .app.casca-rail .sidebar .logo {
    display: flex !important; align-items: center; justify-content: flex-start;
    height: 60px; min-height: 60px; padding: 0 16px; flex: none; overflow: hidden !important;
  }
  html body .app.casca-rail .sidebar .logo::before {
    content: ''; display: block; width: 150px; height: 34px; z-index: auto; flex: none;
    background: url('../../img/logo-oriente-portal.png?v=portal-2026-10') left center / contain no-repeat;
  }
  html body .app.casca-rail .sidebar .nav {
    padding: 10px 10px calc(20px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html body .app.casca-rail .sidebar .nav-item,
  html body .app.casca-rail .sidebar .nav-item-meupainel {
    min-height: 44px; font-size: 14.5px; padding-top: 8px; padding-bottom: 8px;
  }
  html body .app.casca-rail .sidebar .nav-module { min-height: 44px; }

  /* seletor de módulos: dentro da tela, em grade de 4, rola por dentro se for alto */
  html body #moduloDropMenu {
    left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important;
    max-height: calc(100dvh - var(--topbar-height, 56px) - 20px); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px; box-sizing: border-box;
  }
  html body #moduloDropMenu .mdm-wrap { flex-direction: column; gap: 10px; }
  html body #moduloDropMenu .mdm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: auto !important; }
  html body #moduloDropMenu .mdm-cell { min-height: 76px; justify-content: center; }
  html body #moduloDropMenu .mdm-nm { max-width: 100%; }
  html body #moduloDropMenu .mdm-gestao {
    border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body #moduloDropMenu .mdm-gcell { min-height: 44px; }
  /* painel antigo (não usado), por segurança */
  html body #moduloDropdown { left: 8px !important; right: 8px !important; width: auto !important; min-width: 0 !important; }
}

/* ========================================================================== */
/* 4. BARRA DE ABAS — fica sempre visível e rola com o dedo                   */
/* (o tabs-ui.js escondia a barra abaixo de 768px; aqui ela volta, com rolagem) */
/* ========================================================================== */
@media (max-width: 768px) {
  html body:not(.sep-fullscreen) #tms-tabs-bar.tms-tabs-bar {
    display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 2px;
    height: 44px; padding: 0 8px; box-sizing: border-box; max-width: 100%;
    overflow-x: auto !important; overflow-y: hidden; white-space: nowrap;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  html body #tms-tabs-bar.tms-tabs-bar::-webkit-scrollbar { display: none; height: 0; }
  html body #tms-tabs-bar .tms-tab { flex: 0 0 auto; height: 44px; scroll-snap-align: start; padding: 0 2px 0 12px; font-size: 13px; }
  html body #tms-tabs-bar .tms-tab.fixed { padding-right: 12px; }
  html body #tms-tabs-bar .tms-tab-label { height: 44px; min-width: 44px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
  html body #tms-tabs-bar .tms-tab-close { width: 36px; height: 36px; font-size: 18px; opacity: .7; }
  /* o CRM embutido descontava 0 de abas no celular; agora a barra existe */
  :root { --crm-abas-altura: 44px; }
  html body #crmHost { height: calc(100dvh - var(--topbar-height, 56px) - 44px); }

  /* abas de dentro das telas (Rastreamento, transportadora, cotação...) também rolam */
  html body :has(> .gf-tab), html body :has(> .rast-tab), html body :has(> .tar-modo), html body :has(> .cli360-tab) {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%;
  }
  html body :has(> .gf-tab)::-webkit-scrollbar, html body :has(> .rast-tab)::-webkit-scrollbar { display: none; height: 0; }
  html body .gf-tab, html body .rast-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
}

/* ========================================================================== */
/* 5. CAMPOS, BOTÕES E ALVOS DE TOQUE                                         */
/* ========================================================================== */
@media (max-width: 768px) {
  /* 16px nos campos: abaixo disso o iPhone dá zoom ao tocar */
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
  html body textarea, html body select { font-size: 16px !important; }
  html body .field-input, html body .input, html body .prod-toolbar-input, html body .og-input,
  html body input[type="search"], html body input[type="text"], html body input[type="email"], html body input[type="tel"],
  html body input[type="number"], html body input[type="password"], html body input[type="date"], html body input[type="time"],
  html body input[type="datetime-local"], html body input[type="month"], html body input[type="url"] {
    min-height: 44px; box-sizing: border-box; max-width: 100%;
  }
  html body textarea { min-height: 88px; box-sizing: border-box; max-width: 100%; }
  html body .field-label, html body label.field-label { font-size: 12px; margin-bottom: 4px; }

  /* botões e seletores estilizados (select-enhance.js troca o <select>) */
  html body .btn, html body .kn-btn, html body .og-btn, html body button.btn { min-height: 44px; }
  html body .btn.btn-sm, html body .kn-btn.kn-btn--sm, html body .og-btn.og-btn--sm { min-height: 40px; }
  html body .ns-btn { min-height: 44px; font-size: 15px; }
  html body .ns-wrap { max-width: 100%; }
  html body .ns-menu { max-width: calc(100vw - 16px); max-height: min(60dvh, 360px); }
  html body .ns-opt { min-height: 44px; display: flex; align-items: center; font-size: 15px; white-space: normal; }
  html body .og-dropdown, html body .og-pop { max-width: calc(100vw - 16px); }
  /* botões só com ícone nas tabelas e cartões */
  html body .cat-action-btn { width: 40px; height: 40px; }
  html body .modal-close, html body .og-modal-x, html body .et-modal-close, html body .et-drawer-close {
    min-width: 44px; min-height: 44px; width: 44px; height: 44px;
  }
  html body input[type="checkbox"], html body input[type="radio"] { min-width: 20px; min-height: 20px; }

  /* foco visível (teclado externo, leitor de tela) */
  html body button:focus-visible, html body a:focus-visible, html body [role="button"]:focus-visible,
  html body input:focus-visible, html body textarea:focus-visible, html body .ns-btn:focus-visible {
    outline: 2px solid var(--accent, #0a9492); outline-offset: 2px;
  }
}

/* ========================================================================== */
/* 6. GRADES                                                                  */
/* ========================================================================== */
@media (max-width: 768px) {
  /* ---- por classe (os que o styles.css só quebrava em larguras maiores) ---- */
  html body .search-bar-grid, html body .transp-detail, html body .og-approval-prio-grid,
  html body .cli360-kpis, html body .return-card, html body .cp-convidado, html body .mk-novaop-grid-2,
  html body .csat-grid, html body .totals-grid, html body .transp-config-meta, html body .pedido-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .return-card, html body .search-bar-grid, html body .cp-convidado { grid-template-columns: minmax(0, 1fr) !important; }
  html body .prod-det-grid2, html body .prod-det-grid3, html body .grid-2, html body .result-grid, html body .config-grid,
  html body .cat-exploded-layout, html body .cat-modal-grid, html body .cat-vit-modal-body, html body .transp-config-grid,
  html body .et-inbox, html body .mq-rev, html body .mq-grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body .cat-kpi-grid, html body .kpi-row, html body .prod-kpi-row, html body .prod-det-kpi-grid, html body .cat-vit-medidas,
  html body .mq-kpis, html body .kn-wrap .kn-kpis, html body .rep-kpis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  html body .cat-kpi { padding: 12px 12px !important; }
  html body .cat-kpi-value { font-size: 20px !important; }
  html body .kpi { min-width: 0; }
  html body .kpi .kpi-value, html body .kpi-value { font-size: 20px; overflow-wrap: anywhere; }

  /* ---- por estilo inline (a maior parte das telas monta as grades assim) ---- */
  /* 3 ou mais colunas iguais: 2 por linha */
  html body .content [style*="grid-template-columns"][style*="repeat(3"]:not([style*="auto-"]),
  html body .content [style*="grid-template-columns"][style*="repeat(4"]:not([style*="auto-"]),
  html body .content [style*="grid-template-columns"][style*="repeat(5"]:not([style*="auto-"]),
  html body .content [style*="grid-template-columns:1fr 1fr 1fr"],
  html body .content [style*="grid-template-columns: 1fr 1fr 1fr"],
  html body .content [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* 2 colunas iguais: continuam 2 (campos curtos lado a lado), sem estourar */
  html body .content [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  html body .content [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  html body .content [style*="grid-template-columns:repeat(2"], html body .content [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* ...mas quando os filhos são cartões/painéis/gráficos, 1 por linha */
  html body .content [style*="display:grid"][style*="grid-template-columns"]:has(> .panel),
  html body .content [style*="display: grid"][style*="grid-template-columns"]:has(> .panel),
  html body .content [style*="display:grid"][style*="grid-template-columns"]:has(> .card),
  html body .content [style*="display:grid"][style*="grid-template-columns"]:has(> .og-glass),
  html body .content [style*="display:grid"][style*="grid-template-columns"]:has(> div > canvas),
  html body .content [style*="display:grid"][style*="grid-template-columns"]:has(> section) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* colunas desiguais e laterais fixas (lista + detalhe): empilham */
  html body .content [style*="grid-template-columns:2fr 1fr"], html body .content [style*="grid-template-columns: 2fr 1fr"],
  html body .content [style*="grid-template-columns:1fr 2fr"], html body .content [style*="grid-template-columns: 1fr 2fr"],
  html body .content [style*="grid-template-columns:1.4fr 1fr"], html body .content [style*="grid-template-columns: 1.4fr 1fr"],
  html body .content [style*="grid-template-columns:2fr 1fr 1fr"], html body .content [style*="grid-template-columns:2fr 1fr 1.2fr"],
  html body .content [style*="grid-template-columns:1fr 380px"], html body .content [style*="grid-template-columns:1fr 360px"],
  html body .content [style*="grid-template-columns:1fr 340px"], html body .content [style*="grid-template-columns:280px 1fr"],
  html body .content [style*="grid-template-columns: 280px 1fr"], html body .content [style*="minmax(280px, 380px)"],
  html body .content [style*="minmax(0,1fr) 300px"], html body .content [style*="minmax(0, 1fr) 300px"],
  html body .content [style*="1.5fr repeat(4,1fr) auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* grades que se ajustam sozinhas, mas com coluna mínima maior que a tela: 1 por linha */
  html body .content [style*="auto-fit"][style*="minmax(3"], html body .content [style*="auto-fill"][style*="minmax(3"],
  html body .content [style*="auto-fit"][style*="minmax(4"], html body .content [style*="auto-fill"][style*="minmax(4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* quem pedia "ocupar 2 colunas" não pode criar coluna extra numa grade de 1 */
  html body .content [style*="grid-column:span"], html body .content [style*="grid-column: span"] { grid-column: 1 / -1 !important; }
  html body .content [style*="display:grid"] > *, html body .content [style*="display: grid"] > * { min-width: 0; }
  /* calendários e quadros de horas (7 e 12 colunas) não entram em nenhuma regra acima e ficam como estão */

  /* quatro ou mais colunas misturando largura fixa (linhas "tipo tabela"): rolam por dentro */
  html body .content [style*="grid-template-columns:90px 1fr 70px"], html body .content [style*="grid-template-columns:100px 1fr 70px"],
  html body .content [style*="grid-template-columns:28px 200px"], html body .content [style*="grid-template-columns:140px 1fr 120px"] {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ========================================================================== */
/* 7. TABELAS — o contêiner da tabela rola na horizontal                      */
/* (o .panel tem overflow:hidden e cortava a tabela; a página nunca ganha barra lateral).     */
/* Cabeçalho não quebra; células têm largura mínima, então tabela larga rola em vez de        */
/* espremer as colunas.                                                                       */
/* ========================================================================== */
@media (max-width: 768px) {
  html body .content > .page:not(#page-email):not(#page-email-v2):not(#page-whatsapp-inbox) :has(> table:not(.sem-rolagem-mobile)),
  html body .modal-content :has(> table), html body .modal-card :has(> table), html body .og-modal-body :has(> table) {
    overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  html body .content > .page:not(#page-email):not(#page-email-v2):not(#page-whatsapp-inbox) table:not(.sem-rolagem-mobile),
  html body .modal-content table, html body .modal-card table, html body .og-modal-body table { min-width: 100%; }
  html body .content table th { white-space: nowrap; }
  html body .content table td, html body .og-modal-body table td { overflow-wrap: normal; word-break: normal; min-width: 4.5rem; }
  html body .prod-tabela th, html body .prod-tabela td, html body .cat-tabela th, html body .cat-tabela td { padding: 10px 8px; }
  html body .prod-tabela td, html body .cat-tabela td { overflow-wrap: normal; word-break: normal; white-space: normal; }
  html body .prod-tabela-wrap { max-width: 100%; }
}

/* ========================================================================== */
/* 8. CARTÕES, CABEÇALHOS DE PAINEL, BARRAS DE FERRAMENTAS                    */
/* ========================================================================== */
@media (max-width: 768px) {
  html body .panel-header, html body .ed-card-head, html body .painel-head {
    flex-wrap: wrap; gap: 4px 10px; padding-left: 14px !important; padding-right: 14px !important;
  }
  html body .panel-body, html body .ed-card-body { padding-left: 14px !important; padding-right: 14px !important; }
  html body .panel-title { min-width: 0; overflow-wrap: anywhere; }

  /* linhas de formulário e de filtros: quebram em vez de espremer */
  html body .content [style*="display:flex"][style*="align-items:flex-end"]:not([style*="nowrap"]):not([style*="overflow"]),
  html body .content [style*="display: flex"][style*="align-items: flex-end"]:not([style*="nowrap"]):not([style*="overflow"]),
  html body .prod-toolbar, html body .sort-controls, html body .config-save-row, html body .fat-row-actions,
  html body .page-header, html body .prod-header, html body .kn-header, html body .abc-toolbar-group {
    flex-wrap: wrap;
  }
  html body .content [style*="display:flex"][style*="align-items:flex-end"] > div[style*="flex:1"],
  html body .content [style*="display:flex"][style*="align-items:flex-end"] > div[style*="flex: 1"] { min-width: 0; }
  html body .prod-toolbar { gap: 8px; }
  html body .prod-toolbar > * { max-width: 100%; }
  html body .prod-toolbar-input, html body .prod-toolbar-input input { flex: 1 1 100%; min-width: 0; }
  html body .prod-header { align-items: stretch; }
  html body .page-header { gap: 8px; }

  /* campos com largura inline fixa (width:160px etc.) não passam da tela */
  html body .content input[style*="width:"], html body .content .field-input[style*="width:"] { max-width: 100%; }
  /* barras de ação ao pé de formulários: botões em coluna, largura cheia */
  html body .config-save-row > .btn, html body .config-save-row > button { width: 100%; }

  /* distintivos, chips e filtros em linha rolam em vez de quebrar a página */
  html body .chips, html body .chip-row, html body .filtros-chips { flex-wrap: wrap; }
}

/* ========================================================================== */
/* 9. TELAS                                                                   */
/* ========================================================================== */
@media (max-width: 768px) {
  /* ---- Cotação de Frete: Cliente e Endereço em coluna única, campos em largura cheia ---- */
  html body #page-cotacao > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  html body #page-cotacao .panel-header { padding: 12px 14px !important; }
  html body #page-cotacao .panel-body { padding: 12px 14px !important; }
  /* Endereço: CEP e UF lado a lado; Cidade e Endereço em largura cheia (o grid interno é de 3 colunas) */
  html body #page-cotacao .panel-body > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important;
  }
  html body #page-cotacao .panel-body > div[style*="grid-template-columns"] > div:has(#cotCep) { order: 1; grid-column: 1 / 2 !important; }
  html body #page-cotacao .panel-body > div[style*="grid-template-columns"] > div:has(#cotUf) { order: 2; grid-column: 2 / 3 !important; }
  html body #page-cotacao .panel-body > div[style*="grid-template-columns"] > div:has(#cotCidade) { order: 3; grid-column: 1 / -1 !important; }
  html body #page-cotacao .panel-body > div[style*="grid-template-columns"] > div:has(#cotEndereco) { order: 4; grid-column: 1 / -1 !important; }
  /* CNPJ e botão: campo ocupa a linha, botão logo abaixo em largura cheia */
  html body #page-cotacao .panel-body > div[style*="display:flex"][style*="align-items:flex-end"] { flex-wrap: wrap; }
  html body #page-cotacao .panel-body > div[style*="display:flex"][style*="align-items:flex-end"] > div { flex: 1 1 100%; }
  html body #page-cotacao #btnCotBuscarCnpj, html body #page-cotacao #btnCotBuscarPedido, html body #page-cotacao #btnCotLimparPedido {
    flex: 1 1 100%; width: 100%; white-space: nowrap;
  }
  html body #page-cotacao #btnCotBuscarPedido { flex: 1 1 58%; width: auto; }
  html body #page-cotacao #btnCotLimparPedido { flex: 1 1 30%; width: auto; }
  html body #page-cotacao [style*="min-width:260px"] { min-width: 0 !important; flex: 1 1 100% !important; }
  /* volume manual: descrição em linha própria, medidas 2 por linha, botão em largura cheia */
  html body #page-cotacao [data-cot-modo-content="volume"] [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #page-cotacao [data-cot-modo-content="volume"] [style*="grid-template-columns"] > div:first-child { grid-column: 1 / -1; }
  html body #page-cotacao #volQtd { width: 100% !important; }
  html body #page-cotacao #btnAddVolume { width: 100%; }
  html body #page-cotacao #cotValorMercadoria { width: 100% !important; }
  html body #page-cotacao #cotValorMercadoria { max-width: none; }
  html body #page-cotacao .panel-body > div[style*="margin-top:10px"][style*="align-items:flex-end"] > div { flex: 1 1 100%; }
  html body #page-cotacao #cotTotais span { margin-left: 0 !important; display: block; }
  html body #page-cotacao #btnCotCotar { width: 100%; padding: 14px 16px !important; }
  html body #page-cotacao > div[style*="justify-content:flex-end"] { justify-content: stretch !important; }
  html body #page-cotacao #cotResultado .panel-header { flex-wrap: wrap; }
  html body #page-cotacao #cotResultado .panel-header > div:last-child { width: 100%; }
  html body #page-cotacao #cotResultado .panel-header .btn { flex: 1 1 0; }

  /* ---- Rastreamento / Fretes: filtros em coluna, abas rolando, ações quebrando ---- */
  html body #page-fretes .panel > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important;
  }
  html body #page-fretes .panel > div[style*="grid-template-columns"] > input,
  html body #page-fretes .panel > div[style*="grid-template-columns"] > .ns-wrap,
  html body #page-fretes .panel > div[style*="grid-template-columns"] > select:not([style*="display:none"]) { grid-column: 1 / -1; width: 100%; }
  html body #page-fretes #filtroBuscaFrete { min-height: 44px; font-size: 16px; }
  html body #page-fretes #fretesTabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  html body #page-fretes #fretesTabs::-webkit-scrollbar { display: none; }
  html body #page-fretes .panel > div:last-child, html body #page-fretes .panel > div[style*="justify-content:space-between"] { gap: 8px; }

  /* ---- Início / painel (cat-painel) ---- */
  html body #page-cat-painel .cat-painel-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .cat-painel-acoes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html body .cat-painel-card { min-height: 96px; padding: 12px; }
  html body .cat-painel-hero { padding: 16px 14px !important; gap: 12px; }
  html body .cat-painel-hero-avatar { width: 72px; height: 72px; font-size: 26px; }
  html body .painel-hoje-acoes { max-width: none; }
  html body .painel-hoje-btn { width: 44px; height: 44px; }

  /* ---- Produtos / vitrine ---- */
  html body #catVitrineApp .cat-vit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body #catVitrineApp .cat-vit-card-nome { font-size: 12.5px; }
  html body #catVitrineApp .cat-vit-total { margin-left: 0; flex: 1 1 100%; }
  html body #catVitrineApp [class*="cat-vit-filtro"], html body #catVitrineApp .cat-vit-barra { flex-wrap: wrap; gap: 8px; }
  html body #catVitrineApp .cat-vit-btn { min-height: 44px; }
  html body .cat-vit-modal-body { padding: 12px !important; gap: 14px !important; }

  /* ---- Estoque ---- */
  html body #page-estoque [style*="grid-template-columns"] { gap: 10px !important; }
  html body #page-estoque .panel-body, html body #page-estoque .panel-header { padding-left: 14px !important; padding-right: 14px !important; }

  /* ---- Compras: pedidos, em trânsito ---- */
  html body .et-page { padding: 12px 0 !important; }
  html body .et-toolbar { flex-wrap: wrap; gap: 8px; }
  html body .et-search { min-width: 0 !important; flex: 1 1 100%; }
  html body .et-kanban { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: min(82vw, 300px); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  html body .et-kanban > * { scroll-snap-align: start; min-width: 0; }
  html body .et-drawer { width: 100vw !important; max-width: 100vw; }
  html body .et-modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }

  /* ---- Financeiro: DRE e contas a pagar (grades largas rolam por dentro) ---- */
  html body #page-financeiro-dre .panel, html body #page-financeiro-contas-pagar .panel,
  html body #page-financeiro-dre-despesas .panel, html body #page-financeiro-extrato .panel { overflow-x: auto; }
  html body #page-financeiro-dre [class*="filtro"], html body #page-financeiro-contas-pagar [class*="filtro"],
  html body #page-financeiro-dre [class*="toolbar"], html body #page-financeiro-contas-pagar [class*="toolbar"] { flex-wrap: wrap; gap: 8px; }

  /* ---- Kanban / Tarefas ---- */
  html body .kn-wrap { --kn-topo: calc(var(--topbar-height, 56px) + 44px); }
  html body .kn-wrap .kn-board { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-left: 12px; }
  html body .kn-wrap .kn-col { scroll-snap-align: start; flex: 0 0 min(86vw, 320px); }
  html body .tar-modos { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  html body .tar-modos .tar-modo { flex: 0 0 auto; min-height: 44px; }

  /* ---- Meu Perfil ---- */
  html body #page-meu-perfil [style*="display:flex"]:not([style*="nowrap"]):not([style*="column"]):not([style*="overflow"]) { flex-wrap: wrap; }
  html body #page-meu-perfil [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ========================================================================== */
/* 10. JANELAS (modais) E GAVETAS LATERAIS                                    */
/* Quase tela cheia, rolagem por dentro, botões sempre ao alcance do polegar. */
/* ========================================================================== */
@media (max-width: 768px) {
  html body .modal, html body .modal-backdrop, html body .modal-overlay, html body .og-modal-overlay,
  html body .et-modal-backdrop, html body .cmr-overlay, html body .mk-novaop-overlay, html body .notif-emails-modal-backdrop {
    padding: 8px !important; align-items: center;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .modal-content, html body .modal-card, html body .og-modal, html body .cmr-modal, html body .notif-emails-modal-panel,
  html body .metas-ano-modal, html body .cp-reabrir-modal, html body .og-approval-modal {
    width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 14px; box-sizing: border-box;
  }
  html body .modal-content, html body .modal-card { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  html body .og-modal-head, html body .modal-header, html body .modal-head { padding: 12px 14px !important; flex: none; }
  html body .og-modal-body, html body .modal-body { padding: 14px !important; overscroll-behavior: contain; }
  html body .og-modal-foot, html body .modal-foot {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important; flex-wrap: wrap; gap: 8px;
  }
  html body .og-modal-foot .og-btn, html body .og-modal-foot .btn, html body .modal-foot .btn { flex: 1 1 140px; justify-content: center; }
  html body .og-modal-title, html body .modal-title { white-space: normal; overflow: visible; }
  /* formulários dentro de janelas: 1 coluna */
  html body .og-modal [style*="grid-template-columns"]:not([style*="repeat(7"]):not([style*="repeat(12"]), html body .modal-content [style*="grid-template-columns"]:not([style*="repeat(7"]):not([style*="repeat(12"]),
  html body .modal-card [style*="grid-template-columns"]:not([style*="repeat(7"]):not([style*="repeat(12"]) { grid-template-columns: minmax(0, 1fr) !important; }
  html body .og-modal [style*="grid-column"], html body .modal-content [style*="grid-column"] { grid-column: auto !important; }
  html body .og-modal [style*="width:"], html body .modal-content [style*="width:"] { max-width: 100%; }

  /* gavetas laterais (cliente 360, em trânsito, detalhes): tela cheia */
  html body .cli360-drawer, html body .et-drawer, html body [class$="-drawer"], html body [class*="-drawer "] {
    max-width: 100vw;
  }
  html body .cli360-drawer, html body .et-drawer { width: 100vw !important; }
  html body .cli360-tab { min-height: 44px; }
}

/* ========================================================================== */
/* 11. REDE DE SEGURANÇA — nada estoura a largura da tela                     */
/* ========================================================================== */
@media (max-width: 768px) {
  html body .content, html body .content > .page { max-width: 100%; }
  html body .content > .page { min-width: 0; }
  html body .content .panel, html body .content .card, html body .content .kpi { max-width: 100%; box-sizing: border-box; }
  /* textos longos sem espaço (chassi, e-mail, chave de NF) quebram em vez de empurrar a página */
  html body .content .panel-body, html body .content .kpi, html body .content .card { overflow-wrap: anywhere; }
  html body .content .panel-body table, html body .content .card table { overflow-wrap: normal; }
  /* gráficos: acompanham a largura do cartão */
  html body .content canvas { max-width: 100% !important; }
  html body .content iframe { max-width: 100%; }
}

/* Telas muito estreitas (iPhone SE e parecidos) */
@media (max-width: 380px) {
  html body .main .content { padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important; }
  html body #moduloDropMenu .mdm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .content [style*="grid-template-columns"][style*="repeat(4"]:not([style*="auto-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Fila Serasa: no celular a tabela vira cartões e não precisa de caixa com rolagem própria */
@media (max-width: 720px) {
  html body #sfiRoot .og-tab-rolagem { max-height: none !important; overflow: visible !important; }
}