/* =========================================================================
   Logix · Responsivo (celular e tablet) — mockup aprovado em 27/10/2026.
   Carregado DEPOIS de componentes.css. No computador (> 900px) nada aqui vale.

   Padrões:
     1. Menu vira gaveta (≤ 900px): ☰ no topo, fundo escuro, X, Esc.
     2. Listas de cadastro viram cartões (classes .lx-lista-c / .lx-lista-c-*).
     3. Tabelas de números rolam de lado com a 1ª coluna presa (.lx-table, .lx-tab-rola).
     4. Abas e filtros numa linha só, rolando de lado (.lx-abas, .lx-rola-x).
     5. Janelas sobem de baixo (.lx-ov + .lx-ov-caixa) e gavetas ocupam a largura
        (.lx-gaveta-lat).
     6. Topo enxuto: o selo do perfil sai do topo no celular (já aparece no menu).

   Por que tem !important: as telas montam grade e largura em style="" (inline). A
   regra de celular precisa vencer o inline só abaixo do ponto de quebra, e o único
   jeito em CSS é !important dentro da @media. Cada uso fica preso a uma classe
   explícita (.lx-empilha, .lx-ov-caixa…), nunca a seletor genérico.
   ========================================================================= */

/* Peças da gaveta e botões só do celular: escondidos no computador. */
.lx-menu-btn, .lx-menu-fechar, .lx-menu-fundo, .lx-so-cel { display: none; }
.lx-chat-corrida-wrap { display: contents; }

