/* ── 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;
  }
}

/* ── ACRESCIMO Mariana (Mobile/IoT), 03/10/2026 — item #138/#831: QUEBRA DE
   TEXTO. Medido antes: `grep -c "overflow-wrap|word-break"` em static/css/*
   e templates/base.html devolvia 0 — nenhuma regra de quebra na casa.
   Escopo estreito de proposito: so celula de tabela e texto longo marcado.
   `break-word` (nao `anywhere`) nao quebra palavra que caberia na linha.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

  .table td,
  .table th,
  .texto-quebra {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ── ACRESCIMO Mariana (Mobile/IoT), 08/10/2026 — FASE 6, CONSERTO DAS TELAS DE
   CLIENTE. Nada acima foi alterado; nenhum template foi editado.

   O QUE EU ERREI NA MEDICAO DE HOJE DE MANHA, e e por isso que este bloco e
   pequeno: eu reportei "7 telas com alvo abaixo de 44px" lendo SO o `<style>`
   de cada tela. As de `btn-sm` (garcom, tracking, status_motoboy, cadastro) ja
   estavam cobertas pelo bloco de 01/09 acima, porque essas telas carregam este
   arquivo. O que o `.btn`/`.btn-sm` NAO alcanca e classe propria da tela — e
   e exatamente onde estavam os alvos menores:

       templates/totem/totem.html:19             .cat-btn   39px -> 44px
       templates/totem/totem.html:35             .qty-btn   36px -> 44px
       templates/delivery/cardapio_publico.html:16  .qty-btn 32px -> 44px

   `min-height`/`min-width` e nao `height`: `min-*` prende a altura mesmo com o
   `height:32px` que esta no `<style>` da propria tela (propriedades diferentes,
   o minimo vence), entao o conserto chega sem editar a tela de ninguem.

   ESCOPO: as duas classes existem em duas telas e so nelas (medido em 08/10:
   `.cat-btn` so em `totem.html`; `.qty-btn` em `totem.html` e
   `delivery/cardapio_publico.html`). O `.qty-btn` e redondo (`border-radius:50%`)
   e continua redondo: 44x44.

   O QUE ISTO NAO FAZ: nao muda cor, fonte, borda, ordem nem largura de nada —
   nao e redesenho. Nao mede pixel em aparelho: nao ha navegador aqui. Afirma que
   a REGRA chega no HTML servido, nao que o dedo parou de errar. Portao:
   `apps/core/tests_mariana_catraca_alvo_de_toque_20261008.py`.
   ────────────────────────────────────────────────────────────────────────── */

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

  /* Categoria no totem e +/- do carrinho: alvo cheio. Sao os dois que o
     cliente de fora aperta sozinho, sem ninguem para ajudar. */
  .cat-btn,
  .qty-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── ACRESCIMO Mariana (Mobile/IoT), 08/10/2026 (2a rodada do dia) — "fazer tudo"
   (ordem do Rick). Nada acima foi alterado. NENHUM template editado.

   Fecha os alvos curtos das telas que JA CARREGAM este arquivo, que e tudo o
   que eu posso fechar sem abrir arquivo de outro dono:

       templates/mesa/garcom.html:25         .tab-btn         36px -> 44px
       templates/mesa/garcom.html:55         .mesa-livre-btn  40px -> 44px
       templates/mesa/garcom.html:67         .btn-enviar      37px -> 44px
       templates/mesa/qrcode.html:23         .btn-print       37px -> 44px
       templates/publico/nicho_em_breve.html:86  .seg-chip    30px -> 44px
       templates/cardapio/publico.html:26-28 .nav-cats a      40px -> 44px

   GARCOM SEM RISCO PARA O PEDRO: o template dele nao foi tocado, nem um byte.
   `tests_pedro_286_287_garcom_na_tela_20261008.py` testa QUEM VE o botao por
   papel (`:44`, `:54`, `:70`) — logica de view, nao CSS. Alterar folha de estilo
   nao alcanca aquele teste.

   ESCOPO MEDIDO HOJE, classe por classe: `.tab-btn`, `.mesa-livre-btn`,
   `.btn-print`, `.seg-chip` e `.nav-cats a` existem em UM template cada.
   `.btn-enviar` existe em 3: `garcom.html` (botao), `senha_recuperar.html`
   (submit — 44px e o certo la tambem) e `comanda.html`, onde e `id=`, nao
   classe, e portanto nao e alcancado por este seletor.

   O QUE EU **NAO** PUS AQUI, de proposito: `.botao` (27 templates) e `.btn-sm`
   fora de tabela ja resolvido. `.botao` num seletor compartilhado mudaria 26
   telas de outros donos de uma vez; o unico caso que eu medi e
   `suporte/canal.html:35` (40px), que e do BRUNO e esta roteado a ele no
   diario, com a linha pronta.
   ────────────────────────────────────────────────────────────────────────── */

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

  /* Aba, cartao de mesa livre e enviar: a mao do garcom em pe no salao. */
  .tab-btn,
  .mesa-livre-btn,
  .btn-enviar {
    min-height: 44px;
  }

  /* Imprimir QR, chip de segmento e categoria do cardapio publico. */
  .btn-print,
  .seg-chip,
  .nav-cats a {
    min-height: 44px;
  }
}

