/* ============================================================ cdanuv-tema-claro-contraste.css -- 2026-09-15 ------------------------------------------------------------ Passe de contraste do TEMA CLARO da nuvem geral. Pedido do dono: "melhorar os contrastes" + "esse botao de Inicio tao escuro no tema claro". O que estava errado, medido: card branco sobre a pagina .......... 1,04:1 (o painel nao tinha borda visivel) "Online" (.text-success) ............. 4,1:1 (abaixo do minimo de 4,5) rotulo cinza de 11px (.text-muted) .. 4,68:1 (no limite, e e texto pequeno) botao "Inicio" ...................... 10,9:1 (alto demais -- ver abaixo) 🔑 O PRINCIPIO: hierarquia por TAMANHO e PESO, nao por texto apagado. E o elemento mais forte da tela tem de ser o que ela pede -- escolher um local, nao voltar ao inicio. O "Inicio" era o unico bloco solido escuro da pagina e roubava a atencao dos botoes azuis dos locais. 🪤 SO CONTRASTE. Nada de paleta nova: todos os valores saem dos tokens do cdanuv-theme.css. Nao repinta tela pronta -- ver a bronca de 12/09 sobre a folha de laboratorio que cravava paleta. 🪤 ARQUIVO SEPARADO, E ESSE E O MOTIVO: o cdanuv-theme.css e compartilhado com 9 telas do 4B, que esta fora do foco por decisao do dono. Deixar o bloco la mudaria o 4B de lado, sem ninguem pedir. Aqui o limite e explicito: quem nao carrega este nao muda. Nenhum arquivo do 4B foi tocado. 🪤 A guarda html:not([data-theme="dark"]) faz duas coisas: vale antes de o JS do tema rodar (claro e o padrao) e sobe a especificidade acima do cdanuv-pages.css, que carrega depois. ============================================================ */ /* 1. O CARD GANHA BORDA. Branco sobre #f1f5f9 não tem separação visível; a sombra sozinha some em tela clara e em telefone com brilho alto. */ html:not([data-theme="dark"]) .login-container.bg-white, html:not([data-theme="dark"]) .login-card { border: 1px solid var(--cdat-border-2); } /* 2. "INÍCIO" DEIXA DE SER UM BLOCO ESCURO e vira um botão de contorno. Mesmo tamanho e mesma altura (34px, box-sizing já é border-box): só o peso muda. */ html:not([data-theme="dark"]) .btn-brand-inicio { background: var(--cdat-surface); color: var(--cdat-text); border: 1px solid var(--cdat-border-2); } html:not([data-theme="dark"]) .btn-brand-inicio:hover { background: var(--cdat-surface-3); color: var(--cdat-text); border-color: var(--cdat-muted); } /* 3. TEXTO PEQUENO UM PASSO MAIS ESCURO, dentro dos cards. O rótulo continua menor e espaçado — a hierarquia vem daí, não de uma cor fraca. */ html:not([data-theme="dark"]) .login-container .text-muted { color: var(--cdat-text-2) !important; /* 7,5:1 */ } html:not([data-theme="dark"]) .login-container .text-success { color: #166534 !important; /* 6,5:1 — era 4,1:1 */ } /* 4. OS BOTÕES TINGIDOS DO TOPO ganham fio de contorno: sem ele flutuam sobre o branco do cabeçalho e não se leem como controle. */ html:not([data-theme="dark"]) .btn-brand-rel { border: 1px solid var(--cdat-tint-bd); } html:not([data-theme="dark"]) .btn-brand-sair { border: 1px solid #fecaca; color: #b91c1c; /* 6,1:1 — era 4,6:1 */ } /* ============================================================ SEGUNDA PASSADA — 2026-09-15, as telas internas ------------------------------------------------------------ Pedido do dono: o mesmo padrão em Proprietários, Cadastros, Relatórios, Logs, Cancela e Meus dados. 🔑 MEDIDO, NÃO OLHADO. Varri todas as regras de cor do tema claro no cdanuv-pages.css e calculei a razão de contraste de cada uma contra o fundo que ela declara. Vinte e quatro ficaram abaixo de 4,5:1; cinco eram falso positivo (texto branco sobre fundo escuro declarado em outra regra). As que sobraram estão abaixo, cada uma com o número que tinha. 🪤 MESMA MATIZ, UM PASSO MAIS ESCURA. Nenhuma cor nova: verde continua verde, âmbar continua âmbar. Só sai da faixa em que a cor some. ============================================================ */ /* ── Verde de ação: branco sobre #16a34a dá 3,3:1 ──────────────────────────── É o par que mais aparece (Cobrar, Adicionar, veículo selecionado) e é justamente o botão que conclui a operação. #15803d leva a 4,6:1 sem mudar a leitura de "verde = confirma". */ html:not([data-theme="dark"]) .btn-agt-add, html:not([data-theme="dark"]) #idbtn-cobrar, html:not([data-theme="dark"]) #idbtn-voucher-cobrar, html:not([data-theme="dark"]) .val-acao-cobrar { background: #15803d !important; } html:not([data-theme="dark"]) .login-container input[type=submit].btn-success.fw-bold[disabled] { background: #15803d !important; border-color: #15803d !important; } /* o mesmo verde como TEXTO sobre branco (3,3:1) precisa ir mais fundo: 6,5:1 */ html:not([data-theme="dark"]) .agt-badge-ativo, html:not([data-theme="dark"]) .login-container .col:has(> input[disabled].btn-success)::after { color: #166534 !important; } /* "pós-validação": verde sobre verde-claro dava 3,0:1 → 6,0:1 */ html:not([data-theme="dark"]) #idbtn-posvalidacao.btn-success, html:not([data-theme="dark"]) #idbtn-voucher-posativacao.btn-success { color: #166534 !important; } /* ── "Re-Calcular": branco sobre âmbar #f59e0b é 2,15:1 ────────────────────── Branco sobre âmbar nunca funciona -- é o pior par da nuvem inteira. O âmbar escurece para #b45309 (4,7:1) e o botão continua sendo o "cuidado" da linha. */ html:not([data-theme="dark"]) #idbtn-recalc { background: #b45309 !important; } /* ── Rótulos e vazios dos relatórios: #94a3b8 dá 2,3 a 2,6:1 ───────────────── São as legendas do detalhe do ticket, o "nenhum resultado" e a etiqueta de qualidade. Texto pequeno em cinza claro: o tamanho já dá a hierarquia, a cor fraca só tirava a legibilidade. */ html:not([data-theme="dark"]) .rel-vazio, html:not([data-theme="dark"]) .rel-det-campo label, html:not([data-theme="dark"]) .rel-det-sem-foto, html:not([data-theme="dark"]) .rel-det-qual-badge { color: var(--cdat-text-2) !important; /* 6,8 a 7,5:1 */ } /* ── Cabeçalho das tabelas de relatório: 4,34:1 ──────────────────────────── */ html:not([data-theme="dark"]) .rel-table thead th { color: var(--cdat-text-2); } /* ── Vermelho sobre vermelho-claro: 3,3 a 4,0:1 ──────────────────────────── */ html:not([data-theme="dark"]) .btn-brand-sair-top:hover, html:not([data-theme="dark"]) .login-container h3.text-danger { color: #b91c1c !important; } /* ── Navegação do detalhe, estado desligado: 1,73:1 ────────────────────────── Desligado pode ser discreto, não invisível. Vai a 2,9:1: ainda se lê como "não dá para clicar", mas dá para ver que o botão existe. */ html:not([data-theme="dark"]) .btn-rel-det-nav:disabled { color: var(--cdat-muted); } /* ============================================================ TERCEIRA PASSADA — 2026-09-15, vista das telas de verdade ------------------------------------------------------------ As seis telas fotografadas mostraram o que a medição não mostra: o "Início" não era um caso isolado. As outras telas usam OUTRAS classes para o mesmo papel (.btn-agt-voltar, .btn-rel-voltar), e todas pintam um retângulo quase preto no canto superior esquerdo. 🔑 POR QUE ISSO IMPORTA MAIS QUE O NÚMERO: em Proprietários havia TRÊS blocos escuros (Voltar, Dashboard, Totem) disputando a atenção com a aba azul que diz onde a pessoa está. Contraste alto demais no lugar errado é tão ruim quanto contraste de menos: o olho vai para o que grita, e quem gritava era o botão de SAIR da tela, não o conteúdo dela. Navegação (voltar, início, pular para outra seção) passa a ser um botão de contorno, quieto. Quem fica colorido é a ação da tela e a aba ativa. 🪤 NÃO mexe nos botões que são AÇÃO: "Abonar" continua escuro (par do verde "Cobrar"), "Filtro" continua sólido (é um interruptor, não navegação). ============================================================ */ html:not([data-theme="dark"]) .btn-agt-voltar, html:not([data-theme="dark"]) .btn-rel-voltar { background: var(--cdat-surface); color: var(--cdat-text); border: 1px solid var(--cdat-border-2); } html:not([data-theme="dark"]) .btn-agt-voltar:hover, html:not([data-theme="dark"]) .btn-rel-voltar:hover { background: var(--cdat-surface-3); color: var(--cdat-text); border-color: var(--cdat-muted); }