.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}
  .topbar-mes{font-size:0;gap:0}
  .topbar-mes select{font-size:13px;padding:6px 6px}
  .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. */
  .bottom-nav{
    display:grid;grid-template-columns:repeat(5,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 .esc-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}
}