/* ============================================================================================= TEMA "LOCAPRONTO" + LIMPEZA DE TELA — pedido do dono, 26/09/2026 "as cores não estão igual do locapronto conforme solicitei" "Botões grandes, desalinhados, uns em cima, outros em baixo, quando poderiam estar na mesma linha, em tamanhos compatíveis" "Tela do financeiro continua poluida e confusa" Arquivo SEPARADO e carregado por ÚLTIMO no do public/index.html: para desfazer, basta apagar a linha . Nada das regras antigas foi editado. Paleta (medida no site do LocaPronto): azul-marinho quase preto, vermelho de ação, verde para "positivo/pago", fundo cinza muito claro no conteúdo. ============================================================================================= */ :root { --lp-navy: #0f1221; --lp-navy-2: #161a2e; --lp-navy-3: #1f2440; --lp-vermelho: #e11d2e; --lp-vermelho-hover: #c8102e; --lp-vermelho-suave: rgba(225, 29, 46, 0.12); --lp-verde: #16a34a; --lp-verde-claro: #22c55e; --lp-fundo: #f4f5f9; --lp-card: #ffffff; --lp-borda: #e4e6ee; --lp-texto: #111827; --lp-suave: #6b7280; --lp-raio: 12px; --lp-botao-h: 38px; --lp-botao-h-mini: 32px; /* tokens que o resto do app já usa — passam a apontar para a paleta nova */ --amr-roxo: var(--lp-vermelho); --amr-roxo-escuro: var(--lp-vermelho-hover); --amr-foco: 0 0 0 3px rgba(225, 29, 46, 0.18); --lcf-violeta: var(--lp-vermelho); } /* ---------------------------------------------------------------- Barra lateral (marinho) */ html body .sidebar { background: linear-gradient(180deg, var(--lp-navy) 0%, var(--lp-navy-2) 100%) !important; border-right: none !important; box-shadow: 4px 0 20px rgba(15, 18, 33, 0.18) !important; } html body .sidebar-logo { border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } html body .sidebar-logo .logo-texto { color: #fff !important; } html body .sidebar-logo .logo-texto span { color: #9ca3af !important; } html body .sidebar-section { color: #7c8198 !important; } html body .sidebar-section:hover { color: #fff !important; } html body .sidebar-menu li { color: #cfd3e1 !important; } html body .sidebar-menu li:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; } html body .sidebar-menu li.active { background: var(--lp-vermelho-suave) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; } html body .sidebar-menu li.active::before { background: var(--lp-vermelho) !important; } html body .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14) !important; } html body .sidebar-busca-rapida { background: rgba(255, 255, 255, 0.06) !important; color: #cfd3e1 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } html body .sidebar-busca-rapida:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } html body .sidebar-busca-rapida .atalho { background: rgba(255, 255, 255, 0.08) !important; color: #9ca3af !important; } /* Rodapé do menu: eram 4 botões grandes empilhados que roubavam metade da altura do menu. Agora: nome + perfil numa linha e as ações em uma grade compacta. */ html body .sidebar-usuario { background: rgba(0, 0, 0, 0.22) !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; padding: 10px 12px !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; } html body .sidebar-usuario > :not(button) { grid-column: 1 / -1; } html body .sidebar-usuario .sidebar-section { display: none !important; } html body .sidebar-usuario-nome { color: #fff !important; font-size: 0.85rem !important; } html body .sidebar-usuario-perfil { color: #9ca3af !important; font-size: 0.72rem !important; margin-bottom: 4px; } html body .sidebar-usuario-sair { margin: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 8px !important; font-size: 0.74rem !important; font-weight: 600 !important; background: rgba(255, 255, 255, 0.06) !important; color: #d1d5db !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; } html body .sidebar-usuario-sair:hover { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } /* o tema agora é um só (marinho), então o alternador de tema sai */ html body #btnTema { display: none !important; } /* ---------------------------------------------------------------- Área de conteúdo */ html body .main-content { background: var(--lp-fundo) !important; padding-top: 22px !important; } html body .header-title { color: var(--lp-texto) !important; font-size: 1.45rem !important; font-weight: 800 !important; } html body .header-sub { color: var(--lp-suave) !important; } /* "Acesso rápido" repetia 5 itens que já estão no menu, no topo de TODAS as telas. */ html body #barraAcessoRapido { display: none !important; } /* Cabeçalho da tela: título à esquerda, TODOS os botões juntos à direita, na mesma linha e do mesmo tamanho. Antes o título e os botões eram espalhados (space-between) e o terceiro botão caía sozinho na linha de baixo. */ html body .top-bar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; padding-bottom: 14px !important; margin-bottom: 18px !important; border-bottom: 1px solid var(--lp-borda) !important; } html body .top-bar > div:first-child { flex: 1 1 300px !important; min-width: 0 !important; margin-right: auto !important; } html body .top-bar > button, html body .top-bar > a, html body .top-bar > label { flex: 0 0 auto !important; margin: 0 !important; } /* Cartões */ html body .lista-card, html body .form-card, html body .cnh-card, html body .stat-card { background: var(--lp-card) !important; border: 1px solid var(--lp-borda) !important; border-radius: var(--lp-raio) !important; box-shadow: 0 1px 2px rgba(15, 18, 33, 0.04) !important; } /* a faixa colorida no topo dos cartões do financeiro deixava tudo "gritando" */ html body .cnh-card::before, html body .cnh-card::after { display: none !important; } html body .cnh-card { border-top: 1px solid var(--lp-borda) !important; background-image: none !important; } /* ---------------------------------------------------------------- Botões: 1 geometria, 3 cores */ html body .btn-acao, html body .btn-novo { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: var(--lp-botao-h) !important; min-height: var(--lp-botao-h) !important; min-width: 0 !important; width: auto !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 0.85rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; } html body .btn-mini, html body .btn-acao.btn-mini { height: var(--lp-botao-h-mini) !important; min-height: var(--lp-botao-h-mini) !important; padding: 0 10px !important; font-size: 0.8rem !important; border-radius: 8px !important; } html body .btn-icone { width: var(--lp-botao-h) !important; min-width: var(--lp-botao-h) !important; height: var(--lp-botao-h) !important; min-height: var(--lp-botao-h) !important; border-radius: 10px !important; } /* Principal (criar/salvar): vermelho LocaPronto */ html body .btn-novo, html body .btn-salvar { background: var(--lp-vermelho) !important; color: #fff !important; border: 1px solid var(--lp-vermelho) !important; } html body .btn-novo:hover, html body .btn-salvar:hover { background: var(--lp-vermelho-hover) !important; border-color: var(--lp-vermelho-hover) !important; filter: none !important; } /* Secundário (exportar, importar, atualizar, configurar…): branco com borda — era verde-água cheio, e 98 botões verde-água disputavam atenção com o botão principal. */ html body .btn-historico, html body .btn-acao:not(.btn-salvar):not(.btn-excluir):not(.btn-cancelar):not(.btn-editar) { background: #fff !important; color: var(--lp-texto) !important; border: 1px solid #d6d9e3 !important; } html body .btn-historico:hover, html body .btn-acao:not(.btn-salvar):not(.btn-excluir):not(.btn-cancelar):not(.btn-editar):hover { background: #f3f4f8 !important; border-color: #c3c7d4 !important; filter: none !important; } html body .btn-editar { background: var(--lp-navy-3) !important; color: #fff !important; border: 1px solid var(--lp-navy-3) !important; } html body .btn-cancelar { background: #fff !important; color: var(--lp-suave) !important; border: 1px solid #d6d9e3 !important; } html body .btn-excluir { background: #fff !important; color: var(--lp-vermelho) !important; border: 1px solid #f3b4bb !important; } html body .btn-excluir:hover { background: #fff1f2 !important; } html body .btn-mini:not(.btn-salvar) { background: #fff !important; color: var(--lp-texto) !important; border: 1px solid #d6d9e3 !important; } /* Campos */ html body .form-group input:focus, html body .form-group select:focus, html body .form-group textarea:focus { border-color: var(--lp-vermelho) !important; } /* Selos */ html body .badge { border-radius: 999px !important; } /* Avisos amarelos: mais discretos (uma linha, texto menor) */ html body .aviso-simulado { padding: 8px 12px !important; font-size: 0.8rem !important; border-radius: 10px !important; margin-bottom: 12px !important; } /* ---------------------------------------------------------------- Financeiro em abas (a estrutura das abas é montada por js/ajustes-layout.js) */ .lp-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--lp-borda); margin: -6px 0 18px; overflow-x: auto; } .lp-aba { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--lp-suave); cursor: pointer; white-space: nowrap; margin-bottom: -1px; } .lp-aba:hover { color: var(--lp-texto); } .lp-aba.ativa { color: var(--lp-vermelho); border-bottom-color: var(--lp-vermelho); } .lp-aba .lp-cont { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #eef0f5; color: var(--lp-suave); font-size: 0.72rem; } .lp-painel[hidden] { display: none !important; } /* Botão escondido por `hidden` PRECISA vencer o `display: inline-flex !important` das regras de botão acima deste ponto: sem esta linha, `[hidden]` não esconde nada e sobra botão visível que não faz nada. Medido em 27/09/2026 no painel da assinatura eletrônica (os botões "Abrir PDF assinado" e "Gerar novo link" apareciam antes de existir assinatura). */ html body .btn-acao[hidden], html body .btn-novo[hidden] { display: none !important; } .lp-faixa-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--lp-borda); border-left: 3px solid #f59e0b; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 0.85rem; color: #374151; } .lp-faixa-status.ok { border-left-color: var(--lp-verde); } .lp-faixa-status strong { color: var(--lp-texto); } .lp-faixa-status .lp-link { margin-left: auto; background: none; border: none; color: var(--lp-vermelho); font: inherit; font-weight: 600; cursor: pointer; padding: 0; } /* dentro das abas, o saldo do Asaas vira um cartão compacto */ html body #asaasSaldoContainer { padding: 12px 16px !important; border-radius: var(--lp-raio) !important; border-color: var(--lp-borda) !important; } /* ---------------------------------------------------------------- Celular */ @media (max-width: 640px) { html body .top-bar > div:first-child { flex-basis: 100% !important; } html body .top-bar { justify-content: flex-start !important; } html body .btn-acao, html body .btn-novo { height: 40px !important; min-height: 40px !important; } } /* ---------------------------------------------------------------- Ajustes finos (2ª passada) */ /* Cartão de lista: menos "ar" em volta do cabeçalho; filtros e busca na MESMA linha. */ html body .lista-card { padding: 16px 18px !important; margin-top: 16px !important; } html body .view-section > .lista-card:first-of-type { margin-top: 0 !important; } html body .lista-card-cabecalho { padding: 0 0 12px !important; margin-bottom: 12px !important; border-bottom: 1px solid var(--lp-borda) !important; background: none !important; } html body .lista-card-cabecalho h3 { font-size: 1rem !important; font-weight: 700 !important; color: var(--lp-texto) !important; margin: 0 !important; } html body .lista-card-cabecalho > div { flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; } html body .lista-card-cabecalho select, html body .lista-card-cabecalho input[type="text"], html body .lista-card-cabecalho input[type="search"] { height: 36px !important; border-radius: 10px !important; border: 1px solid #d6d9e3 !important; background: #fff !important; } @media (max-width: 900px) { html body .lista-card-cabecalho > div { flex-wrap: wrap !important; } } /* Rodapé do menu: "Sair" ocupa a linha toda; textos não cortam. */ html body .sidebar-usuario-sair { font-size: 0.7rem !important; padding: 0 6px !important; } html body .sidebar-usuario-sair:last-of-type { grid-column: 1 / -1; } /* Botões do cartão de saldo do Asaas com a mesma altura */ html body #asaasSaldoContainer button { height: var(--lp-botao-h) !important; min-height: var(--lp-botao-h) !important; } html body #asaasSaldoContainer > span:last-child { display: inline-flex; gap: 8px; }