/* Tema e componentes compartilhados entre a conversa e os painéis. Paleta tirada de rtbtuner.com: fundo quase preto, superfícies grafite, texto off-white quente e laranja #FF9B00 como acento da marca. */ :root { --fundo: #0a0b0c; --painel: #17181c; --painel-alto: #1e2026; --borda: #292b32; --borda-forte: #434651; --texto: #f4f2ef; --suave: #a1a1aa; --tenue: #85878f; /* AA (4.5:1) sobre --painel-alto: cabeçalho de tabela e metadados são texto pequeno e lido */ --acento: #ff9b00; --acento-fraco: rgba(255, 155, 0, .12); --negativo: #f0674f; --positivo: #6ca52e; --sombra: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); --raio: 8px; } * { box-sizing: border-box; } html { color-scheme: dark; } body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.55 "Segoe UI", -apple-system, Roboto, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } button { font: inherit; cursor: pointer; color: inherit; } ::selection { background: var(--acento-fraco); } /* ---------- cabeçalho ---------- */ header { position: sticky; top: 0; z-index: 30; background: rgba(10,11,12,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); padding: 11px 22px; } .topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .marca { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 14px; text-decoration: none; color: var(--texto); } .marca b { color: var(--acento); font-weight: 700; } .selo { font-size: 10px; padding: 3px 9px; border-radius: 20px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; background: var(--acento-fraco); color: var(--acento); } .selo.producao { background: rgba(240,103,79,.15); color: var(--negativo); } /* Mapa de bolhas. O contorno é fundo: precisa dar referência geográfica sem competir com os pontos, que são o dado. Por isso preenchimento quase invisível e borda fina. */ .mapa { color: var(--tenue); } .mapa-uf path { fill: var(--painel-alto); stroke: var(--borda-forte); stroke-width: .8; stroke-linejoin: round; } .mapa-haste { stroke: var(--borda-forte); stroke-width: 1; } .mapa-nome { fill: var(--suave); font-size: 12px; } .mapa-legenda { color: var(--tenue); } .mapa-legenda text { fill: var(--tenue); font-size: 11px; } .mapa-titulo { fill: var(--tenue); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } .mapa-valor { fill: var(--texto); font-size: 12px; font-variant-numeric: tabular-nums; } /* Sigla do estado: tem que se ler sem competir com os pontos, que são o dado. Fica atrás deles (o grupo do contorno é desenhado antes) e bem apagada. */ .mapa-uf-sigla { fill: var(--suave); fill-opacity: .38; font-size: 13px; font-weight: 600; letter-spacing: .06em; pointer-events: none; } .mapa-uf-lista { fill: var(--tenue); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .mapa-contagem { fill: var(--suave); font-size: 15px; font-weight: 600; } /* navegação entre conversa e painéis */ .nav { display: flex; gap: 3px; background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 3px; } .nav a { text-decoration: none; color: var(--suave); font-size: 12.5px; padding: 5px 14px; border-radius: 6px; transition: .12s; } .nav a:hover { color: var(--texto); } .nav a.ativo { background: var(--acento-fraco); color: var(--acento); font-weight: 600; } /* Quem entrou vira um botao de 32px, e nao nome + botao soltos na barra: na conversa eles ficavam ao lado de "Historico" e "Limpar conversa", competindo com acoes da TELA quando sao acoes de CONTA. E no celular o nome nao cabia. O menu tambem e' onde a tela de usuarios e perfis vai entrar. */ .identidade { margin-left: auto; position: relative; } .identidade:empty { display: none; } .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--acento-fraco); color: var(--acento); border: 1px solid rgba(255,155,0,.35); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; } .avatar:hover { background: rgba(255,155,0,.2); } .avatar[aria-expanded="true"] { background: var(--acento); color: #1a1206; border-color: var(--acento); } .menu-usuario { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; background: var(--painel-alto); border: 1px solid var(--borda-forte); border-radius: 8px; box-shadow: var(--sombra); padding: 5px; overflow: hidden; } .menu-usuario.escondido { display: none; } .menu-usuario .cabeca { padding: 9px 11px 11px; border-bottom: 1px solid var(--borda); margin-bottom: 5px; } .menu-usuario .cabeca strong { display: block; font-size: 13.5px; font-weight: 600; } .menu-usuario .cabeca span { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 2px; } .menu-usuario button[role="menuitem"] { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 11px; border-radius: 5px; font-size: 13.5px; color: var(--suave); } .menu-usuario button[role="menuitem"]:hover { background: var(--painel); color: var(--texto); } .menu-usuario button.sair:hover { color: var(--negativo); } .filtros { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px; } /* Dentro do cabecalho ela continua encostada a' direita - e' a conversa, cujo `.filtros` tem so' Historico e Limpar conversa. Embaixo das abas, no painel, ela comeca na margem como todo o resto. O `auto` era global e mudou os dois quando a barra do painel saiu do cabecalho. */ header .filtros { margin-left: auto; } .filtro-grupo { display: flex; gap: 6px; align-items: center; } /* No celular a barra de filtros estourava a tela: o grupo "Período" tem rótulo, um seletor e duas caixas de data em `nowrap`, e sozinho media 481px numa tela de 375 — o que punha ROLAGEM HORIZONTAL na página inteira, não só nele. `.filtros` já quebrava linha; quem não quebrava era cada grupo por dentro. */ @media (max-width: 700px) { .filtros { gap: 10px 14px; margin-left: 0; width: 100%; } .filtro-grupo { flex-wrap: wrap; } .filtro-grupo input[type=date] { flex: 1 1 46%; min-width: 0; } .acoes-topo { margin-left: 0; } /* O seletor de preset sai no celular, a pedido do time: ele e as duas caixas de data são duas visões do MESMO recorte — mudar uma data já muda o preset para "Personalizado" —, e ali cada linha do cabeçalho custa 12% da tela. Ficam as datas, que dizem o período de verdade. */ #preset { display: none; } } } .filtro-grupo > label:first-child { color: var(--tenue); text-transform: uppercase; font-size: 10px; letter-spacing: .07em; font-weight: 600; } .chip { padding: 4px 12px; border: 1px solid var(--borda); border-radius: 20px; background: transparent; color: var(--suave); user-select: none; font-size: 12px; transition: .12s; } .chip:hover { border-color: var(--borda-forte); } .chip.on { background: var(--acento-fraco); border-color: var(--acento); color: var(--acento); font-weight: 600; } input[type=date], select, input[type=text] { font: inherit; font-size: 12px; padding: 4px 8px; color: var(--texto); background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; } input:focus, select:focus { outline: 1px solid var(--acento); } .acoes-topo { display: flex; gap: 8px; margin-left: 4px; } .btn-topo { background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; padding: 5px 13px; font-size: 12px; color: var(--suave); display: flex; align-items: center; gap: 6px; transition: .12s; } .btn-topo:hover { border-color: var(--acento); color: var(--acento); } .btn-topo.destaque { border-color: var(--acento); color: var(--acento); } .btn-topo .conta { background: var(--borda); border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 700; } /* ---------- cartão ---------- */ .cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); } .cartao-topo { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid var(--borda); font-size: 11.5px; color: var(--tenue); flex-wrap: wrap; } .cartao-topo .acoes { margin-left: auto; display: flex; gap: 6px; } .acao { background: transparent; border: 1px solid var(--borda); border-radius: 6px; padding: 4px 10px; font-size: 11.5px; color: var(--suave); transition: .12s; } .acao:hover { border-color: var(--acento); color: var(--acento); } .acao.on { background: var(--acento-fraco); border-color: var(--acento); color: var(--acento); } .acao:disabled { opacity: .5; cursor: default; } /* ---------- tabela ---------- */ .rolagem { overflow-x: auto; } /* table-layout fixed de propósito: com o layout automático o navegador joga toda a sobra de largura na coluna de conteúdo mais largo — uma coluna de nomes chegava a 1097px num cartão de 1058px, empurrando o resto para fora da tela. Com layout fixo as larguras são as que definimos, e max-width / text-overflow passam a valer nas células (o layout automático os ignora). */ table { border-collapse: collapse; width: 100%; font-size: 13.5px; table-layout: fixed; } /* A largura vem do conteudo, calculada em `pesosDaTabela` (comum.js). No desktop valem as porcentagens, que somam 100 e fazem a tabela caber no cartao; no celular vale a versao em rem, que estoura e faz a tabela rolar de lado - ver a regra no bloco de celular. */ .rolagem col { width: var(--larga); } th, td { padding: 8px 15px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--borda); } th { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); font-weight: 700; background: var(--painel-alto); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.neg { color: var(--negativo); } td.total { font-weight: 700; color: var(--texto); } td.neg.total { color: var(--negativo); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--painel-alto); } /* Separador entre grupos de total. Nome distinto de propósito: `.filtro-grupo` do cabeçalho é display:flex, e um com display:flex colapsa a linha. */ tbody tr.inicio-grupo td { border-top: 2px solid var(--borda-forte); } .sql { margin: 0; padding: 14px 15px; background: var(--fundo); border-top: 1px solid var(--borda); font-size: 11.5px; font-family: "Cascadia Code", Consolas, monospace; white-space: pre; overflow-x: auto; color: var(--suave); } /* Respiro entre a tabela e o gráfico — colados eles se leem como um bloco só */ .grafico { padding: 30px 20px 22px; border-top: 1px solid var(--borda); background: var(--fundo); } .grafico svg { display: block; width: 100%; height: auto; } .escondido { display: none; } /* Partes do gráfico que respondem a clique (filtro cruzado). Havendo seleção, comum.js apaga o que ficou de fora; o hover traz de volta para que dê para ler — e clicar — sem desfazer a seleção antes. */ svg .fatia { transition: opacity .12s; } svg .fatia:hover { opacity: 1; } svg .fatia:hover rect, svg .fatia:hover circle { filter: brightness(1.25); } .aviso { color: var(--negativo); } .numerao { font-size: 32px; font-weight: 700; padding: 22px 15px; font-variant-numeric: tabular-nums; } /* Dica ao lado dos chips de filtro: como sair do filtro cruzado. Discreta de proposito - quem ja' sabe nao precisa ler de novo a cada clique. */ .dica-filtro { font-size: 11px; color: var(--tenue); border: 1px dashed var(--borda); border-radius: 999px; padding: 2px 8px; align-self: center; cursor: help; } /* ---------- celular ---------- Fica no FIM do arquivo de proposito: com a mesma especificidade quem vem depois ganha, e estas regras sobrescrevem `.pop`, `.chip` e `.acao`, todas declaradas acima. Posto antes, o `width` do popover era ignorado e ele voltava aos 350px - o mesmo defeito ja' anotado para `.escondido`. */ @media (max-width: 700px) { /* Alvo de toque. O dedo pede ~44px e os controles do cabeçalho tinham 29; as ações do cartão, 28. Quem cresce é a ÁREA, não a letra: `min-height` mais centralização mantém a aparência e torna o toque confiável. */ .nav a, .chip, .btn-topo { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Ação de cartão é secundária e são 52 numa tela de painel: 34px é o meio termo entre caber o dedo e não empurrar todo cartão para baixo. */ .acao { min-height: 34px; display: inline-flex; align-items: center; } /* As duas datas cabiam lado a lado; o rótulo é que disputava a linha e jogava a segunda para baixo — 67px de cabeçalho para o que cabe em 33. */ .filtro-grupo input[type=date] { flex: 1 1 38%; padding: 5px 6px; font-size: 12px; } /* O cabeçalho é `sticky` e mede 257px — 32% de uma tela de 812. Fixo, ele cobra esse terço em TODA rolagem, e o que a pessoa foi ver no celular é o painel. Solto, o custo é pago uma vez: rolou, sumiu; para mexer no filtro, volta ao topo. Os filtros continuam todos visíveis, que é o que o time pediu — o que muda é eles não acompanharem a leitura. (O popover do "+ filtro" também precisa de ajuste no celular, mas a regra dele mora no