/* ============================================================================
   Camada de celular e tablet — item 18
   ----------------------------------------------------------------------------
   Arquivo separado de propósito: carrega DEPOIS do app.css (ganha no empate de
   especificidade) e mantém o desktop intocado. As regras aqui só valem abaixo
   de 900px; acima disso este arquivo não pinta um pixel.

   O problema maior que isto resolve: até 920px o app.css escondia a barra
   lateral (`.side{display:none}`) sem pôr nada no lugar — no telefone o sistema
   ficava sem navegação nenhuma. Agora ela vira gaveta, aberta pelo ☰ que já
   existia no topo.
   ========================================================================== */

/* ------------------------------------------------------------------ TABLET */
@media (max-width: 900px) {
  /* a lateral sai do fluxo e passa a deslizar por cima do conteúdo */
  .app { grid-template-columns: 1fr; }

  .side {
    display: flex;                     /* desfaz o display:none do app.css */
    position: fixed;
    top: 0;                            /* a barra de cima não existe mais */
    bottom: 0;
    left: 0;
    height: 100%;
    width: 68px;
    z-index: 40;
    transform: translateX(-102%);      /* fechada por padrão */
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(16, 24, 40, .18);
  }
  html.menu-aberto .side { transform: translateX(0); }

  /* O botão de abrir a gaveta. No monitor quem recolhe/expande é a própria
     logo — mas ela mora DENTRO da barra, e com a gaveta fechada não haveria
     como abri-la. Some assim que a gaveta abre (a logo, já visível ali dentro,
     assume o papel de fechar) para não ficar um botão flutuando por cima. */
  .menu-abrir {
    display: inline-flex;
    position: absolute;
    top: 18px;
    left: 19px;
    z-index: 41;
  }
  html.menu-aberto .menu-abrir { visibility: hidden; transition: visibility 0s .22s; }

  /* fundo escuro: clicar nele fecha a gaveta */
  .menu-fundo {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 39;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  html.menu-aberto .menu-fundo { opacity: 1; pointer-events: auto; }

  /* o conteúdo começa no topo da tela: reserva a faixa do botão flutuante */
  .main { padding: 12px 14px 16px; }
  .main:not(:has(h1)) { padding-top: 56px; }
  .main h1 { margin-left: 46px; min-height: 38px; display: flex; align-items: center; }
  .ph { flex-wrap: wrap; gap: 10px; }
  .ph h1 { font-size: 20px; }

  /* Calendário do mês: achado na verificação do item 18, não só no celular —
     `.cal{grid-template-columns:repeat(7,1fr)}` do app.css não trava o mínimo
     de cada coluna em 0. Um evento comprido (`.ev`, nowrap+ellipsis) tem
     min-content maior que 1/7 da largura em qualquer tela de tablet (~768px):
     o grid ignora o `1fr` e dá a cada coluna o espaço que o texto pede, sem
     rolagem (o `.cal{overflow:hidden}` do app.css só corta) — sábado e
     domingo saem da tela em vez de aparecer apertados. `minmax(0,1fr)`
     resolve sem mudar nada onde já cabia: no desktop, onde as 7 colunas já
     tinham espaço de sobra, o resultado visual é idêntico. */
  .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------- CELULAR */
@media (max-width: 600px) {
  /* ---- respiro geral ---- */
  .main { padding: 12px 10px 12px; }
  .main:not(:has(h1)) { padding-top: 52px; }
  .card { border-radius: 10px; }
  .ph { flex-direction: column; align-items: stretch; }
  /* `div + div` e não `:last-child`: em tela sem botões o único filho é o bloco
     de texto, e virar flex esticava o h1 para fora da largura da janela */
  .ph > div + div { display: flex; flex-wrap: wrap; gap: 8px; }
  .ph > div { min-width: 0; }
  .ph h1, .ph p { overflow-wrap: anywhere; }
  .grid4, .grid2 { grid-template-columns: 1fr !important; }

  /* ---- abas viram faixa rolável, sem quebrar em várias linhas ---- */
  .abas {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .abas::-webkit-scrollbar { display: none; }
  .abas a { white-space: nowrap; flex: 0 0 auto; }

  /* ---- tabela: rola na horizontal dentro do card, a página não ---- */
  .card > table,
  .card > .bd > table { display: block; overflow-x: auto; white-space: nowrap; }

  /* ---- chat do CRM: uma coluna de cada vez ----
     Em três colunas num telefone nada é legível. Com uma conversa aberta,
     mostramos só ela; o ✕ do cabeçalho volta para a lista. */
  .chat-tela.com-aberta { grid-template-columns: 1fr; }
  .chat-tela.com-aberta .chat-lista,
  .chat-tela.com-aberta .chat-painel { display: none; }
  /* ...menos o painel do SAC. Lá ele não é um resumo ao lado da conversa: é o
     único lugar onde se vincula cliente/processo, se mexe nos participantes e
     se renomeia o grupo (o botão "Detalhes" que dava esse acesso saiu). Sem
     esta exceção o SAC ficaria sem como editar o caso no telefone.
     0,4,0 vence a regra acima (0,3,0) sem depender da ordem do arquivo.
     O `order:4`, que manda o painel para DEPOIS da conversa, ficava aqui e
     agora mora no app.css, no bloco de 900px: o empilhamento do SAC começa lá,
     não aqui, e duplicar a regra deixava 601-900px empilhado com o formulário
     de vínculo na frente das mensagens. */
  .chat-tela.com-aberta.sac .chat-painel { display: flex; }
  .chat-tela .chat-conversa { min-height: 60vh; }
  /* o lápis de renomear o grupo só aparece no :hover do rótulo — no toque não
     existe hover, e o botão ficaria invisível para sempre. */
  .chat-conversa-nome-txt .editar { opacity: 1; }
  /* No cabeçalho da conversa, avatar + nome dividem a linha com três botões de
     ação (não lida, Compromisso, sino) que não encolhem — no telefone isso
     espremia o nome a poucos pixels (o `nowrap` dele cortava quase tudo). Dá
     um piso pro bloco do nome e deixa os botões quebrarem pra linha de baixo. */
  .chat-conversa-topo { flex-wrap: wrap; }
  .chat-conversa-topo > div { min-width: 180px !important; }
  /* Composer: no telefone, "Bate-papo com Fulano de Tal:" + o ícone de atalho
     + o campo + a tag "WhatsApp · Conversa Nº X" não cabem numa linha de 375px
     — a tag saía cortada na borda da tela e o campo ficava com espaço para
     poucos caracteres. Prefixo e tag são contexto (já aparecem no topo da
     conversa); o campo de escrever é o que precisa da largura. */
  .chat-form-prefixo, .chat-form-tag { display: none; }

  /* ---- Kanban: rola na horizontal com encaixe, uma coluna por vez ----
     A coluna fixa em 250px deixa duas metades visíveis num telefone; com o
     encaixe, cada arrasto para o lado para numa coluna inteira. */
  .kanban {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .kanban .kb-col {
    min-width: 82vw;
    width: 82vw;
    scroll-snap-align: start;
  }

  /* A legenda estática lista TODOS os tipos (22 hoje) — cinco linhas de rolagem
     antes de chegar no calendário. As pílulas de cima já trazem cor e contagem,
     e ainda filtram; a legenda é o que sobra. */
  .legend { display: none; }

  /* ---- calendário do mês: cabe em 7 colunas se o evento virar bolinha ---- */
  .cal .cell { min-height: 62px; padding: 4px 3px; }
  .cal .dn { font-size: 10px; }
  .cal .ev {
    font-size: 0;                       /* esconde o texto, mantém a cor */
    height: 6px;
    border-radius: 3px;
    padding: 0;
    margin-bottom: 2px;
  }
  /* 10px é o piso do sistema (régua de 02/09/2026); era 9,5px. O `font-size:0`
     do `.cal .ev` logo acima NÃO é tamanho de texto e não entra no piso: é o
     mecanismo que esconde o rótulo do evento para ele virar uma bolinha
     colorida — trocar por 10px devolveria o texto que essa regra existe para
     tirar. */
  .cal .dow { font-size: 10px; padding: 6px 0; }

  /* ---- grade de dia/semana: coluna de hora mais fina ---- */
  .tempo { grid-template-columns: 46px repeat(var(--cols), minmax(92px, 1fr)); }
  .tempo-hora { font-size: 10px; padding: 6px 4px; }

  /* ---- formulários e filtros: uma coluna ---- */
  .form-linha { grid-template-columns: 1fr !important; }
  .form-linha { display: block; }
  /* aqui a linha vira `display:block` e perde o `gap` que a zerava no app.css,
     então a margem volta — na escala, não nos 10px de antes (04/09/2026) */
  .form-linha .fld { margin-bottom: var(--s-3); }

  /* ---- modal ocupa a tela ---- */
  .modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .ov { align-items: flex-end; }

  /* ---- etiqueta longa quebra em vez de ser cortada ----
     `.tag` é nowrap no desktop, onde sempre cabe. No telefone, um aviso como
     "ANTHROPIC_API_KEY não configurada — sem resumo nem minuta" dava 404px numa
     tela de 390 e o texto sumia na borda, sem barra de rolagem para alcançá-lo. */
  .tag { white-space: normal; overflow-wrap: anywhere; }
  .mono { overflow-wrap: anywhere; }

  /* ---- alvo de toque: 44px é o mínimo confortável ---- */
  .btn, .pilula, .chip { min-height: 38px; display: inline-flex; align-items: center; }
  .btn.sm { min-height: 32px; }

  /* ---- barra de salvar não pode cobrir o conteúdo ---- */
  .barra-salvar { padding: 10px 12px; }
  form { padding-bottom: 8px; }
}

/* Telefone pequeno (iPhone SE e afins) */
@media (max-width: 400px) {
  .main { padding: 12px 8px 10px; }
  .main:not(:has(h1)) { padding-top: 52px; }
  .cal .cell { min-height: 54px; }
}