. */ /* Aberta por padrão, o hambúrguer não tem o que fazer. */ body.v2 .nav-drawer-head { display: none; } } /* -------------------------------------------------------------------------- 3. KPIs com ícone O ícone é um `::before` posicionado, e NÃO um item de grid/flex: os cinco tiles têm números de filhos diferentes (dois deles têm `.kpi-split`), e qualquer solução que dependa da contagem quebraria em um. `padding-left` é quem abre a coluna do ícone. -------------------------------------------------------------------------- */ body.v2 .painel-kpis .kpi-tile { position: relative; padding: 12px 12px 12px 58px; min-height: 112px; } /* O rótulo cede 0,02rem para caber ao lado do ícone: a 1600 sobram ~88px de texto e "Colaboradores" mede ~88px a 0.8rem — empate técnico é o que produz quebra feia no meio da palavra. A 0.78rem sobra folga de verdade. */ body.v2 .painel-kpis .kpi-label { font-size: 0.78rem; } body.v2 .painel-kpis .kpi-tile::before { content: ""; position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; border-radius: var(--radius-sm); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } body.v2 .painel-kpis .kpi-tile:nth-child(1)::before { background-color: rgba(59, 130, 246, 0.12); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.4%2020.4h17.2%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.2%2020.4V4.8a1.4%201.4%200%20011.4-1.4h6.6a1.4%201.4%200%20011.4%201.4v15.6%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.6%2020.4v-9.2h3.4a1.4%201.4%200%20011.4%201.4v7.8%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%207.2h1.4M11.4%207.2h1.4M8%2011h1.4M11.4%2011h1.4M8%2014.8h1.4M11.4%2014.8h1.4%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } body.v2 .painel-kpis .kpi-tile:nth-child(2)::before { background-color: rgba(148, 163, 184, 0.12); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%223.4%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%221.9%22%2F%3E%3Cpath%20d%3D%22M5.4%2020.2c0-3.6%203-6%206.6-6s6.6%202.4%206.6%206%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.4%202.6h5.2%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } body.v2 .painel-kpis .kpi-tile:nth-child(3)::before { background-color: rgba(167, 139, 250, 0.12); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%228%22%20r%3D%223.3%22%20stroke%3D%22%23a78bfa%22%20stroke-width%3D%221.9%22%2F%3E%3Cpath%20d%3D%22M3%2019.4c0-3.4%202.8-5.7%206.2-5.7s6.2%202.3%206.2%205.7%22%20stroke%3D%22%23a78bfa%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.6%205.4a3.2%203.2%200%20010%206.2%22%20stroke%3D%22%23a78bfa%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M18.2%2013.9c1.9.8%203.1%202.5%203.1%204.7%22%20stroke%3D%22%23a78bfa%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } body.v2 .painel-kpis .kpi-tile:nth-child(4)::before { background-color: rgba(251, 191, 36, 0.12); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%223.2%22%20y%3D%223.2%22%20width%3D%227.2%22%20height%3D%228.6%22%20rx%3D%221.6%22%20stroke%3D%22%23fbbf24%22%20stroke-width%3D%221.8%22%2F%3E%3Crect%20x%3D%2213.6%22%20y%3D%223.2%22%20width%3D%227.2%22%20height%3D%225.4%22%20rx%3D%221.6%22%20stroke%3D%22%23fbbf24%22%20stroke-width%3D%221.8%22%2F%3E%3Crect%20x%3D%223.2%22%20y%3D%2215%22%20width%3D%227.2%22%20height%3D%225.8%22%20rx%3D%221.6%22%20stroke%3D%22%23fbbf24%22%20stroke-width%3D%221.8%22%2F%3E%3Crect%20x%3D%2213.6%22%20y%3D%2211.8%22%20width%3D%227.2%22%20height%3D%229%22%20rx%3D%221.6%22%20stroke%3D%22%23fbbf24%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E"); } body.v2 .painel-kpis .kpi-tile:nth-child(5)::before { background-color: rgba(16, 185, 129, 0.12); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4.4%2016.4v2.2a1%201%200%2001-1%201H2.6a1%201%200%2001-1-1v-2.2%22%20stroke%3D%22%2310b981%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M22.4%2016.4v2.2a1%201%200%2001-1%201h-.8a1%201%200%2001-1-1v-2.2%22%20stroke%3D%22%2310b981%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2.2%2016.4h19.6v-4.1l-1.7-.5-2-4.3a1.8%201.8%200%2000-1.6-1H7.5a1.8%201.8%200%2000-1.6%201l-2%204.3-1.7.5v4.1z%22%20stroke%3D%22%2310b981%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2213.6%22%20r%3D%221.1%22%20fill%3D%22%2310b981%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2213.6%22%20r%3D%221.1%22%20fill%3D%22%2310b981%22%2F%3E%3C%2Fsvg%3E"); } /* A contagem por módulo herda as cores de ORIGEM do feed: âmbar é "liberado na portaria", ciano é "totem 1". A mesma cor querendo dizer a mesma coisa nos dois lugares poupa uma legenda. */ /* ⚠️ `!important` obrigatório: o styles.css (linha 2709) pinta TODO `.kpi-split-value` de branco com `!important` para garantir contraste no painel. Sem repetir a marca aqui, estas duas cores não apareceriam. */ body.v2 #countPortaria { color: #fbbf24 !important; } body.v2 #countTotem { color: #22d3ee !important; } /* -------------------------------------------------------------------------- 4. Botões secundários na cor do primário (pedido de 28/08/2026) PASSAPORTE e "Receber encomenda" passam a usar o mesmo gradiente de Buscar e Entregar. Ficam quatro botões azuis na tela — se um dia isso competir demais com a busca, o caminho é o contorno azul, não voltar ao cinza. -------------------------------------------------------------------------- */ body.v2 #btnPassport, body.v2 #btnPortEncReceber { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #ffffff; border: none; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3); } body.v2 #btnPassport:hover, body.v2 #btnPortEncReceber:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 5. Selo de direção do feed Já existe (`.pill-in`/`.pill-out`, e o `⛔ Barrado` das passagens negadas); aqui ele só ganha o corpo da referência — cápsula mais alta, para ser lida de pé e de longe no monitor da portaria. -------------------------------------------------------------------------- */ body.v2 .feed-item .pill { border-radius: 20px; padding: 4px 10px; font-size: 0.7rem; } body.v2 .feed-item .pill-in { background: rgba(74, 222, 128, 0.14); } /* -------------------------------------------------------------------------- 6. A tela usa a janela inteira ⚠️ ESTA É A CAUSA DE TUDO. O `main` global tem `max-width: 1280px` e `margin: 0 auto` (styles.css:427), e a portaria nunca sobrescreveu — as outras páginas todas têm o seu (`body.diretorio main`, `body.dashboard main`…). O painel ficava travado em 1280px e centralizado: num monitor de 1920 sobravam ~320px de vazio de cada lado, e o tile de KPI media 131px em QUALQUER tela. Foi isso que fez o texto vazar: os 58px que o ícone novo cobra deixavam 61px para o rótulo, e "Colaboradores" precisa de ~88px. Devolvida a largura, a 1366 o tile vai a 163px e a 1920 a 264px. `padding-left` não entra aqui: quem manda nele são as regras do trilho lateral, que têm especificidade maior (e precisam ter, para reservar a faixa). -------------------------------------------------------------------------- */ body.v2 main { /* Teto largo em vez de nenhum: numa tela de tabela (diretório, visitantes) a linha sem limite fica ilegível num monitor de 2560. 1800px é folga de sobra sobre os 1280 de antes e ainda segura a leitura. */ max-width: 1800px; padding: 1.25rem; } /* O painel da portaria é a exceção: são cinco KPIs, duas colunas de card e a lateral ao vivo na MESMA tela, e qualquer teto volta a espremer os tiles — foi assim que o texto saía do card. Aqui a régua é a janela. */ body.portaria.v2 main { max-width: none; } /* A faixa do trilho acompanha o respiro novo (a regra base usa 1rem). */ html body.v2.tem-nav-rail main { padding-left: calc(var(--rail-fina) + 1.25rem); } @media (min-width: 1560px) { html body.v2.tem-nav-rail main { padding-left: calc(var(--rail-larga) + 1.25rem); } } /* A conta da "tela única" desconta o respiro do

