/* ═══════════════════════════════════════════════════════════════════════════
   REFINO DO APARELHO — a onda que veio depois de o dono usar no Android dele

   28/08: "tá bem legal! Porém tá meio alto os botões."

   Ele está certo, e a culpa é da rodada anterior. Para consertar 33 alvos de
   toque menores que 40px eu apliquei `min-height: 2.75rem` em três seletores —
   e um deles era o CHIP de filtro. Um chip com 12px de fonte esticado para 44px
   de altura não vira um alvo confortável: vira uma pílula gorda. Medido:

     chip de filtro .......... 44px de altura para 12px de texto
     item do menu ............ 45px (min-height 44 + padding 12/12)
     item da barra de baixo .. 52px
     barra do topo ........... 60px

   ── A REGRA QUE ESTE ARQUIVO SEGUE ────────────────────────────────────────

   ÁREA DE TOQUE NÃO É TAMANHO VISUAL. As duas plataformas pedem 44-48px de
   ÁREA tocável; nenhuma pede que o desenho tenha essa altura. A forma certa é
   deixar o elemento com a altura que o desenho quer e ESTENDER a área com um
   pseudo-elemento invisível — o dedo ganha a folga, o olho não vê inchaço.

   Entra depois de 26_aparelho_de_mao.css, e desfaz de propósito o que aquele
   arquivo exagerou.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1099px) {
  /* ── 1. O CHIP VOLTA AO TAMANHO DE CHIP ────────────────────────────────
     32px de altura visual, 44px de área tocável. O `::after` cobre a folga
     acima e abaixo sem deslocar nada: ele é absoluto dentro do chip, que já
     é `position: relative` por causa do foco. */
  .barra-filtros__conteudo .chip {
    min-height: 2rem;
    position: relative;
  }

  .barra-filtros__conteudo .chip::after {
    content: "";
    position: absolute;
    inset: -6px 0;
    /* Sem fundo e sem borda: isto existe só para o dedo. */
  }

  /* ⚠️ NA GAVETA VERTICAL O SANGRAMENTO VIRA DEFEITO (R1).
     O `inset: -6px` acima existe para a FITA horizontal, onde os chips só têm
     vizinhos à esquerda e à direita e a folga sobra em cima e embaixo. Na
     coluna os vizinhos estão justamente em cima e embaixo, com 2px de gap: os
     6px de cada lado se cruzam, e um toque perto da borda liga o filtro
     ERRADO — o pior defeito de toque, porque parece que o app "não obedece".
     Aqui a linha já tem 44px de altura de verdade, então não precisa da
     muleta. */
  .barra-filtros__gaveta-conteudo--coluna .chip {
    min-height: 2.75rem;
  }
  .barra-filtros__gaveta-conteudo--coluna .chip::after {
    content: none;
  }

  /* A barra de filtros inteira encolhe junto — ela é o segundo item da tela,
     e cada ponto que ela devolve é um registro a mais visível na lista. */
  .barra-filtros {
    padding-block: var(--esp-2);
    gap: var(--esp-2);
  }

  /* ── 2. O ITEM DO MENU: 44px, e só 44px ────────────────────────────────
     `min-height: 2.75rem` MAIS `padding-block: var(--esp-3)` somavam altura
     em cima do mínimo. O mínimo já garante o alvo; o padding sobrava. */
  .menu__link {
    min-height: 2.75rem;
    padding-block: var(--esp-2);
  }

  /* ── 3. O CABEÇALHO DA PÁGINA FALA MAIS BAIXO ──────────────────────────
     No computador o título de 22px separa a tela do cromo. No aparelho ele
     divide 390 pontos de largura com o resto e come altura de conteúdo —
     e o nome da tela já está aceso na barra de baixo. */
  .cabecalho-pagina__titulo,
  .cabecalho-pagina h1,
  .conteudo__interno > h1 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .cabecalho-pagina { gap: var(--esp-2); margin-bottom: var(--esp-4); }
}

/* ── 4. A BARRA DO TOPO, DENTRO DO APLICATIVO ────────────────────────────
   60 pontos para seis controles, dos quais três repetem caminhos que a barra
   de baixo e a gaveta já oferecem. O tema e a ajuda continuam existindo — no
   menu do usuário e no menu de apoio, que é onde se procura configuração.
   O que fica no topo é o que só existe ali: menu, busca, avisos e a conta. */
/* A ALTURA VEM DO TOKEN, e o token não anda sozinho.
   `.barra-topo` usa `height: var(--alt-barra-topo)` (04_layout.css:159), e o
   MESMO valor alimenta a linha do grid da aplicação, a altura da barra lateral
   e o `--alt-cromo` de que dependem a tela-mestre (a altura fechada das quatro
   áreas) e a coluna fixa das listas. Mexer só na barra deixaria os três
   cálculos apontando para uma altura que não existe mais — e o sintoma seria
   uma faixa vazia no fim de toda tela, do tamanho exato do que eu tirei.
   Por isso os dois tokens descem juntos, e só dentro do aplicativo. */
.corpo-aplicacao--com-barra-app {
  --alt-barra-topo: 52px;
  /* `--alt-cromo` NÃO entra aqui: ele já deriva de `--alt-barra-topo`
     (10_grid_base.css:36) e, com faixa de aviso no ar, vira `topo + faixa`.
     Fixá-lo em 52 apagaria a faixa da conta e devolveria uma tela cortada
     justamente para o gabinete que está em teste grátis. */
}

.corpo-aplicacao--com-barra-app .barra-topo {
  padding-inline: var(--esp-4);
}

.corpo-aplicacao--com-barra-app .barra-topo [data-controller="tema"],
.corpo-aplicacao--com-barra-app .barra-topo .barra-topo__usuario-nome {
  display: none;
}

/* ── 5. A BARRA DE BAIXO, MEDIO PONTO MAIS BAIXA ─────────────────────────
   52 → 50 de item, ícone de 22 → 21 e rótulo de 11 → 10.5. Parece pouco e
   não é: somado ao topo, devolve 12 pontos de conteúdo em toda tela, e o
   conjunto para de parecer uma faixa e passa a parecer uma barra. */
.barra-app__item { min-height: 3.125rem; padding: 5px 2px 3px; gap: 2px; }
.barra-app__icone svg { width: 21px; height: 21px; }
.barra-app__rotulo { font-size: 10.5px; letter-spacing: .01em; }
.barra-app__mais { width: 3rem; height: 3rem; bottom: calc(100% + 12px); }
.barra-app__mais svg { width: 22px; height: 22px; }
.barra-app__acoes { bottom: calc(100% + 4.75rem); }

/* ── 6. O TOQUE RESPONDE ANTES DO SERVIDOR ───────────────────────────────
   Numa rede de rua, a resposta demora — e sem sinal nenhum a pessoa toca de
   novo. Isto não é enfeite: é o que impede o toque duplo. */
@media (max-width: 1099px) {
  .lista-navegacao__item:active,
  .menu__link:active,
  .chip:active,
  .botao:active {
    transform: scale(.985);
    transition: transform .06s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lista-navegacao__item:active,
  .menu__link:active,
  .chip:active,
  .botao:active { transform: none; }
}

/* ── 7. O DEDO NÃO ARRASTA A PÁGINA INTEIRA ──────────────────────────────
   Sem isto, rolar até o fim de uma lista continua puxando a página e mostra a
   faixa cinza do navegador por baixo — o gesto mais "site" que existe. */
.corpo-aplicacao--com-barra-app { overscroll-behavior-y: contain; }