/* Camada de celular: ajustes que so valem em tela estreita.

   Pedido de 08/10/2026: "deixar responsivo para celular, e bom para
   computador tambem". O jeito de nao mexer no computador e por construcao:
   TODA regra daqui mora dentro do @media abaixo (ate 767px de largura). Num
   notebook ou monitor nenhuma linha vale — a tela continua pixel a pixel.

   Por que um arquivo e nao classes no template: o Tailwind do painel e
   compilado e commitado (static/css/app.*.css) e o deploy nao recompila;
   classe nova num template simplesmente nao pinta. Ver
   tests/test_celular_ci.py, que exige este <link> em toda base. */

@media screen and (max-width: 767px) {

    /* O respiro da pagina (p-6, 24px) fica como esta de proposito: 13 telas
       e o crm-dashboard.css/finance-cazura.css usam margem negativa de
       -1.5rem para ir de borda a borda; mexer nele desalinha todas. */

    /* A coluna do conteudo (irma do menu lateral) e um flex-1: sem
       min-width 0 ela cresce do tamanho do item mais largo la dentro e a
       pagina inteira passa da tela. Presa a largura da tela, quem nao cabe
       passa a rolar sozinho (abaixo). */
    :has(> #conteudo-principal),
    :has(> #conteudo-chat),
    #conteudo-principal,
    #conteudo-chat {
        min-width: 0;
        max-width: 100vw;
    }

    /* Faixa que nao cabe: o static/js/celular.js marca a mais externa.
       Tabela ganha uma caixa em volta (.cel-rolagem); outro bloco rola ele
       mesmo (.cel-rola). Rola para o lado com o dedo em vez de empurrar a
       pagina inteira (e a coluna de acoes, sempre a ultima, sumir). */
    .cel-rolagem,
    .cel-rola {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Fileira de botoes que nao cabe: quebra a linha (celular.js so poe a
       classe quando isso resolve; senao a fileira rola, .cel-rola). */
    .cel-quebra {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Barra do topo: 7 icones + menu + unidade nao cabiam em 390px com o
       respiro de computador (px-6 e gap-3). */
    :has(> #conteudo-principal) > header > .h-16 {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 100vw;
    }
    :has(> #conteudo-principal) > header > .h-16 > div {
        gap: 2px;
        min-width: 0;
    }
    :has(> #conteudo-principal) > header > .h-16 > div > * {
        flex-shrink: 0;
    }

    /* iPhone da zoom sozinho ao tocar num campo com fonte menor que 16px e
       nao volta — a pessoa fica com a tela ampliada e cortada. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* Janela (modal) com largura fixa maior que a tela: cabe na tela. */
    .fixed > div[class*="w-["],
    .fixed > div[style*="width"] {
        max-width: calc(100vw - 24px);
    }

    /* Botoes flutuantes do canto (WhatsApp, chat interno, acessibilidade):
       no computador ficam num canto vazio; no celular tampam o botao de
       salvar e a ultima coluna. Menores e mais colados no canto. */
    #wa-float-btn,
    #ci-float-btn,
    .wa-float-btn,
    .ci-float-btn {
        transform: scale(0.8);
        transform-origin: bottom right;
    }
}

/* Ate o lg do Tailwind (1023px) o menu do Portal do Cliente deveria flutuar
   por cima da tela; o <aside> tem `relative` e `fixed` na mesma classe e o
   relative vence no CSS compilado — escondido, ele seguia ocupando 256px e
   espremia o conteudo num terco da tela. No computador (>= 1024) o lg:static
   manda e nada daqui vale. */
@media screen and (max-width: 1023px) {
    aside.sidebar-shell {
        position: fixed;
    }

    /* Altura "da tela inteira": o h-screen do Tailwind e 100vh, e no Chrome
       do celular 100vh conta tambem a faixa das barras do navegador. Nas
       bases que travam a pagina (h-screen + overflow-hidden: Atendimento,
       RH, Marketing, Comando) o rodape caia ATRAS da barra e nao dava para
       rolar ate ele — no Atendimento era a barra de digitar a mensagem
       (GSO EXAMES, 08/10/2026: "nao tem como digitar"). 100dvh e a altura
       que sobra de verdade; navegador antigo fica no 100vh da linha de cima. */
    .h-screen {
        height: 100vh;
        height: 100dvh;
    }
}