/* Dashboard — plataforma-api. Resto dos tokens vem de design.css. */
body { background: var(--fundo); }
/* ---------------------------------------------------------------------
Topo — logo, navegação principal, busca/notificações/conta.
--------------------------------------------------------------------- */
.pa-topo {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: 28px;
padding: 14px 32px;
/* 01/09: pedido do Lincoln -- "a topbar na cor preta", acompanhando o
fundo da página que virou preto de verdade (--fundo). Era #101010. */
background: var(--fundo);
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background-color 0.32s ease, border-color 0.32s ease;
}
/* 31/08: a topbar tinha ficado escura só DENTRO do módulo Entrega (classe
`.entrega-ativa`, ligada/desligada em dashboard.js). Lincoln viu ao vivo e
pediu pra ficar "quase full preta" e valer como cor GERAL da navbar, não
só dentro da Entrega — por isso o escuro (agora ainda mais preto, #101010
em vez do #232322 de antes) virou a cor PADRÃO da topbar acima, e as
variantes claras de texto/ícone que só valiam com `.entrega-ativa` viraram
a cor padrão dos elementos abaixo. A função `definirTopoEscurecidoEntrega()`
(dashboard.js) continua sendo chamada nos mesmos lugares de antes, mas
agora é inofensiva (liga/desliga uma classe sem nenhum efeito visual
próprio) — não vale a pena arriscar remover as chamadas agora. */
.pa-topo.entrega-ativa { background: var(--fundo); }
.pa-marca { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pa-marca-logo { height: 30px; width: auto; object-fit: contain; }
.pa-marca-tagline {
font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.2px;
line-height: 1.15; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.16);
max-width: 90px;
}
.pa-nav { display: flex; align-items: center; gap: 26px; flex: 1; }
.pa-nav-item {
position: relative;
background: transparent; border: none; padding: 6px 0;
font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,0.65); cursor: pointer;
}
.pa-nav-item:hover { color: #fff; }
.pa-nav-item.ativo { color: var(--acento); }
.pa-nav-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); margin-left: 5px; vertical-align: middle; }
.pa-topo-direita { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pa-topo-icone-btn {
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.65);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pa-topo-icone-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pa-topo-icone-btn svg { width: 19px; height: 19px; }
.pa-conta { position: relative; margin-left: 6px; }
.pa-conta-botao {
display: flex; align-items: center; gap: 10px;
background: transparent; border: none; padding: 4px 6px 4px 4px; border-radius: var(--raio-pill);
cursor: pointer;
}
.pa-conta-botao:hover { background: rgba(255,255,255,0.12); }
.pa-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--acento); color: var(--acento-texto);
display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 800; flex: 0 0 auto;
}
.pa-conta-texto { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.pa-conta-nome { font-size: 13.5px; font-weight: 800; color: #fff; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-conta-sub { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); }
.pa-conta-chevron { width: 14px; height: 14px; color: rgba(255,255,255,0.5); flex: 0 0 auto; }
/* 31/08, item 11 do backlog ("todos os pop-ups... fade"): achado enquanto
procurava outras superfícies ainda abruptas além do popup do mapa (o
confirmado must-fix, ver .pa-mapa-ponto-popup acima) — este menu também
usava `[hidden]` puro. Correção trivial (só entrada, sem reescrever a
lógica de abrir/fechar em JS — que já funciona bem via `hidden` direto,
inclusive o "clicar fora fecha"): um "pop" leve só na ENTRADA via
animação CSS em `:not([hidden])` — `[hidden]` continua tirando o
elemento do layout instantaneamente na saída (não dá pra animar a saída
sem trocar `hidden` por classe, o que exigiria reescrever o listener de
"clicar fora" — fora de escopo pra esta correção pontual). */
.pa-conta-dropdown {
position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px;
background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m);
box-shadow: var(--sombra-2); padding: 6px; z-index: 40;
}
.pa-conta-dropdown:not([hidden]) { animation: pa-conta-dropdown-pop 0.16s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pa-conta-dropdown-pop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
.pa-conta-dropdown:not([hidden]) { animation: none; }
}
.pa-conta-dropdown button {
display: flex; align-items: center; gap: 8px; width: 100%;
background: transparent; border: none; padding: 10px 12px; border-radius: var(--raio-p);
font-size: 13.5px; font-weight: 700; color: var(--texto); cursor: pointer; text-align: left;
}
.pa-conta-dropdown button:hover { background: var(--erro-fundo); color: var(--erro); }
.pa-conta-dropdown button svg { width: 16px; height: 16px; }
/* ---------------------------------------------------------------------
Conteúdo — largo pra visão geral (dashboard), estreito pra fluxos
focados de uma tarefa só (entrega, em breve).
--------------------------------------------------------------------- */
.pa-conteudo { max-width: 1180px; margin: 0 auto; padding: 32px 32px 72px; }
.pa-largura-leitura { max-width: 640px; margin: 0 auto; }
.pa-tela { animation: pa-entrar var(--duracao-tela) ease both; }
@keyframes pa-entrar { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pa-tela[hidden] { display: none; }
/* Saída (mostrarTela em dashboard.js acrescenta esta classe na tela atual
antes de esconder e revelar a próxima) — junto com a animação de entrada
acima, forma a transição de fade "disfarçando" a troca em qualquer
mostrarTela() do projeto, não só numa tela específica.
Pedido do Lincoln (3ª vez): mesmo depois de aumentar duração/deslocamento
e corrigir um bug real na 2ª rodada (ver trocarConteudoComFade em
dashboard.js), ele continuou sem ver nenhuma animação. Por isso, de
propósito, esse fade de tela/passo NÃO respeita mais
`prefers-reduced-motion` (diferente do resto do projeto, que continua
respeitando essa preferência normalmente) — é a hipótese mais provável
pra "nenhuma animação aparece em lugar nenhum" mesmo com o código
corrigido: um ambiente com animações do sistema desligadas (comum em
Área de Trabalho Remota/VM do Windows) faz o Chrome reportar
`prefers-reduced-motion: reduce` sozinho, o que desligava esse efeito por
completo sem ninguém ter pedido isso. Como é uma ferramenta interna, e o
próprio Lincoln pediu esse fade especificamente (repetidas vezes), essa
troca específica ganhou prioridade sobre a preferência do sistema.
Também ganhou mais um reforço visual: além de opacidade/deslocamento,
agora também escala levemente (0.98→1), pra ficar ainda mais visível. */
.pa-tela-saindo { animation: none; opacity: 0; transform: translateY(-14px) scale(0.965); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
/* Mesmo fade, mas pra troca de CONTEÚDO dentro de uma tela só (ex.: os
passos do fluxo de Entrega — robô/menu/destinos/ativa — que não passam
por mostrarTela(), já que a tela em si não muda, só o miolo dela). Pedido
do Lincoln: "coloque uma animação de fade nas trocas de páginas" — os
passos internos também contam como "página" na cabeça do usuário, então
ganham o mesmo tratamento, via trocarConteudoComFade() em dashboard.js.
Valores idênticos aos de cima de propósito, pra ficar com a mesma cara
em todo o projeto (inclusive não respeitar `prefers-reduced-motion` — ver
comentário acima). */
.pa-fade-saida { opacity: 0; transform: translateY(-14px) scale(0.965); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.pa-fade-entrada { animation: pa-entrar var(--duracao-tela) ease both; }
/* ---------------------------------------------------------------------
Revelação ao entrar na tela / ao rolar — texto do hero, KPIs e os
cards das colunas "sobem" de baixo pra cima com fade, em vez de
simplesmente aparecerem. `configurarRevelacoes()` (dashboard.js) observa
cada `.pa-reveal` com IntersectionObserver e acrescenta `.visivel` na
primeira vez que o elemento entra na tela — o que já cobre os dois casos
pedidos: elementos que começam visíveis (hero, KPIs) revelam quase que
imediatamente ao carregar/atualizar a página, e os mais abaixo (cards das
colunas) revelam conforme o usuário rola até eles.
--------------------------------------------------------------------- */
.pa-reveal {
opacity: 0;
transform: translateY(34px);
transition: opacity 0.65s ease, transform 0.65s cubic-bezier(.16,.84,.44,1);
}
.pa-reveal.visivel { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.pa-reveal { opacity: 1; transform: none; transition: none; }
}
/* ---------------------------------------------------------------------
Hero — saudação (varia com o horário) + ilustração de robô.
--------------------------------------------------------------------- */
/* Full-bleed: quebra pra fora do .pa-conteudo (max-width 1180px) e ocupa a
largura inteira da janela, igual referência (foto de ponta a ponta, sem
cartão/borda). */
.pa-hero {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
/* Cancela o padding-top do .pa-conteudo (32px) — sem isso, uma faixa da
cor de fundo da página aparecia entre a barra de navegação e a foto. */
margin-top: -32px;
display: flex; align-items: center;
/* 01/09: pedido do Lincoln -- "diminuir o tamanho do banner até a linha
tracejada" (referência desenhada à mão marcando uma altura bem menor,
terminando perto do topo dos 3 cards de KPI). Era 420px, foi pra 300px.
Na mesma tarde ele pediu "aumenta uns 25%" -- 375px -- e depois "aumenta
mais, uns 40%" -- 525px. A partir daqui a altura vira uma variável só
(--pa-hero-h, design.css) porque `.pa-kpis` precisa da MESMA altura pra
calcular o quanto sobe por cima do banner (ver comentário lá). */
min-height: var(--pa-hero-h);
background-color: #0a0908; /* enquanto a foto carrega */
margin-bottom: 0;
overflow: hidden;
}
/* A foto agora é um real (em vez de background-image) pra dar corda
pro efeito de parallax no scroll (ver dashboard.js, configurarParallaxHero):
a caixa (.pa-hero-imgwrap) é mais alta que a área visível (130%) e o
excesso — o "corpo" do robô que fica cortado embaixo em repouso — só
aparece conforme a página rola, quando o JS desloca a caixa pra cima
dentro da área visível (que continua com altura fixa e overflow:hidden).
Dentro dela ficam DUAS imagens sobrepostas (não uma só): são os banners
alternados (configurarBannersAlternados em dashboard.js) — a cada
intervalo, a próxima foto entra com um crossfade por cima da atual.
Cada imagem tem seu próprio object-position (definido por JS, cada foto
tem o robô numa posição vertical diferente no quadro original). */
.pa-hero-imgwrap {
position: absolute; left: 0; top: 0;
width: 100%; height: 130%;
z-index: 0;
transform: translateY(0);
will-change: transform;
}
/* Zoom sutil e contínuo ("respirando") — pedido do Lincoln: "fazer um
efeito zoom nessa imagem do banner, mas apenas um pouco, cerca de 10% e
depois volta". Anima na própria `.pa-hero-img` (a foto), não em
`.pa-hero-imgwrap` (o wrapper) — o wrapper já tem seu `transform`
controlado direto por JS pro parallax de scroll (configurarParallaxHero
em dashboard.js); animar `transform` nele colidiria com esse JS (CSS
animation e `element.style.transform` do JS disputariam a mesma
propriedade). Como são elementos diferentes (uma foto dentro do
wrapper), os dois efeitos se somam sem conflito. `alternate` faz ir até
110% e voltar suavemente (sem "pulo" no final do ciclo).
2ª rodada: Lincoln continuou reportando que "não roda" mesmo depois de
confirmado (via medição direta do `transform` computado ao longo do
tempo) que a animação realmente está tocando o tempo todo — a explicação
mais provável não é um bug de código, é que 10% de zoom espalhado em 7s
por perna (14s o ciclo completo) é sutil o bastante pra passar
despercebido numa olhada rápida no painel. Duração reduzida pra 4s por
perna (8s o ciclo completo) — mesma amplitude de 10%, só mais rápida de
perceber — mantendo suave. As duas camadas do banner alternado
(`heroImgA`/`heroImgB`, ver `configurarBannersAlternados` em
dashboard.js) sempre ficam no MESMO instante da animação uma da outra
(nenhuma reinicia por conta própria, ambas correm desde o carregamento
da página), então mudar esta duração não desalinha o zoom com a troca
de foto — continuam sincronizadas em qualquer duração. */
.pa-hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 100% 22%;
opacity: 0;
transition: opacity 1.1s ease;
pointer-events: none;
animation: pa-hero-zoom 9s ease-in-out infinite alternate;
}
.pa-hero-img.ativa { opacity: 1; }
/* 26/08, 3ª rodada: Lincoln pediu "diminuir o tamanho do zoom para ele
ficar beeem sutil e mais devagar" -- amplitude reduzida de 10% pra 3,5%
(scale 1 -> 1.035) e duração de cada perna de 4s pra 9s (18s o ciclo
ida-e-volta completo, era 8s). */
@keyframes pa-hero-zoom {
from { transform: scale(1); }
to { transform: scale(1.035); }
}
/* 26/08: Lincoln reportou de novo "o zoom sutil ainda nao esta
funcionando, o vai e volta" e "ao trocar, uma animacao suave deve
ficar entre elas" (o crossfade tambem parecia nao suavizar) -- mesmo
padrao ja diagnosticado uma vez neste projeto pra outra animacao (ver
o comentario grande de SEM_MOVIMENTO em dashboard.js): o navegador
dele, rodando numa VM/Area de Trabalho Remota, as vezes reporta
"prefers-reduced-motion: reduce" por conta propria, sem ninguem ter
escolhido isso deliberadamente -- e essa regra abaixo desligava tanto
o crossfade (transition) quanto o zoom (animation) de uma vez so
quando isso acontece, o que bate exatamente com os dois sintomas
relatados juntos. Como isto e uma ferramenta interna e ele ja pediu
esse efeito repetidas vezes, o banner do Inicio passou a ignorar essa
preferencia do sistema (removida a regra que desligava
transition/animation em .pa-hero-img). */
/* Reforço de contraste sobre a foto — a própria imagem já é escura à
esquerda, isso aqui é só uma garantia pra qualquer recorte de tela. */
.pa-hero::before {
content: '';
position: absolute; inset: 0;
/* 03/09, pedido do Lincoln: "o banner não termina o lado esquerdo, tem um
fade e aí o banner termina de ser exibido pela direita mas pela esquerda
não" -- antes o degradê começava em 62% de opacidade (rgba(6,6,5,0.62)),
nunca chegando a preto de verdade -- a foto sempre ficava visível por
baixo do texto, só um pouco escurecida, então o lado esquerdo nunca
"terminava"/fechava em preto sólido como a faixa da base (.pa-hero::after,
que vai até var(--fundo) 100% opaco) já fazia. Primeiro stop trocado pra
`var(--fundo)` (preto sólido, mesma cor da faixa de baixo) -- agora o
lado esquerdo também fecha em preto de verdade bem na borda, só o
degradê continua abrindo pra foto nítida do mesmo jeito de antes. */
background: linear-gradient(90deg, var(--fundo) 0%, rgba(6,6,5,0.35) 45%, transparent 72%);
pointer-events: none;
z-index: 1;
}
/* 01/09: pedido do Lincoln -- "mudar o fundo de cinza pra preto mesmo, com
o banner terminando em um fade degradê que dá nesse fundo". Faixa extra
colada na base do banner, esmaecendo a foto até --fundo (preto) em vez
de cortar seco -- é o que dá a sensação de a foto "se dissolver" no
fundo da página, em vez de uma linha reta entre foto e fundo.
Mesma tarde, ajuste fino: a faixa começava alta demais (45% da altura do
banner) -- por volta do momento em que os cards de KPI apareciam
(puxados pra cima, ver `.pa-kpis` abaixo), o fundo atrás deles já tinha
escurecido quase todo (medido via Playwright: o topo dos cards caía uns
60% dentro da faixa de fade). O Lincoln pediu explicitamente "o banner
tem que começar a acabar só quando estiver abaixo dos cards" -- faixa
reduzida pra 20% (só a base mesmo) pra sobrar foto nítida por trás da
maior parte dos cards, escurecendo pra preto só perto da base deles em
diante. */
.pa-hero::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--fundo) 100%);
pointer-events: none;
z-index: 1;
}
.pa-hero-inner {
position: relative; z-index: 2;
width: 100%; max-width: 1180px; margin: 0 auto;
padding: 0 32px;
}
.pa-hero-texto { min-width: 0; max-width: 620px; }
.pa-hero-saudacao { font-size: 72px; line-height: 1.04; font-weight: 800; margin: 0 0 16px; letter-spacing: -1px; color: #fff; }
.pa-hero-sub { font-size: 18px; color: rgba(255,255,255,0.75); margin: 0 0 30px; font-weight: 600; }
.pa-hero-texto .pa-btn svg { width: 16px; height: 16px; }
/* ---------------------------------------------------------------------
Cabeçalho "de modo" (Entrega, Cruzeiro, Mapa, Demais funções, e os
outros itens de nav ainda em construção) — mesma referência visual da
Nubank pedida pelo Lincoln: imagem de fundo, título grande no canto
esquerdo nomeando o modo. Reaproveita as fotos do hero do Início (ainda
não existe uma foto própria por modo) com um overlay bem mais escuro —
aqui o fundo é só ambientação, o conteúdo real é o cartão abaixo, então
não precisa (nem deve) competir em contraste com o hero do Início.
--------------------------------------------------------------------- */
.pa-modo-hero {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
margin-top: -32px;
min-height: 220px;
display: flex;
align-items: center;
overflow: hidden;
margin-bottom: 28px;
}
.pa-modo-hero-fundo {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(6,6,5,0.86) 0%, rgba(6,6,5,0.72) 55%, rgba(6,6,5,0.55) 100%),
url('/plataforma-api/imagens/hero-inicio-2.jpg');
background-size: cover;
background-position: 100% 20%;
}
.pa-modo-hero-conteudo {
position: relative; z-index: 1;
width: 100%; max-width: 1180px; margin: 0 auto;
padding: 0 32px;
}
.pa-modo-hero-titulo { font-size: 40px; line-height: 1.05; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.6px; color: #fff; display: flex; align-items: center; }
.pa-modo-hero-titulo .barra { width: 5px; height: 30px; background: var(--acento); border-radius: 2px; display: inline-block; margin-right: 14px; }
.pa-modo-hero-sub { font-size: 14.5px; color: rgba(255,255,255,0.72); margin: 0; font-weight: 600; }
.pa-modo-corpo { padding-bottom: 8px; }
@media (max-width: 1024px) {
.pa-modo-hero { min-height: 180px; margin-top: -24px; }
.pa-modo-hero-conteudo { padding: 0 20px; }
.pa-modo-hero-titulo { font-size: 28px; }
}
/* ---------------------------------------------------------------------
Entrega — quadro cheio (passos "menu" e "robo"): componente próprio pra
bater com a referência visual que o Lincoln mandou — foto de fundo
cobrindo a tela toda, título grande à esquerda, cards à direita e uma
barra de status do robô da sessão fixa embaixo. Os dois passos
compartilham esse mesmo quadro (só o miolo — #entregaHeroInterno — troca
de conteúdo, com fade, ao alternar entre "escolher robô" e "menu de
ações"): pedido do Lincoln (2ª rodada de feedback) — escolher o robô tem
que acontecer "naquela telinha toda formatada", um card abrindo o outro,
não numa tela separada. Os passos seguintes (destinos/ativa) continuam
com o .pa-modo-hero enxuto + corpo branco, que já foi validado com o
Lincoln antes. Decisão confirmada: o menu principal do topo
(Início/Robôs/Chamados/Mapas/Tarefas) continua do jeito que está — só o
conteúdo desta tela mudou.
--------------------------------------------------------------------- */
.pa-entrega-menu {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
margin-top: -32px;
/* Cancela também o padding-bottom do .pa-conteudo (72px) — pedido do
Lincoln: "o background e as informações devem aparecer na tela toda,
sem essa faixa cinza". Sem isso, quando o conteúdo (foto + cards +
barra de status) é mais baixo que a janela, sobrava um respiro da cor
de fundo da página entre a barra de status e o rodapé da tela — em vez
disso, a foto agora estica até preencher a altura visível toda (100vh
menos a altura da barra de topo — 71px no desktop, 67px no tablet/
celular, onde o `.pa-topo` tem menos padding). */
margin-bottom: -72px;
min-height: calc(100vh - 71px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.pa-entrega-menu-fundo {
position: absolute; inset: 0;
/* Foto enviada pelo Lincoln especificamente pra este módulo ("Imagem de
fundo do módulo Entrega") — substitui a hero-inicio.jpg genérica que
estava aqui antes (reaproveitada só como estilo provisório). */
background:
linear-gradient(100deg, rgba(6,6,5,0.82) 0%, rgba(6,6,5,0.5) 45%, rgba(6,6,5,0.25) 100%),
linear-gradient(0deg, rgba(6,6,5,0.9) 0%, rgba(6,6,5,0.1) 32%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/hero-entrega.jpg');
background-size: cover;
background-position: 50% 40%;
/* 28/08: esta transição de opacity ficou "morta" por um bom tempo (a
regra `.sem-foto` que a acionava nunca chegou a ser usada de fato —
ver histórico). Agora tem uso de verdade: o Lincoln pediu uma animação
de troca em toda mudança de foto de fundo (vazia<->ativa, ou trocar de
robô) — `atualizarFundoEntrega()` (dashboard.js) liga `.pa-fundo-
trocando` (abaixo), espera este fade-out terminar, só ENTÃO troca a
imagem, e tira a classe de novo pro fade-in. A duração aqui precisa
bater com `DURACAO_TROCA_FUNDO_MS` em dashboard.js. */
transition: opacity 0.35s ease;
}
.pa-entrega-menu-fundo.pa-fundo-trocando {
opacity: 0;
}
/* 28/08: Lincoln pediu pra trocar o fundo genérico do módulo por uma foto
cinematográfica do robô específico durante a EXECUÇÃO da entrega ("o
background de entrega, quando for um BellaBot, vai mudar pra essa" +
"ficar com essa pegada durante a execução da tarefa") — por enquanto só
o BellaBot tem essa foto (os outros modelos continuam com o fundo
genérico `hero-entrega.jpg` de sempre, até ele mandar fotos equivalentes
dos outros modelos). A classe é ligada/desligada em
atualizarFundoEntrega() (dashboard.js) sempre que o passo muda pra
"ativa" (ou sai dele) — não dá pra confiar só na renderização inicial
porque, na troca normal de passo (destinos->ativa, ao confirmar "Iniciar
entrega"), só o MIOLO da tela recebe fade; a foto de fundo é propositalmente
preservada sem recriar pra não "piscar" entre passos (ver comentário
grande em renderizarEntrega()) — então o fundo precisa ser atualizado à
parte, no mesmo momento da troca de passo. */
.pa-entrega-menu-fundo.fundo-bellabot-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-bellabot.jpg');
background-size: cover;
background-position: 50% 35%;
}
/* 28/08, correção de escopo vazia/ativa: restaurante vazio (sem robô), pra
quando a tarefa do BellaBot ainda está sendo montada. O Lincoln mandou
uma foto só e disse "Kettybot e bellabot" -- serve pros dois modelos (a
entrada 'kettybot' em FUNDO_ENTREGA_POR_MODELO, dashboard.js, reaproveita
esta mesma classe, mesmo raciocínio já usado pro T300 no T150/T600). */
.pa-entrega-menu-fundo.fundo-bellabot-vazia {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-bellabot-vazia.jpg');
background-size: cover;
background-position: 50% 35%;
}
/* 28/08, mesma rodada: T300 (reaproveitada pro T150/T600 -- ver comentário
em resolverClasseFundoEntregaAtiva(), dashboard.js). Foto quadrada
(1536x1024, corredor de armazém) -- posição um pouco mais alta (28%) que
a do BellaBot porque o robô nesta foto já fica bem no centro vertical do
quadro, diferente da foto do Bella (mais larga, robô mais pra baixo). */
.pa-entrega-menu-fundo.fundo-t300-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-t300.jpg');
background-size: cover;
background-position: 50% 28%;
}
/* 28/08, correção de escopo vazia/ativa: mesmo corredor de armazém vazio,
pra quando a tarefa do T300/T150/T600 ainda está sendo montada. */
.pa-entrega-menu-fundo.fundo-t300-vazia {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-t300-vazia.jpg');
background-size: cover;
background-position: 50% 28%;
}
/* 28/08, rodada seguinte: FlashBot (corredor de hotel/lobby, robô já
parado no centro do quadro com a trilha/pin amarelos apontando o
destino -- a própria foto já remete à identidade visual do "trajeto"
que o app desenha no mapa). */
.pa-entrega-menu-fundo.fundo-flashbot-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-flashbot.jpg');
background-size: cover;
background-position: 50% 38%;
}
/* 28/08, rodada seguinte: KettyBot (restaurante escuro, robô já com a
tela de rosto "acordada" + trilha/pin amarelos igual ao FlashBot). */
.pa-entrega-menu-fundo.fundo-kettybot-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-kettybot.jpg');
background-size: cover;
background-position: 50% 38%;
}
/* 28/08, rodada seguinte: CC1 (robô de limpeza, corredor de supermercado
com câmaras refrigeradas à direita + trilha/pin amarelos). Robô mais
baixo/largo que os outros já cadastrados -- posição um pouco mais baixa
(42%) pra não cortar o topo das prateleiras/câmaras ao redor. */
.pa-entrega-menu-fundo.fundo-cc1-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-cc1.jpg');
background-size: cover;
background-position: 50% 42%;
}
.pa-entrega-menu-fundo.fundo-cc1-vazia {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-cc1-vazia.jpg');
background-size: cover;
background-position: 50% 42%;
}
/* 28/08, rodada seguinte: MT1 (robô de limpeza/varrição, estacionamento
subterrâneo com trilha/pin amarelos -- mesma identidade visual da faixa
de sinalização do próprio estacionamento). */
.pa-entrega-menu-fundo.fundo-mt1-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-mt1.jpg');
background-size: cover;
background-position: 50% 40%;
}
.pa-entrega-menu-fundo.fundo-mt1-vazia {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-mt1-vazia.jpg');
background-size: cover;
background-position: 50% 40%;
}
/* 28/08, rodada seguinte: PuduBot2 (laboratório/farmácia, bancadas com
microscópio e armários de vidro ao fundo + trilha/pin amarelos).
Posição um pouco mais alta (38%) pra não cortar as bancadas no topo da
foto. */
.pa-entrega-menu-fundo.fundo-pudubot2-ativa {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-pudubot2-ativa.jpg');
background-size: cover;
background-position: 50% 38%;
}
.pa-entrega-menu-fundo.fundo-pudubot2-vazia {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-pudubot2-vazia.jpg');
background-size: cover;
background-position: 50% 38%;
}
/* 28/08, correção de escopo (mesmo dia): o Lincoln esclareceu que o par de
fotos de cada modelo tem papéis diferentes -- "vazia" (ambiente sem o
robô) enquanto a tarefa ainda está sendo MONTADA (menu de ações,
destinos), "ativa" (com o robô) só quando ela já está em andamento ou
concluída. A ideia anterior (universal, só na tela de escolher robô) foi
descartada; esta classe agora é POR MODELO, ligada em
atualizarFundoEntrega() (dashboard.js) junto com o resto da lógica. */
.pa-entrega-menu-fundo.fundo-flashbot-vazia {
background:
linear-gradient(100deg, rgba(6,6,5,0.75) 0%, rgba(6,6,5,0.4) 45%, rgba(6,6,5,0.2) 100%),
linear-gradient(0deg, rgba(6,6,5,0.85) 0%, rgba(6,6,5,0.15) 30%, rgba(6,6,5,0) 55%),
url('/plataforma-api/imagens/entrega-fundo-flashbot-vazia.jpg');
background-size: cover;
background-position: 50% 38%;
}
/* Envolve .pa-entrega-menu-conteudo + .pa-entrega-menu-status — é o alvo
do fade quando "menu"/"robo" trocam entre si (trocarConteudoComFade em
dashboard.js): só este miolo re-renderiza, a foto de fundo (.pa-entrega-
menu-fundo, irmã dele, fora deste wrapper) nunca é recriada, então não
"pisca" — só os cards e a barra de status é que trocam, dando a
sensação de um card abrindo o outro na mesma tela. `flex:1` + coluna
repete a mesma estrutura que .pa-entrega-menu já tinha antes de existir
este wrapper, pra continuar preenchendo até o rodapé sem sobra cinza. */
.pa-entrega-menu-interno {
position: relative; z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
}
.pa-entrega-menu-conteudo {
flex: 1;
/* 1180px bastava enquanto só existia a coluna estreita de cards (até
520px) ao lado do título. Com o painel dos passos "destinos"/"ativa"
(até 640px — precisa de espaço pro mapa/etapas/comandos), bug real
encontrado nesta rodada: 1180px menos padding sobra só ~1116px de
espaço pros dois lados, e título(até 540px) + gap(28px) + painel
(640px) = 1208px — não cabe, quebra pra duas linhas. O detalhe: o
título raramente chega aos 540px de verdade (a largura dele encolhe
pro texto real), então esse estouro dependia do TAMANHO EXATO do
subtítulo de cada passo — "destinos" cabia numa linha só, "ativa" não,
por uma diferença de menos de 40px entre os dois textos. Resultado:
painel e título apareciam lado a lado num passo e empilhados no outro,
sem nenhuma mudança de código entre eles — só o texto do subtítulo
diferia. 1320px garante espaço (1256px úteis) pro pior caso (540+28+
640=1208) com folga, então o layout não fica na dependência do
tamanho exato de cada subtítulo. `.pa-entrega-menu-status-interno`
(mais abaixo) precisa do MESMO valor, senão as colunas do título/
painel não alinhariam mais com as da barra de status embaixo. */
width: 100%; max-width: 1440px; margin: 0 auto;
padding: 48px 32px 28px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
}
.pa-entrega-menu-mensagem { margin-top: 16px; }
/* Pedido do Lincoln: título "Entrega" maior e mais pra baixo (não colado no
topo da foto) — centraliza o bloco de título na altura do miolo da tela
(align-self:center, só nele — os cards continuam no topo, do jeito que
já estava certo pra ele) e aumenta a fonte bem além do .pa-modo-hero-
titulo padrão (usado também nos passos destinos/ativa e no "em breve",
que não devem crescer). */
/* Pedido do Lincoln (nova rodada): aumentar consideravelmente o título
"Entrega", a barrinha amarela ao lado dele e o subtítulo — já tinham
sido aumentados numa rodada anterior, mas ainda pequenos pra ele. */
.pa-entrega-menu-titulo-bloco { max-width: 540px; align-self: center; }
.pa-entrega-menu-titulo-bloco .pa-modo-hero-titulo { font-size: 92px; }
.pa-entrega-menu-titulo-bloco .pa-modo-hero-titulo .barra { width: 10px; height: 64px; }
.pa-entrega-menu-titulo-bloco .pa-modo-hero-sub { font-size: 20px; }
/* Pedido do Lincoln, com print marcando a posição errada: a coluna de
cards ficava colada no topo (align-items:flex-start, herdado de
.pa-entrega-menu-conteudo) enquanto o bloco de título ao lado já usa
align-self:center — os cards de ação, o carrossel e o card único de
escolha ficavam "flutuando" sem alinhar com a altura do título.
align-self:center aqui alinha os três estados na mesma referência
vertical do título, em vez de cada um numa altura diferente. */
.pa-entrega-menu-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; align-self: center; }
/* Foto do robô já escolhido, acima dos cards de ação — pedido do Lincoln
(print anotado circulando o vão vazio ali em cima). Mesmo visual "quadro
translúcido" dos cards abaixo, só que maior e centralizado. */
.pa-entrega-menu-foto-robo {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 16px 16px 18px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--raio-m);
backdrop-filter: blur(6px);
}
.pa-entrega-menu-foto-robo-img {
width: 86px; height: 86px; border-radius: var(--raio-p); overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.1); color: var(--acento);
}
.pa-entrega-menu-foto-robo-img img { width: 100%; height: 100%; object-fit: cover; }
.pa-entrega-menu-foto-robo-img svg { width: 38px; height: 38px; }
.pa-entrega-menu-foto-robo-nome { font-size: 15px; font-weight: 800; color: #fff; text-align: center; }
.pa-entrega-menu-card {
display: flex; align-items: center; gap: 12px;
width: 100%;
background: rgba(0,0,0,0.72);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--raio-m);
padding: 14px 16px;
cursor: pointer;
text-align: left;
backdrop-filter: blur(6px);
transition: background var(--duracao-rapida), border-color var(--duracao-rapida);
}
.pa-entrega-menu-card:hover { background: rgba(255,209,0,0.16); border-color: var(--acento-suave-2); }
.pa-entrega-menu-card[disabled] { opacity: 0.55; cursor: not-allowed; }
.pa-entrega-menu-card[disabled]:hover { background: rgba(0,0,0,0.72); border-color: rgba(255,255,255,0.14); }
.pa-entrega-menu-card-icone {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--raio-p);
background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
color: var(--acento);
}
.pa-entrega-menu-card-icone svg { width: 20px; height: 20px; }
/* Variante com a foto do robô (cards do passo "escolher robô") em vez do
ícone — a foto preenche o mesmo quadradinho arredondado. */
.pa-entrega-menu-card-icone-foto { padding: 0; overflow: hidden; }
.pa-entrega-menu-card-icone-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pa-entrega-menu-card-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-entrega-menu-card-texto .titulo { font-size: 14.5px; font-weight: 800; color: #fff; }
.pa-entrega-menu-card-texto .desc { font-size: 12px; color: rgba(255,255,255,0.66); font-weight: 600; }
.pa-entrega-menu-card-seta { width: 18px; height: 18px; color: rgba(255,255,255,0.5); flex: 0 0 auto; }
.pa-entrega-menu-vazio { color: rgba(255,255,255,0.66); font-size: 13.5px; font-weight: 600; margin: 0; }
/* Card único "Selecione o robô desejado" (nenhum robô escolhido ainda).
1ª tentativa (rodada anterior): esticar o card pra preencher a coluna
toda (`align-self:stretch` + `height:100%`) pra não deixar vão vazio.
Lincoln corrigiu com print marcando o tamanho certo: nem do tamanho
pequeno original, nem esticado até a barra de status — um tamanho
médio, centralizado na coluna (mesmo espírito do bloco de título ao
lado, que já usa `align-self:center`). Por isso `min-height` fixa (não
preenche mais a altura toda) e `align-self:center` em vez de `stretch`.
A seta lateral (usada nos outros cards pra indicar "mais opções à
direita") não faz sentido nesse layout centralizado, então fica
escondida aqui. */
.pa-entrega-menu-cards.selecionar-robo { align-self: center; max-width: 420px; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
padding: 44px 36px;
min-height: 340px;
}
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-icone { width: 64px; height: 64px; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-icone svg { width: 30px; height: 30px; }
/* 31/08, item 14 do backlog — causa raiz de verdade (re-investigada com
Playwright/getBoundingClientRect, não só lendo CSS): a correção de uma
rodada anterior (reverter uma regra de @media max-width:1024px) mexeu no
lugar ERRADO — o bug nunca foi de breakpoint estreito, reproduzia igual
em 1366/1440/1600/1920px. A regra BASE `.pa-entrega-menu-card-texto`
(mais acima, linha ~655) tem `flex: 1` — faz sentido pro layout em LINHA
dos outros cards de ação (empurra a seta pra ponta direita, ocupando o
espaço horizontal que sobra). Quando `.selecionar-robo` vira o card pra
COLUNA (`flex-direction:column`), esse MESMO `flex:1` passa a valer no
eixo VERTICAL — faz o bloco de texto esticar pra baixo até preencher
todo o espaço vertical que sobra dentro do `min-height:340px` do card
(medido: ~163px de altura pro bloco de texto, contra ~44px do conteúdo
real dele) — e como esse bloco não tem `justify-content` próprio, o
texto fica colado no TOPO da própria caixa esticada, deixando um vão
vazio embaixo (exatamente o sintoma reportado: "espaço vazio abaixo
muito discrepante"). `justify-content:center` no CARD (que já estava
certo) nunca teve chance de agir sobre o GRUPO ícone+texto, porque o
texto sozinho já ocupava sozinho quase toda a altura disponível.
Corrigido anulando o `flex:1` herdado (`flex: 0 0 auto`) só nesta
variante — o bloco de texto volta a ter só a altura do próprio conteúdo,
e o `justify-content:center` do card passa a centralizar de verdade o
grupo [ícone + texto] dentro da caixa, com folga igual acima/abaixo. */
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-texto { flex: 0 0 auto; align-items: center; gap: 6px; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-texto .titulo { font-size: 20px; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-texto .desc { font-size: 14px; max-width: 300px; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-seta { display: none; }
/* Carrossel de escolha do robô (3ª rodada de feedback do Lincoln): um robô
por vez, com setas pra navegar e um botão pra confirmar o que está em
exibição. `.pa-entrega-carrossel-viewport` corta o que passa dos 100% de
largura; `.pa-entrega-carrossel-trilha` é o trilho que deslisa via
transform (mexido diretamente pelo JS em entregaAtualizarCarrosselRoboDom(),
não recriado a cada clique de seta — é isso que faz a transição rodar).
Pedido do Lincoln (rodada seguinte): aumentar mais ainda, pra cobrir bem
o canto direito da tela (onde os cards de ação também ficam) — por isso
o `.pa-entrega-menu-cards` ganha a largura maior só quando o carrossel
está de fato na tela (classe `.carrossel-ativo`, aplicada em
entregaMenuInternoHtml()), sem alargar os cards de ação junto. */
.pa-entrega-menu-cards.carrossel-ativo { max-width: 520px; }
.pa-entrega-carrossel-robo { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 520px; }
.pa-entrega-carrossel-seta {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.24); background: rgba(0,0,0,0.6); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background var(--duracao-rapida), border-color var(--duracao-rapida);
}
.pa-entrega-carrossel-seta svg { width: 19px; height: 19px; }
.pa-entrega-carrossel-seta:hover { background: rgba(255,209,0,0.16); border-color: var(--acento-suave-2); }
.pa-entrega-carrossel-seta:disabled { opacity: 0.35; cursor: not-allowed; }
.pa-entrega-carrossel-viewport { flex: 1; min-width: 0; overflow: hidden; }
.pa-entrega-carrossel-trilha { display: flex; transition: transform 0.4s ease; }
.pa-entrega-carrossel-slide {
flex: 0 0 100%;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
background: rgba(0,0,0,0.72);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--raio-m);
padding: 36px 24px;
}
.pa-entrega-carrossel-slide.offline { opacity: 0.6; }
.pa-entrega-carrossel-slide-icone {
width: 84px; height: 84px; border-radius: var(--raio-p);
background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
color: var(--acento);
transition: transform 0.25s ease;
}
/* Pedido do Lincoln: passar o mouse sobre o robô do carrossel amplia
levemente o ícone/foto dele (não o card inteiro, pra não empurrar o
texto ao redor) — o movimento entre robôs (setas) já tinha sua própria
transição suave (`.pa-entrega-carrossel-trilha`, acima). */
.pa-entrega-carrossel-slide:not(.offline):hover .pa-entrega-carrossel-slide-icone { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
.pa-entrega-carrossel-slide-icone { transition: none; }
}
.pa-entrega-carrossel-slide-icone svg { width: 38px; height: 38px; }
.pa-entrega-carrossel-slide-icone.com-foto { padding: 0; overflow: hidden; }
.pa-entrega-carrossel-slide-icone.com-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* 28/08: indicador de status pulsante no canto do ícone/foto do robô,
pedido do Lincoln em cima de uma referência visual — reaproveita as
MESMAS cores/animações de .pa-chip (design.css: pa-pulso/pa-pulso-
vermelho), só num formato de bolinha sobre o ícone em vez de chip de
texto. A borda na cor do próprio card (mesma cor de fundo do
.pa-entrega-carrossel-slide) "recorta" a bolinha contra o ícone por
baixo, em vez de ficar com uma borda dura. */
.pa-entrega-carrossel-slide-icone-wrap { position: relative; display: inline-flex; }
.pa-entrega-carrossel-slide-status-dot {
position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%;
border: 3px solid rgba(0,0,0,0.92);
}
.pa-entrega-carrossel-slide-status-dot.disponivel,
.pa-entrega-carrossel-slide-status-dot.trabalhando {
background: var(--sucesso); animation: pa-pulso 1.7s ease-out infinite;
}
.pa-entrega-carrossel-slide-status-dot.carregando {
background: var(--alerta); animation: pa-pulso 1.7s ease-out infinite;
}
.pa-entrega-carrossel-slide-status-dot.offline {
background: var(--erro); animation: pa-pulso-vermelho 1.7s ease-out infinite;
}
.pa-entrega-carrossel-slide-status-dot.indisponivel { background: var(--erro); }
.pa-entrega-carrossel-slide-nome { font-size: 19px; font-weight: 800; color: #fff; }
.pa-entrega-carrossel-slide-modelo { font-size: 12.5px; color: rgba(255,255,255,0.6); font-weight: 700; margin-top: -8px; }
.pa-entrega-carrossel-slide-sn { font-size: 13px; color: rgba(255,255,255,0.66); font-weight: 600; }
/* Pedido do Lincoln: o botão "Escolher este robô" tem que ficar centrado
em relação ao card acima dele, não alinhado numa ponta enquanto o
contador fica na outra (era `justify-content: space-between`) — vira
coluna, os dois centralizados. */
.pa-entrega-carrossel-rodape { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 520px; margin-top: 18px; }
.pa-entrega-carrossel-contador { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.6); }
.pa-entrega-carrossel-rodape .pa-btn { min-width: 240px; }
/* Painel dos passos "destinos"/"ativa" (montar a tarefa/acompanhar) —
pedido do Lincoln: essas duas etapas tinham um visual totalmente
diferente do "menu" (cabeçalho pequeno de fundo liso, sem a foto, com um
corpo simples de leitura embaixo) — agora usam a MESMA moldura escura
translúcida dos cards de ação (`.pa-entrega-menu-card`), só que maior,
pra caber a lista de etapas + mapa + comandos. Os elementos internos
(`.pa-etapa-card`, `.pa-mapa-picker`, `.pa-toggle-ordem` etc.) continuam
com o próprio estilo claro de sempre — já são pensados pra flutuar sobre
um fundo escuro (ver --superficie/--superficie-2 em design.css), então
não precisam de tema escuro próprio, só o CONTAINER em volta é que
precisava virar essa moldura em vez do corpo branco de página. Altura
limitada + rolagem própria (em vez de deixar crescer livre): o quadro
cheio tem `overflow:hidden` (pela foto full-bleed), então sem isso um
painel mais alto que a tela ficaria cortado e inacessível. */
/* 28/08: Lincoln pediu pra aumentar o card do mapa (painel inteiro dos
passos "destinos"/"ativa") — max-width subiu de 640 pra 760px (e o
viewport do mapa, mais abaixo, de 340 pra 420px de altura). Precisou
subir junto o max-width de `.pa-entrega-menu-conteudo`/`.pa-entrega-
menu-status-interno` (1320→1440px) pra manter as contas do comentário
de lá batendo (título até 540px + gap 28px + este painel agora até
760px = 1328px, cabe dentro dos 1376px úteis de 1440px com padding). */
.pa-entrega-menu-painel {
width: 100%;
max-width: 760px;
max-height: calc(100vh - 260px);
overflow-y: auto;
background: rgba(0,0,0,0.72);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--raio-m);
padding: 26px 26px 24px;
backdrop-filter: blur(6px);
}
/* Barra de status do robô da sessão — full-bleed (mesmo truque de
left:50%/width:100vw/margin-left:-50vw usado em .pa-entrega-menu) pra
preencher a largura da tela toda, não só até 1180px. Pedido do Lincoln:
"vamos aumentar o card da bar pra ficar do tamanho da tela também" — o
fundo/borda precisam ir de ponta a ponta, mas o CONTEÚDO continua
centralizado e limitado a 1180px (.pa-entrega-menu-status-interno),
senão os itens ficariam esparramados/ilegíveis em telas muito largas. */
.pa-entrega-menu-status {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
z-index: 1;
border-top: 1px solid rgba(255,255,255,0.14);
background: rgba(6,6,5,0.6);
}
/* align-items mudou de center pra flex-start: o item "Bateria" tem um
bloco de valor mais baixo (so track+numero) que os outros (que tem o
texto do robo + o botao "Trocar", mais alto) - com "center" cada item
fica centralizado sozinho dentro da altura da linha inteira, entao o
rotulo "BATERIA" ficava mais baixo que "ROBO SELECIONADO"/"MAPA ATUAL"/
"LOCAL ATUAL". Com flex-start os 4 rotulos alinham no topo, uniforme. */
.pa-entrega-menu-status-interno {
display: flex; align-items: flex-start; gap: 24px;
/* Mesmo max-width de `.pa-entrega-menu-conteudo` (1440px, ver comentário
lá) — as duas colunas (título/painel em cima, robô/bateria/local
embaixo) precisam alinhar as bordas esquerda/direita. */
width: 100%; max-width: 1440px; margin: 0 auto;
padding: 16px 32px;
}
.pa-entrega-menu-status-item { flex: 1; min-width: 0; }
.pa-entrega-menu-status-rotulo { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.pa-entrega-menu-status-valor { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #fff; flex-wrap: wrap; }
/* 31/08: pedido do Lincoln — quando o robô não está sobre nenhum ponto
cadastrado (ver LIMIAR_PONTO_PROXIMO_METROS em dashboard.js), "Local
atual" mostra o texto honesto "Em um ponto não marcado no mapa" mais essa
referência menor/apagada com o ponto mais próximo, numa segunda linha
(flex-basis:100% força a quebra dentro do container flex acima, sem
precisar de uma estrutura HTML nova). */
.pa-entrega-menu-status-secundario { display: block; flex-basis: 100%; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* 26/08: mesmo pedido do Lincoln do chip principal (.pa-chip, em design.css)
-- verde pulsante com conexao, vermelho pulsante sem. Usa os keyframes
pa-pulso/pa-pulso-vermelho definidos em design.css (mesma pagina, ambos os
arquivos sao carregados juntos). */
.pa-entrega-menu-status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--erro); flex: 0 0 auto; animation: pa-pulso-vermelho 1.7s ease-out infinite; }
.pa-entrega-menu-status-dot.online { background: var(--sucesso); animation: pa-pulso 1.7s ease-out infinite; }
/* Botão de troca do robô — pedido do Lincoln: precisa ficar mais intuitivo
(ícone de troca + rótulo "Trocar", não só um chevron mudo) e colado ao
valor de "Robô selecionado" (é um filho de `.pa-entrega-menu-status-
valor` agora, não mais um item solto na ponta da barra). */
.pa-entrega-menu-status-trocar {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 5px;
margin-left: 6px;
padding: 4px 10px 4px 8px;
border-radius: var(--raio-pill);
border: 1px solid rgba(255,255,255,0.24);
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 12px; font-weight: 700;
cursor: pointer;
transition: background var(--duracao-rapida), border-color var(--duracao-rapida);
}
.pa-entrega-menu-status-trocar svg { width: 13px; height: 13px; }
.pa-entrega-menu-status-trocar:hover { background: rgba(255,209,0,0.16); border-color: var(--acento-suave-2); }
.pa-entrega-menu-status .pa-bateria-trilho { background: rgba(255,255,255,0.2); }
.pa-entrega-menu-status .pa-bateria-numero { color: #fff; }
@media (max-width: 1024px) {
.pa-entrega-menu { min-height: calc(100vh - 67px); margin-top: -24px; }
.pa-entrega-menu-conteudo { flex-direction: column; padding: 28px 20px 20px; }
/* Em coluna (empilhado), align-self passa a valer no eixo horizontal —
sem resetar pra flex-start aqui, o título ficaria centralizado na
largura da tela, o que não faz sentido empilhado. */
.pa-entrega-menu-titulo-bloco { align-self: flex-start; }
.pa-entrega-menu-titulo-bloco .pa-modo-hero-titulo { font-size: 56px; }
.pa-entrega-menu-titulo-bloco .pa-modo-hero-titulo .barra { width: 8px; height: 40px; }
.pa-entrega-menu-titulo-bloco .pa-modo-hero-sub { font-size: 17px; }
.pa-entrega-menu-cards,
.pa-entrega-menu-cards.carrossel-ativo,
.pa-entrega-menu-cards.selecionar-robo { max-width: none; }
/* 31/08, pedido do Lincoln (viu esse card numa tela estreita e achou as
informações desalinhadas): "centralizar as informações no card cinza"
-- a versão anterior deste ajuste trocava pra um layout em linha
(ícone + texto à esquerda + seta) só pra ganhar espaço vertical numa
tela estreita; revertido pro mesmo tratamento centralizado do
desktop (ícone em cima, texto embaixo, tudo centralizado), só com
padding/gap menores pra continuar compacto numa tela pequena. */
.pa-entrega-menu-cards.selecionar-robo { align-self: auto; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card {
height: auto;
min-height: 0;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 28px 18px;
gap: 14px;
}
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-texto { flex: 0 0 auto; align-items: center; }
.pa-entrega-menu-cards.selecionar-robo .pa-entrega-menu-card-seta { display: none; }
.pa-entrega-carrossel-robo,
.pa-entrega-carrossel-rodape { max-width: none; }
.pa-entrega-menu-painel { max-width: none; max-height: calc(100vh - 230px); }
.pa-entrega-menu-status-interno { flex-wrap: wrap; padding: 14px 20px; gap: 14px; }
}
@media (max-width: 480px) {
.pa-entrega-menu-status-interno { flex-direction: column; align-items: stretch; }
/* O botão "Trocar" agora mora dentro do próprio valor de "Robô
selecionado" (não mais solto na ponta da barra) — em telas estreitas,
se não couber ao lado do texto, cai pra linha de baixo em vez de
estourar a largura. */
.pa-entrega-menu-status-valor { flex-wrap: wrap; }
}
/* ---------------------------------------------------------------------
KPIs
--------------------------------------------------------------------- */
/* Corte limpo — o hero termina numa altura fixa e os cards começam direto
em seguida, sem sobrepor a foto (banner e cards são dois blocos distintos,
divisão nítida entre a foto escura e o fundo acinzentado dos cards). */
.pa-kpis {
/* 3 cards agora — "Tarefas ativas" saiu (a informação de tarefa já
aparece dentro do painel de "Em operação"). */
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
/* 01/09: pedido do Lincoln -- "subir os cards pra encaixar no fundo do
banner", com o banner "cortando" atrás deles e só o fundo preto
aparecendo abaixo. Como .pa-kpis é irmão do .pa-hero (não filho — o
overflow:hidden do hero não afeta isso) e vem DEPOIS dele no HTML, uma
margin-top negativa é o bastante pra puxar o grid pra cima por cima da
faixa de fade (.pa-hero::after) sem precisar de z-index: a ordem normal
de pintura já coloca quem vem depois por cima. Era +32px.
Mesma tarde, mais um pedido: "à medida que aumente o banner, suba os
cards junto" -- puxão trocado de um pixel fixo (-90px) pra uma FRAÇÃO
da altura do banner (--pa-hero-h, design.css: ~28,6% dela), assim os
dois crescem/encolhem sempre na mesma proporção sem eu precisar
recalcular esse número toda vez que o banner mudar de tamanho de novo.
Fração escolhida medindo com Playwright (posição real do topo/base dos
cards vs. o começo/fim do gradiente .pa-hero::after) até os cards
ficarem por cima da parte ainda nítida da foto, escurecendo pra preto
só a partir da base deles. */
margin-top: calc(var(--pa-hero-h) * -0.286); margin-bottom: 42px;
position: relative; z-index: 3;
}
/* Cada KPI é um botão (leva pra a área correspondente — Robôs/Tarefas/
notificações), com a mesma seta ">" usada nos Atalhos, pra deixar claro
que dá pra clicar. */
.pa-kpi {
position: relative;
width: 100%;
/* Sem isso, o item de grid não encolhe abaixo do min-content do texto
(ex.: "Notificações e alertas") e o card fica mais largo que a própria
coluna — estoura a tela em telas estreitas (2 colunas no mobile). */
min-width: 0;
/* Pedido do Lincoln (01/09): "esses cards em branco, vamos deixar eles da
cor da topbar" — escopado só a este componente (não mexe no token
global --superficie, usado em botões/inputs/outros cards do app
inteiro, ex.: login, Entrega). Borda no mesmo tom translúcido branco já
usado no resto do app (ao invés de var(--borda), clara demais pra um
fundo escuro). Texto interno dos 3 KPIs (rótulo/valor/status/seta)
ganhou cor própria logo abaixo — os tokens --texto/--texto-suave são
escuros, pensados pro card branco original, e ficariam ilegíveis aqui.
Mesma tarde, rodada seguinte: como esses 3 cards agora sobem por cima
da base do banner (.pa-kpis com margin-top negativa, ver mais abaixo),
o Lincoln pediu "preto transparente nos cards superiores" — em vez do
#101010 opaco, um vidro escuro de verdade (fundo semi-transparente +
desfoque do que está atrás), deixando entrever um pouco da foto/fade
do banner por trás em vez de tampar tudo com um retângulo sólido. Os
cards mais abaixo (robô/atalhos/tarefa) continuam sólidos de propósito
— não sobrepõem nada, então a transparência não teria função ali (só
pedido pros 3 de cima). */
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.1); border-radius: var(--raio-g);
padding: 18px 20px 18px; box-shadow: var(--sombra-1);
/* Pedido do Lincoln (01/09): ícone movido pro canto esquerdo do card —
`justify-content:space-between` (que empurrava o ícone pra ponta
direita, já que ele vinha depois do texto no DOM) trocado por
`align-items:center` simples; o ícone agora vem PRIMEIRO no HTML (ver
dashboard.js), o texto ganha `flex:1` pra ocupar o resto do espaço, e a
seta continua na ponta (mesmo padrão já usado em `.pa-atalho-item`,
reaproveitado aqui em vez de inventado do zero). */
display: flex; align-items: center; gap: 14px;
font-family: inherit; text-align: left; cursor: pointer;
transition: box-shadow var(--duracao-rapida) ease, transform var(--duracao-rapida) ease;
}
.pa-kpi:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
/* Card com o painel aberto embaixo — mesmo destaque visual do hover, só
que fixo enquanto o painel estiver expandido. */
.pa-kpi.ativo { border-color: var(--acento-suave-2); box-shadow: var(--sombra-2); }
.pa-kpi.ativo .pa-kpi-seta { transform: rotate(90deg); color: var(--acento-forte); }
.pa-kpi-seta { transition: transform var(--duracao-tela) ease, color var(--duracao-rapida) ease; }
/* Deixou de ser `position:absolute` (só fazia sentido com o ícone solto na
ponta direita) — agora é só mais um item da fileira flex, sempre no fim
por causa do `flex:1` do `.pa-kpi-texto` ao lado. */
.pa-kpi-seta { flex: 0 0 auto; width: 15px; height: 15px; color: rgba(255,255,255,0.35); }
.pa-kpi-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pa-kpi-rotulo { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.pa-kpi-valor { font-size: 28px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 10px; }
.pa-kpi-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.55); }
.pa-kpi-status .bolinha { position: relative; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.pa-kpi-status.verde .bolinha { background: var(--sucesso); } .pa-kpi-status.verde { color: var(--sucesso); }
.pa-kpi-status.amber .bolinha { background: var(--alerta); } .pa-kpi-status.amber { color: var(--alerta); }
.pa-kpi-status.vermelho .bolinha { background: var(--erro); } .pa-kpi-status.vermelho { color: var(--erro); }
.pa-kpi-status.neutro .bolinha { background: var(--texto-fraco); }
/* Pedido do Lincoln: a bolinha de "X online agora" (verde) e a de "robô
com bateria baixa" (vermelho, dentro do KPI de alertas) também devem
pulsar — mesmo efeito de anel (`pa-piscar`, já usado no selo de "Em
operação" acima) só que aqui direto na própria bolinha, via `::before`
com `background:currentColor` (pega a cor certa sozinho, verde ou
vermelho, sem precisar duplicar a regra). Não pulsa em "amber"/"neutro"
nem nos chips de status dos cards de robô (esses usam .pa-chip, uma
classe diferente) — só aqui, nos 2 casos que o Lincoln pediu. */
.pa-kpi-status.verde .bolinha::before,
.pa-kpi-status.vermelho .bolinha::before {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
background: currentColor;
animation: pa-piscar 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.pa-kpi-status .bolinha::before { animation: none; opacity: 0; }
}
.pa-kpi-icone {
position: relative;
width: 42px; height: 42px; border-radius: var(--raio-p); flex: 0 0 auto;
/* Pedido do Lincoln (01/09): "todos os cards brancos... inclusive os
ícones" — o selo trocou do chip creme (var(--superficie-2), pensado
pro card branco original) pra um vidro escuro sutil, mesma família do
`.pa-kpi`/`.pa-topo` (leve tom translúcido em vez de idêntico ao fundo,
só pra continuar reconhecível como um selo separado). Cor do ícone
(var(--acento-forte), dourado) já tinha contraste bom sobre escuro,
não mudou. */
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--acento-forte);
display: flex; align-items: center; justify-content: center;
}
.pa-kpi-icone svg { width: 20px; height: 20px; }
/* "Em operação" tinha um tratamento diferente dos outros 2 KPIs (um
indicador vivo isolado — bolinha + pulso — pedido do Lincoln numa rodada
anterior, em vez do ícone-em-selo). Quando não há nenhum robô operando
(0, o caso mais comum), essa bolinha ficava cinza e sem pulso — sem
nenhum ícone, destoando visualmente dos outros 2 cards (que sempre têm
um selo com ícone) e lendo como "ícone quebrado/faltando". Lincoln pediu
pra arrumar — agora esse card usa o MESMO selo com ícone dos outros
(`#i-atividade`), sempre presente; o "indicador vivo" continua existindo,
só que como uma bolinha pequena com pulso no canto do selo — some por
completo (não fica cinza) quando não há nenhum robô operando agora. */
.pa-kpi-icone-pulso {
position: absolute; top: -3px; right: -3px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--sucesso);
}
.pa-kpi-icone-pulso::before {
content: ''; position: absolute; inset: -5px; border-radius: 50%; background: var(--sucesso);
animation: pa-piscar 1.6s ease-out infinite;
}
@keyframes pa-piscar { 0% { transform: scale(0.5); opacity: 0.55; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.pa-kpi-icone-pulso::before { animation: none; opacity: 0; }
}
/* Painel do KPI — pop-up centrado na tela (não mais um acordeão embutido
entre os KPIs e as colunas), com fundo escurecido atrás. Cada card abre
"na própria página" (sem navegar pra outra tela), com animação de abrir
(fade do fundo + o card subindo/crescendo levemente) e fechar (inverso).
Um só aberto por vez — abrir outro card fecha o anterior primeiro. */
.pa-kpi-painel {
position: fixed; inset: 0; z-index: 50;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(6, 6, 5, 0);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, background 0.25s ease, visibility 0s linear 0.25s;
}
.pa-kpi-painel.aberto {
opacity: 1;
visibility: visible;
pointer-events: auto;
background: rgba(6, 6, 5, 0.55);
transition: opacity 0.25s ease, background 0.25s ease;
}
/* 01/09, pedido do Lincoln: "quero excluir o branco desse painel" — este é
o popup COMPARTILHADO por todos os KPIs ("Robôs online", "Em operação",
"Alertas") e pelo "Detalhes do robô" (clique num card do carrossel) —
mudar aqui vale pros dois. Mesma técnica/cor dos cards já escurecidos
(#101010 + borda translúcida). Todo texto/chip interno (rótulo, linhas
da lista, campos do detalhe, métricas) ganhou cor/fundo próprios logo
abaixo — os tokens claros (--superficie(-2)/--texto(-suave/-fraco))
eram pensados pro popup branco original. */
.pa-kpi-painel-caixa {
width: 100%; max-width: 420px; max-height: min(520px, 80vh);
overflow-y: auto;
background: #101010; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--raio-g);
/* Rede de segurança: qualquer texto interno SEM cor própria (ex.:
`.pa-detalhe-robo-nota` sem variante verde/vermelho, usado pros avisos
de "sem dado"/"disponível só no módulo de Limpeza") herdava
var(--texto) do body inteiro (escuro, pensado pro popup branco
original) e ficava quase invisível aqui — em vez de caçar cada
elemento sem cor um por um, um `color` claro na própria caixa cobre
qualquer descendente que não tenha a própria cor definida. */
color: rgba(255,255,255,0.85);
padding: 20px 22px 22px; box-shadow: var(--sombra-2);
transform: translateY(22px) scale(0.97);
opacity: 0;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.25s ease;
}
.pa-kpi-painel.aberto .pa-kpi-painel-caixa { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.pa-kpi-painel, .pa-kpi-painel-caixa { transition: opacity 0.15s ease; transform: none; }
}
.pa-kpi-painel-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pa-kpi-painel-titulo { font-size: 15px; font-weight: 800; margin: 0; color: #fff; }
.pa-kpi-painel-fechar {
background: transparent; border: none; color: rgba(255,255,255,0.4); cursor: pointer;
padding: 7px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pa-kpi-painel-fechar:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pa-kpi-painel-fechar svg { width: 16px; height: 16px; }
.pa-kpi-painel-lista { display: flex; flex-direction: column; gap: 8px; }
.pa-kpi-painel-linha {
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--raio-m); padding: 10px 12px;
}
.pa-kpi-painel-linha-foto {
width: 34px; height: 34px; border-radius: var(--raio-p); background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; color: var(--acento-forte);
}
.pa-kpi-painel-linha-foto img { width: 100%; height: 100%; object-fit: contain; }
.pa-kpi-painel-linha-foto svg { width: 16px; height: 16px; }
.pa-kpi-painel-linha-texto { flex: 1; min-width: 0; }
.pa-kpi-painel-linha-nome { font-size: 13px; font-weight: 800; color: #fff; }
.pa-kpi-painel-linha-detalhe { display: block; font-size: 11.5px; color: rgba(255,255,255,0.55); font-weight: 600; margin-top: 2px; }
.pa-kpi-painel-linha-detalhe.vermelho { color: var(--erro); }
.pa-kpi-painel-linha-detalhe.verde { color: var(--sucesso); }
.pa-kpi-painel-linha-detalhe.amber { color: var(--alerta); }
.pa-kpi-painel-linha .pa-chip { flex: 0 0 auto; font-size: 10.5px; padding: 4px 9px; }
/* 26/08: painel "Todos os robôs" (Entrega) -- cada linha agora é um