:root {
--sn-primary: #4f8a75;
--sn-primary-dark: #3c6c5b;
--sn-primary-soft: #e6efe9;
--sn-ink: #303a36;
--sn-ink-soft: #6b7570;
/* Um pouco mais escuro/saturado que antes (#f5f7f5) — era quase idêntico ao
branco dos cards/tabelas e dificultava enxergar onde o conteúdo começava. */
--sn-bg: #e7ece7;
--sn-card: #ffffff;
/* Um pouco mais escuro que antes (#e1e6e2) — quase da mesma cor do fundo
da página (--sn-bg), então a borda dos cards/tabelas praticamente
desaparecia; agora dá pra ver onde um cartão termina e o fundo começa. */
--sn-border: #d4dbd6;
--sn-navbar: #2c3733;
--sn-table-stripe: rgba(79, 138, 117, 0.07);
--sn-table-hover: rgba(79, 138, 117, 0.12);
/* Sobrescreve a variável de fonte do próprio Bootstrap — alguns componentes
(ex.: modais) referenciam essa variável diretamente em vez de só herdar
do , então só trocar o font-family do body não bastava pra cobrir
tudo. */
--bs-font-sans-serif: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
-webkit-tap-highlight-color: transparent;
}
/* A Inter tem x-height maior que a pilha de fontes do sistema usada antes —
no mesmo tamanho declarado, ela "parece" bem maior. Quase todo o app
(Bootstrap incluso) usa rem pra font-size/espaçamento, então baixar a
base de 16px (padrão do navegador) pra 15px encolhe tudo (títulos,
textos, tabelas, botões) na mesma proporção, sem mexer rule por rule e
sem bagunçar a hierarquia entre eles.
2026-08-09: reduzido mais 10% pra dispositivo web/desktop (pedido do
usuário) — 15px * 0.90 = 13.5px. O @media mobile mais abaixo continua
com seu próprio valor absoluto, não depende deste. */
html {
font-size: 13.5px;
}
body {
background: var(--sn-bg);
color: var(--sn-ink);
font-family: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-webkit-text-size-adjust: 100%;
}
a {
color: var(--sn-primary-dark);
text-decoration: none;
}
/* Alinhamento justificado pra texto corrido — refinado em 2026-08-08 a
pedido do usuário: a versão anterior era uma regra CSS pura (p, td
{ text-align: justify }, sem exceção), mas CSS não tem como medir quantos
caracteres um texto tem nem "saber" que uma célula é de nome. Por isso a
regra agora só entra em vigor via classe .js-justificado, adicionada pelo
assets/js/justificar-texto.js quando o texto tem mais de 50 caracteres E
não é uma coluna/linha de nome (checagem que só dá pra fazer em JS,
olhando o | /cabeçalho correspondente em tempo de execução). */
.js-justificado {
text-align: justify;
}
/* ---------- Navegação ---------- */
.navbar-sn {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--sn-navbar);
padding: 0;
min-height: 56px;
z-index: 1030;
}
.navbar-brand-sn {
display: flex;
align-items: center;
height: 56px;
padding-left: 1.25rem;
color: #fff !important;
font-weight: 600;
text-decoration: none;
}
/* Botão "abrir menu" — só existe visualmente abaixo do breakpoint mobile
(ver media query no fim do arquivo); no desktop o menu já fica sempre
visível (.sidebar-sn fixo), então o botão nem aparece. */
.navbar-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: transparent;
border: 0;
color: #fff;
font-size: 1.35rem;
}
.navbar-menu-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Busca no topo — existia no shell v1 (#search em matrix-style.css,
direto pra mapos/pesquisar) e ficou de fora na fundação do shell v2;
restaurada em 2026-08-08 a pedido do usuário, mesmo destino/parâmetro
(Mapos::pesquisar(), campo "termo"). */
.navbar-search-sn {
display: flex;
align-items: center;
gap: 0.35rem;
margin-right: 1rem;
}
.navbar-search-sn input {
width: 140px;
padding: 0.3rem 0.6rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 0.85rem;
}
.navbar-search-sn input::placeholder {
color: rgba(255, 255, 255, 0.65);
}
.navbar-search-sn input:focus {
outline: none;
background: #fff;
color: var(--sn-ink);
}
.navbar-search-sn button {
display: flex;
align-items: center;
background: transparent;
border: 0;
color: #fff;
opacity: 0.85;
padding: 0.3rem;
}
.navbar-search-sn button:hover {
opacity: 1;
}
/* ---------- Menu lateral (fixo no desktop, painel deslizante no mobile) ---------- */
.sidebar-sn {
position: fixed;
top: 56px;
left: 0;
bottom: 0;
width: 224px;
background: var(--sn-navbar);
color: #fff;
overflow-y: auto;
/* MAPOS tem grupos com submenu (analise-novo/bv-novo não têm) — abrir um
grupo grande (ex: Configurações, 7 itens) pode passar da altura da
tela, fazendo o navegador reservar espaço pra barra de rolagem só
nesse momento. Sem isso, a largura do menu "encolhe" visivelmente toda
vez que a barra aparece/some. scrollbar-gutter reserva esse espaço
sempre, então a largura fica estável independente do grupo estar
aberto ou não. */
scrollbar-gutter: stable;
z-index: 1040;
/* Barra de rolagem fina e escura, combinando com o fundo do menu, em vez
da barra cinza padrão do navegador (destoava do resto do menu). */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.sidebar-sn::-webkit-scrollbar {
width: 6px;
}
.sidebar-sn::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-sn::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25);
border-radius: 3px;
}
.sidebar-sn::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.4);
}
main.container-fluid {
box-sizing: border-box;
padding-left: calc(224px + 12px);
padding-top: 56px;
}
/* Fundo escurecido atrás do menu aberto no mobile — clicar nele fecha o
menu (ver script em View.php). Sem "pointer-events" quando escondido pra
não bloquear clique no resto da página. */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1035;
opacity: 0;
transition: opacity 0.2s ease;
}
.offcanvas-sn-item {
display: flex;
align-items: center;
padding: 0.9rem 1.25rem;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
transition: background 0.15s ease;
}
.offcanvas-sn-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.offcanvas-sn-item.active {
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-weight: 600;
}
/* "Sair" precisa se destacar dos outros itens do menu (ação diferente,
não é navegação) — vermelho suave, sem competir com o vermelho de erro. */
.offcanvas-sn-item.text-danger {
color: #ff8a80 !important;
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin-top: auto;
}
.offcanvas-sn-item.text-danger:hover {
color: #ff8a80 !important;
background: rgba(255, 255, 255, 0.08);
}
.offcanvas-sn-footer {
margin-top: auto;
padding: 1rem 1.25rem;
color: rgba(255, 255, 255, 0.65);
font-size: 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* ---------- Botões ---------- */
.btn-sn-primary {
background: var(--sn-primary);
border-color: var(--sn-primary-dark);
color: #ffffff;
font-weight: 600;
}
.btn-sn-primary:hover,
.btn-sn-primary:focus {
background: var(--sn-primary-dark);
border-color: var(--sn-primary-dark);
color: #fff;
}
/* ---------- Cartões ---------- */
.card-sn {
background: var(--sn-card);
border: 1px solid var(--sn-border);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(48, 58, 54, 0.04);
}
/* Espaçamento interno um pouco mais enxuto que o padrão do Bootstrap
(1rem) — aplicado a todo .card-sn, ou seja, a maioria das páginas
internas, pra reduzir o ar em volta do conteúdo sem apertar demais. */
.card-sn > .card-header {
padding: 0.6rem 1.1rem;
}
/* Cabeçalhos de cartão com vários botões de ação (Editar/Imprimir/WhatsApp
etc.) quebravam a página com scroll horizontal em telas estreitas —
Bootstrap ".d-flex" não quebra linha por padrão (flex-wrap: nowrap).
Aplicado sempre (não só dentro do @media mobile) porque o mesmo problema
aparece em qualquer largura insuficiente pro total de botões, não só
abaixo de 768px — telas de tablet com título longo também estouravam. */
.card-header.d-flex {
flex-wrap: wrap;
row-gap: 0.5rem;
}
.card-sn > .card-body {
padding: 0.9rem 1.1rem;
}
/* Legenda de cor do calendário de OS no Dashboard (mapos/painel.php) — as
cores precisam bater com o switch($os->status) de Mapos::calendario(),
que monta os eventos do FullCalendar. */
.legenda-cor {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
margin-right: 0.3rem;
}
/* Cabeçalho de página: usado em read.php (nome do cliente + tipo + ações) e,
padronizado, em todas as outras páginas (título da página) — é sempre o
primeiro bloco visual, separado do card de conteúdo abaixo. */
.ficha-header,
.page-header {
border-left: 4px solid var(--sn-primary);
}
.ficha-header .btn {
white-space: nowrap;
}
/* Tabelas de dados da ficha (label à esquerda, valor à direita) — largura
fixa de 40% deixava rótulos curtos ("Nome", "Email", "Rua") longe do
valor, com um vão em branco enorme entre o texto e a borda da coluna
(achado 2026-08-09). "width:1%" + "white-space:nowrap" é o truque
padrão pra coluna encolher só até o tamanho do próprio conteúdo (o
navegador ainda respeita o rótulo mais comprido de cada tabela —
"Precisa de Padronização?" etc. continuam cabendo, só não força TODA
coluna a ocupar 40% à toa) — o valor ( | , sem width definido) absorve
o espaço que sobra. */
.ficha-dados-tabela th {
width: 1%;
white-space: nowrap;
color: var(--sn-ink-soft);
font-weight: 500;
border-color: var(--sn-border);
}
.ficha-dados-tabela td {
border-color: var(--sn-border);
}
.ficha-dados-tabela tr:last-child th,
.ficha-dados-tabela tr:last-child td {
border-bottom: none;
}
/* Conteúdo abaixo das abas (read.php, lista.php) — mesmo acabamento visual
(sombra leve, cantos arredondados embaixo) dos cards de conteúdo do resto
do sistema, pra não parecer um componente diferente. */
.tab-content.bg-white {
border-radius: 0 0 10px 10px;
box-shadow: 0 1px 3px rgba(48, 58, 54, 0.06);
}
/* Aba ativa e inativa usam a MESMA cor cheia (--sn-primary-dark), sem
transparência nenhuma — a diferença é só peso da fonte, fundo e borda
inferior no .active (pedido explícito pra não usar opacidade). */
.nav-tabs .nav-link {
color: var(--sn-primary-dark);
font-weight: 500;
background-color: rgba(60, 108, 91, 0.16);
border-bottom: 2px solid transparent;
transition: border-color 0.15s ease;
}
.nav-tabs .nav-link:hover {
border-bottom-color: var(--sn-border);
}
.nav-tabs .nav-link.active {
color: var(--sn-primary-dark);
font-weight: 700;
background-color: var(--sn-card);
border-bottom: 2px solid var(--sn-primary-dark);
}
/* Seletor de sistema (usuarios.php: Análise/OS) — nav-pills fica com o azul
padrão do Bootstrap sem isso, destoando do verde do resto do site. */
.nav-pills .nav-link {
color: var(--sn-primary-dark);
font-weight: 500;
}
.nav-pills .nav-link.active {
background-color: var(--sn-primary-dark);
color: #fff;
font-weight: 700;
}
/* ---------- Badges (tons mais suaves, sem perder distinção semântica) ---------- */
.badge-aprovado { background: #4f8a63; }
.badge-pendente { background: #b7833f; }
/* Selos de status em lista.php (Comissão, Aguardando Análise, Negado em
Todos, financiador aprovado) — sem nowrap, o texto quebra dentro do selo
numa coluna estreita e ele perde a cara de "pill" (vira uma caixa alta e
torta). Cada selo sempre numa linha só; se não couber, a própria célula
decide (ver .table-sn td.text-nowrap para CPF/Cidade ao lado). */
.pill-status {
display: inline-block;
white-space: nowrap;
font-size: 0.6rem;
}
/* ---------- Tabelas ---------- */
/* Envelope visual da tabela — separa claramente do fundo da página (que fica
bem parecido com branco quando é só a tabela "solta"): borda, sombra leve e
cantos arredondados, igual em toda página que tenha tabela. */
.table-card {
background: var(--sn-card);
border: 1px solid var(--sn-border);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(48, 58, 54, 0.07);
/* Importante: table-card é usado junto com table-responsive no mesmo
elemento. "overflow: hidden" nos dois eixos cancelava o
"overflow-x: auto" do Bootstrap, então a tabela nunca conseguia rolar
horizontalmente — o conteúdo (e o botão de excluir) ficava só cortado,
sem jeito de alcançar. overflow-y: hidden mantém os cantos arredondados
sem bloquear a rolagem horizontal. */
overflow-x: auto;
overflow-y: hidden;
}
/* Coluna de ações (lixeira) sempre visível, mesmo com a tabela rolada
horizontalmente — evita depender do usuário achar/arrastar até o fim
da rolagem só pra excluir uma ficha. */
.table-sn td:last-child,
.table-sn th:last-child {
position: sticky;
right: 0;
background-color: var(--sn-card);
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.15);
}
.table-card > .table {
margin-bottom: 0;
}
.table-sn {
--bs-table-bg: var(--sn-card);
--bs-table-striped-bg: var(--sn-table-stripe);
--bs-table-hover-bg: var(--sn-table-hover);
}
/* Zebra striping discreto pra toda .table-sn, sem precisar da classe
.table-striped no HTML de cada view (a maioria não tinha, então os |
ficavam brancos iguais ao fundo do card por trás - achado 2026-08-08).
Primeira tentativa usou só a variável --bs-table-bg-type (mesma que
.table-striped do Bootstrap usa) esperando que a cadeia de fallback do
próprio Bootstrap desse conta do resto - na prática, em linhas com |
(rótulo) + | (valor) misturados, só um dos dois pegava a cor, deixando
a linha meio colorida/meio branca (achado 2026-08-08, reportado pelo
usuário). Trocado por background-color direto nos dois seletores, sem
depender de variável CSS encadeada - mais previsível. O hover continua
por cima porque é box-shadow (outra camada de pintura, não conflita com
background-color por especificidade). */
.table-sn > tbody > tr:nth-of-type(odd) > td,
.table-sn > tbody > tr:nth-of-type(odd) > th {
background-color: var(--sn-table-stripe);
}
/* Fonte suave de tabela — nasceu escopada só nas abas Anotações/Problemas/OS
de clientes/visualizar (achado 2026-08-08: texto grande demais lá) e foi
generalizada pra todo o sistema no mesmo dia, a pedido do usuário ("aplique
em todo o sistema, pois precisa ficar agradavelmente visualizado em todo o
sistema"). .status-badge tem font-size/color próprios (não herda daqui). */
.table-sn td {
font-size: 0.9rem;
color: var(--sn-ink-soft);
}
.table-sn thead {
background: var(--sn-primary-soft);
color: var(--sn-ink);
border-bottom: 2px solid var(--sn-primary);
}
.table-sn thead th {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: 700;
color: var(--sn-primary-dark);
}
.table-sn td, .table-sn th {
vertical-align: middle;
padding: 0.65rem 0.85rem;
}
/* Tabelas de dados da ficha (read.php: endereço, financiadores aprovados
etc.) — no desktop as linhas ficavam com respiro grande demais herdado
do .table-sn geral; no celular o espaçamento permanece o mesmo de antes
(ver override dentro de @media max-width: 767.98px). */
.ficha-dados-tabela td, .ficha-dados-tabela th {
padding: 0.3rem 0.85rem;
}
/* Links dentro de tabelas (nome do cliente/vendedor) com um pouco mais de
peso — sem isso, o verde de --sn-primary-dark em peso normal fica apagado
perto do texto comum da linha, principalmente em cima de fundo colorido
(linha-verde/venda-alta, que já são tons de verde). */
.table-sn a {
font-weight: 600;
}
/* Tabelas de ranking/leaderboard (index.php) — linhas bem mais próximas que
as tabelas de listagem de fichas, que precisam de espaço pra botões de
ação; aqui é só nome + número. */
.table-sn.table-compacta td,
.table-sn.table-compacta th {
padding: 0.3rem 0.85rem;
}
/* Relatórios densos com muitas colunas/linhas (estoque_relatorio_retiradas —
original tinha CSS próprio de 0.8rem/0.4rem inline, perdido na migração
pro table-sn padrão, que ficava grande demais pra esse volume de dado).
Fonte igual ao thead (que já é 0.8rem em qualquer table-sn) — corpo e
cabeçalho do mesmo tamanho, em vez do corpo herdar o tamanho normal do
Bootstrap e destoar do cabeçalho. */
.table-sn.table-denso td,
.table-sn.table-denso th {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
/* Mesma ideia de espaçamento vertical enxuto acima, só que pras linhas de
vendedores.php — que são , não , então não dá pra reusar o
seletor de td/th acima. O botão "Editar" (.btn.btn-sm) tem padding vertical
próprio maior que isso — reduzido à parte (classe "py-0" no botão em
vendedores.php) senão ele sozinho definia a altura da linha e a redução
aqui não tinha efeito nenhum. */
.linha-compacta {
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
/*
entre cada vendedor (index.php) — bem discreto, só pra separar
visualmente uma linha da outra sem competir com o conteúdo. */
.tabela-limitada hr.linha-divisora {
margin: 0;
border: 0;
border-top: 1px solid var(--sn-border);
opacity: 1;
}
/* "Ver mais/Ver menos" (index.php): linhas do índice AN_LIMITE_LINHAS em
diante vêm do servidor com "linha-extra d-none" (escondidas, sem ocupar
espaço). O clique no botão remove o "d-none" e, no frame seguinte,
adiciona "linha-extra-visivel" — só aí a opacidade transiciona de 0 a 1,
dando o efeito de fade suave (o inverso, ao recolher, espera a transição
acabar antes de voltar o "d-none", ver o |