/* --------------------------------------------------------------------------- Botões do painel: rótulo inteiro, sem espremer — no computador e no celular. .btn (app.css) e .botao (painel.css) não tinham nada que impedisse o encolhimento, e .botao/.botao--pequeno tinham ALTURA FIXA (42px/34px). Numa linha com outros elementos (título do card, outros botões) o navegador espremia o botão: o texto quebrava em duas ou três linhas ("Aplicar / todas", "Conversar / no / WhatsApp") e, com a altura fixa, vazava para fora do botão. Eram mais de 400 botões em dezenas de telas, então a correção é uma só, aqui, carregada por último no . Complementa js/botoes-mobile.js (só o ícone no celular quando o rótulo é longo e divide espaço com um título). --------------------------------------------------------------------------- */ /* 1. Botão com texto não encolhe. Só quebra o rótulo se ele for maior que o espaço inteiro disponível -- nunca por aperto. */ .authenticated :is(.btn,.botao,.crm-row-action,.crm-lead-card form button){flex-shrink:0;max-width:100%;text-align:center} .authenticated :is(.btn,.botao,.crm-row-action)>:is(svg,.app-icon,i,img){flex:0 0 auto} /* 2. Altura mínima no lugar da fixa: com duas linhas, o texto fica dentro. */ .authenticated .botao{height:auto;min-height:42px;padding-top:8px;padding-bottom:8px;line-height:1.25} .authenticated .botao.botao--pequeno{min-height:34px;padding-top:6px;padding-bottom:6px} .authenticated :is(.crm-row-action,.crm-lead-card form button){height:auto;min-height:32px} /* 3. Formulário que só envolve o botão (Excluir, Aplicar, Sincronizar...) era o que de fato encolhia numa linha de ações. */ .authenticated form:has(> :is(.btn,.botao)):not(:has(input:not([type="hidden"]),select,textarea)){flex-shrink:0;max-width:100%} /* 4. Linha sem espaço: o botão desce para a linha de baixo em vez de ser espremido. Vale para a linha de botões e para o cabeçalho que a contém (título + ações). Só tem efeito em contêiner flex -- inclusive os que usam style="display:flex" direto no HTML. */ .authenticated :where(div,header,footer,nav,section,form,p,li):has(> :is(.btn,.botao), > form > :is(.btn,.botao)){flex-wrap:wrap} .authenticated :where(div,header,section):has(> div > :is(.btn,.botao), > div > form > :is(.btn,.botao)){flex-wrap:wrap;row-gap:10px} /* O bloco de ações não encolhe abaixo do próprio conteúdo. */ .authenticated :where(div):has(> :is(.btn,.botao), > form > :is(.btn,.botao)){min-width:0} /* 5. Celular. */ @media(max-width:560px){ /* Botão ao lado de um título, com rótulo longo: só o ícone (marcado por js/botoes-mobile.js, que leva o nome para aria-label e title). */ .authenticated :is(.btn,.botao).botao--so-icone-celular{font-size:0;gap:0;min-width:42px;padding-left:12px;padding-right:12px;justify-content:center} .authenticated :is(.btn,.botao).botao--so-icone-celular>:is(svg,.app-icon){width:18px!important;height:18px!important} .authenticated :is(.btn,.botao).botao--so-icone-celular>i{font-size:18px} /* Formulário que só tem o botão, sozinho na linha: ocupa a largura toda -- toque maior e rótulo nunca cortado. */ .authenticated form:has(> :is(.btn,.botao):not(.botao--so-icone-celular)):not(:has(input:not([type="hidden"]),select,textarea)){flex:1 1 auto} .authenticated form:has(> :is(.btn,.botao):not(.botao--so-icone-celular)):not(:has(input:not([type="hidden"]),select,textarea))>:is(.btn,.botao){width:100%;justify-content:center} }