:root { /* ---------------------------------------------------------------- Paleta da marca Swift: turquesa da logo + branco. --marca é a cor exata da logo (#00c2cb). Texto branco sobre ela rende contraste 2,2:1 — legível em peça grande e negrito (como a logo), ilegível em texto miúdo. Por isso os elementos com texto branco pequeno (botões, abas) usam --acento, o mesmo turquesa escurecido até passar de 4,5:1, e o texto turquesa sobre fundo branco usa --azul pelo mesmo motivo, ao contrário. ---------------------------------------------------------------- */ --marca: #00c2cb; --azul: #007a85; --azul-escuro: #00565f; /* fundo sólido com texto branco (botões, abas ativas) — não inverte no modo escuro */ --acento: #00838f; --acento-escuro: #005f68; --verde: #0f7a4f; --ambar: #a35b00; --vermelho: #b3261e; /* SÓLIDOS: as mesmas cores, para quando são FUNDO com texto branco por cima. Não mudam no tema escuro, e é essa a razão de existirem — as três acima clareiam lá para ficarem legíveis como TEXTO, e clarear um fundo que carrega texto branco tornaria o texto ilegível. Um token para cada papel. Usados por `.nav-lateral .contador`, `.chips-filtro button.urgente.ativo` e `.etiqueta-atencao`. */ --vermelho-solido: #b3261e; --ambar-solido: #a35b00; /* Neutros com leve viés ciano: cinza puro ao lado do turquesa parece sujo. A diferença é sutil e faz a paleta soar de uma peça só. */ --fundo: #f5f8f9; --cartao: #ffffff; --borda: #e2e9eb; --texto: #101a1c; --texto-suave: #5a6b6e; /* ---------------------------------------------------------------- Lateral em petróleo, com tokens próprios: ela não acompanha o tema de quem usa. Antes era o turquesa cheio da logo — cor saturada em 232px de área o dia inteiro cansa a vista e disputa com o conteúdo. A marca rende mais aparecendo em pouca área: selo, item ativo, ação principal. ---------------------------------------------------------------- */ --lateral-fundo: #0e2a2e; --lateral-borda: #16383d; --lateral-texto: #a8c2c5; --lateral-titulo: #ffffff; --lateral-rotulo: #85a4a8; /* claro o bastante para passar de 4,5:1 sobre o petróleo */ --lateral-hover: rgba(255, 255, 255, 0.06); --lateral-ativo-bg: rgba(0, 194, 203, 0.18); --lateral-ativo-tx: #7fe3ea; --raio: 12px; --sombra: 0 1px 2px rgba(16, 26, 28, 0.05); --sombra-media: 0 4px 16px rgba(16, 26, 28, 0.10); } /* ------------------------------------------------------------------ TEMA ESCURO — três estados, não dois (07/09/2026) Antes só existia `prefers-color-scheme`, e quem quisesse o outro tema dependia de mudar o sistema inteiro. Com o botão no cabeçalho são três: sem `data-tema` segue o sistema (o padrão, e o que já era) data-tema="escuro" escuro, mesmo com o sistema claro data-tema="claro" claro, mesmo com o sistema escuro O `:not([data-tema="claro"])` na media query é o que faz a escolha explícita ganhar do sistema — sem ele, quem pedisse claro num sistema escuro continuaria no escuro. O atributo é escrito por `config.js`, que roda SEM defer no : se fosse no auth.js (defer) a página pintaria clara e viraria escura depois. AS TRÊS CORES DE SINAL CLAREIAM AQUI. Medido sobre o cartão escuro (#131e21), o que havia antes não passava nem do mínimo de 3,0 para negrito — e ninguém notou enquanto elas viviam dentro de pílulas com fundo próprio: vermelho #b3261e 2,60 -> #e06c66 5,27 verde #0f7a4f 3,17 -> #4caf7d 6,26 âmbar #a35b00 3,28 -> #d99a3c 6,99 Os `--*-solido` NÃO entram aqui, de propósito: eles são fundo com texto branco por cima, e clareá-los faria o branco sumir. ------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --azul: #4dd3de; --azul-escuro: #7fe3ea; --fundo: #0c1416; --cartao: #131e21; --borda: #24363a; --texto: #e6eef0; --texto-suave: #93a5a8; --verde: #4caf7d; --ambar: #d99a3c; --vermelho: #e06c66; --sombra: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.5); } } :root[data-tema="escuro"] { --azul: #4dd3de; --azul-escuro: #7fe3ea; --fundo: #0c1416; --cartao: #131e21; --borda: #24363a; --texto: #e6eef0; --texto-suave: #93a5a8; --verde: #4caf7d; --ambar: #d99a3c; --vermelho: #e06c66; --sombra: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; } /* dígitos de largura fixa: sem isso as colunas de dinheiro dançam */ .num, .valor, .alerta-numero, td.num, .rotulo-meta { font-variant-numeric: tabular-nums; } [x-cloak] { display: none !important; } .tela-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .cartao-login { width: 100%; max-width: 380px; padding: 32px; } .cartao-login h1 { font-size: 1.3rem; margin: 0 0 4px; } .cartao-login p.sub { color: var(--texto-suave); margin: 0 0 24px; font-size: 0.9rem; } label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--texto-suave); } input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 0.95rem; background: var(--cartao); color: var(--texto); font-family: inherit; } input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; } .campo { margin-bottom: 16px; } button { font-family: inherit; font-size: 0.95rem; font-weight: 600; border-radius: 8px; border: none; padding: 10px 18px; cursor: pointer; } .botao-primario { background: var(--acento); color: white; width: 100%; } .botao-primario:hover { background: var(--acento-escuro); } /* Desabilitado quase sempre é FALTA DE CONDIÇÃO, não processamento — e era `cursor: wait`. A rodinha de "aguarde" fez o gestor esperar um botão que esperava por ele: *"o botão de conciliar não é clicável, coloco o mouse em cima e fica só girando"* (17/09/2026). Medido nas 20 telas: dos `:disabled`, 43 são `!ehAdmin` — permissão, que nunca vai terminar de carregar —, mais os de formulário incompleto e os mistos (`!fecha || conciliando`), onde o cursor não consegue distinguir os dois motivos. Quem está de fato processando já avisa no próprio texto ("Conciliando…", "Salvando…", "Entrando…"), que é sinal melhor que o cursor. `not-allowed` é o que o resto do sistema já usa: `.botao-perigo:disabled`, `input:disabled` e a caixa travada do check-in. Este era o único fora. */ .botao-primario:disabled { opacity: 0.6; cursor: not-allowed; } .botao-secundario { background: transparent; border: 1px solid var(--borda); color: var(--texto); } .botao-link { background: none; border: none; color: var(--azul); padding: 0; font-weight: 600; } .erro { color: var(--vermelho); font-size: 0.85rem; margin-top: 4px; } /* Nota curta sob um campo. A variante "atencao" é âmbar pela mesma razão do .aviso-data: não é erro, é uma pergunta — o telefone de 10 dígitos pode estar certo (fixo) e travar o lançamento por isso seria errado. */ .dica-campo { font-size: 0.82rem; color: var(--texto-suave); line-height: 1.45; margin-top: 5px; } .dica-campo.atencao { color: var(--ambar); } /* Caixa "salvar no cadastro". Fica dentro do .campo, então precisa desfazer a largura total que o formulário dá a todo input. */ .caixa-cadastro { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: normal; } .caixa-cadastro input[type="checkbox"] { width: auto; margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; } .aviso-login { background: rgba(179, 38, 30, 0.1); color: var(--vermelho); padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 16px; } /* ---------------------------------------------------------------- */ /* Navegação lateral */ /* ---------------------------------------------------------------- */ .layout { display: flex; min-height: 100vh; align-items: flex-start; } .sidebar { width: 236px; flex-shrink: 0; /* height, não min-height: com min-height a barra crescia junto com o menu e, grudada no topo pelo sticky, o que passava da altura da tela ficava inalcançável — foi o que aconteceu quando o menu chegou a 17 itens e só dava para clicar em "Usuários" diminuindo o zoom do navegador. Agora ela ocupa exatamente a tela e rola por dentro quando não cabe. */ height: 100vh; overflow-y: auto; overscroll-behavior: contain; background: var(--lateral-fundo); border-right: 1px solid var(--lateral-borda); color: var(--lateral-texto); padding: 18px 12px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; } /* barra de rolagem discreta: sobre o petróleo do menu, a padrão do Windows aparece como uma faixa clara e chama mais atenção que os próprios itens */ .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; } .marca-lateral { display: flex; align-items: center; gap: 10px; padding: 0 8px; } .marca-lateral .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--marca); color: #04262a; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.78rem; flex-shrink: 0; } /* Dentro da caixa vai o SÍMBOLO da logo, não a palavra inteira: em 32px o "SWIFT" e a linha "agência de viagens" viram borrão — a mesma razão do favicon. `color` e `font-*` acima ficam porque a caixa volta a mostrar as iniciais se a imagem não carregar. */ .marca-lateral .logo img { width: 24px; height: auto; display: block; } .marca-lateral .nome { font-weight: 700; font-size: 0.95rem; line-height: 1.2; color: var(--lateral-titulo); } /* menu agrupado por função: nove itens numa lista corrida não têm hierarquia — o olho lê tudo com o mesmo peso e não acha nada */ .nav-lateral { display: flex; flex-direction: column; gap: 0; } .grupo-nav { display: flex; flex-direction: column; gap: 1px; } .grupo-nav + .grupo-nav { margin-top: 14px; } .grupo-rotulo { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lateral-rotulo); padding: 0 10px 6px; } .nav-lateral a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--lateral-texto); text-decoration: none; font-size: 0.875rem; font-weight: 500; } .nav-lateral a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; } .nav-lateral a:hover { background: var(--lateral-hover); } .nav-lateral a.ativo { background: var(--lateral-ativo-bg); color: var(--lateral-ativo-tx); font-weight: 650; } .nav-lateral a.ativo svg { opacity: 1; } /* contador de pendências: o trabalho esperando aparece sem entrar na tela */ .nav-lateral a .contador { margin-left: auto; font-size: 0.7rem; font-weight: 700; /* SÓLIDO: fundo com texto branco por cima. A lateral já não acompanha o tema, e no escuro o `--vermelho` clareia para virar texto legível — aqui isso apagaria o branco. */ background: var(--vermelho-solido); color: #fff; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; } .nav-lateral a .contador.suave { background: rgba(255, 255, 255, 0.14); color: var(--lateral-texto); } .area-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topo-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--cartao); border-bottom: 1px solid var(--borda); } /* trilha: diz em que tela você está, que a lista do menu sozinha não dizia */ .trilha { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); } .trilha strong { color: var(--texto); font-weight: 650; } .avatar-usuario { width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } @media (max-width: 820px) { .layout { flex-direction: column; } .sidebar { width: 100%; min-height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; overflow-x: auto; } .nav-lateral { flex-direction: row; flex-wrap: wrap; } .grupo-nav { flex-direction: row; } .grupo-nav + .grupo-nav { margin-top: 0; } .grupo-rotulo { display: none; } .trilha { display: none; } } .badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; } .badge-admin { background: rgba(47, 125, 79, 0.15); color: var(--verde); } .badge-operador { background: rgba(0, 122, 133, 0.12); color: var(--azul); } /* SUPERVISOR (10/09/2026). Âmbar porque é o terceiro token de cor que o tema já define nos dois modos — verde e azul já eram dos outros dois papéis, e o vermelho é de alerta. O crachá nunca fica só na cor: `rotuloDoPapel()` escreve a palavra ao lado, que é a mesma regra da marca de situação. */ .badge-supervisor { background: rgba(163, 91, 0, 0.14); color: var(--ambar); } /* Ajuste com data de voo própria (10/09/2026). Âmbar e não vermelho: não é erro — a reserva que se parte em duas tem ajuste com voo próprio. É aviso de que aquela linha vai aparecer sozinha no check-in. CLASSE, nunca `:style`: o `x-show` esconde escrevendo `style.display`, e um `:style` reativo no mesmo elemento reescreve o atributo e desfaz. Escrita com DUAS classes de propósito: sozinha ela perde para `.eco-data`, que também define `color` e vem depois no arquivo — mesma especificidade, ganha a última. Duas classes valem 0,2,0 e vencem em qualquer ordem. */ .eco-data.aviso-voo-do-ajuste { color: var(--ambar); font-weight: 600; } /* evolução do cliente contra o período anterior. A cor carrega o sinal, mas o texto também diz ("cresceu +43%"): quem não distingue verde de vermelho precisa da informação do mesmo jeito */ .evolucao { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .evolucao-sobe { background: rgba(15, 122, 79, 0.12); color: var(--verde); } .evolucao-desce { background: rgba(179, 38, 30, 0.10); color: var(--vermelho); } .evolucao-novo { background: rgba(0, 131, 143, 0.12); color: var(--acento); } .evolucao-estavel { background: rgba(90, 107, 110, 0.12); color: var(--texto-suave); } /* DRE: a hierarquia do relatório precisa se ler de relance, senão vira uma lista de números. Título de grupo em maiúscula, subtotal destacado e as linhas de detalhe recuadas sob ele. */ .tabela-dre td, .tabela-dre th { white-space: nowrap; } .tabela-dre td:nth-child(2) { white-space: normal; } .tabela-dre tr.dre-titulo td { font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--texto-suave); background: var(--fundo); border-top: 1px solid var(--borda); } .tabela-dre tr.dre-subtotal td { font-weight: 700; background: var(--fundo); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); } .tabela-dre tr:not(.dre-titulo):not(.dre-subtotal) td:nth-child(2) { padding-left: 22px; } .tabela-dre input[type="number"] { text-align: right; } /* na busca de vendas: explica que o resultado veio pelo acompanhante, e não pelo nome de quem pagou — sem isso a linha parece um resultado errado */ .marca-pax { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--acento); } /* dentro da sidebar turquesa os badges viram branco sólido com texto turquesa escuro — as versões translúcidas acima somem nesse fundo */ /* na lateral petróleo o badge vira um rótulo discreto sob o nome */ .sidebar .badge { background: transparent; color: var(--lateral-rotulo); padding: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; } .usuario-info { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--texto-suave); } /* Botão só de ícone, para o alternador de tema (07/09/2026). Discreto ao lado do e-mail: é uma preferência pessoal, não uma ação de trabalho — não deve competir com o "Sair", que é o único outro botão ali. `currentColor` no SVG faz o ícone seguir o texto nos dois temas. */ .botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto-suave); cursor: pointer; flex-shrink: 0; /* o e-mail é longo e espremeria o botão */ } .botao-icone svg { width: 17px; height: 17px; } .botao-icone:hover { color: var(--texto); border-color: var(--azul); } .botao-icone:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; } main { max-width: 980px; margin: 0 auto; padding: 24px; /* `width: 100%` não é redundante com o max-width acima: sem ele o `min-width: auto` deixa o main crescer até o conteúdo intrínseco e estourar o espaço ao lado do menu. Medido numa janela de 1.100px: o main ficava com 912px num espaço de 850px e a PÁGINA inteira passava a rolar de lado. Com width:100% ele respeita o pai e o max-width volta a mandar só quando há espaço de sobra. */ width: 100%; } /* Telas cujo conteúdo é uma tabela larga, não um formulário. Os 980px acima existem para o texto e os campos não esticarem numa linha comprida demais — boa regra para formulário, ruim para a busca de vendas: a tabela pede 1.063px e recebia 882px mesmo numa janela de 1.700, porque o limite não olhava a largura da tela. Rolagem lateral por decisão de layout, não por falta de espaço. Continua limitado, só que num teto que cabe a tabela inteira, e continua centralizado quando a janela é maior que isso. */ /* A largura extra é para a TABELA. Os campos que ocupam a linha inteira — link do documento, observação — esticavam junto e viravam um input de 1.091px, desconfortável de ler e de revisar. O limite abaixo devolve a eles um tamanho de formulário sem estreitar a tabela. */ main.tela-larga .campo.largo input, main.tela-larga .campo.largo textarea { max-width: 760px; } /* Teto maior para a tela cujo conteúdo é uma tabela. O `width: 100%` que impede o estouro está na regra `main` acima, e vale para as duas. */ main.tela-larga { max-width: 1240px; } .secao { padding: 22px 24px; margin-bottom: 20px; } .secao h2 { font-size: 1rem; margin: 0 0 4px; } .secao p.sub { color: var(--texto-suave); font-size: 0.85rem; margin: 0 0 18px; } .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; } .grade .largo { grid-column: 1 / -1; } /* Linha única de "anotar pendência": o texto ocupa o espaço que sobrar, o responsável tem largura fixa e o botão fica ao lado. A tela existe para a anotação de dez segundos, então empilhar três blocos custaria mais rolagem que a anotação inteira. `align-items: end` alinha o botão pela BASE dos campos — sem isso ele sobe para o meio, porque os campos são mais altos por causa do rótulo. */ .linha-anotar { display: grid; grid-template-columns: 1fr 220px auto; gap: 12px; align-items: end; } .linha-anotar .campo { margin: 0; } .linha-anotar button { white-space: nowrap; } /* Abaixo disso os três não cabem lado a lado sem espremer o campo de texto, que é justamente o que precisa de espaço. */ @media (max-width: 760px) { .linha-anotar { grid-template-columns: 1fr; } } .obrigatorio::after { content: " *"; color: var(--vermelho); } .autocomplete { position: relative; } .autocomplete-lista { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; margin-top: 4px; max-height: 220px; overflow-y: auto; box-shadow: var(--sombra); } .autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 0.9rem; } .autocomplete-item:hover, .autocomplete-item.ativo { background: var(--fundo); } .autocomplete-item small { color: var(--texto-suave); display: block; } .cliente-selecionado { display: flex; align-items: center; justify-content: space-between; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; } .grupo-toggle { display: flex; gap: 8px; margin-bottom: 10px; } .grupo-toggle button { flex: 1; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto-suave); font-weight: 600; font-size: 0.85rem; } .grupo-toggle button.ativo { background: var(--acento); border-color: var(--acento); color: white; } details.mais-detalhes { margin-top: 4px; } details.mais-detalhes summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--azul); padding: 6px 0; } details.mais-detalhes .grade { margin-top: 14px; } .rodape-form { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; } .mensagem { border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; margin-bottom: 16px; } .mensagem-sucesso { background: rgba(47, 125, 79, 0.12); color: var(--verde); } .mensagem-erro { background: rgba(179, 38, 30, 0.1); color: var(--vermelho); } .banner-leitura { background: rgba(0, 122, 133, 0.08); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 20px; margin-bottom: 20px; font-size: 0.9rem; color: var(--texto-suave); } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; } /* mais respiro: com 8px a tabela lia como planilha, não como sistema */ td { padding: 12px; } th { padding: 9px 12px; color: var(--texto-suave); font-weight: 650; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--fundo); } .tabela-scroll { overflow-x: auto; } /* A tabela de vendas é mais larga que o espaço que sobra ao lado do menu: 1.124px medidos contra 882px disponíveis numa janela de 1.280. Rolar de lado era o problema — para dar foco na tabela era preciso clicar nela, e o clique caía numa linha e abria a venda. Agora ela é focável: um clique no cabeçalho (que não abre nada) e as setas ← → passeiam pelas colunas. O anel de foco existe para a pessoa ver que a tabela "pegou" o teclado. */ .tabela-scroll:focus { outline: none; } .tabela-scroll:focus-visible, .tabela-scroll.com-foco { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; } /* Quantas linhas mostrar. `margin-left: auto` empurra este controle e o botão de exportar para a direita, deixando o texto de contagem à esquerda. */ .quantidade-lista { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.8rem; color: var(--texto-suave); white-space: nowrap; } .quantidade-lista select { padding: 5px 8px; font-size: 0.8rem; width: auto; } /* Discreto, mas em âmbar: é um aviso de que a lista está cortada, não decoração. Some sozinho quando o resultado cabe no limite escolhido. */ .quantidade-lista .ha-mais { color: var(--ambar); font-size: 0.75rem; } /* Dica de navegação: só aparece quando há mesmo coluna escondida. */ .dica-rolagem { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.78rem; color: var(--texto-suave); } .dica-rolagem kbd { font-family: inherit; font-size: 0.72rem; padding: 1px 6px; border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px; background: var(--fundo); } /* O nome do cliente é de longe a coluna mais larga (275px contra 146px da seguinte) e é ela que empurra as outras para fora da tela. Truncar devolve 85px sem esconder nada: o nome inteiro fica no title, ao passar o mouse, e na venda aberta. */ .tabela-scroll td .nome-cliente { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* As marcas sob o nome — "Compra de assento · sobre V01200", "viajou junto: …" — são mais largas que o nome truncado e reabriam a coluna: 235px, contra os 190px do nome. Truncar as duas no mesmo ponto mantém a coluna no tamanho previsto. */ .tabela-scroll td.col-cliente .marca-pax { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O cabeçalho não quebrava linha, e em tabela com rótulo descritivo é ELE que dita a largura da coluna: "Comprava a cada" ocupava 144px para um conteúdo de "40 dias". Deixar quebrar devolve a coluna ao tamanho do dado. MEDIDO em `vendas.html` antes de generalizar: 1.106px com e sem a regra, e a altura do cabeçalho igual (32px) — lá os rótulos são curtos e nunca quebram. Em "clientes em risco" e "reativar" foi o que faltava para caber. */ .tabela-scroll th { white-space: normal; } /* Mesma lição das marcas sob o nome do cliente, agora para as outras colunas: "30% dessa fonte volta a comprar" é mais largo que o dado que acompanha ("Indicação") e reabria a coluna — 220px para um conteúdo de 90px. O texto inteiro fica no `title`, como no nome. A regra de `td.col-cliente` acima é mais específica e continua valendo com os seus 190px, então a coluna do nome não muda. */ .tabela-scroll td .marca-pax { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Variante para a célula que não tem nada além do nome — em "Últimos lançamentos" não há marca de acompanhante nem de ajuste sob o cliente, e o texto fica direto no td. Mesma medida, para as duas tabelas truncarem no mesmo ponto. */ .tabela-scroll td.nome-cliente { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Coluna de ação colada na direita. Na busca de vendas a tabela passa da largura da tela e o "abrir" caía fora da área visível: quem procurava por onde entrar na venda tinha que rolar de lado para achar. Sticky mantém a saída sempre à vista, com uma borda para ela não flutuar por cima do conteúdo que passa por baixo. */ .tabela-scroll table th.acao, .tabela-scroll table td.acao { position: sticky; right: 0; background: var(--cartao); border-left: 1px solid var(--borda); text-align: right; } .tabela-scroll table th.acao { background: var(--cartao); z-index: 2; } /* o hover da linha tem que valer também na célula fixa, senão ela fica destacada do resto da linha quando o mouse passa */ tbody tr:hover td.acao { background: var(--fundo); } td a { color: var(--azul); font-weight: 600; text-decoration: none; } td a:hover { text-decoration: underline; } .num { text-align: right; font-variant-numeric: tabular-nums; } .positivo { color: var(--verde); } .negativo { color: var(--vermelho); } .carregando { text-align: center; color: var(--texto-suave); padding: 24px; font-size: 0.9rem; } /* ---------------------------------------------------------------- */ /* Dashboard */ /* ---------------------------------------------------------------- */ .cabecalho-dashboard { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .cabecalho-dashboard h1 { margin: 0 0 2px; font-size: 1.5rem; } .cabecalho-dashboard p.sub { margin: 0; } .filtros-periodo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filtro-atalhos { display: flex; background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px; padding: 3px; gap: 2px; } .filtro-atalhos button { background: transparent; color: var(--texto-suave); font-size: 0.83rem; font-weight: 600; padding: 7px 14px; border-radius: 7px; } .filtro-atalhos button.ativo { background: var(--acento); color: #fff; } .filtro-datas { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--texto-suave); } .filtro-datas input[type="date"] { width: auto; padding: 7px 10px; } .placeholder-dashboard { text-align: center; color: var(--texto-suave); padding: 60px 24px; font-size: 0.92rem; } .grade-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } /* sem a faixa colorida no topo: quinze cartões com risco turquesa viram ruído. A cor volta só onde significa alguma coisa (alerta) */ .kpi { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); } .kpi-total { border-color: var(--borda); } .kpi-alerta { border-left: 3px solid var(--vermelho); } .kpi-clicavel { cursor: pointer; } .kpi-clicavel:hover { border-color: var(--marca); } .kpi-ativo { outline: 2px solid var(--acento); outline-offset: -1px; } .atencao { color: var(--ambar); } /* Atalhos das buscas que se repetem: internacionais a conferir documentação, e quem embarca hoje ou amanhã. */ .atalhos-busca { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .atalhos-busca button { width: auto; padding: 6px 12px; font-size: 0.84rem; font-weight: 600; color: var(--acento); background: rgba(0, 131, 143, 0.08); border: 1px solid rgba(0, 131, 143, 0.25); border-radius: 999px; cursor: pointer; } .atalhos-busca button:hover { background: rgba(0, 131, 143, 0.16); border-color: var(--acento); } .filtro-so-voo { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--texto-suave); cursor: pointer; padding-bottom: 9px; } .filtro-so-voo input { width: auto; margin: 0; cursor: pointer; } .linha-busca { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } /* Onze filtros em fila viravam uma parede. Em grade eles se organizam sozinhos conforme a largura, e o bloco fica recolhido até alguém precisar. */ .grade-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); } .grade-filtros select, .grade-filtros input { width: 100%; } .rot-filtro { display: block; font-size: 0.8rem; color: var(--texto-suave); margin-bottom: 4px; } /* Contador de pendências no título da seção recolhível: avisa que há campo obrigatório lá dentro sem precisar abrir. */ .aviso-summary { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: #fff; /* sólido: fundo com texto branco por cima, e o `--ambar` clareia no escuro */ background: var(--ambar-solido); vertical-align: middle; } /* Erro do bloco de trechos, ao lado do botão que o disparou. */ .erro-trecho { margin: 8px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--vermelho); } /* Eco da data por extenso embaixo do campo de voo. Contra o erro de mês, que nenhuma faixa pega: "09" não chama atenção de ninguém, mas "setembro" sim. Discreto de propósito — é para ser lido no canto do olho, não para competir com o campo. */ .eco-data { margin: 4px 0 0; font-size: 0.8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .eco-data::first-letter { text-transform: uppercase; } /* Aviso de data de voo fora do padrão. Âmbar e não vermelho: não é erro, é uma pergunta — o grupo que viaja para o mesmo evento todo ano passa por aqui de forma legítima e só precisa confirmar. */ .aviso-data { margin-top: 10px; background: rgba(163, 91, 0, 0.07); border: 1px solid rgba(163, 91, 0, 0.3); border-left: 3px solid var(--ambar); border-radius: var(--raio); padding: 11px 14px; } .aviso-data-texto { font-size: 0.88rem; color: var(--ambar); line-height: 1.55; } .aviso-data-aceite { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 0.88rem; font-weight: 600; color: var(--texto); cursor: pointer; } .aviso-data-aceite input { width: auto; margin: 0; cursor: pointer; } .kpi .rotulo { font-size: 0.74rem; color: var(--texto-suave); margin-bottom: 5px; } .kpi .valor { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; } .kpi .valor.pequeno { font-size: 1.1rem; } /* ---------------------------------------------------------------- */ /* Usuários */ /* ---------------------------------------------------------------- */ .acoes-usuario { display: flex; gap: 6px; flex-wrap: wrap; } .acoes-usuario button { font-size: 0.8rem; padding: 6px 10px; white-space: nowrap; } .botao-perigo { color: var(--vermelho); border-color: rgba(179, 38, 30, 0.35); } .botao-perigo:hover:not(:disabled) { background: rgba(179, 38, 30, 0.08); } .botao-perigo:disabled { opacity: 0.4; cursor: not-allowed; } /* ---------------------------------------------------------------- */ /* Check-in */ /* ---------------------------------------------------------------- */ .caixa-checkin { display: flex; align-items: center; gap: 6px; cursor: pointer; } .caixa-checkin input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; } .caixa-checkin input[type="checkbox"]:disabled { cursor: not-allowed; } /* Marcar o check-in saiu do operador em 10/09/2026 (sql/131). O `cursor: pointer` das duas regras acima está no RÓTULO e no input; o `:disabled` alcança só o input. Sem esta regra o operador veria a mãozinha em volta da caixa, prometendo um clique que não acontece. Vai por CLASSE, nunca por `:style`: o `:style` reativo reescreve o atributo inteiro e desfaz o `display` que o `x-show` escreve — a armadilha de 27/08. */ .caixa-travada, .caixa-travada input[type="checkbox"] { cursor: not-allowed; } /* linha já resolvida perde destaque, mas continua legível */ /* Marca de situação na lista de vendas. Cancelada é alerta; "Viajada" é o fim normal de uma venda e em vermelho parecia problema — com a situação derivada (sql/78) isso pintaria ~1.000 linhas de vermelho. TEM DE SER CLASSE, NÃO `:style`: o `x-show` do Alpine esconde escrevendo `style.display = 'none'` no elemento, e um `:style` reativo no mesmo elemento reescreve o atributo inteiro e desfaz isso. O sintoma é mudo — a marca simplesmente aparece em todas as linhas, inclusive nas que deviam escondê-la. */ .marca-situacao { color: var(--texto-suave); } .marca-situacao.e-alerta { color: var(--vermelho); font-weight: 600; } .linha-feita { opacity: 0.55; } .linha-feita strong { font-weight: 400; } .etiqueta-prazo { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .prazo-urgente { background: rgba(179, 38, 30, 0.12); color: var(--vermelho); } .prazo-normal { background: rgba(0, 122, 133, 0.12); color: var(--azul); } .prazo-perdido { background: var(--fundo); color: var(--texto-suave); } /* A DATA DO VOO HERDA A COR DO PRAZO (07/09/2026) A coluna Prazo saiu por ser redundante com a data, e o gestor pediu que a cor viesse junto: vermelho para hoje e amanhã, azul de dois dias em diante. Reusa as classes acima em vez de definir cores próprias — assim a regra de QUAL cor continua num lugar só, `classePrazo()`. Aqui só se anula a pílula: sem `.etiqueta-prazo` não há padding nem raio, e o fundo sai porque pintar a célula inteira competiria com o destaque âmbar da observação, que é o que precisa saltar na linha. */ .data-voo.prazo-urgente, .data-voo.prazo-normal, .data-voo.prazo-perdido { background: none; font-weight: 700; } .data-voo.prazo-perdido { font-weight: 400; } /* "Aberto" — o check-in que já dá para fazer (07/09/2026). Verde e não vermelho: aqui não há urgência a comunicar, e sim trabalho liberado. O vermelho da coluna ao lado já diz o que é urgente, e dois vermelhos na mesma linha competiriam entre si. */ .hora-checkin.checkin-aberto strong { color: var(--verde); font-weight: 700; } /* As duas regras acima usam `--vermelho` e `--verde`, que passaram a clarear no tema escuro (ver o bloco de tokens no topo). A correção pontual que estava aqui saiu: ela consertava só estas duas linhas, e o problema era de toda a aplicação — `.negativo` e `.positivo`, o dinheiro do dashboard, tinham o mesmo 2,60 e 3,17 de contraste. */ /* ---------------------------------------------------------------- */ /* Alertas e meta do mês */ /* ---------------------------------------------------------------- */ .painel-alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 20px; } .alerta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); border-left-width: 4px; background: var(--cartao); text-decoration: none; color: var(--texto); } .alerta:hover { border-color: var(--marca); } .alerta-numero { font-size: 1.4rem; font-weight: 800; line-height: 1; } .alerta-texto { font-size: 0.82rem; color: var(--texto-suave); line-height: 1.3; } .alerta-texto strong { display: block; color: var(--texto); } .alerta-alta { border-left-color: var(--vermelho); } .alerta-alta .alerta-numero { color: var(--vermelho); } .alerta-media { border-left-color: #c98a00; } .alerta-media .alerta-numero { color: #a35b00; } .alerta-baixa { border-left-color: var(--marca); } .alerta-baixa .alerta-numero { color: var(--azul); } .painel-meta { margin-bottom: 20px; } .meta-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rotulo-meta { font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 6px; } .rotulo-meta .pct { font-weight: 700; color: var(--texto); margin-left: 4px; } .barra { height: 10px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--borda); overflow: hidden; } .barra-preenchida { height: 100%; background: var(--marca); } .barra-lucro-meta { background: var(--verde); } /* gráfico de evolução (SVG montado no dashboard.js) */ .grafico { width: 100%; min-width: 520px; height: auto; display: block; } .grafico .eixo { stroke: var(--borda); stroke-width: 1; } .grafico .barra-faturamento { fill: var(--marca); } .grafico .barra-lucro { fill: var(--verde); } .grafico .rotulo-mes { fill: var(--texto-suave); font-size: 11px; } .grafico .rotulo-vazio { opacity: 0.4; } .legenda-grafico { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; color: var(--texto-suave); margin-bottom: 10px; } .legenda-grafico .amostra { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .legenda-grafico .amostra-faturamento { background: var(--marca); } .legenda-grafico .amostra-lucro { background: var(--verde); } /* Gráfico de linhas das metas (11/09/2026). Tudo em var(--…) porque o SVG nasce como texto e herda o tema pelas classes — cor fixa aqui apareceria branca sobre branco no modo escuro. O ponto carrega DUAS informações na forma, além da cor: cheio bateu o piso, vazado não bateu, anel maior é mês em curso. Vermelho contra verde é o par que mais falha, e quem não os distingue precisa saber igual — a mesma regra que pôs o ✓ ao lado do valor conciliado. */ /* A caixa que guarda um gráfico largo. `overflow-x: auto` sozinho NÃO basta: `.grafico` tem `min-width: 520px`, e essa largura mínima sobe pela cadeia até o `main` — que é item de um flex. Medido a 430px: o main ia a 618 e a PÁGINA inteira rolava de lado, em vez de a rolagem ficar no gráfico. Testadas quatro saídas; só esta funcionou. `width:100%` no contêiner, mover o `min-width` para ele e trocar por `width` fixo no SVG deixaram os 618 intactos. `contain: inline-size` diz ao navegador que a largura da caixa não depende do conteúdo, e aí a largura mínima para de subir: o main volta a 430 e o gráfico rola dentro de si. */ .caixa-grafico { overflow-x: auto; max-width: 100%; contain: inline-size; } .grafico .faixa-metas { fill: var(--texto-suave); opacity: 0.11; } .grafico .linha-meta { fill: none; stroke: var(--texto-suave); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.85; } .grafico .linha-realizado { fill: none; stroke: var(--marca); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } /* o mês que ainda não fechou não merece traço cheio */ .grafico .linha-parcial { stroke-dasharray: 5 4; } .grafico .ponto-bateu { fill: var(--verde); } .grafico .ponto-falta { fill: var(--cartao); stroke: var(--vermelho); stroke-width: 2; } .grafico .ponto-curso { fill: var(--cartao); stroke: var(--marca); stroke-width: 2.5; } .legenda-grafico .amostra-realizado { background: var(--marca); } .legenda-grafico .amostra-meta { background: transparent; border-top: 2px dashed var(--texto-suave); border-radius: 0; height: 0; vertical-align: 4px; } .legenda-grafico .amostra-faixa { background: var(--texto-suave); opacity: 0.25; } .subtitulo-secao { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); margin: 28px 0 10px; } .subtitulo-secao:first-child { margin-top: 0; } /* Conciliação: a linha que ainda pede decisão. Marca discreta na borda, não fundo colorido — a tabela tem muitas dessas no começo do mês e um fundo forte em 300 linhas cansa de ler. */ .linha-atencao td:first-child { box-shadow: inset 3px 0 0 var(--ambar); } /* A linha da empresa escolhida no quadro de A RECEBER. Fundo suave e não borda colorida: aqui a marca diz "é esta que a lista embaixo está mostrando", e precisa se ler de relance no meio de vinte linhas. */ .linha-ativa td { background: var(--fundo-suave); font-weight: 600; } .quadro-empresas tbody tr:hover td { background: var(--fundo-suave); } /* Observação do check-in. Destacada só quando existe: aviso que aparece em toda linha deixa de ser aviso, e a fila tem dezenas de linhas. A barra âmbar à esquerda é a mesma marca que a linha pendente da conciliação usa. */ .obs-checkin { font-size: 12px; line-height: 1.35; vertical-align: top; } .obs-checkin.tem-obs { box-shadow: inset 3px 0 0 var(--ambar); background: rgba(245, 158, 11, 0.07); font-weight: 600; } /* Largura da fila de check-in (07/09/2026) — o gestor: *"o link do PDF não aparece, preciso movimentar a horizontal bar"*. Medido coluna a coluna com nomes do tamanho real: a tabela pedia 1.332px num espaço de 1.091, e METADE disso eram duas colunas — Passageiro 293 e Observação 241. A observação QUEBRA LINHA em vez de truncar: ela é instrução para quem vai embarcar o passageiro e cortar o texto no meio seria pior que a rolagem. O `white-space: normal` é necessário porque `th, td` são `nowrap` globalmente — a mesma herança que fez as pílulas da conciliação vazarem em 03/09. */ .obs-checkin { max-width: 200px; white-space: normal; } /* O nome trunca com o inteiro no `title`, como em `vendas.html`, `risco.html` e `reativar.html`. Era a coluna mais larga da tabela. */ .nome-checkin { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } /* Os estados da conciliação como pílulas horizontais, no molde de .atalhos-busca — pedido do gestor em 01/09/2026, apontando justamente aqueles atalhos como modelo. Eram sete cartões empilhados, ~600px de altura antes da tabela começar. Cada pílula traz o rótulo, a contagem e o valor; clicar filtra a lista. */ .chips-filtro { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; } .chips-filtro button { width: auto; padding: 6px 12px; font-size: 0.84rem; font-weight: 600; color: var(--acento); background: rgba(0, 131, 143, 0.08); border: 1px solid rgba(0, 131, 143, 0.25); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; } .chips-filtro button:hover { background: rgba(0, 131, 143, 0.16); border-color: var(--acento); } .chips-filtro button.ativo { background: var(--acento); border-color: var(--acento); color: #fff; } .chips-filtro .qtd { font-weight: 800; } /* o valor é o dado secundário: mesma pílula, menos peso */ .chips-filtro .val { font-weight: 500; font-size: 0.78rem; opacity: 0.75; } /* O que é trabalho fica vermelho mesmo sem estar selecionado: numa fila de sete pílulas iguais, "falta conferir" some no meio das já resolvidas. */ .chips-filtro button.urgente { color: var(--vermelho); background: rgba(179, 38, 30, 0.08); border-color: rgba(179, 38, 30, 0.28); } .chips-filtro button.urgente:hover { border-color: var(--vermelho); } .chips-filtro button.urgente.ativo { /* sólido: o chip ativo é fundo cheio com texto branco */ background: var(--vermelho-solido); border-color: var(--vermelho-solido); color: #fff; } /* O atalho "com proposta" quando está LIGADO (17/09/2026). CLASSE, e nunca `:style` no elemento: ele também tem `x-show`, e os dois não convivem — o x-show esconde escrevendo style.display='none' e o :style reativo reescreve o atributo inteiro, ressuscitando o botão. Medido: com o filtro ligado e a contagem em zero o botão voltava a aparecer dizendo "com proposta (0)", com a lista vazia por causa do próprio filtro. É a armadilha registrada em 27/08/2026, agora com um segundo caso. */ .filtro-ligado { font-weight: 700; color: var(--verde); } /* O progresso do EXTRATO, no topo da conciliação (17/09/2026). Ele não repete as pílulas: elas contam VENDAS do período (129) e esta conta LINHAS do arquivo (196). Eram duas contagens diferentes e a que mede o trabalho do dia só existia escondida atrás do botão "Recomeçar". */ .progresso-extrato { margin: 14px 0 4px; } .progresso-extrato .legenda { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 6px; } .progresso-extrato .legenda strong { color: var(--texto); } .progresso-extrato .pronto { color: var(--verde); font-weight: 700; } /* Rótulo da fila. A conciliação passou a ter dois lados em 02/09/2026 — entrada e saída — e sem ele as duas filas pareceriam uma só, quebrada em duas linhas pelo flex-wrap. */ .chips-filtro .rotulo-chips { align-self: center; min-width: 56px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); } /* O custo repartido por fornecedor, dentro da célula de saída. Cada pílula é UM PIX: é assim que o dinheiro sai da conta e é assim que ele aparece no extrato. Mostrar só o custo total daria um número que não existe em linha nenhuma do banco — foi o que o gestor apontou ao pedir os dois lados, lembrando das vendas com mais de um fornecedor. */ .pag-forn { display: inline-flex; align-items: baseline; gap: 5px; margin: 3px 4px 0 0; padding: 2px 8px; border-radius: 999px; font-size: 0.76rem; white-space: nowrap; background: rgba(179, 38, 30, 0.08); border: 1px solid rgba(179, 38, 30, 0.22); color: var(--vermelho); } .pag-forn .v { font-weight: 700; } /* conferido sai do vermelho: vira registro, e o clique desfaz. Era turquesa (--acento) e virou VERDE em 10/09/2026, junto com a cor dos valores: os dois lados da tela passaram a falar a mesma língua, e turquesa contra vermelho não lia como "pronto × pendente". */ .pag-forn.ok { background: rgba(15, 122, 79, 0.10); border-color: rgba(15, 122, 79, 0.25); color: var(--verde); cursor: pointer; } /* consolidadora: o dinheiro nunca sai do banco da agência, então não há o que conferir aqui — nem vermelho nem verde, só informação */ .pag-forn.neutro { background: transparent; border-color: var(--borda); color: var(--texto-suave); } /* PARCIAL (11/09/2026): um fornecedor pago em vários PIX. Azul, o mesmo de "A receber" e "Parcial" na entrada — em aberto, esperado, não terminado. Vermelho diria que nada foi feito e verde que está fechado; as duas mentem sobre metade. Foi o caso da V01766, com 3.425,11 e 684,32 no mesmo dia. */ .pag-forn.parcial { background: rgba(0, 122, 133, 0.10); border-color: rgba(0, 122, 133, 0.28); color: var(--azul); cursor: pointer; } /* O VALOR CARREGA O ESTADO (10/09/2026) Pedido do gestor: "acho que ficaria mais fácil se os números todos ficassem em vermelho e quando conciliados eles ficassem verdes. Acredito que assim é um indicativo melhor e mais claro do que está para ser conferido e o que já foi conferido". E a consequência que ele mesmo tirou: com a cor dizendo isso, a coluna Situação para de repetir "conferido / falta conferir" e passa a dizer a CONDIÇÃO DE PAGAMENTO, que é o que explica quando o dinheiro deveria aparecer. A COR NÃO VAI SOZINHA. O ✓ acompanha o valor conferido, pela mesma razão já registrada em `.evolucao` mais acima — quem não distingue verde de vermelho precisa da informação do mesmo jeito, e vermelho/verde é justamente o par que mais falha. O ✓ também é o que a pílula de fornecedor já usava. */ .valor-pendente { color: var(--vermelho); font-weight: 700; } .valor-conferido { color: var(--verde); font-weight: 700; } .valor-conferido .ok { margin-left: 4px; } /* venda sem valor a conferir: nem cobra nem confirma */ .valor-neutro { color: var(--texto-suave); } /* a expectativa, na coluna que a cor liberou. Discreta de propósito: ela informa, não cobra — quem cobra é o número colorido ao lado. */ .termos-pgto { font-size: 0.8rem; color: var(--texto-suave); } /* Ações empilhadas. Com a coluna da saída a tabela passou a pedir 1.404px num espaço de 1.091; lado a lado, "casar com… / não é fornecedor" sozinhos custavam 255px. Empilhadas custam bem menos e continuam à vista, porque a coluna .acao já é a colada à direita. O empilhamento vai nos BOTÕES, não na célula: `display:flex` num tira dele o comportamento de table-cell e desalinha a coluna — e a .acao é a coluna `sticky`, que depende disso para ficar colada à direita. */ td.acao-empilhada .botao-link { display: block; margin-left: auto; padding: 1px 0; } /* Barra de salvar que acompanha a rolagem. No DRE a tabela tem 40 linhas e ~3.200px: ao rolar até a linha do meio, o botão do topo fica 1.400px fora da tela, e quem digita conclui que não há como salvar — foi o relato do gestor em 02/09/2026. A barra só aparece quando há alteração pendente, então não atrapalha quem está só lendo. */ .barra-salvar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 20px; background: var(--cartao); border-top: 1px solid var(--borda); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.10); } .barra-salvar .aviso { margin-right: auto; font-size: 0.88rem; color: var(--texto-suave); } .barra-salvar button { width: auto; } /* o rodapé fixo cobriria a última linha da tabela */ body.tem-barra-salvar main { padding-bottom: 72px; } /* ------------------------------------------------------------------ Amostras de cor do selo, em CARD DE PROMOÇÃO (18/09/2026). A escolhida é marcada por um ANEL, não por brilho ou saturação: a escolha é entre cores, então distinguir a marcada não pode depender de enxergar diferença de cor. Mesma razão do ✓ ao lado do valor conferido na conciliação. `input[type=color]` precisa dos três pseudo-elementos do WebKit para virar um círculo: sem eles o navegador desenha a moldura dele por dentro e a amostra fica quadrada no meio das redondas. ------------------------------------------------------------------ */ .cores-selo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .cor-selo { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); cursor: pointer; box-shadow: none; } .cor-selo:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .cor-selo.escolhida { box-shadow: 0 0 0 2px var(--cartao), 0 0 0 4px var(--texto); } .cor-livre { background: none; overflow: hidden; } .cor-livre::-webkit-color-swatch-wrapper { padding: 0; } .cor-livre::-webkit-color-swatch { border: none; border-radius: 50%; } .cor-livre::-moz-color-swatch { border: none; border-radius: 50%; } .cor-outra { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-weight: 500; } .cor-outra span { font-size: 0.82rem; color: var(--texto-suave); } /* ------------------------------------------------------------------ O preview do CARD DE PROMOÇÃO (18/09/2026). O canvas troca de proporção com o seletor de formato, então o limite NÃO pode ser só de largura: um 9:16 a 100% da coluna sairia com mais de 1.100px de altura e empurraria o botão de baixar para fora da tela. `max-height` em vh, com width/height em `auto`, deixa o navegador escolher qual dos dois limites aperta — o quadrado enche a coluna, o vertical encolhe para caber na janela. ------------------------------------------------------------------ */ .previa { display: flex; flex-direction: column; gap: 12px; align-items: center; } .previa canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; border-radius: 14px; border: 1px solid var(--borda); background: var(--fundo-suave); } .previa .botao-primario { width: 100%; }