/* ============================ ATÉ 900px ============================ */
@media (max-width: 900px) {
  /* ---- 1. Casca: menu em gaveta ---- */
  .lx-app { grid-template-columns: minmax(0, 1fr); }
  .lx-side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 2700;
    width: min(300px, 86vw); height: 100%; height: 100dvh;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 0 18px 18px 0;
    transform: translateX(-104%); visibility: hidden;
    transition: transform .24s var(--lx-ease), visibility 0s linear .24s;
    box-shadow: 20px 0 40px -20px rgba(4, 20, 40, .5);
  }
  .lx-side::after { display: none; }
  .lx-app.menu-aberto .lx-side { transform: none; visibility: visible; transition: transform .24s var(--lx-ease), visibility 0s; }
  .lx-menu-fundo {
    display: block; position: fixed; inset: 0; z-index: 2650; background: rgba(4, 20, 40, .5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .lx-app.menu-aberto .lx-menu-fundo { opacity: 1; pointer-events: auto; }
  body.lx-sem-rolagem { overflow: hidden; }

  .lx-side-logo { padding: 4px 4px 12px; }
  .lx-menu-fechar {
    display: grid; place-items: center; flex: none; margin-left: auto;
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff;
  }
  /* Com logo do cliente o bloco centraliza a logo; o X fica no canto. */
  .lx-side-logo:has(.lx-mono.tem-logo) { justify-content: space-between; }
  .lx-side-logo:has(.lx-mono.tem-logo) .lx-mono.tem-logo { max-width: 170px; height: 52px; }
  .lx-nav-i { padding: 11px 12px; font-size: 14px; }

  /* Topo: ☰ + título. Fica preso no alto ao rolar. */
  .lx-topbar { position: sticky; top: 0; z-index: 900; padding: 10px 16px; gap: 12px; }
  .lx-menu-btn {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; cursor: pointer;
    border: 1px solid var(--lx-linha); border-radius: 10px; background: var(--lx-superficie); color: var(--lx-tinta);
  }
  .lx-topbar-tit { min-width: 0; flex: 1; }
  .lx-topbar h1 { font-size: 16.5px; line-height: 1.25; }
  .lx-topbar .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lx-content { padding: 16px; overflow: visible; }
  .lx-banner-imp { flex-wrap: wrap; padding: 10px 16px !important; }

  /* ---- 4. Abas numa linha só, rolando de lado ---- */
  .lx-abas {
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .lx-abas::-webkit-scrollbar { display: none; }
  .lx-abas > * { flex: none !important; white-space: nowrap; scroll-snap-align: start; }
  /* Fileira de botões/chips que rola de lado (períodos, status). */
  .lx-rola-x { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lx-rola-x::-webkit-scrollbar { display: none; }
  .lx-rola-x > * { flex: none !important; white-space: nowrap; }

  /* Grades de duas áreas (conteúdo + coluna lateral) empilham já no tablet. */
  .lx-empilha-t { grid-template-columns: minmax(0, 1fr) !important; }
  .lx-empilha-t > * { min-width: 0; }

  .lx-tres-t { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lx-duas-t { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lx-duas-t > * { min-width: 0; }
  .lx-tres-t > * { min-width: 0; }

  /* Mapas (Leaflet) viram uma camada só: sem isto os botões +/− do mapa (z-index 1000)
     passavam por cima do topo preso ao rolar a tela. */
  .leaflet-container { z-index: 0; }

  /* Mapa + painel ao lado (Rastreio, Dashboard do master, Radar): painel desce. */
  .lx-mapa-lado { flex-direction: column !important; height: auto !important; min-height: 0 !important; }
  .lx-mapa-lado > :first-child { flex: none !important; height: 56vh; min-height: 320px; width: 100% !important; }
  .lx-mapa-lado > :not(:first-child) { width: 100% !important; max-width: none !important; flex: none !important; max-height: none !important; }

  /* Gaveta lateral (detalhe que entra pela direita) ocupa a largura toda. */
  .lx-gaveta-lat { width: 100% !important; max-width: 100% !important; border-left: 0 !important; }
}

/* ============================ ATÉ 600px (celular) ============================ */
@media (max-width: 600px) {
  /* ---- 6. Topo enxuto ---- */
  .lx-topbar > .lx-role-pill, .lx-topbar-dir > .lx-role-pill { display: none; }
  /* O "?" da ajuda sobe para o canto do topo: embaixo ele cobria o botão principal das
     janelas (Salvar, Lançar, Atribuir). Some enquanto uma gaveta lateral ou a própria
     ajuda está aberta (o X delas fica no mesmo canto). */
  .lx-topbar { padding-right: 56px; }
  .lx-ajuda-btn { top: 19px !important; bottom: auto !important; right: 16px !important; opacity: 1 !important; }
  body:has(.lx-gaveta-lat, .lx-ajuda-gaveta) .lx-ajuda-btn { display: none; }
  .lx-content { padding: 14px 14px 72px; }
  .lx-sec-h { margin: 20px 0 10px; }

  /* Grades: empilhar (1 coluna) ou cair para 2. */
  .lx-empilha { grid-template-columns: minmax(0, 1fr) !important; }
  .lx-empilha > * { min-width: 0; }
  .lx-duas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lx-duas > * { min-width: 0; }
  /* Fileira flex que quebra em coluna (filtros, barras de ação). */
  .lx-coluna { flex-direction: column !important; align-items: stretch !important; }
  .lx-coluna > * { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; }
  .lx-quebra { flex-wrap: wrap !important; }
  .lx-larga { width: 100% !important; max-width: none !important; min-width: 0 !important; }
  .lx-some-cel { display: none !important; }
  .lx-linha-inteira { grid-column: 1 / -1; }

  /* Mapa em tempo real (tela cheia): o painel do motoboy/loja vira folha de baixo. */
  .lx-mapa-painel { top: auto !important; left: 0 !important; width: 100% !important; max-width: none !important; height: 62vh; height: 62dvh; border-left: 0 !important; border-radius: 18px 18px 0 0; }

  .lx-grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lx-kpi { padding: 14px; }
  .lx-kpi .k-val { font-size: 26px; margin-top: 10px; }

  /* ---- 3. Tabelas rolam de lado; 1ª coluna presa ---- */
  .lx-table, .lx-tab-rola table, table.lx-rola { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .lx-table thead th, .lx-table tbody td,
  .lx-tab-rola th, .lx-tab-rola td, table.lx-rola th, table.lx-rola td { white-space: nowrap; }
  .lx-table tr > :first-child, .lx-tab-rola tr > :first-child, table.lx-rola tr > :first-child {
    position: sticky; left: 0; z-index: 1; background: var(--lx-superficie);
    box-shadow: 6px 0 8px -6px rgba(4, 44, 83, .18);
  }
  .lx-table thead th { padding-top: 10px; }
  .lx-tab-rola { overflow-x: auto; max-width: 100%; }
  /* Tabelas do Financeiro (.lx-ft-tab já rola): 1ª coluna presa também. */
  .lx-ft-tab tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--lx-superficie); box-shadow: 6px 0 8px -6px rgba(4, 44, 83, .18); }
  .lx-ft-tab thead th:first-child { background: var(--lx-superficie); }

  /* Tabela de cadastro (.lx-tab-cartoes): cada linha vira um cartão; 1ª célula em cima,
     as outras quebram embaixo. Vence a regra de rolagem acima. */
  table.lx-tab-cartoes { display: block; overflow: visible; }
  table.lx-tab-cartoes thead { display: none; }
  table.lx-tab-cartoes tbody { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  table.lx-tab-cartoes tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    background: var(--lx-superficie); border: 1px solid var(--lx-linha); border-radius: 12px; padding: 12px 14px;
  }
  table.lx-tab-cartoes tbody tr:hover { background: var(--lx-superficie); }
  table.lx-tab-cartoes tbody td { display: block; border: 0; padding: 0; white-space: normal; min-width: 0; }
  table.lx-tab-cartoes tr > :first-child { position: static; box-shadow: none; flex: 1 1 100%; }
  table.lx-tab-cartoes tbody td:last-child { margin-left: auto; }

  /* ---- 2. Listas em cartões ----
     Linha em grade (.lx-lista-c) vira cartão: o 1º filho (nome) ocupa a linha toda,
     os demais quebram embaixo; o cabeçalho de colunas some. */
  .lx-lista-c-cab { display: none !important; }
  .lx-lista-c {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 12px !important;
    padding: 13px 14px !important;
  }
  .lx-lista-c > * { min-width: 0; }
  .lx-lista-c > :first-child { flex: 1 1 100% !important; }
  .lx-lista-c > .lx-lista-c-fim { margin-left: auto; }
  .lx-lista-c > .lx-lista-c-acoes { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start !important; }
  .lx-lista-c > .lx-lista-c-acoes > * { flex: 1 1 auto; justify-content: center; }

  /* Cartão em linha (foto + dados + selo + ações): as ações descem para uma linha própria. */
  .lx-cartao-quebra { flex-wrap: wrap !important; }
  .lx-cartao-quebra > .lx-cq-fim { min-width: 0 !important; }
  .lx-cartao-quebra > .lx-cq-acoes { flex: 1 1 100% !important; display: flex; gap: 8px; flex-wrap: wrap; }
  .lx-cartao-quebra > .lx-cq-acoes > * { flex: 1 1 0; justify-content: center; }

  /* Gamificação: linha de métrica (ícone · nome · pontos · ligado) com colunas menores. */
  .lx-gam-metrica { grid-template-columns: 22px minmax(0, 1fr) 72px 30px !important; gap: 10px !important; padding: 11px 12px !important; }
  .lx-gam-metrica input.lx-input { padding: 9px 8px; text-align: center; }

  .lx-so-cel { display: inline-flex; align-items: center; }

  /* Suporte: lista OU conversa; a corrida abre pelo botão "Corrida". */
  .lx-chat { height: calc(100dvh - 150px) !important; min-height: 420px; }
  .lx-chat > .lx-chat-inbox { width: 100% !important; border-right: 0 !important; }
  .lx-chat > .lx-chat-area { display: none; }
  .lx-chat.conversa-aberta > .lx-chat-inbox { display: none; }
  .lx-chat.conversa-aberta > .lx-chat-area { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
  .lx-chat .lx-chat-thread { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
  .lx-chat .lx-chat-corrida-wrap { display: none; }
  .lx-chat.ver-corrida .lx-chat-thread { display: none; }
  .lx-chat.ver-corrida .lx-chat-corrida-wrap { display: block; flex: 1; overflow: auto; padding: 12px; }
  .lx-chat .lx-chat-corrida { width: auto; border: 0; padding: 0; overflow: visible; }
  .lx-chat-voltar { width: 36px; height: 36px; flex: none; justify-content: center; border: 1px solid var(--lx-linha); border-radius: 10px; background: var(--lx-superficie); color: var(--lx-tinta); cursor: pointer; }

  /* Faixas (km → minutos) do SLA: campos encolhem para caber com o "Remover". */
  .lx-faixa-linha { gap: 6px !important; }
  .lx-faixa-linha input { width: auto !important; flex: 1 1 0; min-width: 0; }
  .lx-faixa-linha button { padding: 6px 8px !important; }

  /* ---- 5. Janelas sobem de baixo ---- */
  .lx-ov { align-items: flex-end !important; justify-content: stretch !important; padding: 0 !important; place-items: end stretch !important; }
  .lx-ov-caixa {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    max-height: 92vh !important; max-height: 92dvh !important; margin: 0 !important;
    border-radius: 18px 18px 0 0 !important; overflow-y: auto !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    animation: lxSobe .22s var(--lx-ease);
  }
  /* Rodapé de botões da janela: botões dividem a largura. */
  .lx-ov-pe { flex-wrap: wrap !important; }
  .lx-ov-pe > button { flex: 1 1 auto; justify-content: center; text-align: center; min-height: 42px; }
  /* Gestão do cliente (janela com menu à esquerda): menu vira abas no alto. */
  .lx-gestao-corpo { flex-direction: column !important; }
  .lx-gestao-nav { flex: none !important; flex-direction: row !important; overflow-x: auto; border-right: 0 !important; border-bottom: 1px solid var(--lx-linha); padding: 8px 12px !important; scrollbar-width: none; }
  .lx-gestao-nav > * { flex: none; white-space: nowrap; width: auto !important; }
  .lx-gestao-conteudo { padding: 16px !important; }
  @keyframes lxSobe { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

  /* Acompanhamento: busca em largura cheia na 1ª linha; cartões no lugar da tabela;
     barra do lote presa embaixo (o topo já é preso). */
  .lx-acomp-topo { flex-wrap: wrap !important; }
  .lx-acomp-topo > .lx-acomp-busca { order: -1; flex: 1 1 100% !important; min-width: 0 !important; }
  .lx-acomp-topo > select { flex: 1 1 auto !important; width: auto !important; }
  .lx-acomp-cartoes { display: flex; flex-direction: column; gap: 10px; border: 0 !important; padding-top: 12px; overflow: visible !important; }
  .lx-barra-sel { position: fixed !important; left: 12px; right: 12px; bottom: 12px; top: auto !important; z-index: 950 !important; border-radius: 14px !important; flex-wrap: wrap; }

  /* Quadro (Kanban): uma coluna por vez, deslizando de lado. */
  .lx-quadro { scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 8px; scroll-padding: 0 14px; }
  .lx-quadro-col { flex: 0 0 86% !important; scroll-snap-align: start; max-height: calc(100dvh - 190px) !important; }

  /* Campos de data/hora nativos não estouram a coluna. */
  input[type="date"].lx-input, input[type="time"].lx-input, input[type="datetime-local"].lx-input { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-side, .lx-menu-fundo, .lx-ov-caixa { transition: none !important; animation: none !important; }
}

/* Minha marca / White-label (28/10/2026): prévia vira gaveta no celular. */
@media (max-width: 1100px) {
  .lx-marca-grade { grid-template-columns: minmax(0, 1fr); }
  .lx-marca-lateral { position: static; }
}
@media (max-width: 900px) {
  .lx-marca-grade2, .lx-marca-grade3 { grid-template-columns: minmax(0, 1fr); }
  .lx-marca-lateral.lx-marca-gaveta { display: none; }
  .lx-marca-lateral.lx-marca-gaveta.aberta { display: block; position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 2500; background: var(--lx-superficie); border-radius: 18px 18px 0 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 30px rgba(4,32,61,.25), 0 0 0 100vmax rgba(4,20,40,.45); max-height: 88vh; overflow: auto; }
  body:has(.lx-marca-gaveta.aberta) .lx-ajuda-btn { display: none; }
  .lx-marca-ver-previa { display: inline-flex; }
  .lx-marca-rodape { position: sticky; bottom: 0; z-index: 5; background: var(--lx-fundo); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); justify-content: stretch; }
  .lx-marca-rodape .lx-btn { flex: 1; }
  .lx-marca-rodape .etq { flex-basis: 100%; order: -2; }
  .lx-marca-rodape .msg { flex-basis: 100%; order: -1; }
  .lx-marca-rodape .msg:empty { display: none; }
}