/* ═══════════════════════════════════════════════════════════════════════
   MYDESK — A FAIXA DO TABLET
   ═══════════════════════════════════════════════════════════════════════
   Carregado DEPOIS do main.css e do mobile.css.

   POR QUE ESTE ARQUIVO EXISTE

   Não havia faixa de tablet. Havia um PENHASCO em 861px: até 860 entrava o
   `mobile.css` inteiro (layout de celular, navegação inferior, notas em
   coluna); a partir de 861 não entrava nada, e o tablet recebia o desktop
   cru. Nenhum dos dois serve:

     · iPad retrato (768 / 820 / 834) ficava com lista de uma coluna numa
       tela de 8 a 11 polegadas, metade do espaço vazia;
     · iPad paisagem (1024 / 1180) ficava com o desktop completo — botões de
       28px de altura e controles que só aparecem no `hover`, que o dedo não
       tem.

   MEDIDO EM 929px, com a camada mobile desligada: 4 das 5 notas fora da
   tela, `scrollLeft` travado em 0 — inalcançáveis, não apenas cortadas — e a
   barra de ferramentas quebrada em duas fileiras cobrindo o topo das que
   sobravam.

   A DECISÃO: o tablet fica com o QUADRO LIVRE, não com a lista do celular.
   As notas guardam a posição que a pessoa deu a elas, e é isso que o produto
   é. O que muda é o alcance do dedo — e o quadro passa a rolar nos dois
   eixos, que é o que faltava para a posição livre caber numa tela menor.

   O DESKTOP NÃO É TOCADO. Toda regra aqui vive dentro de
   `(min-width:769px) and (max-width:1180px)`, ou dentro de `(hover:none)`,
   que nenhum computador com mouse satisfaz.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1. A FAIXA
   ═══════════════════════════════════════════════════════════════════════
   769 embaixo porque o `mobile.css` solta em 768 — e 768 e nao outro numero
   porque e o mesmo do `MQ_CARTOES_EM_COLUNA` (app.js) e o mesmo do bloco de
   768 do main.css, que poe o quadro em coluna. Os tres tem de bater: quando
   nao batem, sobra uma faixa com nota posicionada por coordenada, quadro em
   coluna e arrastar desligado — tela travada. 1180 em cima porque é a maior largura de tablet da
   lista (iPad Pro 12.9" em retrato) — de 1181 para cima é desktop, e o
   desktop continua como estava.

   Celular DEITADO não entra aqui, e por isso a condição de altura: um iPhone
   deitado tem 844px de largura e cairia nesta faixa pela largura, mas tem
   390px de altura. Quem manda nesse caso é a altura, e o `mobile.css` já
   trata dele.

   `any-pointer: coarse` É A TRAVA QUE PROTEGE O DESKTOP, e não um detalhe.
   Sem ela, um navegador de computador com a janela arrastada para 1100px
   entraria aqui e receberia botões de 44px, notas mais largas e um quadro
   que rola — ou seja, o desktop mudaria. Largura não distingue "tablet" de
   "janela estreita"; a presença de uma entrada de toque distingue.

   `any-pointer` e não `pointer`: um iPad com teclado e trackpad passa a
   anunciar `pointer: fine`, e o iPad continua sendo um tablet. A pergunta
   certa é "existe toque neste aparelho?", não "o dedo é o mouse principal
   agora?". Um computador com tela sensível também entra, e deve mesmo. */
