/* ============================================================================= CAFÉ MATCH — TEMAS 3 temas selecionáveis via window.APP_CONFIG.tema Aplica-se através de uma classe no : tema-classico | tema-trading | tema-brutalist ============================================================================= */ /* ----------------------------------------------------------------------------- FONTES — carregadas globalmente para qualquer tema ----------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* ============================================================================= TEMA 1 — CLÁSSICO (atual) Cream + marrom + dourado · serifa Roboto ============================================================================= */ .tema-classico { --branco: #FFFFFF; --fundo: #F7F5F1; --fundo-card: #FFFFFF; --fundo-sidebar: #2C1F0E; --fundo-header: #FFFFFF; --marrom: #6B3F1A; --dourado: #C8922A; --dourado-claro: #E5B050; --dourado-pale: #FDF3E3; --texto: #1A1209; --texto-medio: #5A4A35; --texto-suave: #9A8A75; --texto-sidebar: #D4C4A8; --texto-sidebar-ativo: #FFFFFF; --borda: #E8E0D0; --borda-forte: #C8B89A; --sucesso: #1E6B3C; --sucesso-bg: #EBF7F0; --erro: #B91C1C; --erro-bg: #FEF2F2; --aviso: #B45309; --aviso-bg: #FFFBEB; --info: #1D4ED8; --info-bg: #EFF6FF; --sidebar-w: 240px; --header-h: 60px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --sombra-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --sombra: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); --sombra-lg: 0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06); --transicao: all 0.2s ease; --font-display: 'Roboto', Arial, Helvetica, sans-serif; --font-body: 'Roboto', Arial, Helvetica, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* ============================================================================= TEMA 2 — TRADING FLOOR Fundo escuro · ticker rolante · monoespaçada · neon ============================================================================= */ .tema-trading { --branco: #FFFFFF; --fundo: #0A0E14; --fundo-card: #141A22; --fundo-card-2: #1B2330; --fundo-sidebar: #0F141C; --fundo-header: #000000; --marrom: #D4A574; --dourado: #D4A574; --dourado-claro: #E8C896; --dourado-pale: #2A2218; --texto: #E8E6E1; --texto-medio: #9CA4B5; --texto-suave: #6B7689; --texto-sidebar: #6B7689; --texto-sidebar-ativo: #D4A574; --borda: #232C3D; --borda-forte: #2D3A50; --sucesso: #00D680; --sucesso-bg: rgba(0,214,128,0.12); --erro: #FF4757; --erro-bg: rgba(255,71,87,0.12); --aviso: #FFA726; --aviso-bg: rgba(255,167,38,0.12); --info: #4FA8FF; --info-bg: rgba(79,168,255,0.12); --sidebar-w: 200px; --header-h: 48px; --ticker-h: 40px; --radius: 4px; --radius-lg: 4px; --radius-xl: 6px; --sombra-sm: 0 1px 2px rgba(0,0,0,0.4); --sombra: 0 4px 12px rgba(0,0,0,0.5); --sombra-lg: 0 10px 30px rgba(0,0,0,0.6); --transicao: all 0.15s ease; --font-display: 'Inter Tight', sans-serif; --font-body: 'Inter Tight', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* Overrides específicos do Trading Floor */ .tema-trading body { font-family: var(--font-body); letter-spacing: -0.01em; } .tema-trading .dm-valor, .tema-trading .stat-value, .tema-trading td.col-num, .tema-trading .mc-value, .tema-trading .dash-row, .tema-trading .price-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tema-trading .badge { border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; } .tema-trading .badge-venda { background: rgba(0,214,128,0.12); color: var(--sucesso); } .tema-trading .badge-compra { background: rgba(212,165,116,0.12); color: var(--dourado); } .tema-trading .badge-ativa { background: rgba(0,214,128,0.12); color: var(--sucesso); } .tema-trading .sidebar-section-title { color: var(--texto-suave); } .tema-trading .dm-card, .tema-trading .stat-card, .tema-trading .card { border: 1px solid var(--borda); background: var(--fundo-card); } .tema-trading .dm-secao-titulo { color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; } /* Ticker rolante (signature do tema) */ .tema-trading #ticker-bar { display: block !important; } /* ============================================================================= TEMA 3 — BRUTALIST AGRO-TECH Concreto · linhas pretas · monoespaçada · etiquetas sólidas ============================================================================= */ .tema-brutalist { --branco: #FFFFFF; --fundo: #F2EFE9; --fundo-card: #FFFFFF; --fundo-sidebar: #FFFFFF; --fundo-header: #FFFFFF; --marrom: #5A3A1F; --dourado: #FF6B00; --dourado-claro: #FF8C3D; --dourado-pale: #FFE8D6; --texto: #0F0F0F; --texto-medio: #2D2D2D; --texto-suave: #5C5C5C; --texto-sidebar: #0F0F0F; --texto-sidebar-ativo: #F2EFE9; --borda: #0F0F0F; --borda-forte: #0F0F0F; --sucesso: #1E4D3A; --sucesso-bg: #1E4D3A; --erro: #9C3030; --erro-bg: #9C3030; --aviso: #B45309; --aviso-bg: #FFE8D6; --info: #1D4ED8; --info-bg: #E0E7FF; --sidebar-w: 220px; --header-h: 56px; --radius: 0; --radius-lg: 0; --radius-xl: 0; --sombra-sm: none; --sombra: none; --sombra-lg: none; --transicao: none; --font-display: 'Space Grotesk', sans-serif; --font-body: 'JetBrains Mono', monospace; --font-mono: 'JetBrains Mono', monospace; } /* Overrides específicos do Brutalist */ .tema-brutalist body { font-family: var(--font-body); font-size: 13px; line-height: 1.5; } .tema-brutalist h1, .tema-brutalist h2, .tema-brutalist h3, .tema-brutalist h4, .tema-brutalist .stat-value, .tema-brutalist .dm-valor, .tema-brutalist .mc-value, .tema-brutalist .sidebar-brand { font-family: var(--font-display); letter-spacing: -0.02em; } .tema-brutalist .card, .tema-brutalist .dm-card, .tema-brutalist .stat-card { border: 1.5px solid var(--borda); box-shadow: none; } .tema-brutalist .sidebar { border-right: 1.5px solid var(--borda); } .tema-brutalist .sidebar a { border-bottom: 1.5px solid var(--borda); } .tema-brutalist .badge { border-radius: 0; border: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; } .tema-brutalist .badge-venda { background: var(--marrom); color: var(--branco); } .tema-brutalist .badge-compra { background: var(--sucesso); color: var(--branco); } .tema-brutalist .badge-ativa { background: var(--texto); color: var(--branco); } .tema-brutalist .btn { border-radius: 0; } .tema-brutalist .form-control { border-radius: 0; border: 1.5px solid var(--borda); } /* ============================================================================= ELEMENTOS EXCLUSIVOS POR TEMA — escondidos por default ============================================================================= */ #ticker-bar { display: none; } /* ============================================================================= TICKER BAR — exclusivo do tema Trading ============================================================================= */ #ticker-bar { background: #000; border-bottom: 1px solid #232C3D; height: 40px; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 1100; } #ticker-bar .ticker-track { display: flex; gap: 48px; white-space: nowrap; /* Fallback; a duração real é definida via JS (velocidade constante por px/s) */ animation: ticker-scroll 90s linear infinite; padding-top: 12px; width: max-content; } @keyframes ticker-scroll { /* Entra pelo extremo direito (off-screen) e sai completamente pela esquerda */ 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } #ticker-bar .ticker-item { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; color: #E8E6E1; } #ticker-bar .ticker-symbol { color: #6B7689; } #ticker-bar .ticker-value { font-weight: 700; } #ticker-bar .ticker-unidade { color: #6B7689; font-size: 11px; } #ticker-bar .up { color: #00D680; } #ticker-bar .down { color: #FF4757; } #ticker-bar .flat { color: #6B7689; } /* Manchetes de notícia clicáveis */ #ticker-bar .ticker-news { text-decoration: none; color: inherit; cursor: pointer; } #ticker-bar .ticker-headline { color: #E8E6E1; } #ticker-bar .ticker-news:hover .ticker-headline { color: #D4A574; text-decoration: underline; } #ticker-bar .ticker-news:hover .ticker-symbol { color: #D4A574; } /* Pausa a rolagem ao passar o mouse, para clicar com calma */ #ticker-bar:hover .ticker-track { animation-play-state: paused; } /* Quando tema trading está ativo, empurra o conteúdo para baixo do ticker */ .tema-trading .app-wrapper { padding-top: 40px; } .tema-trading .sidebar { top: 40px; height: calc(100vh - 40px); min-height: calc(100vh - 40px); } /* ============================================================================= /* ============================================================================= AJUSTES ESTRUTURAIS DO TEMA TRADING ============================================================================= */ /* Sidebar compacta — 200px (já definido) + topo respeita o ticker */ .tema-trading .sidebar { padding-top: 12px; background: var(--fundo-sidebar); border-right: 1px solid var(--borda); } .tema-trading .sidebar-brand { padding: 12px 16px 20px; border-bottom: 1px solid var(--borda); } .tema-trading .sidebar-brand .brand-icon { display: none; } .tema-trading .sidebar-brand .brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--texto); letter-spacing: -0.02em; } .tema-trading .sidebar-brand .brand-sub { font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--texto-suave); margin-top: 4px; } .tema-trading .nav-section-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--texto-suave); padding: 16px 16px 8px; } .tema-trading .nav-item { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 16px; color: var(--texto-medio); border-left: 2px solid transparent; background: transparent; } .tema-trading .nav-item:hover { background: var(--fundo-card-2); color: var(--texto); } .tema-trading .nav-item.active { background: var(--fundo-card-2); color: var(--dourado); border-left-color: var(--dourado); } .tema-trading .nav-icon { font-size: 13px; opacity: 0.7; } .tema-trading .sidebar-footer { border-top: 1px solid var(--borda); } .tema-trading .user-avatar { background: var(--dourado); color: #000; font-weight: 700; } /* Header com session-info */ .tema-trading .top-header { background: var(--fundo-header); border-bottom: 1px solid var(--borda); height: var(--header-h); } .tema-trading .page-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--texto-suave); } .tema-trading .page-title::before { content: '/ '; color: var(--dourado); } /* Session-info — substitui o relógio simples */ .tema-trading .session-info { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--texto-suave); display: flex; gap: 12px; align-items: center; } .tema-trading .session-info .live { color: var(--sucesso); font-weight: 700; text-transform: uppercase; } .tema-trading .session-info .live::before { content: '●'; margin-right: 4px; animation: pulse-live 2s ease-in-out infinite; } @keyframes pulse-live { 50% { opacity: 0.4; } } /* Em outros temas o session-info fica escondido */ .session-info { display: none; } .tema-trading .session-info { display: flex; } /* Esconde o relógio simples no tema trading (substituído pelo session-info) */ .tema-trading #relogio { display: none; } /* Conteúdo principal — espaçamento */ .tema-trading .main-content { background: var(--fundo); } .tema-trading .page-content { padding: 24px 32px; } /* Cards e stats */ .tema-trading .stat-card { background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--radius); } .tema-trading .stat-value { font-family: var(--font-mono); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: var(--texto); } .tema-trading .stat-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-suave); } /* Tabelas */ .tema-trading table { background: var(--fundo-card); border: 1px solid var(--borda); border-collapse: collapse; } .tema-trading th { background: var(--fundo-card-2); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-suave); padding: 10px 16px; border-bottom: 1px solid var(--borda); } .tema-trading td { padding: 10px 16px; border-bottom: 1px solid var(--borda); font-family: var(--font-mono); font-size: 12px; color: var(--texto); } .tema-trading tr:hover td { background: var(--fundo-card-2); } /* Dash-rows do Dashboard */ .tema-trading .dash-row { font-family: var(--font-mono); border-bottom: 1px solid var(--borda) !important; padding: 12px 16px; } .tema-trading .dash-row:hover { background: var(--fundo-card-2); } /* Form controls */ .tema-trading .form-control, .tema-trading select.form-control, .tema-trading input.form-control, .tema-trading textarea.form-control { background: var(--fundo-card-2); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--radius); font-family: var(--font-body); } .tema-trading .form-control:focus { border-color: var(--dourado); outline: none; } .tema-trading .form-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-suave); } /* Botões */ .tema-trading .btn-primary { background: var(--dourado); color: #000; border: none; font-weight: 600; letter-spacing: 0.05em; } .tema-trading .btn-primary:hover { background: var(--dourado-claro); } .tema-trading .btn-secondary, .tema-trading .btn-ghost { background: var(--fundo-card-2); color: var(--texto); border: 1px solid var(--borda); } /* Modais */ .tema-trading .cm-modal { background: var(--fundo-card); border: 1px solid var(--borda); border-radius: var(--radius-lg); color: var(--texto); } .tema-trading .cm-modal-header { border-bottom: 1px solid var(--borda); } .tema-trading .cm-modal-footer { border-top: 1px solid var(--borda); background: var(--fundo-card-2); } .tema-trading .cm-modal-title { color: var(--texto); } /* Toasts */ .tema-trading .toast { background: var(--fundo-card); border: 1px solid var(--borda); color: var(--texto); } /* ============================================================================= TEMA TRADING — Sidebar compacta sempre visível (com siglas) ============================================================================= */ .tema-trading { --sidebar-w: 72px; } .tema-trading .btn-hamburger { display: none !important; } .tema-trading .sidebar { width: 72px; transform: translateX(0) !important; background: var(--fundo-sidebar); border-right: 1px solid var(--borda); padding-top: 12px; } .tema-trading .main-content { margin-left: 72px !important; } .tema-trading .sidebar-overlay { display: none !important; } /* Brand compacta = só sigla CM no quadrado dourado com gradient */ .tema-trading .sidebar-brand { padding: 14px 0 18px; border-bottom: none; text-align: center; } .tema-trading .sidebar-brand .brand-icon { display: none; } .tema-trading .sidebar-brand .brand-sub { display: none; } .tema-trading .sidebar-brand .brand-name { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(135deg, #E5B886 0%, #D4A574 45%, #8B6914 100%); color: #1A1410; font-family: var(--font-display); font-weight: 800; border-radius: 8px; letter-spacing: 0; box-shadow: 0 2px 10px rgba(212,165,116,0.35), inset 0 1px 0 rgba(255,255,255,0.2); } .tema-trading .sidebar-brand .brand-name::before { content: 'CM'; font-size: 14px; } .tema-trading .sidebar-brand .brand-name { font-size: 0; /* esconde o texto original */ } /* Section label escondida */ .tema-trading .nav-section-label { display: none; } /* Nav items = siglas centralizadas */ .tema-trading .sidebar-nav { padding: 8px 0; } .tema-trading .nav-item { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 0; margin: 4px 8px; color: var(--texto-medio); border-left: 3px solid transparent; border-radius: var(--radius); background: transparent; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; white-space: nowrap; } .tema-trading .nav-item:hover { background: var(--fundo-card-2); color: var(--texto); } .tema-trading .nav-item.active { background: var(--fundo-card-2); color: var(--dourado); border-left-color: var(--dourado); } .tema-trading .nav-item .nav-icon { display: none; } .tema-trading .nav-item .nav-badge { display: none; } /* Esconde texto longo e mostra sigla via data-attr */ .tema-trading .nav-item { font-size: 0; } .tema-trading .nav-item::before { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; font-family: var(--font-mono); } .tema-trading .nav-item[data-sigla="DASH"]::before { content: 'DASH'; } .tema-trading .nav-item[data-sigla="OFRT"]::before { content: 'OFRT'; } .tema-trading .nav-item[data-sigla="MTCH"]::before { content: 'MTCH'; } .tema-trading .nav-item[data-sigla="MRCD"]::before { content: 'MRCD'; } .tema-trading .nav-item[data-sigla="USR"]::before { content: 'USR'; } /* Sidebar footer compacto */ .tema-trading .sidebar-footer { border-top: 1px solid var(--borda); padding: 12px 0; } .tema-trading .sidebar-user { flex-direction: column; padding: 0; text-align: center; cursor: pointer; } .tema-trading .sidebar-user .user-info { display: none; } .tema-trading .user-avatar { margin: 0 auto; background: var(--dourado); color: #000; font-weight: 700; width: 36px; height: 36px; line-height: 36px; border-radius: 6px; } /* ============================================================================= TEMA TRADING — Tela de login ============================================================================= */ .tema-trading .login-page { background: var(--fundo); } .tema-trading .login-left { background: linear-gradient(135deg, #0A0E14 0%, #141A22 60%, #1B2330 100%) !important; } .tema-trading .login-brand-name { font-family: var(--font-display); color: var(--dourado) !important; letter-spacing: -0.02em; font-weight: 700; } .tema-trading .login-brand-icon { filter: drop-shadow(0 4px 24px rgba(212,165,116,0.5)); } .tema-trading .login-brand-sub { color: var(--texto-medio) !important; } .tema-trading .login-right { background: var(--fundo-card); } .tema-trading .login-box { color: var(--texto); } .tema-trading .login-header h2 { color: var(--texto); font-family: var(--font-display); font-weight: 700; } .tema-trading .login-deco { background: radial-gradient(circle, rgba(212,165,116,0.18) 0%, transparent 70%) !important; } /* Pisca discreto no logo — coração da mesa de operações */ .tema-trading .login-brand-icon { animation: float 3.5s ease-in-out infinite, glow-pulse 4s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { filter: drop-shadow(0 4px 16px rgba(212,165,116,0.3)); } 50% { filter: drop-shadow(0 4px 28px rgba(212,165,116,0.7)); } } /* ============================================================================= TEMA BRUTALIST — Estrutura completa ============================================================================= */ .tema-brutalist { --sidebar-w: 220px; } .tema-brutalist .btn-hamburger { display: none !important; } /* Sidebar */ .tema-brutalist .sidebar { width: 220px; background: var(--fundo-card); color: var(--texto); border-right: 1.5px solid var(--borda); padding: 0; transform: translateX(0) !important; } .tema-brutalist .sidebar-brand { padding: 20px 20px 18px; border-bottom: 1.5px solid var(--borda); margin-bottom: 0; text-align: left; background: var(--fundo-card); } .tema-brutalist .sidebar-brand .brand-icon { display: none; } .tema-brutalist .sidebar-brand .brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--texto); display: block; margin-bottom: 8px; } .tema-brutalist .sidebar-brand .brand-name::before { content: 'CAFÉ↔MATCH'; } .tema-brutalist .sidebar-brand .brand-name { font-size: 0; } .tema-brutalist .sidebar-brand .brand-name::before { font-size: 22px; } .tema-brutalist .sidebar-brand .brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--texto); margin-top: 0; } .tema-brutalist .sidebar-brand .brand-sub::after { content: 'Plataforma B2B / Café'; } .tema-brutalist .sidebar-brand .brand-sub { font-size: 0; } .tema-brutalist .sidebar-brand .brand-sub::after { font-size: 10px; } .tema-brutalist .nav-section-label { display: none; } .tema-brutalist .sidebar-nav { padding: 0; } .tema-brutalist .nav-item { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1.5px solid var(--borda); border-left: none; border-radius: 0; margin: 0; background: var(--fundo-card); color: var(--texto); font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } .tema-brutalist .nav-item:hover { background: var(--fundo); } .tema-brutalist .nav-item.active { background: var(--texto); color: var(--fundo); } .tema-brutalist .nav-icon { display: none; } .tema-brutalist .nav-badge { display: none; } /* Numeração 01, 02, 03... via ::before nos itens */ .tema-brutalist .nav-item::before { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.05em; margin-right: 12px; opacity: 0.7; } .tema-brutalist .nav-item[data-sigla="DASH"]::before { content: '01'; } .tema-brutalist .nav-item[data-sigla="OFRT"]::before { content: '02'; } .tema-brutalist .nav-item[data-sigla="MTCH"]::before { content: '03'; } .tema-brutalist .nav-item[data-sigla="MRCD"]::before { content: '04'; } .tema-brutalist .nav-item[data-sigla="USR"]::before { content: '05'; } /* Sidebar footer */ .tema-brutalist .sidebar-footer { border-top: 1.5px solid var(--borda); background: var(--fundo-card); padding: 14px 20px; } .tema-brutalist .sidebar-user { padding: 0; } .tema-brutalist .user-avatar { background: var(--texto); color: var(--fundo); border-radius: 0; font-family: var(--font-display); font-weight: 700; } .tema-brutalist .user-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 13px; color: var(--texto); } .tema-brutalist .user-role { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-suave); } /* Main-content */ .tema-brutalist .main-content { margin-left: 220px !important; background: var(--fundo); } /* Top header — carimbo */ .tema-brutalist .top-header { background: var(--fundo-card); border-bottom: 1.5px solid var(--borda); height: auto; padding: 14px 24px; align-items: center; } .tema-brutalist .page-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto); } .tema-brutalist .page-title::before { content: '/ '; color: var(--dourado); } /* Stamp (carimbo data/hora estilo documento) */ .tema-brutalist .stamp-info { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto); padding: 6px 12px; border: 1.5px solid var(--texto); background: var(--fundo); display: flex; gap: 10px; align-items: center; } .tema-brutalist .stamp-info .live { color: var(--dourado); font-weight: 700; } .tema-brutalist .stamp-info .live::before { content: '●'; margin-right: 4px; } .stamp-info { display: none; } .tema-brutalist .stamp-info { display: flex; } .tema-brutalist #relogio { display: none; } /* Page content */ .tema-brutalist .page-content { padding: 24px; } /* Cards e stats */ .tema-brutalist .stat-card, .tema-brutalist .card, .tema-brutalist .dm-card { border: 1.5px solid var(--borda); border-radius: 0; box-shadow: none; background: var(--fundo-card); padding: 20px; } .tema-brutalist .stat-value { font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; } .tema-brutalist .stat-label { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; } /* Section headers — barra preta superior + inferior */ .tema-brutalist .dm-secao-titulo, .tema-brutalist .card-header { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 0; border-top: 3px solid var(--borda); border-bottom: 1.5px solid var(--borda); margin-bottom: 0; color: var(--texto); } /* Tabelas — grade brutalist com bordas pretas */ .tema-brutalist table { border: 1.5px solid var(--borda); border-collapse: collapse; background: var(--fundo-card); } .tema-brutalist th, .tema-brutalist td { padding: 12px 14px; border-bottom: 1.5px solid var(--borda); text-align: left; } .tema-brutalist th + th, .tema-brutalist td + td { border-left: 1.5px solid var(--borda); } .tema-brutalist thead th { background: var(--fundo); font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; } .tema-brutalist tbody tr:hover td { background: var(--fundo); } /* Badges — sólidas, zero arredondamento */ .tema-brutalist .badge { border-radius: 0; border: none; font-family: var(--font-display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; } .tema-brutalist .badge-venda { background: var(--marrom); color: var(--fundo); } .tema-brutalist .badge-compra { background: var(--sucesso); color: var(--fundo); } .tema-brutalist .badge-ativa { background: var(--texto); color: var(--fundo); } .tema-brutalist .badge-pausada { background: var(--texto-suave); color: var(--fundo); } .tema-brutalist .badge-cancelada, .tema-brutalist .badge-expirada { background: var(--erro); color: var(--fundo); } /* Botões */ .tema-brutalist .btn { border-radius: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border: 1.5px solid var(--borda); } .tema-brutalist .btn-primary { background: var(--texto); color: var(--fundo); border-color: var(--texto); } .tema-brutalist .btn-primary:hover { background: var(--dourado); border-color: var(--dourado); color: var(--texto); } .tema-brutalist .btn-secondary, .tema-brutalist .btn-ghost { background: var(--fundo-card); color: var(--texto); } .tema-brutalist .btn-secondary:hover, .tema-brutalist .btn-ghost:hover { background: var(--fundo); } /* Form controls */ .tema-brutalist .form-control, .tema-brutalist input.form-control, .tema-brutalist select.form-control, .tema-brutalist textarea.form-control { border-radius: 0; border: 1.5px solid var(--borda); background: var(--fundo-card); font-family: var(--font-mono); color: var(--texto); } .tema-brutalist .form-control:focus { border-color: var(--dourado); outline: none; } .tema-brutalist .form-label { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; } /* Modais */ .tema-brutalist .cm-modal { background: var(--fundo-card); border: 1.5px solid var(--borda); border-radius: 0; color: var(--texto); } .tema-brutalist .cm-modal-header, .tema-brutalist .cm-modal-footer { border-bottom: 1.5px solid var(--borda); background: var(--fundo); } .tema-brutalist .cm-modal-footer { border-bottom: none; border-top: 1.5px solid var(--borda); } .tema-brutalist .cm-modal-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* Cards de mercado */ .tema-brutalist .dm-card-destaque { background: var(--dourado); /* laranja-construção #FF6B00 */ color: var(--texto); border-color: var(--dourado); } .tema-brutalist .dm-card-destaque .dm-label, .tema-brutalist .dm-card-destaque .dm-valor, .tema-brutalist .dm-card-destaque .text-muted { color: var(--texto) !important; } .tema-brutalist .dm-valor { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; } /* ============================================================================= TEMA BRUTALIST — Tela de login ============================================================================= */ .tema-brutalist .login-page { background: var(--fundo); } .tema-brutalist .login-left { background: var(--fundo) !important; border-right: 1.5px solid var(--borda); } .tema-brutalist .login-brand-icon { display: none; } .tema-brutalist .login-brand-name { font-family: var(--font-display) !important; color: var(--texto) !important; font-size: 56px !important; font-weight: 700; letter-spacing: -0.04em; } .tema-brutalist .login-brand-sub { color: var(--texto) !important; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; } .tema-brutalist .login-right { background: var(--fundo-card); } .tema-brutalist .login-deco { display: none; } .tema-brutalist .login-header h2 { font-family: var(--font-display); font-weight: 700; color: var(--texto); text-transform: uppercase; letter-spacing: -0.02em; } /* ============================================================================= TEMA BRUTALIST — Ajustes de densidade e botões de ícone ============================================================================= */ /* Padding mais compacto nas células de tabelas (ganha espaço horizontal) */ .tema-brutalist th, .tema-brutalist td { padding: 10px 10px; } /* Botões "ícone" (com 1 caractere unicode ou emoji) — não herdam uppercase nem Space Grotesk */ .tema-brutalist .btn-sm { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 4px 8px; min-width: 28px; height: 28px; line-height: 1; border: 1.5px solid var(--borda); border-radius: 0; display: inline-flex; align-items: center; justify-content: center; } /* Variantes específicas */ .tema-brutalist .btn-danger { background: var(--erro); color: var(--fundo); border-color: var(--erro); } .tema-brutalist .btn-danger:hover { background: #7a2424; border-color: #7a2424; } .tema-brutalist .btn-secondary.btn-sm { background: var(--fundo-card); color: var(--texto); } .tema-brutalist .btn-secondary.btn-sm:hover { background: var(--fundo); } /* Espaço entre botões da coluna de ações */ .tema-brutalist .flex.flex-gap-sm { gap: 4px; } /* ============================================================================= TEMA BRUTALIST — Indicadores de variação como caixas sólidas ============================================================================= */ .tema-brutalist .variacao-seta { display: inline-block; margin-left: 8px; margin-top: 8px; padding: 3px 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid transparent; color: var(--fundo); } /* Esconde o caractere ▲▼— e substitui por "↑ ALTA", "↓ BAIXA", "— NEUTRO" */ .tema-brutalist .variacao-seta { font-size: 0; } .tema-brutalist .variacao-seta::before { font-size: 11px; font-family: var(--font-display); letter-spacing: 0.08em; } .tema-brutalist .seta-alta { background: var(--sucesso); border-color: var(--sucesso); } .tema-brutalist .seta-alta::before { content: '↑ ALTA'; } .tema-brutalist .seta-baixa { background: var(--marrom); border-color: var(--marrom); } .tema-brutalist .seta-baixa::before { content: '↓ BAIXA'; } .tema-brutalist .seta-neutra { background: transparent; border-color: var(--borda); color: var(--texto); } .tema-brutalist .seta-neutra::before { content: '— NEUTRO'; } /* No card laranja, o "NEUTRO" mantém contraste com borda escura */ .tema-brutalist .dm-card-destaque .seta-neutra { border-color: var(--texto); } /* ============================================================================= ÍCONE DE CLIMA — independente de tema ============================================================================= */ .clima-icone { font-size: 1.1em; margin-right: 4px; cursor: pointer; line-height: 1; } /* Texto truncado com tooltip (atributo title) também recebe cursor pointer */ .truncate[title] { cursor: pointer; }