/* Ajustes de celular/tablet — Be Party (aplicado em todas as telas) */
/* Trava de zoom por CSS SÓ NO iOS (que ignora o user-scalable=no da meta).
   No Chrome do Android a meta viewport já bloqueia o zoom sozinha — e o
   touch-action:pan-y no body TRAVAVA a rolagem inteira por lá. O @supports
   abaixo só é verdadeiro em navegador WebKit da Apple. */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    html, body {
      overscroll-behavior: none;
      touch-action: pan-y;
    }
    /* o que precisa rolar de lado continua podendo */
    table, .tabs, .filtros, pre, .scrollx, nav.mainnav { touch-action: pan-x pan-y; }
  }
}

@media (pointer: coarse) {
  html, body {
    -webkit-text-size-adjust: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ------------------------------------------------------------------
   TABLET: menu por TOQUE em QUALQUER largura.
   O bloco de baixo só valia até 820px. Tablet em pé (iPad Pro, 1024px e
   acima) ficava de fora: a "ponte" invisível do dropdown continuava
   engolindo o toque e o menu dependia de :hover, que no dedo não existe.
   Aqui a regra é pelo TIPO DE PONTEIRO, não pelo tamanho da tela.
   ------------------------------------------------------------------ */
@media (pointer: coarse) {
  /* nada invisível pode capturar o toque */
  .navdrop::after { display: none !important; pointer-events: none !important; }
  /* o dropdown de hover fica desligado: quem abre é o painel do menu-mobile.js */
  .navdrop:hover .navmenu,
  .navdrop:focus-within .navmenu,
  .navdrop:active .navmenu { display: none !important; }
  /* área de toque de verdade no título do menu */
  .navdrop > a { display: inline-block; padding: 8px 4px; }
  header { position: relative; z-index: 100; }
  .wrap { position: relative; z-index: 1; }
}

@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* CORREÇÃO CRÍTICA: a "ponte" invisível do menu bloqueava os toques em modo retrato */
  .navdrop::after { pointer-events: none !important; display: none !important; }
  header { position: relative; z-index: 100; }
  .wrap { position: relative; z-index: 1; }
  /* nada invisível pode capturar toque */
  .navmenu { pointer-events: auto; }

  /* Cabeçalho e menu viram empilhados e roláveis */
  header { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px; }
  header img { height: 30px !important; }
  nav.mainnav { width: 100%; gap: 10px !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
                padding-bottom: 4px; flex-wrap: nowrap !important; }
  nav.mainnav > a, .navdrop > a { white-space: nowrap; font-size: 14px !important; padding: 6px 0; }
  /* no toque o menu abre como painel (menu-mobile.js); o dropdown fica desligado
     para não abrir os dois ao mesmo tempo nem piscar */
  .navdrop:hover .navmenu, .navdrop:focus-within .navmenu, .navdrop:active .navmenu { display: none !important; }

  /* Conteúdo em uma coluna */
  .wrap { margin: 12px auto !important; padding: 0 10px !important; grid-template-columns: 1fr !important;
          gap: 12px !important; max-width: 100% !important; }
  .card { padding: 14px !important; border-radius: 12px !important; }

  /* Campos maiores (evita zoom automático no iPhone: fonte >= 16px) */
  input, select, textarea, button { font-size: 16px !important; }
  input[type=text], input[type=number], input[type=date], input[type=time], input[type=password],
  select, textarea { width: 100% !important; padding: 12px !important; }
  label { font-size: 12px !important; }
  button { min-height: 44px; }              /* área de toque confortável */
  .acao, .baixar, .tab, .q { min-height: 40px; }

  /* Tabelas: rolagem horizontal em vez de espremer */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
          white-space: nowrap; font-size: 13px !important; }
  th, td { padding: 10px 8px !important; }

  /* Grades de formulário viram 1 coluna */
  .formrow { grid-template-columns: 1fr !important; }
  .filtros, .baixabar { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .filtros > div, .baixabar > div { width: 100%; }

  /* KPIs e cards em 2 colunas */
  .cards, .kcards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi, .kc { padding: 12px !important; }
  .kpi .val, .kc .v, .kpi .v { font-size: 18px !important; }

  /* Abas roláveis */
  .tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab { white-space: nowrap; }

  /* CRM: colunas viram lista vertical */
  .board, .kanban { display: block !important; }
  .coluna, .fase { width: 100% !important; margin-bottom: 12px; }

  h1 { font-size: 20px !important; }
  h2 { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .cards, .kcards { grid-template-columns: 1fr !important; }
}


/* ===== Telas grandes (computador): mesma largura de conteúdo em TODAS as
   páginas. Cada tela tinha um max-width diferente (1000 a 1500px) e o conteúdo
   "pulava" de largura ao navegar — era isso que parecia descentralizado. */
@media (min-width: 1100px) {
  .wrap { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
}