/* As regras que valem em toda a casa quando a tela é de telefone.
 *
 * Arquivo à parte, e carregado depois de `marca.css`, porque o que está aqui é
 * de uma natureza só: nada muda no computador. Quem for mexer no visual da
 * casa não precisa ler isto; quem for mexer no telefone não precisa procurar
 * em quinze arquivos.
 *
 * Medido em 04/09/2026, iPhone 13 (390px), varrendo as 122 telas: 80 delas
 * tinham alvo de toque abaixo de 32px. Não eram 80 defeitos diferentes — eram
 * dois, repetidos: o menu lateral e os botões pequenos.
 */

@media (max-width: 575.98px) {

    /* O MENU LATERAL
     *
     * 37px por item, e os itens colados um no outro. É o caminho de tudo nesta
     * intranet: quem erra o toque aqui vai para a tela errada, e voltar custa
     * dois toques numa rede que, em campo, é ruim.
     *
     * 44px é o mínimo que Apple e Google publicam, e é também o que a casa já
     * cobrava nos cartões de contrato. O `padding` é que faz a altura — altura
     * fixa cortaria o item de duas linhas ("Sinalização Vertical"), que é
     * justamente o mais comprido do menu.
     */
    .main-sidebar .nav-sidebar .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

    /* BOTÕES
     *
     * `btn-sm` existe para caber numa linha de tabela no monitor. No telefone
     * não há linha de tabela — há um dedo. Os "+" e "−" dos formulários de
     * anexo mediam 30px, "Cancelar" media 21px.
     *
     * `min-height` e não `height`: botão com rótulo de duas palavras precisa
     * poder crescer. E `inline-flex` para o texto ficar centrado quando a
     * altura cresce além do que a fonte pede.
     */
    .btn,
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* O botão que só tem ícone continua quadrado: 44 de altura pedindo 44 de
       largura, senão vira um retângulo estranho de 44×30. */
    .btn-icone-so,
    .btn.btn-icone-so { min-width: 44px; }

    /* A TRILHA DE VOLTA
     *
     * "Documentos > Administração" — 22px por item. É o caminho de volta um
     * nível, e num telefone voltar é das coisas que mais se faz. Padding em
     * cima e embaixo: a linha cresce um pouco, e é o que se paga por acertar
     * o toque na primeira tentativa. */
    .breadcrumb-item > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* O ZOOM DO MAPA
     *
     * `+` e `−` do Leaflet vêm com 30px, e aparecem em dezessete telas — toda
     * ficha e todo formulário que mostra o ponto no mapa. Dá para usar dois
     * dedos em vez deles, mas não com o telefone numa mão só, que é como se
     * olha um mapa na rua.
     *
     * Quadrado, e não só mais alto: controle de mapa fica num canto e cresce
     * nos dois sentidos ou fica torto. */
    /* `!important` aqui não é preguiça, e é a única vez neste arquivo: a folha
     * do Leaflet é carregada no `extra_head` de cada tela de mapa, ou seja
     * **depois** desta, e traz `.leaflet-touch .leaflet-bar a { width:30px }`
     * com a mesma especificidade. Sem o `!important`, quem ganha é quem veio
     * por último — e quem vem por último é a biblioteca. */
    .leaflet-touch .leaflet-bar a,
    .leaflet-control-zoom a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
    }

    /* Duas exceções, e as duas por medida.
     *
     * O botão dentro de um `input-group` (a lupa da busca) precisa casar com a
     * altura do campo ao lado; esticá-lo sozinho desalinha a linha inteira.
     * E o botão de fechar de um alerta é um "×" no canto, que não é alvo de
     * trabalho — esticá-lo empurra o texto do aviso para baixo. */
    .input-group .btn { min-height: 0; }
    .close, .btn-close { min-height: 0; }
}