: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. 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); } /* ---------- 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; } /* ---------- 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, com divisórias finas entre eles (em vez de gap). Número de opções passou a ser par (6, desde que "Treinamento" entrou em 2026-08-06) — antes, com 5 (ímpar), a última opção ocupava a linha inteira por baixo (grid-column: 1 / -1) pra não sobrar metade de linha vazia; removido porque com número par isso jogava a opção sozinha pra uma linha nova, em vez de ficar ao lado da anterior. */ .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; } /* Última linha (2 colunas): remove a borda inferior dos 2 últimos itens, não só do último — precisa dos dois pra a linha de baixo ficar sem borda, qualquer que seja a paridade da quantidade total de opções. */ .grade-opcoes-inicio > .card-opcao-inicio:nth-last-child(-n+2) { border-bottom: none; } .card-opcao-inicio i { font-size: 1.75rem; } /* Ranking Aguia Dourada — card-link na Início (2026-08-06, redesenhado): só o título + seta, leva pra ranking_aguia_dourada.php (lista completa com medalha/troféu mora só lá, não repete aqui). */ .ranking-aguia-dourada-link { color: inherit; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .ranking-aguia-dourada-link:hover, .ranking-aguia-dourada-link:focus { background-color: var(--sn-table-hover); color: inherit; } .ranking-aguia-dourada-titulo { font-weight: 600; color: var(--sn-ink); } .ranking-aguia-dourada-titulo i { color: #d4af37; margin-right: 0.4rem; } .ranking-aguia-dourada-vencedor-mes { display: block; font-size: 0.82rem; color: var(--sn-ink-soft); margin-top: 0.15rem; } /* ---------- Página ranking_aguia_dourada.php ---------- */ /* Águia de fundo atrás do ranking inteiro (2026-08-06 — pedido: não só no cabeçalho, no fundo de todo o ranking). Imagem salva localmente em assets/img/ em vez de linkar direto num cache do Google, que pode expirar/mudar. Uma imagem só, grande, centralizada, fixa em relação ao topo do bloco (não repete/escala com a lista) — os cards por cima ficam levemente translúcidos (ver .ranking-linha/.page-header abaixo) pra ela aparecer por trás em vez de só nos vãos entre as linhas. */ .ranking-fundo-aguia-dourada { position: relative; } /* Caixa de tamanho FIXO (não inset:0) — imagem é quadrada (360x360); deixar o ::before esticar pelo container inteiro (que cresce conforme a lista de vendedores) fazia o "contain" ampliar a águia demais numa lista longa. Com largura/altura travadas, o tamanho fica sempre previsível, plantada perto do topo, centralizada horizontalmente. */ .ranking-fundo-aguia-dourada::before { content: ''; position: absolute; /* Descida pra ficar por trás da lista (a partir do 1º lugar), não mais atrás do cabeçalho — 7.5rem é aproximadamente a altura do cabeçalho + margem antes da lista começar. */ top: 1.5rem; left: 50%; transform: translateX(-50%); width: min(100%, 560px); height: min(100%, 560px); background-image: url('/assets/img/aguia_dourada_bg.webp'); background-repeat: no-repeat; background-position: center; /* contain, não cover — evita cortar a águia pra preencher a caixa (achado em 2026-08-06, "está recortada"): com contain, a imagem inteira sempre aparece, mesmo que sobre espaço vazio na caixa. */ background-size: contain; opacity: 0.6; pointer-events: none; z-index: 0; } .ranking-fundo-aguia-dourada > * { position: relative; z-index: 1; } /* Cabeçalho translúcido só nesta página (não mexe no .card-sn/.page-header globais, usados em várias outras páginas) — .ranking-linha já é exclusivo desta página, ajustado direto na própria regra dele mais abaixo, junto com os degradês de 1º/2º/3º lugar (senão eles, mais específicos, ficariam opacos por cima). */ .ranking-fundo-aguia-dourada .page-header, .ranking-fundo-aguia-dourada .card-sn:not(.ranking-linha):not(.page-header) { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(1px); } .ranking-lista { display: flex; flex-direction: column; gap: 0.6rem; } .ranking-linha { display: flex; align-items: center; gap: 1rem; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(1px); border: 1px solid var(--sn-border); border-radius: 12px; padding: 0.85rem 1.1rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .ranking-linha:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(48, 58, 54, 0.08); } /* Top 3 ganham um fundo suave na cor da própria medalha — dá pra perceber o pódio de relance, rolando a lista, sem precisar ler a posição. */ .ranking-pos-1 { background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), rgba(255, 255, 255, 0.88) 55%); border-color: rgba(212, 175, 55, 0.4); } .ranking-pos-2 { background: linear-gradient(90deg, rgba(167, 167, 173, 0.22), rgba(255, 255, 255, 0.88) 55%); border-color: rgba(167, 167, 173, 0.4); } .ranking-pos-3 { background: linear-gradient(90deg, rgba(181, 101, 29, 0.2), rgba(255, 255, 255, 0.88) 55%); border-color: rgba(181, 101, 29, 0.4); } .ranking-posicao { flex: 0 0 2.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .ranking-posicao .fa-medal.medalha-ouro { color: #d4af37; } .ranking-posicao .fa-medal.medalha-prata { color: #a7a7ad; } .ranking-posicao .fa-medal.medalha-bronze { color: #b5651d; } .ranking-posicao-numero { font-size: 1.1rem; font-weight: 700; color: var(--sn-ink-soft); } .ranking-nome { flex: 1 1 auto; font-weight: 600; color: var(--sn-ink); } .ranking-titulos { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; max-width: 11rem; font-weight: 700; font-size: 1.05rem; color: var(--sn-primary-dark); background: var(--sn-primary-soft); border-radius: 999px; padding: 0.3rem 0.85rem; } .ranking-titulos i { font-size: 0.9rem; } .ranking-titulos-extra { font-size: 0.85rem; } /* Banner do vencedor do mês passado (2026-08-07) — na página do ranking. */ .ranking-vencedor-mes-passado { background: var(--sn-primary-soft); border-color: rgba(212, 175, 55, 0.4); font-size: 0.95rem; } .ranking-titulos i { color: #d4af37; } @media (max-width: 575.98px) { .ranking-linha { padding: 0.7rem 0.85rem; gap: 0.6rem; } .ranking-posicao { flex-basis: 2.1rem; font-size: 1.3rem; } .ranking-nome { font-size: 0.92rem; } .ranking-titulos { font-size: 0.92rem; padding: 0.25rem 0.6rem; } } /* 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; } /* Sem ":last-child { margin-bottom: 0 }" de propósito — as categorias são divididas em 2 colunas (.row > .col-lg-6, ver read.php), cada uma com seu próprio "último filho". Isso fazia, por exemplo, "Dados do Projeto" (última da coluna esquerda) e "Registro" (última da direita) perderem a margem e colarem na seção seguinte sempre que uma ficha não tinha "Dados Financeiros" (fica vazio fora de Financiamento) ou quando as colunas empilham no mobile — a margem de baixo "errada" ficava sempre na seção de cima em vez de sumir só na última de verdade da página. Custo aceito: um respiro a mais depois da última seção, em vez de nenhum entre as do meio. */ .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) { /* Reduz a fonte em 10% no mobile (pedido do usuário, 2026-08-09, mesma lógica aplicada no MAPOS) — como quase tudo no app usa rem (ver comentário em "html" no topo do arquivo), encolher só a base (15px * 0.90 = 13.5px) encolhe título, texto, tabela e botão na mesma proporção, sem mexer regra por regra. */ html { font-size: 13.5px; } /* 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; } } /* 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; } /* Filtros da aba "Geração" (read.php) — 2026-08-05: o form tinha vários selects/inputs com flex-wrap, quebrando em duas linhas de um jeito feio em telas mais estreitas. Trocado pra flex-nowrap (uma linha só) com rolagem horizontal própria nesse trecho — melhor um scroll lateral discreto num filtro do que os campos quebrando no meio. */ .geracao-filtros-scroll { overflow-x: auto; padding-bottom: 2px; } /* Resumo (potência/geração/status) de cada inversor na aba "Geração" (read.php) — 2026-08-05: antes eram só números soltos lado a lado, sem indicar o que cada um era, ficando confuso perto do gráfico. Rótulo pequeno em cima do valor, mesmo padrão da tela de detalhe do MAPOS. */ .geracao-resumo { display: flex; flex-wrap: wrap; gap: 1.5rem; } .geracao-resumo-metrica { display: flex; flex-direction: column; gap: 0.15rem; } .geracao-resumo-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--sn-ink-soft); }