/* ==========================================================================
mobile.css — Ajustes responsivos compartilhados das ferramentas
Prof. Ricardo C. Brumatti — FAMEZ/UFMS
Objetivo: escala tipográfica, de colunas e de gráficos fluida para telas
pequenas (celular e tablet em pé), sem alterar layout/comportamento em
desktop. Não contém nenhuma lógica de cálculo — só CSS.
Complementado por mobile-charts.js (ajustes que só são possíveis via JS:
Chart.js, wrap de tabelas largas, wrap de gráficos sem altura definida).
Como usar: logo depois do
no , e
logo antes de .
========================================================================== */
@media (max-width: 768px) {
/* ---- Trava de rolagem horizontal da página ----
Tooltips/elementos absolutos (ex.: dicas "?" dos formulários) vazam
alguns pixels além da borda e criam rolagem lateral na página inteira.
Tabelas largas continuam roláveis dentro do próprio wrapper. */
html, body { overflow-x: hidden !important; }
/* ---- Barra de ferramentas do cabeçalho (bioecon e similares) ---- */
.header-tools {
flex-wrap: wrap !important;
justify-content: center !important;
max-width: 100% !important;
}
/* ---- Escala tipográfica fluida (Tailwind utilities) ----
clamp(mínimo, preferido-em-vw, máximo) — o tamanho acompanha a largura
real da tela em vez de ficar fixo e forçar quebra de linha. */
.text-4xl { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; line-height: 1.15 !important; }
.text-3xl { font-size: clamp(1.35rem, 5.5vw, 1.875rem) !important; line-height: 1.2 !important; }
.text-2xl { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; line-height: 1.25 !important; }
.text-xl { font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important; line-height: 1.3 !important; }
.text-lg { font-size: clamp(1rem, 3.6vw, 1.125rem) !important; }
/* ---- Espaçamento entre seções (Tailwind utilities de grande porte) ----
Em desktop esses valores dão "respiro"; em celular só desperdiçam
tela e aumentam a rolagem antes do conteúdo útil. */
.mb-12 { margin-bottom: 2rem !important; }
.mt-12 { margin-top: 2rem !important; }
.mb-8 { margin-bottom: 1.5rem !important; }
.mt-8 { margin-top: 1.5rem !important; }
.py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.p-8 { padding: 1.25rem !important; }
.p-6 { padding: 0.9rem !important; }
.sm\:p-8 { padding: 1.25rem !important; }
/* ---- Cabeçalhos "título + botão(ões)" (gráficos, resultados) ----
Em desktop, título e botão cabem lado a lado. Em celular, mantemos
lado a lado (o botão fica fixo à direita, sem encolher) e deixamos só
o título quebrar em várias linhas — evita a pilha vertical alta e o
espaço vazio que a versão anterior (empilhar em coluna, largura 100%)
criava em torno de um botão que é só um ícone. */
.flex.justify-between.items-center.mb-4 {
align-items: flex-start !important;
gap: 0.6rem !important;
}
.flex.justify-between.items-center.mb-4 > h3,
.flex.justify-between.items-center.mb-4 > h2 {
flex: 1 1 auto;
min-width: 0;
}
.flex.justify-between.items-center.mb-4 > .chart-actions,
.flex.justify-between.items-center.mb-4 > .flex {
flex: 0 0 auto;
}
/* ---- Cabeçalho ---- */
.top-nav { padding: 0.6rem 1rem !important; }
.top-nav .logo { font-size: clamp(0.95rem, 4vw, 1.1rem) !important; }
/* ---- Cabeçalhos institucionais das ferramentas ----
1) "sticky" no celular rouba metade da tela útil enquanto o usuário
rola — vira static (o cabeçalho rola junto com a página).
2) Logo, títulos e assinatura em tamanho de desktop empurram o
conteúdo útil para fora da primeira dobra — compacta tudo. */
header.sticky { position: static !important; }
header h1 { font-size: clamp(1.05rem, 4.5vw, 1.35rem) !important; line-height: 1.2 !important; }
header h2 { font-size: 0.72rem !important; line-height: 1.3 !important; }
header .container { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
header .fa-cow, header .fa-2x, header .text-3xl i, header i.text-3xl { font-size: 1.35rem !important; }
header .mt-3.pt-2 { margin-top: 0.4rem !important; padding-top: 0.3rem !important; font-size: 9px !important; }
/* ---- Cards de indicador (KPIs em destaque) ----
Em desktop, número grande (2.25rem/36px) e min-height fixo fazem
sentido lado a lado num grid de 4 colunas. Em celular, empilhados
em coluna única, o mesmo tamanho fica desproporcional. */
.indicator-card {
padding: clamp(0.9rem, 4vw, 1.5rem) !important;
min-height: 0 !important;
}
.indicator-card .label {
font-size: 0.8rem !important;
}
.indicator-card .value {
font-size: clamp(1.6rem, 8vw, 2.25rem) !important;
}
/* ---- Cards secundários (indicadores de apoio) ---- */
.secondary-indicator-card {
padding: 0.75rem !important;
}
.secondary-indicator-card i,
.secondary-indicator-card [class*="fa-"] {
font-size: 1.4rem !important;
}
/* ---- Botões de ação (Calcular, Limpar, Salvar, Imprimir, Excel) ----
Em telas estreitas, texto + ícone + padding generoso de desktop
empurra o botão pra fora da área visível. */
.btn-hover {
padding-left: 1rem !important;
padding-right: 1rem !important;
font-size: 0.9rem !important;
white-space: normal !important;
}
/* ---- Colunas de formulário / cards que não têm prefixo responsivo ----
Vários agrupamentos usam "grid-cols-2/3/4" sem variante sm:/lg:, o que
significa que ficam ativos em QUALQUER largura, inclusive num iPhone
de 375px — dois ou três campos numéricos espremidos lado a lado.
Em telas muito estreitas isso quebra a leitura do rótulo e do valor;
forçamos coluna única. PDFs ocultos (.a4-page) são excluídos porque
são renderizados fora da tela, num tamanho fixo A4, para exportação. */
.grid.grid-cols-2:not(.a4-page .grid-cols-2),
.grid.grid-cols-3:not(.a4-page .grid-cols-3),
.grid.grid-cols-4:not(.a4-page .grid-cols-4),
.grid.grid-cols-5:not(.a4-page .grid-cols-5),
.grid.grid-cols-6:not(.a4-page .grid-cols-6) {
grid-template-columns: 1fr !important;
}
.a4-page, .a4-page * { /* nunca reflui — é o layout fixo da exportação PDF */ }
/* ---- Abas (Simulação / Histórico / Comparação, Marginal / Tornado…) ----
Alvo de toque confortável (mín. 44px) e texto que não corta. */
.tab-btn {
min-height: 44px !important;
white-space: nowrap !important;
font-size: 0.82rem !important;
padding-left: 0.9rem !important;
padding-right: 0.9rem !important;
}
/* ---- Inputs, selects e textareas ----
iOS dá zoom automático em qualquer campo com fonte menor que 16px ao
tocar — deixa a experiência de preenchimento ruim. Fixamos 16px só
no campo em si (não nos rótulos), então o zoom nunca é disparado. */
input, select, textarea {
font-size: 16px !important;
}
/* ---- Modal (ajuda, comparação, etc.) ---- */
.modal-content {
width: 94% !important;
max-height: 88vh !important;
overflow-y: auto !important;
padding: 16px !important;
}
.modal {
padding-top: 2.5rem !important;
}
/* ---- Wrapper de gráfico injetado via mobile-charts.js ----
Dá altura previsível ao canvas (Chart.js com maintainAspectRatio:false
precisa que o contêiner tenha altura definida, senão o gráfico não
aparece ou fica com tamanho instável). */
.chart-mobile-wrap {
position: relative;
width: 100%;
height: 260px;
margin-bottom: 0.5rem;
}
.chart-mobile-wrap.tall { height: 340px; }
.chart-mobile-wrap canvas {
max-width: 100% !important;
}
/* ---- Wrapper de tabela injetado via mobile-charts.js ----
Tabelas com várias colunas (resultados detalhados, histórico,
comparação) não cabem em 375px — em vez de espremer o texto,
deixamos a tabela no tamanho legível e a rolagem fica horizontal,
com uma dica visual de que dá para arrastar. */
.mobile-table-scroll {
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
margin-bottom: 0.5rem;
}
.mobile-table-scroll table {
min-width: 480px;
}
.mobile-table-scroll.has-more-x::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; width: 28px;
background: linear-gradient(to right, transparent, rgba(15,23,42,0.10));
pointer-events: none;
}
.mobile-scroll-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #64748b;
background: #f1f5f9;
border-radius: 6px;
padding: 0.3rem 0.6rem;
margin-bottom: 0.4rem;
width: fit-content;
}
}
@media (max-width: 400px) {
/* Telas muito estreitas (iPhone SE e similares) — um degrau a mais
de contenção só nos elementos mais sensíveis. */
.indicator-card .value { font-size: clamp(1.4rem, 9vw, 1.9rem) !important; }
.mobile-table-scroll table { min-width: 420px; }
}
/* ---- Aviso "gire a tela" ----
Some em desktop/tablet e em celular na horizontal. Só aparece em
celular na vertical, onde os gráficos ficam mais espremidos. Agora que
os gráficos se adaptam ao retrato, isso é só uma dica opcional. */
.rotate-hint {
display: none;
}
@media (max-width: 768px) and (orientation: portrait) {
.rotate-hint {
display: flex;
align-items: center;
gap: 0.6rem;
background: #fef3c7;
color: #92400e;
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.rotate-hint span { flex: 1; }
.rotate-hint button {
background: none;
border: none;
color: #92400e;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
padding: 0 0.25rem;
}
.rotate-hint.dismissed { display: none; }
}
/* ---- Cards de widgets com altura fixa (painéis de mercado) ----
Em desktop, altura fixa em pixel é intencional (widgets TradingView
precisam de um contêiner com altura definida). Os widgets desenham a
própria interface (abas, legendas, categorias) dentro dessa altura —
se ela for reduzida demais em celular, o próprio TradingView corta
texto e categorias (ex.: heatmap, screener). Por isso aqui só reduzimos
levemente o gráfico principal (que tem barra de ferramentas alta) e
mantemos os demais praticamente do tamanho original. */
@media (max-width: 768px) {
.h-\[500px\] { height: 460px !important; }
.h-\[450px\] { height: 440px !important; }
.h-\[250px\] { height: 260px !important; }
}