/* * Identidade MERARQ sobre o template Able Pro. * * Em vez de editar o template (o que quebraria a cada atualização dele), * este arquivo redefine as variáveis do Bootstrap que o Able Pro usa. * Carregue-o SEMPRE depois de style.css e style-preset.css. * * Bronze e grafite vêm da logo da marca (merarq-logo.png). */ /* * O Able Pro define as cores em [data-pc-preset] no . Como o body * fica mais perto dos elementos que o :root, é ele que vence na herança — * por isso repetimos o mesmo seletor aqui (e este arquivo carrega depois). */ :root, [data-pc-preset] { /* bronze da marca no lugar do azul padrão do template */ --bs-primary: #8a6238; --bs-primary-rgb: 138, 98, 56; --bs-primary-text-emphasis: #6e4d2b; --bs-primary-bg-subtle: #f7f0e8; --bs-primary-border-subtle: #ecdfcf; --merarq-bronze: #8a6238; --merarq-bronze-claro: #a3794e; --merarq-bronze-suave: #f7f0e8; --merarq-grafite: #201d1a; --merarq-tinta: #16160f; /* estados reservados para status — nunca como cor de destaque */ --merarq-ok: #006300; --merarq-ok-fundo: #e7f3e7; --merarq-alerta: #8a5f00; --merarq-alerta-fundo: #fdf0d3; --merarq-critico: #b83434; --merarq-critico-fundo: #f9e7e7; } /* ---------- botões e links ---------- */ [data-pc-preset] .btn-primary { /* o texto é declarado explicitamente para não depender de herança */ --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-bg: var(--merarq-bronze); --bs-btn-border-color: var(--merarq-bronze); --bs-btn-hover-bg: #6e4d2b; --bs-btn-hover-border-color: #6e4d2b; --bs-btn-active-bg: #6e4d2b; --bs-btn-active-border-color: #6e4d2b; --bs-btn-disabled-bg: var(--merarq-bronze-claro); --bs-btn-disabled-border-color: var(--merarq-bronze-claro); } /* qualquer botão de fundo cheio dentro do conteúdo mantém o texto legível */ [data-pc-preset] .pc-content .btn-primary, [data-pc-preset] .pc-content .btn-primary:hover, [data-pc-preset] .pc-content .btn-secondary, [data-pc-preset] .pc-content .btn-danger, [data-pc-preset] .pc-content .btn-success { color: #fff; } [data-pc-preset] .btn-outline-primary { --bs-btn-color: var(--merarq-bronze); --bs-btn-border-color: var(--merarq-bronze); --bs-btn-hover-bg: var(--merarq-bronze); --bs-btn-hover-border-color: var(--merarq-bronze); } /* Só no conteúdo (a sidebar é escura e tem cores próprias) e NUNCA em botões: um tem fundo bronze, e pintar o texto de bronze também o deixaria invisível. */ [data-pc-preset] .pc-content a:not(.btn), [data-pc-preset] .pc-content .text-primary:not(.btn), [data-pc-preset] .card a:not(.btn) { color: var(--merarq-bronze); } [data-pc-preset] .pc-content a:not(.btn):hover, [data-pc-preset] .card a:not(.btn):hover { color: #6e4d2b; } /* ---------- menu lateral em grafite ---------- */ [data-pc-preset] .pc-sidebar { background: var(--merarq-grafite); } [data-pc-preset] .pc-sidebar a, [data-pc-preset] .pc-sidebar .pc-micon i, [data-pc-preset] .pc-sidebar .pc-mtext { color: #d8d7d0; } [data-pc-preset] .pc-sidebar .pc-item.active a, [data-pc-preset] .pc-sidebar .pc-item.active .pc-micon i, [data-pc-preset] .pc-sidebar .pc-item.active .pc-mtext { color: #fff; } [data-pc-preset] .pc-sidebar .pc-caption label { color: #8f8e88; } /* o nome do usuário no topo não pode ser cortado */ [data-pc-preset] .pc-header .pc-head-link { width: auto; min-width: 0; overflow: visible; } .pc-sidebar .pc-navbar > .pc-item > .pc-link, .pc-sidebar .pc-caption { color: #8f8e88; } .pc-sidebar .pc-navbar > .pc-item > .pc-link:hover, .pc-sidebar .pc-navbar > .pc-item.active > .pc-link { color: #fff; background: rgba(255, 255, 255, 0.08); } .pc-sidebar .pc-navbar > .pc-item.active > .pc-link { border-left: 3px solid var(--merarq-bronze-claro); } .pc-sidebar .m-header { background: var(--merarq-grafite); } /* ---------- números de dinheiro ---------- */ /* alinha os dígitos em colunas: coluna de valores fica legível de bater o olho */ .tnum, .valor { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .valor-negativo { color: var(--merarq-critico); } .valor-destaque { font-size: 1.05rem; font-weight: 700; } /* ---------- etiquetas de status ---------- */ .etiqueta { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .etiqueta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .etiqueta-ok { color: var(--merarq-ok); background: var(--merarq-ok-fundo); } .etiqueta-alerta { color: var(--merarq-alerta); background: var(--merarq-alerta-fundo); } .etiqueta-critico { color: var(--merarq-critico); background: var(--merarq-critico-fundo); } .etiqueta-info { color: #164a8c; background: #e8eff8; } .etiqueta-neutro { color: #52514e; background: #f0efea; } /* ---------- cartão de indicador (dashboard) ---------- */ .cartao-indicador .rotulo { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #898781; } .cartao-indicador .numero { font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; margin-top: 0.15rem; } .cartao-indicador .detalhe { font-size: 0.78rem; color: #898781; } /* ---------- tela de login ---------- */ .tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f6f5f1; } .tela-login .cartao { width: 100%; max-width: 400px; } .tela-login .logo { max-width: 190px; margin: 0 auto 0.25rem; display: block; } .tela-login .subtitulo { text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #898781; margin-bottom: 1.5rem; } /* ---------- impressão (proposta em PDF pelo navegador) ---------- */ @media print { .pc-sidebar, .pc-header, .nao-imprimir { display: none !important; } .pc-container { margin: 0 !important; } }