/* /home/segundo/contabitcoin/site/static/plataforma.css
contabitcoin • Plataforma Web (UX estilo conta bancária)
VISÃO GERAL
---------------------------------------------------------------------------
Esta folha de estilos define o padrão visual da plataforma web da
contabitcoin, com foco em:
• Aparência de “conta bancária” (séria, limpa, legível).
• Layout simples: topbar fixa + sidebar + área principal.
• Componentes reutilizáveis (cards, tabelas, formulários, KPIs).
• Escala tipográfica única para toda a plataforma.
• Um único padrão de botão (.btn) para ações principais, incluindo
estado de “processando” com spinner discreto.
=== ESCALA TIPOGRÁFICA (OBRIGATÓRIO SEGUIR) ================================
• Texto base (parágrafos, labels, navegação, inputs):
font-size: 16px → NÃO ALTERAR no /.
• Texto auxiliar (.small):
font-size: 14px
Uso: descrições, dicas, legendas, textos de apoio.
• Badges de status (.badge / .badge.ok):
font-size: 13px
Uso: “Confirmada”, “Pendente”, “Ativa”, etc.
• Títulos (usar HTML sem alterar font-size na mão):
h1 → 24px (títulos de página mais importantes)
h2 → 20px (título principal do card .panel)
h3 → 16px (títulos de seções dentro do card)
Regra: **não criar tamanhos de fonte soltos** via `style="font-size:…"`:
– use o texto base (16px),
– use `.small` quando precisar de menor destaque,
– use `.badge` para estados,
– use h1/h2/h3 para títulos.
=== BOTÕES (PADRÃO ÚNICO + ESTADO DE PROCESSAMENTO) =======================
• Botão padrão da plataforma:
.btn → fundo escuro, texto claro (var(--btn-bg) / var(--btn-ink)), fonte bold.
• Para TODAS as ações principais (ex.: “Receber agora”, “Enviar BTC”,
“Acessar Lightning”, “Ativar licença”, “Confirmar e enviar”):
→ usar sempre:
• Botão secundário:
.btn-outline → fundo claro, borda neutra.
Uso apenas para ações de menor prioridade (ex.: “Limpar”, “Cancelar”),
especialmente quando estiver ao lado de um .btn principal.
• Estado “processando” (spinner + bloqueio de duplo clique):
– O CSS define a classe `.btn--busy` com spinner discreto.
– O texto do botão deve estar SEMPRE dentro de:
– O JS global (ctbSetButtonBusy / ctbWithBusyButton) cuida de:
• adicionar/remover .btn--busy,
• trocar o rótulo pelo `data-busy-label`,
• desabilitar o botão durante a operação.
Exemplo de uso em JS:
const btn = document.getElementById("meu-botao");
btn.addEventListener("click", () => {
ctbWithBusyButton(btn, async () => {
await fetch("/minha-rota");
});
});
=== BOTÕES ESPECÍFICOS DE TAXA DE REDE (ENVIO BTC) =======================
• Para os níveis de fee do envio BTC utilize SEMPRE:
(se quiser destacar menos)
• As classes `.fee-eco`, `.fee-pad`, `.fee-rapid` já definem as cores
padrão (verde / azul / laranja marca) e mantêm o texto sempre branco
e em negrito, para consistência com os demais botões.
=== CORES PRINCIPAIS (NÃO CRIAR NOVAS CORES LIVRES) =======================
• Fundo geral: var(--bg)
• Fundo de cards: var(--bg-alt)
• Texto principal: var(--ink)
• Texto secundário: var(--muted)
• Linhas/bordas: var(--line)
• Destaque (marca): var(--accent) / var(--accent-soft)
Qualquer nova cor deve ser criada como token em :root (ex.: --warn-bg),
**nunca** usar valores soltos (#123456) espalhados em estilos inline.
=== PADRÃO PARA NOVAS PÁGINAS (TEMPLATE BASE) =============================
Em novos templates Jinja para o painel use sempre:
{% extends "plataforma.html" %}
{% block content %}
Título da página
Descrição curta do propósito da tela (1–2 frases, texto base ou .small).
Título do indicador
Descrição curta.
Rótulo:Valor
…
…
{% endblock %}
• Use .panel como “card” principal de cada view.
• Use .kpi-grid + .kpi-box para indicadores (saldo, status, etc.).
• Use .table para qualquer listagem tabular (extratos, faturas, etc.).
• Use .btn e .btn-outline conforme descrito acima.
• Use .notice-ok e .notice-err para mensagens de sucesso/erro.
• Use o helper de botão busy (ctbWithButton/ctbSetButtonBusy) em toda
ação assíncrona que faz requisição à API ou ao backend.
Responsividade:
– Usar grids com unidades relativas (%, fr, minmax).
– Envolver tabelas largas em contêiner com `overflow-x:auto`.
– Evitar `width` fixo em px para componentes de conteúdo.
OBSERVAÇÃO
---------------------------------------------------------------------------
Este arquivo define apenas a aparência e os padrões de interação. A
navegação/HTMX e a lógica de negócio são controladas por
`plataforma_app.py` e pelos scripts JS auxiliares, que devem seguir
estas convenções (tipografia, botões, cores e estado de carregamento)
para manter uma experiência consistente e confiável, no padrão de
um internet banking.
*/
:root {
/* Layout */
--topbar-h: 56px;
--sidebar-w: 200px;
/* Cores base */
--bg: #f5f5f7;
--bg-alt: #ffffff;
--ink: #111827;
--muted: #6b7280;
--line: #e5e7eb;
--bg-soft: #f3f4f6; /* fundo claro para cards “soft” (ex.: primeiros passos) */
/* Marca / destaque (BTC laranja) */
--accent: #f7931a;
--accent-soft: #fef3c7;
/* Estados */
--hover: #f3f4f6;
--active: #e5f3ff;
--focus-ring: #3b82f6;
/* Botões – padrão escuro, sério, estilo internet banking */
--btn-bg: #111827;
--btn-bg-alt: #ffffff;
--btn-ink: #f9fafb;
--btn-border: #111827;
/* Tipografia */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Radius / shadow */
--radius-lg: 12px;
--radius-md: 8px;
--shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.12);
}
/* ------------------------------------------------------------------------- */
/* RESET BÁSICO */
/* ------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
font-size: 16px; /* tamanho base da plataforma (NÃO ALTERAR) */
}
body {
overflow: hidden;
}
/* ------------------------------------------------------------------------- */
/* UTILITÁRIOS DE TEXTO */
/* ------------------------------------------------------------------------- */
.muted {
color: var(--muted);
}
/* Texto auxiliar – usar para descrições e dicas */
.small {
font-size: 14px;
}
/* Badges de status (ex.: Confirmada, Pendente) */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 999px;
font-size: 13px;
border: 1px solid var(--line);
background: #f9fafb;
}
.badge.ok {
border-color: #16a34a;
color: #166534;
background: #dcfce7;
}
/* ------------------------------------------------------------------------- */
/* TOPBAR */
/* ------------------------------------------------------------------------- */
.topbar {
height: var(--topbar-h);
background: #ffffff;
border-bottom: none;
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
.topbar .brand {
display: flex;
align-items: center;
gap: 8px;
}
.topbar .brand-logo {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff; /* “₿” branco, mais limpo e legível */
font-weight: 800;
font-size: 18px;
}
.topbar .brand span {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.15px;
}
.topbar .usernav {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.topbar .usernav a {
color: var(--muted);
text-decoration: none;
}
.topbar .usernav a:hover {
text-decoration: underline;
}
/* ------------------------------------------------------------------------- */
/* LAYOUT PRINCIPAL (SIDEBAR + CONTEÚDO) */
/* ------------------------------------------------------------------------- */
.layout {
position: fixed;
top: var(--topbar-h);
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
overflow: hidden;
}
/* ------------------------------------------------------------------------- */
/* SIDEBAR */
/* ------------------------------------------------------------------------- */
.sidebar {
background: #ffffff;
border-right: none;
padding: 10px 12px;
overflow: auto;
-webkit-overflow-scrolling: touch;
/* herda font-size base (16px) para melhor leitura */
}
.sidebar .group {
margin-bottom: 12px;
}
.sidebar .group-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 8px 0 4px 4px;
color: var(--muted);
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar li {
margin: 2px 0;
}
.sidebar a {
display: block;
padding: 4px 10px;
border-radius: var(--radius-md);
color: var(--ink);
font-weight: 400;
text-decoration: none;
transition: box-shadow 0.15s ease, background 0.12s ease, transform 0.08s ease;
}
.sidebar a:hover {
background: var(--hover);
box-shadow: var(--shadow-soft);
transform: translateY(-0.5px);
}
.sidebar a[aria-current="page"],
.sidebar a.active {
background: var(--accent-soft);
color: var(--ink);
font-weight: 500;
}
.sidebar a:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--focus-ring);
}
/* Pontinho de alerta (não usamos ainda, mas fica pronto) */
.nav-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 999px;
background: #dc2626;
margin-left: 6px;
box-shadow: 0 0 0 1px #fff;
vertical-align: middle;
}
/* ------------------------------------------------------------------------- */
/* CONTEÚDO PRINCIPAL */
/* ------------------------------------------------------------------------- */
.content {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
background: var(--bg);
/* Permite que o “card principal” ocupe a altura útil quando a página é curta */
display: flex;
flex-direction: column;
min-height: 100%;
}
.content > :first-child {
margin-top: 0;
}
/* Quando a view renderiza apenas um painel (padrão das subpáginas),
fazemos ele “esticar” para ocupar a altura útil da viewport.
Isso passa ar de internet banking (sem “vazio” embaixo). */
.content > section.panel:only-child {
flex: 1 1 auto;
min-height: calc(100vh - var(--topbar-h) - 32px); /* 32px = padding vertical do .content (16 + 16) */
}
/* ------------------------------------------------------------------------- */
/* COMPONENTES BÁSICOS */
/* ------------------------------------------------------------------------- */
section.panel {
background: var(--bg-alt);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: 16px 18px;
}
/* Títulos – use h2 como título principal da página */
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
p {
margin: 0 0 8px 0;
}
a {
color: var(--accent);
}
a:hover {
color: #b45309;
}
/* ------------------------------------------------------------------------- */
/* TABELAS (extratos, listas, etc.) */
/* ------------------------------------------------------------------------- */
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table th,
.table td {
padding: 6px 8px;
border-bottom: 1px solid var(--line);
}
.table thead th {
font-weight: 600;
background: #f9fafb;
}
/* ------------------------------------------------------------------------- */
/* FORMULÁRIOS */
/* ------------------------------------------------------------------------- */
label {
display: block;
font-size: 14px;
margin-bottom: 6px;
}
/* Inputs padrão da plataforma */
.input {
width: 100%;
padding: 6px 8px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
font-size: 16px;
margin-top: 2px;
}
.input:focus-visible {
outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
/* ------------------------------------------------------------------------- */
/* BOTÕES */
/* ------------------------------------------------------------------------- */
/* Botão principal (padrão ÚNICO para ações do usuário) */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--btn-border);
background: var(--btn-bg);
color: var(--btn-ink);
font-size: 14px;
font-weight: 600; /* texto branco em negrito para todos os botões */
cursor: pointer;
text-decoration: none;
transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.btn:hover {
background: #d97706; /* laranja mais escuro no hover */
box-shadow: var(--shadow-soft);
transform: translateY(-0.5px);
}
.btn:disabled {
opacity: 0.6;
cursor: default;
box-shadow: none;
transform: none;
}
/* Botão secundário (EVITAR em telas PF; usar .btn sempre que possível) */
.btn-outline {
background: var(--btn-bg-alt);
color: var(--ink);
border-color: var(--line);
}
.btn-outline:hover {
background: var(--hover);
}
/* Estado “processando” para botões (click confirmado, aguardando resposta) */
.btn--busy {
position: relative;
pointer-events: none; /* evita duplo clique */
opacity: 0.85;
}
/* texto some visualmente, o rótulo vem do ::after */
.btn--busy span.btn-label {
visibility: hidden;
}
/* rótulo de processamento */
.btn--busy::after {
content: attr(data-busy-label);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--btn-ink);
font-weight: 600;
}
/* pequeno indicador circular, discreto, ao lado do texto */
.btn--busy::before {
content: "";
position: absolute;
left: 12px;
width: 12px;
height: 12px;
border-radius: 999px;
border: 2px solid rgba(249, 250, 251, 0.5);
border-top-color: var(--btn-ink);
animation: btn-spinner 0.7s linear infinite;
}
/* animação do “spinner” discreto */
@keyframes btn-spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Botões de perfil de taxa de rede (envio BTC) */
.fee-eco {
background: #15803d; /* verde mais sóbrio */
border-color: #15803d;
color: var(--btn-ink);
font-weight: 600; /* texto branco em negrito */
}
.fee-pad {
background: #1d4ed8; /* azul mais sóbrio */
border-color: #1d4ed8;
color: var(--btn-ink);
font-weight: 600;
}
.fee-rapid {
background: var(--accent); /* mesmo laranja do ícone contabitcoin */
border-color: var(--accent);
color: var(--btn-ink);
font-weight: 600;
}
/* ------------------------------------------------------------------------- */
/* AVISOS (mensagens de erro/sucesso) */
/* ------------------------------------------------------------------------- */
.notice-err {
border-radius: var(--radius-md);
border: 1px solid #fecaca;
background: #fee2e2;
color: #991b1b;
padding: 6px 8px;
font-size: 13px;
margin-bottom: 8px;
}
.notice-ok {
border-radius: var(--radius-md);
border: 1px solid #bbf7d0;
background: #dcfce7;
color: #166534;
padding: 6px 8px;
font-size: 13px;
margin-bottom: 8px;
}
/* ------------------------------------------------------------------------- */
/* GRID DE KPIs (cards de métricas) */
/* ------------------------------------------------------------------------- */
.kpi-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* Responsividade: em telas médias, 2 colunas; em telas pequenas, 1 coluna */
@media (max-width: 980px) {
.kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.kpi-grid {
grid-template-columns: 1fr;
}
}
.kpi-box {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 10px 12px;
background: #fff;
}
.kpi-box h3 {
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 700;
}
.kpi-list {
list-style: none;
padding: 0;
margin: 6px 0 0 0;
font-size: 14px;
}
.kpi-list li {
display: flex;
justify-content: space-between;
gap: 8px;
margin: 2px 0;
}
.kpi-list span {
color: var(--muted);
}
/* ------------------------------------------------------------------------- */
/* LOGIN / TELAS PÚBLICAS */
/* ------------------------------------------------------------------------- */
body.login {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top left, #fef3c7 0, #f5f5f7 40%, #e5e7eb 100%);
}
.login .wrap {
max-width: 360px;
width: 100%;
}
.login .card {
background: #ffffff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: 16px 18px 18px;
width: 100%;
}
.logo-login {
max-width: 120px;
margin-bottom: 8px;
}