/* /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 “internet banking” (séria, limpa, legível). • Layout full-viewport (ocupa 100% da área visível da tela). • Topbar fixa + sidebar + área principal com rolagem apenas no conteúdo. • Componentes reutilizáveis (cards, tabelas, formulários, KPIs). • Escala tipográfica única para toda a plataforma. • Padrões de botões e modais (popups) consistentes com estado de “processando” e UX profissional. === LAYOUT FULL-VIEWPORT (PADRÃO DA PLATAFORMA) =========================== A plataforma deve ocupar sempre toda a viewport, se ajustando à resolução do usuário sem depender de alturas/larguras fixas de conteúdo. Regras: • html, body: height: 100% • body: overflow: hidden → evita scrollbar dupla no navegador • .layout: ocupa o espaço restante abaixo da topbar • .sidebar: overflow: auto → rolagem do menu quando necessário • .content: overflow: auto → rolagem do conteúdo (subpáginas/painel) • As telas devem “respirar” com padding e grids responsivos, mas sem desperdiçar área útil (use width/height relativos e minmax). Observação: • Evite wrappers que criem rolagem extra. • Tabelas longas: usar overflow-x:auto no contêiner da tabela. • Conteúdos muito longos: a rolagem deve ocorrer na .content. === 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 e caixas KPI) 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. • Evitar negrito em textos “muted” e correlações fiduciárias, salvo quando o próprio componente exigir (ex.: valor principal em BTC). === CORES PRINCIPAIS (NÃO CRIAR 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) Regra: • Qualquer nova cor deve ser criada como token em :root. • NÃO usar valores soltos (#123456) espalhados em inline style. === BORDAS E “LINHAS” (VISUAL LIMPO) ===================================== A UI deve manter estética limpa, sem “linhas duras” desnecessárias. Padrão: • Topbar: sem border-bottom (usar shadow suave) • Sidebar: sem border-right (usar separação visual por espaçamento/shadow se necessário) • Cards e caixas: bordas leves (var(--line)) + radius consistente === BOTÕES (PADRÕES OFICIAIS) ============================================= Botões SEMPRE usam + data-busy-label quando houver operação assíncrona (fetch/HTMX/submit). 1) Ação principal • .btn → fundo escuro, texto claro, fonte 600. • Uso: ações principais (Continuar, Confirmar, Verificar na rede, Enviar, etc.) Exemplo: 2) Ação secundária • .btn-outline → fundo claro + borda neutra. • Uso: cancelar/voltar/ações auxiliares (quando ao lado da ação principal). 3) Ação crítica (perigosa) • .btn.btn-danger → MESMA “força” do .btn, porém vermelho. • Uso: remoção/apagamento/ações irreversíveis (ex.: remover carteira do navegador). Exemplo: 4) Botão compacto (ações raras) • .btn-outline.btn-compact → menor e discreto (ex.: Baixar PDF, ações no rodapé). 5) Botão mini (ações de tabela) • .btn-mini → para “Arquivar”, “Reativar”, “Excluir item”, etc. • Usado em colunas de ações e controles pequenos. 6) Estado “processando” (spinner + bloqueio de duplo clique) • `.btn--busy` é o estado visual oficial. • O texto do botão deve estar SEMPRE dentro de: Texto • O rótulo durante busy vem de `data-busy-label`. JS global (plataforma.html) pode ser usado: ctbSetButtonBusy(btn, true|false) ctbWithBusyButton(btn, async () => { ... }) Observação: • Evite alert/prompt/confirm para ações do app (eles quebram a estética). === POPUPS / MODAIS (PADRÃO OFICIAL) ====================================== A plataforma NÃO deve usar `alert()`, `confirm()` ou `prompt()` em fluxos do app (eles quebram o padrão “banking” e não seguem a identidade visual). === BOTÕES ESPECÍFICOS DE TAXA DE REDE (ENVIO BTC) ======================== • Para níveis de fee do envio BTC utilize SEMPRE: === 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 %} Regras de responsividade: • Usar grids com unidades relativas (%, fr, minmax). • Envolver tabelas largas em contêiner com `overflow-x:auto`. • Evitar width/height fixos em px para componentes de conteúdo. Acessibilidade e consistência (obrigatório): • Sempre usar :focus-visible onde for aplicável (links, botões, modais). • Sempre evitar múltiplos binds (use dataset.bound… para HTMX). • Preferências do usuário (som etc.) devem persistir em localStorage. 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, modais, cores, layout full-viewport e estado de carregamento) para manter uma experiência consistente e confiável, no padrão de um internet banking. Padrões canonizados: • Conversão fiduciária em histórico (extrato / últimos movimentos): BRL/USD sempre “travados” no momento da operação: *_confirm. Se não existir *_confirm, mostramos “—”. • Conversão fiduciária em saldos (visão “agora”): BRL/USD por cotação atual (preco_btc_brl/usd). • Sem tecnicidade desnecessária: Sem “n confirmações”, sem jargões. Apenas “Confirmada / Pendente / Falha / Concluído”. • Visual banking: Badges, textos curtos, KPIs limpos, sem poluição na mesma linha. • Botões: Sempre com + data-busy-label quando assíncrono. */ :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: #ff751f; --accent-soft: #fef3c7; /* Estados */ --hover: #f3f4f6; --active: #e5f3ff; --focus-ring: #3b82f6; /* Avisos (warning) */ --warn-bg: var(--accent-soft); --warn-border: #f59e0b; --warn-ink: #92400e; /* Ação crítica (danger) */ --danger: #dc2626; --danger-hover: #b91c1c; /* Modal (padrão oficial contabitcoin) */ --modal-backdrop: rgba(15, 23, 42, 0.45); --modal-shadow: 0 10px 25px rgba(15, 23, 42, 0.25); --modal-z: 60; /* 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); /* Compat: páginas públicas (ex.: /pay/) */ --card: var(--bg-alt); --shadow: var(--shadow-soft); } /* ------------------------------------------------------------------------- */ /* 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; } .badge.err { border-color: #dc2626; color: #991b1b; background: #fee2e2; } /* ------------------------------------------------------------------------- */ /* 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; row-gap: 4px; flex-wrap: wrap; justify-content: flex-end; 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; } /* Link com badge (ex.: Negociações / Conversas) */ .sidebar a.nav-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar a.nav-badge .nav-badge__label { min-width: 0; } .badge.badge--mini { font-size: 12px; padding: 1px 6px; } .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; } /* Com o slot de notices, o painel pode deixar de ser o :first-child */ .content > #ctb-global-notices + section.panel { margin-top: 0; } /* Tratar notices como “neutro” e manter o comportamento banking */ .content > #ctb-global-notices:only-child { flex: 0 0 auto; } .content > #ctb-global-notices + section.panel:last-child { flex: 0 0 auto; min-height: calc(100vh - var(--topbar-h) - 32px); } /* 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: 0 0 auto; /* deixa o painel crescer com o conteúdo */ min-height: calc(100vh - var(--topbar-h) - 32px); /* mantém o visual “banking” quando a página é curta */ } /* Slot global de notices no topo do conteúdo */ #ctb-global-notices { margin-bottom: 10px; } #ctb-global-notices:empty { display: none; } /* ------------------------------------------------------------------------- */ /* 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); } /* Importante: não aplicar hover "laranja" em links que são botões */ a:hover:not(.btn):not(.btn-outline):not(.btn-mini) { 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 */ /* ------------------------------------------------------------------------- */ /* Base comum (IMPORTANTE): .btn-outline também precisa do “corpo” do botão (padding, radius, etc.) senão o browser aplica estilo nativo e fica “fora do padrão”. */ .btn, .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid var(--btn-border); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease; white-space: nowrap; } /* Primário */ .btn { background: var(--btn-bg); color: var(--btn-ink); } .btn:hover { background: #d97706; box-shadow: var(--shadow-soft); transform: translateY(-0.5px); } /* Crítico */ .btn.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--btn-ink); } .btn.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); box-shadow: var(--shadow-soft); transform: translateY(-0.5px); } /* Secundário (outline) */ .btn-outline { background: var(--btn-bg-alt); color: var(--ink); border-color: var(--line); } .btn-outline:hover { background: var(--hover); box-shadow: var(--shadow-soft); transform: translateY(-0.5px); } .btn:disabled, .btn-outline:disabled { opacity: 0.6; cursor: default; box-shadow: none; transform: none; } /* Botão compacto (ações raras) */ .btn-compact { padding: 4px 10px; font-size: 13px; border-radius: 999px; } /* Botão pequeno (tabelas/ações rápidas) */ .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 10px; min-height: 30px; } /* Botão mini (ações de tabela antigas: Arquivar/Reativar etc.) */ .btn-mini { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff; color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease; white-space: nowrap; } .btn-mini:hover { background: var(--hover); box-shadow: var(--shadow-soft); transform: translateY(-0.5px); } .btn-mini:disabled { opacity: 0.6; cursor: default; box-shadow: none; transform: none; } /* QR clicável (copiar QR / fallback copiar endereço) */ .qr-click { cursor: pointer; transition: box-shadow 0.12s ease, transform 0.08s ease; } .qr-click:hover { box-shadow: var(--shadow-soft); transform: translateY(-0.5px); } .qr-click:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } /* Link de ação pequeno (ex.: Copiar QR Code) */ .link-action { text-decoration: none; color: var(--muted); } .link-action:hover { text-decoration: underline; color: var(--ink); } /* ------------------------------------------------------------------------- */ /* MODAL CONTABITCOIN (PADRÃO OFICIAL DE POPUPS) */ /* ------------------------------------------------------------------------- */ /* Overlay do modal */ .ctb-modal-overlay { display: none; /* JS controla */ position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 80; } /* Caixa do modal */ .ctb-modal { width: calc(100% - 24px); max-width: 560px; margin: 84px auto; background: #ffffff; border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25); padding: 14px 16px; position: relative; } /* Tamanhos */ .ctb-modal--md { max-width: 560px; } .ctb-modal--lg { max-width: 720px; } /* Cabeçalho */ .ctb-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ctb-modal__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .ctb-modal__brand img { width: 24px; height: 24px; border-radius: 6px; } .ctb-modal__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Corpo */ .ctb-modal__body { margin-top: 10px; } .ctb-modal__msg { margin: 0; color: var(--muted); } .ctb-modal__input-wrap { margin-top: 10px; } .ctb-modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; } /* Estados (info/erro/sucesso) */ .ctb-modal__notice { border-radius: var(--radius-md); border: 1px solid var(--line); background: #f9fafb; color: var(--ink); padding: 8px 10px; font-size: 13px; margin-top: 10px; } .ctb-modal__notice--ok { border-color: #bbf7d0; background: #dcfce7; color: #166534; } .ctb-modal__notice--err { border-color: #fecaca; background: #fee2e2; color: #991b1b; } /* 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; } /* Busy em botões outline (mantém contraste em fundo claro) */ .btn-outline.btn--busy { background: var(--hover); border-color: var(--line); } .btn-outline.btn--busy::after { color: var(--ink); } .btn-outline.btn--busy::before { border: 2px solid rgba(17, 24, 39, 0.22); border-top-color: var(--ink); } /* Busy em botões mini (também são fundo claro) */ .btn-mini.btn--busy::after { color: var(--ink); } .btn-mini.btn--busy::before { border: 2px solid rgba(17, 24, 39, 0.22); border-top-color: var(--ink); } /* 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) – estilo internet banking (mantém botão “limpo” e usa apenas acento de cor) */ .btn.fee-btn { /* sobrescreve o hover laranja do .btn e remove fundo escuro */ background: var(--btn-bg-alt); color: var(--ink); border-color: var(--line); font-weight: 600; /* acento lateral padrão (é substituído por cada perfil) */ --fee-color: var(--line); box-shadow: inset 3px 0 0 var(--fee-color); } .btn.fee-btn:hover { background: var(--hover); box-shadow: inset 3px 0 0 var(--fee-color), var(--shadow-soft); } .btn.fee-btn:disabled { background: var(--btn-bg-alt); color: var(--muted); border-color: var(--line); box-shadow: inset 3px 0 0 var(--line); } /* Perfis (apenas definem a cor do acento e a borda) */ .btn.fee-btn.fee-eco { --fee-color: #15803d; border-color: #15803d; } .btn.fee-btn.fee-pad { --fee-color: #1d4ed8; border-color: #1d4ed8; } .btn.fee-btn.fee-rapid { --fee-color: var(--accent); border-color: var(--accent); } /* ------------------------------------------------------------------------- */ /* MODAL (PADRÃO OFICIAL CONTABITCOIN) */ /* ------------------------------------------------------------------------- */ /* Overlay (fundo escuro) */ .ctb-modal-overlay { display: none; /* padrão: fechado */ position: fixed; inset: 0; background: var(--modal-backdrop); z-index: var(--modal-z); padding: 24px 16px; overflow: auto; -webkit-overflow-scrolling: touch; } /* Estado aberto */ .ctb-modal-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; } /* Caixa do modal */ .ctb-modal { width: 100%; max-width: 640px; background: var(--bg-alt); border-radius: var(--radius-lg); box-shadow: var(--modal-shadow); padding: 16px 18px; position: relative; border: 1px solid var(--line); } /* Tamanhos (opcionais) */ .ctb-modal--sm { max-width: 520px; } .ctb-modal--md { max-width: 640px; } .ctb-modal--lg { max-width: 820px; } /* Header (ícone + título) */ .ctb-modal__header { display: flex; align-items: center; gap: 10px; } .ctb-modal__icon { width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; } .ctb-modal__title { margin: 0; font-size: 16px; font-weight: 700; } /* Corpo */ .ctb-modal__body { margin-top: 10px; } .ctb-modal__body p { margin: 0 0 8px 0; } /* Rodapé / ações */ .ctb-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* Botão “X” opcional (se quiser usar no futuro) */ .ctb-modal__close { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line); background: var(--btn-bg-alt); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease; } .ctb-modal__close:hover { background: var(--hover); box-shadow: var(--shadow-soft); transform: translateY(-0.5px); } .ctb-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } /* Acessibilidade: foco visível na caixa */ .ctb-modal:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), var(--modal-shadow); } /* ------------------------------------------------------------------------- */ /* 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; } .notice-warn { border-radius: var(--radius-md); border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); 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; } } /* Grid 2-colunas (usado em telas como “Minhas carteiras”) */ .kpi-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 980px) { .kpi-grid-2 { 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%; } /* Página pública de pagamento (/pay/) Importante: o body global é overflow:hidden para evitar scrollbar dupla no painel, mas a página pública precisa poder rolar em telas menores. */ body.pay-public { overflow: auto; /* override do body { overflow:hidden } */ -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--ink); } /* Links na página pública devem manter padrão de marca */ body.pay-public a { color: var(--accent); text-decoration: none; } body.pay-public a:hover:not(.btn):not(.btn-outline):not(.btn-mini) { color: #b45309; text-decoration: underline; } .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; } /* ------------------------------------------------------------------------- */ /* BACKGROUND ANIMADO DE PALAVRAS (LOGIN) */ /* ------------------------------------------------------------------------- */ body.login { position: relative; /* garante stacking correto */ } /* Camada geral do background */ .login .bg-words { position: fixed; inset: 0; z-index: 0; /* atrás do conteúdo */ pointer-events: none; /* não atrapalha clique/inputs */ overflow: hidden; } /* Duas camadas para dar profundidade */ .login .bg-words__layer { position: absolute; inset: -25vmax; /* "vaza" pra não aparecer borda durante animação */ transform: rotate(-12deg); opacity: 0.30; /* ~70% transparente */ filter: blur(0.2px); mix-blend-mode: multiply; /* fica mais “impresso” no fundo (se preferir, remova) */ } /* A segunda camada é um pouco diferente (parallax leve) */ .login .bg-words__layer--b { opacity: 0.22; transform: rotate(9deg); } /* O “tile” é grande e repetido por wrap */ .login .bg-words__tile { width: 220vmax; height: 220vmax; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 18px 24px; /* cor base do texto do fundo */ color: rgba(17, 24, 39, 0.55); /* animação lenta e contínua */ animation: bgWordsDriftA 140s linear infinite; } .login .bg-words__layer--b .bg-words__tile { color: rgba(247, 147, 26, 0.35); /* um toque de laranja da marca */ animation: bgWordsDriftB 210s linear infinite; } /* Variar tamanhos/ênfases automaticamente */ .login .bg-words__tile span { font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; user-select: none; } /* tamanhos variados (ciclo) */ .login .bg-words__tile span:nth-child(6n + 1) { font-size: 54px; opacity: 0.18; } .login .bg-words__tile span:nth-child(6n + 2) { font-size: 18px; opacity: 0.35; } .login .bg-words__tile span:nth-child(6n + 3) { font-size: 30px; opacity: 0.28; } .login .bg-words__tile span:nth-child(6n + 4) { font-size: 22px; opacity: 0.33; } .login .bg-words__tile span:nth-child(6n + 5) { font-size: 42px; opacity: 0.20; } .login .bg-words__tile span:nth-child(6n + 6) { font-size: 26px; opacity: 0.30; } /* Respeita seu card e conteúdo acima do fundo */ body.login > main.wrap { position: relative; z-index: 1; } /* Movimento contínuo (bem lento) */ @keyframes bgWordsDriftA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18vmax, -14vmax, 0); } } @keyframes bgWordsDriftB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(16vmax, -10vmax, 0); } } /* Acessibilidade: se o usuário preferir menos movimento, desliga animação */ @media (prefers-reduced-motion: reduce) { .login .bg-words__tile { animation: none !important; } } /* HOTFIX: deixar o background de palavras VISÍVEL (cole no FINAL do CSS) */ .login .bg-words { z-index: 0; } body.login > main.wrap { position: relative; z-index: 2; } /* mais presença (sem blend que “apaga” no fundo claro) */ .login .bg-words__layer { opacity: 0.55 !important; /* estava baixo demais */ filter: none !important; mix-blend-mode: normal !important; inset: -12vmax !important; /* ainda “vaza”, mas não some */ } /* cor e “contraste” leves */ .login .bg-words__tile { color: rgba(17, 24, 39, 0.22) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.45); } /* remove a opacidade individual que estava matando o efeito */ .login .bg-words__tile span { opacity: 1 !important; } /* tamanhos continuam variados, mas sem sumir */ .login .bg-words__tile span:nth-child(6n + 1) { font-size: 56px; } .login .bg-words__tile span:nth-child(6n + 2) { font-size: 18px; } .login .bg-words__tile span:nth-child(6n + 3) { font-size: 32px; } .login .bg-words__tile span:nth-child(6n + 4) { font-size: 22px; } .login .bg-words__tile span:nth-child(6n + 5) { font-size: 44px; } .login .bg-words__tile span:nth-child(6n + 6) { font-size: 26px; } /* ------------------------------------------------------------------------- */ /* B2B — COBRANÇAS (faturas.html) — refinamentos “banking” */ /* ------------------------------------------------------------------------- */ .b2b-toolbar { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .b2b-toolbar__text { max-width: 780px; } .b2b-toolbar__actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .b2b-filters { display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(200px, 0.8fr) minmax(200px, 0.8fr); gap: 10px; align-items: end; } @media (max-width: 980px) { .b2b-filters { grid-template-columns: 1fr; } } .b2b-filters__custom { grid-column: 1 / -1; display: none; gap: 10px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .b2b-filters__custom { grid-template-columns: 1fr; } } .b2b-filters__actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .b2b-filters__actions .btn, .b2b-filters__actions .btn-outline { min-width: 140px; } .b2b-row-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; } .b2b-url-preview { margin-top: 6px; font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: nowrap; } .b2b-pagination { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .b2b-pagination__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .b2b-mono-block { margin-top: 6px; border: 1px solid var(--line); background: #ffffff; border-radius: var(--radius-md); padding: 6px 8px; font-size: 13px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break: break-all; } /* ------------------------------------------------------------------------- */ /* COMUNIDADE P2P — LISTAS (CANAIS / DMs) + CHAT (mensagens) */ /* Objetivo: remover CSS inline com Jinja e manter padrão banking */ /* ------------------------------------------------------------------------- */ .p2p-list { display: grid; gap: 8px; } .p2p-item { /* usa o padrão do .btn-outline, só organiza melhor o conteúdo */ text-align: left; justify-content: flex-start; gap: 10px; width: 100%; } .p2p-item__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .p2p-item__title { font-weight: 900; color: var(--ink); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Destaque do item selecionado (sem cor solta, só tokens) */ .p2p-item.is-active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } /* Canal especial (onboarding): verde */ .p2p-item.p2p-item--green.is-active { border-color: #16a34a; box-shadow: inset 3px 0 0 #16a34a; } /* ------------------------------------------------------------------------- */ /* Mensagens (DM / Sala) */ /* ------------------------------------------------------------------------- */ .p2p-msgs { display: flex; flex-direction: column; gap: 2px; } /* Reusa .card, apenas adiciona padding padrão */ .card.p2p-msg { padding: 6px 8px; margin: 0; } /* Header (autor + data + badge) mais compacto */ .card.p2p-msg .small.muted { margin: 0; line-height: 1.15; } /* Destaque das minhas mensagens (token da marca, sem exagero) */ .card.p2p-msg.is-mine { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } /* corpo de mensagem preserva quebras */ .p2p-msg__body { margin-top: 2px; line-height: 1.2; /* NÃO usar pre-wrap aqui: o template já coloca
. pre-wrap preserva espaços/indentação e pode criar “vazios” visuais. */ white-space: normal; /* Segurança para strings longas (txid, urls etc.) */ overflow-wrap: anywhere; word-break: break-word; } /* Mantém o espaçamento do
compacto */ .p2p-msg__body br { line-height: 1.2; } /* ------------------------------------------------------------------------- */ /* COMUNIDADE P2P — OFERTAS (mural) + Criar oferta + Conversor */ /* ------------------------------------------------------------------------- */ .p2p-rate-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .p2p-converter { display: grid; gap: 10px; } .p2p-qtd-ref { border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 8px 10px; background: #f9fafb; } .p2p-price-box, .p2p-pay-box { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; } .p2p-radio-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .p2p-radio { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; user-select: none; } .p2p-radio input { margin: 0; } .p2p-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .p2p-chip { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; user-select: none; } .p2p-chip input { margin: 0; } .p2p-offers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 980px) { .p2p-offers-grid { grid-template-columns: 1fr; } } .p2p-offers-col { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 10px 12px; } .p2p-offers-col__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .p2p-offer-card { padding: 12px; } .p2p-offer-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; } .p2p-offer-title { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .p2p-offer-kind { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--line); background: #f9fafb; } .p2p-offer-kind.buy { border-color: #bbf7d0; background: #dcfce7; color: #166534; } .p2p-offer-kind.sell { border-color: #fed7aa; background: #fff7ed; color: #9a3412; } .p2p-offer-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .p2p-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); background: #f9fafb; } .p2p-offer-notes { margin-top: 8px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ------------------------------------------------------------------------- */ /* COMUNIDADE P2P — CHAT UX (CANAIS / DMs) */ /* Objetivo: área de mensagens com scroll, sem empurrar a página para baixo */ /* ------------------------------------------------------------------------- */ .p2p-chat-shell { display: flex; flex-direction: column; min-height: 0; /* importante para permitir overflow funcionar */ } .p2p-chat-scroll { flex: 1 1 auto; min-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 10px 10px; } .p2p-chat-input { margin-top: 10px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .p2p-chat-input textarea.input { resize: none; max-height: 120px; overflow: auto; } .p2p-new-btn { position: sticky; bottom: 8px; margin-left: auto; display: none; z-index: 1; }