/* ═══ PADRÃO DE CAIXAS DO ARGOS — escolhido pela equipe em 08/08/2026 ═══════════ Vale no Argos e em TODO adendo dele: portal do técnico, portal do cliente, portal de vendas, colaborador, suporte, DVR. SELO / ETIQUETA .............. FUNDO BRANCO · CONTORNO COLORIDO · LETRA PRETA CAIXA DE FILTRO .............. altura 38px · cantos 10px · borda cinza Por que arquivo compartilhado e não cópia em cada página: padrão copiado em 12 arquivos vira 12 padrões no primeiro ajuste. Aqui muda num lugar só. 🪤 A cor vive no CONTORNO, via a variável `--sc`. Quem cria selo novo escolhe a CLASSE de cor, nunca escreve cor no `style=` — cor inline vence a cascata e quebra numa das duas peles (incidente cor-inline-em-pagina-de-duas-peles). 🪤 `display:inline-block` + `white-space:nowrap` não são enfeite: sem eles a borda soma 2px, o texto quebra em coluna estreita e o contorno sai em pedaços. SEMÂNTICA DAS CORES (usar a intenção, não o gosto): verde = em dia, confirmado, fiscal, o que UNE (pago, assinado, NF) azul = documento de cobrança (boleto) roxo = recibo, rótulo, marcador (recibo, selo) ocre = aguardando, recorrência (pendente, carnê) âmbar = atenção, precisa de gente (aviso, vence em 30d) vermelho= atrasado, falha, cancelado (vencido, não assinado) cinza = ausência de informação (só fatura, sem dado) ═══════════════════════════════════════════════════════════════════════════ */ .selo{ display:inline-block; white-space:nowrap; line-height:1.5; background:#FFFFFF; color:#14161B; border:1px solid var(--sc,#6B7482); padding:1px 6px; border-radius:8px; font-size:9px; font-weight:700; } .selo-g{--sc:#15703D} /* verde */ .selo-b{--sc:#1D4ED8} /* azul */ .selo-p{--sc:#6D28D9} /* roxo */ .selo-o{--sc:#A16207} /* ocre */ .selo-a{--sc:#B45309} /* âmbar */ .selo-r{--sc:#B11F2C} /* vermelho */ .selo-c{--sc:#6B7482} /* cinza */ /* selo de STATUS (um pouco maior, usado em coluna própria de tabela) */ .selo-status{padding:2px 8px; border-radius:10px; font-size:10px} /* branco nas DUAS peles, de propósito: foi o pedido, e chip que muda de cor conforme o tema deixa de ser reconhecível de relance. */ body.dark-mode .selo{background:#FFFFFF; color:#14161B} /* ─── CAIXA DE FILTRO (barra de filtros das listas) ────────────────────────── */ .filtro{ height:38px; padding:0 12px; box-sizing:border-box; font-size:13px; border:1px solid #D6DAE0; border-radius:10px; background:#fff; color:#16181D; } .filtro:focus{outline:none; border-color:#1D4ED8; box-shadow:0 0 0 3px rgba(29,78,216,.15)} select.filtro{min-width:150px; cursor:pointer} body.dark-mode .filtro{background:#fff; color:#16181D} /* botão que vive na mesma barra acompanha a altura, senão desalinha a fileira */ .filtro-btn{height:38px; padding:0 14px; border-radius:10px; font-size:12px} /* ─── CAIXA DENTRO DE MODAL ─────────────────────────────────────────────────── .cx-resumo = o registro em que a ação vai mexer (topo do modal: cliente, contrato, vigência, valor atual). .cx-nota = o rodapé que explica o que a ação faz / o que ela não mexe. 🚩 POR QUE EXISTE — medido na PRODUÇÃO em 04/09/2026, tema claro: estas caixas nasciam com `background:#16181D` escrito no `style=` do elemento, do tempo em que o sistema só tinha a pele escura. Quando veio a pele clara, o `calmo.css` escureceu a LETRA (regra `[style*="color:#98A0AC"]`) — e não tinha como saber que o FUNDO continuava preto no mesmo atributo. Sobrou letra escura em caixa preta: **1,70:1 de contraste**, contra os 4,5:1 mínimos para ler. Atingidos: Renovar Contrato (2 caixas), Registrar Acordo, e o campo Lead do follow-up. Nenhum log, nenhum teste, nenhuma tela vermelha — o usuário só vê um bloco preto no meio de um modal branco. É a mesma família da rail branca com letra branca: mudou-se um lado do par (fundo/letra) e o outro ficou preso no atributo do elemento. 🪤 Por isso aqui NÃO entra hexadecimal de tema: a cor vem dos TOKENS (`--surface-2` / `--border` / `--text-2` / `--text-3`), que já viram sozinhos nas duas peles. Quem criar caixa nova usa a CLASSE — cor inline vence a cascata e quebra uma das peles, sempre. 🚦 A trava é `test/unit/texto-escuro-sobre-escuro.test.js` (irmã da texto-branco-sobre-claro): fundo escuro inline + letra que o tema claro escurece reprova o push. */ .cx-resumo{ background:var(--surface-2,#FAFBFC); color:var(--text-2,#39404A); border:1px solid var(--border,#E5E7EB); border-radius:8px; padding:10px 14px; font-size:12px; line-height:1.7; margin-bottom:14px; } .cx-nota{ background:var(--surface-2,#FAFBFC); color:var(--text-3,#586069); border:1px solid var(--border,#E5E7EB); border-radius:6px; padding:8px 12px; font-size:11px; line-height:1.6; margin-top:10px; } /* CAMPO TRAVADO (input disabled): mesma lei — recuo pelo token, nunca por hex de tema. O `efu-lead-nome` do follow-up trazia `background:#16181D` inline e caía no mesmo 1,70:1. Regra na classe resolve para TODO campo travado do sistema. 🪤 ESTE ARQUIVO TAMBÉM É CARREGADO PELAS TELAS ESCURAS (técnico, cliente, colaborador, suporte, levantamento, DVR), e lá os tokens do vidro.css NÃO existem — cai no fallback claro. MEDIDO em 04/09/2026 antes de deixar assim: essas seis telas têm **0** campos `form-*` desabilitados no markup (o único `disabled` é um do colaborador, momentâneo, durante o envio da foto). Ou seja, hoje a regra é inerte lá. Quem for pôr campo travado numa tela escura confere isto: o número a reencontrar é ZERO. */ .form-input:disabled, .form-select:disabled, .form-textarea:disabled{ background:var(--surface-2,#FAFBFC); color:var(--text-2,#39404A); cursor:not-allowed; } /* ─── BOTÃO DE AÇÃO (mesma lei do selo) ─────────────────────────────────────── FUNDO BRANCO · CONTORNO COLORIDO · LETRA PRETA. Faltava aqui, e por isso cada tela inventou o seu: "Ver perfil" azul sólido na base de clientes, "Recebimento avulso" verde chapado na Movimentação, "Gerar previsão" vermelho na Folha. A cor vive no CONTORNO (--bc) e diz a INTENÇÃO, igual ao selo: azul = abrir/ver · verde = entra dinheiro/confirma · vermelho = sai dinheiro ou destrói · cinza = neutro. 🪤 Quem usa escreve a CLASSE, nunca cor no style= — cor inline vence a cascata e quebra numa das duas peles. */ .btn-acao{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#FFFFFF; color:#14161B; border:1px solid var(--bc,#6B7482); border-radius:9px; padding:6px 12px; font-size:12px; font-weight:700; line-height:1.2; cursor:pointer; white-space:nowrap; font-family:inherit; transition:background .12s, box-shadow .12s; } .btn-acao:hover{ background:color-mix(in srgb, var(--bc,#6B7482) 8%, #FFFFFF); } .btn-acao:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--bc,#6B7482) 25%, transparent); } .btn-acao:disabled{ opacity:.5; cursor:not-allowed; } .btn-acao svg{ width:14px; height:14px; } .ba-azul{--bc:#1D4ED8} .ba-verde{--bc:#15703D} .ba-vermelho{--bc:#B11F2C} .ba-ocre{--bc:#A16207} .ba-cinza{--bc:#6B7482} /* versão miúda, para dentro de linha de tabela */ .btn-acao.mini{padding:4px 10px; font-size:11px; border-radius:8px} /* branco nas DUAS peles, pelo mesmo motivo do selo: botão que troca de cor com o tema deixa de ser reconhecível de relance. */ body.dark-mode .btn-acao{background:#FFFFFF; color:#14161B} body.dark-mode .btn-acao:hover{background:color-mix(in srgb, var(--bc,#6B7482) 12%, #FFFFFF)} /* ─── FICHA DE INSTALAÇÃO: o material marcado abre uma GRADE, não pílulas ────── (plano 026 Fase 6b — pedido dele em 03/09/2026: as opções de cada material ficavam em fileiras de chips que quebram linha, "listas de caixas espalhadas, difícil de ler". A regra de negócio NÃO muda — checkbox em vez de lista (28/08), mais de um valor por eixo, eixo condicional, sistema por linha e aparelho por unidade continuam iguais. Muda só o arranjo: cada pergunta vira uma LINHA com rótulo à esquerda e as opções alinhadas em colunas.) Vale para o app do técnico e para o painel do escritório — mesma classe, um lugar só. As cores vêm dos tokens com fallback claro; a tela escura do técnico sobrepõe no