.bottom-nav{display:none}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:60;width:var(--sidebar-w)!important;transform:translateX(-100%);transition:transform .25s}
  .app.mobile-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  #collapse{display:none}

  /* Topbar: respeita a área segura do topo (relógio/notch) no PWA em tela cheia.
     O ::before pinta a faixa do relógio com a cor de destaque da marca — mesmo
     tratamento do Receita Pro (barra colorida atrás do relógio).
     A altura é a mesma da topbar do Receita Pro (4.7rem ≈ 75px) e é mínima
     fixa, para a barra não "crescer e encolher" ao trocar de tela. */
  .topbar{
    position:sticky;height:auto;min-height:calc(4.7rem + env(safe-area-inset-top));gap:10px;
    padding:calc(env(safe-area-inset-top) + 6px) 14px 8px;
    background:var(--surface);backdrop-filter:none;
  }
  .topbar::before{
    content:"";position:absolute;left:0;right:0;top:0;
    height:calc(env(safe-area-inset-top) + 1px);
    background:var(--accent-strong);
  }
  .pageinfo{min-width:0}
  .pageinfo h1{font-size:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pageinfo p{font-size:.85rem;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .notif-btn,.avatar-btn{width:38px;height:38px}
  .notif-btn svg{width:19px;height:19px}

  /* Barra inferior: mesmas proporções do Receita Pro — ícones 23px, rótulos ~10px,
     espaçamento compacto, marcador do item ativo no topo, área segura de baixo.
     As colunas seguem a quantidade de itens (grid-auto-flow) em vez de um número
     fixo: mobile-nav.js filtra os destinos por perfil, então a barra não tem
     sempre o mesmo tamanho — com colunas fixas sobrava um vão à direita. */
  .bottom-nav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(15,23,42,.08);
    padding:5px 3px calc(5px + env(safe-area-inset-bottom));
  }
  .bn-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--ink-3);font-size:10px;font-weight:600;padding:4px 0}
  .bn-item svg{width:23px;height:23px}
  .bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bn-item.active{color:var(--accent)}
  .bn-item.active::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
    width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}

  .content{padding:16px 14px calc(88px + env(safe-area-inset-bottom))}
  .fab,.fab-wrap{bottom:calc(88px + env(safe-area-inset-bottom))}
  .fab-wrap .fab{bottom:auto}
  .selbar{bottom:calc(80px + env(safe-area-inset-bottom))}
  /* toasts nunca por cima da bottom nav */
  .toasts{left:14px;right:14px;bottom:calc(90px + env(safe-area-inset-bottom))}
  .toast{min-width:0;max-width:none;width:100%}

  /* Tabela → cards: no celular a lista rola menos e as ações ficam do tamanho do
     dedo, não do mouse — ver .desktop-only/.mobile-only (base.css) e .plt-cards
     (views.css). */
  .desktop-only{display:none}
  .mobile-only{display:block}

  /* Alvos de toque ≥44px nas ações que hoje ficam pequenas no formato desktop. */
  .btn.xs{min-width:38px;min-height:38px;padding:8px}
  .cli-chev,.icon-btn{width:40px;height:40px}
  .tbl .r-act{gap:2px}

  /* 16px nos selects de filtro: abaixo disso o iOS dá zoom automático ao focar o
     campo — os inputs de formulário (.fg input) já estavam corretos, faltavam
     estes. */
  select.sel{font-size:16px}

  .cob-actionline{margin:-2px 0 12px}
  .cob-lote-btn{min-height:58px;border-radius:12px;padding:9px 11px;grid-template-columns:36px minmax(0,1fr) 22px}
  .cob-lote-ico{width:36px;height:36px}
  .cob-lote-tx b{font-size:14px}
  .cob-lote-tx small{font-size:11.8px}
  .cob-layout{display:block}
  .cob-side{display:none}
  .cob-list-card.selected{border-color:var(--line);box-shadow:none}
  .cob-perline{justify-content:flex-start;gap:7px;overflow:hidden}
  .cob-perline b{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cob-sel{padding:10px}
  .cob-sel .vv{font-size:13px}
  .cob-detail-body{gap:13px}
  .cob-det-footer{gap:9px;padding-top:14px}
  .cob-det-split,.cob-det-admin-actions{grid-template-columns:1fr}
  .cob-det-client-actions{gap:8px;padding-top:1px}
  .cob-lote-footer{gap:10px}
  .cob-lote-footer .btn{min-height:42px}

  /* Plantão: no celular a faixa de status é a linha de trabalho do líder. O chip
     ocupa a linha inteira quando as ações não cabem ao lado, e cada botão fica do
     tamanho do dedo — "Confirmar" continua sendo o último e o único preenchido. */
  .plt-card{padding:12px}
  .plt-status{gap:6px}
  /* Cada pixel aqui é largura que falta para o chip e as três ações caberem na
     mesma linha num telefone — ver o bloco de 389px no fim do arquivo. */
  .plt-status>.pill{padding:2px 8px;gap:4px;font-size:11.5px}
  .plt-acts{gap:2px;flex:1 1 auto;min-width:0}
  .plt-act{min-height:42px;padding:8px 9px;gap:5px}
  .plt-act svg{width:14px;height:14px}
  .plt-act.confirmar{padding:9px 12px}
  .plt-nota{margin-left:0;flex-basis:100%}

  /* Agenda: no celular a barra não cabe numa linha só — a data (com as setas)
     fica em cima e o seletor Dia/Mês desce ocupando a largura toda, virando um
     alvo de toque decente. */
  .ag-bar{flex-wrap:wrap}
  .ag-modes{flex:1 0 100%;display:flex}
  .ag-modes button{flex:1;min-height:38px}
  .cal{gap:4px}
  .cal .cell{min-height:52px;padding:5px}

  /* Card dentro de card custa ~56px de largura útil (dois paddings somados) — é
     o que espremia a faixa "Agendado · Falta · Troca · Confirmar" contra a borda
     do celular. A saída é inverter as cores em vez de empilhar molduras: o card
     da loja fica cinza e cada plantão é um bloco branco sobre ele, separado por
     um respiro. Mesma leitura do tablet, sem gastar padding lateral. */
  .ag-loja{background:var(--bg);overflow:hidden}
  .ag-postos{padding:0;gap:7px;background:transparent}
  .ag-plt{background:var(--surface);border:0;border-radius:0;padding:12px 10px 13px}
  .ag-plt:active{background:var(--line-2)}
  .ag-plt .plt-card-bottom{margin-top:9px;padding-top:9px}
  .ag-vazio{margin:0;border-radius:0;padding:15px 10px;background:var(--surface)}

  /* Troca vira um fluxo de tela cheia no celular. Só o miolo rola: cabeçalho e
     ações permanecem acessíveis, e a lista não cria uma segunda rolagem. */
  .sheet.swap-flow-sheet{
    width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    padding:env(safe-area-inset-top) 0 0;animation:fadeUp .18s ease both;
  }
  .swap-flow-header{min-height:58px;padding:7px 14px 7px 8px}
  .swap-flow-stage{gap:14px;padding:16px 14px 20px}
  .swap-flow-context{padding:11px}
  .swap-list{max-height:none;overflow:visible}
  .swap-candidate{min-height:58px;padding:8px 10px}
  .swap-candidate small{white-space:normal}
  .swap-flow-footer{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .swap-flow-footer .btn{flex:1;min-width:0;min-height:46px}
  .swap-flow-stage .swap-reason textarea{min-height:132px}
}

/* Abaixo de 390px (iPhone SE, Androids estreitos) o chip e as três ações não
   cabem lado a lado por mais que se aperte — nenhum ajuste de padding resolve
   sem encolher o alvo de toque. Em vez de deixar a linha quebrar espremida
   contra a direita, a quebra passa a ser deliberada: chip em cima, os três
   botões embaixo ocupando a linha inteira. */
@media(max-width:389px){
  .plt-acts{flex:1 0 100%;justify-content:stretch;gap:4px}
  .plt-acts .plt-act{flex:1;padding:8px 4px}
  /* Confirmar continua sendo a ação principal: fica maior que as outras duas. */
  .plt-acts .plt-act.confirmar{flex:1.4;padding:9px 4px}
}