/* ── ALVO DE TOQUE NO CELULAR — Mariana (Mobile/IoT), 01/09/2026 ─────────────
   Secao 10 da varredura, item "botoes" (L266). ACRESCIMO: arquivo novo, um
   <link> por template. Nenhuma regra de ninguem foi removida.

   O DEFEITO, medido no template (nao em aparelho — nao ha aparelho aqui):
   316 ocorrencias de `.btn-sm` em `templates/` (grep em 01/09). O `.btn-sm`
   do Bootstrap 5.3 e `padding:.25rem .5rem; font-size:.875rem` → ~31px de
   altura. WCAG 2.5.5 pede 44x44; WCAG 2.5.8 (AA, minimo) pede 24x24 — o 31px
   passa no minimo e falha no alvo. O caixa com a mao molhada e o garcom em pe
   no salao erram o botao do lado; o Felipe mediu o mesmo nos links da sidebar
   (`felipe_acessibilidade_20260824.css:60`) e subiu para 44px la. Aqui e o
   resto da tela.

   POR QUE `pointer: coarse` E NAO SO `max-width`:
   a regua e o DEDO, nao a largura. Um notebook com tela pequena tem mouse e
   nao precisa de botao gordo; um tablet de 1024px tem dedo e precisa. A media
   query casa com o dispositivo que toca. `max-width:1024px` entra junto para
   nao inflar o desktop touch (raro) — as duas condicoes, nao uma.

   POR QUE NAO 44px EM TUDO:
   `.btn-sm` dentro de `<td>` — e onde estao 200+ das 316 — a 44px dobra a
   altura de toda linha de tabela e a lista de 30 pedidos vira 3 telas de
   rolagem. Escolha: 44px para botao SOLTO (acao da tela), 36px para botao
   DENTRO DE TABELA (acao da linha). 36 > 24 do AA e o dedo medio (~9mm ≈ 34px)
   ja cabe. E escolha, nao medicao: esta escrita para o Felipe me derrubar.

   O QUE ISTO NAO FAZ: nao mexe em cor, fonte, borda nem largura; nao toca em
   `.btn-lg`; nao toca em `mesa/garcom.html` (`.btn-enviar` ja tem 10px de
   padding e .9rem → ~38px, e a tela e mobile-first por desenho).
   ────────────────────────────────────────────────────────────────────────── */

