/* ============================================================
Integrator Financeiro 2026 - Design System
Tema CLARO, menu superior com dropdowns, fonte Inter.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
--bg: #f5f7fb;
--surface: #ffffff;
--elevated: #f8fafc;
--line: #e5e9f2;
--line-soft: #eef1f7;
--ink: #17233b;
--muted: #5c6b84;
--faint: #94a3b8;
/* ---- Marca ---- */
/* #2A0669: tom informado. As variacoes mantem o MESMO matiz e mudam so a
luminosidade, para nao existirem dois roxos diferentes na tela. */
--brand: #2A0669; /* menu, botoes principais */
--brand-dark: #1B0344; /* barra da marca, acima do menu */
--brand-soft: #43159C; /* hover e a ponta clara dos gradientes */
--accent: #43159C; /* texto interativo: link, dominio, foco */
--accent-2: #0891b2; /* cyan escuro (contraste no claro) */
--accent-ink: #2A0669; /* texto interativo em destaque */
--ok: #059669;
--warn: #b45309;
--err: #dc2626;
/* Alturas das duas faixas do topo. O cabecalho fixo da tabela e o painel
do menu no celular se posicionam a partir DESTAS variaveis - mudar a
altura da faixa aqui ja acerta todo o resto. */
--brand-h: 96px; /* faixa da marca */
--nav-h: 62px; /* barra do menu */
--topo-h: 158px; /* soma das duas (usada no calc) */
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
--shadow-pop: 0 12px 32px rgba(16, 24, 40, .14);
/* ------------------------------------------------------------
SUPERFICIES QUE O TEMA TROCA.
Estas nasceram escritas a mao pelo CSS afora. Viraram variaveis para
que o tema escuro seja UMA lista de valores, e nao uma cacada por
"#fff" em 5.700 linhas. Os valores sao exatamente os de antes - esta
conversao nao muda um pixel do tema claro.
------------------------------------------------------------ */
/* Linha par da tabela. O contraste com a impar e o que guia o olho numa
linha larga; sem ele a leitura pula de coluna. */
--zebra: #f4f6fb;
/* Fundo de chip/etiqueta neutra (stat-chip). */
--chip: #f1f5f9;
/* Fundo do aviso ambar claro (hint-erro). */
--bg-aviso: #fffbeb;
/* Painel do submenu flutuante - lilas que amarra o menu a barra roxa. */
--menu-painel: #f4f1fb;
/* ------------------------------------------------------------
BRANCO QUE CONTINUA BRANCO.
Esta e a distincao que faz o tema escuro funcionar: ha branco que e
SUPERFICIE (cartao, campo, painel - vira escuro no tema escuro) e ha
branco que vive SOBRE O ROXO da marca - o avatar, o item ativo do
menu. Esse segundo nao pode virar escuro: sumiria dentro da barra,
que continua roxa nos dois temas.
Sem separar os dois, "trocar #fff por var(--surface)" apagaria o
avatar e o realce do menu no escuro.
------------------------------------------------------------ */
--sobre-marca: #ffffff;
/* ------------------------------------------------------------
A SUPERFICIE DA BARRA, separada de `--brand`.
`--brand` faz DOIS trabalhos no CSS: e o fundo da barra lateral e e a
cor de texto/borda em vinte lugares (numeros do calendario, botao
suave, barra do ranking). No tema escuro os dois pedem coisas opostas -
o fundo tem de escurecer, o texto tem de CLAREAR para continuar legivel
sobre cartao escuro.
Com uma variavel so, escurecer a barra apagaria esses vinte textos.
Por isso a barra ganhou a sua. No claro os valores sao os mesmos de
sempre; quem muda de verdade e o tema escuro.
------------------------------------------------------------ */
--barra: #2A0669; /* fundo da barra lateral / menu */
--barra-topo: #1B0344; /* faixa da marca, acima do menu */
}
/* ============================================================
TEMA ESCURO
Uma lista de valores, e nao um segundo CSS. Isso so foi possivel porque a
etapa anterior transformou as cores escritas a mao em variaveis - sem
aquilo, cada tela teria manchas brancas e o conserto seria uma cacada.
`[data-tema="escuro"]` no , posto por js/tema.js ANTES da pintura.
O QUE NAO INVERTE, e por que:
- A BARRA LATERAL continua roxa. Ela ja e escura no tema claro; inverte-la
deixaria os dois temas parecidos e tiraria a referencia visual de onde a
pessoa esta. O menu e o mesmo nos dois.
- `--sobre-marca` continua branco: e o avatar e o item ativo DENTRO da
barra roxa. Escuro ali, sumiriam.
- O QR do 2FA continua com fundo branco (esta no template, com o motivo).
- Os e-mails e a Central de Pagamento nao tem tema: um vai para o cliente,
o outro E do cliente.
AS CORES SEMANTICAS CLAREIAM. Verde, vermelho, ambar e ciano do tema claro
foram escolhidos para contrastar com BRANCO - sobre fundo escuro eles
ficam abafados e o "pago" verde vira quase preto. Aqui entram as versoes
claras dos mesmos tons: mesma leitura, contraste invertido.
============================================================ */
[data-tema="escuro"] {
/* Diz ao navegador que a pagina e escura: barra de rolagem, seletor de
data e o da NF-e passam a vir escuros tambem. Sem
isto, o calendario nativo abre um retangulo branco no meio da tela. */
color-scheme: dark;
/* ------------------------------------------------------------
A BARRA E MAIS ESCURA QUE O CONTEUDO, e nao roxa.
A primeira versao mantinha o roxo da marca na lateral. Ficou "muito
diferente" - e estava certo: roxo saturado ao lado de um conteudo
cinza-azulado vira um bloco colado, nao uma barra do mesmo produto.
No escuro a hierarquia se inverte em relacao ao claro: la a barra e
ESCURA sobre conteudo claro; aqui ela e a superficie MAIS escura de
todas, e o conteudo flutua acima dela. A marca continua presente pelo
indigo do item ativo e dos botoes, nao pelo fundo.
------------------------------------------------------------ */
--barra: #0f131c;
--barra-topo: #0b0e15;
--bg: #141926; /* fundo da pagina, acima da barra */
--surface: #1a2130; /* cartao, campo, painel flutuante */
--elevated: #222a3b; /* hover e superficie acima do cartao */
--line: #2a3346;
--line-soft: #232b3c; /* cabecalho de tabela */
--ink: #e8ecf4; /* texto principal */
--muted: #94a3bd;
--faint: #6b7891;
--zebra: #1d2432; /* linha par - separacao sutil, nao listra */
--chip: #232b3c;
--bg-aviso: #2b2517; /* ambar rebaixado: aviso sem virar lanterna */
--menu-painel: #1e2434; /* submenu flutuante */
/* INTERATIVO: indigo vivo, nao o roxo escuro da marca. O #43159C sobre
fundo escuro fica ilegivel; este e o mesmo lugar do circulo cromatico
com a luminosidade que o escuro pede. */
--accent: #818cf8;
--accent-ink: #a5b4fc;
--accent-2: #22d3ee;
/* `--brand` aqui e COR DE TEXTO (numeros do calendario, botao suave,
ranking) - quem faz o fundo da barra e `--barra`, acima. */
--brand: #818cf8;
--brand-soft: #a5b4fc;
/* ESTADO. Tons claros dos mesmos significados. */
--ok: #34d399;
--warn: #fbbf24;
--err: #f87171;
/* SOMBRA quase preta: a do tema claro e um cinza-azulado que sobre fundo
escuro aparece como um halo claro em volta do cartao. */
--shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .34);
--shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
}
/* ------------------------------------------------------------
A BARRA NO ESCURO - ajustes que a troca de fundo pede
------------------------------------------------------------ */
/* Uma linha separando a barra do conteudo. No claro a diferenca de cor ja
basta; no escuro as duas superficies sao escuras e, sem a linha, viram uma
so a um metro de distancia. */
[data-tema="escuro"] .nav-lateral {
border-right: 1px solid var(--line);
box-shadow: none; /* a sombra roxa do claro nao existe sobre preto */
}
/* ITEM ATIVO: veu indigo com texto claro, e nao o bloco branco do claro.
Branco puro sobre uma barra quase preta e um berro - e o item ativo precisa
ser lido de relance, nao gritar o dia inteiro. */
[data-tema="escuro"] .menu-link.active,
[data-tema="escuro"] .menu-item.active .menu-title {
background: rgba(129, 140, 248, .18);
color: #c7d2fe;
box-shadow: inset 2px 0 0 var(--accent);
}
/* O AVATAR CONTINUA CLARO, mas nao branco puro: sobre a barra quase preta ele
viraria uma lampada. Um cinza muito claro mantem a leitura da inicial sem o
estouro. */
[data-tema="escuro"] .avatar {
background: #cbd5e1;
color: #0f131c;
}
/* A seta do calendario tem icone BRANCO por dentro: com o fundo virando
indigo claro, o icone sumiria. Fundo escuro, icone claro. */
[data-tema="escuro"] .cal-seta {
background: var(--elevated);
color: var(--accent-ink);
}
[data-tema="escuro"] .cal-seta:hover {
background: var(--accent);
color: #0f131c;
}
/* ------------------------------------------------------------
O AMARELO DO AUTOPREENCHIMENTO
Nao vem deste CSS: e o Chrome marcando o campo que ele preencheu, com um
amarelo que ele mesmo escolhe. No tema claro passa por um creme discreto e
ninguem nota; sobre fundo escuro vira aquele oliva que engole o texto.
`background-color` NAO resolve - o navegador aplica a cor dele por cima.
O jeito que funciona e uma sombra interna gigante, que pinta a area toda
por dentro, mais o `-webkit-text-fill-color` para o texto (o `color`
comum tambem e ignorado no estado autofill).
A transicao de uma hora existe para o Chrome nao repintar o amarelo depois
de ganhar o foco - e um truque conhecido, e feio, mas e o que ha.
------------------------------------------------------------ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
box-shadow: 0 0 0 1000px var(--surface) inset !important;
-webkit-text-fill-color: var(--ink) !important;
caret-color: var(--ink);
-webkit-transition: background-color 9999s ease-in-out 0s;
transition: background-color 9999s ease-in-out 0s;
}
/* A tela de LOGIN tem cartao proprio, mais escuro que o `--surface` das
demais - o autofill precisa acompanhar o cartao onde o campo esta, e nao
uma superficie que ali nao existe. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--elevated) inset !important;
box-shadow: 0 0 0 1000px var(--elevated) inset !important;
}
/* ------------------------------------------------------------
PILULAS: TEXTO ESCURO SOBRE FUNDO TINGIDO
Todas seguem o mesmo desenho - fundo da cor a 10% e texto na MESMA cor,
so que escura. Sobre branco funciona; sobre fundo escuro o veu a 10% vira
um borrao e o texto escuro desaparece dentro dele. Foi o que aconteceu com
as datas de vencimento e o contador de dias.
O conserto e o mesmo em todas: o veu sobe um pouco (o fundo escuro engole
mais do que o branco) e o texto vai para a versao CLARA do mesmo tom. A
leitura nao muda - vermelho continua vermelho -, so a luminosidade
inverte.
------------------------------------------------------------ */
/* Datas de vencimento por faixa de atraso */
[data-tema="escuro"] .data-atraso { background: rgba(239, 68, 68, .22); color: #fca5a5; }
[data-tema="escuro"] .data-proxima { background: rgba(245, 158, 11, .22); color: #fcd34d; }
[data-tema="escuro"] .data-media { background: rgba(234, 88, 12, .22); color: #fdba74; }
[data-tema="escuro"] .data-leve { background: rgba(250, 204, 21, .20); color: #fde047; }
/* Contador de dias em atraso. O `.atraso-grave` e fundo CHEIO vermelho com
texto branco - esse ja lia bem no escuro e fica como esta. */
[data-tema="escuro"] .dias-badge.atraso-medio { background: rgba(234, 88, 12, .22); color: #fdba74; }
[data-tema="escuro"] .dias-badge.atraso-leve { background: rgba(250, 204, 21, .20); color: #fde047; }
[data-tema="escuro"] .dias-badge.atraso { background: rgba(239, 68, 68, .20); color: #fca5a5; }
[data-tema="escuro"] .dias-badge.proximo { background: rgba(245, 158, 11, .20); color: #fcd34d; }
/* Valor pago maior/menor que o esperado */
[data-tema="escuro"] .valor-menor { color: #fca5a5; }
[data-tema="escuro"] .valor-maior { color: #6ee7b7; }
/* ============================================================
TELA DE TICKETS NO ESCURO: os veus de 8-9% nao sobrevivem.
As pilulas desta tela foram desenhadas com fundo tingido a
8-9% de opacidade sobre BRANCO. Sobre o #1a2130 do cartao
escuro, 9% de qualquer cor da uma diferenca de dois ou tres
pontos de luminancia: a pilula perde a moldura e vira texto
solto no meio da linha.
A correcao segue o padrao que o resto do arquivo ja adotou
(ver `.data-atraso` e as irmas, mais acima): veu a ~.20,
borda a ~.34 e o texto num tom claro da mesma familia. Nao e
so trocar a cor da letra - sem subir o fundo, a pilula
continua sem forma.
============================================================ */
/* PILULA DE COPIA (numero do ticket, dominio). A cor mora numa unica
custom property `--fc`, entao trocar o triplete conserta fundo, borda,
texto e o botao de copiar de uma vez - por isso ela foi escrita assim. */
[data-tema="escuro"] .pill-copia { --fc: 148, 163, 189; } /* cinza claro */
[data-tema="escuro"] .pill-ticket { --fc: 167, 139, 250; } /* violeta claro */
[data-tema="escuro"] .pill-dominio{ --fc: 103, 232, 249; } /* ciano claro */
/* As tres de baixo NAO sao da tela de tickets, e entram aqui por
necessidade: a regra generica de `.pill-copia` acima tem duas classes de
especificidade e venceria o `--fc` delas, que tem uma so. Sem estas
linhas, telefone, documento e e-mail colapsariam todos no mesmo cinza no
tema escuro - o CNPJ da tela de NF-e, que e o dado principal dali,
perderia o roxo da marca. */
[data-tema="escuro"] .pill-telefone { --fc: 148, 163, 189; } /* ardosia clara */
[data-tema="escuro"] .pill-email { --fc: 148, 163, 189; } /* ardosia clara */
[data-tema="escuro"] .pill-doc { --fc: 165, 180, 252; } /* roxo da marca, clareado */
/* O veu da pilula precisa de mais corpo no escuro do que o .06 do claro. */
[data-tema="escuro"] .pill-copia {
background: rgba(var(--fc), .12);
border-color: rgba(var(--fc), .30);
}
/* SELOS DA COLUNA DOMINIO: data center, servidor e contas ativas. */
[data-tema="escuro"] .badge-us {
background: rgba(165, 180, 252, .18);
color: #c7d2fe;
border-color: rgba(165, 180, 252, .34);
}
[data-tema="escuro"] .badge-ca {
background: rgba(248, 113, 113, .18);
color: #fca5a5;
border-color: rgba(248, 113, 113, .34);
}
[data-tema="escuro"] .badge-uk {
background: rgba(96, 165, 250, .18);
color: #93c5fd;
border-color: rgba(96, 165, 250, .34);
}
[data-tema="escuro"] .badge-shared,
[data-tema="escuro"] .badge-neutro {
background: rgba(148, 163, 189, .16);
color: #b6c2d6;
border-color: rgba(148, 163, 189, .30);
}
[data-tema="escuro"] .badge-contas {
background: rgba(129, 140, 248, .20);
color: #c7d2fe;
border-color: rgba(129, 140, 248, .36);
}
[data-tema="escuro"] .badge-email {
background: rgba(148, 163, 189, .16);
border-color: rgba(148, 163, 189, .30);
}
/* SITUACAO E PRIORIDADE (colunas Ultima fala e Prioridade). */
[data-tema="escuro"] .badge-ok {
background: rgba(52, 211, 153, .18);
border-color: rgba(52, 211, 153, .34);
}
[data-tema="escuro"] .badge-err,
[data-tema="escuro"] .badge-prio-urgente {
background: rgba(248, 113, 113, .18);
border-color: rgba(248, 113, 113, .34);
}
/* No escuro os dois clareiam, mantendo as familias: azul para a media,
ardosia para a baixa. */
[data-tema="escuro"] .badge-prio-media {
background: rgba(96, 165, 250, .16);
border-color: rgba(96, 165, 250, .32);
color: #93c5fd;
}
[data-tema="escuro"] .badge-prio-baixa {
background: rgba(52, 211, 153, .16);
border-color: rgba(52, 211, 153, .32);
color: #6ee7b7;
}
/* As pilulas da barra de prioridade no escuro. Sem isto, o --cat de cada uma
continuaria sendo a cor do tema claro dentro de um fundo escuro. */
[data-tema="escuro"] .seg-prio a.prio-urgente { --cat: #fca5a5; --cat-bg: rgba(248, 113, 113, .16); }
[data-tema="escuro"] .seg-prio a.prio-alta { --cat: #fcd34d; --cat-bg: rgba(251, 191, 36, .16); }
[data-tema="escuro"] .seg-prio a.prio-media { --cat: #93c5fd; --cat-bg: rgba(96, 165, 250, .16); }
[data-tema="escuro"] .seg-prio a.prio-baixa { --cat: #6ee7b7; --cat-bg: rgba(52, 211, 153, .16); }
[data-tema="escuro"] .badge-q {
background: rgba(251, 191, 36, .18);
border-color: rgba(251, 191, 36, .34);
}
[data-tema="escuro"] .badge-icp {
background: rgba(165, 180, 252, .18);
border-color: rgba(165, 180, 252, .34);
}
/* DEPARTAMENTO. O teal do ABERTURA E-MAIL fica quase preto no escuro. */
[data-tema="escuro"] .badge-cat-abertura-email {
background: rgba(45, 212, 191, .18);
color: #5eead4;
border-color: rgba(45, 212, 191, .34);
}
/* ---- OS BOTOES DA COLUNA ACOES ----
No claro, cada um tinge o fundo com 9% da sua cor ao passar o mouse. No
escuro esse veu desaparece e o botao parece morto - a pessoa passa o
mouse, nada muda, e ela clica duas vezes para conferir. */
[data-tema="escuro"] .btn-icon.acao-ver:hover {
background: rgba(165, 180, 252, .16);
border-color: rgba(165, 180, 252, .42);
color: #c7d2fe;
}
[data-tema="escuro"] .btn-icon.acao-categoria:hover {
background: rgba(216, 180, 254, .16);
border-color: rgba(216, 180, 254, .42);
color: #e9d5ff;
}
[data-tema="escuro"] .btn-icon.acao-plano:hover {
background: rgba(52, 211, 153, .16);
border-color: rgba(52, 211, 153, .42);
color: #6ee7b7;
}
/* O do link do cliente e o unico colorido EM REPOUSO - some sem isto. */
[data-tema="escuro"] .btn-icon.acao-token {
color: #34d399;
border-color: rgba(52, 211, 153, .42);
}
[data-tema="escuro"] .btn-icon.acao-token:hover {
color: #6ee7b7;
background: rgba(52, 211, 153, .18);
border-color: rgba(52, 211, 153, .62);
}
/* ---- BUSCA DE RESPOSTA PRONTA ----
O roxo da marca a 10% e a 16% foi escolhido contra fundo BRANCO; sobre o
fundo escuro ele praticamente desaparece, e sao justamente as duas marcas
que dizem "e esta linha que o Enter usa" e "foi aqui que casou". Aqui vao
os tons claros da marca, que e como o tema escuro resolve o resto. */
[data-tema="escuro"] .rp-item-ativo { background: rgba(167, 139, 250, .18); }
[data-tema="escuro"] .rp-lista mark {
background: rgba(167, 139, 250, .26);
color: #ede9fe;
}
/* ---- ENVIO SIGILOSO na tela do chamado ---- */
[data-tema="escuro"] .msg-sigilo {
border-color: rgba(45, 212, 191, .45);
background: rgba(45, 212, 191, .10);
}
[data-tema="escuro"] .msg-sigilo-topo { color: #5eead4; }
[data-tema="escuro"] .msg-sigilo-btn {
color: #5eead4;
border-color: rgba(45, 212, 191, .45);
}
[data-tema="escuro"] .msg-sigilo-btn:hover {
background: rgba(45, 212, 191, .16);
border-color: rgba(45, 212, 191, .65);
color: #99f6e4;
}
/* Etiquetas de pais, painel e categoria */
[data-tema="escuro"] .badge-linux { color: #67e8f9; }
[data-tema="escuro"] .badge-cpanel { color: #d8b4fe; }
[data-tema="escuro"] .badge-nfe { color: #fcd34d; }
[data-tema="escuro"] .congela-flag { color: #67e8f9; }
[data-tema="escuro"] .venda-badge { color: #fca5a5; }
/* O CONTADOR DE REINCIDENCIA ("2x") e a excecao da lista: o fundo dele nao e
um veu tingido, e o vermelho CHEIO da variavel --err, com texto branco. No
escuro o --err clareia (#f87171) e o branco por cima cai para ~2,8:1 - o
problema aqui e o FUNDO, e nao o texto. Entao escurece-se o fundo e mantem-se
o branco. Trocar a cor do texto, como nas outras, deixaria letra ciana sobre
vermelho solido. */
[data-tema="escuro"] .alerta-vezes { background: #b91c1c; color: #fff; }
/* Avisos e blocos informativos com texto escuro fixo */
[data-tema="escuro"] .alert-info,
[data-tema="escuro"] .acesso-regra { color: #93c5fd; }
/* `.criterio-aba` e `.previa-linha dd` NAO entram aqui, e vale registrar por
que: o levantamento que gerou esta lista procurou `color: #xxxxxx` escuro, e
essas duas usam var(--muted) e var(--ink) - ja mudam sozinhas com o tema.
Sobrescrever seria trocar uma cor certa por outra. */
/* A PILULA DO GRUPO NO SUBMENU - o escuro segue o proprio caminho.
No tema CLARO ela virou solida, roxo cheio com letra branca (ver o bloco
`@media (min-width: 1081px)`). Aqui isso nao serve: `--brand` no escuro e
um indigo CLARO (#818cf8), e letra branca por cima dele daria 2,6:1 -
trocaria um problema de destaque por um de leitura.
O escuro ja resolve por inversao: a pilula e mais ESCURA que o painel
(`--surface` #1a2130 dentro de `--menu-painel` #1e2434) e a letra e o
lavanda claro. Da 8,5:1, e a hierarquia contra os itens ja esta certa.
O `background` precisa estar escrito aqui, e nao so a cor: sem ele o roxo
solido do bloco de 1081px venceria - media query nao muda especificidade,
e este seletor tem uma classe a mais. */
[data-tema="escuro"] .menu-item .dropdown .sub-group {
background: var(--surface);
border-color: rgba(129, 140, 248, .30);
color: #c7d2fe;
}
/* OS ROTULOS DE ID sao TRES cores, e nao uma: roxo para o codigo nosso, ciano
e cinza para os do banco. A cor mora em `.id-cobr` / `.id-tx` / `.id-e2e`,
e nao em `.id-rotulo` - pintar o rotulo aqui apagaria a distincao entre os
tres, porque o seletor com [data-tema] tem especificidade maior que a
classe sozinha. `.id-e2e` ja usa var(--muted) e nao precisa de nada. */
[data-tema="escuro"] .id-cobr { color: #c7d2fe; }
[data-tema="escuro"] .id-tx { color: #67e8f9; }
/* O hamburguer do celular acompanha a barra. */
[data-tema="escuro"] .nav-lateral .hamburger { background: var(--barra); }
/* A COR DO CONTADOR DE CONGELADAS. No claro e um ciano escuro; no escuro ele
desapareceria. Mesma familia, luminosidade trocada. */
[data-tema="escuro"] .resumo-congelado { color: #67e8f9; }
/* O AVISO EM TOM DA MARCA. O roxo a 5% sobre fundo escuro nao aparece - o veu
passa a ser claro, que e como se destaca um bloco no escuro. */
[data-tema="escuro"] .alert-marca {
background: rgba(179, 157, 219, .10);
border-color: rgba(179, 157, 219, .28);
}
/* CARTAO DE RESUMO: o roxo claro do tema claro vira um roxo profundo. */
[data-tema="escuro"] .resumo-card {
background: rgba(179, 157, 219, .09);
border-color: rgba(179, 157, 219, .24);
}
/* A ZEBRA DA TABELA precisa de mais contraste no escuro do que no claro:
duas superficies escuras proximas viram uma so a um metro de distancia. */
[data-tema="escuro"] tbody tr:hover { background: var(--elevated); }
/* ============================================================
O atributo hidden tem que ganhar de qualquer display do CSS.
Sem isto, um elemento com `hidden` que tenha classe com
`display: inline-block` (ex.: .badge) aparece na tela vazio -
foi o que acontecia com o badge de falha em Cobrancas do mes.
============================================================ */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* ============================================================
TAMANHO DA INTERFACE (o - e o + da barra lateral)
`zoom`, e nao `font-size`. A escolha nao foi de gosto: este arquivo tem
1.521 medidas em PIXEL e 192 das 193 declaracoes de `font-size` sao em px.
Mexer na fonte do nao moveria praticamente nada - as fontes ficariam
presas no tamanho de sempre, e o pouco que herdasse cresceria dentro de
caixas que nao cresceram, estourando o texto para fora delas.
`zoom` escala a caixa inteira: fonte, espacamento, icone e borda juntos. E
a unica alavanca que funciona sobre uma folha de estilo em px sem reescrever
as 1.521 medidas.
O QUE ELE NAO FAZ: media query nao acompanha. Em 130% numa tela de 1.400px,
o layout continua achando que tem 1.400px enquanto o conteudo ocupa o
equivalente a 1.077. Tabela larga pode passar a rolar na horizontal - e por
isso o teto e 130%, e nao 150%.
NO , e nao no : em `html` o `zoom` briga com a barra de rolagem
da pagina em alguns navegadores. A barra lateral e `position: fixed` DENTRO
do body, entao escala junto com o `padding-left` que a compensa - os dois
continuam batendo em qualquer escala.
============================================================ */
body {
zoom: var(--escala-ui, 1);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
/* COR SOLIDA no fundo do sistema.
Havia duas manchas radiais (roxo no topo direito, ciano embaixo a
esquerda) por cima da cor de fundo. Elas nao acompanhavam a rolagem nem
o conteudo, entao em tela longa apareciam como uma faixa mais clara no
meio do nada - e sobre tabela cheia so atrapalhavam a leitura. */
background: var(--bg);
color: var(--ink);
font-size: 14.5px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
/* ============================================================
NAVBAR SUPERIOR
============================================================ */
.nav-wrap {
position: sticky;
top: 0;
z-index: 100;
background: var(--barra);
box-shadow: 0 6px 22px rgba(42, 6, 105, .26);
}
/* ============================================================
BARRA DA MARCA - faixa fina acima do menu.
Tom mais escuro que o menu para separar as duas sem precisar
de borda, e para o menu continuar sendo o elemento com peso.
============================================================ */
.brand-bar {
background: var(--barra-topo);
color: #fff;
}
.brand-inner {
display: flex;
align-items: center;
justify-content: center; /* a marca fica no meio da faixa */
gap: 12px;
padding: 14px 112px; /* folga em cima e embaixo do logo */
min-height: var(--brand-h);
}
/* O logo tem 632x147 (proporcao 4,3:1) e fundo transparente.
A altura e fixada e a largura vem sozinha, para nao distorcer.
width/height no reservam o espaco antes de carregar - sem isso
a faixa "pula" quando a imagem chega. */
.brand-logo {
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none;
color: rgba(255, 255, 255, .95);
font-size: 20px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.brand-logo img {
height: 64px; /* 40% maior que os 46px anteriores */
width: auto;
display: block;
}
.nav-inner {
display: flex;
align-items: center;
gap: 14px;
padding: 0 112px;
min-height: 62px;
width: 100%;
}
.nav-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo-mark {
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 10px;
font-weight: 800; font-size: 14px; color: #fff;
background: linear-gradient(135deg, #43159C, #22d3ee);
box-shadow: 0 4px 14px rgba(67, 21, 156, .35);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text strong { font-size: 14.5px; font-weight: 700; }
.logo-text span { font-size: 10.5px; color: var(--muted); }
.menu { display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: 3px; }
.menu-link, .menu-item .menu-title {
display: block;
padding: 9px 16px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: .01em;
color: rgba(255, 255, 255, .85);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: background .15s, color .15s, box-shadow .15s;
}
.menu-item { position: relative; }
.menu-item .menu-title::after {
content: '';
display: inline-block;
margin-left: 7px;
width: 6px; height: 6px;
border-right: 1.7px solid currentColor;
border-bottom: 1.7px solid currentColor;
transform: rotate(45deg) translateY(-2px);
opacity: .7;
}
.menu-link:hover, .menu-item:hover .menu-title {
color: #fff;
background: rgba(255, 255, 255, .14);
}
.menu-link.active, .menu-item.active .menu-title {
color: #2A0669;
background: var(--sobre-marca);
box-shadow: 0 4px 14px rgba(15, 10, 60, .25);
}
.menu-item .dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 120;
min-width: 235px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 13px;
padding: 7px;
box-shadow: var(--shadow-pop);
}
/* ponte invisivel para o mouse nao "cair" entre o titulo e o dropdown */
/* A PONTE INVISIVEL entre o item e o painel.
O painel nao encosta no item - ha um respiro de 8px. Sem cobrir esse vao,
o ponteiro "sai" do item no meio do caminho, o `:hover` cai e o submenu
fecha na cara de quem estava indo ate ele. Esta faixa de 8px pertence ao
painel, entao atravessa-la nunca deixa de ser hover. */
.menu-item .dropdown::before {
content: '';
position: absolute;
top: -8px; left: 0; right: 0;
height: 8px;
}
/* ============================================================
A PONTE DO MENU LATERAL FICA NA ESQUERDA, e nao em cima.
A regra acima nasceu no menu SUPERIOR, onde o painel desce e o vao fica
ACIMA dele. Na barra lateral o painel sai pelo LADO: o `left` que o
menu-lateral.js calcula e `borda direita da barra + 8`, entao o vao esta
a ESQUERDA. A ponte de cima nao cobria nada ali, e o submenu fechava no
meio do trajeto do mouse - de forma intermitente, porque depende da
velocidade e do angulo com que o ponteiro cruza os 8px.
`bottom: 0` em vez de altura fixa: o painel tem alturas diferentes por
item, e a ponte precisa acompanhar a borda esquerda inteira - entrar pela
parte de baixo de um painel alto e tao comum quanto entrar pelo topo.
OS 8px SAO OS MESMOS DO JS (`var MARGEM = 8` no menu-lateral.js). Mudar um
sem o outro reabre exatamente este defeito.
============================================================ */
.nav-lateral .menu-item .dropdown::before {
top: 0;
bottom: 0;
left: -8px;
right: auto;
width: 8px;
height: auto;
}
.menu-item:hover .dropdown { display: block; }
/* SUBMENU PRESO PELO CLIQUE (`.fixado`), na barra lateral de tela grande.
Existe para a barra RECOLHIDA, onde o item e so um icone de 64px: ali
passar o mouse e a unica forma de ver o submenu, e quem clica no icone
esperando abrir nao consegue nada. Com o clique o painel fica preso ate
clicarem fora, no Escape, ou de novo no mesmo icone.
Vale tambem com a barra aberta - clicar nao atrapalha quem usa hover. */
.nav-lateral .menu-item.fixado .dropdown { display: block; }
.menu-item .dropdown a,
.menu-item .dropdown .soon {
display: block;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
/* Itens do submenu em MAIUSCULAS. O espacamento entre letras evita o efeito
de "bloco" que texto todo em caixa alta costuma ter, e o tamanho cai um
pouco porque maiuscula ocupa mais largura que minuscula. */
.menu-item .dropdown a,
.menu-item .dropdown .soon {
text-transform: uppercase;
letter-spacing: .04em;
font-size: 12.5px;
}
.menu-item .dropdown a { color: var(--ink); font-weight: 600; }
.menu-item .dropdown a:hover { background: var(--elevated); color: var(--accent-ink); }
.menu-item .dropdown a.active {
background: rgba(42, 6, 105, .08);
color: var(--accent-ink);
font-weight: 600;
}
.menu-item .dropdown .soon { color: var(--faint); cursor: not-allowed; }
/* ============================================================
SUBMENU FLUTUANTE EM TELA GRANDE - painel com tom proprio
Em branco puro o painel se confundia com o conteudo da pagina atras dele:
um retangulo branco sobre fundo quase branco, separado so pela sombra. Um
tom levemente arroxeado o amarra a barra roxa de onde ele sai, e a
fronteira passa a ser visivel sem depender da sombra.
`min-width: 1081px` e a tela grande de verdade: abaixo disso o menu vira
gaveta (no topo) ou sanfona (na lateral), e nos dois casos o painel deixa
de flutuar e ja tem cor propria. Mexer neles daqui pintaria de lilas um
bloco que mora dentro de um painel branco ou sobre a barra roxa.
============================================================ */
@media (min-width: 1081px) {
.menu-item .dropdown {
background: var(--menu-painel);
border-color: rgba(67, 21, 156, .16);
}
/* O ITEM SOB O MOUSE FICA BRANCO - a relacao se inverte.
Com o painel claro-acinzentado (`--elevated`, #f8fafc) o realce sumia:
eram dois tons quase iguais, e o item destacado parecia igual aos
outros. Branco sobre lilas separa sem precisar de borda nova. */
.menu-item .dropdown a:hover {
background: var(--surface);
color: var(--accent-ink);
}
/* O item ATIVO precisa continuar mais forte que o item sob o mouse -
senao passar o mouse ao lado faria a tela atual parecer outra. */
.menu-item .dropdown a.active {
background: rgba(67, 21, 156, .13);
color: var(--accent-ink);
}
/* A PILULA DO GRUPO NAO E PINTADA AQUI, e nunca foi.
Havia neste ponto um `.menu-item .dropdown .sub-group` com fundo
branco, e ele era CODIGO MORTO: a regra base tem a mesma
especificidade e esta escrita depois, entao ganhava o empate. Media
query nao aumenta especificidade - isso e fácil de esquecer, e foi o
que fez a regra parecer viva por tanto tempo.
A pilula agora e solida, definida na regra base. Ver o comentario
longo em `.menu-item .dropdown .sub-group`, adiante neste arquivo. */
/* A linha que separa os grupos tambem sobe de tom: `--line-soft` foi
escolhido para funcionar sobre branco e sumia no lilas. */
.menu-item .dropdown .grupo + .grupo {
border-top-color: rgba(67, 21, 156, .14);
}
}
.menu-item .dropdown .soon em {
font-style: normal; font-size: 9.5px; font-weight: 600;
color: var(--warn);
border: 1px solid rgba(180, 83, 9, .3);
border-radius: 999px;
padding: 1px 6px;
margin-left: 5px;
}
/* Submenu em grupos (ex.: Cobrancas): a pilula com o nome do grupo.
SOLIDA, no roxo cheio da marca. Ja foi lilas a 10% com letra roxa media, e
a intencao era nao gritar mais alto que os itens - so que passou do ponto e
virou o contrario de um titulo:
fundo da pilula sobre o painel ..... 1,20:1 (nao se via)
texto #6D4AB8 sobre a pilula ....... 4,71:1 (o minimo, raspando)
os ITENS que ela agrupa ........... 16,00:1
O rotulo do grupo era menor E mais claro que o conteudo do grupo. Solido
inverte isso: a pilula aparece (14,17:1 contra o painel) e o texto branco
dentro dela fica em 15,81:1 - mais forte que os itens, que e o que um
cabecalho de secao deve ser.
ESTA E A REGRA QUE MANDA, e por isso a mudanca esta aqui.
Havia uma copia dentro de `@media (min-width: 1081px)` tentando pintar esta
pilula - e ela nunca teve efeito nenhum: mesma especificidade e escrita
ANTES desta, entao esta ganhava o empate. Codigo morto que parecia vivo.
Foi apagada.
Os tres contextos que precisam de outra cor tem seletor com uma classe a
mais e continuam ganhando desta: o tema escuro (`[data-tema="escuro"] ...`),
a sanfona da barra (`.nav-lateral ...`) e a gaveta do celular
(`body.nav-open .nav-lateral ...`). */
.menu-item .dropdown .sub-group {
display: inline-block;
margin: 3px 12px 5px;
padding: 3px 11px;
border-radius: 999px;
background: var(--brand);
border: 1px solid var(--brand);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: #fff;
}
/* Os itens recuam para a direita: o recuo e o que diz "isto esta DENTRO do
grupo". No padding, e nao na margem, para o fundo do hover continuar
cobrindo a largura inteira do submenu. */
.menu-item .dropdown .grupo a { padding-left: 26px; }
.menu-item .dropdown .grupo + .grupo {
margin-top: 4px;
padding-top: 3px;
border-top: 1px solid var(--line-soft);
}
/* No MENU SUPERIOR o rodape e uma fileira; na lateral vira coluna (ver o
bloco "rodape: usuario e sair", mais abaixo). O visual das pecas - convite,
chip do usuario, relogio e Sair - fica junto, na secao do rodape do menu.
Duas metades da mesma caixa em pontos distantes do arquivo divergem na
primeira alteracao que alguem fizer em uma so. */
.nav-right { display: flex; align-items: center; gap: 10px; }
/* O .btn-ghost aqui e do modal de confirmacao (fragments/componentes), que
tambem aparece sobre fundo escuro. O botao Sair deixou de usa-lo: agora e
.btn-sair, com icone e o vermelho reservado para o hover. */
.nav-wrap .btn-ghost {
border-color: rgba(255, 255, 255, .4);
color: #fff;
}
.nav-wrap .btn-ghost:hover { background: rgba(255, 255, 255, .13); border-color: #fff; color: #fff; }
.hamburger {
display: none;
background: none; border: none; color: #fff; cursor: pointer; padding: 4px;
}
.hamburger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* ============================================================
CONTEUDO
============================================================ */
/* Conteudo ocupa toda a largura do monitor, com respiro generoso nas laterais */
main { padding: 24px 112px 44px; width: 100%; max-width: none; margin: 0; }
main.wide { max-width: none; }
/* Em monitor muito largo o texto fica esticado demais para ler.
As telas de formulario e leitura ganham um teto; as de tabela
(main.wide) continuam usando a largura toda, que e onde ela ajuda. */
@media (min-width: 1700px) {
main:not(.wide) { max-width: 1500px; margin: 0 auto; }
}
@media (max-width: 1500px) {
main { padding: 24px 48px 40px; }
.nav-inner { padding: 0 48px; }
.brand-inner { padding: 0 48px; }
}
.page-head { display: flex; align-items: baseline; gap: 14px; margin: 2px 0 16px; }
.page-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
/* ------------------------------------------------------------------
Verificacao automatica (tickets): contagem regressiva no cabecalho.
------------------------------------------------------------------ */
.auto-refresh {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
font-size: 12px;
color: var(--muted);
}
.auto-ponto {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(5, 150, 105, .14);
flex: none;
}
.auto-refresh.verificando .auto-ponto { animation: auto-pulsar 1s ease-in-out infinite; }
.auto-refresh.novidade { color: var(--ok); font-weight: 700; }
.auto-refresh.falhou { color: var(--err); }
.auto-refresh.falhou .auto-ponto { background: var(--err); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
/* Pilula, e nao link sublinhado: ao lado da contagem regressiva o sublinhado
parecia parte do texto, e ninguem clicava. */
.auto-agora {
border: 1px solid var(--line);
background: var(--surface);
border-radius: 999px;
padding: 3.5px 12px;
font-family: inherit;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--accent-ink);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.auto-agora:hover {
background: var(--bg);
border-color: var(--accent-ink);
}
.auto-agora:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@keyframes auto-pulsar { 50% { opacity: .25; } }
/* Linha que chegou na ultima verificacao: um clarao curto e some. */
.linha-nova > td { animation: auto-destacar 4s ease-out; }
@keyframes auto-destacar {
0%, 22% { background: rgba(5, 150, 105, .15); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.auto-refresh.verificando .auto-ponto { animation: none; }
.linha-nova > td { animation: none; box-shadow: inset 3px 0 0 var(--ok); }
}
/* Lista de campos alterados (auditoria de cadastro). Uma linha por campo:
o texto e gravado como "a: 'x' -> 'y'; b: ..." e ler isso grudado nao e
leitura. Monoespacada porque a coluna e cheia de valor colado em aspas. */
.mudancas {
margin: 0;
padding-left: 16px;
list-style: none;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 12px;
line-height: 1.6;
}
.mudancas li { position: relative; }
.mudancas li::before {
content: '';
position: absolute;
left: -12px; top: 8px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--faint);
}
/* Nome do cliente em caixa alta. E no CSS, e nao no texto gravado: o banco
guarda o nome como a pessoa digitou ("Otavio Augusto", "AGF ENERGIA") e
assim continua - so a exibicao muda. */
/* ============================================================
DICA: o balao que explica os botoes de icone (js/dica.js).
Filho do e `position: fixed` de proposito: a tabela mora
dentro de `.tabela-rolavel`, que recorta tudo que passa da
borda por causa do `overflow-x: auto`. A coluna Acoes fica
justo na borda direita - um `::after` dentro da celula seria
cortado ao meio.
Cores fixas, e nao variaveis de tema: e uma etiqueta flutuante
sobre qualquer fundo, e precisa do mesmo contraste alto nos
dois temas. O balao do menu recolhido (`.menu-link::before`) ja
usa esse mesmo tom escuro.
============================================================ */
.dica-balao {
/* `inset: auto` ANTES do top/left, e nao depois: `inset` e atalho para os
quatro lados, e declarado embaixo apagaria o que veio antes.
Estes quatro anulam o estilo que o navegador aplica a [popover] - o
balao vira popover quando a API existe, para subir a top layer e nao
ficar atras dos baloes da propria tela. Sem eles, o `inset: 0` +
`margin: auto` do UA centralizariam a dica no meio da janela, e a borda
e o `overflow` cortariam o texto. */
inset: auto;
margin: 0;
border: 0;
overflow: visible;
position: fixed;
top: 0;
left: 0;
/* Vale para o caso SEM popover, em que o balao fica na camada normal. */
z-index: 9000;
max-width: 280px;
padding: 7px 11px;
border-radius: 8px;
background: #1B0344;
color: #fff;
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
/* Nao intercepta o mouse: o balao aparece perto do botao, e um
balao clicavel roubaria o clique de quem mirou direito. */
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(3px);
transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.dica-balao.dica-visivel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dica-balao.dica-abaixo { transform: translateY(-3px); }
.dica-balao.dica-abaixo.dica-visivel { transform: translateY(0); }
/* No escuro o roxo quase preto some no fundo: clareia a moldura para o
balao continuar se descolando do cartao atras dele. */
[data-tema="escuro"] .dica-balao {
background: #2b2150;
box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
/* Sem JavaScript nao ha balao nenhum - e ai o `title` original continua
no elemento, porque quem o remove e o proprio script. */
.nome-cliente { text-transform: uppercase; }
/* Cliente sem dominio no cadastro: o nome ocupa o lugar da pilula, em tom
apagado. Nao e um dado igual aos outros - e o que sobrou quando o dado
principal falta -, e o cinza diz isso sem precisar de legenda. */
.dominio-vazio {
display: inline-block;
font-size: 12.5px;
color: var(--muted);
text-transform: uppercase;
}
/* ============================================================
RODAPE DO MENU: convite de 2FA, conta e relogio de sessao
UM BLOCO SO. Antes eram tres pecas soltas - um cartao amarelo inteiro, uma
pilula de usuario e um relogio - cada uma com sua forma, sua cor e seu
alinhamento. Empilhadas no pe da barra roxa viravam o canto mais bagunçado
da tela. Agora compartilham caixa, borda e ritmo.
============================================================ */
/* CONVITE PARA ATIVAR A VERIFICACAO EM DUAS ETAPAS.
O AVISO INTEIRO E UM LINK, e nao um texto com botao dentro. Alvo grande,
uma acao so, nada para escolher: quem le "ative" ja quer ir.
O DESTAQUE VEM DO ICONE, e nao do bloco. Ja tentamos os dois extremos e os
dois erraram: tinta lavada sobre roxo escuro vira borrao acinzentado
(invisivel), e fundo ambar inteiro vira um berro amarelo que cansa em dois
dias - foi o que aconteceu aqui. O meio termo funciona melhor: um quadrado
ambar SOLIDO de 26px puxa o olho de longe, o texto claro le sem esforco, e
o conjunto continua parecendo parte do sistema em vez de um adesivo colado
por cima.
SEM CONTAGEM REGRESSIVA: o 2FA e recomendado, nunca obrigatorio. Nao ha
prazo para exibir - e um numero que encolhe sem nada acontecer no zero
ensina a ignorar o aviso inteiro. */
.aviso-2fa {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 11px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(251, 191, 36, .42);
color: #fff;
text-decoration: none;
line-height: 1.3;
transition: background .15s, border-color .15s, transform .05s;
}
.aviso-2fa:hover {
background: rgba(251, 191, 36, .16);
border-color: rgba(251, 191, 36, .75);
}
.aviso-2fa:active { transform: translateY(1px); }
/* O UNICO ponto de cor cheia do rodape. E o que faz o aviso ser notado sem
que o bloco precise gritar. */
.aviso-2fa-icone {
flex: none;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 8px;
background: #fbbf24;
color: #3b2405;
}
.aviso-2fa-icone svg { width: 15px; height: 15px; }
.aviso-2fa-texto { display: block; min-width: 0; }
.aviso-2fa-texto b {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .1px;
}
/* A segunda linha em ambar: repete a cor do icone e amarra as duas pontas do
aviso, sem precisar de mais uma borda ou mais um fundo. */
.aviso-2fa-texto span {
display: block;
margin-top: 1px;
font-size: 11px;
font-weight: 600;
color: #fbbf24;
}
/* NO MENU SUPERIOR o rodape vira fileira: o aviso encolhe para caber ao lado
do usuario, e a segunda linha sai - ali nao ha altura para duas. */
.nav-wrap:not(.nav-lateral) .aviso-2fa { padding: 6px 10px; }
.nav-wrap:not(.nav-lateral) .aviso-2fa-texto span { display: none; }
/* NA LATERAL RECOLHIDA sobram 64px: o texto nao cabe e viraria uma coluna de
letras. Fica so o escudo, centralizado, e o balao do title explica. */
body.menu-recolhido .nav-lateral .aviso-2fa {
justify-content: center;
padding: 8px 0;
border-color: rgba(251, 191, 36, .5);
}
body.menu-recolhido .nav-lateral .aviso-2fa-texto { display: none; }
/* ------------------------------------------------------------
O BLOCO DA CONTA: avatar, nome, relogio e sair
------------------------------------------------------------ */
.conta-bloco {
display: grid;
gap: 7px;
padding: 7px;
border-radius: 12px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
}
/* LARGURA INTEIRA, e nao pilula. A pilula existia para o menu superior, onde
o chip flutua numa fileira; empilhada na barra estreita ela ficava com
metade do espaço vazio a direita - foi o que apareceu na tela sem nome. */
.user-chip {
display: flex;
align-items: center;
gap: 9px;
padding: 4px 6px 4px 4px;
border-radius: 9px;
text-decoration: none;
transition: background .15s;
}
.user-chip:hover { background: rgba(255, 255, 255, .09); }
.avatar {
width: 30px; height: 30px;
flex: none;
display: grid; place-items: center;
border-radius: 50%;
font-size: 12.5px; font-weight: 700; color: #2A0669;
text-transform: uppercase;
background: var(--sobre-marca);
box-shadow: 0 2px 8px rgba(15, 10, 60, .25);
}
.user-dados { min-width: 0; }
.user-name {
display: block;
font-size: 12.5px;
font-weight: 700;
color: #fff;
/* Nome longo corta com reticencias em vez de empurrar o bloco: a barra
tem largura fixa e nao pode alargar por causa de um login comprido. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* O QUE O CLIQUE FAZ, escrito. O chip sempre levou para a troca de senha,
mas isso so estava no balao do title - que ninguem espera em um nome. */
.user-acao {
display: block;
font-size: 10.5px;
font-weight: 600;
color: rgba(255, 255, 255, .5);
}
.user-chip:hover .user-acao { color: rgba(255, 255, 255, .78); }
/* Relogio e Sair na mesma linha, dividindo a largura. Empilhados ocupavam
duas faixas para dizer muito pouco. */
.conta-acoes {
display: flex;
align-items: stretch;
gap: 6px;
}
.conta-acoes .inline { flex: none; }
/* NO MENU SUPERIOR o rodape nao e rodape: e um canto da fileira, com a altura
de uma barra so. Empilhado - avatar em cima, relogio e Sair embaixo - ele
dobraria a altura do cabecalho de todas as telas. Aqui as mesmas pecas se
deitam numa linha, e o "Trocar minha senha" sai (o balao do title continua
dizendo, e ali nao ha altura para a segunda linha). */
.nav-wrap:not(.nav-lateral) .conta-bloco {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
}
.nav-wrap:not(.nav-lateral) .user-acao { display: none; }
.nav-wrap:not(.nav-lateral) .user-name { max-width: 160px; }
.nav-wrap:not(.nav-lateral) .sessao-relogio { flex: none; }
/* ------------------------------------------------------------
BOTAO DE TEMA CLARO / ESCURO
------------------------------------------------------------ */
/* Vive na barra ROXA, nos dois temas - por isso as cores aqui sao veu branco
sobre roxo, e nao variaveis de superficie. Se usasse `--surface`, no escuro
ele sumiria dentro da propria barra.
Discreto de proposito: e ajuste de ambiente, escolhido uma vez e esquecido.
Com destaque, competiria todo dia com o menu, que e o que se vem usar. */
/* SO PARA LEITOR DE TELA. Fica no fluxo (1px, recortado) em vez de
`display:none`, porque o que esta escondido de verdade nao e lido - e o
ponto aqui e justamente ser lido e nao ser visto. */
.sr-apenas {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
OS BOTOES DE TAMANHO (- 100% +), logo acima do tema.
Tres colunas numa linha so, no lugar de tres botoes empilhados: eles
pertencem ao mesmo controle, e separados ocupariam metade do rodape da
barra. O do meio e mais largo porque carrega o numero.
Herdam a aparencia do `.tema-botao` (mesma borda, mesmo fundo, mesma
familia) para nao parecerem de outro sistema - a diferenca e so a forma.
============================================================ */
.fonte-botoes {
display: grid;
grid-template-columns: 1fr 1.6fr 1fr;
gap: 4px;
margin-bottom: 8px;
}
.fonte-botao {
display: flex;
align-items: center;
justify-content: center;
/* 34px de altura: o mesmo alvo confortavel do tema, e acima do minimo de
toque quando a barra vira gaveta no celular. */
min-height: 34px;
padding: 6px 4px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .72);
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.fonte-botao:hover:not(:disabled) {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .3);
color: #fff;
}
/* NO LIMITE o botao APAGA, e nao some. Sumir mudaria a largura das tres
colunas e faria o "+" pular de lugar justamente quando a pessoa esta
clicando nele repetidamente. */
.fonte-botao:disabled {
opacity: .35;
cursor: not-allowed;
}
.fonte-botao.fonte-valor {
font-size: 11.5px;
letter-spacing: .2px;
}
/* BARRA RECOLHIDA: so cabe o numero. O - e o + de 64px de largura ficariam
com 18px cada, abaixo de qualquer alvo clicavel decente. O numero sozinho
continua sendo o botao de voltar a 100%, que e o que mais importa quando
alguem se perdeu na escala. */
body.menu-recolhido .nav-lateral .fonte-botoes { grid-template-columns: 1fr; }
body.menu-recolhido .nav-lateral #fonteMenos,
body.menu-recolhido .nav-lateral #fonteMais { display: none; }
/* NO MENU SUPERIOR o rodape e uma fileira, nao uma coluna: as tres colunas
param de esticar e passam a ocupar so o que precisam, como acontece com o
tema logo ao lado. */
.nav-wrap:not(.nav-lateral) .fonte-botoes {
width: auto;
margin-bottom: 0;
grid-template-columns: auto auto auto;
}
.nav-wrap:not(.nav-lateral) .fonte-botao {
min-height: 30px;
padding: 6px 9px;
}
.tema-botao {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 11px;
margin-bottom: 8px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .72);
font-family: inherit;
font-size: 12px;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.tema-botao:hover {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .3);
color: #fff;
}
.tema-botao svg { width: 16px; height: 16px; flex: none; }
/* NO MENU SUPERIOR vira so o icone: ali o rodape e uma fileira, e mais uma
palavra empurraria o Sair para fora da barra. */
.nav-wrap:not(.nav-lateral) .tema-botao {
width: auto;
margin-bottom: 0;
padding: 7px 9px;
}
.nav-wrap:not(.nav-lateral) .tema-rotulo { display: none; }
/* RECOLHIDA (64px): so o icone, centralizado - o mesmo tratamento do Sair. */
body.menu-recolhido .nav-lateral .tema-botao { justify-content: center; padding: 8px 0; }
body.menu-recolhido .nav-lateral .tema-rotulo { display: none; }
/* ------------------------------------------------------------
RELOGIO DA SESSAO
------------------------------------------------------------ */
.sessao-relogio {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .72);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
/* Discreto de proposito: e uma informacao de fundo, que so precisa ser
notada quando muda de cor. Um relogio chamativo no canto da tela
distrai o dia inteiro para avisar uma vez a cada duas horas. */
}
.sessao-relogio svg { width: 14px; height: 14px; flex: none; }
/* ULTIMOS CINCO MINUTOS: sai do fundo e vira aviso. E o unico momento em que
este elemento deve puxar o olho - da tempo de salvar o que esta aberto. */
.sessao-relogio.alerta {
background: #dc2626;
color: #fff;
animation: pulso-sessao 2s ease-in-out infinite;
}
@keyframes pulso-sessao {
0%, 100% { opacity: 1; }
50% { opacity: .62; }
}
/* Quem prefere menos movimento na tela nao perde o aviso - perde so a
piscada. A cor continua fazendo o trabalho. */
@media (prefers-reduced-motion: reduce) {
.sessao-relogio.alerta { animation: none; }
}
/* ------------------------------------------------------------
SAIR
------------------------------------------------------------ */
/* ICONE + PALAVRA, e nao so a palavra. Recolhida a barra, o texto some e a
porta continua dizendo o que o botao faz - sem precisar de um segundo
botao so para esse caso.
PRECISA DO `.nav-wrap` NA FRENTE. O botao e `class="btn btn-sair"`, e a
regra generica `.btn` mora 700 linhas ABAIXO desta: com a mesma
especificidade, quem vem depois ganha, e `.btn` levaria embora a borda
(`border: none`), o padding e a transicao daqui - o botao voltaria a ser um
retangulo sem contorno. Duas classes no seletor resolvem sem depender de
onde cada bloco esta no arquivo. */
.nav-wrap .btn-sair {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 6px 12px;
height: 100%;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .9);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.nav-wrap .btn-sair svg { width: 15px; height: 15px; flex: none; }
/* Vermelho so no hover: sair e destrutivo o bastante para avisar, e comum o
bastante para nao ficar vermelho o dia inteiro no canto do olho. */
.nav-wrap .btn-sair:hover {
background: #dc2626;
border-color: #dc2626;
color: #fff;
/* `.btn:hover` clareia tudo com `filter`. Sobre vermelho isso lava a cor
justamente onde ela precisa ser firme. */
filter: none;
}
/* ============================================================
ATIVACAO DO 2FA - QR e segredo lado a lado
============================================================ */
.dois-fatores-passo {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 24px;
}
/* Monoespacado e em blocos: sao 32 caracteres onde 0 e O se confundem, e o
erro de digitacao so apareceria la na frente como "codigo invalido". */
.segredo-2fa {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 15px;
font-weight: 700;
letter-spacing: .06em;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 9px;
padding: 10px 14px;
margin: 0 0 10px;
/* Quebra em vez de esticar o cartao numa tela estreita. */
overflow-wrap: anywhere;
}
/* CAMPO DO CODIGO DE 6 DIGITOS (segunda etapa do login).
Monoespacado, grande e espacado: sao seis numeros lidos de um celular e
digitados de cabeca, e o erro classico e trocar 0 por O ou 1 por 7. Em
fonte de texto comum, num tamanho comum, esse erro passa despercebido ate
o "codigo invalido".
Centralizado porque o campo e mais largo que o conteudo - alinhado a
esquerda, os digitos ficariam encolhidos num canto de uma caixa vazia. */
.codigo-2fa {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 26px;
font-weight: 700;
letter-spacing: .35em;
text-align: center;
/* Compensa o letter-spacing, que empurra o texto meio caractere para a
esquerda ao acrescentar espaco DEPOIS do ultimo digito. */
text-indent: .35em;
}
/* ============================================================
CARTAO DO 2FA em Minha senha
Mora ao lado da troca de senha porque as duas coisas respondem a mesma
pergunta - "como eu entro no sistema". Numa tela propria, em outro menu,
so acharia quem ja soubesse que existe.
============================================================ */
.card-2fa { margin-top: 18px; }
.cabeca-2fa {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 14px;
}
/* O titulo e a explicacao ocupam o meio; o escudo e a pilula seguram as
pontas. */
.cabeca-2fa > div { flex: 1; min-width: 0; }
.cabeca-2fa h3 { margin: 0; }
.cabeca-2fa .badge { flex: none; margin-top: 3px; }
/* O ESCUDO diz o estado antes da leitura. Verde com o visto = protegida;
ambar com a exclamacao = so a senha. Cor e desenho mudam JUNTOS - so a cor
nao serve para quem nao distingue verde de vermelho. */
.escudo-2fa {
flex: none;
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 11px;
}
.escudo-2fa svg { width: 22px; height: 22px; }
.escudo-2fa.ligado {
background: rgba(5, 150, 105, .1);
color: var(--ok);
border: 1px solid rgba(5, 150, 105, .26);
}
.escudo-2fa.desligado {
background: rgba(180, 83, 9, .1);
color: var(--warn);
border: 1px solid rgba(180, 83, 9, .26);
}
/* CINZA, e nao vermelho, para "DESLIGADA". Nao ha nada errado com a conta -
ha uma protecao opcional que nao foi ligada. Vermelho aqui gritaria erro
onde existe apenas uma escolha. */
.badge-neutro {
background: rgba(100, 116, 139, .1);
color: var(--muted);
border: 1px solid rgba(100, 116, 139, .24);
}
/* ============================================================
CARTAO DE RESPOSTA do ticket - o unico lugar da tela onde se AGE
Acima dele fica a conversa: uma pilha de baloes brancos que so se le.
Sem distinguir, o cartao de responder era mais um retangulo branco na
sequencia, e quem abria o ticket rolava procurando "onde eu escrevo?".
O DESTAQUE E DE MOLDURA, nao de fundo. Fundo colorido atras de um editor
de texto briga com o proprio texto que se esta escrevendo - e o texto
aqui vai para o cliente, entao ele precisa aparecer exatamente como vai
sair. A barra da esquerda e a tinta de fundo bem lavada marcam a area sem
entrar no caminho.
Roxo da marca, o mesmo do botao "Enviar resposta": a moldura e o botao
passam a ler como um bloco so - aqui se escreve, e daqui se envia.
============================================================ */
.card-responder {
border-color: rgba(67, 21, 156, .28);
border-left: 3px solid var(--brand-soft);
background:
linear-gradient(180deg, rgba(67, 21, 156, .045), transparent 120px),
var(--surface);
}
/* O titulo "Responder" ganha a cor da marca: e o rotulo da area, e em preto
ele pesava igual aos nomes dos participantes da conversa acima. */
.card-responder > h3 { color: var(--accent-ink); }
/* ============================================================
RESPOSTA PRONTA - a faixa acima do editor do ticket
COLADA NO EDITOR, formando uma peca so: faixa com fundo proprio, cantos
arredondados em cima e SEM borda embaixo, encaixando na barra do Quill.
Solta, com margem entre as duas, ela parecia um filtro da pagina - e
filtro de pagina nao se relaciona com o que se escreve logo abaixo.
Por isso tambem `margin-bottom: -1px`: a borda de baixo desta faixa e a
de cima da barra do Quill ficariam empilhadas, virando uma linha de 2px
mais escura no meio do componente.
============================================================ */
/* FUNDO TINGIDO DE ROXO, e nao o cinza `--elevated`.
Com o cinza, a faixa tinha exatamente a mesma cor da barra do Quill logo
abaixo: as duas viravam um bloco cinza unico e o seletor sumia dentro
dele. O tom da marca separa as duas na primeira olhada e liga a faixa ao
resto do destaque do cartao.
A linha de baixo e SOLIDA e na cor da marca: e a fronteira entre "o que
escrever" e "como formatar", que era justamente o que faltava. */
.resposta-pronta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 10px 13px;
background: rgba(67, 21, 156, .07);
border: 1px solid rgba(67, 21, 156, .22);
border-bottom: 2px solid var(--brand-soft);
border-radius: 9px 9px 0 0;
margin-bottom: -1px;
}
/* O balao de fala diz "texto pronto" antes de qualquer palavra ser lida.
Na cor da marca, e nao em cinza: em cinza ele lia como ornamento. */
.resposta-pronta .rp-ico {
width: 18px;
height: 18px;
color: var(--brand-soft);
flex: none;
}
.resposta-pronta label {
font-size: 11.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--accent-ink);
cursor: pointer;
}
/* CRESCE ate 420px e encolhe quando falta espaco. Titulo de resposta pronta
e uma frase curta ("Cancelamento confirmado"), nao uma palavra: com
largura fixa pequena, o campo cortava justamente a parte que distingue um
texto do outro.
position: relative porque a lista de resultados e absoluta DENTRO dele -
ancorada no campo, e nao na pagina, para acompanhar quando a faixa quebra
em duas linhas no celular. */
.rp-busca {
position: relative;
flex: 1 1 240px;
max-width: 420px;
}
.resposta-pronta .rp-campo {
width: 100%;
padding: 8px 30px 8px 12px; /* 30 a direita: o espaco do X */
/* BRANCO sobre o fundo tingido: o campo tem de parecer um campo, e nao
um pedaco da faixa. Era o que faltava para o olho reconhecer que ali
se escolhe alguma coisa. */
background: var(--surface);
border: 1px solid rgba(67, 21, 156, .35);
border-radius: 8px;
color: var(--ink);
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.resposta-pronta .rp-campo::placeholder {
color: var(--muted);
font-weight: 500;
}
.resposta-pronta .rp-campo:hover { border-color: var(--brand-soft); }
.resposta-pronta .rp-campo:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(42, 6, 105, .13);
}
.rp-limpar {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 6px;
background: none;
color: var(--muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
/* var(--elevated), e nao um rgba de cinza-escuro: no tema escuro o fundo do
campo JA e escuro, e uma lavagem preta por cima nao aparece. */
.rp-limpar:hover { color: var(--ink); background: var(--elevated); }
.rp-limpar[hidden] { display: none; }
/* ---- A LISTA DE RESULTADOS -------------------------------------------
z-index alto porque ela cobre a barra do Quill, que vem logo abaixo e tem
fundo proprio: sem isto os resultados apareciam ATRAS dos botoes de
negrito e italico.
max-height com rolagem, e nao lista inteira: o teto de 8 resultados do JS
ja limita, mas titulo longo quebra em duas linhas e a conta muda. */
.rp-lista {
position: absolute;
z-index: 30;
top: calc(100% + 4px);
left: 0;
right: 0;
margin: 0;
padding: 4px;
list-style: none;
max-height: 320px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}
.rp-lista[hidden] { display: none; }
.rp-item {
display: block;
padding: 7px 10px;
border-radius: 7px;
cursor: pointer;
}
/* UM SO ESTADO para o mouse e para as setas: o JS marca com .rp-item-ativo
tambem no mouseenter. Com :hover separado, mover o mouse sem querer
deixava DUAS linhas acesas - e a que o Enter usaria nao era obvia. */
.rp-item-ativo { background: rgba(67, 21, 156, .10); }
.rp-item-titulo {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
}
/* O trecho do corpo: uma linha so, cortada com reticencias. Duas linhas por
resultado e a lista inteira ja nao cabe na tela. */
.rp-item-trecho {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* O do navegador e amarelo-marca-texto e destoa de tudo. Aqui ele
so precisa dizer "foi por aqui que casou". */
.rp-lista mark {
background: rgba(67, 21, 156, .16);
color: inherit;
border-radius: 3px;
padding: 0 1px;
font-weight: 700;
}
/* "Nada encontrado" e "+ N": texto, nao opcao. Sem cursor de clique e sem
realce, para nao parecer que da para escolher. */
.rp-vazio {
padding: 8px 10px;
font-size: 12.5px;
color: var(--muted);
}
/* A dica some no celular: ali a faixa ja quebra em duas linhas, e uma
terceira so para explicar o obvio empurraria o editor para baixo. */
.resposta-pronta .rp-dica {
font-size: 12px;
color: var(--muted);
}
@media (max-width: 700px) {
.resposta-pronta .rp-dica { display: none; }
/* ALVO DE TOQUE. No desktop a linha de 30px e confortavel com o mouse;
no dedo, nao - o minimo que iOS e Android recomendam e 44px, e a lista
e usada em pe, no meio do atendimento. O X pelo mesmo motivo.
Vale a pena tambem porque a busca substituiu um