/* ── ACRESCIMO Mariana (Mobile/IoT), 08/10/2026 — A METADE QUE E MINHA NAS 11
   TELAS PUBLICAS. Nada acima foi alterado; nenhum template editado.

   As 11 telas de venda (`landing` + 9 `nicho_*` + `escolher_plano`) tem o CTA em
   classe propria, abaixo de 44px, medido em 08/10:

       .btn-assinar     41px   em 11 telas (o botao de assinar)
       .btn-nav-login   30px   landing.html:93
       .btn-nav-cta     32px   landing.html:95
       .btn-nicho       38px   landing.html:167
       .btn-nicho-sec   38px   landing.html:169
       .btn-sec         42px   landing.html:120

   AS REGRAS FICAM AQUI, PRONTAS, MAS AINDA NAO ALCANCAM: essas 11 telas NAO
   carregam este arquivo. Falta UM `<link>` em cada, e as 11 sao do LUCAS/CAMILA
   (o Lucas commitou as 11 hoje as 10:37, migrando vendor para static). Eu nao
   edito tela de outro dono: a linha exata esta roteada a ele no diario de hoje.
   Quando o `<link>` entrar, 16 dos 17 achados que sobram fecham sem mais nada.

   ESCOPO MEDIDO: `.btn-assinar` existe nas 11 telas publicas e em nenhuma outra;
   as outras 5 classes existem so em `landing.html`.
   ────────────────────────────────────────────────────────────────────────── */

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

  /* CTA de venda: o alvo que decide se alguem assina pelo celular. */
  .btn-assinar,
  .btn-nav-login,
  .btn-nav-cta,
  .btn-nicho,
  .btn-nicho-sec,
  .btn-sec {
    min-height: 44px;
  }
}

/* ── ACRESCIMO Mariana (Mobile/IoT), 08/10/2026 (FILA 08d, T3) — MODAL QUE
   ESCONDE O BOTAO DE CONFIRMAR EM TELA BAIXA. Nada acima foi alterado;
   nenhum template editado.

   O QUE EU MEDI HOJE (nao e a lista que a fila diz que eu tinha: eu nunca
   publiquei lista de modal cortado, e esta e a primeira):
   - 18 telas usam `modal fade` do Bootstrap e NENHUMA usa `modal-dialog-scrollable`.
     Em 375px de ALTURA sobram ~190px para o corpo (margem 56 + cabecalho ~60 +
     rodape ~70). Com 4+ campos o rodape sai da area visivel. As piores, por
     numero de campos: `estoque/lista.html` 16 · `peixe/novo_lote.html` 9 ·
     `cardapio/cardapio.html` 8 · `financeiro/transacoes.html` 8 ·
     `fit/alunos_lista.html` 8.
   - `templates/totem/totem.html:41` `.modal-totem` e overlay `position:fixed`
     + `align-items:center` SEM `overflow`, e `:43` `.modal-box` nao tem
     `max-height`. Aqui o corte e PIOR que no Bootstrap: o que passa da tela
     fica inalcancavel, porque nada rola.

   O CONSERTO, em CSS, sem tocar nos 18 templates de outros donos: dar rolagem
   ao CORPO do modal em tela baixa — e o mesmo efeito de `modal-dialog-scrollable`,
   com o rodape (onde fica o Confirmar) sempre visivel.

   POR QUE `max-height: 480px` E NAO `max-width`: o que corta o rodape e ALTURA,
   nao largura. 375px de altura e telefone deitado; em pe (667px+) o modal cabe e
   esta regra nao entra. Fora de tela baixa, NADA muda.
   ────────────────────────────────────────────────────────────────────────── */

