: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; --sn-border: #e1e6e2; --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. */ html { font-size: 15px; } 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 { background: #000000; padding: 0; min-height: 56px; } /* Botão "Menu": sem borda nenhuma, ocupa a altura toda da navbar — a régua vertical branca translúcida (não borda de verdade, é um ::after) é o único divisor entre ele e o resto da navbar. */ .navbar-menu-btn { display: flex; align-items: center; gap: 0.4rem; height: 56px; padding: 0 1.15rem; background: transparent; border: 0; color: #fff; font-weight: 600; position: relative; } .navbar-menu-btn::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.25); } .navbar-menu-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .navbar-menu-btn i { font-size: 1.15rem; } /* Botão recolher/expandir — segundo acionador do mesmo menu lateral, ícone muda de direção conforme o offcanvas abre/fecha (ver script em View.php). */ .navbar-toggle-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 56px; background: transparent; border: 0; color: #fff; } .navbar-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); } .navbar-brand-sn { display: flex; align-items: center; height: 56px; margin-left: auto; padding-right: 1.25rem; color: #fff !important; font-weight: 600; text-decoration: none; } /* os-novo não tem o botão de menu hambúrguer que existe antes do brand em bv-novo/analise-novo (é o motivo do margin-left:auto acima, que empurra o brand pra direita, depois do botão) — aqui o brand é o primeiro (e único) item à esquerda da navbar, então cancela o margin-left:auto e usa margin-right:auto, que empurra o CONTEÚDO À DIREITA (badge/usuário) pro canto direito, deixando o título encostado à esquerda. */ .navbar-brand-sn-esquerda { margin-left: 0; margin-right: auto; padding-left: 1.25rem; } /* ---------- Menu lateral (offcanvas) ---------- */ .offcanvas-sn { background: #000000; color: #fff; width: 280px; } .offcanvas-sn .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .offcanvas-sn .offcanvas-title { color: #fff; font-weight: 600; } .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: #2a2a2a; color: #fff; } .offcanvas-sn-item.active { background: #232323; 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: #2a2a2a; } .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); } /* Grade de opções da index.php (Bem-vindo) — bloco único (mesmo card-sn), sem espaçamento entre os itens: 2 colunas para as 4 primeiras opções, com divisórias finas entre elas (em vez de gap), e a última opção ocupa a linha inteira por baixo (grid-column: 1 / -1), unificada com o resto. */ .grade-opcoes-inicio { display: grid; grid-template-columns: 1fr 1fr; } .card-opcao-inicio { padding: 1.5rem 1rem; color: inherit; border-right: 1px solid var(--sn-border); border-bottom: 1px solid var(--sn-border); transition: background-color 0.15s ease; } .card-opcao-inicio:hover { background-color: var(--sn-table-hover); color: inherit; } .grade-opcoes-inicio > .card-opcao-inicio:nth-child(2n) { border-right: none; } .grade-opcoes-inicio > .card-opcao-inicio:last-child { grid-column: 1 / -1; border-right: none; border-bottom: none; } .card-opcao-inicio i { font-size: 1.75rem; } /* 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) */ .ficha-dados-tabela th { width: 40%; 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); } /* ---------- Badges (tons mais suaves, sem perder distinção semântica) ---------- */ .badge-tipo-1 { background: #4d7fa3; } .badge-tipo-2 { background: var(--sn-primary); } .badge-tipo-3 { background: #a3893f; } .badge-tipo-4 { background: #7c6a9e; } .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); } .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; } /* ---------- Categorias de dados (read.php) ---------- */ .dados-categoria { margin-bottom: 1.75rem; } .dados-categoria:last-child { margin-bottom: 0; } .dados-categoria-titulo { display: inline-block; background: var(--sn-primary-soft); color: var(--sn-primary-dark); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.35rem 0.8rem; border-radius: 6px; margin-bottom: 0.75rem; } /* ---------- Miniaturas de arquivos anexados (read.php) ---------- */ .arquivo-thumb { position: relative; cursor: pointer; background: var(--sn-card); border: 1px solid var(--sn-border); border-radius: 10px; padding: 0.5rem; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .arquivo-thumb:hover, .arquivo-thumb:focus-visible { border-color: var(--sn-primary); box-shadow: 0 2px 8px rgba(48, 58, 54, 0.12); outline: none; } .arquivo-thumb-preview { aspect-ratio: 1 / 1; border-radius: 6px; background: var(--sn-primary-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .arquivo-thumb-preview img, .arquivo-thumb-preview video { width: 100%; height: 100%; object-fit: cover; } /* Miniatura da 1a página do PDF: "contain" (não corta o documento) com fundo branco, já que a folha raramente é quadrada como o card. */ .arquivo-thumb-pdf-img { object-fit: contain !important; background: #fff; padding: 4px; } .arquivo-thumb-icone { font-size: 2.5rem; color: var(--sn-primary-dark); } .arquivo-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); pointer-events: none; } .arquivo-thumb-nome { margin-top: 0.4rem; font-size: 0.75rem; color: var(--sn-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arquivo-thumb-excluir { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2; width: 1.75rem; height: 1.75rem; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* ---------- Modal de visualização de arquivos (read.php) ---------- */ .preview-arquivo-conteudo { min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 0; } .preview-arquivo-conteudo img, .preview-arquivo-conteudo video { max-width: 100%; max-height: 70vh; border-radius: 6px; } /* O visualizador de PDF nativo do navegador preenche toda a caixa que receber com um fundo escuro próprio (não estilizável via CSS, é conteúdo embutido) — se a caixa for muito mais larga que uma folha de documento, sobra bastante área escura em volta, parecendo uma "moldura grossa". Por isso a largura é limitada a uma proporção próxima de folha A4/Carta em pé, em vez de ocupar 100% da largura do modal. */ .preview-arquivo-conteudo embed { width: 100%; max-width: 540px; aspect-ratio: 3 / 4; max-height: 70vh; border: 0; border-radius: 4px; margin: 0 auto; display: block; } /* Modal em si sem borda visível (o visualizador de PDF nativo, dentro do

