/* Tema claro e escuro pelo aparelho. Toda cor sai de um token: nenhum texto
pode ficar ilegivel num dos dois temas. */
:root {
--fundo: #ffffff;
--fundo-2: #f4f6f8;
--fundo-3: #e9edf1;
--borda: #e0e4e9;
--texto: #131722;
--texto-2: #5d6773;
--alta: #089981;
--baixa: #f23645;
--acento: #2962ff;
--ema: #2962ff;
--rsi: #7e57c2;
--grade: rgba(42, 46, 57, 0.12);
--tempo: #d8871a;
/* A PALAVRA fala a lingua da ZONA pintada no grafico. A de cima ja falava: vermelho
de sobrecompra = ponta quente do leque 70-80. A de baixo estava VERDE — a cor da
vela de alta — enquanto a zona 20-30 e ciano/azul: duas cores para o mesmo gatilho,
e a verde ainda dizia "subindo" onde o indicador diz "esticou pra baixo". Ciano e o
corNivel(30), a borda branda do leque frio. */
--sobrecompra-fundo: rgba(242, 54, 69, 0.16);
--sobrecompra-texto: #b3202c;
--sobrevenda-fundo: rgba(9, 190, 225, 0.18);
--sobrevenda-texto: #0b6d8a;
/* "Deu certo" e outro assunto: era o verde de sobrevenda emprestado, e emprestado ele
teria virado ciano junto. Verde de sucesso continua verde. */
--ok-fundo: rgba(8, 153, 129, 0.16);
--ok-texto: #056a5b;
/* Canais crus para a escala continua da matriz (alfa vem inline de js/matriz.js). */
--rgb-alta: 8 153 129;
--rgb-baixa: 242 54 69;
--altura-nav: 56px;
/* A sombra do retangulo da regua: le-se como "area medida", nao como mais uma zona
do indicador — por isso e o acento (azul do app), nunca quente nem frio. */
--regua-sombra: rgba(41, 98, 255, 0.14);
}
@media (prefers-color-scheme: dark) {
:root {
--fundo: #131722;
--fundo-2: #1b2030;
--fundo-3: #252b3b;
--borda: #2a2e39;
--texto: #e8eaed;
--texto-2: #9aa3b0;
--grade: rgba(240, 243, 250, 0.10);
--tempo: #f5a442;
--sobrecompra-fundo: rgba(242, 54, 69, 0.24);
--sobrecompra-texto: #ff8a93;
--sobrevenda-fundo: rgba(9, 225, 225, 0.22);
--sobrevenda-texto: #5fe3ea;
--ok-fundo: rgba(8, 153, 129, 0.24);
--ok-texto: #4fd1b5;
--rsi: #b39ddb;
--regua-sombra: rgba(84, 132, 255, 0.22);
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--fundo);
color: var(--texto);
font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
padding-bottom: calc(var(--altura-nav) + env(safe-area-inset-bottom));
}
.cabecalho {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
background: var(--fundo);
border-bottom: 1px solid var(--borda);
}
.cabecalho h1 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.2px; }
.cabecalho .sub { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
/* Topo da lista: UMA fileira, e nada nela parado a toa.
1) o estado do dado, em frase ("ao vivo", "atualizado ha 3 min");
2) ordenacao num controle rotulado — nao e troca de lista, e ordem da mesma;
3) buscar e adicionar viram icone; a busca so ocupa altura quando aberta.
O titulo saiu (a barra inferior ja diz "Lista") e continua para leitor de tela.
Antes: campo de busca + fileira de abas = ~70px. Agora: 40px. */
#tela-lista .cabecalho {
flex-direction: column;
align-items: stretch;
gap: 5px;
padding: calc(env(safe-area-inset-top) + 6px) 14px 6px;
}
.topo-lista { display: flex; align-items: center; gap: 8px; }
/* Fora da tela, dentro da arvore de acessibilidade: a tela mantem seu h1. */
.oculto {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.icone {
flex: none;
width: 28px; height: 28px;
display: grid; place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--texto-2);
cursor: pointer;
}
.icone svg {
width: 19px; height: 19px;
fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round;
}
.icone:active { background: var(--fundo-3); }
.icone[aria-expanded="true"],
.icone[aria-pressed="true"] { background: var(--fundo-3); color: var(--texto); }
.busca {
width: 100%;
min-width: 0;
height: 30px;
border: 1px solid var(--borda);
border-radius: 8px;
background: var(--fundo-2) no-repeat 9px 50%;
/* Lupa embutida: cinza neutro, legivel nos dois temas, sem arquivo novo. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
background-size: 14px 14px;
color: var(--texto);
font: inherit;
font-size: 13px;
padding: 0 10px 0 29px;
}
.busca::placeholder { color: var(--texto-2); }
.busca:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
/* ---- Resultados da busca: o que AINDA NAO esta na lista ---- */
/* Colado no campo, logo abaixo: o polegar vai do teclado ao resultado sem
atravessar a tela. Rola sozinho, para 12 achados nao empurrarem a lista toda. */
.resultados {
margin-top: 8px;
max-height: 52vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--borda);
border-radius: 10px;
background: var(--fundo-2);
}
.busca-recado {
margin: 0;
padding: 12px;
font-size: 12px;
color: var(--texto-2);
}
.busca-recado.ruim { color: var(--sobrecompra-texto); }
.achado {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--borda);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.achado:last-child { border-bottom: 0; }
.achado:active { background: var(--fundo-3); }
.achado[disabled] { opacity: .55; cursor: default; }
.achado-texto { flex: 1; min-width: 0; }
.achado-codigo { display: block; font-weight: 700; font-size: 13px; line-height: 1.3; }
.achado-nome,
.achado-meta {
display: block;
font-size: 11px;
line-height: 1.35;
color: var(--texto-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.achado-meta { opacity: .85; }
/* Ao vivo x atrasado na mesma linha do codigo: e o que separa o preco de agora do
preco de 15 min atras, e quem decide com isso e o dono. */
.achado-vivo {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: var(--fundo-3);
color: var(--alta);
border: 1px solid currentColor;
font-size: 10px;
font-weight: 700;
line-height: 1.5;
vertical-align: 1px;
}
.achado-acao {
flex: none;
min-width: 26px;
text-align: center;
font-size: 17px;
font-weight: 700;
color: var(--acento);
}
.achado[disabled] .achado-acao { font-size: 11px; font-weight: 600; color: var(--texto-2); }
.frescor {
flex: 1;
display: inline-flex;
align-items: center;
min-width: 0;
font-size: 11px;
color: var(--texto-2);
font-variant-numeric: tabular-nums;
}
/* Farol: verde pulsante so quando o dado e realmente recente; cinza parado
quando ja envelheceu — a cor nunca promete mais do que o texto diz. */
.farol {
flex: none;
width: 6px; height: 6px;
margin-right: 6px;
border-radius: 50%;
background: var(--texto-2);
}
.farol[data-estado="vivo"] { background: var(--alta); animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .farol { animation: none; } }
.ordenar {
flex: none;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--texto-2);
}
.ordenar select {
border: 0;
border-radius: 7px;
padding: 3px 4px;
background: var(--fundo-2);
color: var(--texto);
font: inherit;
font-size: 11px;
font-weight: 600;
}
.botao {
background: var(--fundo-3);
color: var(--texto);
border: 1px solid var(--borda);
border-radius: 8px;
padding: 7px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.botao:active { opacity: 0.6; }
.tela { display: none; }
.tela[data-ativa] { display: block; }
/* ---- Erro visivel: nunca falhar em silencio ---- */
.erro {
margin: 12px 16px;
padding: 12px 14px;
border-radius: 10px;
background: var(--sobrecompra-fundo);
color: var(--sobrecompra-texto);
border: 1px solid currentColor;
font-size: 13px;
font-weight: 500;
}
.erro button {
margin-top: 8px;
display: block;
background: transparent;
border: 1px solid currentColor;
color: inherit;
border-radius: 7px;
padding: 5px 10px;
font-weight: 700;
cursor: pointer;
}
.carregando { padding: 24px 16px; color: var(--texto-2); font-size: 14px; }
/* ---- Tela 1: lista de observacao ---- */
/* Alvo de densidade: linha de ~58px, como a tela de referencia — 11 ativos
cabem na janela do iPhone sem a ultima linha ficar cortada. */
/* A linha e o "x" do modo editar sao IRMAOS (botao dentro de botao nao existe):
a divisoria passou para o `.item`, para valer sob os dois. */
.item {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--borda);
}
/* O "x": alvo de 44px, o minimo que o dedo acerta sem errar na linha vizinha. */
.remover {
flex: none;
width: 44px;
border: 0;
background: transparent;
color: var(--baixa);
font: 600 22px/1 inherit;
cursor: pointer;
}
.remover:active { background: var(--fundo-2); }
.linha {
display: flex;
align-items: center;
gap: 9px;
flex: 1;
min-width: 0;
padding: 5px 14px;
background: transparent;
border: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.linha:active { background: var(--fundo-2); }
/* Cor de marca por ativo (--marca vem inline de js/lista.js); fundo-3 so se faltar. */
.moeda {
width: 28px; height: 28px; flex: none;
border-radius: 50%;
background: var(--marca, var(--fundo-3));
color: #fff;
display: grid; place-items: center;
font-size: 12px; font-weight: 700; line-height: 1;
}
/* Marcas de fundo claro (ex.: BNB) precisam de glifo escuro para contraste. */
.moeda[data-claro] { color: #16181d; }
/* Glifo proprio de cada ativo, desenhado em js/lista.js. Herda a cor do circulo:
preenchido por padrao, `.traco` quando o desenho e de contorno. */
.moeda svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.moeda svg .traco {
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.moeda svg ellipse.traco { stroke-width: 1.3; }
.linha .nomes { flex: 1; min-width: 0; }
.linha .par { font-weight: 700; font-size: 14px; line-height: 1.25; }
/* O "USDT" cinza repetido em 12 linhas nao informava nada (a lista inteira e
Binance/USDT, dito uma vez na busca): saiu, e o nome do ativo ficou.
A segunda linha carrega nome + faixa do dia (minima-maxima, ja vem do ticker):
com uma palavra so ("BNB", "XRP") sobrava meia largura de branco morto entre a
identidade e a coluna de numeros, e a linha virava duas ilhas. Com o dado
junto, o texto preenche a banda ate os numeros e trunca com reticencias. */
/* Marca do tempo grafico ao lado do codigo, como na tela de referencia. */
.linha .tempo-marca {
margin-left: 6px;
font-size: 11px;
font-weight: 700;
color: var(--tempo);
vertical-align: 1px;
}
.linha .nome {
font-size: 11px;
line-height: 1.25;
color: var(--texto-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Coluna de numeros: LARGURA FIXA e borda direita alinhada. Com o preco sempre
em duas casas acima de 1 (ver js/lista.js) + tabular-nums, todo digito ocupa a
mesma caixa e a virgula cai no mesmo x em toda a coluna. */
/* 120px, e o numero e MEDIDO: em modo editar o "x" tira 44px da linha e, com 134,
faltavam 7px para "PETR4 D [15 min de atraso]" caber — a etiqueta descia para uma
segunda linha e SO as linhas da B3 cresciam de 46px para 67px, empurrando a lista
inteira a cada toque em Editar. Medido no iPhone: com 128 e 124 ainda quebra, com
120 nenhuma das seis linhas quebra, dentro ou fora do modo editar. Reservar os 44px
o tempo todo tambem parava a danca, mas cobrava os 21px de altura em TODA linha da
B3, o dia inteiro; aqui o preco cabe do mesmo jeito e a altura nao muda. */
.linha .valores {
flex: none;
width: 120px;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.linha .preco {
width: 100%;
font-weight: 600;
font-size: 15px;
line-height: 1.25;
font-variant-numeric: tabular-nums;
}
/* Dois trilhos numericos: variacao em moeda e em %, cada um com largura propria
para que os sinais (+/−) e os %% tambem empilhem. */
.linha .deltas {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 6px;
font-size: 12px;
line-height: 1.25;
font-variant-numeric: tabular-nums;
}
.linha .delta-moeda { flex: 1; text-align: right; }
.linha .delta-pct { flex: none; width: 54px; text-align: right; }
/* Folga acima da barra inferior: a ultima linha termina inteira, nao cortada. */
#lista-conteudo { padding-bottom: 8px; }
.alta { color: var(--alta); }
.baixa { color: var(--baixa); }
/* ---- Tela 2: grafico ---- */
.barra-tempos {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 5px 16px;
border-bottom: 1px solid var(--borda);
scrollbar-width: none;
}
.barra-tempos::-webkit-scrollbar { display: none; }
.tempo {
flex: none;
background: transparent;
border: 1px solid var(--borda);
border-radius: 7px;
color: var(--texto-2);
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.tempo[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
select.pares {
background: var(--fundo-3);
color: var(--texto);
border: 1px solid var(--borda);
border-radius: 8px;
padding: 7px 10px;
font-size: 14px;
font-weight: 700;
}
/* UMA fileira, altura fixa. Duas razoes: (1) cada linha de legenda saia direto da altura
das velas — cinco delas comiam mais tela que o proprio grafico; (2) a legenda troca de
conteudo a cada pixel que o dedo anda, e se ela pudesse quebrar linha o canvas seria
redimensionado no meio do gesto. `nowrap` + altura fixa: o grafico nunca pula. */
.legenda {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
height: 26px;
padding: 0 16px;
overflow: hidden;
white-space: nowrap;
font-size: 11px;
color: var(--texto-2);
font-variant-numeric: tabular-nums;
}
.legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
/* RSI Levels: so o chip de liga/desliga e a palavra do estado. Os 12 precos saiiram do
texto e viraram etiqueta no eixo, na ponta da linha de cada faixa — ali o numero fica
colado no lugar a que se refere, e a legenda devolveu quatro linhas ao grafico. */
.niveis { display: flex; align-items: center; gap: 8px; flex: none; }
.chip {
border: 1px solid var(--borda);
border-radius: 999px;
background: transparent;
color: var(--texto-2);
padding: 2px 9px;
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--fundo-3); color: var(--texto); }
/* O estado em PALAVRA: o dono nao deveria precisar comparar 71,4 com 70. */
.estado-rsi {
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.estado-rsi[data-estado="sobrecompra"] { background: var(--sobrecompra-fundo); color: var(--sobrecompra-texto); }
.estado-rsi[data-estado="sobrevenda"] { background: var(--sobrevenda-fundo); color: var(--sobrevenda-texto); }
/* Preco e RSI cabem juntos na tela, como no TradingView: o painel de RSI nunca
pode ficar abaixo da dobra.
Antes o preco tinha `height: calc(100dvh - 372px)`: os 372px eram a soma MEDIDA
do cabecalho, tempos, legenda, rotulo, RSI e barra inferior — sem a etiqueta "15
min de atraso", que em ativo da B3 acrescenta uma linha ao cabecalho e empurrava
um quarto do RSI (justamente a tracejada de 30) para tras da barra inferior.
Agora a tela e uma coluna flex da altura da janela: tudo que tem altura propria
fica com ela, e o preco FICA COM O QUE SOBRA — qualquer linha que entre ou saia
do cabecalho e descontada sozinha, sem constante para remedir. */
#tela-grafico[data-ativa] {
display: flex;
flex-direction: column;
height: calc(100dvh - var(--altura-nav) - env(safe-area-inset-bottom));
overflow: hidden;
}
/* Tudo que nao e painel fica com a altura que pede (cabecalho, tempos, legenda,
rotulo, erro). Os dois painies precisam VENCER esta regra, entao levam o
`#tela-grafico >` na frente: `#tela-grafico > *` e mais especifico que `#grafico-preco`
sozinho, e sem isso o preco herdava `flex: none`, virava do tamanho do conteudo e
o canvas encolhia ate as velas sumirem. */
#tela-grafico > * { flex: none; }
#tela-grafico > #grafico-preco { flex: 1 1 auto; min-height: 200px; }
#tela-grafico > #grafico-rsi { flex: 0 0 106px; }
/* O gesto em cima do grafico e DO grafico. Sem `touch-action`, o Safari fica com o
toque para si -- pinca vira zoom da pagina e arraste vira rolagem -- e a
lightweight-charts nunca recebe o gesto: era a queixa do iPhone ("nao consigo
aumentar ou diminuir"). Medido: nem os elementos que a biblioteca cria declaram
`touch-action` (todos em `auto`), entao tem de vir daqui. `none` cede pinca,
arraste e duplo toque ao canvas; o toque parado, que le o OHLC da barra, nasce do
mesmo touchstart e continua valendo. */
/* `relative` para o "+" da mira, que e posicionado na altura do dedo (js/grafico.js). */
#grafico-preco, #grafico-rsi { touch-action: none; position: relative; }
#grafico-preco { flex: 1 1 auto; min-height: 200px; }
#grafico-rsi { flex: 0 0 106px; border-top: 1px solid var(--borda); }
/* O "+" da mira: circulo colado na borda ESQUERDA da etiqueta do eixo, na altura do
dedo -- como no video do dono. O `right` sai de LARGURA_EIXO (72px em js/grafico.js):
64 deixa o circulo quase todo dentro do quadro, encostando na coluna do eixo: cobre
so a quina arredondada da etiqueta, nunca um digito. `margin-top` de -13px centra o
botao NA linha tracejada, nao abaixo dela. */
.mira-mais {
position: absolute;
right: 64px;
width: 26px;
height: 26px;
margin-top: -13px;
padding: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--acento);
border-radius: 50%;
background: var(--fundo);
color: var(--acento);
font-size: 17px;
font-weight: 600;
line-height: 1;
}
/* `hidden` vence o `display: flex` da classe (mesma especificidade, ordem manda). */
.mira-mais[hidden] { display: none; }
/* A ETIQUETA DA REGUA: as duas linhas do video, acima do retangulo medido. Nao recebe
toque (`pointer-events: none`) porque ela flutua por cima do painel — o dedo que
passa por baixo dela esta medindo, e a etiqueta nao pode roubar o arraste. */
.regua-etiqueta {
position: absolute;
z-index: 4;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 5px 9px;
border-radius: 7px;
background: var(--acento);
color: #fff;
font-size: 11px;
line-height: 1.25;
white-space: nowrap;
font-variant-numeric: tabular-nums;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.regua-etiqueta b { font-weight: 700; }
.regua-etiqueta span { opacity: 0.92; }
.regua-etiqueta[hidden] { display: none; }
/* --- Folha de indicadores ------------------------------------------------- */
.grupo-titulo {
margin: 14px 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--texto-2);
}
.grupo-titulo:first-child { margin-top: 2px; }
/* `flex: none` nao e enfeite: a folha-corpo e uma COLUNA FLEX com `max-height: 66vh`, e
o grupo (que tem `overflow: hidden`) encolhia para caber — no iPhone a quarta linha,
RSI 14, era CORTADA do painel. Sem encolher, a folha rola, que e o certo. */
.grupo-titulo, .grupo, .aviso-painel { flex: none; }
.grupo {
border: 1px solid var(--borda);
border-radius: 12px;
overflow: hidden;
background: var(--fundo-2);
}
.indicador {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 12px;
border-bottom: 1px solid var(--borda);
cursor: pointer;
}
.indicador:last-child { border-bottom: 0; }
.indicador-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.indicador-texto b { font-size: 14px; font-weight: 600; }
.indicador-texto small { font-size: 11px; color: var(--texto-2); }
/* Interruptor: caixa de marcar NATIVA repintada. Teclado, leitor de tela e o rotulo
clicavel vem de graca do proprio — desenhar um botao no lugar dele seria
reescrever tudo isso a mao. */
.interruptor {
flex: none;
appearance: none;
-webkit-appearance: none;
position: relative;
width: 42px;
height: 25px;
margin: 0;
border-radius: 999px;
background: var(--fundo-3);
border: 1px solid var(--borda);
cursor: pointer;
transition: background 0.15s ease;
}
.interruptor::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 19px;
height: 19px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease;
}
.interruptor:checked { background: var(--acento); border-color: var(--acento); }
.interruptor:checked::after { transform: translateX(17px); }
.interruptor:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.interruptor, .interruptor::after { transition: none; }
}
/* Esta folha e mais alta que as outras de proposito: o aviso da regua e a ULTIMA linha
e, com os 66vh padrao, ele nascia inteiro abaixo da dobra — um aviso que so aparece
para quem rola nao avisa ninguem. */
#folha-indicadores .folha-corpo { max-height: 82vh; }
.aviso-painel {
margin: 12px 0 4px;
padding: 9px 11px;
border-radius: 10px;
background: var(--fundo-2);
border: 1px solid var(--borda);
font-size: 11.5px;
line-height: 1.4;
color: var(--texto-2);
}
.rotulo-painel {
padding: 2px 16px 0;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2px;
text-transform: uppercase;
color: var(--texto-2);
}
/* ---- Tela 3: matriz ---- */
/* A caixa da tabela e o proprio rolador: `overflow-x: auto` ja fazia dela um
container de rolagem nos DOIS eixos, entao o thead sticky grudava no topo
DELA e sumia junto com ela quando a pagina rolava. Dando altura a caixa, a
pagina para de rolar e o cabecalho da tabela fica sempre visivel. */
.rolagem {
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100dvh - var(--topo-cabecalho, 64px) - var(--altura-nav) - env(safe-area-inset-bottom));
}
table.matriz {
border-collapse: collapse;
width: 100%;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
table.matriz th, table.matriz td {
padding: 9px 6px;
text-align: center;
border-bottom: 1px solid var(--borda);
white-space: nowrap;
}
/* Gruda no topo do proprio rolador (.rolagem), que comeca abaixo do cabecalho
sticky da tela: sem sobreposicao e sem sumico do tempo grafico ao rolar. */
table.matriz thead th {
position: sticky; top: 0;
background: var(--fundo-2);
color: var(--texto-2);
font-size: 12px;
z-index: 6;
}
table.matriz th.ativo {
position: sticky; left: 0;
background: var(--fundo);
text-align: left;
padding-left: 16px;
font-weight: 700;
z-index: 1;
}
table.matriz thead th.ativo { background: var(--fundo-2); z-index: 7; }
/* Escala continua: o fundo vem inline; o numero fica sempre em --texto, que
passa 4.5:1 contra o fundo tingido nos dois temas ate o alfa maximo. */
td.tingida { color: var(--texto); font-weight: 700; }
td.vazio { color: var(--texto-2); }
.rodape-legenda { padding: 12px 16px 20px; font-size: 12px; color: var(--texto-2); }
/* ---- Navegacao inferior ---- */
.nav {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 10;
display: flex;
background: var(--fundo-2);
border-top: 1px solid var(--borda);
padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
flex: 1;
background: transparent;
border: 0;
color: var(--texto-2);
height: var(--altura-nav);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.nav button[aria-current="page"] { color: var(--texto); }
.nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; }
/* ---- Etiqueta de atraso: o dado da B3/indice tem ~15 min ---- */
/* Em 5m e 15m isso muda a decisao, entao a etiqueta aparece onde o ativo aparece:
na linha da lista, no cabecalho do grafico e no alerta. Cor de aviso, nao de
erro — o dado esta certo, so nao e de agora. */
.atraso {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: var(--fundo-3);
color: var(--tempo);
border: 1px solid currentColor;
font-size: 10px;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
vertical-align: 1px;
}
/* hidden vence o display de classe, para quem so alterna o atributo */
.atraso[hidden] {
display: none;
}
/* Na tela do grafico cada pixel do topo sai da vela: o cabecalho aperta o respiro
vertical (o horizontal continua igual) e o RSI cede 34px dos 140 que tinha. */
#tela-grafico .cabecalho { padding: calc(env(safe-area-inset-top) + 6px) 16px 6px; }
/* No cabecalho do grafico NAO ha etiqueta de atraso: quem carimba o atraso ali e a
linha de frescor ("15 min de atraso · ultima barra 17:30"), colada no preco. A
etiqueta propria dizia a MESMA frase quinze pixels ao lado e levava uma linha
inteira do cabecalho — altura que a coluna flex devolveu ao painel de preco. */
/* Aviso na lista (servico fora do ar): conta o que falta, sem parecer erro fatal. */
.aviso {
margin: 8px 16px;
padding: 8px 10px;
border-radius: 8px;
background: var(--fundo-2);
border: 1px solid var(--borda);
color: var(--texto-2);
font-size: 12px;
}
/* Aviso GRAVE (carteira guardada, servico fora): cinza de baixo contraste perdia a
disputa com uma tela cheia de preco colorido em movimento. Aqui ele tem cor de
alerta, icone e barra lateral — le-se antes das linhas, nao depois. */
.aviso.ruim {
display: flex;
gap: 8px;
background: rgb(var(--rgb-baixa) / 0.12);
border: 1px solid rgb(var(--rgb-baixa) / 0.45);
border-left-width: 4px;
color: var(--sobrecompra-texto);
font-weight: 500;
line-height: 1.4;
}
.aviso.ruim::before {
content: "\26A0";
flex: none;
font-size: 14px;
line-height: 1.3;
}
/* Farol de alerta: o verde pulsante nunca aparece com a lista guardada. */
.farol[data-estado="ruim"] { background: var(--baixa); }
/* ---- Tela 4: alertas ---- */
/* O menu do gesto e a tela de edicao sao