/* ===================================================================== SegueRota — identidade visual. Paleta da marca: #0D1B2A tinta texto, trilha lateral, superfícies escuras #1366FF azul ação primária, foco, "em andamento" #22C55E verde conclusão, sucesso, confirmação #6B7280 cinza texto de apoio #F4F6F8 claro fundo da aplicação Tipografia: Poppins em toda a interface, inclusive nos dados. O desenho geométrico da fonte já traz algarismos de mesma largura quando se pede `tabular-nums`, então a coluna de números continua alinhada sem exigir uma segunda família monoespaçada — que não existe na marca e destoaria dela. Dois temas, o mesmo conjunto de variáveis. O claro é o da papelaria; o escuro reaproveita a tinta #0D1B2A como fundo, que é exatamente como a marca se apresenta nas peças de fundo escuro. ===================================================================== */ :root{ /* --- cores da marca, sem tradução --- */ --marca-tinta:#0B1F33; --marca-azul:#146EF5; --marca-verde:#22C55E; --marca-cinza:#565E6B; --marca-claro:#F4F6F8; /* --- papéis --- */ /* Link é TEXTO, e texto pequeno precisa de 4,5:1. O azul da marca serve para preencher botão — onde o contraste é medido contra o branco por cima — mas fica em 4,38:1 como texto sobre fundo claro. Um tom mais fechado resolve sem mudar a identidade. */ --hi:#0A45B8; --hi-forte:#083A9B; --ok:#0B6440; --alerta:#D98B17; --erro:#C93B3B; /* Cantos generosos: a marca é feita de setas curvas e cápsulas. Canto vivo de 4px brigava com o símbolo. */ /* Raio por FUNÇÃO, não por gosto: campo, botão, cartão e modal têm cada um o seu, e o mesmo valor se repete em toda a interface. */ --r-p:8px; /* campo, botão pequeno */ --r:10px; /* botão */ --r-g:12px; /* cartão */ --r-gg:16px; /* modal */ /* Escala de espaçamento. Valor fora dela é acidente, não decisão. */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; --e8:40px; /* Sombra leve: o cartão se percebe por borda e espaço, não por peso. */ --sombra-1:0 1px 2px rgba(16,24,40,.04); --sombra-2:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); --sombra-3:0 12px 34px -18px rgba(16,24,40,.32); } html[data-tema="claro"]{ --fundo:#F6F8FB; --carta:#FFFFFF; --carta2:#F8FAFC; --texto:#102033; --suave:#5A6676; --apagado:#94A3B8; --linha:#E3E9F0; --rail:#0B1F33; --rail-txt:#A9B6C6; --rail-titulo:#FFFFFF; --rail-grupo:#8FA3BA; --rail-ativo:#146EF5; --rail-hover:#102A43; --mapa:#EAEEF3; --mapa-via:#D7DEE7; --mapa-via2:#C6D0DC; --sombra:0 1px 2px rgba(13,27,42,.04), 0 12px 32px -20px rgba(13,27,42,.35); --selo-a:#E7EFFF; --selo-at:#0A45B8; /* aberta — azul claro */ --selo-b:#E7EFFF; --selo-bt:#0A45B8; /* andamento — azul */ --selo-c:#EAF8F1; --selo-ct:#0B6440; /* concluído — verde */ --selo-d:#EEF1F5; --selo-dt:#565E6B; /* neutro — cinza */ --selo-e:#FFF6E5; --selo-et:#7A4F09; /* atenção — âmbar */ --selo-f:#FFF0F0; --selo-ft:#A32D2D; /* erro — vermelho */ --trilho-vazio:#DDE3EB; } html[data-tema="escuro"]{ /* Tokens PRÓPRIOS do tema escuro, não a inversão do claro: superfície ligeiramente acima do fundo, borda visível e texto que não vibra. */ --fundo:#071827; --carta:#0D2033; --carta2:#122A40; --texto:#E8EEF5; --suave:#A3B3C6; --apagado:#8497AC; --linha:#1E3448; /* Azul e vermelho CLAREADOS no tema escuro. A cor da marca sobre fundo branco tem contraste de sobra; a mesma cor sobre navy fica em 3,6:1 — abaixo do mínimo para texto pequeno, que é justamente onde ela aparece: número de demanda em tabela. Cor de marca não é a mesma coisa em dois fundos diferentes. */ --marca-azul:#5C9BFF; --erro:#FF7B7B; --ok:#4ADE9A; --alerta:#E9B75C; --rail-grupo:#8FA3BA; /* `--hi` (cor de link) e `--ok` são definidos no :root com tons ESCUROS, certos sobre fundo branco e ilegíveis sobre navy. Sobrescrever aqui é obrigatório: variável herdada não muda sozinha com o tema. */ --hi:#7FB2FF; --hi-forte:#A8CBFF; --rail:#06101B; --rail-txt:#A9B6C6; --rail-titulo:#FFFFFF; --rail-grupo:#8FA3BA; --mapa:#122335; --mapa-via:#1E3145; --mapa-via2:#182A3D; --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 36px -22px rgba(0,0,0,.9); --selo-a:#12294A; --selo-at:#7FAAFF; --selo-b:#12294A; --selo-bt:#5C93FF; --selo-c:#0F3222; --selo-ct:#5BD98A; --selo-d:#1B2A3B; --selo-dt:#93A2B5; --selo-e:#38290F; --selo-et:#E9B75C; --selo-f:#3A1717; --selo-ft:#F08B8B; --trilho-vazio:#24384E; } *{box-sizing:border-box} body{margin:0;background:var(--fundo);color:var(--texto); font:400 14px/1.6 "Poppins",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; transition:background .18s ease,color .18s ease} /* Títulos em caixa normal e peso 600. O wireframe usava condensada em caixa alta, de placa de sinalização; a marca é o oposto — geométrica, arredondada e falando em frase ("Segue a rota. Você no controle."). */ h1,h2,h3{font-weight:600;letter-spacing:-.01em;text-transform:none} h1{font-size:23px;margin:0;line-height:1.25} h2{font-size:16px;margin:0 0 12px} h3{font-size:13px;margin:0 0 8px;color:var(--suave);font-weight:600} /* `.mono` deixou de significar "outra família": significa dado tabular. Mesma fonte, algarismos de largura fixa. */ .mono,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; letter-spacing:.01em} a{color:var(--hi)} /* Botão com aparência de link. Existe porque algumas ações que pareciam link precisaram virar POST — sair, principalmente — e a forma não devia mudar só porque o método mudou. */ .link-botao{background:none;border:0;padding:0;font:inherit;color:var(--hi); cursor:pointer;text-decoration:underline;text-underline-offset:2px} .link-botao:hover{color:var(--hi-forte)} /* ---- ícones ---- */ .ico{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ico.g{width:21px;height:21px} .ico.p{width:14px;height:14px} /* ---- estrutura ---- */ .marca{padding:18px 18px 15px;border-bottom:1px solid rgba(255,255,255,.08); display:flex;gap:10px;align-items:center} .marca .sinal{width:34px;height:34px;border-radius:var(--r-p);background:#fff; display:grid;place-items:center;flex:0 0 auto;padding:4px} .marca strong{display:block;color:var(--rail-titulo);font-size:17px;font-weight:600; letter-spacing:-.02em;line-height:1.15} .marca strong i{font-style:normal;color:var(--marca-azul)} /* Só a assinatura vai em caixa alta. O seletor `.marca span` pegava também o que embrulha o logotipo, e "SegueRota" virava "SEGUEROTA" — que não é como a marca se escreve. */ .marca > span > span{display:block;font-size:9px;color:var(--rail-grupo); letter-spacing:.1em;text-transform:uppercase;line-height:1.4} .marca strong{text-transform:none} /* ===================================================================== SegueRota — Opção E: grupos em abas no topo, trilha com um grupo só. Substitui os blocos "estrutura" (trilha e topo), "Menu recolhível" e o trecho de trilha do fim do portal.css. O resto do arquivo continua valendo — cartões, tabelas, selos, trilho, formulários, nada é tocado. A DIVISÃO: FAIXA 1 (navy) sessão — marca, busca, empresa, conta, sair. FAIXA 2 (clara) os GRUPOS, como abas. Navegação de primeiro nível. TRILHA só os itens do grupo aberto. Cinco, não dezoito. Por que a trilha encolhe: o menu do ADMIN tem 18 itens em 6 grupos, e nenhuma tela cabe nisso sem rolar. Com o grupo escolhido em cima, a coluna sempre cabe — e o caminho até um item fica declarado em dois passos, grupo e item, em vez de uma lista longa onde tudo tem o mesmo peso. ===================================================================== */ /* Altura das duas faixas somadas. A trilha gruda logo abaixo delas. */ :root{--faixas:107px} .app{display:flex;flex-direction:column;min-height:100vh} .corpo{display:flex;flex:1;min-width:0} /* --------------------------------------------------------------------- FAIXA 1 — SESSÃO --------------------------------------------------------------------- */ .topo-sessao{background:var(--rail);color:var(--rail-txt); padding:9px 20px;display:flex;align-items:center;gap:12px; position:sticky;top:0;z-index:30} .topo-sessao .marca{padding:0;border:0;flex:0 0 auto;gap:10px} .topo-sessao .marca .sinal{width:32px;height:32px} .topo-sessao .marca strong{font-size:16px} /* O "Rota" da marca sobre a trilha navy: #146EF5 dá 3,64:1, abaixo do mínimo para texto deste tamanho. O tom clareado já existe no tema escuro e resolve sem sair da identidade. */ .topo-sessao .marca strong i{color:#5C9BFF} .topo-sessao .busca{flex:0 1 300px;max-width:none;position:relative; display:flex;align-items:center;margin-left:16px} .topo-sessao .busca .ico{position:absolute;left:11px;color:var(--rail-grupo)} .topo-sessao .busca input{padding:9px 12px 9px 34px;border-radius:100px; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff} .topo-sessao .busca input:focus{border-color:#5C9BFF; box-shadow:0 0 0 3px rgba(92,155,255,.22)} /* Sem cor declarada, o placeholder cai no cinza claro do navegador e some sobre o navy: 1,3:1. */ .topo-sessao .busca input::placeholder{color:var(--rail-grupo)} .topo-sessao .espaco-busca{flex:0 1 300px;margin-left:16px} .topo-sessao .empurra{flex:1} .topo-sessao .divisor{width:1px;height:26px;background:rgba(255,255,255,.14);flex:0 0 auto} /* EM QUAL EMPRESA SE ESTÁ OPERANDO. Numa plataforma com várias transportadoras, errar de empresa custa tanto quanto errar de usuário, e essa informação não aparecia em lugar nenhum da tela. */ .chip-empresa{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px; border:1px solid rgba(255,255,255,.14);border-radius:100px; background:rgba(255,255,255,.06);color:#fff;font:inherit; font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none} a.chip-empresa:hover{background:rgba(255,255,255,.12)} .chip-empresa .sigla{width:22px;height:22px;border-radius:6px;display:grid; place-items:center;background:var(--selo-a);color:var(--selo-at); font-size:9.5px;font-weight:700;flex:0 0 auto} /* --------------------------------------------------------------------- CONTA --------------------------------------------------------------------- */ .conta{position:relative;flex:0 0 auto} .conta-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px; border:1px solid rgba(255,255,255,.14);border-radius:100px; background:rgba(255,255,255,.06);font:inherit;cursor:pointer;color:#fff} .conta-btn:hover{background:rgba(255,255,255,.12)} .conta-btn .quem{text-align:left;line-height:1.15;min-width:0} .conta-btn .quem b{display:block;font-size:12.5px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px} .conta-btn .quem span{display:block;font-size:10.5px;color:var(--rail-txt)} .conta-btn .seta{color:var(--rail-grupo);transition:transform 160ms ease} .conta-btn[aria-expanded="true"] .seta{transform:rotate(180deg)} .menu-conta{position:absolute;right:0;top:calc(100% + 8px);width:246px; background:var(--carta);border:1px solid var(--linha);border-radius:var(--r-g); padding:7px;box-shadow:var(--sombra-3);z-index:60} .menu-conta[hidden]{display:none} .menu-conta .quem-cab{padding:8px 11px 9px;border-bottom:1px solid var(--linha); margin-bottom:5px} .menu-conta .quem-cab b{display:block;font-size:12.5px;font-weight:600;line-height:1.3; color:var(--texto)} .menu-conta .quem-cab .email{display:block;font-size:11px;color:var(--suave); line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu-conta .quem-cab .selos{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap} .menu-conta a, .menu-conta button{display:flex;align-items:center;gap:10px;width:100%; padding:10px 11px;border:0;border-radius:var(--r-p);background:transparent; color:var(--texto);font:inherit;font-size:13px;font-weight:500; text-align:left;text-decoration:none;cursor:pointer} .menu-conta a:hover, .menu-conta button:hover{background:var(--carta2)} .menu-conta .ico{color:var(--suave)} .menu-conta .separa{height:1px;background:var(--linha);margin:5px 4px} /* SAIR é vermelho e vem depois do filete: a separação é o que impede o clique de inércia logo abaixo de "Tema escuro". */ .menu-conta .sair, .menu-conta .sair .ico{color:var(--erro)} .menu-conta .sair:hover{background:var(--selo-f)} /* --------------------------------------------------------------------- FAIXA 2 — OS GRUPOS COMO ABAS É a mudança que dá nome a esta versão. O agrupamento deixa de ser uma etiqueta de 9,5px em caixa alta dentro da coluna e vira navegação de primeiro nível, com o mesmo peso de qualquer outra aba do sistema. --------------------------------------------------------------------- */ .faixa-grupos{background:var(--carta);border-bottom:1px solid var(--linha); padding:0 20px;display:flex;align-items:center;gap:2px; overflow-x:auto;position:sticky;top:60px;z-index:25} .faixa-grupos .aba{display:flex;align-items:center;gap:8px;padding:0 14px; height:46px;border:0;background:transparent;cursor:pointer; color:var(--suave);font:inherit;font-size:13px;font-weight:500; border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none} .faixa-grupos .aba:hover{color:var(--texto)} .faixa-grupos .aba[aria-selected="true"], .faixa-grupos .aba.ativo{color:var(--hi);font-weight:600;border-bottom-color:var(--marca-azul)} .faixa-grupos .aba:focus-visible{outline:2px solid var(--marca-azul);outline-offset:-2px} /* Quantos itens a aba guarda. Sem o número, a aba não diz se vale o clique — e o custo de descobrir é uma troca de contexto inteira. */ .faixa-grupos .aba .quantos{background:var(--carta2);color:var(--suave); border-radius:100px;font-size:10.5px;font-weight:600;padding:1px 7px; font-variant-numeric:tabular-nums} .faixa-grupos .aba[aria-selected="true"] .quantos{background:var(--selo-a);color:var(--selo-at)} .faixa-grupos .empurra{flex:1;min-width:12px} /* A ação principal fica na ponta da faixa: é a única coisa que CRIA algo, e não pertence a grupo nenhum. */ .faixa-grupos .acao-menu{display:flex;align-items:center;gap:8px; padding:10px 16px;border-radius:100px;background:var(--marca-azul);color:#fff; font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap; box-shadow:0 8px 20px -10px rgba(19,102,255,.9);flex:0 0 auto} .faixa-grupos .acao-menu:hover{background:var(--hi-forte)} .faixa-grupos .acao-menu .ico{color:#fff} /* Perfil com um grupo só não precisa de aba: uma aba sozinha não é escolha, é decoração. O PHP omite a faixa; esta regra é a garantia. */ .faixa-grupos:empty{display:none} /* --------------------------------------------------------------------- TRILHA — só o grupo aberto --------------------------------------------------------------------- */ .trilha{width:232px;flex:0 0 232px;background:var(--rail);color:var(--rail-txt); display:flex;flex-direction:column;padding:14px 0 10px; position:sticky;top:var(--faixas);height:calc(100vh - var(--faixas)); align-self:flex-start; transition:width 160ms ease, flex-basis 160ms ease} .titulo-grupo{display:flex;align-items:center;gap:9px;padding:0 20px 12px;color:#fff} .titulo-grupo .nome{font-size:15px;font-weight:600;letter-spacing:-.01em; flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .titulo-grupo .quantos{background:rgba(255,255,255,.1);color:var(--rail-txt); border-radius:100px;font-size:10.5px;font-weight:600;padding:2px 8px; font-variant-numeric:tabular-nums} .nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 8px} .nav .itens-grupo[hidden]{display:none} .nav a{display:flex;align-items:center;gap:11px;margin:2px 12px;padding:10px 12px; color:var(--rail-txt);text-decoration:none;font-size:13.5px;font-weight:500; border-radius:var(--r-p);cursor:pointer;position:relative} .nav a:hover{background:rgba(255,255,255,.06);color:#fff} .nav a.ativo{background:var(--marca-azul);color:#fff;font-weight:600; box-shadow:0 6px 16px -8px rgba(19,102,255,.9)} .nav a:focus-visible{outline:2px solid #5C9BFF;outline-offset:2px} .nav a.ramo-ativo{color:#fff;background:rgba(255,255,255,.05)} .nav a .tem-filhos{margin-left:auto;opacity:.5} .nav a.sub-item{padding:7px 12px 7px 44px;font-size:12.5px;color:var(--rail-grupo)} .nav a.sub-item:hover{color:#fff} .nav a.sub-item.ativo{background:var(--marca-azul);color:#fff;font-weight:600} /* Contador do item. `.bolha` já existia, em verde: cor de sucesso para anunciar ocorrência aberta diz a coisa errada. */ .nav .bolha{margin-left:auto;background:var(--marca-verde);color:#06331B; border-radius:100px;font-size:10px;font-weight:700;padding:1px 7px; font-variant-numeric:tabular-nums} .nav .bolha.atencao{background:var(--erro);color:#fff} /* O botão de recolher desce para o pé da coluna: no topo ele disputaria com o título do grupo, que é a informação nova desta versão. */ .trilha .recolher{background:transparent;border:0;cursor:pointer; width:40px;height:40px;border-radius:var(--r);color:var(--rail-grupo); display:grid;place-items:center;margin:0 12px;flex:0 0 auto} .trilha .recolher:hover{background:rgba(255,255,255,.08);color:#fff} /* A seta aponta para onde a coluna VAI: para a esquerda quando recolhe, para a direita quando volta. Girada 90° ela apontava para baixo, que não diz nada sobre largura. */ .trilha .recolher .seta{transform:rotate(180deg);transition:transform 160ms ease} body.menu-recolhido .trilha .recolher .seta{transform:rotate(0deg)} /* --------------------------------------------------------------------- TRILHA RECOLHIDA (62px) Aqui ela vale menos que nas outras opções — a coluna já é curta —, mas continua: em tela de 1366px, 170px devolvidos são uma coluna a mais na tabela do fechamento. --------------------------------------------------------------------- */ body.menu-recolhido .trilha{width:62px;flex:0 0 62px} body.menu-recolhido .titulo-grupo .nome, body.menu-recolhido .titulo-grupo .quantos, body.menu-recolhido .nav a span, body.menu-recolhido .nav a .tem-filhos, body.menu-recolhido .nav a.sub-item{display:none} body.menu-recolhido .titulo-grupo{justify-content:center;padding:0 0 10px} body.menu-recolhido .nav a{justify-content:center;margin:2px 9px;padding:10px 0} body.menu-recolhido .trilha .recolher{margin:0 auto} body.menu-recolhido .nav .bolha{position:absolute;top:3px;right:4px;margin:0; width:7px;height:7px;padding:0;border-radius:50%;font-size:0;overflow:hidden; border:1.5px solid var(--rail)} @media (max-width:720px){ .trilha .recolher{display:none} } /* --------------------------------------------------------------------- CABEÇALHO DA TELA — dentro do corpo Ele disputava a barra do topo com a sessão e perdia: o título ficava espremido entre a busca e o relógio. Aqui tem a largura inteira. --------------------------------------------------------------------- */ .conteudo{flex:1;min-width:0} main{padding:0 24px 60px} .cabecalho-tela{padding:18px 0 0} .cabecalho-tela .caminho{display:flex;align-items:center;gap:6px; font-size:11.5px;color:var(--suave)} .cabecalho-tela .caminho b{color:var(--texto);font-weight:600} .cabecalho-tela h1{margin:0} .cabecalho-tela .descricao-tela{margin:2px 0 0;font-size:12.5px;color:var(--suave)} .tela{display:none;padding-top:16px} .tela.ativa{display:block} /* --------------------------------------------------------------------- TELA PEQUENA A trilha vira uma segunda faixa horizontal logo abaixo das abas. É a forma que esta opção já tem em pé: grupos numa linha, itens do grupo aberto na linha de baixo. --------------------------------------------------------------------- */ @media(max-width:900px){ :root{--faixas:0px} .corpo{flex-direction:column} .topo-sessao{padding:8px 12px;flex-wrap:wrap} .topo-sessao .marca strong{display:none} .topo-sessao .busca{flex:1 1 100%;order:3;margin:8px 0 0} .topo-sessao .espaco-busca{display:none} .conta-btn .quem{display:none} .faixa-grupos{padding:0 12px} .faixa-grupos .acao-menu{padding:8px 14px} .trilha{width:100%;flex:none;height:auto;position:static; flex-direction:row;align-items:center;padding:8px 12px} .titulo-grupo{display:none} .nav{padding:0;overflow-x:auto;overflow-y:hidden} .nav .itens-grupo{display:flex;gap:6px} .nav a{margin:0;padding:7px 12px;border-radius:100px;white-space:nowrap; background:rgba(255,255,255,.08);flex:0 0 auto} .nav a.ativo{background:#fff;color:var(--rail);box-shadow:none} .nav a.sub-item{display:none} } /* ---- cartões ---- */ .grade{display:grid;gap:13px} .g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)} .cartao{background:var(--carta);border:1px solid var(--linha);border-radius:var(--r); padding:16px;box-shadow:var(--sombra)} .indicador .rotulo{font-size:11.5px;letter-spacing:.02em;color:var(--suave);font-weight:500; display:flex;align-items:center;gap:6px;margin-bottom:6px} .indicador .num{font-size:31px;font-weight:600;line-height:1;letter-spacing:-.02em} .indicador .nota{font-size:11px;color:var(--suave);margin-top:5px} .indicador.destaque{border-left:3px solid var(--marca-azul)} .num.ok{color:var(--ok)}.num.risco{color:var(--erro)}.num.atencao{color:var(--alerta)} /* ---- tabelas ---- */ .tabela-caixa{background:var(--carta);border:1px solid var(--linha);border-radius:var(--r); overflow:auto;box-shadow:var(--sombra)} table{width:100%;border-collapse:collapse;font-size:13.5px} th{text-align:left;font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--suave); font-weight:600;padding:11px 13px;background:var(--carta2); border-bottom:1px solid var(--linha);white-space:nowrap} td{padding:11px 13px;border-bottom:1px solid var(--linha);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr.clicavel{cursor:pointer} tbody tr.clicavel:hover{background:var(--carta2)} /* ---- ELEMENTO-ASSINATURA: o trilho ---- Seis marcos reais do processo. A barra preenchida diz até onde a carga chegou sem que o operador precise ler o texto do status. */ .trilho{display:flex;align-items:center;min-width:116px} .trilho .marco{width:8px;height:8px;border-radius:50%;background:var(--carta); border:2px solid var(--trilho-vazio);flex:0 0 auto;z-index:1} .trilho .haste{height:2px;background:var(--trilho-vazio);flex:1} .trilho .marco.feito{background:var(--hi);border-color:var(--hi)} .trilho .haste.feito{background:var(--hi)} .trilho .marco.agora{box-shadow:0 0 0 3px rgba(19,102,255,.24)} .trilho.fim .marco.feito,.trilho.fim .haste.feito{background:var(--ok);border-color:var(--ok)} .trilho-legenda{display:flex;justify-content:space-between;font-size:10.5px;color:var(--suave); text-transform:none;letter-spacing:0;margin-top:6px} /* ---- barra de franquia ---- */ .barra{height:9px;background:var(--trilho-vazio);border-radius:100px;overflow:hidden;position:relative} .barra i{display:block;height:100%;background:var(--hi);border-radius:100px} .barra i.ok{background:var(--ok)}.barra i.alerta{background:var(--alerta)}.barra i.risco{background:var(--erro)} .barra-info{display:flex;justify-content:space-between;font-size:11.5px;color:var(--suave);margin:5px 0 2px} .barra-meta{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--texto);opacity:.55} /* ---- selos ---- */ .selo{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px; font-size:10.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap} .s-aberta{background:var(--selo-a);color:var(--selo-at)} .s-andamento{background:var(--selo-b);color:var(--selo-bt)} .s-ok{background:var(--selo-c);color:var(--selo-ct)} .s-off{background:var(--selo-d);color:var(--selo-dt)} .s-alerta{background:var(--selo-e);color:var(--selo-et)} .s-erro{background:var(--selo-f);color:var(--selo-ft)} .atrasado{color:var(--erro);font-weight:600} .chapa{display:inline-block;background:var(--marca-tinta);color:#fff;padding:2px 8px; border-radius:6px;font-size:11.5px;font-weight:500;letter-spacing:.04em; font-variant-numeric:tabular-nums} /* ---- formulários ---- */ label{display:block;font-size:11.5px;letter-spacing:0;text-transform:none; font-weight:500;color:var(--suave);margin-bottom:5px} input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--linha); border-radius:var(--r-p);font:inherit;background:var(--carta);color:var(--texto); transition:border-color .15s ease,box-shadow .15s ease} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marca-azul); box-shadow:0 0 0 3px rgba(19,102,255,.16)} input:disabled,select:disabled{background:var(--carta2);color:var(--suave);cursor:not-allowed} .campo{margin-bottom:12px} .linha-campos{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)} .linha-campos.t3{grid-template-columns:repeat(3,1fr)} .linha-campos.t4{grid-template-columns:repeat(4,1fr)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px; border:0;border-radius:100px;background:var(--marca-azul);color:#fff; font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:0; text-transform:none;cursor:pointer;text-decoration:none; transition:background .15s ease,transform .06s ease} .btn:hover{background:var(--hi-forte)} .btn:active{transform:translateY(1px)} .btn.verde{background:var(--marca-verde)} .btn.verde:hover{background:#199C4C} .btn.escuro{background:var(--marca-tinta);color:#fff} .btn.claro{background:var(--carta);color:var(--texto);border:1px solid var(--linha)} .btn.claro:hover{background:var(--carta2)} .btn.mini{padding:5px 13px;font-size:12px} .btn:focus-visible{outline:2px solid var(--marca-azul);outline-offset:2px} .filtros{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px} .filtros .campo{margin:0;min-width:136px} .entre{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .pilha{display:flex;flex-direction:column;gap:13px} .abas{display:flex;gap:2px;border-bottom:1px solid var(--linha);margin-bottom:15px;overflow-x:auto} .aba{padding:9px 14px;font-size:13.5px;font-weight:500;text-transform:none;cursor:pointer; white-space:nowrap;border-bottom:2px solid transparent;color:var(--suave)} .aba.ativa{border-bottom-color:var(--marca-azul);color:var(--marca-azul);font-weight:600} /* ---- mapa esquemático ---- */ .mapa{background:var(--mapa);border:1px solid var(--linha);border-radius:var(--r); position:relative;overflow:hidden} .mapa svg{display:block;width:100%;height:100%} .legenda{position:absolute;left:10px;bottom:10px;background:var(--carta); border:1px solid var(--linha);border-radius:var(--r);padding:6px 10px;font-size:11px} .legenda i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px} /* ---- linha do tempo ---- */ .tempo-lista{list-style:none;margin:0;padding:0} .tempo-lista li{display:grid;grid-template-columns:64px 16px 1fr;gap:9px;padding-bottom:14px;position:relative} .tempo-lista li:not(:last-child)::before{content:'';position:absolute;left:71px;top:15px;bottom:0; width:2px;background:var(--linha)} .tempo-lista .hora{font-variant-numeric:tabular-nums;font-size:12px;color:var(--suave)} .tempo-lista .ponto{width:9px;height:9px;border-radius:50%;background:var(--hi); margin:5px 0 0 3px;z-index:1;position:relative} .tempo-lista .ponto.ok{background:var(--ok)} .tempo-lista .oque{font-weight:600;font-size:13.5px} .tempo-lista .detalhe{font-size:12px;color:var(--suave)} /* ---- etiqueta ---- */ .etiqueta{background:#fff;color:#111;border:1px solid #999;border-radius:6px;padding:12px; width:250px;font-family:"Poppins",sans-serif} .etiqueta .cab{display:flex;justify-content:space-between;align-items:flex-start; border-bottom:2px solid #111;padding-bottom:6px;margin-bottom:8px} .etiqueta .vol{font-size:28px;font-weight:700;line-height:.95;letter-spacing:-.02em} .etiqueta .rota{font-size:12.5px;line-height:1.45} .etiqueta .barras{display:flex;gap:1px;height:44px;align-items:flex-end;margin:9px 0 4px} .etiqueta .barras b{background:#111;display:block;height:100%} .etiqueta .cod{font-variant-numeric:tabular-nums;font-size:12px;text-align:center;letter-spacing:.1em} .etiqueta .marca{font-size:14px;font-weight:600;padding:0;border:0} .etiqueta .aviso{margin-top:7px;font-size:10.5px;border-top:1px dashed #999;padding-top:6px;color:#444} /* ---- avisos ---- */ .aviso{padding:10px 13px;border-radius:var(--r);margin-bottom:14px;font-size:13.5px; border-left:3px solid;display:flex;gap:9px;align-items:flex-start} .aviso.alerta{background:var(--selo-e);border-color:var(--alerta);color:var(--selo-et)} .aviso.erro{background:var(--selo-f);border-color:var(--erro);color:var(--selo-ft)} .aviso.info{background:var(--selo-b);border-color:var(--selo-bt);color:var(--selo-bt)} .nota-wire{background:var(--selo-e);border:1px dashed var(--alerta);border-radius:var(--r); padding:9px 12px;font-size:12px;color:var(--selo-et);margin-bottom:14px; display:flex;gap:8px;align-items:flex-start} @media(max-width:1150px){.g5{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){ .g5,.g4,.g3,.g2,.linha-campos,.linha-campos.t3,.linha-campos.t4{grid-template-columns:1fr 1fr} main{padding:16px 13px 48px} } @media(max-width:560px){.g5,.g4,.g3,.g2,.linha-campos,.linha-campos.t3,.linha-campos.t4{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ===================================================================== Acréscimos ao wireframe: telas públicas (landing, login, erro), paginação, ficha de detalhe e estados vazios. Reaproveitam as MESMAS variáveis de tema declaradas acima, então os dois temas continuam valendo sem nenhuma regra duplicada. ===================================================================== */ /* ---- páginas fora do portal ---- */ body.fora{display:block} .fora-topo{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 26px;background:var(--carta);border-bottom:1px solid var(--linha); position:sticky;top:0;z-index:20} .fora-topo .marca{padding:0;border:0} .fora-topo .marca strong{color:var(--texto)} .fora-nav{display:flex;align-items:center;gap:18px} .fora-nav a{color:var(--suave);text-decoration:none;font-size:13.5px;font-weight:500} .fora-nav a:hover{color:var(--texto)} .fora-nav a.btn{color:#fff} .fora-main{max-width:1100px;margin:0 auto;padding:38px 26px 70px} .fora-secao{margin-top:52px} .fora-secao h2{font-size:20px;margin-bottom:16px} .fora-rodape{border-top:1px solid var(--linha);background:var(--carta); padding:18px 26px;display:flex;justify-content:space-between; font-size:12.5px;color:var(--suave)} .heroi{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:center} .heroi h1{font-size:44px;line-height:1.1;margin:16px 0 18px;letter-spacing:-.03em} /* O slogan tem duas metades: a afirmação em tinta e a promessa em azul. É assim que ele aparece na papelaria da marca. */ .heroi h1 em{font-style:normal;color:var(--marca-azul);display:block} .heroi p{font-size:15.5px;color:var(--suave);max-width:52ch;margin:0} .heroi-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .heroi-quadro{background:var(--carta);border:1px solid var(--linha);border-radius:var(--r); padding:16px;box-shadow:var(--sombra)} .linha-demo{display:flex;justify-content:space-between;align-items:center; margin:12px 0 5px;font-size:13px} /* ---- entrada (login) ---- */ .entrada{display:grid;grid-template-columns:1fr 440px;min-height:100vh} .entrada-lado{background:var(--rail);color:var(--rail-txt);padding:40px 44px; display:flex;flex-direction:column;justify-content:center} .entrada-lado .marca{padding:0;border:0;margin-bottom:34px} .entrada-lado h2{color:var(--rail-titulo);font-size:28px;line-height:1.2;letter-spacing:-.02em} .entrada-lado h2 em{font-style:normal;color:#5C93FF;display:block} .entrada-lado p{font-size:13.5px;color:var(--rail-grupo);max-width:44ch;margin-top:26px} .entrada-lado .trilho-legenda{color:var(--rail-grupo)} .entrada-caixa{background:var(--carta);padding:44px 46px;display:flex; flex-direction:column;justify-content:center} .entrada-caixa h1{font-size:29px;margin-bottom:5px} .entrada-caixa .sub{color:var(--suave);font-size:13.5px;margin:0 0 24px} .entrada-caixa form{margin-top:6px} .entrada-caixa .so-estreito{display:none;padding:0;border:0;margin-bottom:26px} .rodape-entrada{font-size:12px;color:var(--suave);margin:16px 0 0;line-height:1.5} .campo-senha{display:flex;gap:7px;align-items:stretch} .campo-senha input{flex:1} /* ---- campos empilhados (formulários) ---- */ .campo.bloco{display:flex;flex-direction:column;gap:5px;min-width:0} .campo.bloco label{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--suave)} .campo.bloco input,.campo.bloco select,.campo.bloco textarea{width:100%} textarea{font:inherit;padding:8px 10px;border:1px solid var(--linha);border-radius:var(--r); background:var(--carta);color:var(--texto);resize:vertical} .btn.largo{width:100%;justify-content:center;margin-top:6px} /* ---- página de erro ---- */ .pagina-erro{min-height:100vh;display:grid;place-items:center;padding:26px} .pagina-erro .cartao{max-width:560px;text-align:center;padding:38px 34px} .num-erro{font-size:56px;font-weight:600;color:var(--hi);line-height:1} .pagina-erro h1{margin:8px 0 10px;text-transform:none} .pagina-erro p{color:var(--suave);margin:0 0 22px} .pagina-erro .heroi-acoes{justify-content:center} .detalhe-erro{background:var(--carta2);border:1px solid var(--linha);border-radius:var(--r); padding:12px;font-size:11.5px;text-align:left;white-space:pre-wrap; word-break:break-word;max-height:260px;overflow:auto;margin:0 0 12px} /* ---- paginação ---- */ .paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--suave)} .paginacao-botoes{display:flex;gap:6px} /* ---- ficha de detalhe (dt/dd) ---- */ .ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px} .ficha dt{color:var(--suave);white-space:nowrap} .ficha dd{margin:0;text-align:right;word-break:break-word} /* ---- estado vazio de tabela ---- */ td.vazio{text-align:center;color:var(--suave);padding:26px 12px;font-size:13px} /* ---- placa do mapa não configurado ---- */ .mapa-placa{background:var(--mapa);border:1px dashed var(--linha);border-radius:var(--r); min-height:380px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:12px;color:var(--suave);text-align:center} .mapa-placa p{margin:0;font-size:13px;line-height:1.6} /* ---- abas como links de verdade ---- */ a.aba{text-decoration:none;color:inherit} /* ---- telas estreitas ---- */ @media (max-width:900px){ .heroi{grid-template-columns:1fr} .entrada{grid-template-columns:1fr} .entrada-lado{display:none} .entrada-caixa .so-estreito{display:flex} .grade.g5,.grade.g4,.grade.g3{grid-template-columns:repeat(2,1fr)} .grade[style*="330px"],.grade[style*="360px"]{grid-template-columns:1fr!important} .trilha{position:static;height:auto;width:100%;flex:none} .app{flex-direction:column} } @media (max-width:560px){ .grade.g5,.grade.g4,.grade.g3,.grade.g2{grid-template-columns:1fr} .fora-main{padding:24px 16px 50px} .entrada-caixa{padding:30px 22px} main{padding:16px 14px 50px} } /* ===================================================================== Marca — bloco reutilizável. O símbolo assenta sobre uma pastilha branca porque as setas são azul e verde saturados: sobre a tinta escura da trilha, o verde perde contraste, e sobre o cinza claro do fundo, o "S" some. Branco resolve os dois casos com a mesma regra. ===================================================================== */ .marca .sinal svg{width:100%;height:100%} .marca-clara{padding:0;border:0} .marca-clara .sinal{background:#fff;box-shadow:0 1px 3px rgba(13,27,42,.14)} .marca-clara strong{color:var(--texto)} .marca-clara span span,.marca-clara > span > span{color:var(--suave)} .marca > span{min-width:0} /* Pastilha de ícone das seções da landing */ .cartao h3 .ico{color:var(--marca-azul);vertical-align:-3px;margin-right:5px} /* Pilares da marca: precisão, segurança, visibilidade, agilidade */ .pilares{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;text-align:center} .pilar{padding:18px 12px;background:var(--carta);border:1px solid var(--linha); border-radius:var(--r)} .pilar .disco{width:44px;height:44px;border-radius:50%;background:var(--selo-b); color:var(--marca-azul);display:grid;place-items:center;margin:0 auto 10px} .pilar b{display:block;font-size:13.5px;font-weight:600} .pilar span{font-size:12px;color:var(--suave)} @media(max-width:900px){.pilares{grid-template-columns:repeat(2,1fr)}} /* Segunda linha de uma célula (rota, subtítulo). O par origem→destino não pode quebrar no meio: "BIA-01 →" numa linha e "BIA-02" na outra faz o operador ler a rota errada num relance. */ .sub-celula{display:block;font-size:12px;color:var(--suave);line-height:1.45} .par-rota{white-space:nowrap} /* No tema escuro a chapa usava a tinta da marca, que é exatamente a cor do cartão — a placa virava texto solto, sem a leitura de "plaqueta" que ela precisa ter numa tabela de despacho. */ html[data-tema="escuro"] .chapa{background:#1E3145;color:#E8EEF5} /* ===================================================================== Formulários de cadastro ===================================================================== */ .grade-form{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .grade-form .larg-2{grid-column:span 2} .grade-form .larg-3{grid-column:span 3} .grade-form .campo{margin:0} /* O asterisco de obrigatório é informação, não decoração: fica na cor de erro para que a leitura rápida do formulário mostre o que não pode faltar. */ label .obrig{color:var(--erro);font-style:normal;margin-left:2px} .erro-campo{display:block;font-size:11.5px;color:var(--erro);margin-top:4px} .dica-campo{display:block;font-size:11.5px;color:var(--suave);margin-top:4px} /* O campo recusado precisa se distinguir sem depender só da cor — quem não distingue vermelho continua vendo a borda mais grossa e a mensagem. */ .campo.com-erro input,.campo.com-erro select,.campo.com-erro textarea{ border-color:var(--erro);border-width:2px;background:var(--selo-f)} /* Não é `sticky`: presa ao rodapé da janela, a barra passava por cima do cartão seguinte e escondia o título da seção. Formulário de cadastro é preenchido de cima para baixo e enviado no fim — a barra pertence ao fim. */ .barra-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap; background:var(--carta);border:1px solid var(--linha); border-radius:var(--r);padding:14px 16px} @media(max-width:900px){ .grade-form{grid-template-columns:repeat(2,1fr)} .grade-form .larg-3{grid-column:span 2} } @media(max-width:560px){ .grade-form{grid-template-columns:1fr} .grade-form .larg-2,.grade-form .larg-3{grid-column:span 1} } .alinha-num{text-align:right;font-variant-numeric:tabular-nums} /* Opção com caixa de seleção (carteira do gestor) */ .caixa-opcao{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--linha); border-radius:var(--r-p);font-size:13px;cursor:pointer;text-transform:none; letter-spacing:0;color:var(--texto);font-weight:400;margin:0} .caixa-opcao:hover{background:var(--carta2)} .caixa-opcao input{width:auto;margin:0} /* Campo com botão de ação ao lado (consulta de CEP) */ .campo-com-botao{display:flex;gap:7px;align-items:stretch} .campo-com-botao input{flex:1;min-width:0} .campo-com-botao .btn{white-space:nowrap} /* Linha de detalhe da auditoria, aberta sob demanda */ tr.escondido{display:none} /* Senha provisória do aplicativo */ .card-senha{background:var(--carta2);border:1px solid var(--linha);border-radius:var(--r); padding:14px 16px;margin-bottom:13px} .senha-oculta{font-size:20px;letter-spacing:.14em;color:var(--suave)} .senha-oculta.senha-visivel{color:var(--texto);font-weight:600;letter-spacing:.06em; user-select:all} /* Legenda do mapa ao vivo */ .ponto{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:1px} /* Chapa em formato de pílula, centralizada (seção de preço da landing) */ .chapa.pilula{display:inline-block;width:auto;align-self:center;padding:4px 14px; border-radius:100px;font-size:11px;letter-spacing:.06em} /* Prova de entrega: assinatura e foto */ .provas{display:flex;gap:11px;flex-wrap:wrap} .prova{display:block;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden; background:#fff;text-decoration:none;width:150px} .prova img{display:block;width:100%;height:106px;object-fit:contain;background:#fff} .prova span{display:block;padding:6px 9px;font-size:11.5px;color:var(--suave); border-top:1px solid var(--linha);text-align:center} .prova:hover{border-color:var(--azul)} /* Legenda do mapa, com contagem por categoria */ .legenda-mapa{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .item-legenda{display:inline-flex;align-items:center;gap:6px;padding:4px 10px; border:1px solid var(--linha);border-radius:100px;font-size:11.5px; color:var(--suave);background:#fff} .item-legenda .qtd{color:var(--texto);font-variant-numeric:tabular-nums} .item-legenda.apagado{opacity:.42} /* Coleta urgente ou com aceite vencido chama atenção sem virar pisca-pisca */ @keyframes pulso-marcador{0%,100%{opacity:1}50%{opacity:.45}} .marcador-pulsa{animation:pulso-marcador 1.8s ease-in-out infinite} /* ===================================================================== Diálogo e carregamento ===================================================================== */ /* Fundo escurecido. `backdrop-filter` desfoca o que está atrás: a decisão pedida no diálogo costuma ser irreversível, e tirar a tela de trás do foco ajuda a pessoa a ler antes de clicar. */ .veu{position:fixed;inset:0;background:rgba(13,27,42,.45);backdrop-filter:blur(3px); display:grid;place-items:center;z-index:900;padding:20px; opacity:0;transition:opacity .16s ease} .veu.visivel{opacity:1} .dialogo{background:var(--carta);border:1px solid var(--linha);border-radius:16px; box-shadow:0 18px 50px rgba(13,27,42,.22);max-width:440px;width:100%; padding:22px 24px;transform:translateY(8px) scale(.98); transition:transform .16s ease} .veu.visivel .dialogo{transform:none} .dialogo .ico-topo{width:42px;height:42px;border-radius:12px;display:grid; place-items:center;margin-bottom:13px} .dialogo h3{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.01em} .dialogo p{margin:0;font-size:13.5px;color:var(--suave);line-height:1.55} .dialogo .detalhe{margin-top:11px;padding:11px 13px;background:var(--carta2); border-radius:var(--r-p);font-size:13px} .dialogo .acoes{display:flex;gap:9px;justify-content:flex-end;margin-top:20px} .dialogo .acoes .btn{min-width:104px;justify-content:center} .d-perigo .ico-topo{background:var(--selo-f);color:var(--selo-ft)} .d-alerta .ico-topo{background:var(--selo-e);color:var(--selo-et)} .d-info .ico-topo{background:var(--selo-a);color:var(--selo-at)} /* Carregando: barra fina no topo + véu discreto. A barra aparece SOZINHA nos primeiros instantes; o véu só entra depois de 400 ms, para que ações rápidas não pisquem uma tela de carregamento. */ .barra-carga{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000; background:linear-gradient(90deg,var(--marca-azul),var(--ok)); transition:width .3s ease,opacity .3s ease} .barra-carga.ativa{width:82%} .barra-carga.pronta{width:100%;opacity:0} .veu-carga{position:fixed;inset:0;background:color-mix(in srgb,var(--fundo) 78%,transparent); backdrop-filter:blur(2px);display:grid;place-items:center;z-index:890; opacity:0;pointer-events:none;transition:opacity .2s ease} .veu-carga.visivel{opacity:1;pointer-events:all} .veu-carga .caixa{display:flex;flex-direction:column;align-items:center;gap:13px} .veu-carga span{font-size:13px;color:var(--suave)} .girador{width:34px;height:34px;border-radius:50%;border:3px solid var(--linha); border-top-color:var(--marca-azul);animation:girar .7s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} /* Esqueleto para listas que carregam depois */ .esqueleto{background:linear-gradient(90deg,var(--carta2) 25%,var(--linha) 37%,var(--carta2) 63%); background-size:400% 100%;animation:brilho 1.3s ease infinite;border-radius:6px} @keyframes brilho{0%{background-position:100% 50%}100%{background-position:0 50%}} @media (prefers-reduced-motion: reduce){ .girador,.esqueleto{animation:none} .veu,.dialogo,.barra-carga,.veu-carga{transition:none} } /* Carga de valor alto: símbolo, não texto — painel varrido de relance */ .selo-valor{display:inline-grid;place-items:center;width:22px;height:22px; border-radius:6px;background:var(--selo-c);color:var(--selo-ct); vertical-align:middle} /* Filtro de contexto (empresa/clientes) */ .filtro-contexto{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap; margin-bottom:13px;padding:11px 13px;background:var(--carta); border:1px solid var(--linha);border-radius:var(--r)} .filtro-contexto .campo{margin:0;min-width:190px} .filtro-contexto select.multi{min-height:38px} /* A marca fica ao lado do filtro, e some junto com ele: é o que evita alguém olhar uma tela recortada achando que é a operação inteira. */ .marca-filtro{display:inline-flex;align-items:center;gap:7px;padding:6px 12px; border-radius:100px;background:var(--selo-e);color:var(--selo-et); font-size:12px;font-weight:600} .marca-filtro a{color:inherit;text-decoration:none;font-size:14px;opacity:.75} .marca-filtro a:hover{opacity:1} /* ===================================================================== Correções de formulário ===================================================================== */ /* SELECT NO MODO ESCURO. O navegador desenha a lista aberta com as cores do SISTEMA, não as da página: no tema escuro, texto escuro sobre fundo escuro. Definir cor e fundo na própria