, desenha sua própria borda ao redor da página — isso não dá pra estilizar de fora, é conteúdo do plugin — então aqui só cuidamos da moldura que É nossa: o card do modal). Só a sombra suave já separa o modal do fundo, sem precisar de uma linha de borda "grossa" por cima. */ #modalVisualizarArquivo .modal-content { border: 0; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Espaçamento bem enxuto — o padrão do Bootstrap (1rem em header/body/ footer) somado ao padding horizontal que .preview-arquivo-conteudo já tinha (2.5rem) deixava até 3.5rem de moldura branca de cada lado. Aqui o conteúdo (PDF/imagem/vídeo) ocupa quase toda a área do modal. */ #modalVisualizarArquivo .modal-header, #modalVisualizarArquivo .modal-footer { padding: 0.5rem 0.75rem; } #modalVisualizarArquivo .modal-body { padding: 0.5rem; } /* ---------- Formulários ---------- */ .field-required::after { content: " *"; color: #a24b42; } .form-control:focus, .form-select:focus { border-color: var(--sn-primary); box-shadow: 0 0 0 0.2rem rgba(79, 138, 117, 0.18); } .form-label { font-weight: 500; color: var(--sn-ink); } /* Campos bloqueados (preenchidos automaticamente, ex: nome/nascimento via CPF, cidade/uf via CEP) — aparência visivelmente opaca/travada, pra ficar claro que não dá pra digitar ali. */ .form-control[readonly] { background-color: #e7e9e6; opacity: 0.65; cursor: not-allowed; border-style: dashed; } .form-text { color: var(--sn-ink-soft); } /* ---------- Utilidades ---------- */ .text-muted { color: var(--sn-ink-soft) !important; } /* ========================================================================== Responsivo / mobile ========================================================================== */ @media (max-width: 767.98px) { /* Tela de login (login.php/logout.php): menos respiro em volta do card e logo um pouco menor pra caber melhor numa tela pequena sem exigir rolagem; campos e botão maiores que o padrão (alvo de toque mínimo recomendado, ~44px) pra ficar fácil de tocar sem errar. */ .tela-auth-conteudo { padding: 1rem; } .tela-auth-card { padding: 2rem 1.25rem; } .tela-auth-logo { width: 110px; } .tela-auth .form-control, .tela-auth .btn { min-height: 44px; } main.container { padding-left: 12px; padding-right: 12px; padding-bottom: 32px !important; } .card-sn { padding: 1.25rem !important; border-radius: 10px; } /* Sobrepõe o "padding: 1.25rem !important" genérico de .card-sn logo acima — este card específico precisa ficar com padding zero (as bordas da grade interna já servem de respiro visual). */ .cartao-grade-opcoes { padding: 0 !important; } .card-opcao-inicio { padding: 0.9rem 0.6rem !important; } .card-opcao-inicio i { font-size: 1.25rem; margin-bottom: 0.4rem !important; } .card-opcao-inicio h2 { font-size: 0.85rem; } .card-opcao-inicio p { font-size: 0.72rem; line-height: 1.25; } h1.h4, .h4 { font-size: 1.15rem; } h2.h5, .h5 { font-size: 1.05rem; } h2.h6, .h6 { font-size: 0.95rem; } /* Botões de ação principais ocupam a largura toda no celular, mais fácil de tocar */ form .btn-sn-primary, form button[type="submit"] { width: 100%; } /* Grupos de botões (ex: ações da ficha) empilham e ocupam a largura toda */ .d-flex.gap-2:not(.flex-nowrap) { flex-wrap: wrap; } .d-flex.gap-2:not(.flex-nowrap) > .btn { flex: 1 1 auto; } /* Tabelas: fonte um pouco menor pra caber mais colunas na tela sem cortar */ .table-sn { font-size: 0.85rem; } /* Menos espaço interno nas células (padrão do Bootstrap é 0.5rem dos dois lados) — em telas estreitas isso sozinho já rouba bastante espaço de colunas como CPF/Cidade/Ações, empurrando o botão de excluir pra fora da tela. */ .table-sn td, .table-sn th { padding-left: 0.4rem; padding-right: 0.4rem; } /* Coluna de Ações (só o ícone da lixeira) não precisa do respiro padrão — encosta mais perto da borda pra sobrar espaço pras outras colunas. */ .table-sn td.text-end, .table-sn th.text-end { padding-left: 0.25rem; padding-right: 0.5rem; } /* Tabela de meta.php: 4 colunas de valor em moeda são muito pra tela pequena — fonte ainda menor que o padrão e células mais compactas. */ .table-meta { font-size: 0.72rem; } .table-meta td, .table-meta th { padding: 0.4rem 0.35rem; } /* Tabs por texto pequeno ficam mais fáceis de tocar com mais respiro vertical. As 3 abas (Pré-Análise/Venda em Andamento/Venda Formalizada) precisam aparecer completas (nada cortado/precisando rolar) — com nav-fill (ver lista.php) cada uma ocupa 1/3 da largura; o texto pode quebrar em 2 linhas se não couber numa só, em vez de esconder ou exigir rolagem. */ .nav-tabs .nav-link { padding: 0.5rem 0.35rem; font-size: 0.72rem; white-space: normal; text-align: center; line-height: 1.15; } .nav-tabs { flex-wrap: nowrap; } /* Campo de arquivo nativo do navegador trunca o nome do arquivo escolhido numa área muito estreita — fonte um pouco menor deixa mais texto visível antes de cortar. */ input[type="file"].form-control { font-size: 0.8rem; } /* Cards de navegação da home em coluna única já é padrão do Bootstrap (col-sm-6), aqui só garantimos respiro consistente entre eles */ .card-sn h2.h5 { margin-bottom: 0.35rem; } /* Selos de status em lista.php (Aguardando Análise, Negado em Todos, financiadores aprovados, comissão) — botão mais baixo (menos padding vertical) e um respiro entre eles quando empilhados, que no celular ficavam colados um no outro. */ .pill-status { padding-top: 0.1rem; padding-bottom: 0.1rem; margin-bottom: 0.25rem; } /* Ícones FontAwesome (fas/far/fab) dentro de botão herdam o font-size do próprio botão, que no celular ainda fica generoso pra um glifo sozinho — "em" (relativo ao font-size do botão) encolhe só o ícone, mantendo a proporção com o texto ao lado em qualquer tamanho de botão (btn, btn-sm). */ .btn .fas, .btn .far, .btn .fab { font-size: 0.8em; } /* Cabeçalho da OS (montagem.php): nome do cliente/cidade cabem melhor com um pouco menos de respiro lateral/vertical no celular. */ .ficha-header { padding: 1rem !important; } .ficha-header .btn { font-size: 0.85rem; } } /* Telas bem estreitas (celulares pequenos/antigos) — mais um nível de ajuste fino além dos 767.98px acima, pra texto/tabela não ficarem apertados. */ @media (max-width: 380px) { body { font-size: 0.94rem; } h1.h4, .h4 { font-size: 1.05rem; } .card-sn { padding: 1rem !important; } .table-sn { font-size: 0.78rem; } .table-meta { font-size: 0.68rem; } .table-meta td, .table-meta th { padding: 0.35rem 0.25rem; } .form-label { font-size: 0.9rem; } .btn { font-size: 0.9rem; } } @media (max-width: 400px) { .navbar-brand-sn { font-size: 0.95rem; } } /* ---------- Telas avulsas de autenticação (login.php, logout.php) ---------- */ .tela-auth { background: var(--sn-bg); } .tela-auth-conteudo { min-height: 100vh; /* 100dvh (altura "dinâmica" da viewport) — no celular, a barra de endereço do navegador some/aparece ao rolar, e 100vh sozinho conta a altura como se ela estivesse sempre visível, fazendo o conteúdo "pular"/cortar embaixo. Navegador sem suporte a dvh ignora esta linha e fica só com o 100vh acima. */ min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .tela-auth-card { max-width: 380px; width: 100%; padding: 2.5rem 2rem; } .tela-auth-icone { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--sn-primary-soft); color: var(--sn-primary); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; } /* Logo no lugar do ícone genérico só em login.php (logout.php mantém o ícone de check dentro do círculo, .tela-auth-icone acima). */ .tela-auth-logo { display: block; width: 140px; max-width: 100%; margin: 0 auto 1.25rem; }