: eram 2rem em cima e embaixo (`- 4rem`), agora são 1,25rem. Sem acertar aqui, o painel ficaria 24px mais curto que a janela e sobraria uma faixa morta no rodapé. */ @media (min-width: 1151px) and (min-height: 620px) { body.v2 .painel { height: calc(100vh - var(--header-h, 68px) - 2.5rem); } } /* -------------------------------------------------------------------------- 7. Nada escapa do card O pedido de 28/08: "um componente que mantenha tudo dentro do card". Não é um componente novo — é a dupla que resolve os dois jeitos de vazar: `min-width: 0` item de flex/grid se recusa a encolher abaixo do próprio conteúdo (o `min-width: auto` do padrão). É o que faz uma linha comprida empurrar a coluna em vez de caber nela. `overflow-wrap` palavra sem espaço não tem onde quebrar e sai pela borda. "Colaboradores", "Estacionamento" e nome de empresa são exatamente esse caso. O `overflow: hidden` no card fica como rede de segurança: se aparecer um texto que fure as duas regras, ele é recortado na borda em vez de invadir o vizinho. -------------------------------------------------------------------------- */ body.v2 .card, body.v2 .dash-card, body.v2 .kpi-tile, body.v2 .feed-item, body.v2 .veic-item { overflow: hidden; min-width: 0; } body.v2 .card > *, body.v2 .dash-card > *, body.v2 .kpi-tile > *, body.v2 .feed-item > *, body.v2 .kpi-split-item, body.v2 .estac-num { min-width: 0; } body.v2 .kpi-label, body.v2 .kpi-context, body.v2 .kpi-split-label, body.v2 .card-title, body.v2 .dash-card-title, body.v2 .estac-num-label, body.v2 .port-enc-msg, body.v2 .chart-empty, body.v2 .name-result-name, body.v2 .name-result-doc { overflow-wrap: break-word; } /* O título do card é flex (texto + carimbo "a cada 1 s"): sem isto o carimbo é espremido a zero antes de o título pensar em quebrar. */ body.v2 .dash-card-title > span:first-child { min-width: 0; } body.v2 .dash-card-title > span:last-child { flex-shrink: 0; } /* Na lateral o feed já corta com reticências (styles.css). Aqui só se garante que a régua seja o card, não o conteúdo. */ body.v2 .painel-aside .feed-item > div { min-width: 0; } /* -------------------------------------------------------------------------- 8. Pedestre ao vivo: enche a tela, com piso de 6 cards (28/08/2026) O card vai até o rodapé e a lista enche o card — em 1080p isso dá ~10 cards visíveis, e os mais antigos vêm rolando. Em janela BAIXA, onde a conta da tela única não vale, ele cai para 6 fixos em vez dos 5 de hoje. Quem escolhe o modo é o CSS, e o `lista-visivel.js` obedece: a media query troca `--modo-lista`, e o componente lê essa variável. Assim o ponto de quebra mora num lugar só — duplicar `min-height: 620px` no JS é o tipo de coisa que fica para trás na primeira vez que alguém mexer no CSS. data-visiveis="6" piso: nunca menos que isso data-guardar="20" quantos a lista guarda O componente SOMA a altura real dos 6 primeiros cards em vez de multiplicar por um número fixo: eles não têm todos a mesma altura (2 linhas sem destino, 4 com nome comprido), e é por isso que `calc(6 * 58px + 5 * 12px)` entregava 5 cards e meio. O `calc` fica no CSS só como rede, para o instante antes de o script rodar. -------------------------------------------------------------------------- */ /* Modo FIXO — janela baixa ou estreita: 6 cards e rolagem. */ body.v2 .painel-aside .feed-list { --modo-lista: fixo; flex: none; height: calc(6 * var(--feed-row) + 5 * var(--feed-gap)); max-height: none; } /* Modo ENCHER — a mesma condição da "tela única" no styles.css. O card já ganha `height: 100%` lá; aqui a lista deixa de ter altura própria e come a sobra. */ @media (min-width: 1151px) and (min-height: 620px) { body.v2 .painel-aside .feed-list { --modo-lista: encher; flex: 1; height: auto; min-height: 0; } } /* -------------------------------------------------------------------------- 9. Card do pedestre: alto o bastante para caberem 6 (28/08/2026) A altura de cada card não é mais um número escolhido — é o que sobra quando a altura da lista é dividida por 6. Quem faz essa conta é o `lista-visivel.js`, que escreve `--altura-item` na lista; aqui o card só a lê. Numa tela de 1080p dá ~140px por card, no monitor de 768px da portaria ~88px, e em ambas cabem 6. `min-height` e não `height`: se um dia um card precisar de mais (nome que quebra em três linhas), ele cresce em vez de recortar o próprio texto — e aí cabem 5 e meio, que é melhor do que 6 ilegíveis. A FOTO acompanha a altura, com piso e teto: num card de 140px uma miniatura de 56px fica perdida no meio do vazio, e é a foto que a portaria usa para conferir quem está na catraca. O teto de 96px existe para telas muito altas, onde a divisão por 6 daria um retrato maior que a linha inteira de texto ao lado. O respiro vertical continua sendo o mesmo de antes; ele é o que separa a foto da borda do card. -------------------------------------------------------------------------- */ body.v2 .painel-aside { --feed-respiro: 10px; /* era 4px */ --feed-row: 76px; /* rede do modo fixo, antes de o script medir */ } body.v2 .painel-aside .feed-item { padding-top: var(--feed-respiro); padding-bottom: var(--feed-respiro); min-height: var(--altura-item, auto); /* Sem `--altura-item` (modo fixo, ou script fora do ar) cai nos 56px de antes. */ --feed-foto: clamp(56px, calc(var(--altura-item, 76px) - 2 * var(--feed-respiro)), 96px); } body.v2 .painel-aside .feed-item img, body.v2 .painel-aside .feed-photo-skeleton { width: var(--feed-foto); height: var(--feed-foto); } /* -------------------------------------------------------------------------- 10. Contagem por módulo com TRÊS colunas, na MESMA linha (28/08/2026) Entrou "Convites" ao lado de Portaria e Totem. Três números não cabem lado a lado num tile de 1/5 da fileira: a 1366 sobram ~93px de texto e os três rótulos pedem ~134px. Quem cede é a FILEIRA, não o conteúdo — o tile da contagem passa a valer 1,7 coluna e os outros quatro dividem o resto. A conta a 1366 (a tela apertada de verdade, o monitor da portaria): fileira ~798px úteis ÷ 5,7fr = 140px por coluna, e o tile da contagem fica com 238px → 168px de texto para 134px de rótulo. Cabe, com folga. O preço é "Colaboradores" quebrando em duas linhas nos tiles de 140px. É o mesmo que a referência já fazia, e `min-height: 112px` no tile absorve sem mexer na altura da fileira. ⚠️ Escopo em `min-width: 881px`: abaixo disso o styles.css troca a fileira para 3 e depois 2 colunas, e esta regra (mais específica) atropelaria as duas. -------------------------------------------------------------------------- */ @media (min-width: 881px) { body.v2 .painel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) 1.7fr minmax(0, 1fr); } } /* Mesma linha, sem exceção: `nowrap` nos dois níveis. O corpo dos números cede junto — 1.35rem × 3 não passa em tile nenhum. Vale também para o tile de veículos, que usa o mesmo `.kpi-split`: os dois ficam com a mesma régua. */ body.v2 .painel-kpis .kpi-split { flex-wrap: nowrap; gap: 10px; } body.v2 .painel-kpis .kpi-split-value { font-size: 1.25rem; } body.v2 .painel-kpis .kpi-split-label { font-size: 0.66rem; white-space: nowrap; } /* Convites é a única coluna que não sai do nosso log — a cor de "convite" do feed diz isso sem precisar de legenda. */ body.v2 #countConvites { color: #a78bfa !important; }