: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;
}
/* ---------- 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);
}
/* ---------- 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;
/* Reserva o espaço da barra de rolagem sempre, pra largura do menu não
"encolher" visivelmente só quando o conteúdo passa da altura da tela. */
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. */
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);
}
/* Observação com várias linhas (ver formatarObservacao() em src/bootstrap.php) */
.observacao-lista {
margin: 0;
padding-left: 1.1rem;
}
.observacao-lista li {
margin-bottom: 0.15rem;
}
.observacao-lista li:last-child {
margin-bottom: 0;
}
/* 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;
}
.card-sn > .card-body {
padding: 0.9rem 1.1rem;
}
/* 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 do
rótulo encolhe pro conteúdo (truque width:1% + nowrap) em vez de uma
fatia fixa de 40%, que deixava um vão grande entre um rótulo curto (ex:
"Nome") e o valor real quando a tabela ficava larga (2026-08-11). O
rótulo mais longo da tabela passa a definir a largura da coluna pra
todas as linhas, de forma consistente. */
.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 (2026-08-11, pedido pra valer em
todas as páginas do sistema — a maioria das tabelas não tinha essa
classe, então ficavam todas brancas). Mesmo padrão já usado no MAPOS:
background-color direto nos dois seletores (td e th), não só a variável
--bs-table-bg-type que o Bootstrap usa — em linhas com | (rótulo) +
| (valor) misturados, só um dos dois pegava a cor com a variável
sozinha, deixando a linha meio colorida/meio branca. */
.table-sn > tbody > tr:nth-of-type(odd) > td,
.table-sn > tbody > tr:nth-of-type(odd) > th {
background-color: var(--sn-table-stripe);
}
.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 |