@media (pointer: coarse) and (max-height: 480px) {

  /* Corpo rola, rodape fica: o Confirmar nao sai mais da tela. */
  .modal-dialog {
    margin: 0.5rem auto;
  }
  .modal-body {
    max-height: 56vh;
    overflow-y: auto;
  }
}

@media (pointer: coarse) {

  /* Totem: o overlay e a caixa passam a rolar. Sem isto, o que passa da
     altura da tela e inalcancavel — nao ha barra de rolagem em nada. */
  .modal-totem {
    overflow-y: auto;
  }
  .modal-box {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ── ACRESCIMO Mariana (Mobile/IoT), 21/10/2026 (RODADA 7 — CONSERTAR) — OS KPIs
   NO CELULAR: #Q1517 (grade), #Q0542 (dinheiro quebrando/cortado) e #Q0543
   (rotulo em 2 linhas clipado). Nada acima foi alterado; NENHUM template nem
   folha de outro dono foi editado — tudo aqui, por especificidade.

   MEDIDO EM CHROMIUM DE VERDADE (375x812 e 320x568, viewport emulado), com o
   HTML que a propria view gera e o CSS de producao:
     largura util do valor .......... 122px a 375px · 94px a 320px
     `.kpi-value` servido hoje ...... 30,4px (1,9rem)
     maior fonte que faz `R$ 98.765,43` caber em UMA linha .... 18px (375px)
                                                               14px (320px)
     `.kpi-card` tem `overflow:hidden` (`kpi-cards-lg.css:19`) -> o que nao cabe
     NAO rola: e cortado. Era isto o "valor que mente" do #Q0542/#Q0543.
     alturas na MESMA linha ......... 151 vs 133px (375px) -> desalinhado
     overflowX a 320px com fonte 130% ... 71px, culpa de `span.badge` (nowrap do
     Bootstrap) que mede 219px e sai 71px para fora da tela.

   O CONSERTO, e por que cada numero:
   1) `height:100%` no cartao dentro da coluna: a coluna da `.row` ja e flex item
      e estica; o cartao passa a ocupar a altura da linha -> alturas iguais.
   2) fonte do valor `clamp(13px, 4.2vw, 1.15rem)`: 13,4px a 320 e 15,7px a 375
      (abaixo dos 14/18 medidos acima, com folga), e teto de 1,15rem para nao
      encolher onde ja cabia. **Sem `white-space:nowrap` de proposito**: com
      fonte de acessibilidade grande o certo e QUEBRAR em 2 linhas, nao cortar.
   3) `.badge` volta a poder quebrar abaixo de 576px: tira os 71px de rolagem
      horizontal. So quebra de linha — nao mexe em cor, tamanho nem espaco.

   O QUE ISTO NAO FAZ: nao mede em aparelho fisico (isso e o #Q1330, do Rick) e
   nao toca em `capivara.css`, em `kpi-cards-lg.css` nem em template nenhum.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  /* #Q1517: cartoes da mesma linha com a mesma altura. */
  .row > [class*="col-"] > .kpi-card {
    height: 100%;
  }

  /* #Q0542: o valor em dinheiro cabe sem ser cortado pelo overflow:hidden. */
  .kpi-card .kpi-value {
    font-size: clamp(13px, 4.2vw, 1.15rem);
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
  }

  /* #Q0543: rotulo de 2-3 linhas continua legivel dentro do cartao. */
  .kpi-card .kpi-label {
    overflow-wrap: break-word;
  }
}

@media (max-width: 575.98px) {

  /* #Q0543: etiqueta do Bootstrap e `white-space:nowrap`; em 320px com fonte
     grande ela empurra a pagina 71px para fora. Aqui ela pode quebrar. */
  .badge {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}