/* Design system do painel, herdado do painel-rotasertoes (HOUER). */ :root{ --primary-color:var(--acento); --accent-color:var(--acento); /* COR DE MARCA NÃO É COR DE TEXTO. O cobre da marca fica como está; lido como LETRA sobre fundo claro ele dá 3,8:1, abaixo do mínimo de 4,5:1. `--acento-texto` é o MESMO matiz no degrau que se lê. */ --primary-texto:var(--acento-texto); --bg-light:var(--fundo); --card-bg:var(--superficie); --text-primary:var(--texto); --text-secondary:var(--texto-2); --border-color:var(--borda); --shadow-sm:0 1px 2px 0 var(--sombra); --neutral-bar:var(--azul-90); --ambos:var(--azul); /* azul = os dois sentidos */ --envia:var(--acento); /* laranja = o lugar como ORIGEM */ --recebe:var(--ameixa); /* roxo = o lugar como DESTINO */ } *{margin:0;padding:0;box-sizing:border-box} /* coluna flex: o mapa e a tabela preenchem o que sobrar da altura da janela, sem depender de subtrair pixels do header e da barra de filtros na mão */ body{font-family:var(--fonte);background:var(--bg-light);color:var(--text-primary); line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden; height:100vh;display:flex;flex-direction:column} .main-header,.barra-filtros{flex:0 0 auto} /* ---------- header ---------- */ .main-header{background:var(--superficie);padding:0 40px;border-bottom:1px solid var(--border-color); box-shadow:var(--shadow-sm)} /* a navegação vive na MESMA linha do logo: custo vertical zero */ .header-top{display:flex;align-items:center;gap:40px;height:64px} .logo{height:58px;object-fit:contain} /* nome do painel ao lado do logo, ocupa o espaço vertical que já sobrava no header (não o cresce) */ .header-marca{display:flex;align-items:center;gap:15px;min-width:0} .header-titulo{display:flex;flex-direction:column;justify-content:center;gap:1px; border-left:2px solid var(--border-color);padding-left:15px;min-width:0} /* nome com a MESMA fonte dos títulos de card (.panel-header h3): 12,5px, 700, caixa alta, escuro */ .header-nome{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em; color:var(--text-primary);white-space:nowrap} /* subtítulo no cinza pequeno original */ .header-sub{font-size:10.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase; color:var(--text-secondary);white-space:nowrap} .header-top .main-nav{margin-left:auto;gap:28px} .header-top .nav-btn{padding:22px 2px} .title-container h1{font-size:19px;font-weight:800;letter-spacing:-.025em; text-transform:uppercase;line-height:1} .title-container p{text-transform:uppercase;font-size:10px;color:var(--text-secondary); font-weight:700;letter-spacing:.1em;margin-top:4px} .header-bottom{display:flex;align-items:center;justify-content:space-between} .main-nav{display:flex;gap:32px} .nav-btn{background:none;border:none;padding:12px 4px;font-size:11.5px;font-weight:600; color:var(--text-secondary);cursor:pointer;text-transform:uppercase;letter-spacing:.1em; border-bottom:2px solid transparent;text-decoration:none;transition:all .2s} .nav-btn:hover{color:var(--primary-texto)} .nav-btn.active{color:var(--primary-texto);border-bottom-color:var(--primary-color); font-weight:700} .nav-btn.futura{opacity:.35;cursor:not-allowed} .nav-btn.futura:hover{color:var(--text-secondary)} .tempo{font-size:9.5px;font-weight:700;color:var(--texto-3);font-variant-numeric:tabular-nums} /* ---------- filtros ---------- */ /* Todos os campos têm a mesma altura (34px) e a mesma distância do rótulo, para a barra ler como uma linha só e não como um amontoado de controles soltos. */ .barra-filtros{display:flex;align-items:flex-end;gap:22px;padding:12px 16px 13px; background:var(--superficie);border-bottom:1px solid var(--border-color);flex-wrap:wrap} .grupo{display:flex;flex-direction:column} .grupo-campos{display:flex;gap:12px;align-items:flex-end} .divisor{width:1px;height:34px;align-self:flex-end;background:var(--border-color)} .campo{display:flex;flex-direction:column;gap:5px} .campo>span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--texto-3);line-height:1} select{font-family:var(--fonte);font-size:12px;font-weight:600;height:34px; color:var(--text-primary);background:var(--superficie);border:1.5px solid var(--border-color); border-radius:8px;padding:0 10px;min-width:120px;cursor:pointer;transition:all .2s} /* período: um rótulo só, dois seletores e o "até" entre eles */ .par-periodo{display:flex;align-items:center;gap:7px} .par-periodo select{min-width:96px} .par-periodo .ate{font-size:10.5px;font-weight:600;color:var(--texto-3)} select:hover,select:focus{border-color:var(--primary-color);outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--azul-80) 10%, transparent)} /* combo com busca (município e produto) */ .combo{position:relative} .combo-gatilho{display:flex;align-items:center;justify-content:space-between;gap:10px; height:34px;font-size:12px;font-weight:600;background:var(--superficie); border:1.5px solid var(--border-color); border-radius:8px;padding:0 10px;cursor:pointer;transition:all .2s; white-space:nowrap;overflow:hidden} .combo-gatilho:hover{border-color:var(--primary-color)} .combo.aberto .combo-gatilho{border-color:var(--primary-color); box-shadow:0 0 0 3px color-mix(in srgb, var(--azul-80) 10%, transparent)} .combo-gatilho .txt{overflow:hidden;text-overflow:ellipsis} .combo-gatilho .seta{font-size:8px;color:var(--texto-3);flex-shrink:0} .combo-painel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:2000; width:300px;background:var(--superficie);border:1px solid var(--border-color);border-radius:12px; box-shadow:0 8px 28px color-mix(in srgb, var(--texto) 13%, transparent);overflow:hidden} .combo.aberto .combo-painel{display:block} .combo-busca{width:100%;border:none;border-bottom:1px solid var(--border-color); padding:9px 12px;font-family:var(--fonte);font-size:12px;outline:none} .combo-lista{max-height:280px;overflow-y:auto;padding:5px} .combo-item{padding:7px 10px;border-radius:7px;font-size:12px;cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .combo-item:hover{background:var(--azul-10)} .combo-item.sel{background:var(--azul-10);color:var(--primary-texto);font-weight:700} .combo-item .uf{font-size:9px;font-weight:800;color:var(--texto-3);margin-left:5px} .combo-vazio{padding:14px;text-align:center;font-size:11px;color:var(--texto-3)} .chips{display:flex;gap:6px} .chip{font-size:11px;font-weight:700;height:34px;padding:0 14px;border-radius:8px; cursor:pointer;background:var(--superficie);border:1.5px solid var(--border-color); color:var(--text-secondary);transition:all .2s} .chip:hover{border-color:var(--primary-color);color:var(--primary-texto);background:var(--azul-10)} /* seletor de distância mínima: um nao renderiza ::after: nao ha como pedir a cor por token. Entao declara-se a peca dos DOIS temas, que e o mesmo contrato de um par fundo/texto. */ [data-tema="escuro"] .chip-sel.active{ background-image:url("data:image/svg+xml;utf8,")} /* o cinza de fábrica do Leaflet vem de folha de CDN e não conhece o tema: enquanto o tile não chega, o mapa é um retângulo cinza fora da identidade. */ .leaflet-container{background:var(--fundo)} /* ── O ESTADO ATIVO VENCE O PONTEIRO ───────────────────────────────────────── `[data-tema="escuro"] .x:hover` tem uma classe a mais de especificidade que `.x.active`, e passa a mandar no fundo do elemento escolhido enquanto a letra continua a do estado ativo. Medido no antaq, no escuro: 1,05:1, ilegível. As regras abaixo são DERIVADAS das declarações de estado ativo deste mesmo arquivo, uma a uma. Escrever uma regra genérica no lugar delas foi a primeira tentativa, e ela apagava as variantes coloridas: `.chip.active[data-s="0"]` tem fundo próprio por sentido, e um `background:inherit` de socorro puxava o fundo do PAI, que no escuro é escuro. Derivar não tem esse risco: cada estado reafirma o que ele mesmo declara. */ :root[data-tema="escuro"] .chip-sel.active:hover, :root:not([data-tema="claro"]) .chip-sel.active:hover, :root[data-tema="claro"] .chip-sel.active:hover { background:var(--primary-texto); color:var(--superficie) } :root[data-tema="escuro"] .chip-sel.active option:hover, :root:not([data-tema="claro"]) .chip-sel.active option:hover, :root[data-tema="claro"] .chip-sel.active option:hover { background:var(--superficie); color:var(--text-primary) } :root[data-tema="escuro"] .chip.active:hover, :root:not([data-tema="claro"]) .chip.active:hover, :root[data-tema="claro"] .chip.active:hover { background:var(--primary-texto); color:var(--superficie) } :root[data-tema="escuro"] .chip.active[data-sentido=envia]:hover, :root:not([data-tema="claro"]) .chip.active[data-sentido=envia]:hover, :root[data-tema="claro"] .chip.active[data-sentido=envia]:hover { background:var(--envia) } :root[data-tema="escuro"] .chip.active[data-sentido=recebe]:hover, :root:not([data-tema="claro"]) .chip.active[data-sentido=recebe]:hover, :root[data-tema="claro"] .chip.active[data-sentido=recebe]:hover { background:var(--recebe) } :root[data-tema="escuro"] .chip.active[data-sentido=ambos]:hover, :root:not([data-tema="claro"]) .chip.active[data-sentido=ambos]:hover, :root[data-tema="claro"] .chip.active[data-sentido=ambos]:hover { background:var(--ambos) } :root[data-tema="escuro"] .modo.active:hover, :root:not([data-tema="claro"]) .modo.active:hover, :root[data-tema="claro"] .modo.active:hover { background:var(--primary-texto); color:var(--superficie) }