/* ========================================================================
ARCHÉ · A CAMADA DO CELULAR — set/2026, pedido do dono: "é possível
implementar um modo para smartphones? para o ARCHÉ todo".
NÃO É UM SEGUNDO ARCHÉ. Um "modo celular" com telas próprias seria
duas versões de cada página, e duas versões da mesma coisa acabam
diferentes — é a lição que o sistema já pagou caro para aprender (a
guia de senha em dois lugares, o card de assinatura no IC e no banco,
a justificativa do conceito numa chave só). O que existe aqui é UMA
camada, num arquivo só, que entra por último na cascata e conserta no
telefone o que a medição encontrou. A tela é a mesma; o que muda é o
tamanho do que o dedo toca e do que o olho lê.
O QUE A MEDIÇÃO ENCONTROU (Playwright, 390×844, 16 telas do portal):
(1) NENHUMA página rola na horizontal. A estrutura já responde — a
barra lateral vira faixa, as grades caem para uma coluna, a barra
do topo rola. Isso não precisava ser feito e não foi tocado.
(2) O CAMPO DE FORMULÁRIO TEM 14px EM TODO O PORTAL (uma declaração
igual em 11 arquivos), e o Safari do iPhone DÁ ZOOM na página ao
tocar num campo de menos de 16px — e não desfaz o zoom ao sair
dele. É o defeito mais visível de todos: acontece na inscrição do
evento, no relatório, na ata, no perfil, em tudo. Depois do
primeiro toque a pessoa fica com a página ampliada, rolando de
lado para achar o botão de salvar. É por isso que o sistema
"parece" não ter sido feito para o telefone.
(3) ALVOS DE TOQUE PEQUENOS: de 10 a 48 por tela abaixo de 32px, e os
piores são os da BARRA DO TOPO — 24 a 28px de altura, em todas as
páginas. A própria regra de celular da barra os encolhe (ela troca
o recheio por `5px 9px` para caber os 11 atalhos). Cabiam; não se
acertava.
(4) O RÓTULO DO CAMPO tem 11px, em versalete e com espaçamento — no
computador é discreto, no telefone é o que some primeiro.
Onde ela entra: `assets/arche-nav.js` injeta o ` flex com rótulo longo,
a caixa de "cobrança ativa" chegava a 11px e o rádio de modalidade a 4px:
justamente os interruptores de publicar, cobrar e aceitar submissões. */
input[type="checkbox"],
input[type="radio"] { flex: 0 0 auto; min-width: 22px; min-height: 22px; }
/* --------------------------------------------------------------------
2. ALVO DE TOQUE
44px é a recomendação da Apple e ~48dp a do Google. O piso vale para o
que a pessoa toca o tempo todo e é NOMEADO, não posto em `button` de
qualquer lugar: o portal tem ✕ de chip e ✎ de linha que crescidos a 44
desmanchariam a linha em que vivem. `min-height` só CRESCE a caixa:
nenhuma regra aqui encolhe ou reposiciona o que já estava certo.
-------------------------------------------------------------------- */
.bt,
.card-cta,
.side-item,
.topo-nav a { min-height: 44px; }
/* Os três que a segunda passada da medição encontrou, e que só se acham
nomeando: a **☆ dos favoritos** da página inicial, com 19×25px — é o
controle que fixa o setor no alto do portal, e no telefone ele era um
alvo de mouse ao lado do nome do setor, com o risco de errar e abrir o
setor em vez de fixá-lo; o **"ver todas →"** dos painéis, com 14px de
altura — o menor alvo do sistema inteiro —, escrito igual em cinco
setores; e o **"Ver como"**, com 29px, que é do componente
compartilhado e por isso aparece em todos. */
.pin { min-width: 44px; min-height: 44px; }
.verTodas, .vc-bt { min-height: 40px; }
/* E os NÚMEROS DA PAGINAÇÃO, com 27 a 30 × 25px — nove por tela nas
listas longas, encostados uns nos outros: é o pior desenho possível
para o dedo, porque errar o alvo não é não fazer nada, é ir para a
página errada. São do componente compartilhado (`arche-paginacao.js`),
então isto vale em todas as dez listas que o usam. */
.ap-barra button { min-width: 40px; min-height: 40px; }
.ap-barra .ap-tam select { min-height: 40px; }
/* A terceira passada (varredura das telas, set/2026): os que ainda estavam
abaixo de 32px e são tocados de verdade — o "‹ ver todos os eventos" do
EV (148×22, em todas as guias), os "cancelar"/"excluir" das reservas (14px,
e são atos destrutivos), o seletor Docente/Coordenação da monitoria, o
"Não sou eu" da ficha de inscrição, o "Entrar com a minha conta" do
avaliador, o × e as abas do "Ver como…" e a barra do editor rico (são
dezenas de botões por prova aleatorizada). */
.side-sel .todos, .lk, .modo-bt, #i-limpar, .ava-bt, .vc-aba { min-height: 40px; }
.vc-x { min-width: 40px; min-height: 40px; }
.aed-bar button { min-width: 36px; min-height: 36px; }
/* E a barra COMPACTA (a de cada alternativa das provas) fica numa linha só,
que rola: com os botões a 36px ela quebrava em duas, e uma prova tem
dezenas de alternativas — era uma linha de ferramentas a mais em cada uma
(varredura de layout, set/2026). A janela de símbolos mora no , então
a rolagem não a recorta. */
.aed.compacto .aed-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.aed.compacto .aed-bar > * { flex: none; }
/* Botões que já são flex continuam centrados; os que não são precisam
disto, senão o texto encosta no alto da caixa que acabou de crescer. */
.bt, .card-cta, .topo-nav a {
display: inline-flex; align-items: center; justify-content: center;
}
.side-item { display: flex; align-items: center; }
/* O seletor é o controle mais tocado dos setores (curso, ciclo, órgão,
situação) e o mais fácil de errar por um fio de altura. */
select { min-height: 44px; }
/* O SELETOR NÃO PODE PASSAR DA TELA. Vários deles são escritos com
`width:auto` na própria linha (a agenda dos Espaços, os filtros dos
agendamentos), e `auto` num seletor é a largura da MAIOR opção — com o
corpo maior a lista de meses ("fevereiro de 2026"…) inchou de 330 para
490px e fez a página rolar de lado. Foi a única regressão que a
medição pegou, e o teto é a correção certa: a caixa cabe na tela e o
nome longo se corta, como já acontece no computador em tela estreita.
O teto é contra a TELA, não contra a caixa que o contém: essas linhas
de filtro são flex dentro de flex, e uma caixa que se dimensiona pelo
próprio conteúdo não serve de referência para o filho — `max-width:
100%` ali seria 100% de um valor que o próprio filho está inflando.
`min-width:0` é o par disso dentro de linha flex, onde um filho sem ele
se recusa a encolher abaixo do próprio conteúdo. */
select, input, textarea {
max-width: min(100%, calc(100vw - 48px));
min-width: 0;
}
/* E A LINHA QUE O CONTÉM TAMBÉM PRECISA PODER ENCOLHER. Capar o seletor
não bastou: as barras de filtro são `display:flex;flex-wrap:wrap`
escritas na própria linha, e um item flex nasce com `min-width:auto` —
ele se RECUSA a ficar menor que o próprio conteúdo. No calendário dos
Espaços a linha ficava com 490px dentro de um card de 312. `min-width:0`
não faz nada em caixa comum (ali `auto` já vale 0): ele só age em item
de flex ou de grade, que é exatamente onde o defeito mora. É a mesma
regra que cada SPA já escreve para as suas grades (`.kpis>*`,
`.grid2>*`), aqui valendo para as linhas escritas à mão dentro dos
cards, que são as que ninguém lembrou de cobrir.
E ELA NÃO PODE VENCER O PISO QUE A TELA ESCREVEU (varredura de layout,
set/2026): `.card *` tem o peso de uma classe e entra por último, então
apagava todo `min-width` de classe dentro de card — justamente o piso que
as linhas `flex-wrap` usam para mandar o selo e o botão para a linha de
baixo. No banco de assinaturas o nome saía uma palavra por linha, com o
selo "digitalizada pela gestão" deitado por cima do curso e o e-mail
cortado atrás do "Enviar por ela"; nos pedidos de fusão de /usuarios o
texto virava uma coluna de 150px ao lado do botão. Com `:where()` a regra
não pesa nada: continua valendo onde a tela não disse nada (o
`min-width:auto` do item flex, que é o defeito que ela existe para
consertar) e cede onde a tela escreveu o piso de propósito. */
:where(.card, .topbar) * { min-width: 0; }
/* --------------------------------------------------------------------
3. O RÓTULO DO CAMPO
11px em versalete com .08em de espaçamento: no telefone é o primeiro
texto a sumir, e é ele que diz o que se está preenchendo. Sobe para
12px e afrouxa o espaçamento — o que aperta a leitura em corpo
pequeno não é o tamanho sozinho, é o tamanho com o espaçamento.
Não se mexe no resto da tipografia: chip de 11px é etiqueta, não
texto de leitura, e aumentar tudo desmancharia todas as telas.
-------------------------------------------------------------------- */
/* Só o RÓTULO DE CAMPO: o `` que embrulha a caixa de marcar é o texto
da OPÇÃO (os ODS do AC, "embaralhar" nas provas, os espaços do ES), e com a
regra ele encolhia para 12px e ganhava o espaçamento de versalete, menor que
o corpo em volta (varredura de layout, set/2026). `:where` mantém o peso
de um seletor de elemento — a regra de classe de cada tela continua valendo. */
label:where(:not(:has(> input[type="checkbox"], > input[type="radio"]))) { font-size: 12px; letter-spacing: .05em; }
/* E O RÓTULO QUE EMBRULHA O CAMPO TAMBÉM PRECISA ENCOLHER (set/2026, a
varredura por GUIA — o carregamento da página não alcançava estas telas).
Capar o seletor não bastou nos filtros da IC: o `` que o contém é
`display:flex` (rótulo e caixa lado a lado) e vive numa linha `.filtros`
fora de qualquer `.card`, então a regra de baixo não o alcançava. Item de
flex nasce com `min-width:auto` e se recusa a ficar menor que o próprio
conteúdo: o rótulo ficava com 508px dentro de uma linha de 358 e a página
inteira rolava de lado nas guias Projetos, Bolsistas e Ensino Médio. Em
caixa comum `min-width:0` não muda nada (ali `auto` já vale 0) — ele só
age onde o defeito mora. */
label { min-width: 0; }
/* --------------------------------------------------------------------
4. O QUE É LARGO ROLA NO PRÓPRIO CONTÊINER
A tabela larga vai DENTRO de uma caixa com rolagem — é a regra do
portal, e o `.rolo` que o ARCHÉ IC já usa em toda tabela grande é a
forma dela. Aqui essa caixa ganha inércia no iOS.
Isto NÃO é uma rede automática, e não dá para ser: `display:block` numa
tabela faria a tabela estreita deixar de ocupar os 100% que ela declara,
e separar `thead` de `tbody` desalinharia as colunas. Quem escreve uma
tabela larga embrulha; a varredura por guia é o que encontra as que
ficaram sem embrulho (foi assim que saíram as do Acompanhamento das
atas, dos Agendamentos e do catálogo de cursos, em set/2026).
-------------------------------------------------------------------- */
.rolo, .rolo-tab, .tab-rolo, .rolagem {
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* O CAMPO DENTRO DA CÉLULA NÃO ENCOLHE ATÉ SUMIR (varredura das telas,
set/2026): a tabela editável (cronograma da IC, presenças da ata, alunos
indicados, espaços, professores do AC, áreas da AMA) já mora numa caixa
com rolagem, mas nunca rolava — ela tem `width:100%`, e um campo com
`width:100%` conta ZERO na largura mínima da coluna. No telefone o nome
ficava com 28 a 40px, o mês sem texto nenhum. Com um piso no campo a
tabela passa a ter largura própria e a CAIXA rola, que é o que ela existe
para fazer. Só dentro da caixa com rolagem: fora dela o piso faria a
página inteira rolar de lado. */
:is(.rolo, .rolo-tab, .tab-rolo, .rolagem) td > :is(input:not([type=checkbox]):not([type=radio]):not([type=number]), select, textarea):not([style*="width"]) {
min-width: 8rem;
}
/* O NÚMERO É CURTO (nota, carga horária, vagas): com o piso de 8rem ele
empurrava a coluna para fora da tabela; e o campo que a tela já dimensionou
na própria linha (`style="width:…"`) fica com a medida que ela deu. */
:is(.rolo, .rolo-tab, .tab-rolo, .rolagem) td > input[type=number]:not([style*="width"]) {
min-width: 4.5rem;
}
/* --------------------------------------------------------------------
5. O QUE SE DIGITA CABE NA TELA
`textarea` com altura mínima de 84px no telefone é meia tela para um
campo e um punhado de linhas para o seguinte. O relatório, a ata e a
proposta são feitos de campos longos: 120px dá quatro linhas à vista
sem tomar a tela.
-------------------------------------------------------------------- */
textarea { min-height: 120px; }
/* --------------------------------------------------------------------
6. O SETOR ABRE MOSTRANDO O SETOR, NÃO O CABEÇALHO DELE
Foi o que o print de 390px mostrou e nenhum número tinha contado: no
ARCHÉ EX, dos 844px do telefone, ~470 eram cabeçalho antes da primeira
informação. A barra lateral vira faixa e quebra em TRÊS linhas — a
marca do módulo, o bloco da conta e a fileira de guias —, e por baixo
ainda vêm a barra de caminho e o painel. A pessoa abre um setor e vê o
nome dele três vezes.
O bloco da conta SAI no telefone: nome, papel e "sair" já estão na
barra do topo, que fica presa ali em toda rolagem — é a mesma decisão
que a própria barra já tomou para si ("no celular a conta se reduz ao
avatar"), aplicada ao lugar onde ela se repetia. No `/curso/` esse
bloco é uma legenda em vez da conta; sai também, pelo mesmo motivo:
legenda não é informação de tela pequena.
As oito SPAs escrevem essas classes com os MESMOS nomes (foram
copiadas umas das outras), então isto é uma regra, não oito.
-------------------------------------------------------------------- */
.side-pe { display: none; }
/* A marca ocupa a LINHA inteira: ela tem `border-bottom`, e como item de
uma faixa flex saía com a largura do texto — o traço parava no meio da
tela, parecendo uma linha quebrada em todos os setores. */
.side-marca { padding: 9px 14px; flex: 1 1 100%; }
.side-marca span { font-size: 15px; }
.side-nav { padding: 6px 8px; }
.topbar { padding-left: 16px; padding-right: 16px; }
/* A BARRA DE CIMA CABE EM DUAS LINHAS NO TELEFONE. Ela é flex `nowrap`
com o caminho à esquerda e, à direita, o "Ver como" mais uma nota do
setor ("Submissões encerradas em 04/09/2026"). Nenhum dos três tinha
regra de encolhimento, e quem cedia era o BOTÃO — um `inline-flex` de
texto, que não encolhe de verdade: ele estourava a direita da tela e a
PÁGINA INTEIRA passava a rolar de lado (medido a 390px: 2px no ARCHÉ IC
ao abrir uma guia de nome longo como "Ensino Médio", 45px no ARCHÉ MO,
8px no ARCHÉ EV — e ficava assim mesmo depois de mudar de guia).
Truncar não servia: sobravam 187px para a nota, e "Submissões encerradas
em 04/0…" perde justamente o ano. Então a barra deixa de ter altura
fixa e QUEBRA: caminho + botão na primeira linha, a nota inteira na
segunda — 76px onde há nota, 52 onde não há. Cada peça ainda tem
`overflow` como rede, para nada escapar quando o texto for maior que a
própria linha. As dez SPAs escrevem `.crumb`/`.dir` com os mesmos
nomes, então isto é uma regra, não dez. */
.topbar { height: auto; min-height: 52px; flex-wrap: wrap;
padding-block: 7px; gap: 6px 12px; justify-content: flex-start; }
/* `display:contents` dissolve a caixa da direita: caminho, botão e nota
passam a ser itens da PRÓPRIA barra, e aí cada um pode ir para a linha
que lhe cabe — o que dentro de uma caixa só nunca seria possível. */
.topbar .dir { display: contents; }
.topbar .crumb { order: 1; flex: 1 1 auto; }
.topbar .dir > * { order: 3; flex: 1 1 100%; }
.topbar .crumb, .topbar .dir > * {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .dir > *:has(.vc-bt) { order: 2; flex: 0 0 auto; overflow: visible; }
.topbar .dir > *:empty { display: none; }
/* E A FAIXA É UMA FILEIRA DE GUIAS, IGUAL NOS OITO SETORES. Seis SPAs
já escrevem estas mesmas linhas por dentro; duas não — e nelas o menu
continuava EM PÉ, empilhado: no ARCHÉ AC a faixa media 423px, metade da
tela do telefone, antes de qualquer informação. Dizer aqui o que a
maioria já diz é um não-efeito para elas e a correção para as outras
duas — e a próxima SPA nasce com a faixa certa sem ninguém lembrar de
copiar o bloco. `#menu` é o contêiner que as oito usam para as guias. */
.app { flex-direction: column; }
.side {
width: 100%; height: auto; position: static;
flex-direction: row; flex-wrap: wrap; align-items: center;
}
.side-nav { flex: 1 1 100%; order: 3; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.side-nav #menu { display: flex; gap: 6px; }
.side-lab { display: none; }
.side-item {
width: auto; white-space: nowrap;
border-left: 0; border-bottom: 3px solid transparent; border-radius: 8px;
}
.side-item.on { border-left: 0; border-bottom-color: var(--accent); }
/* AS GUIAS SE LEEM PELO NOME, NÃO SÓ PELO ÍCONE (achado do dono, set/2026,
com o print do ARCHÉ EV no celular: "os ícones estão sobrepondo e não tem
como identificar"). Três coisas somadas faziam a faixa virar uma fileira
de desenhos iguais: (1) o item é item de flex, e item de flex ENCOLHE —
com as 20 guias do EV cada botão ficou com 24px, a largura do ícone
(medido; na Extensão, 42px); (2) o `arche-lateral.js` põe
`overflow:hidden` no item (é o que recorta a luz do cursor), então o
nome, espremido, simplesmente sumia; e (3) o número da guia ia para o
canto do botão — que agora era o canto do ÍCONE, e o número se deitava
sobre o vizinho. A faixa rola na horizontal, então quem decide quantas
guias cabem é a rolagem, não o tamanho de cada uma: o item não encolhe,
o nome aparece inteiro e o número volta para o lado do nome. */
.side-nav #menu { align-items: stretch; scrollbar-width: thin; }
.side-nav { scroll-padding-inline: 12px; scrollbar-width: thin; }
.side-nav .side-item { flex: 0 0 auto; gap: 7px; padding: 8px 12px; font-size: 14px; }
.side-nav .side-item .arche-pend {
position: static; margin: 0 0 0 2px !important;
min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 5px;
}
/* Os GRUPOS das guias voltam como marcos na faixa (Pré-evento · Evento ·
Pós-evento no EV; Aulas Práticas · Curricularização no AC): numa fileira
de vinte, é o que diz em que parte do setor a pessoa está. Só os de
dentro do menu — a "VOCÊ ESTÁ COMO" de algumas SPAs fica fora dele. */
.side-nav #menu .side-lab {
display: flex; align-items: center; flex: 0 0 auto;
margin: 0 0 0 6px; padding: 0 2px 0 12px;
border-left: 1px solid rgba(255, 255, 255, .2);
font-size: 10px; letter-spacing: .08em; white-space: nowrap;
}
.side-nav #menu .side-lab:first-child { margin-left: 0; padding-left: 4px; border-left: 0; }
}
/* A JOANINHA DO FEEDBACK fica fixa no canto de baixo, e no telefone cobria o
ÚLTIMO botão de várias telas (varredura de set/2026: "Criar a avaliação",
"Avisar", "Excluir esta AMA de teste"). O pé da página ganha a altura dela,
para o último botão poder rolar para cima dela. */
@media (max-width: 760px) {
body { padding-bottom: max(76px, env(safe-area-inset-bottom)); }
}
/* Alvos pequenos que a varredura mediu no telefone (set/2026): as bolhas do
gabarito das provas (30 px, cinco lado a lado — errar é marcar a letra
vizinha), as amostras da paleta do LG e o "remover" do ponto de pauta das
atas, que é destrutivo e tinha 14 px de altura. */
@media (max-width: 760px) {
.gq .alt { width: 36px; height: 36px; font-size: 13px; }
.gq .alt.dup { width: auto; }
.swatch { min-width: 40px; min-height: 40px; }
.ponto-pauta .rm { min-height: 36px; padding: 0 12px; }
}
/* ========================================================================
ACESSIBILIDADE — EM QUALQUER LARGURA (varredura de acessibilidade e
celular, set/2026). Esta camada é a que entra por último em TODAS as
páginas (as com login pelo nav, as públicas pela tag), e por isso é onde
mora o que vale no portal inteiro e não só no telefone. O par em JS
(rótulo preso ao campo, linha que se tecla, janela que prende o foco) é o
`arche-acesso.js`.
======================================================================== */
/* O FOCO SE VÊ SOBRE O FUNDO ESCURO. Sobre a barra do topo e a faixa lateral
(#1c3742) o anel dos setores — o acento #40717e — dá 2,2:1, abaixo dos 3:1
que um indicador de foco precisa; quem navega pelo teclado não sabia em que
guia estava. Lá o anel é o acento CLARO do portal. */
.arche-topnav :focus-visible,
.side :focus-visible { outline: 2px solid #71c8e2; outline-offset: 2px; }
/* A CAIXA DE MARCAR SEM FOCO NENHUM: as telas tiram o contorno do campo em
foco e trocam pela cor da BORDA (`input:focus{outline:none;border-color…}`)
— e a caixa de marcar nativa não tem borda que se pinte. No Seu Curso (os
módulos de cada acesso) e no banco de assinaturas, o Tab passava pelas
caixas sem mostrar onde estava. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid #40717e; outline-offset: 2px; }
/* OS MARCOS DA FAIXA LATERAL ("INÍCIO", "PROJETOS", "SELEÇÃO"…) saíam em
branco a 35% sobre a marca: 2,9:1, em 10px. A 62% dão 5,6:1 e continuam
discretos — são marcos, não guias. O "Evento em gestão" do EV, igual. */
.side-lab { color: rgba(255, 255, 255, .62); }
/* E o marco que quebra em duas linhas ("RELATÓRIOS DE ATIVIDADES", "EXTENSÃO
CURRICULAR") não fica com as linhas coladas: a 10px, `normal` dava ~12px. */
.side-lab { line-height: 1.4; }
.side-sel .rot { color: rgba(255, 255, 255, .62); }
/* O LINK NO MEIO DA FRASE SE DISTINGUE DA FRASE. No texto cinza dos cards
("… publicar aqui ou na guia Projetos", "Abrir a gestão de acessos") o
acento #40717e ficava a 1,07:1 do cinza em volta — sem sublinhado, o link
era invisível como link. Só o link SEM classe e dentro de texto: o que tem
classe já tem desenho próprio (botão, "ver todas →", chip). */
:is(p, .muted, .card-s, .banner, .dica, .sub, small, .kv) a:not([class]) {
text-decoration: underline; text-underline-offset: 2px;
}
/* QUEM PEDIU MENOS MOVIMENTO não recebe animação nem transição de enfeite. A
página inicial, o céu e a lateral já paravam; o resto do portal (o painel
dos relatórios, o piscar da janela do EV, as transições de 150 ms dos
botões) não perguntava. O `scrollIntoView` animado é do `arche-acesso.js`. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
/* A PALAVRA LONGA QUEBRA DENTRO DO CARD, em qualquer largura (varredura de
layout, set/2026): link colado, e-mail institucional comprido
("luciano.barbosa@docente.evangelicagoianesia.edu.br") e título sem espaço
estouravam a borda do card. `break-word` só parte o que não cabe inteiro —
o texto comum segue quebrando entre as palavras. */
.card { overflow-wrap: break-word; }
/* E NO TELEFONE, os alvos de toque que ainda ficavam abaixo de 32px nos atos
de todo dia: os filtros por situação dos Espaços (29px), o "abrir PDF" e o
link-botão da monitoria (14 a 28px). */
@media (max-width: 760px) {
.fchip, .bt-lk { min-height: 40px; }
a.pdf { display: inline-flex; align-items: center; min-height: 40px; }
}