/* =========================================================================
   PRC Tour — o ERP no celular
   =========================================================================

   POR QUE ESTE ARQUIVO EXISTE

   Medindo as 19 telas num iPhone, oito delas rolavam para o lado: a de
   orçamento sobrava 537 pixels fora da tela, a de pesquisa de tarifas 385,
   recibos 324. Rolar para o lado num formulário é o tipo de defeito que não
   aparece em nenhum teste e faz a pessoa desistir de usar o sistema na rua —
   que é justamente onde uma agente de viagens está quando o cliente pergunta.

   As causas eram três, e só três:

     1. os menus do topo não quebravam linha, então empurravam a página
     2. as grades de formulário (.g2, .g3, .g4) mantinham 2, 3 e 4 colunas
        num espaço que não cabe nem uma e meia
     3. as tabelas são largas por natureza — data, valor, situação, botões —
        e uma tabela larga estica a página inteira

   As três se resolvem com regras de largura, sem tocar em nenhuma tela. É
   por isso que a correção mora num arquivo só, carregado por todas elas: a
   próxima tela que nascer já vem consertada.

   Nada aqui vale acima de 760px de largura. No computador, tudo continua
   exatamente como estava.
   ========================================================================= */

@media (max-width: 760px){

  /* ---- 1. cabeçalho e menu ------------------------------------------- */
  .topo{ flex-wrap: wrap; gap: .45rem .9rem; padding: .7rem .9rem; }
  .topo h1{ font-size: 1.02rem; }
  .topo nav{ margin-left: 0; width: 100%; flex-wrap: wrap;
             gap: .35rem .85rem; font-size: .82rem; }

  /* ---- 2. respiro ----------------------------------------------------- */
  /* Uma coluna de grade, por padrão, nunca fica menor que o conteúdo dela:
     basta uma tabela larga lá dentro para a coluna inteira crescer e levar a
     página junto. minmax(0,1fr) diz "pode ficar menor que o conteúdo" — e aí
     quem rola é a tabela, não a tela. O mesmo vale para min-width:0 nos
     filhos, que é o equivalente para caixas flex. */
  .area{ padding: .85rem .75rem; grid-template-columns: minmax(0, 1fr) !important; }
  .area > *, .cx, .rolar, .page, .col{ min-width: 0; }
  .cx{ padding: .95rem .85rem; margin-bottom: .85rem; }
  .cx h2{ margin-bottom: .8rem; }

  /* ---- 3. formulários em uma coluna ----------------------------------- */
  /* O !important é o único do arquivo, e é preciso: as grades estão
     declaradas dentro do <style> de cada página, que vem depois deste
     arquivo no HTML e ganharia por ordem. */
  .g2, .g3, .g4, .g5, .g6{ grid-template-columns: 1fr !important; }

  /* cartões de indicador: dois por linha em vez de um gigante embaixo do outro */
  .cartoes{ grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
  .kpi{ padding: .75rem .8rem; }
  .kpi dd{ font-size: 1.25rem; }

  /* ---- 4. tabelas rolam sozinhas, sem esticar a página ---------------- */
  /* display:block transforma a tabela numa caixa com rolagem própria. A
     página para de rolar para o lado; a tabela, sim, rola — que é o certo,
     porque ela é larga de verdade. */
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
         white-space: nowrap; max-width: 100%; }
  table th, table td{ white-space: nowrap; }
  /* a coluna de observação pode quebrar: é texto, não número */
  table td.nota, table td.obs{ white-space: normal; min-width: 12rem; }

  /* ---- 5. filtros ----------------------------------------------------- */
  .filtros{ gap: .5rem; }
  .filtros input[type="search"], .filtros input[type="text"]{ flex: 1 1 100%; min-width: 0; }
  .filtros select{ flex: 1 1 8rem; min-width: 0; }

  /* ---- 6. dedo, não mouse --------------------------------------------- */
  /* 16px nos campos é o número que impede o iPhone de dar zoom sozinho
     quando a pessoa toca num campo — e o zoom, depois, não volta. */
  input, select, textarea{ font-size: 16px; }
  button, .mini, .bt button{ min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; }
  /* botões dentro de linha de tabela continuam compactos: ali o alvo é a linha */
  table button{ min-height: 32px; }

  /* ---- 7. a barrinha de estado sai da frente do polegar --------------- */
  #prcBarra{ right: 8px; bottom: 8px; font-size: .68rem; padding: .35rem .6rem; }

  /* ---- 8. imagens e vídeos não estouram ------------------------------- */
  img, iframe, video{ max-width: 100%; height: auto; }
}

/* =========================================================================
   A tela principal (index.html) tem layout próprio: menu lateral fixo e uma
   barra de topo. O menu já virava gaveta no celular; o que faltava era isto.
   ========================================================================= */
@media (max-width: 768px){

  /* Um item de flex não encolhe abaixo do conteúdo dele a menos que a gente
     mande. Sem esta linha, a barra de topo — que não quebrava — esticava a
     página inteira para 522px numa tela de 390. */
  .main-wrapper{ min-width: 0; }

  .topbar{ flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
  .topbar-right{ flex-wrap: wrap; gap: 8px; }
  .main-content{ padding: 14px; min-width: 0; }
  .page{ min-width: 0; }

  .stats-grid{ grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .stat-value{ font-size: 1.35rem; }

  /* As duas colunas do painel (gráfico + lista) viram uma. O !important é
     porque essas grades estão escritas no atributo style="" de cada bloco,
     e estilo no atributo ganha de folha de estilo por regra da linguagem. */
  .colunas{ grid-template-columns: 1fr !important; gap: 12px !important; }

  /* as janelas de cadastro cabem na tela em vez de forçarem a página */
  .modal-box{ max-width: calc(100vw - 20px); }
  .toast-wrap{ left: 10px; right: 10px; width: auto; }

  .selo-alerta{ margin-left: 8px; }
}

/* =========================================================================
   Impressão: o que vale no papel é o conteúdo. Menu, filtros e botões saem.
   (As telas que já tinham regra própria de impressão continuam mandando.)
   ========================================================================= */
@media print{
  .topo nav, .sidebar, .topbar, #prcBarra, .filtros{ display: none !important; }
  .main-wrapper{ margin-left: 0 !important; }
  table{ display: table; white-space: normal; }
}

/* Campos de gestão (comissão, percentual de repasse): o vendedor não vê.
   É ocultação de tela; o banco continua entregando o registro inteiro. */
html[data-papel="vendedor"] .so-gestao,
html[data-papel="vendedor"] #itens td:nth-child(5),
html[data-papel="vendedor"] table:has(#itens) th:nth-child(5){ display: none !important; }