vira um cartao e cada mostra o rotulo da coluna,
lido de `data-label` e pintado em ::before
>= 720px tabela de verdade
O padrao de `data-label` vem do sistema atual (la e `data-l`) e funciona
bem: nao duplica markup, nao precisa de JS, e o leitor de tela continua
recebendo uma tabela com cabecalho.
========================================================================== */
.c-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-md);
}
.c-table thead { display: none; } /* volta em >= 720px */
.c-table tbody tr {
display: block;
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--color-border);
}
.c-table tbody tr:last-child { border-bottom: 0; }
.c-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: 5px var(--pad-cell-x);
text-align: right;
border: 0;
}
.c-table td::before {
content: attr(data-label);
flex: none;
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-align: left;
}
/* Celula sem data-label (a de acoes, a do link de detalhe) nao deve abrir
coluna vazia a esquerda. */
.c-table td:not([data-label]) { justify-content: flex-end; }
/* A primeira celula do cartao e o titulo dele: ativo, data, o que identifica
a linha. Fica maior e sem rotulo repetido. */
.c-table td[data-primary] {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--color-text-primary);
padding-top: var(--sp-1);
padding-bottom: var(--sp-2);
}
.c-table td[data-primary]::before { color: var(--color-text-muted); font-size: var(--text-xs); }
/* --------------------------------------------------------------------------
>= 720px — tabela
-------------------------------------------------------------------------- */
@media (min-width: 720px) {
.c-table thead { display: table-header-group; }
.c-table tbody tr { display: table-row; padding: 0; }
.c-table td { display: table-cell; text-align: left; }
.c-table td::before { content: none; }
.c-table td[data-primary] { font-size: var(--text-md); padding: var(--pad-cell-y) var(--pad-cell-x); }
.c-table th,
.c-table td {
padding: var(--pad-cell-y) var(--pad-cell-x);
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: middle;
}
/* Cabecalho discreto: caixa alta pequena em cinza. Ele orienta, nao
compete com os numeros. */
.c-table th {
font-size: var(--text-2xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-muted);
white-space: nowrap;
background-color: var(--color-bg-surface);
}
.c-table tbody tr:last-child td { border-bottom: 0; }
/* Hover de linha. So em ponteiro fino: no toque o hover "gruda" depois do
tap e a linha fica destacada sem motivo. */
@media (hover: hover) {
.c-table--hover tbody tr:hover td { background-color: var(--color-bg-subtle); }
}
.c-table--zebra tbody tr:nth-child(even) td { background-color: var(--color-bg-subtle); }
/* Cabecalho preso ao rolar. Historico de operacoes tem centenas de linhas;
sem isto o usuario perde a referencia da coluna na terceira tela. */
.c-table--sticky thead th {
position: sticky;
top: 0;
z-index: var(--z-base);
box-shadow: inset 0 -1px 0 var(--color-border);
}
}
/* --------------------------------------------------------------------------
Alinhamento e tipo de coluna
-------------------------------------------------------------------------- */
.c-table__num,
.c-table td[data-type="num"],
.c-table th[data-type="num"] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
@media (min-width: 720px) {
/* Numero alinhado a direita e o que deixa a virgula na mesma coluna
vertical — e o que permite comparar ordens de grandeza de relance. */
.c-table td[data-type="num"],
.c-table th[data-type="num"] { text-align: right; }
.c-table td[data-type="center"],
.c-table th[data-type="center"] { text-align: center; }
.c-table th[data-type="actions"],
.c-table td[data-type="actions"] { text-align: right; width: 1%; white-space: nowrap; }
}
/* Ticker: monoespacado, caixa alta. PETR4 e PETRA4 precisam ter a mesma
largura por caractere para nao parecerem o mesmo papel. */
.c-table__ticker {
font-family: var(--font-mono);
font-weight: var(--fw-bold);
letter-spacing: 0;
text-transform: uppercase;
}
/* Linha de total. Sempre a ultima, sempre com borda superior grossa. */
.c-table tfoot td {
padding: var(--pad-cell-y) var(--pad-cell-x);
border-top: 2px solid var(--color-border-strong);
font-weight: var(--fw-bold);
background-color: var(--color-bg-subtle);
}
/* Linha de operacao em conta simulada. A listra a esquerda nao depende de
cor para ser percebida. */
.c-table tbody tr[data-account="simulated"] td:first-child {
box-shadow: inset 3px 0 0 var(--color-sim);
}
/* Cabecalho ordenavel. A seta e desenhada com borda, sem fonte de icone. */
.c-table th[aria-sort] { cursor: pointer; user-select: none; }
.c-table th[aria-sort]:hover { color: var(--color-text-primary); }
.c-table th[aria-sort="ascending"]::after,
.c-table th[aria-sort="descending"]::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: var(--sp-2);
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
vertical-align: 2px;
}
.c-table th[aria-sort="ascending"]::after { transform: rotate(-135deg); vertical-align: -1px; }
.c-table th[aria-sort="descending"]::after { transform: rotate(45deg); }
/* --------------------------------------------------------------------------
Rolagem horizontal de ultimo recurso
Para tabela de importacao, que tem colunas demais para virar cartao. A
caixa rola; a pagina nao.
-------------------------------------------------------------------------- */
.c-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.c-table-scroll > .c-table { min-width: 720px; }
.c-table-scroll > .c-table thead { display: table-header-group; }
.c-table-scroll > .c-table tbody tr { display: table-row; padding: 0; }
.c-table-scroll > .c-table td { display: table-cell; text-align: left; }
.c-table-scroll > .c-table td::before { content: none; }
/* Legenda da tabela. `caption` e o titulo que o leitor de tela anuncia antes
de entrar na grade — vale mais que o acima dela. */
.c-table caption {
padding: var(--pad-cell-y) var(--pad-cell-x);
text-align: left;
font-size: var(--text-xs);
color: var(--color-text-muted);
caption-side: top;
}
/* ==========================================================================
c-kpi — rotulo, valor grande, delta
Quatro por linha no dashboard: saldo, resultado do mes, win rate, profit
factor. Sao as metricas que justificam a assinatura, entao ganham a
primeira dobra.
========================================================================== */
.c-kpi-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-3);
}
/* 360px: uma coluna. 480px: duas — abaixo disso o valor de 30px quebra. */
@media (min-width: 480px) { .c-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-kpi-row { grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr)); } }
.c-kpi {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
padding: var(--pad-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-bg-surface);
}
.c-kpi__label {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-muted);
}
/* Ajuda do rotulo. "Profit factor" nao e obvio; a explicacao mora na dica e
o ponto de interrogacao so indica que ela existe.
A CAIXA tem 24px porque e o minimo de alvo apontavel (WCAG 2.5.8); o
CIRCULO tem 14px porque e uma marca, nao um botao. Separar os dois evita
a escolha entre um desenho gordo e um alvo pequeno. */
.c-kpi__help {
position: relative;
flex: none;
width: 24px;
height: 24px;
display: grid;
place-items: center;
font-size: 9px;
font-weight: var(--fw-bold);
line-height: 1;
opacity: 0.7;
cursor: help;
}
.c-kpi__help::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border: 1px solid currentColor;
border-radius: var(--radius-pill);
}
.c-kpi__value {
font-size: var(--text-kpi);
font-weight: var(--fw-black);
letter-spacing: var(--tracking-tight);
line-height: var(--lh-tight);
font-variant-numeric: tabular-nums;
color: var(--color-text-primary);
overflow-wrap: anywhere; /* nada de scroll horizontal em 360px */
}
.c-kpi__delta { margin-top: 2px; }
/* Linha de contexto: "vs. mes anterior", "em 42 operacoes". Um KPI sem
referencia e um numero sem significado. */
.c-kpi__foot {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
Variantes de resultado
Pintam o VALOR, nao o cartao. Quatro cartoes coloridos lado a lado viram
um semaforo sem sentido; o dado colorido e o numero.
-------------------------------------------------------------------------- */
.c-kpi--gain .c-kpi__value { color: var(--color-gain-text); }
.c-kpi--loss .c-kpi__value { color: var(--color-loss-text); }
.c-kpi--neutral .c-kpi__value { color: var(--color-text-primary); }
/* Barra fina no topo, como reforco nao cromatico da variante. */
.c-kpi--gain,
.c-kpi--loss { position: relative; overflow: hidden; }
.c-kpi--gain::before,
.c-kpi--loss::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
}
.c-kpi--gain::before { background-color: var(--color-gain); }
.c-kpi--loss::before { background-color: var(--color-loss); }
/* --------------------------------------------------------------------------
Destaque
UM cartao por tela, no maximo: o saldo da conta. Gradiente da marca com
tinta escura (branco sobre o gradiente da 2,05:1).
-------------------------------------------------------------------------- */
.c-kpi--accent {
border-color: transparent;
background-image: var(--color-brand-gradient);
color: var(--color-text-on-brand);
box-shadow: var(--shadow-1);
}
.c-kpi--accent .c-kpi__label,
.c-kpi--accent .c-kpi__foot,
.c-kpi--accent .c-kpi__value,
.c-kpi--accent .c-delta { color: var(--color-text-on-brand); }
.c-kpi--accent .c-kpi__label,
.c-kpi--accent .c-kpi__foot { opacity: 0.78; }
/* --------------------------------------------------------------------------
Dica flutuante do rotulo
Aparece no hover E no foco — dica que so responde a mouse nao existe para
quem navega por teclado. O texto vem de um no HTML (traduzivel),
nao de `content: attr(...)`, que leitor de tela nao le de forma confiavel.
-------------------------------------------------------------------------- */
.c-tooltip {
position: absolute;
bottom: calc(100% + var(--sp-2));
left: 50%;
transform: translateX(-50%);
z-index: var(--z-dropdown);
width: max-content;
max-width: 240px;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
background-color: var(--color-bg-inverse);
color: var(--color-text-inverse);
font-size: var(--text-xs);
font-weight: var(--fw-regular);
line-height: var(--lh-snug);
text-transform: none;
letter-spacing: 0;
text-align: left;
box-shadow: var(--shadow-2);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.c-kpi__help:hover .c-tooltip,
.c-kpi__help:focus-visible .c-tooltip,
.c-kpi__help:focus-within .c-tooltip { opacity: 1; visibility: visible; }
/* Miniatura de serie no rodape do cartao. O contorno vem de um SVG inline
na view; aqui so a caixa. */
.c-kpi__spark {
margin-top: var(--sp-2);
height: 34px;
width: 100%;
}
.c-kpi__spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* ==========================================================================
c-signal — semaforo de risco
--------------------------------------------------------------------------
Este componente decide se a pessoa continua operando no dia. Por isso ele
e o unico do sistema com TRES canais redundantes obrigatorios:
COR verde / ambar / vermelho
FORMA circulo / triangulo / octogono (clip-path, sem fonte de icone)
TEXTO "Dentro do limite" / "Atencao" / "Pare"
Cor sozinha nao comunica: ~8% dos homens tem alguma deficiencia de
percepcao de vermelho e verde, e essa e exatamente a faixa de cor que o
semaforo usa. As formas sao as do transito por razao de familiaridade —
octogono ja significa "pare" antes de qualquer leitura.
O rotulo textual NAO e opcional e vem do HTML (lang/), nunca de `content:`.
========================================================================== */
.c-signal {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--pad-card);
border: 1px solid var(--color-border);
border-left-width: 4px;
border-radius: var(--radius-md);
background-color: var(--color-bg-surface);
}
.c-signal__mark {
flex: none;
width: 28px;
height: 28px;
margin-top: 1px;
background-color: currentColor;
}
.c-signal__body { min-width: 0; }
.c-signal__label {
display: block;
font-size: var(--text-lg);
font-weight: var(--fw-black);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-snug);
}
.c-signal__detail {
margin-top: var(--sp-1);
font-size: var(--text-sm);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
.c-signal__detail .c-money { color: inherit; }
/* --------------------------------------------------------------------------
Estados
O seletor e `data-state` e nao classe modificadora: o estado vem do
servidor como dado, e um atributo de dado evita a classe orfa quando o
valor muda.
-------------------------------------------------------------------------- */
.c-signal[data-state="go"] {
border-color: var(--color-gain-border);
border-left-color: var(--color-signal-go);
background-color: var(--color-signal-go-subtle);
color: var(--color-signal-go-text);
}
.c-signal[data-state="go"] .c-signal__mark { clip-path: circle(50% at 50% 50%); }
.c-signal[data-state="caution"] {
border-color: var(--color-warn-border);
border-left-color: var(--color-signal-caution);
background-color: var(--color-signal-caution-subtle);
color: var(--color-signal-caution-text);
}
.c-signal[data-state="caution"] .c-signal__mark {
clip-path: polygon(50% 2%, 100% 98%, 0% 98%);
}
.c-signal[data-state="stop"] {
border-color: var(--color-loss-border);
border-left-color: var(--color-signal-stop);
background-color: var(--color-signal-stop-subtle);
color: var(--color-signal-stop-text);
}
/* Octogono. Vertices em 29,3% (1 - 1/sqrt(2) / ... ) — o valor exato do
octogono regular; arredondar para 30% deforma visivelmente no tamanho 28px. */
.c-signal[data-state="stop"] .c-signal__mark {
clip-path: polygon(
29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%,
70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%
);
}
/* No estado "pare" o bloco inteiro ganha hachura. E o quarto canal: se a
tela estiver em preto e branco e as formas passarem despercebidas, a
textura ainda diz que aquele bloco nao e como os outros. */
.c-signal[data-state="stop"] {
background-image: repeating-linear-gradient(
135deg,
transparent 0 9px,
var(--color-signal-stop-subtle) 9px 18px
);
}
/* --------------------------------------------------------------------------
Barra de consumo do limite
"Voce usou 72% do limite de perda do dia." O numero e o texto; a barra e o
relance.
-------------------------------------------------------------------------- */
.c-signal__gauge {
position: relative;
margin-top: var(--sp-3);
height: 8px;
border-radius: var(--radius-pill);
background-color: var(--color-neutral-subtle);
overflow: hidden;
}
.c-signal__fill {
height: 100%;
border-radius: inherit;
background-color: currentColor;
/* A largura vem do style inline com o percentual calculado no PHP.
Transicao curta para quando a tela atualiza sem recarregar. */
transition: width var(--dur-slow) var(--ease-in-out);
}
/* Marca do limite dentro da barra, para quando a regra tem dois patamares
(alerta em 70%, corte em 100%). */
.c-signal__threshold {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--color-text-primary);
opacity: 0.45;
}
/* --------------------------------------------------------------------------
Versao compacta — cabe na barra de topo e na sidebar
-------------------------------------------------------------------------- */
.c-signal--inline {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3);
border-width: 1px;
border-left-width: 3px;
border-radius: var(--radius-pill);
background-image: none;
}
.c-signal--inline .c-signal__mark { width: 14px; height: 14px; margin: 0; }
.c-signal--inline .c-signal__label { font-size: var(--text-xs); font-weight: var(--fw-bold); }
.c-signal--inline .c-signal__detail { display: none; }
/* Lista de regras avaliadas — a tela de regras de risco mostra cada regra
com o proprio estado. */
.c-signal-list { display: grid; gap: var(--sp-2); }
.c-signal-list .c-signal { padding: var(--sp-3) var(--pad-card); }
/* ==========================================================================
c-message — mensagem flash
Barra colorida de 4px a esquerda, icone, texto. E o formato do sistema
atual e ele funciona: a barra identifica o tipo na visao periferica sem
colorir o card inteiro.
========================================================================== */
.c-message {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-neutral-border);
border-radius: var(--radius-sm);
background-color: var(--color-bg-surface);
box-shadow: var(--shadow-1);
font-size: var(--text-md);
line-height: var(--lh-snug);
color: var(--color-text-secondary);
}
.c-message + .c-message { margin-top: var(--sp-3); }
.c-message__icon {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--color-neutral-text);
}
.c-message__body { min-width: 0; flex: 1; }
.c-message__title {
display: block;
font-weight: var(--fw-bold);
color: var(--color-text-primary);
margin-bottom: 2px;
}
.c-message__body a { color: var(--color-text-link); text-decoration: underline; }
.c-message__close {
flex: none;
width: var(--control-h-sm);
height: var(--control-h-sm);
margin: -4px -6px -4px 0;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
}
.c-message__close:hover { background-color: var(--color-bg-subtle); color: var(--color-text-primary); }
/* --------------------------------------------------------------------------
Tons
O fundo continua sendo a superficie, nao a cor do tom: mensagem com fundo
colorido inteiro disputa atencao com os numeros da tela, e a tela e sobre
os numeros.
-------------------------------------------------------------------------- */
.c-message--success { border-left-color: var(--color-gain); }
.c-message--success .c-message__icon { color: var(--color-gain-text); }
.c-message--info { border-left-color: var(--color-info); }
.c-message--info .c-message__icon { color: var(--color-info-text); }
.c-message--warning { border-left-color: var(--color-warn); }
.c-message--warning .c-message__icon { color: var(--color-warn-text); }
/* Erro e o unico com fundo tenue: e a unica mensagem que NAO pode passar
despercebida. Ver a nota de perda x erro em themes/light.css — aqui o
vermelho e o vivo (--color-danger), nao o de prejuizo. */
.c-message--error {
border-left-color: var(--color-danger);
background-color: var(--color-danger-subtle);
border-color: var(--color-danger-border);
}
.c-message--error .c-message__icon { color: var(--color-danger-text); }
/* Container onde o JS injeta a resposta do formulario. Sem `:not(:empty)` a
margem aparece mesmo com a caixa vazia. */
.c-message-slot:not(:empty) { margin-bottom: var(--sp-4); }
/* --------------------------------------------------------------------------
Faixa de aviso de plano / trial
Largura total, acima do conteudo. Mais discreta que uma mensagem porque
fica na tela o tempo todo.
-------------------------------------------------------------------------- */
.c-banner {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-sm);
background-color: var(--color-warn-subtle);
color: var(--color-warn-text);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
}
.c-banner__actions { margin-left: auto; display: flex; gap: var(--sp-2); }
@media (pointer: coarse) {
.c-message__close { width: var(--tap-min); height: var(--tap-min); }
}
.c-banner--info {
background-color: var(--color-info-subtle);
color: var(--color-info-text);
box-shadow: inset 0 0 0 1px var(--color-info-border);
}
.c-banner--brand { background-color: var(--color-brand-subtle); color: var(--color-brand-text); }
/* ==========================================================================
c-modal
O CSS cobre backdrop, caixa, rolagem e o estado aberto/fechado.
Esc, trap de foco e devolucao do foco ao elemento que abriu sao do JS
(assets/js/), como manda o contrato. O que o CSS garante e que o modal
NUNCA fique com conteudo inacessivel: a caixa rola, a pagina nao.
--------------------------------------------------------------------------
Duas formas de marcar aberto, porque as duas aparecem no produto:
|