/* ==========================================================================
Tema Next ERP.
A identidade antiga (Uniplus) era vermelha -- o flamingo #eb575a herdado de
login_files/styles.ec41ca96b6a4810b.css. A marca passou a ser Next ERP, azul.
A troca acontece SO aqui: nao existem `.bg-red`, `.navbar` ou classes com cor
fixa espalhadas pela folha. Tudo o que era vermelho lia `var(--up-flamingo*)`,
token que virou `--up-primaria*` -- nome semantico, para que a proxima
mudanca de marca continue sendo so estas quatro linhas. Quem consome:
.btn-primary (Bootstrap), .item-menu:hover, .modulo.aberto, .aba-interna.ativa,
.chip-filtro, o realce de linha do AG Grid e os cabecalhos de seccao.
Medidas e neutros seguem os do sistema real:
.navbar-white -> 1.4px #cfd8dc .text-cinza-chumbo -> #57525a
.card-shadow -> 0 -1px 6px #00060c33
fonte -> "FS Truman", Calibri
========================================================================== */
:root {
/* Marca Next ERP. O tom primario e o mesmo azul do botao ENTRAR da tela de
login e da seta clara do logotipo. */
--up-primaria: #2e2edb;
--up-primaria-escuro: #2424b0; /* hover/ativo */
--up-primaria-claro: #b9baf0; /* desabilitado e borda de campo em foco */
--up-primaria-fundo: #eeeffe; /* realce suave: chips, hover de linha/menu */
/* Azul escuro da marca: a seta cheia do logotipo e os titulos fortes. */
--up-marca-escura: #151a3d;
/* Azuis de apoio, herdados do sistema (links, linha selecionada na grade).
Sao outra familia: nao confundir com --up-primaria. */
--up-azul: #0032a0e6;
--up-azul-escuro: #004664;
--up-azul-sky: #36a9e1;
--up-azul-royal: #0050a0; /* --azul-royal-01 */
/* Neutros */
--up-cinza-chumbo: #57525a;
--up-borda: #cfd8dc;
--up-borda-suave: #e3e7ea;
--up-cinza-frio: #f5f5f5;
--up-texto: #2f3438;
--up-texto-suave: #7b8085;
/* Indigo da marca. Era o papel de parede da area de trabalho (hoje ela usa
o mesmo fundo claro do login); segue como cor da barrinha de navegacao. */
--up-desktop: #4d58b8;
/* Intervencao administrativa: alguem com mais poder desfez o que outra
pessoa estava fazendo. Hoje so a liberacao da trava de edicao por um
supervisor, na Rastreabilidade (.evento-edicao_liberada). Ambar de
proposito -- nao e erro (vermelho) nem conclusao (verde), e um aviso de
que houve mao humana por cima. */
--up-intervencao: #b07d2b;
/* Fundo do mesmo ambar, para ETIQUETA de algo que espera uma decisao
humana -- hoje o lojista "Pendente" do Catalogo virtual. Com o texto em
--up-intervencao por cima, e o "falta alguem olhar" da grade. */
--up-intervencao-fundo: #f8eedb;
/* Botoes de ACAO DA LINHA com cor pelo significado (24/09/2026, pedido do
cliente na grade Categorias e Departamentos: so a lixeira tinha cor e o
resto parecia desligado). Mesmas cores dos botoes de tela da casa:
incluir/ativar = verde do .botao-incluir, alterar = petroleo do "Alterar
(F3)" do pedido (.botao-nf-alterar). Inativar e ambar: tira de exibicao
mas nao apaga -- nem o vermelho da lixeira nem o verde de criar. */
--up-acao-incluir: #55a459;
--up-acao-incluir-escuro: #468f4a;
--up-acao-alterar: #26808f;
--up-acao-alterar-escuro: #1d6672;
--up-acao-inativar: #e08e1b;
--up-acao-inativar-escuro: #b87212;
/* Excluir da barra de ferramentas (Tipos de Documento Financeiro,
26/09/2026): o vermelho do .btn-danger do ERP original, o mesmo do
.botao-excluir-item das grades */
--up-acao-excluir: #d70a23;
--up-acao-excluir-escuro: #b40a1e;
/* Tipo do documento na Expedicao > Entregas (01/10/2026, "Modelo A"):
a etiqueta Pedido / NF-e / NFC-e de cada linha. Tres familias que o olho
separa de longe: o azul royal dos pedidos (o mesmo das listas de venda),
o petroleo do fiscal (o "Alterar (F3)" da nota, --up-acao-alterar) e um
roxo proprio para o cupom do caixa. O fundo claro de cada um vem junto. */
--up-tipo-pedido: var(--up-azul-royal);
--up-tipo-pedido-fundo: #e6eef8;
--up-tipo-nfe: var(--up-acao-alterar-escuro);
--up-tipo-nfe-fundo: #dff0f2;
--up-tipo-nfce: #5a3f8f;
--up-tipo-nfce-fundo: #ece7f6;
/* Situacao "Acerto financeiro" da carga (01/10/2026): a quarta situacao,
depois de Baixada (verde). Ambar/azul/verde ja contam Aberta/Fechada/
Baixada, entao o acerto (dinheiro conferido) ganha o roxo -- emprestado
do cupom do caixa, a outra cor "de dinheiro" da tela. Consomem: a
etiqueta .tom-acerto, a bolinha do Kanban e a linha do tempo. */
--up-acerto: var(--up-tipo-nfce);
--up-acerto-fundo: var(--up-tipo-nfce-fundo);
/* Realce translucido SOBRE o azul escuro da marca (o contador do painel
"Montar carga" e o fundo do icone da faixa do formulario da carga):
clareia o que estiver embaixo, sem inventar um terceiro azul. */
--up-realce-sobre-escuro: rgba(255, 255, 255, 0.14);
/* Coluna de perfil das fichas de cadastro (Modelo B, 03/10/2026): o texto
secundario (rotulos, "sem e-mail", "Cadastrado em") e o filete entre os
grupos SOBRE o azul escuro. O --up-texto-suave some no escuro; este e um
lilas claro tirado do proprio azul da marca (contraste 7,6:1). */
--up-texto-sobre-escuro-suave: #a9add0;
--up-divisor-sobre-escuro: rgba(255, 255, 255, 0.12);
/* Fundo das colunas do Kanban de cargas (Entregas, 01/10/2026): um cinza
azulado um tom abaixo do papel de parede, para os cartoes brancos de
dentro se destacarem sem precisar de sombra forte. */
--up-coluna-kanban: #eceff5;
/* Trilho das abas em pilulas das Entregas (o topo do Modelo B do canvas,
01/10/2026): a aba ativa e a pilula branca por cima dele. */
--up-pilulas-fundo: #e3e7ef;
/* Tipo de pessoa no cadastro de Clientes (Modelo A, 01/10/2026): o circulo
das iniciais e a etiqueta Juridica/Fisica da grade. Emprestados das
familias dos tipos de documento (azul royal e petroleo), que o olho ja
separa de longe -- nao sao cores novas, sao nomes com o sentido certo. */
--up-pessoa-juridica: var(--up-tipo-pedido);
--up-pessoa-juridica-fundo: var(--up-tipo-pedido-fundo);
--up-pessoa-fisica: var(--up-tipo-nfe);
--up-pessoa-fisica-fundo: var(--up-tipo-nfe-fundo);
/* Estrela da pauta FAVORITA (Painel Admin > Usuarios): o dourado pedido
pelo usuario para "a pauta que abre no pedido". E vizinho do
--up-intervencao, mas nao e o mesmo tom nem o mesmo sentido: aquele avisa
que alguem interveio, este marca uma escolha preferida. */
--up-favorita: #e0a516;
/* "So com autorizacao": hoje o cadeado FECHADO do seletor de pautas
(Painel Admin > Usuarios) e a contagem dele no resumo da celula -- a
pauta aparece para o vendedor, mas so entra no pedido com a senha de um
supervisor. Nao e erro nem recusa de uma acao, mas divide com elas o
vermelho que ja existia solto na folha (#c0392b do
.acesso-desenvolvedor-erro), agora com nome. */
--up-restrito: #c0392b;
/* Pendencia esperando o operador (Minhas Notificacoes, 24/09/2026): o
contador ao lado do nome e o cartao da notificacao pendente. O mesmo
vermelho de recusa da casa, com nome proprio: aqui o sentido e "ha um
problema esperando voce", nao "so com autorizacao". O fundo claro e o do
circulo do icone e da etiqueta "Pendente". */
--up-pendencia: var(--up-restrito);
--up-pendencia-fundo: #fbeae8;
/* ...e a notificacao resolvida: o verde das etiquetas "Liberado"/"Nao
faturado" (.etiqueta-status), que ate aqui estava solto na folha. */
--up-resolvida: #3d7a42;
--up-resolvida-fundo: #e3f1e4;
/* borda do botao claro sobre o `--up-resolvida-fundo` ("Copiar Orcamento"
do Pedido/Orcamento, facelift de 04/10/2026) */
--up-resolvida-borda: #bfdcc2;
/* fundo da linha do somatorio (Sigma) no pe das grades AG Grid */
--up-grade-rodape: #f2f5f7;
/* Dinheiro que entra e que sai da conta (extrato da Conta Corrente Banco,
26/09/2026): coluna Entrada/Saida, saldo negativo e a borda dos cartoes
do resumo. Apontam para o verde do resolvido e o vermelho do restrito
para o extrato nao inventar um terceiro verde/vermelho. */
--up-dinheiro-entrada: var(--up-resolvida);
--up-dinheiro-saida: var(--up-restrito);
/* Concilia-Pro (04/10/2026): a cor de cada tipo de sugestao -- a etiqueta,
o sinal redondo e o botao da linha. Apontam para cores que a casa ja usa
com o mesmo sentido: verde do resolvido (exato), ambar da intervencao
(provavel), roxo do acerto (soma), azul do andamento (titulo a baixar),
o verde-agua da NF-e (regra/transferencia) e o vermelho da pendencia
(sem par). */
--up-cpro-exato: var(--up-resolvida);
--up-cpro-exato-fundo: var(--up-resolvida-fundo);
--up-cpro-provavel: var(--up-intervencao);
--up-cpro-provavel-fundo: var(--up-intervencao-fundo);
--up-cpro-soma: var(--up-acerto);
--up-cpro-soma-fundo: var(--up-acerto-fundo);
--up-cpro-titulo: var(--up-status-andamento);
--up-cpro-titulo-fundo: var(--up-status-andamento-fundo);
--up-cpro-regra: var(--up-tipo-nfe);
--up-cpro-regra-fundo: var(--up-tipo-nfe-fundo);
--up-cpro-sem: var(--up-pendencia);
--up-cpro-sem-fundo: var(--up-pendencia-fundo);
/* Boletos no banco (05/10/2026): a situacao de cada boleto no banco */
--up-bb-cobranca: var(--up-tipo-pedido);
--up-bb-cobranca-fundo: var(--up-tipo-pedido-fundo);
--up-bb-vencido: #8a5f17; /* o ambar da intervencao escurecido para o texto */
--up-bb-vencido-fundo: var(--up-intervencao-fundo);
--up-bb-baixado: var(--up-pendencia);
--up-bb-baixado-fundo: var(--up-pendencia-fundo);
--up-bb-pedida: var(--up-acerto);
--up-bb-pedida-fundo: var(--up-acerto-fundo);
--up-bb-rejeitado: var(--up-cinza-chumbo);
--up-bb-rejeitado-fundo: #eceff3;
/* Saldo negativo SOBRE a faixa escura do extrato (03/10/2026): o vermelho
do --up-dinheiro-saida some no azul escuro; este e o mesmo aviso, claro. */
--up-negativo-sobre-escuro: #ffb4ab;
/* ...e os outros dois indicadores da mesma faixa (Modelo A do canvas
"Extrato com grade maior", 03/10/2026): Entradas e Conciliados no verde
claro, A conciliar no ambar claro -- o verde do resolvido e o ambar da
intervencao somem no azul escuro, como o vermelho. */
--up-positivo-sobre-escuro: #8fdc9c;
--up-atencao-sobre-escuro: #ffd28a;
/* Fundo dos indicadores que filtram sobre a faixa escura: apagado, e o
aceso (o filtro aplicado) com a borda quase branca. O --up-realce-
sobre-escuro fica no meio dos dois e e a borda do apagado. */
--up-indicador-sobre-escuro: rgba(255, 255, 255, 0.07);
--up-indicador-ativo-sobre-escuro: rgba(255, 255, 255, 0.18);
--up-borda-ativa-sobre-escuro: rgba(255, 255, 255, 0.75);
/* Pilula da forma de pagamento PIX na grade do extrato (03/10/2026): o
verde-azulado separa o PIX (a maioria das entradas) do "Conta corrente"
no cinza da pilula. */
--up-forma-pix: #1f7a6a;
--up-forma-pix-fundo: #e3f3ef;
/* Barra "X de N conciliados" na faixa escura da conciliacao por arquivo
(03/10/2026): o verde do resolvido nao aparece sobre o azul escuro. */
--up-progresso-sobre-escuro: #7bd389;
/* Base do papel de parede (fundo-login.svg), usada pelas telas que o
exibem: .pagina-login, .app-uniplus e o painel .corpo-status (Status
retirada). E o que aparece enquanto o SVG nao carregou e nas sobras do
`cover`, entao precisa acompanhar o tom do desenho -- por isso token, e
nao o hex repetido em cada lugar. */
--up-papel-parede: #f4f7fd;
/* Painel Status retirada (Expedicao > Status, 25/09/2026): a cor de cada
coluna diz em que ponto o pedido esta, para o cliente achar o dele de
longe. Reaproveitam o sentido de tons que a casa ja tem -- espera = o
ambar de "falta alguem olhar", andamento = o azul royal das perguntas,
pronto = o verde de resolvido. So o fundo do andamento e novo. */
--up-status-espera: var(--up-intervencao);
--up-status-espera-fundo: var(--up-intervencao-fundo);
--up-status-andamento: var(--up-azul-royal);
--up-status-andamento-fundo: #e6f0fa;
--up-status-pronto: var(--up-resolvida);
--up-status-pronto-fundo: var(--up-resolvida-fundo);
/* Confirmacao/descarte dos dialogos. Eram laranja fixo (#e47646/#d4622b) da
folha antiga -- viraram token para acompanharem a marca. */
--up-confirmar: #2e2edb;
--up-confirmar-escuro: #2424b0;
/* "Gerar PDF" da confirmacao de gravacao: o mesmo verde do Gerar PDF da
janela Imprimir da listagem (.botao-gravar), para o operador reconhecer
a acao nas duas telas */
--up-gerar-pdf: #55a459;
--up-gerar-pdf-escuro: #468f4a;
/* Sombras e medidas */
--up-sombra-card: 0 -1px 6px #00060c33;
--up-sombra-menu: 0 6px 14px rgba(0, 6, 12, 0.18);
--up-sombra-login: 0 6px 26px rgba(0, 6, 12, 0.16);
/* Telas do financeiro com visual proprio (`.fin-tela`, 28/09/2026): o
branco dos cartoes sobre o fundo claro da area de trabalho e a sombra
leve que os destaca -- tingida do azul escuro da marca, nao do preto. */
--up-superficie: #fff;
--up-sombra-cartao-leve: 0 1px 3px rgba(21, 26, 61, 0.07);
/* Cabecalho global. Em 22/09/2026 as tres barras (saudacao + modulos +
abas) desceram de 146px para ~96px, para sobrar area util nas telas de
lancamento. A casca nova (Modelo A do canvas, aprovado em 02/10/2026)
voltou a crescer -- cabecalho com o cartao do usuario, faixa escura de
modulos com o icone em quadradinho colorido e abas com icone -- e soma
134px (50 + 46 + 38). Os 52/52/42 do canvas foram apertados aqui para
nao roubar mais altura das telas fixas (.fin-tela, .ent-tela). */
--up-header-altura: 50px;
--up-barra-modulos-altura: 46px;
--up-faixa-abas-altura: 38px;
/* Casca nova (02/10/2026). A faixa dos modulos e o azul escuro da marca;
a das abas, o cinza-azulado onde a aba branca da tela aberta se destaca.
O veu escurece a tela atras do painel do modulo aberto. */
--up-faixa-modulos: var(--up-marca-escura);
--up-faixa-abas: #eceff5;
--up-veu-menu: rgba(21, 26, 61, 0.22);
/* veu mais leve atras do painel "Filial de trabalho": e um painel pequeno */
--up-veu-filial: rgba(21, 26, 61, 0.12);
/* aba de fundo: branco translucido sobre a faixa, mais firme no hover */
--up-aba-fundo: rgba(255, 255, 255, 0.45);
--up-aba-fundo-hover: rgba(255, 255, 255, 0.8);
--up-sombra-painel-modulo: 0 22px 44px rgba(21, 26, 61, 0.2);
/* Busca rapida do topo (04/10/2026): o amarelo-claro atras das letras do
nome da tela que bateram com o que foi digitado (.busca-rapida-marca) */
--up-busca-realce: #fff0b3;
/* Aviso "Aguarde" (03/10/2026, Modelo C do canvas): faixa no azul escuro
da marca, "Aguarde" em branco e a frase do motivo num lilas claro, que
fica em segundo plano sem perder a leitura sobre o escuro. */
--up-aguarde-fundo: var(--up-marca-escura);
--up-aguarde-texto: #ffffff;
--up-aguarde-frase: #c9cdea;
--up-aguarde-sombra: 0 10px 28px rgba(21, 26, 61, 0.28);
/* Filtros rapidos das listas de venda (03/10/2026): a bolinha de cada
situacao repete a cor do TEXTO da etiqueta dela na grade
(.etiqueta-status.status-N), para o botao e a coluna se reconhecerem.
PDV e Pedido gerado ficam no cinza, como la. */
--up-situacao-aberta: #3d7a42;
--up-situacao-cancelada: var(--up-primaria-escuro);
--up-situacao-nota: var(--up-azul-royal);
--up-situacao-outra: var(--up-cinza-chumbo);
/* Cor de cada modulo (casca nova, 02/10/2026): pinta o quadradinho do
icone na faixa, os icones do painel e o friso da aba aberta. O -fundo e
o tom claro atras do icone. Os tons escuros passam 4.5:1 sobre branco.
Cadastros fica com a marca; Fiscal, com o royal que ja era do fiscal.
`mod-sistema` e o de telas fora dos modulos (Painel Admin, notificacoes). */
--up-mod-cadastros: var(--up-primaria);
--up-mod-cadastros-fundo: var(--up-primaria-fundo);
--up-mod-vendas: #0e7c86;
--up-mod-vendas-fundo: #e0f2f3;
--up-mod-financeiro: #2f7d3a;
--up-mod-financeiro-fundo: #e3f1e4;
--up-mod-expedicao: #b45309;
--up-mod-expedicao-fundo: #fdeedd;
--up-mod-fiscal: var(--up-azul-royal);
--up-mod-fiscal-fundo: var(--up-tipo-pedido-fundo);
--up-mod-catalogo: #6b3fa0;
--up-mod-catalogo-fundo: #efe8f8;
--up-mod-ferramentas: #4a5568;
--up-mod-ferramentas-fundo: #eceff3;
--up-mod-sistema: var(--up-marca-escura);
--up-mod-sistema-fundo: #e8e9f0;
/* A folha original usa "FS Truman"; o arquivo da fonte nao acompanha a
pagina salva, entao Calibri (o proprio fallback deles) assume. */
--up-fonte: "FS Truman", Calibri, "Segoe UI", system-ui, sans-serif;
}
body {
font-family: var(--up-fonte);
font-size: 13px;
color: var(--up-texto);
background-color: #fff;
}
/* --- Icones --------------------------------------------------------------- */
/* Todo icone sai de partials/icones.html com class="icone". O TAMANHO continua
vindo do atributo width/height que cada chamada passa (`ico.pessoa(15)`),
e nao daqui: os tamanhos ja estao afinados tela a tela, de 13px no lapis da
grade a 22px no envio de arquivo do admin. Pisar neles com um `width` fixo
no CSS quebraria esses ajustes.
Logo, esta classe cuida so do que o atributo nao resolve: */
.icone {
/* nunca espremer o icone quando o texto ao lado e longo */
flex: 0 0 auto;
/* alinha com a linha de base do texto quando o pai NAO e flex */
vertical-align: -0.14em;
}
/* A COR e o ESPACO nao ficam aqui de proposito:
- cor: e contextual. O icone herda `currentColor`, entao segue a cor do item
(.item-menu svg -> azul, .botao-acao svg -> branco, .modulo svg -> grafite).
Fixar um cinza nesta classe atropelaria todos esses casos.
- espaco: os menus e botoes sao flex e ja separam icone e texto com `gap`
(.item-menu 0.45rem, .modulo 0.4rem, .grupo-titulo 0.5rem). Um
`margin-right` aqui SOMARIA ao gap e o respiro sairia dobrado. */
/* --- Logotipo ------------------------------------------------------------- */
.marca-lockup {
display: inline-flex;
align-items: flex-start;
line-height: 1.1;
}
.marca {
display: block;
height: 2.4rem;
width: auto;
}
/* ==========================================================================
Componentes do Bootstrap alinhados ao tema
========================================================================== */
.btn {
font-family: var(--up-fonte);
}
.btn-primary {
--bs-btn-bg: var(--up-primaria);
--bs-btn-border-color: var(--up-primaria);
--bs-btn-hover-bg: var(--up-primaria-escuro);
--bs-btn-hover-border-color: var(--up-primaria-escuro);
--bs-btn-active-bg: #b74c51;
--bs-btn-active-border-color: #b74c51;
--bs-btn-disabled-bg: var(--up-primaria-claro);
--bs-btn-disabled-border-color: var(--up-primaria-claro);
--bs-btn-focus-shadow-rgb: 235, 87, 90;
}
.form-control:focus,
.form-select:focus {
border-color: var(--up-primaria-claro);
box-shadow: 0 0 0 0.2rem rgba(235, 87, 90, 0.18);
}
.spinner-border {
color: var(--up-primaria);
}
.card {
--bs-card-border-color: var(--up-borda-suave);
}
.card-header {
background-color: var(--up-cinza-frio);
border-bottom-color: var(--up-borda-suave);
color: var(--up-azul);
font-weight: 600;
}
/* ==========================================================================
Tela de login (Next ERP)
Escrita sem Bootstrap: o login.html carrega SO esta folha, entao tudo o que
a tela usa -- inclusive .visually-hidden, que antes vinha do framework --
precisa estar aqui. As demais telas continuam com o Bootstrap carregado
antes do app.css; a redeclaracao abaixo e identica a dele e nao muda nada la.
========================================================================== */
/* Mesma regra do Bootstrap: some da tela, continua no leitor de tela. */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* A pagina de login e a unica que rola livremente -- .app-uniplus (o corpo do
sistema) trava em 100vh. Por isso a casca aqui e um corpo proprio. */
.corpo-login {
margin: 0;
min-height: 100vh;
}
/* Grade de 3 faixas: logo | cartao | rodape. As faixas de cima e de baixo
dividem a sobra por igual, entao e o CARTAO que fica no centro vertical
da tela (e nao o conjunto logo + cartao). Quando a janela e baixa, a faixa
de baixo cede ate o tamanho do rodape e o cartao sobe o necessario para
caber -- o minimo deixou de ser 0 quando o rodape entrou ali, senao a faixa
colapsava e a assinatura passava por cima do cartao.
`border-box`: sem ele o padding somava aos 100vh e a pagina sempre ganhava
uma barra de rolagem. So rola se a janela for menor que logo + cartao. */
.pagina-login {
box-sizing: border-box;
/* altura DEFINIDA (e nao min-height): com min-height a grade reservava para
a faixa de baixo o mesmo tamanho do logo e gerava rolagem em tela baixa.
Se a janela for menor que logo + cartao, o conteudo passa da altura e o
proprio corpo rola, como deve. */
height: 100vh;
display: grid;
grid-template-rows: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
justify-items: center;
padding: 1rem;
/* fundo-login.svg traz o degrade e as setas; `cover` mantem a decoracao nos
cantos em qualquer proporcao de janela (ver o comentario no proprio SVG) */
background-color: var(--up-papel-parede);
background-image: url("/static/img/fundo-login.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.login-logo {
display: block;
align-self: end;
width: auto;
height: 6.5rem;
max-width: min(22rem, 80vw);
margin-bottom: 2.5rem;
}
/* --- Cartao --------------------------------------------------------------- */
.cartao-login {
width: 100%;
max-width: 26rem;
padding: 2rem 1.9rem 1.6rem;
background-color: #fff;
border-radius: 0.9rem;
box-shadow: 0 18px 44px rgba(20, 30, 70, 0.12), 0 2px 6px rgba(20, 30, 70, 0.06);
}
/* --- Campos --------------------------------------------------------------- */
/* Um unico retangulo arredondado com o icone dentro, e nao input-group com
caixas emendadas: e assim que a referencia desenha o campo. A borda vive no
.campo-login (o pai), o entra sem borda nenhuma -- por isso o foco
precisa ser :focus-within e nao :focus. */
.campo-login {
display: flex;
align-items: center;
margin-bottom: 0.7rem;
border: 1.5px solid var(--up-borda);
border-radius: 0.55rem;
background-color: #fff;
transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.campo-login:focus-within {
border-color: var(--up-primaria-claro);
background-color: var(--up-primaria-fundo);
box-shadow: 0 0 0 3px rgba(46, 46, 219, 0.08);
}
.campo-login-icone {
display: flex;
align-items: center;
flex: 0 0 auto;
padding: 0 0.7rem 0 0.85rem;
color: var(--up-cinza-chumbo);
}
.campo-login:focus-within .campo-login-icone {
color: var(--up-primaria);
}
.campo-login-entrada {
flex: 1 1 auto;
/* largura minima zero: sem isso o input impoe o tamanho padrao dele e
estoura o cartao em telas estreitas */
min-width: 0;
padding: 0.7rem 0.9rem 0.7rem 0;
border: 0;
background: none;
font-family: var(--up-fonte);
font-size: 0.95rem;
color: var(--up-texto);
}
.campo-login-entrada::placeholder {
color: var(--up-texto-suave);
}
.campo-login-entrada:focus {
outline: none; /* o realce e a borda do .campo-login inteiro */
}
/* Autofill do Chrome pinta o input de amarelo e ignora background-color;
a sombra interna e a unica forma de cobrir. */
.campo-login-entrada:-webkit-autofill,
.campo-login-entrada:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 40rem #fff inset;
-webkit-text-fill-color: var(--up-texto);
}
/* --- Campo com problema ---------------------------------------------------- */
/* Borda e icone em vermelho; o aviso logo abaixo diz o que falta. A classe
`tremer` e posta pelo login.js a cada tentativa recusada -- um balanco
curto, so para puxar o olho para o campo certo. */
.campo-login.invalido,
.campo-login.invalido:focus-within {
border-color: #e0898b;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.1);
}
.campo-login.invalido .campo-login-icone {
color: #c9423f;
}
.campo-login.tremer {
animation: tremer-campo-login 0.32s ease-in-out;
}
@keyframes tremer-campo-login {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
/* O aviso encosta no campo (margem negativa come o respiro do .campo-login)
e entra deslizando de leve. */
.aviso-campo-login {
margin: -0.35rem 0 0.7rem 0.2rem;
font-size: 0.82rem;
color: #b53a37;
animation: surgir-aviso-login 0.2s ease-out;
}
.aviso-campo-login[hidden] {
display: none;
}
@keyframes surgir-aviso-login {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.campo-login-olho {
display: flex;
align-items: center;
flex: 0 0 auto;
padding: 0 0.85rem;
border: 0;
background: none;
color: var(--up-texto-suave);
}
.campo-login-olho:hover {
color: var(--up-primaria);
}
.campo-login-olho:focus-visible {
outline: 2px solid var(--up-primaria-claro);
outline-offset: 2px;
border-radius: 4px;
}
/* Um olho de cada vez: `aria-pressed` ja diz qual estado e, entao o CSS
apenas segue o mesmo atributo em vez de uma classe paralela. */
.campo-login-olho .olho-aberto,
.campo-login-olho[aria-pressed="true"] .olho-fechado {
display: none;
}
.campo-login-olho[aria-pressed="true"] .olho-aberto {
display: block;
}
/* --- Manter conectado ---------------------------------------------------- */
.opcoes-login {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: 0.9rem 0 0.2rem;
font-size: 0.85rem;
}
.lembrar-login {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--up-texto);
}
.lembrar-login input {
width: 1rem;
height: 1rem;
accent-color: var(--up-primaria);
}
/* --- Botao ---------------------------------------------------------------- */
.botao-entrar {
display: block;
width: 100%;
margin-top: 1.1rem;
padding: 0.8rem 1rem;
border: 0;
border-radius: 0.55rem;
background-color: var(--up-primaria);
font-family: var(--up-fonte);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
transition: background-color 0.15s;
}
.botao-entrar:hover {
background-color: var(--up-primaria-escuro);
}
.botao-entrar:focus-visible {
outline: 2px solid var(--up-primaria-escuro);
outline-offset: 2px;
}
/* Enquanto o login.js espera a resposta: evita o duplo clique. */
.botao-entrar:disabled {
background-color: var(--up-primaria-claro);
}
@media (prefers-reduced-motion: reduce) {
.campo-login,
.botao-entrar {
transition: none;
}
.campo-login.tremer,
.aviso-campo-login {
animation: none;
}
}
/* --- Rodape: versao da build + direitos autorais -------------------------- */
/* Mora na terceira faixa da grade e encosta na base da janela (`align-self:
end`). Discreto de proposito: e assinatura e conferencia de versao, nao
informacao de uso. */
.rodape-login {
align-self: end;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.15rem 0.5rem;
margin-top: 1.5rem;
padding-top: 0.75rem;
color: var(--up-texto-suave);
font-size: 0.78rem;
line-height: 1.5;
text-align: center;
}
.rodape-login-versao {
font-weight: 600;
color: var(--up-cinza-chumbo);
}
/* Some junto com a quebra de linha: empilhado, o ponto separador vira sujeira
no meio da coluna. */
.rodape-login-separador {
color: var(--up-primaria-claro);
}
@media (max-width: 575.98px) {
.pagina-login {
padding: 1rem;
/* `fixed` custa caro em rolagem no iOS e nem sempre e respeitado */
background-attachment: scroll;
}
.login-logo {
height: 4.4rem;
margin-bottom: 1.75rem;
}
.cartao-login {
padding: 1.6rem 1.25rem 1.25rem;
}
.rodape-login {
flex-direction: column;
margin-top: 1.25rem;
font-size: 0.72rem;
}
.rodape-login-separador {
display: none;
}
}
/* ==========================================================================
Tela de login Conectsys (TESTE da marca nova, 04/10/2026)
So o login.html usa: escopo .lg. Duas aparencias na mesma marcacao,
trocadas pelo botao "Aparencia" (login.js -> data-aparencia):
a = Dividida: painel azul-marinho com a frase | cartao branco com o logo
c = Escuro: logo no topo, formulario a esquerda, elos grandes a direita
Reaproveita os componentes do bloco acima (.campo-login, avisos, olho,
.botao-entrar) e so troca a roupa deles aqui dentro.
========================================================================== */
/* Sora (SIL Open Font License), recortada para o latim e servida daqui: a CSP
so aceita fonte do proprio servidor (font-src self). Arquivo variavel:
um so cobre os pesos 400 a 700. */
@font-face {
font-family: "Sora";
src: url("/static/fonts/sora.woff") format("woff");
font-weight: 100 800;
font-display: swap;
}
.lg {
--lg-marinho: #0D1F3C;
--lg-noite: #0A1830;
--lg-azul: #1557B0;
--lg-laranja: #F5A04B;
--lg-fundo: #EEF3FA;
--lg-texto: #0D1F3C;
--lg-rotulo: #23365C;
--lg-suave: #46567A;
--lg-icone: #6B7A99;
--lg-borda: #D5DCE8;
position: relative;
box-sizing: border-box;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
background: var(--lg-fundo);
color: var(--lg-texto);
font-family: "Sora", var(--up-fonte);
}
.lg-elos {
position: absolute;
pointer-events: none;
}
/* --- Aparencia A: Dividida ------------------------------------------------ */
.lg-marca {
position: relative;
overflow: hidden;
flex: 1 1 520px;
min-width: 0;
box-sizing: border-box;
padding: 48px 56px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--lg-marinho);
color: #fff;
}
.lg-elos-marca {
right: -170px;
bottom: -150px;
width: 560px;
height: 560px;
opacity: 0.16;
}
.lg-marca-texto {
position: relative;
max-width: 460px;
display: flex;
flex-direction: column;
gap: 20px;
}
.lg-marca-titulo {
margin: 0;
font-size: 2.5rem;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.02em;
}
.lg-marca-apoio {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: #C3CDE0;
}
.lg-entrada {
position: relative;
overflow: hidden;
flex: 1 1 460px;
min-width: 0;
box-sizing: border-box;
padding: 48px 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
}
.lg-elos-fundo,
.lg-logo-escuro,
.lg-subtitulo {
display: none;
}
.lg .cartao-login {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 420px;
padding: 40px 40px 32px;
border-radius: 20px;
background: #fff;
box-shadow: 0 1px 2px rgba(13, 31, 60, 0.06), 0 24px 48px -16px rgba(13, 31, 60, 0.18);
}
.lg-logo-claro {
display: block;
height: 58px;
width: auto;
margin: 0 auto 26px;
}
.lg-divisa {
height: 1px;
margin: 0 -40px 22px;
border: 0;
background: #E6EBF3;
}
.lg-titulo {
margin: 0 0 18px;
font-size: 1.125rem;
font-weight: 600;
text-align: center;
color: var(--lg-rotulo);
}
.lg-rotulo {
display: block;
margin: 0 0 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--lg-rotulo);
}
.lg .campo-login {
height: 46px;
margin-bottom: 18px;
border: 1px solid var(--lg-borda);
border-radius: 10px;
background: #fff;
}
.lg .campo-login:focus-within {
border-color: var(--lg-azul);
background: #fff;
box-shadow: 0 0 0 3px rgba(21, 87, 176, 0.14);
}
.lg .campo-login-icone {
padding: 0 10px 0 14px;
color: var(--lg-icone);
}
.lg .campo-login:focus-within .campo-login-icone {
color: var(--lg-azul);
}
.lg .campo-login-entrada {
align-self: stretch;
padding: 0 14px 0 0;
font-family: inherit;
font-size: 0.9375rem;
color: var(--lg-texto);
}
.lg .campo-login-entrada::placeholder {
color: #7D8AA5;
}
.lg .campo-login-olho {
align-self: stretch;
padding: 0 14px;
color: var(--lg-icone);
}
.lg .campo-login-olho:hover {
color: var(--lg-azul);
}
.lg .aviso-campo-login {
margin: -12px 0 14px 2px;
}
.lg .opcoes-login {
margin: 0 0 22px;
font-size: 0.875rem;
}
.lg .lembrar-login {
gap: 10px;
color: var(--lg-rotulo);
cursor: pointer;
}
.lg .lembrar-login input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--lg-azul);
}
.lg .botao-entrar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 48px;
margin: 0;
padding: 0 16px;
border-radius: 10px;
background: var(--lg-marinho);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: #fff;
cursor: pointer;
}
.lg .botao-entrar:hover {
background: #17305A;
}
.lg .botao-entrar:focus-visible {
outline: 2px solid var(--lg-azul);
}
.lg .botao-entrar:disabled {
background: #4A5A78;
}
.lg-seta {
color: var(--lg-laranja);
}
.lg .rodape-login {
align-self: auto;
margin: 0;
padding: 0;
color: var(--lg-suave);
font-size: 0.75rem;
}
.lg .rodape-login-versao {
color: var(--lg-rotulo);
}
.lg .rodape-login-separador {
color: #9AA8C4;
}
/* Botao "Aparencia": discreto, no canto de baixo a esquerda. Escuro meio
transparente para ler igual sobre o painel marinho e sobre o fundo claro. */
.lg-aparencia {
position: fixed;
left: 14px;
bottom: 14px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(10, 24, 48, 0.62);
font-family: inherit;
font-size: 0.75rem;
color: #fff;
opacity: 0.7;
cursor: pointer;
transition: opacity 0.15s;
}
.lg-aparencia:hover,
.lg-aparencia:focus-visible {
opacity: 1;
}
.lg-aparencia:focus-visible {
outline: 2px solid var(--lg-laranja);
outline-offset: 2px;
}
.lg-aparencia[hidden] {
display: none;
}
/* --- Aparencia C: Escuro -------------------------------------------------- */
.lg[data-aparencia="c"] {
background: var(--lg-noite);
color: #fff;
}
.lg[data-aparencia="c"] .lg-marca,
.lg[data-aparencia="c"] .lg-logo-claro,
.lg[data-aparencia="c"] .lg-divisa,
.lg[data-aparencia="c"] .lg-seta {
display: none;
}
.lg[data-aparencia="c"] .lg-entrada {
flex: 1 1 100%;
align-items: flex-start;
justify-content: space-between;
/* embaixo sobra lugar para o botao Aparencia nao cobrir o rodape */
padding: 48px clamp(16px, 7vw, 104px) 64px;
}
.lg[data-aparencia="c"] .lg-elos-fundo {
display: block;
right: -240px;
top: 50%;
width: 900px;
height: 900px;
margin-top: -450px;
opacity: 0.9;
}
.lg[data-aparencia="c"] .lg-logo-escuro {
position: relative;
display: block;
height: 56px;
width: auto;
}
.lg[data-aparencia="c"] .cartao-login {
max-width: 380px;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.lg[data-aparencia="c"] .lg-titulo {
margin: 0 0 8px;
font-size: 2.125rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
text-align: left;
color: #fff;
}
.lg[data-aparencia="c"] .lg-subtitulo {
display: block;
margin: 0 0 24px;
font-size: 0.9375rem;
color: #C3CDE0;
}
.lg[data-aparencia="c"] .lg-rotulo,
.lg[data-aparencia="c"] .lembrar-login {
color: #C3CDE0;
}
.lg[data-aparencia="c"] .campo-login {
height: 48px;
border-color: #2A4472;
background: #12264A;
}
.lg[data-aparencia="c"] .campo-login:focus-within {
border-color: var(--lg-laranja);
background: #12264A;
box-shadow: 0 0 0 3px rgba(245, 160, 75, 0.16);
}
.lg[data-aparencia="c"] .campo-login-icone,
.lg[data-aparencia="c"] .campo-login-olho {
color: #9AA8C4;
}
.lg[data-aparencia="c"] .campo-login:focus-within .campo-login-icone,
.lg[data-aparencia="c"] .campo-login-olho:hover {
color: var(--lg-laranja);
}
.lg[data-aparencia="c"] .campo-login-entrada {
color: #fff;
}
.lg[data-aparencia="c"] .campo-login-entrada::placeholder {
color: #8796B3;
}
.lg[data-aparencia="c"] .campo-login-entrada:-webkit-autofill,
.lg[data-aparencia="c"] .campo-login-entrada:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 40rem #12264A inset;
-webkit-text-fill-color: #fff;
}
.lg[data-aparencia="c"] .campo-login.invalido,
.lg[data-aparencia="c"] .campo-login.invalido:focus-within {
border-color: #E0898B;
background: #12264A;
}
.lg[data-aparencia="c"] .aviso-campo-login {
color: #FFA9A6;
}
.lg[data-aparencia="c"] .lembrar-login input {
accent-color: var(--lg-laranja);
}
.lg[data-aparencia="c"] .botao-entrar {
height: 50px;
background: var(--lg-laranja);
font-weight: 700;
color: var(--lg-noite);
}
.lg[data-aparencia="c"] .botao-entrar:hover {
background: #F7B26C;
}
.lg[data-aparencia="c"] .botao-entrar:disabled {
background: #B98A5C;
}
.lg[data-aparencia="c"] .botao-entrar:focus-visible {
outline-color: #fff;
}
.lg[data-aparencia="c"] .rodape-login {
position: relative;
justify-content: flex-start;
text-align: left;
color: #9AA8C4;
}
.lg[data-aparencia="c"] .rodape-login-versao {
color: #C3CDE0;
}
.lg[data-aparencia="c"] .rodape-login-separador {
color: #4A6390;
}
/* --- Telas estreitas ------------------------------------------------------ */
@media (max-width: 900px) {
/* os elos grandes passariam por tras do formulario: so um eco ao fundo */
.lg[data-aparencia="c"] .lg-elos-fundo {
opacity: 0.22;
}
}
@media (max-width: 575.98px) {
.lg-marca {
padding: 32px 24px;
}
.lg-marca-titulo {
font-size: 1.75rem;
}
.lg-entrada {
padding: 32px 16px 64px;
}
.lg .cartao-login {
padding: 28px 22px 24px;
}
.lg-divisa {
margin: 0 -22px 20px;
}
.lg-logo-claro {
height: 48px;
}
.lg[data-aparencia="c"] .lg-entrada {
padding: 32px 16px 64px;
gap: 32px;
}
.lg[data-aparencia="c"] .lg-titulo {
font-size: 1.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.lg-aparencia {
transition: none;
}
}
/* ==========================================================================
Casca do sistema: cabecalho + barra de modulos + area de trabalho
========================================================================== */
.app-uniplus {
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
/* So a cor lisa: o papel de parede (papel-parede-marca.svg) fica na
.area-trabalho, para o logo centralizar na area e nao na janela inteira.
Ate 04/10/2026 era o fundo-login.svg (setas) aqui, com `cover` + `fixed`;
voltar = repor o background-image dele. */
background-color: var(--up-papel-parede);
}
/* --- Cabecalho (app-header + navbar-white do sistema) --------------------- */
/* Casca nova (Modelo A, 02/10/2026): a marca a esquerda e, a direita, os
atalhos + o cartao do usuario + sair. A saudacao centralizada saiu. */
.topo {
flex: 0 0 var(--up-header-altura);
height: var(--up-header-altura);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background-color: var(--up-superficie);
border-bottom: 1px solid var(--up-borda-suave);
padding: 0 1rem 0 1.4rem;
}
.topo-marca {
display: flex;
align-items: center;
text-decoration: none;
}
/* no cabecalho a logo cede altura para o nome do sistema caber embaixo */
.topo-marca .marca {
height: 1.55rem;
}
/* O cartao do usuario: iniciais num circulo da marca, o nome em cima e a
empresa embaixo. Sao dois botoes (menu do usuario / troca de filial),
cada um com o seu hover; o cartao e so o fundo em volta. */
.topo-usuario {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
max-width: 24rem;
height: 40px;
margin: 0;
padding: 0 0.45rem 0 0.25rem;
border-radius: 12px;
background-color: var(--up-papel-parede);
color: var(--up-texto);
overflow: hidden;
white-space: nowrap;
}
.topo-avatar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--up-primaria);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.topo-usuario-textos {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
line-height: 1.15;
}
.topo-nome {
font-size: 13px;
font-weight: 700;
color: var(--up-marca-escura);
}
/* Nome clicavel: abre o menu do usuario (Meus Dados, Minha Senha, Minhas
Notificacoes -- base.html + js/menu_usuario.js). Mesmo desenho do botao da
filial logo ao lado: sem moldura, so o fundo claro no hover. */
.topo-nome-menu {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0 0.3rem;
border: 0;
border-radius: 4px;
background: none;
font: inherit;
font-size: 13px;
font-weight: 700;
color: var(--up-marca-escura);
}
.topo-nome-menu:hover,
.topo-nome-menu:focus-visible,
.topo-nome-menu[aria-expanded="true"] {
background-color: var(--up-primaria-fundo);
outline: none;
}
/* O painel reaproveita o .menu-opcoes (itens, hover, "Em breve") numa coluna
so. `fixed` e nao `absolute`: fica fora do cabecalho, cujo .topo-usuario
corta o que passa da borda -- o menu_usuario.js o poe sob o nome. */
.menu-opcoes.menu-usuario {
position: fixed;
top: 0;
right: auto;
grid-template-columns: minmax(13rem, auto);
gap: 0.15rem;
padding: 0.4rem;
z-index: 1060;
}
/* O aceno (๐) da saudacao antiga saiu com ela (02/10/2026). */
/* --- Minhas Notificacoes ---------------------------------------------------- */
/* Contador de pendencias: pilula vermelha com o sino, dentro do botao do nome
(e so o numero, no item do menu). Fica aceso ate o problema ser resolvido
-- abrir a lista nao apaga (menu_usuario.js). Sem pendencia, `hidden`. */
.contador-notificacoes {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.15rem;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.35rem;
border-radius: 999px;
background-color: var(--up-pendencia);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.contador-notificacoes[hidden] {
display: none;
}
/* no menu, o numero encosta na direita do item */
.contador-notificacoes-item {
margin-left: auto;
}
/* A lista: um cartao por problema, no desenho do .cartao-agente (Cadastro de
Impressoras) -- faixa colorida a esquerda + circulo com o icone. Largura
contida: e texto corrido, e numa tela larga a linha ficaria longa demais
para ler. */
.lista-notificacoes {
max-width: 62rem;
}
.cartao-notificacao {
display: flex;
gap: 0.9rem;
margin-bottom: 0.75rem;
padding: 0.85rem 1rem;
border: 1px solid var(--up-borda-suave);
border-left: 4px solid var(--up-pendencia);
border-radius: 6px;
background-color: #fff;
}
.cartao-notificacao.resolvida {
border-left-color: var(--up-resolvida);
}
.cartao-notificacao-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
flex: 0 0 auto;
border-radius: 50%;
background-color: var(--up-pendencia-fundo);
color: var(--up-pendencia);
}
.resolvida .cartao-notificacao-icone {
background-color: var(--up-resolvida-fundo);
color: var(--up-resolvida);
}
.cartao-notificacao-corpo {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.cartao-notificacao-topo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.cartao-notificacao-titulo {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--up-marca-escura);
}
.cartao-notificacao-quando,
.cartao-notificacao-nota {
margin: 0;
font-size: 12px;
color: var(--up-texto-suave);
}
.cartao-notificacao-motivo {
margin: 0;
font-size: 13.5px;
color: var(--up-texto);
}
.cartao-notificacao-detalhes {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 1.5rem;
margin: 0;
font-size: 12px;
}
.cartao-notificacao-detalhes div {
display: flex;
gap: 0.35rem;
}
.cartao-notificacao-detalhes dt {
font-weight: 700;
color: var(--up-cinza-chumbo);
}
.cartao-notificacao-detalhes dd {
margin: 0;
}
/* a orientacao e o que o operador vai seguir: bloco discreto, mas destacado
do texto do motivo */
.cartao-notificacao-onde {
margin: 0.15rem 0 0;
padding: 0.45rem 0.65rem;
border-radius: 4px;
background-color: var(--up-cinza-frio);
font-size: 12.5px;
color: var(--up-texto);
}
.cartao-notificacao-acoes {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.2rem;
}
/* mesma altura dos botoes do cartao do Cadastro de Impressoras */
.cartao-notificacao-acoes .botao-acao {
height: 28px;
padding: 0 0.85rem;
}
.cartao-notificacao-resolucao {
margin: 0;
font-size: 12.5px;
color: var(--up-texto);
}
.etiqueta-status.notificacao-pendente {
background-color: var(--up-pendencia-fundo);
color: var(--up-pendencia);
}
.etiqueta-status.notificacao-resolvida {
background-color: var(--up-resolvida-fundo);
color: var(--up-resolvida);
}
.bloco-titulo-resolvidas {
margin-top: 1.4rem;
}
/* --- Filial de trabalho no cabecalho (02/10/2026) ---------------------------- */
/* Modelo A do canvas https://claude.ai/artifact/5C81UtcCSmDNDUM9pt2gkm. Antes a
filial era a linha miuda embaixo do nome do usuario (.topo-local) e abria o
modal "Local de trabalho" (Empresa + Filial + Gravar): o cliente achou
escondido. Agora e um cartao proprio ao lado da marca -- rotulo "Filial de
trabalho", o nome e, com o controle por local ligado, o local de estoque --
e o painel abaixo troca num clique. */
.topo-inicio {
display: flex;
align-items: center;
gap: 1.4rem;
min-width: 0;
}
.topo-filial {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
height: 40px;
padding: 0 0.7rem 0 0.3rem;
border: 1.5px solid var(--up-borda);
border-radius: 12px;
background-color: var(--up-superficie);
font-family: var(--up-fonte);
text-align: left;
transition: border-color 0.15s ease;
}
.topo-filial:hover,
.topo-filial:focus-visible,
.topo-filial.aberto {
border-color: var(--up-primaria);
outline: none;
}
.topo-filial-icone {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
background-color: var(--up-primaria-fundo);
color: var(--up-primaria);
}
.topo-filial-textos {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.15;
}
.topo-filial-rotulo {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--up-texto-suave);
}
.topo-filial-linha {
display: flex;
align-items: baseline;
gap: 0.45rem;
min-width: 0;
white-space: nowrap;
}
.topo-filial-nome {
overflow: hidden;
text-overflow: ellipsis;
font-size: 13.5px;
font-weight: 700;
color: var(--up-marca-escura);
}
/* local de estoque, separado do nome por um risco */
.topo-filial-local {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding-left: 0.45rem;
border-left: 1px solid var(--up-borda);
font-size: 12px;
font-weight: 600;
color: var(--up-cinza-chumbo);
}
.topo-filial-cnpj {
font-size: 11.5px;
color: var(--up-texto-suave);
}
.topo-filial-local[hidden],
.topo-filial-cnpj[hidden] {
display: none;
}
.topo-filial-trocar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: 0.2rem;
padding-left: 0.6rem;
border-left: 1px solid var(--up-borda-suave);
font-size: 12px;
font-weight: 700;
color: var(--up-primaria);
}
/* o cartao do usuario agora e so o nome: "Minha conta" embaixo, no lugar da
filial que foi para o cartao proprio */
.topo-nome-menu {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.topo-nome-linha {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.topo-usuario-sub {
font-size: 11px;
font-weight: 600;
color: var(--up-texto-suave);
}
@media (max-width: 991.98px) {
/* em tela estreita o cartao cede: some o "Trocar" e o nome encurta */
.topo-filial-trocar {
display: none;
}
.topo-filial-nome {
max-width: 10rem;
}
}
/* --- Busca rapida de telas (04/10/2026) ------------------------------------- */
/* Modelo A do canvas https://claude.ai/artifact/NmcYdJWccshmHRRZXzKMJT. O
sistema cresceu e achar a tela abrindo o painel de cada modulo ficou lento:
o campo fica ao lado do cartao da filial e a lista suspensa sugere as telas
desde a primeira letra (partials/busca_rapida.html + js/busca_rapida.js).
Cada linha leva a classe mod-* do modulo da tela, entao o icone e a pilula
"Modulo > Grupo" saem na cor do modulo (--mod-cor/--mod-fundo). */
/* Quando falta largura no topo, quem encolhe primeiro e a busca (fator 50),
ate os 12rem; so depois o cartao da filial. Com o fator 1 os dois
dividiam o aperto e o nome da filial virava "B." a 1366px. */
.busca-rapida {
position: relative; /* ancora a lista suspensa */
flex: 0 50 22.5rem;
min-width: 12rem;
}
/* A largura natural do .topo-inicio vem do tamanho padrao do (bem
menor que os 22.5rem), entao ele nascia estreito e espremia a busca e a
filial mesmo com o topo sobrando. Crescendo ate o .topo-acoes, os itens
ficam no tamanho deles; o cartao do usuario continua na ponta direita. */
.topo-inicio {
flex: 1 1 auto;
}
/* mesmo com a busca cedendo quase todo o aperto, a fracao que sobrava para
a filial (1px a 1100px) ja punha reticencias no nome ("Bike Sp...") */
@media (min-width: 992px) {
.topo-filial {
flex-shrink: 0;
}
}
.busca-rapida-lupa {
position: absolute;
top: 50%;
left: 0.75rem;
display: flex;
transform: translateY(-50%);
color: var(--up-texto-suave);
pointer-events: none;
}
.busca-rapida-campo {
width: 100%;
height: 40px; /* a altura do cartao da filial, lado a lado */
padding: 0 4.4rem 0 2.4rem;
border: 1.5px solid var(--up-borda);
border-radius: 12px;
background-color: var(--up-cinza-frio);
font-family: var(--up-fonte);
font-size: 14px;
color: var(--up-texto);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.busca-rapida-campo::placeholder {
color: var(--up-texto-suave);
}
.busca-rapida-campo:hover {
border-color: var(--up-primaria-claro);
}
.busca-rapida-campo:focus {
border-color: var(--up-primaria);
background-color: var(--up-superficie);
box-shadow: 0 0 0 3px var(--up-primaria-fundo);
}
/* "Ctrl K" no canto: some quando ha texto, para nao brigar com ele */
.busca-rapida-atalho {
position: absolute;
top: 50%;
right: 0.6rem;
display: flex;
gap: 3px;
transform: translateY(-50%);
pointer-events: none;
}
.busca-rapida-campo:not(:placeholder-shown) ~ .busca-rapida-atalho {
display: none;
}
/* ...e o espaco reservado a ele (4.4rem) vai para o texto: com o atalho
escondido, sobrava uma faixa vazia a direita e o texto longo era cortado
antes da hora (05/10/2026, pedido do cliente) */
.busca-rapida-campo:not(:placeholder-shown) {
padding-right: 0.75rem;
}
.busca-rapida-atalho kbd {
padding: 1px 5px;
border: 1px solid var(--up-borda-suave);
border-radius: 5px;
background-color: var(--up-superficie);
box-shadow: none;
font-family: var(--up-fonte);
font-size: 11px;
font-weight: 700;
color: var(--up-cinza-chumbo);
}
/* A lista desce por cima da faixa escura dos modulos (z-index 1050) */
.busca-rapida-painel {
position: absolute;
top: calc(100% + 7px);
left: 0;
z-index: 1060;
width: 31rem;
max-width: calc(100vw - 24px);
border: 1px solid var(--up-borda-suave);
border-radius: 12px;
background-color: var(--up-superficie);
box-shadow: var(--up-sombra-painel-modulo);
overflow: hidden;
}
.busca-rapida-painel[hidden] {
display: none;
}
.busca-rapida-cabeca {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0.9rem 0.35rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--up-texto-suave);
}
.busca-rapida-contagem {
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.busca-rapida-lista {
display: flex;
flex-direction: column;
max-height: 24rem;
margin: 0;
padding: 0 0.4rem 0.4rem;
list-style: none;
overflow-y: auto;
}
.busca-rapida-item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.45rem 0.5rem;
border-radius: 9px;
cursor: pointer;
}
.busca-rapida-item[aria-selected="true"] {
background-color: var(--up-primaria-fundo);
box-shadow: inset 0 0 0 1.5px var(--up-primaria-claro);
}
/* o icone e o mesmo do item no menu, no quadradinho do modulo */
.busca-rapida-icone {
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background-color: var(--mod-fundo, var(--up-primaria-fundo));
color: var(--mod-cor, var(--up-primaria));
}
.busca-rapida-textos {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.busca-rapida-nome,
.busca-rapida-desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.busca-rapida-nome {
font-size: 14px;
color: var(--up-texto);
}
.busca-rapida-desc {
font-size: 12px;
color: var(--up-texto-suave);
}
.busca-rapida-marca {
padding: 0;
border-radius: 3px;
background-color: var(--up-busca-realce);
font-weight: 700;
color: var(--up-marca-escura);
}
.busca-rapida-caminho {
flex: 0 0 auto;
padding: 3px 9px;
border-radius: 999px;
background-color: var(--mod-fundo, var(--up-cinza-frio));
font-size: 11.5px;
font-weight: 700;
color: var(--mod-cor, var(--up-cinza-chumbo));
white-space: nowrap;
}
.busca-rapida-vazio,
.busca-rapida-dica {
margin: 0 0.75rem 0.65rem;
font-size: 12.5px;
color: var(--up-cinza-chumbo);
}
.busca-rapida-dica {
padding: 0.5rem 0.65rem;
border-radius: 8px;
background-color: var(--up-cinza-frio);
}
.busca-rapida-dica b {
color: var(--up-marca-escura);
}
.busca-rapida-vazio[hidden],
.busca-rapida-dica[hidden],
.busca-rapida-cabeca [hidden] {
display: none;
}
.busca-rapida-rodape {
display: flex;
gap: 0.9rem;
padding: 0.5rem 0.9rem;
border-top: 1px solid var(--up-borda-suave);
background-color: var(--up-cinza-frio);
font-size: 11.5px;
color: var(--up-texto-suave);
}
.busca-rapida-rodape b {
color: var(--up-cinza-chumbo);
}
/* Preferencia escolhida na busca (05/10/2026): a linha da grade das Opcoes
do modulo, ou a caixa do campo, acende no amarelo do realce e apaga
devagar. Na linha, a cor vai nas celulas (o fundo delas cobre o do tr). */
.busca-rapida-destaque:not(tr) {
border-radius: 8px;
animation: busca-rapida-destaque 2.6s ease-out;
}
tr.busca-rapida-destaque > td {
animation: busca-rapida-destaque-celula 2.6s ease-out;
}
@keyframes busca-rapida-destaque {
0%,
45% {
background-color: var(--up-busca-realce);
box-shadow: 0 0 0 6px var(--up-busca-realce);
}
100% {
background-color: transparent;
box-shadow: 0 0 0 6px transparent;
}
}
@keyframes busca-rapida-destaque-celula {
0%,
45% {
background-color: var(--up-busca-realce);
}
}
@media (max-width: 1199.98px) {
/* janela estreita: o campo encolhe e o "Ctrl K" sai */
.busca-rapida-atalho {
display: none;
}
.busca-rapida-campo {
padding-right: 0.75rem;
}
}
/* --- Painel "Onde voce vai trabalhar?" ------------------------------------- */
/* Abre embaixo do cartao (posicao no local_trabalho.js). A lista vem agrupada
por empresa; cada filial e um botao (radio + iniciais + nome + codigo/CNPJ)
e, com o controle por local, os locais de estoque dela em pilulas. */
.painel-filial-veu {
position: fixed;
inset: 0;
z-index: 1055;
background-color: var(--up-veu-filial);
}
.painel-filial-veu[hidden],
.painel-filial[hidden],
.aviso-filial[hidden] {
display: none;
}
.painel-filial {
position: fixed;
z-index: 1060;
display: flex;
flex-direction: column;
width: 34rem;
max-width: calc(100vw - 16px);
max-height: calc(100vh - var(--up-header-altura) - 24px);
border: 1px solid var(--up-borda-suave);
border-radius: 16px;
background-color: var(--up-superficie);
box-shadow: var(--up-sombra-painel-modulo);
overflow: hidden;
}
.painel-filial-topo {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.9rem 1rem 0.65rem;
}
.painel-filial-titulo {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--up-marca-escura);
}
.painel-filial-texto {
margin: 0;
font-size: 12px;
color: var(--up-texto-suave);
}
.painel-filial-busca {
position: relative;
display: flex;
align-items: center;
margin-top: 0.55rem;
color: var(--up-texto-suave);
}
.painel-filial-busca[hidden] {
display: none;
}
.painel-filial-busca .icone {
position: absolute;
left: 0.7rem;
}
.painel-filial-busca input {
width: 100%;
height: 34px;
padding: 0 0.75rem 0 2.1rem;
border: 1.5px solid var(--up-borda);
border-radius: 10px;
font-family: var(--up-fonte);
font-size: 13px;
color: var(--up-marca-escura);
}
.painel-filial-busca input:focus {
outline: none;
border-color: var(--up-primaria);
box-shadow: 0 0 0 3px var(--up-primaria-fundo);
}
.painel-filial-lista {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0 0.6rem 0.6rem;
}
.painel-filial-grupo + .painel-filial-grupo {
margin-top: 0.35rem;
}
.painel-filial-empresa {
margin: 0;
padding: 0.45rem 0.5rem 0.25rem;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--up-texto-suave);
}
.painel-filial-item {
border-radius: 12px;
}
.painel-filial-item.atual {
background-color: var(--up-papel-parede);
}
.painel-filial-escolher {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.55rem 0.6rem;
border: 0;
border-radius: 12px;
background: none;
font-family: var(--up-fonte);
text-align: left;
}
.painel-filial-escolher:hover,
.painel-filial-escolher:focus-visible {
background-color: var(--up-papel-parede);
outline: none;
}
.painel-filial-radio {
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 2px solid var(--up-borda);
border-radius: 50%;
box-sizing: border-box;
}
.atual .painel-filial-radio {
border-color: var(--up-primaria);
box-shadow: inset 0 0 0 3px var(--up-superficie), inset 0 0 0 8px var(--up-primaria);
}
/* As iniciais ganham um tom por posicao na lista, so para as filiais se
distinguirem de relance. Reaproveitam as cores dos modulos: a filial nao
tem cor propria no Uniplus. */
.painel-filial-avatar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
}
.pf-cor-0 { background-color: var(--up-mod-cadastros-fundo); color: var(--up-mod-cadastros); }
.pf-cor-1 { background-color: var(--up-mod-vendas-fundo); color: var(--up-mod-vendas); }
.pf-cor-2 { background-color: var(--up-mod-catalogo-fundo); color: var(--up-mod-catalogo); }
.pf-cor-3 { background-color: var(--up-mod-expedicao-fundo); color: var(--up-mod-expedicao); }
.pf-cor-4 { background-color: var(--up-mod-financeiro-fundo); color: var(--up-mod-financeiro); }
.pf-cor-5 { background-color: var(--up-mod-fiscal-fundo); color: var(--up-mod-fiscal); }
.painel-filial-dados {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.painel-filial-nome {
font-size: 13.5px;
font-weight: 700;
color: var(--up-marca-escura);
}
.painel-filial-doc {
font-size: 12px;
color: var(--up-texto-suave);
}
.painel-filial-atual {
flex: 0 0 auto;
padding: 2px 9px;
border-radius: 999px;
background-color: var(--up-primaria-fundo);
color: var(--up-primaria);
font-size: 11px;
font-weight: 700;
}
/* os locais de estoque da filial, alinhados com o nome (depois do radio e
das iniciais) */
.painel-filial-locais {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
padding: 0 0.6rem 0.55rem 4.45rem;
}
.painel-filial-locais-rotulo {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 11px;
font-weight: 700;
color: var(--up-texto-suave);
}
.painel-filial-local {
height: 26px;
padding: 0 0.65rem;
border: 1px solid var(--up-borda);
border-radius: 999px;
background-color: var(--up-superficie);
font-family: var(--up-fonte);
font-size: 11.5px;
font-weight: 700;
color: var(--up-cinza-chumbo);
}
.painel-filial-local:hover,
.painel-filial-local:focus-visible {
border-color: var(--up-primaria);
color: var(--up-primaria);
outline: none;
}
.painel-filial-local.marcado {
border-color: var(--up-primaria);
background-color: var(--up-primaria);
color: #fff;
}
.painel-filial-sem-local,
.painel-filial-vazio {
margin: 0;
padding: 0 0.6rem 0.55rem 4.45rem;
font-size: 11.5px;
color: var(--up-texto-suave);
}
.painel-filial-vazio {
padding: 0.75rem;
font-size: 12.5px;
}
.painel-filial-rodape {
margin: 0;
padding: 0.55rem 1rem;
border-top: 1px solid var(--up-borda-suave);
font-size: 11.5px;
color: var(--up-texto-suave);
}
/* Confirmacao da troca: pilula escura no pe da janela, some em 5s */
.aviso-filial {
position: fixed;
left: 50%;
bottom: 28px;
z-index: 1070;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 1rem 0.6rem 0.75rem;
border-radius: 14px;
background-color: var(--up-marca-escura);
color: #fff;
font-size: 13.5px;
white-space: nowrap;
box-shadow: var(--up-sombra-painel-modulo);
transform: translateX(-50%);
}
.aviso-filial-icone {
display: inline-flex;
color: var(--up-mod-financeiro-fundo);
}
/* --- Ferramentas > Modelo de impressao ------------------------------------ */
.texto-apoio {
margin-bottom: 1.1rem;
font-size: 13px;
color: var(--up-texto-suave);
}
.bloco-modelos {
margin-bottom: 1.4rem;
}
/* usado tambem em Painel Admin > Vendas ("Situacao padrao das listagens") */
.bloco-modelos-topo {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.bloco-modelos-topo .bloco-titulo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
}
/* --- Ferramentas > Modelo de Impressao ------------------------------------ */
/* texto de apoio na mesma linha do Incluir, empurrando o botao para a direita */
.barra-apoio {
flex: 1 1 auto;
margin: 0;
font-size: 12.5px;
}
.bloco-modelos-titulo {
display: flex;
align-items: center;
gap: 0.4rem;
}
.bloco-modelos-contagem {
min-width: 1.35rem;
padding: 0 0.4rem;
border-radius: 10px;
background-color: #e3eef8;
font-size: 11px;
line-height: 1.35rem;
text-align: center;
color: var(--up-azul-royal);
}
/* Layout fixo +
: as colunas das duas tabelas (Pedido e Orcamento)
ficam na mesma posicao, e cabecalho e conteudo alinham pelo mesmo lado. */
.tabela-modelos {
width: 100%;
table-layout: fixed;
}
.tabela-modelos .col-arquivos { width: 7rem; }
.tabela-modelos .col-situacao { width: 9rem; }
/* dois botoes de 26px + o espaco entre eles + o respiro da celula */
.tabela-modelos .col-acao { width: 6rem; }
.tabela-modelos .centro {
text-align: center;
}
.tabela-modelos td.destaque {
overflow: hidden;
text-overflow: ellipsis;
}
.tabela-modelos td {
vertical-align: middle;
}
.modelos-vazio {
margin: 0;
padding: 0.85rem 1rem;
border: 1px dashed var(--up-borda);
border-radius: 4px;
font-size: 12.5px;
color: var(--up-texto-suave);
}
/* --- Assistente de inclusao ------------------------------------------------ */
/* overflow-x: a etapa entra deslizando 10px da direita, e sem isto o dialogo
ganhava uma barra de rolagem horizontal durante a animacao */
.dialogo-assistente {
width: min(36rem, calc(100vw - 2rem));
overflow-x: hidden;
}
.assistente-passos {
display: flex;
gap: 0.25rem;
margin: 0;
padding: 0.75rem 1.25rem;
list-style: none;
border-bottom: 1px solid var(--up-borda-suave);
background-color: var(--up-cinza-frio);
}
.assistente-passo {
flex: 1 1 0;
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 12px;
font-weight: 600;
color: var(--up-texto-suave);
}
.assistente-passo span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4rem;
height: 1.4rem;
border: 1.5px solid var(--up-borda);
border-radius: 50%;
background-color: #fff;
font-size: 11px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.assistente-passo.atual {
color: var(--up-texto);
}
.assistente-passo.atual span {
border-color: var(--up-azul-royal);
background-color: var(--up-azul-royal);
color: #fff;
}
.assistente-passo.feito span {
border-color: #3d7a42;
background-color: #e3f1e4;
color: #3d7a42;
}
.assistente-corpo {
margin: 0;
}
.assistente-etapa {
min-height: 13.5rem;
margin: 0;
padding: 1.25rem 1.25rem 0.75rem;
border: 0;
animation: assistente-entrada 0.2s ease-out;
}
.assistente-etapa[hidden] {
display: none;
}
@keyframes assistente-entrada {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.assistente-etapa {
animation: none;
}
}
/*