/* =====================================================================
   responsivo.css (v17.32) — correções da auditoria no celular (375–414px), tela por tela
   Carregado depois do mobile.css. Achados e correções:
   • Menu: botões repetidos (Instalar app / sininho) dentro do menu aberto → escondidos
   • Cabeçalho das telas (Produção, Financeiro…): título espremido ao lado de 10 botões → título em cima, botões em grade
   • Tabelas soltas (Financeiro, Usuários, Fontes…) saíam da tela → rolam dentro do cartão (js/responsivo.js)
   • Abas que não cabem (Configurações, Pedidos Shopee/bipe) → rolam para o lado
   • Papelaria: painel de 380px fixo e seleção saindo da tela → ocupa a largura
   • Valores grandes nos cartões (R$ 47.497,86) quebrando em 2 linhas → fonte menor
   • Etiquetas dos produtos do Mercado Livre saindo da tela → quebram linha
   ===================================================================== */
@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }
  img { max-width: 100%; }

  /* menu aberto: sem botões repetidos (já estão na barra de cima) */
  .navbar-collapse #navInstalarApp, .navbar-collapse button[title="Notificações"] { display: none !important; }

  /* cabeçalho de tela: título em cima, ações embaixo */
  .page > .d-flex.justify-content-between:first-child,
  .page > .d-flex.align-items-center.justify-content-between {
    flex-direction: column; align-items: stretch !important; gap: 10px;
  }
  .page > .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; gap: 8px !important; }
  #page-producao > .d-flex:first-child > .d-flex > .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  #page-producao > .d-flex:first-child > .d-flex > .badge { flex: 1 1 100%; padding: 8px; }
  #page-producao > .d-flex:first-child > .d-flex > .btn[onclick^="shopeeConectar"] { flex: 0 0 48px; }

  /* tabelas que o js/responsivo.js envolveu */
  .va-rola-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .va-rola-x > table { margin-bottom: 0; }

  /* abas/pílulas que não cabem → rolam para o lado */
  .page .nav-tabs, .page .nav-pills, .spp-abas, #sppOverlay .spp-abas {
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page .nav-tabs::-webkit-scrollbar, .page .nav-pills::-webkit-scrollbar, .spp-abas::-webkit-scrollbar { display: none; }
  .page .nav-tabs .nav-item, .page .nav-pills .nav-item, .page .nav-tabs > .nav-link, .page .nav-pills > .nav-link { flex: 0 0 auto; white-space: nowrap; }
  .spp-aba, #sppOverlay .spp-aba { flex: 0 0 auto; padding: 10px 10px !important; white-space: nowrap; }

  /* Papelaria */
  #page-papelaria .pf-wrap { flex-direction: column !important; }
  #page-papelaria .pf-left, #page-papelaria .pf-right { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; }
  #page-papelaria select, #page-papelaria .pf-select { max-width: 100%; width: 100%; min-width: 0; }

  /* números grandes em cartões de meia largura */
  .col-6 .fs-4, .col-6 .fs-3, .col-6 .fs-2 { font-size: 1.05rem !important; }

  /* Produtos Mercado Livre: etiquetas quebram linha */
  .mlp-tag { max-width: 100%; white-space: normal !important; }

  .dropdown-menu { max-width: calc(100vw - 16px); }
}