/* ============================================================ LUMEN — estilos compartilhados por todas as telas ============================================================ */ /* ------------------------------------------------------------ 🔴 v346 (item 236) — A COR DO LUME. Ele em 14/10, com a foto de um Pinion no escuro: *"quero que a palavra Lumen tenha a cor do lumen desse relogio"*. Medida na imagem, pixel a pixel: o tom dominante do lume e #00d0e8 (498 ocorrencias; os cinco seguintes sao vizinhos dele). ⚠⚠ DUAS COISAS, E A SEGUNDA NAO E CAPRICHO. Sobre a barra lateral (#14142a) o #00d0e8 da **9,6:1** de contraste — confortavel. Sobre o branco do cartao de login ele da **1,88:1**, que e texto que nao se le. Lume brilha no escuro; no claro ele some, e isso e verdade na tela pelo mesmo motivo que e no relogio. Entao sao dois tons do MESMO matiz, um por fundo: --lume ......... #00d0e8 sobre escuro 9,6:1 --lume-escuro .. #076c7d sobre claro 6,1:1 > Marca ilegivel nao e marca: e uma mancha onde devia estar um nome. ⚠ A cor fica na MARCA, nao na palavra solta no meio de um paragrafo. "acessar o Lumen" numa frase continua texto normal — pintar uma palavra no meio de uma frase e enfeite que atrapalha a leitura, e ele pediu a cor do nome, nao um texto em duas cores. ------------------------------------------------------------ */ :root { --lume: #00d0e8; --lume-escuro: #076c7d; } * { box-sizing: border-box; } body { font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1a1a2e; background: #f6f7f9; margin: 0; font-size: 14px; } /* ---------- esqueleto: menu lateral + conteudo ---------- */ .app { display: flex; min-height: 100vh; } .menu { width: 232px; flex-shrink: 0; background: #14142a; color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .menu .marca { padding: 18px 20px 14px; border-bottom: 1px solid #26264a; } .menu .marca b { display: block; color: var(--lume); font-size: 16px; letter-spacing: 0.5px; } .menu .marca span { font-size: 11px; opacity: .55; } .menu nav { flex: 1; overflow-y: auto; padding: 12px 0 20px; } /* grupos sanfonados */ .menu .grupo-caixa { margin-top: 4px; } .menu .grupo-btn { width: 100%; background: transparent; border: none; color: #e2e8f0; font-family: inherit; font-size: 14px; font-weight: 700; text-align: left; padding: 13px 20px 11px; cursor: pointer; display: flex; align-items: center; gap: 9px; letter-spacing: .2px; border-radius: 0; } .menu .grupo-btn:hover { background: #1e1e3c; color: #fff; } .menu .grupo-btn .seta { display: inline-block; transition: transform .15s; font-size: 15px; line-height: 1; opacity: .6; } .menu .grupo-btn.aberto { color: #fff; } .menu .grupo-btn.aberto .seta { transform: rotate(90deg); opacity: 1; } .menu .grupo-btn .conta { margin-left: auto; font-size: 10px; color: #4b5563; font-weight: 500; background: #1e1e3c; padding: 2px 7px; border-radius: 9px; } .menu .grupo-itens { display: none; padding-bottom: 8px; } .menu .grupo-itens.aberto { display: block; } /* As telas de um grupo sao SUBORDINADAS a ele: recuo maior, fonte menor, sem peso e em cinza. Antes elas tinham fonte MAIOR que a do proprio grupo, o que invertia a hierarquia e fazia tudo parecer do mesmo nivel. O traco vertical amarra visualmente as telas ao grupo que as contem. */ .menu .grupo-itens a { padding: 7px 20px 7px 40px; font-size: 12.5px; font-weight: 400; color: #94a3b8; position: relative; } .menu .grupo-itens a::before { content: ''; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: #26264a; } .menu .grupo-itens a:hover { color: #fff; } .menu .grupo-itens a.ativo::before { background: #2563eb; } .menu a { display: block; padding: 8px 20px; color: #cbd5e1; text-decoration: none; font-size: 13.5px; } .menu a:hover { background: #1e1e3c; color: #fff; } .menu a.ativo { background: #2563eb; color: #fff; font-weight: 600; } .menu a.breve { color: #4b5563; cursor: default; } .menu a.breve:hover { background: transparent; color: #4b5563; } .menu a.breve::after { content: ' em breve'; font-size: 9.5px; opacity: .7; } /* v278 — o menu que nao veio. Quando o servidor nao responde, nao ha como saber quais telas esta pessoa pode abrir, e inventar a lista seria oferecer portas que nao abrem. Entao aparece esta mensagem no lugar do menu, em amarelo de aviso — nao em vermelho: nada se perdeu, a tela nao carregou. */ /* v281 — os 8 codigos de recuperacao. Morava dentro do `login.html` ate a tela "Meus aparelhos" passar a mostra-los tambem (item 20.25). Classe usada em duas telas nao pode morar dentro de uma: na outra ela simplesmente nao existe, e nada reclama — foi o defeito que a v277 ensinou a achar. */ .lg-rec { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; } .lg-rec span { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; text-align: center; overflow-wrap: anywhere; } /* v280 — as duas senhas conferem. Verde e vermelho SEM contar so com a cor: o sinal (✓ / ✗) e o texto dizem a mesma coisa, para quem nao distingue as duas e para quem le numa tela ruim. */ .par-senhas { margin-top: 6px; font-size: 12px; min-height: 16px; } .par-senhas.par-ok { color: #15803d; } .par-senhas.par-nao { color: #b91c1c; } /* v280/v367 — "por que o botao apagar nao esta ali" era uma frase em italico aqui (`.motivo-apagar`). O Nilo reprovou a lista tres vezes por poluicao: a frase virou o rotulo `.tag-nao`, declarado na propria `usuarios.html`, com a frase inteira no `title`. A classe velha saiu daqui de proposito — classe declarada que tela nenhuma usa faz parecer que a nota velha ainda existe. */ .menu .menu-erro { padding: 14px 20px; color: #cbd5e1; font-size: 12px; line-height: 1.5; } .menu .menu-erro b { display: block; color: #fbbf24; font-size: 13px; margin-bottom: 6px; } .menu .menu-erro p { margin: 0 0 8px; } .menu .menu-erro .menu-erro-motivo { color: #6b7280; font-size: 11px; word-break: break-word; } .menu .menu-erro a { padding: 7px 0; color: #93c5fd; } .menu .menu-erro a:hover { background: transparent; color: #fff; text-decoration: underline; } .menu .rodape { padding: 12px 20px; border-top: 1px solid #26264a; font-size: 10.5px; color: #6b7280; } .conteudo { flex: 1; min-width: 0; } .topo { background: #1a1a2e; color: #fff; padding: 15px 28px; } .topo h1 { margin: 0; font-size: 17px; letter-spacing: .5px; font-weight: 600; } .topo .sub { font-size: 12px; opacity: .7; margin-top: 3px; } main { max-width: 900px; margin: 24px auto; padding: 0 24px 60px; } /* ---------- cartoes e formulario ---------- */ .card { background: #fff; border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.07); } .card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin: 0 0 16px; font-weight: 700; } .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 14px; } .f { display: flex; flex-direction: column; } /* Todas as larguras de 1 a 12. Faltavam c1, c5, c7, c9, c10 e c11 — e um campo com classe sem regra encolhia para uma coluna so. Era esse o bug dos campos "Conta que recebeu" e "Descricao no extrato", ambos c5. */ .c1 { grid-column: span 1; } .c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c10 { grid-column: span 10; } .c11 { grid-column: span 11; } .c12 { grid-column: span 12; } /* ============================================================ ⚠⚠ ITEM 96 — A GRADE DE 12 COLUNAS NAO TINHA PONTO DE QUEBRA ------------------------------------------------------------ Doze colunas valiam em qualquer largura. Medido numa sonda que abriu as 49 telas em quatro larguras, antes de escrever uma linha disto: 390 px (celular) ... 49 telas de 49 com problema · 200 campos com menos de 90 px · 79 titulos com a tinta fora da caixa · TODAS com rolagem horizontal 768 px (tablet) .... 15 telas · 31 campos estreitos 950 px (a janela do Nilo) .......... 8 telas 1280 px ............ 8 telas Num campo de 24 px nao cabe nem o cursor. E a rolagem horizontal e a pior parte: a pessoa nao SABE que ha campo fora da tela. ⚠ POR QUE DOIS DEGRAUS E NAO UM. Com um degrau so, ou o tablet fica com tudo empilhado (desperdicando metade da tela num formulario de 14 campos), ou o celular continua com dois campos lado a lado — e em 390 px dois campos sao dois campos ruins. O meio-termo tem nome: ate 1000 px nada e menor que METADE da linha; ate 680 px, um campo por linha. ⚠ `.row > .cN` e nao `.cN`: a especificidade maior (0,2,0 contra 0,1,0) faz estas regras ganharem das de cima sem precisar de `!important`. E o `>` limita o efeito a quem e filho DIRETO de uma linha de formulario — grade de outra coisa que use as mesmas classes nao e tocada. ============================================================ */ /* ============================================================ ⚠⚠ v322 (item 103) — O MENU NO CELULAR ------------------------------------------------------------ Medido antes de mexer: o menu lateral tem **232 px fixos**. Num telefone de **390 px** sobram 158 para o sistema inteiro — e o oraculo da grade registrava isso como "cegueira declarada": ele PARAVA de medir largura de campo no celular, porque com 158 px *qualquer* campo fica estreito e *qualquer* titulo quebra. A regua tinha desistido de medir meia tela. A GAVETA, e por que nao foi um menu que encolhe: · menu estreito com so os icones precisaria de um icone por item em 49 telas, e icone sem palavra e adivinhacao — a pessoa descobre errando; · menu em cima, horizontal, com 12 grupos, rola para o lado e esconde metade; · a GAVETA devolve a largura INTEIRA ao conteudo e mantem o menu igualzinho ao do computador, com as mesmas palavras. **Nada a reaprender.** ⚠ O corte e 820 px e nao 680: aos 768 (tablet em pe) o menu ja come 30% da tela. Acima de 820 nada muda — o menu continua fixo, como sempre foi. ⚠ `visibility` entra junto com a posicao, e nao e enfeite: so mover para fora da tela deixaria os ~60 links do menu **no caminho do Tab**, atras do nada. ============================================================ */ .barra-topo { display: none; } @media (max-width: 820px) { .barra-topo { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; background: #14142a; color: #fff; padding: 10px 14px; } /* ⚠ v346 — a barra de topo do celular e a MESMA marca da lateral, e por isso leva a mesma cor. Fundo #14142a: o lume da 9,6:1 aqui tambem. */ .barra-topo b { font-size: 15px; letter-spacing: .5px; color: var(--lume); } .barra-topo .menu-btn { background: transparent; border: 1px solid #3b3b63; color: #fff; font-size: 19px; line-height: 1; padding: 6px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; } .app { display: block; } .menu { position: fixed; top: 0; left: 0; height: 100vh; z-index: 70; width: min(282px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .18s ease-out, visibility .18s; box-shadow: 4px 0 24px rgba(0,0,0,.4); } .menu.aberto { transform: translateX(0); visibility: visible; } .menu-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); border: none; padding: 0; margin: 0; display: none; } .menu-fundo.aberto { display: block; } } @media (min-width: 821px) { /* ⚠ a gaveta nao existe acima do corte: sem isto, a classe `aberto` deixada por um giro de tela manteria o menu com sombra e por cima do conteudo. */ .menu-fundo { display: none; } } @media (max-width: 1000px) { .row > .c1, .row > .c2, .row > .c3, .row > .c4, .row > .c5, .row > .c6 { grid-column: span 6; } .row > .c7, .row > .c8, .row > .c9, .row > .c10, .row > .c11 { grid-column: span 12; } } @media (max-width: 680px) { .row > .c1, .row > .c2, .row > .c3, .row > .c4, .row > .c5, .row > .c6, .row > .c7, .row > .c8, .row > .c9, .row > .c10, .row > .c11 { grid-column: span 12; } } /* ⚠ E a tabela larga, que estoura a PAGINA em vez de estourar a si mesma. Medido nas mesmas quatro larguras: `historico-vendas.html` empurrava 338 px para fora aos 950, e `sorteio-historico.html`, 487. O certo e a tabela rolar DENTRO do cartao: a pagina fica parada e so a tabela anda. */ .card { overflow-x: auto; } /* ⚠⚠ v322 — E O CARTAO QUE TEM COMBO NAO PODE SER RECORTE. A regra de cima resolve a tabela larga e cria outro problema, porque o CSS nao deixa escolher um eixo so: quando `overflow-x` e `auto`, o `overflow-y` **computa para `auto` tambem** — nao existe "rola na horizontal e transborda na vertical". Medido no Chromium em 09/10/2026: `getComputedStyle(card) .overflowY === 'auto'` nos dois cartoes. Consequencia, com a lista do combo aberta: · compra.html — a lista passa **197 px** da borda do cartao e e CORTADA; · venda.html — passa **112 px**; · e os dois ganham **barra de rolagem vertical** (`scrollHeight > clientHeight`), que foi o que o Nilo viu antes de entender a causa. O conserto era exato porque os dois usos NUNCA se encontravam: medido nas 49 telas em 09/10, **16 cartoes tinham combo, 25 tinham tabela e ZERO tinham os dois**. ⚠⚠ v334 — ESSA DISJUNCAO ACABOU, e foi a REGUA que avisou, nao o usuario: em 12/10 o campo de marca da negociacao virou combo, e aquela tela e UM cartao so, com a tabela do estoque dentro. O `test/gaveta_v322.test.js` reprovou na hora, e estava certo. A condicao mudou e ficou MAIS FORTE: o que protege a tabela larga deixou de ser a rolagem do CARTAO e passou a ser um embrulho por TABELA (`.ng-rol`). Proteger a tabela e melhor que proteger a vizinhanca dela — nao depende de o cartao inteiro estar livre de combo. A regua agora cobra exatamente isso: num cartao com combo, nenhuma tabela pode estar fora de um `.ng-rol`. ⚠ `:has()` nao e suportado em navegador antigo. Ali a regra e ignorada e o comportamento volta a ser o de hoje — degrada, nao quebra. E com o `.ng-rol` a tabela continua protegida mesmo nesse navegador, porque o embrulho nao depende de `:has()`. */ .card:has(.combo) { overflow: visible; } label { font-size: 11.5px; color: #4b5563; font-weight: 600; margin-bottom: 5px; } input, select, textarea { font-family: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #1a1a2e; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30,58,95,.10); } input[readonly] { background: #f3f4f6; color: #6b7280; } ::placeholder { color: #cbd5e1; opacity: 1; } .req input, .req select { border: 2px solid #9b2226; } .req input:focus, .req select:focus { border-color: #9b2226; box-shadow: 0 0 0 3px rgba(155,34,38,.14); } .req label::after { content: ' *'; color: #9b2226; font-weight: 700; } .legenda-req { font-size: 11px; color: #9b2226; margin-bottom: 14px; } .hint { font-size: 11px; color: #9ca3af; margin-top: 4px; } /* ---------- botoes ---------- */ button { font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: #1a1a2e; color: #fff; } .btn-primary:hover { background: #2a2a44; } .btn-primary:disabled { background: #9ca3af; cursor: not-allowed; } .btn-ghost { background: #fff; border-color: #d1d5db; color: #374151; white-space: nowrap; } .btn-ghost:hover { background: #f9fafb; } .btn-mini { font-size: 12px; padding: 5px 10px; } /* botao "+" de adicionar (categoria, marca, prefixo): altura de campo, cheio, "+" grande */ .btn-plus { height: 40px; min-width: 42px; padding: 0 14px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; line-height: 1; background: #1e3a5f; color: #fff; border: 1px solid #1e3a5f; border-radius: 7px; } .btn-plus:hover { background: #16304e; border-color: #16304e; } /* dentro de .inline / .add o "+" acompanha a altura EXATA do campo vizinho (campo obrigatorio tem borda 2px, normal 1px — altura fixa desalinhava) */ .inline .btn-plus, .add .btn-plus { height: auto; align-self: stretch; } .add { display: flex; gap: 8px; align-items: stretch; } .add input { flex: 1; } /* botoes de forma de pagamento (venda, receita avulsa) */ .modes { display: flex; gap: 8px; flex-wrap: wrap; } .mode { flex: 1; min-width: 140px; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px; cursor: pointer; background: #fff; text-align: left; } .mode.on { border-color: #1e3a5f; background: #eaf2fb; box-shadow: 0 0 0 2px rgba(30,58,95,.12); } .mode b { display: block; font-size: 13px; } .mode span { font-size: 11px; color: #6b7280; } .btn-perigo { background: #fff; border-color: #fecaca; color: #b91c1c; } .btn-perigo:hover { background: #fef2f2; } .actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; } .inline { display: flex; gap: 8px; align-items: flex-end; } /* ---------- mensagens ---------- */ .msg { padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; } .msg.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; display: block; } .msg.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; display: block; } .msg.aviso { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; display: block; } /* ⚠⚠ v359 (item 276) — A CAIXA DO "REGISTRADO, SEM ACAO". Ate aqui o sistema tinha quatro formas: vermelho (aja), verde (esta bom), ambar (olhe) e o `.hint`, que e 11px cinza-claro e some na tela. Faltava a quinta, e ela e uma categoria de verdade: um fato que FICA REGISTRADO e nao pede nada de ninguem. Posto no `.hint`, esse fato nao e lido — medido em 18/10, quando o Nilo procurou a linha das mensagens perdidas e nao a achou NO PROPRIO PRINT que ele tinha mandado. */ .msg.neutro { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; display: block; } /* ---------- combo (busca com filtro) ---------- */ .combo { position: relative; } .combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; margin-top: 3px; max-height: 230px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); display: none; } .combo-list.aberta { display: block; } .combo-item { padding: 8px 11px; cursor: pointer; font-size: 13.5px; } .combo-item:hover, .combo-item.sel { background: #eaf2fb; } /* opcao percorrida pelas setas do teclado — mais forte que o hover, para ficar claro qual sera aceita no Enter */ .combo-item.marcado { background: #1a1a2e; color: #fff; } .combo-item.marcado mark { background: #fbbf24; color: #1a1a2e; } .combo-item mark { background: #fde68a; color: inherit; padding: 0; border-radius: 2px; } .combo-vazio { padding: 9px 11px; color: #9ca3af; font-size: 12.5px; font-style: italic; } /* ---------- tabelas ---------- */ table.lista { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.lista th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; padding: 8px 10px; border-bottom: 2px solid #e5e7eb; } table.lista td { padding: 9px 10px; border-bottom: 1px solid #f3f4f6; } table.lista tr.inativa td { color: #9ca3af; font-style: italic; } table.lista td.acoes { text-align: right; white-space: nowrap; } .pill { font-size: 10.5px; background: #eef2ff; color: #3730a3; padding: 2px 8px; border-radius: 10px; } .vazio { color: #9ca3af; font-style: italic; padding: 18px 0; text-align: center; } /* ---------- dialogo ---------- */ dialog { border: none; border-radius: 12px; padding: 0; max-width: 460px; width: 92%; box-shadow: 0 12px 40px rgba(0,0,0,.28); } dialog::backdrop { background: rgba(15,23,42,.45); } /* ============================================================ ⚠⚠ v306 — O RODAPE DO DIALOGO PARA DE ROLAR JUNTO COM O MIOLO ------------------------------------------------------------ DEFEITO MEDIDO em 07/10/2026, depois que o Nilo escreveu *"nao encontrei o botao Substituir o historico"*: o dialogo mede .......... 826 px (a janela tem 860) o conteudo dele mede .... 1303 px o dialogo INTEIRO rola, e o rodape rola junto ao abrir, o botao esta em 785 px -> visivel ele rola para CIMA para ler o resumo (que e o que o documento manda) agora o botao esta em .... 1364 px -> FORA DA JANELA Medido igual num monitor de 1080 px. Nao e da tela nova: `dialog` nao tinha altura maxima nem rolagem no miolo, entao **os 51 dialogos do sistema** tem isto. So nunca mordeu porque nenhum deles tinha conteudo alto — o primeiro foi o relatorio de conferencia da carga, com 16 linhas de tabela e 4 avisos. O conserto: o dialogo vira uma coluna com altura maxima; cabecalho e rodape nao encolhem nem rolam, e **so o miolo rola**. ⚠ `dialog[open]`, E NAO `dialog`. O navegador esconde o dialogo fechado com `dialog:not([open]) { display: none }` na folha DELE — e folha de autor ganha da folha do navegador, qualquer que seja a especificidade. Escrever `dialog { display: flex }` deixaria **os 51 dialogos do sistema visiveis o tempo todo, empilhados em cima de cada tela**. Ha uma regua que abre cada dialogo e cobra o rodape dentro da janela, e um teste que cobra que esta regra tenha o `[open]`. ⚠ `min-height: 0` no miolo: sem ele, um filho flexivel nao encolhe abaixo do proprio conteudo, e o `overflow-y: auto` nao chega a valer — o dialogo volta a estourar, calado. ============================================================ */ dialog[open] { display: flex; flex-direction: column; max-height: calc(100vh - 40px); } /* ⚠ O DIALOGO ENVOLVIDO POR UM `
` — achado pelo `verificar_dialogos.js` na PRIMEIRA corrida dele, em `conciliacao.html` (#dlgReverter): com a regra acima sozinha, o formulario e o unico filho flexivel do dialogo, e ele NAO e um container flexivel — entao o cabecalho, o miolo e o rodape ficam dentro dele sem regra nenhuma, e o rodape foi parar a 2.251 px numa janela de 860. Esta linha faz o formulario repassar a coluna para dentro. Vale para qualquer dialogo futuro escrito nesse formato, que e o ponto. */ dialog[open] > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .dlg-head { background: #1a1a2e; color: #fff; padding: 14px 20px; font-weight: 600; font-size: 14px; flex: 0 0 auto; } .dlg-body { padding: 20px; flex: 1 1 auto; overflow-y: auto; min-height: 0; } .dlg-foot { padding: 14px 20px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; flex: 0 0 auto; background: #fff; /* a sombra diz que ha mais conteudo acima quando o miolo esta rolado */ box-shadow: 0 -1px 0 #eef1f5; } /* botao de dialogo nao quebra em varias linhas: em dialogo com 3 acoes o texto longo ficava empilhado em 3 linhas e o botao virava um bloco alto */ .dlg-foot button { white-space: nowrap; } .conf-tab { width: 100%; border-collapse: collapse; font-size: 13px; } .conf-tab td { padding: 7px 4px; border-bottom: 1px solid #f3f4f6; } .conf-tab td:first-child { color: #6b7280; width: 45%; } .conf-tab td:last-child { text-align: right; font-weight: 600; } .conf-tab tr.destaque td { background: #eaf2fb; font-size: 14px; } /* ============================================================ PLACAR DAS INTEGRACOES — item 133-A (v329) ------------------------------------------------------------ ⚠ QUATRO CORES, e a cor NAO carrega sozinha a informacao: cada linha diz o estado por escrito ao lado da bolinha. Placar que so muda de cor nao serve para quem enxerga cor diferente — e nem para quem olha de longe. ============================================================ */ .pi-lista { display: grid; gap: 10px; } .pi-linha { display: flex; gap: 10px; align-items: flex-start; } .pi-bola { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; margin-top: 4px; border: 1px solid rgba(0,0,0,.08); } .pi-bola.verde { background: #22c55e; } .pi-bola.amarelo { background: #facc15; } .pi-bola.vermelho { background: #ef4444; } .pi-bola.cinza { background: #cbd5e1; } .pi-txt { min-width: 0; } .pi-nome { font-weight: 600; font-size: 13.5px; color: #1a1a2e; } .pi-oque { font-weight: 400; font-size: 11.5px; color: #94a3b8; } .pi-estado { font-size: 12px; color: #64748b; } .pi-estado.vermelho { color: #991b1b; font-weight: 600; } .pi-estado.amarelo { color: #854d0e; font-weight: 600; } .pi-det { font-size: 11.5px; color: #94a3b8; } .pi-resumo { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; margin-left: 8px; vertical-align: middle; } .pi-resumo.verde { background: #dcfce7; color: #166534; } .pi-resumo.amarelo { background: #fef9c3; color: #854d0e; } .pi-resumo.vermelho { background: #fee2e2; color: #991b1b; } .pi-resumo.cinza { background: #f1f5f9; color: #475569; } /* ---------- inicio ---------- */ .atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; } /* ⚠ v324 — CINZA CLARO COM CONTORNO DE CONTRASTE, pedido do Nilo. Branco sobre o cartão branco que os contém dava dois brancos com uma sombra no meio: o atalho não se destacava do fundo dele. */ .atalho { background: #f1f5f9; border-radius: 10px; padding: 16px; text-decoration: none; color: #1a1a2e; display: block; border: 1px solid #cbd5e1; } .atalho:hover { border-color: #2563eb; background: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.15); } .atalho b { display: block; font-size: 15px; margin-bottom: 4px; } .atalho span { font-size: 12px; color: #6b7280; } .numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 14px; } .numero { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.07); } .numero .rot { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; } .numero .val { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; } .versao { text-align: center; color: #9ca3af; font-size: 11px; margin-top: 24px; } /* ---------- bloco de dados bancarios ---------- */ .bloco-banco { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 14px 4px; margin-top: 4px; background: #fafbfc; } .bloco-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #6b7280; font-weight: 700; margin-bottom: 10px; } input.invalido { border-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(185,28,28,.10) !important; } .erro-hint { color: #b91c1c !important; font-weight: 600; } .ok-hint { color: #047857 !important; font-weight: 600; } /* ============================================================ QUADRO DE AJUDA — explica os campos que geram mais dúvida. Fica à direita em telas largas e desce para baixo em telas estreitas. ============================================================ */ main.com-ajuda { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; max-width: 1240px; } /* ⚠⚠ v324 — QUEM PRECISA DA LARGURA INTEIRA DECLARA, com esta classe. Antes isto era um `grid-column:1/-1` inline, numa faixa só, mais uma exceção por ID dentro do `montarAjuda`. O segundo caso chegou (o alerta de aparelho novo), não estava na exceção, e **espremeu o formulário inteiro em 310 px** — medido na tela de Venda em 09/10/2026. A classe faz as duas metades do conserto: ela dá a largura E é o que o `montarAjuda` procura para NÃO varrer o elemento para dentro da coluna. */ main > .faixa-larga { grid-column: 1 / -1; } /* ============================================================ ⚠ v324 (pedido do Nilo, 09/10) — OS ATALHOS COMO SEGUNDO MENU ------------------------------------------------------------ *"gostaria que os atalhos ficassem, na tela do computador, na parte direita da tela, como se fossem um outro menu. Gosto da ideia dos cards... Acho que esses cards não deveriam ser brancos. Cinza claro acho uma boa opção, com um contorno com mais contraste."* ⚠ A coluna é `sticky`, como o quadro de ajuda: menu que rola para fora da tela deixa de ser menu na metade da página. ⚠ E no CELULAR eles DESCEM, não encolhem: numa tela de 390 px não existe "parte direita" que caiba, e espremer a coluna daria cartões de 150 px — exatamente o defeito que o item 103 acabou de consertar. ============================================================ */ main.inicio { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; max-width: 1240px; } main.inicio > .inicio-conteudo { min-width: 0; } main.inicio > .inicio-atalhos { position: sticky; top: 16px; } @media (max-width: 1100px) { main.inicio { grid-template-columns: minmax(0, 1fr); } main.inicio > .inicio-atalhos { position: static; } } /* na coluna estreita os atalhos empilham — é o que faz deles um menu */ main.inicio .atalhos { grid-template-columns: minmax(0, 1fr); gap: 10px; } @media (max-width: 1100px) { main.com-ajuda { grid-template-columns: minmax(0, 1fr); } } /* no celular a ajuda some — a visualização móvel é para consulta, não lançamento */ @media (max-width: 640px) { .ajuda { display: none !important; } } /* medidor de força da senha */ .med-barra { height: 6px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin-top: 7px; } .med-barra i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .18s ease, background .18s ease; } .med-txt { font-size: 12px; font-weight: 700; margin-top: 5px; } .med-falta { font-size: 11.5px; color: #6b7280; margin-top: 2px; line-height: 1.45; } .med-falta.ok { color: #16a34a; } .ajuda { background: #f1f3f7; border: 1px solid #e2e6ee; border-radius: 10px; padding: 16px 18px; position: sticky; top: 16px; } .ajuda h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #64748b; margin: 0 0 12px; font-weight: 700; } .ajuda .campo { margin-bottom: 14px; } .ajuda .campo:last-child { margin-bottom: 0; } /* ⚠ v302 — O `>` AQUI NAO E ENFEITE. Sem ele esta regra pegava TODO negrito do quadro de ajuda, inclusive os que ficam DENTRO de um paragrafo: cada trecho em negrito virava bloco e caia numa linha so ("O administrador ve / todos / os cards"). Medido no print do Nilo em 06/10, na tela de Melhorias; a tela de Despesa tinha o mesmo defeito, calado, havia versoes. O titulo de cada campo e filho DIRETO do `.campo` — e so ele deve virar bloco. */ .ajuda .campo > b { display: block; font-size: 12.5px; color: #1e3a5f; margin-bottom: 3px; } .ajuda .campo p { margin: 0; font-size: 12px; line-height: 1.55; color: #1e40af; } .ajuda .campo p + p { margin-top: 6px; } .ajuda .campo em { font-style: normal; background: #dbeafe; padding: 0 3px; border-radius: 3px; } /* segmented control (toggle de botões colados) — padrão visual do seletor da cotação, com nome próprio (seg-toggle) para não colidir com a classe seg que algumas telas já definem localmente. Usado no formulário de parceiro. */ .seg-toggle { display:inline-flex; align-self:flex-start; border:1px solid #d1d5db; border-radius:10px; overflow:hidden; } .seg-toggle button { border:0; background:#fff; padding:11px 22px; font-size:14px; cursor:pointer; color:#1a1a2e; transition: background .18s ease, color .18s ease; } .seg-toggle button + button { border-left:1px solid #e5e7eb; } .seg-toggle button:hover { background:#f8fafc; } .seg-toggle button.on { background:#1a1a2e; color:#fff; } .seg-toggle button.on:hover { background:#1a1a2e; } /* ---- DASHBOARD (tela inicial) ---- */ .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; } .dash-item { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; } .dash-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; margin-bottom: 6px; } .dash-val { font-size: 20px; font-weight: 700; color: #1a1a2e; } .dash-sub { margin-top: 10px; border-top: 1px solid #e5e7eb; padding-top: 8px; } .dash-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; padding: 3px 0; } .dash-linha span { color: #6b7280; } .dash-linha b { color: #1a1a2e; font-weight: 600; } .dash-pct { color: #2563eb !important; font-weight: 600; min-width: 42px; text-align: right; } .dash-exp { margin-top: 8px; background: none; border: none; color: #2563eb; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; } .dash-exp-box { margin-top: 8px; } /* card escuro da cotação do dólar */ .dash-cotacao { display: flex; align-items: baseline; gap: 12px; background: #1a1a2e; color: #fff; border-radius: 10px; padding: 12px 18px; margin-bottom: 16px; width: fit-content; } .dash-cot-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #9ca3af; } .dash-cot-val { font-size: 22px; font-weight: 700; } /* linhas de saldo: nome à esquerda com reticências, valor à direita sem quebrar */ .dash-linha { flex-wrap: nowrap; } .dash-linha span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .dash-linha b { white-space: nowrap; flex-shrink: 0; } /* link dentro das fatias do capital de giro */ .dash-linha a { color: #2563eb; text-decoration: underline; } .dash-cot-info { font-size: 11px; color: #9ca3af; align-self: center; } /* cores dos valores monetários no dashboard */ .dash-money { } /* real positivo: cor padrão (herda) */ .dash-money.dash-neg { color: #dc2626; } /* real negativo: vermelho normal */ .dash-money.dash-usd-pos { color: #15803d; } /* dólar positivo: verde escuro */ .dash-money.dash-usd-neg { color: #991b1b; } /* dólar negativo: vermelho escuro */ /* faixa do topo: cotação (esquerda) + capital de giro (direita), espaço no meio */ .dash-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; } .dash-topo .dash-cotacao { margin-bottom: 0; } .dash-topo-cg { background: #dbe1ea; border: 1px solid #b8c2d0; border-radius: 10px; padding: 14px 16px; flex: 1 1 260px; max-width: 340px; box-sizing: border-box; } /* labels de tipo no canto superior direito dos atalhos */ .atalho { position: relative; } .atalho span.atalho-lbl { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 600; color: inherit; padding: 2px 8px; border-radius: 10px; } .atalho span.atalho-lbl.atalho-lbl-acao { background: #fef3c7; color: #92400e; } .atalho span.atalho-lbl.atalho-lbl-rel { background: #dbeafe; color: #1e40af; } /* coluna esquerda da faixa do topo: dólar (cima) + lucro do mês (baixo) empilhados */ .dash-topo-esq { display: flex; flex-direction: column; gap: 12px; } /* lucro do mês: mesmo visual do card dólar (escuro), mesma altura */ .dash-topo-lucro { display: flex; align-items: baseline; gap: 12px; background: #1a1a2e; color: #fff; border-radius: 10px; padding: 12px 18px; width: fit-content; } /* ⚠ v331 — a caixa da RENTABILIDADE pode trazer TEXTO no lugar do número ("aguardando o primeiro mês fechado"), e texto longo em 22px negrito estouraria a faixa do topo no celular. Sem número, o valor cai para tamanho de frase. Mesma decisão do amarelo do placar das integrações: a ausência de medida tem de aparecer, sem se disfarçar de medida. */ .dash-topo-lucro .dash-cot-val.dash-rent-vazia { font-size: 13px; font-weight: 600; color: #e5e7eb; } .dash-topo-lucro .dash-cot-info { color: #9ca3af; } /* ⚠ v331 — a linha da SUBTRAÇÃO nas fatias do capital de giro. As três fatias são só ATIVOS e nunca somaram o total: a diferença é o passivo. Com o conserto das quatro famílias de passivo essa diferença cresceu, e conta implícita num número que o dono olha todo dia deixou de ser aceitável. */ .dash-linha.dash-linha-sub { border-top: 1px solid #b8c2d0; margin-top: 4px; padding-top: 6px; } .dash-linha.dash-linha-sub span:first-child { color: #4b5563; font-weight: 600; } /* ⚠ v332 — a distribuição a pagar aparece no cartão em tom apagado: ela foi tirada do passivo de propósito (é dinheiro dos sócios, e continua empregado no negócio), mas tirar e não dizer seria pior que contar errado. Tom apagado diz "existe e não entra" sem competir com as fatias. */ .dash-linha .dash-fora { color: #9ca3af !important; font-style: italic; font-weight: 500; } /* card em destaque dentro do grid (cinza escuro, igual ao Capital de giro) */ .dash-item.dash-item-destaque { background: #dbe1ea; border-color: #b8c2d0; } /* card de ajuda (irmão à direita de um card funcional) */ .ajuda-card { background: #f0f6ff; border: 1px solid #cfe0f5; border-left: 4px solid #2563eb; border-radius: 10px; padding: 18px 20px; } .ajuda-card .ajuda-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #1e40af; margin-bottom: 8px; } .ajuda-card p { font-size: 13px; color: #374151; margin: 6px 0; line-height: 1.5; } .ajuda-card p:last-child { margin-bottom: 0; } /* toggle deslizante (interruptor on/off) — usado nas tabelas */ .tog-sw { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; } .tog-sw input { opacity: 0; width: 0; height: 0; position: absolute; } .tog-sw .tog-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px; transition: background .15s; } .tog-sw .tog-track::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .tog-sw input:checked + .tog-track { background: #2563eb; } .tog-sw input:checked + .tog-track::before { transform: translateX(16px); } /* linha com card funcional (esq) + card de ajuda irmão (dir), alinhados no topo */ .linha-com-ajuda { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; } @media (max-width: 1000px) { .linha-com-ajuda { grid-template-columns: minmax(0, 1fr); } } /* ---------- 16.3: alerta de login em aparelho novo ---------- Vermelho de propósito, e no topo de QUALQUER tela. Não é aviso de sistema ("salvo com sucesso"), é a pergunta mais séria que o sistema faz a alguém: entraram na sua conta de um lugar novo — foi você? */ .alerta-acesso { background: #fef2f2; border: 1px solid #fca5a5; border-left: 4px solid #dc2626; color: #7f1d1d; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .alerta-acesso .aa-txt { font-size: 13.5px; line-height: 1.5; } .alerta-acesso .aa-btn { display: flex; gap: 8px; white-space: nowrap; } /* ---------- selo de novidade (v302, item 18/2) ---------- ⚠ O NOME NAO E `bolinha`, E ISSO FOI MEDIDO: `.bolinha` JA EXISTE em `public/marcas.html`, onde ela e o CIRCULO DE COR da marca (22px, redondo). Declara-la aqui, no estilo global, teria pintado de vermelho e deformado todas as bolinhas de cor daquela tela — em producao, sem erro nenhum. Quem pegou foi o `verificar.js`, que ja cobrava exatamente isto desde o item 64. Aparece no item do menu, no botao do grupo (que pode estar fechado) e na aba da tela de melhorias. */ .selo-novo { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; background: #dc2626; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; } .grupo-btn .selo-novo { margin-left: 8px; } /* ============================================================ v364 (itens 137-b e 137-d) — O CONTROLE QUE SO O ADMINISTRADOR USA ------------------------------------------------------------ ⚠⚠ ISTO NAO E PERMISSAO. Quem recusa e o `METODO_SO_ADMIN` do `src/auth_gate.js`, no servidor. Esta regra existe para a pessoa nao VER um botao que vai responder 403 — o sintoma do `html2canvas`, que respondeu "nao carregou" por meses. ⚠ Esconde SO quando a marca diz `0`. Sem marca (erro de rede, a funcao nao rodou) o controle aparece e o servidor recusa, que e o lado seguro: o contrario esconderia controle de quem tem direito a ele. ============================================================ */ body[data-admin="0"] [data-so-admin] { display: none !important; }