@media (pointer: coarse) and (max-width: 1024px) {

  /* Botao solto: alvo cheio. `min-height` e nao `padding` para nao mudar o
     alinhamento do icone/texto que ja esta la. */
  .btn,
  .page-link,
  .nav-tabs .nav-link,
  .list-group-item-action,
  .dropdown-item {
    min-height: 44px;
  }

  .btn {
    /* Um `<a class="btn">` e inline-block e nao centra verticalmente sozinho
       quando cresce; com flex o texto fica no meio do alvo novo. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Botao pequeno solto: alvo cheio tambem. */
  .btn-sm {
    min-height: 44px;
    min-width: 44px;
  }

  /* Botao pequeno dentro de tabela: 36px — o compromisso explicado acima. */
  .table .btn-sm,
  .table-responsive .btn-sm {
    min-height: 36px;
    min-width: 36px;
  }

  /* Botao que fecha modal/alerta: o Bootstrap desenha 1em x 1em (~16px)
     com padding de .25em ≈ 24px. E o botao que o cliente mais erra. */
  .btn-close {
    min-width: 44px;
    min-height: 44px;
    background-position: center;
  }

  /* Caixinhas e radios de 16px: 22px e o tamanho em que o dedo acerta sem
     zoom; o rotulo ao lado ja e clicavel pelo `for=`. */
  .form-check-input {
    width: 22px;
    height: 22px;
    margin-top: 0;
  }

  /* Campo de formulario: 44px de altura para o dedo pousar. A fonte de 16px
     (anti-zoom do iOS) esta em `mobile_campos_16px.css`; aqui e so altura. */
  .form-control,
  .form-select {
    min-height: 44px;
  }
  .form-control-sm,
  .form-select-sm {
    min-height: 40px;
  }
}

/* ── ACRESCIMO 04/09/2026 — Mariana (Mobile/IoT) — BLOCO 16-b do Carlos ───────
   SEPARACAO DO BOTAO DESTRUTIVO NA TELA DO MOTOBOY.

   NADA ACIMA FOI ALTERADO. Regra novissima, classe propria, um unico ponto de
   uso hoje (`templates/delivery/status_motoboy.html`).

   O QUE EU MEDI (04/09, no template, nao em aparelho):
   `status_motoboy.html:121` e `<div class="d-grid gap-2">`. O `gap-2` do
   Bootstrap 5.3 e `$spacer * .5` = **0.5rem = 8px**. Dentro dele, coladas:

       :128  <button value="entregue"  class="btn btn-success btn-lg">   IRREVERSIVEL
       :131  <button value="cancelado" class="btn btn-outline-danger">   DESTRUTIVO

   Sao os dois botoes que o motoboy toca **na rua, com uma mao, andando**. O meu
   proprio CSS de 01/09 subiu os dois para `min-height: 44px` e **nao mexeu na
   distancia**: o alvo cresceu, a separacao ficou em 8px. Alvo maior e mais perto
   e MAIS chance de errar o vizinho, nao menos. O meu conserto de 01/09 piorou
   este par especifico, e o registro fica aqui.

   O CUSTO DE ERRAR NAO E SIMETRICO — e por isso que isto nao e frescura:
   `cancelado` poe `ativo=False`, devolve o pedido ao balde, gera OUTRO despacho
   e dispara re-despacho no grupo do WhatsApp (`apps/delivery/views.py`, ramo
   `novo_status == 'cancelado'`). O motoboy que quis dizer "entreguei" e errou
   8px perde a corrida que acabou de fazer, na frente do cliente.

   POR QUE 24px E NAO OUTRO NUMERO — e ESCOLHA, nao medicao:
   as guias de toque pedem ~8px entre alvos comuns; 8px ja esta la e nao chegou.
   24px poe meia altura de dedo (~9mm ≈ 34px) entre os dois. Nao empurro para o
   rodape nem escondo: o botao continua visivel e na mesma ordem. Esta escrito
   assim para o Felipe (UX) me derrubar com numero.

   O QUE ISTO **NAO** FAZ (Regra 7 — dizer o que nao provei):
   nao mede pixel em aparelho (nao ha navegador neste ambiente: playwright 403,
   apt sem root, npm quebrado — 3 rodadas seguidas). Isto afirma que a REGRA
   chega no HTML da rota real, nao que o polegar parou de errar. Quem fecha em
   aparelho e o RICK, em 2 minutos — o pedido esta no relatorio de hoje.

   O QUE EU DECIDI **NAO** FAZER, e o porque esta escrito de proposito:
   nao acrescentei guarda de duplo envio em JavaScript. Motivo: (a) medi hoje
   que o servidor JA e idempotente no toque duplo sequencial, com teste
   (`apps/delivery/tests_mariana_motoboy_rua_20260904.py`); (b) desabilitar um
   `<button name="status" value="...">` no `submit` remove o par nome/valor do
   POST — armadilha classica — e eu **nao tenho navegador para provar que nao
   quebrei o envio**. Codigo que eu nao consigo ver rodar nao entra no caminho
   do dinheiro do motoboy. Fica nomeado para quem tiver navegador.
   ────────────────────────────────────────────────────────────────────────── */

@media (pointer: coarse) and (max-width: 1024px) {

  /* Acao destrutiva colada numa acao irreversivel: afasta o alvo do vizinho.
     Some no desktop de mouse de proposito — la o ponteiro e preciso. */
  .acao-destrutiva-separada {
    margin-top: 24px;
  }
}