@media (min-width: 769px) and (max-width: 1180px)
   and (min-height: 461px) and (any-pointer: coarse) {

  :root {
    --tb-top-h:  56px;   /* barra superior, sem a área segura */
    --tb-toque:  44px;   /* alvo mínimo de toque */
    --tb-safe-t: env(safe-area-inset-top, 0px);
    --tb-safe-b: env(safe-area-inset-bottom, 0px);
    --tb-safe-l: env(safe-area-inset-left, 0px);
    --tb-safe-r: env(safe-area-inset-right, 0px);
  }

  /* ═══ 2. A BARRA NÃO QUEBRA MAIS EM FILEIRAS ════════════════════════
     Ela quebrava em duas (70px medidos) e as notas ficavam por baixo. A
     regra de `max-width:1280px` do main.css ainda ENCOLHE os botões conforme
     a tela estreita — o que é razoável para o mouse e é o contrário do que o
     dedo precisa. Aqui a barra volta a ter altura de toque e, quando os
     botões não couberem, ela ROLA na horizontal em vez de empilhar.

     Rolar é melhor que empilhar porque a altura da barra é espaço roubado do
     quadro, e porque uma barra que muda de altura conforme o conteúdo faz as
     notas dançarem na vertical a cada mudança. */
  #toolbar {
    flex-wrap: nowrap !important;
    min-height: calc(var(--tb-top-h) + var(--tb-safe-t)) !important;
    height: auto !important;
    padding: calc(4px + var(--tb-safe-t)) calc(10px + var(--tb-safe-r))
             4px calc(10px + var(--tb-safe-l)) !important;
    gap: 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  #toolbar::-webkit-scrollbar { display: none; }

  /* O que não pode encolher, não encolhe. Sem isto o `flex` espreme o logo e
     o seletor de workspace até virarem ilegíveis antes de a barra rolar. */
  #toolbar > * { flex-shrink: 0; }

  /* ALVO DE TOQUE. 44px é o mínimo da Apple e o piso do WCAG 2.5.8 para
     "AAA"; abaixo disso o erro de toque vira regra. A fonte volta ao tamanho
     do desktop porque .66rem numa tela a 40cm do olho é pequeno demais. */
  #toolbar .t-btn,
  #toolbar .t-pill {
    min-height: var(--tb-toque);
    padding: 8px 12px !important;
    font-size: .74rem !important;
  }
  #toolbar .t-btn svg { width: 13px; height: 13px; }

  /* ═══ 3. O QUADRO PASSA A ROLAR ═════════════════════════════════════
     ESTE É O CONSERTO PRINCIPAL.

     `#board` é `overflow:hidden` e as notas são `position:absolute` com
     coordenadas de desktop. Num monitor de 1920 isso nunca aparece; em 929
     esconde quatro notas de cinco, e `hidden` significa que NÃO HÁ COMO
     CHEGAR NELAS — nem rolando, nem arrastando. A nota existe, está gravada,
     e some da vida da pessoa.

     `auto` faz os filhos absolutos voltarem a contar para a área rolável.
     `touch-action: pan-x pan-y` devolve o arrasto de dois eixos ao dedo sem
     desligar o gesto de pinça do navegador. */
  #board {
    overflow: auto !important;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding: 16px;
  }

  /* Uma folga à direita e embaixo para a última nota não encostar na borda
     da área rolável — sem isso ela fica colada e parece cortada mesmo depois
     de rolar até o fim. */
  #board::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    pointer-events: none;
  }

  /* ═══ 4. A NOTA CONTINUA ONDE A PESSOA A DEIXOU ═════════════════════
     Nada de `position:relative` aqui — isso é o que o celular faz, e no
     tablet jogaria fora justamente a organização que a pessoa construiu. O
     que muda é o alcance: o cartão fica um pouco mais largo, porque 240px
     num tablet é estreito para o dedo e para a leitura. */
  .note {
    width: 268px;
    touch-action: pan-x pan-y;
  }

  /* ═══ 4b. ARRASTAR E REDIMENSIONAR NO DEDO ══════════════════════════
     `touch-action: none` NOS DOIS ALVOS, e não é detalhe: sem isso o
     navegador olha o gesto, conclui que é rolagem do quadro (que acabou de
     ganhar `overflow:auto` logo acima), emite `pointercancel` e o arrasto
     morre no primeiro milímetro. O quadro rolar e a pasta arrastar são dois
     gestos disputando o mesmo dedo — quem desempata é esta linha.

     `none` só aqui dentro, e não na nota inteira: fora destes dois alvos o
     dedo tem de continuar rolando o quadro. */
  .stack-header { touch-action: none; }

  /* A ALÇA PRECISA EXISTIR PARA O DEDO. Ela é `opacity:0` e só aparece no
     `:hover` da nota — num tablet, portanto, nunca. E 18px é mira de mouse:
     26px é o mínimo para o polegar acertar o canto sem pegar a borda. */
  .n-resize {
    touch-action: none;
    opacity: .5;
    width: 26px;
    height: 26px;
    padding: 6px;
  }
  .note.resizing .n-resize { opacity: 1; }
  .n-resize svg { width: 12px; height: 12px; }

  /* ═══ 5. PAINÉIS FLUTUANTES ═════════════════════════════════════════
     Eles são posicionados por coordenada e dimensionados para o desktop.
     Aqui não viram tela cheia (isso é do celular, e desperdiçaria o tablet);
     viram painéis que CABEM: presos à direita, com teto de altura e rolagem
     própria. */
  .sp-panel, #events-panel, #wp-panel, #pw-panel, #ws-panel, #shortcuts-panel {
    max-height: calc(100dvh - var(--tb-top-h) - var(--tb-safe-t) - 24px) !important;
    max-width: min(400px, calc(100vw - 24px)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ═══ 6. MODAIS ═════════════════════════════════════════════════════
     Um modal mais alto que a tela deixa o botão de confirmar fora do alcance
     — o formulário abre, a pessoa preenche e não tem como enviar. Teto de
     altura e rolagem por dentro resolvem sem mexer no desktop. */
  .modal {
    max-height: calc(100dvh - 32px - var(--tb-safe-t) - var(--tb-safe-b)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ═══ 7. TABELAS ════════════════════════════════════════════════════
     A estratégia aqui é ROLAGEM CONTROLADA, e não virar cartão: nesta
     largura a tabela ainda é legível, e cartão jogaria fora a comparação
     entre linhas, que é a razão de a tabela existir. O que faltava era o
     contêiner assumir a rolagem em vez de a página inteira empurrar. */
  .cli-tabela-wrap, .crm-table-wrap, .rhv-tabela-wrap,
  .tb-tabela-wrap, .pa-tabela-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* ═══ 8. FORMULÁRIOS ════════════════════════════════════════════════
     16px no campo é o que impede o Safari do iOS de dar zoom sozinho ao
     focar — o zoom desalinha a tela inteira e a pessoa perde o contexto. */
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    font-size: max(16px, 1em);
    min-height: var(--tb-toque);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. O QUE VALE PARA QUALQUER TELA SEM MOUSE
   ═══════════════════════════════════════════════════════════════════════
   `(hover: none)` é a pergunta certa e não depende de largura: nenhum
   computador com mouse a satisfaz, então nada aqui alcança o desktop.

   O PROBLEMA: 21 controles do app nascem com `opacity:0` e só aparecem no
   `:hover` de um ancestral. No dedo eles são invisíveis e, pior, ocupam
   espaço clicável sem dar sinal de que existem. Entre eles estão as ações de
   linha do CRM, o excluir e o menu de item de checklist, e o "mais" do
   cartão de amigo — coisas que a pessoa PRECISA para trabalhar, não enfeites.

   A saída não é revelar tudo com opacidade 1 (a tela vira um festival de
   ícones): é deixá-los legíveis o bastante para se saber que estão ali. */
@media (hover: none) {
  .crm-row-actions,
  .cli-acomp-item .cli-acoes-btn,
  .cli-obs-acoes,
  .cli-tempo-x,
  .n-cl-del,
  .n-cl-opt,
  .pr-remover,
  .call-tile-expand,
  .gc-foto-troca,
  .sg-card-mais {
    opacity: .65 !important;
  }

  /* `.n-resize` NÃO entra nesta lista, e a razão mudou. A primeira versão
     deste arquivo dizia que redimensionar não era gesto de dedo e deixava a
     alça escondida. Estava errado pela metade: o problema não era o gesto,
     era o TAMANHO — 18px de alça com 9px de ícone. Aumentada para 26px e
     visível, o gesto funciona; ela é tratada na faixa do tablet, junto com o
     `touch-action` que impede o quadro de roubar o arrasto.

     No CELULAR ela continua sem sentido e sem aparecer: lá a nota ocupa 100%
     da largura e a altura segue o conteúdo — não há o que redimensionar. */

  /* Alvo de toque mínimo nos controles pequenos que ficaram visíveis. Um
     ícone de 14px visível e intocável é pior que um escondido: ele promete. */
  .n-cl-del, .n-cl-opt, .cli-tempo-x, .sg-card-mais {
    min-width: 32px;
    min-height: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   10. ÁREA SEGURA — O NOTCH E A ILHA DINÂMICA
   ═══════════════════════════════════════════════════════════════════════
   O `index.html` não tinha `viewport-fit=cover`, e sem ele TODO
   `env(safe-area-inset-*)` resolve para zero no iOS. Havia 7 usos espalhados
   pelo CSS — todos inertes. O `cover` entrou junto com este arquivo, o que
   liga aquele código e este.

   Aqui fica só o que faltava: o rodapé fixo do quadro e os avisos, que
   ficavam por baixo da barra de gestos do iPhone. */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (hover: none) {
    #chat-notif-stack {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .toast-wrap, #toast-stack {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}