/* ========================================================================= 28/10 · Celular (até 760 px) — carregado por último no index.html. Barra lateral vira gaveta (mobile-connect.js); páginas com 16 px de margem e uma coluna. ========================================================================= */ .tc-menu-bt,.tc-menu-fundo{display:none} /* o tema é do Connect: avisa o navegador para não escurecer a página sozinho quando o celular está no modo escuro */ :root{color-scheme:light} :root[data-tema="escuro"]{color-scheme:dark} @media (max-width:760px){ :root{--tc-off:0px} body{padding-left:0} html.tc-menu-aberto,html.tc-menu-aberto body{overflow:hidden} /* ---------- gaveta ---------- */ .tc-side,html.tc-recolhida .tc-side{left:0;top:0;bottom:0;width:min(84vw,300px);transform:translateX(-105%);transition:transform .28s var(--tc-ease,ease); padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-left:calc(12px + env(safe-area-inset-left,0px));z-index:60;border-top:0} html.tc-menu-aberto .tc-side{transform:none;box-shadow:12px 0 40px rgba(0,0,0,.45)} .tc-menu-fundo{display:block;position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s} html.tc-menu-aberto .tc-menu-fundo{opacity:1;pointer-events:auto} /* na gaveta os nomes voltam (no tablet a barra é só de ícones) */ .tc-side .tc-marca-txt{display:flex} .tc-side .tc-marca-simbolo{display:none} .tc-side .tc-rot,.tc-side .tc-conta-menu span{display:inline} .tc-side .tc-conta-nm{display:grid} .tc-side .tc-conta-seta{display:block} .tc-nav .tc-secao,html.tc-recolhida .tc-nav .tc-secao{display:flex;justify-content:flex-start;padding:8px 12px} .tc-nav .tc-secao span,html.tc-recolhida .tc-nav .tc-secao span{display:inline} html.tc-recolhida .tc-nav .tc-secao::before{display:none} .tc-side .pa-nav-item{justify-content:flex-start} .tc-side [data-tc-recolher]{display:none} /* ---------- barra de cima ---------- */ .pa-topo.tc-topo{padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:8px} .tc-menu-bt{display:grid;place-content:center;gap:4px;width:40px;height:40px;flex:none;border:1px solid var(--tc-linha-2,#333);background:var(--tc-painel,#151515);cursor:pointer;padding:0} .tc-menu-bt span{display:block;width:18px;height:2px;background:var(--tc-texto,#fff);transition:transform .2s,opacity .2s} html.tc-menu-aberto .tc-menu-bt span:nth-child(1){transform:translateY(6px) rotate(45deg)} html.tc-menu-aberto .tc-menu-bt span:nth-child(2){opacity:0} html.tc-menu-aberto .tc-menu-bt span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- conteúdo ---------- */ .pa-conteudo{padding:0 max(16px,env(safe-area-inset-right,0px)) calc(88px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))} .pc-cab{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:14px;margin:6px 0 18px} .pc-cab>*{min-width:0;max-width:100%} .pc-cab h1{font-size:30px;gap:10px} .pc-cab p{font-size:14px} /* filtros em uma linha que rola para o lado */ .pc-cab .pc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px} .pc-cab .pc-chips::-webkit-scrollbar{display:none} .pc-cab .pc-chip{flex:none} } @media (max-width:760px){ /* ---------- Início ---------- */ #tela-dashboard{margin:0 -16px} .tc-faixa{margin-left:0} .tc-faixa-txt,:root:not([data-tema="escuro"]) .tc-faixa-txt{height:auto;padding:56px 16px 28px} .tc-kpis{grid-template-columns:1fr;gap:10px} } @media (max-width:760px){ /* banner: foto no topo com o robô; a saudação fica por cima da parte de baixo da foto (escurecida) */ .tc-faixa,:root:not([data-tema="escuro"]) .tc-faixa{background:#060606} .tc-faixa-fotos{bottom:auto;height:400px} .tc-faixa-fotos .pa-hero-img{transform-origin:70% 0%} .tc-faixa-fotos::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(6,6,6,0) 38%,rgba(6,6,6,.72) 72%,#060606 100%)} .tc-faixa::before{bottom:auto;height:400px;background:linear-gradient(90deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,.2) 55%,rgba(6,6,6,0) 80%)} .tc-faixa-txt,:root:not([data-tema="escuro"]) .tc-faixa-txt{padding-top:212px;padding-bottom:28px} .tc-saud{margin-bottom:44px} .tc-faixa::after,:root:not([data-tema="escuro"]) .tc-faixa::after{height:80px} .tc-kpis{gap:14px;position:relative} } @media (max-width:760px){ /* tema claro: o escuro termina com a saudação; os cards ficam no fundo claro */ :root:not([data-tema="escuro"]) .tc-faixa::after{display:none} :root:not([data-tema="escuro"]) .tc-kpis::before{content:"";position:absolute;left:-16px;right:-16px;top:-20px;bottom:-28px;z-index:-1;background:var(--tc-bg)} :root:not([data-tema="escuro"]) .tc-kpi,:root:not([data-tema="escuro"]) .tc-kpi:hover,:root:not([data-tema="escuro"]) .tc-kpi.ativo{ background:var(--tc-painel);border:1px solid var(--tc-linha);color:var(--tc-texto);-webkit-mask-image:none;mask-image:none;box-shadow:0 1px 2px rgba(0,0,0,.04)} :root:not([data-tema="escuro"]) .tc-kpis .tc-kpi.pa-kpi{border:1px solid var(--tc-linha)} :root:not([data-tema="escuro"]) .tc-kpi::before{display:none} :root:not([data-tema="escuro"]) .tc-kpi::after{background:linear-gradient(to bottom,rgba(247,255,63,.14),rgba(247,255,63,0) 70%)} :root:not([data-tema="escuro"]) .tc-kpi .k-ic{color:var(--tc-texto)} :root:not([data-tema="escuro"]) .tc-kpi .k-rot{color:var(--tc-texto)} :root:not([data-tema="escuro"]) .tc-kpi .k-sub{color:var(--tc-apoio)} :root:not([data-tema="escuro"]) .tc-kpi .k-num{color:var(--tc-texto)} :root:not([data-tema="escuro"]) .tc-kpi .k-num small{color:var(--tc-apoio)} :root:not([data-tema="escuro"]) .tc-kpi .k-barra{background:var(--tc-y2)} } @media (max-width:760px){ /* o painel não sobe por cima do banner no celular (escondia os cards do topo) */ .tc-grade,:root:not([data-tema="escuro"]) .tc-grade{margin:16px 16px 0} .tc-grade .tc-cab{padding:16px 16px 0;flex-wrap:wrap;gap:10px} } @media (max-width:760px){ html.tc-menu-aberto .cp-raiz{opacity:0;pointer-events:none} .cp-raiz{transition:opacity .2s} } @media (max-width:760px){ /* ---------- Minha frota ---------- */ .pc-frota{grid-template-columns:1fr;height:auto;min-height:0;gap:12px} .pc-lista{max-height:min(46vh,340px)} .pc-frota .pc-det{overflow:visible;grid-template-rows:auto auto} .pc-det .pc-topo{grid-template-columns:1fr;min-height:0} .pc-det .pc-palco{min-height:190px;max-height:230px} .pc-det .pc-kv{grid-template-columns:repeat(2,minmax(0,1fr))} .pc-baixo{grid-template-columns:1fr} .pc-mt-card{width:auto;left:0;right:0} .pc-mm{min-height:280px} } @media (max-width:760px){ /* ---------- Mapas e Indicadores: coluna única que não cresce com o conteúdo ---------- */ .pc-mapas,.pc-i-meio,.pc-i-hero,.pc-frota{grid-template-columns:minmax(0,1fr)} .pc-mapas>*,.pc-i-meio>*,.pc-i-hero>*{min-width:0} .pc-mapas .pc-lista{max-height:min(40vh,320px)} .pc-mapa-card{height:auto;min-height:420px} } @media (max-width:760px){ /* mapa de calor por hora: 24 colunas não cabem — rola para o lado dentro do card */ .pc-p-corpo:has(.pc-heat){overflow-x:auto;scrollbar-width:thin} .pc-heat{min-width:460px} /* cabeçalho do mapa (nome, robôs, 2D/3D) quebra em linhas */ #tela-mapas .pc-p-cab{flex-wrap:wrap;gap:10px 12px} #tela-mapas .pc-mapa-card{min-width:0} } @media (max-width:760px){ #tela-mapas .pc-mapa-box{min-height:min(62vh,460px)} /* legenda vai para o topo da planta (embaixo ficam os botões de zoom) */ #tela-mapas .pc-leg-pts{top:10px;bottom:auto;left:10px;right:auto} } @media (max-width:760px){ /* ---------- módulos ---------- */ /* "Retornar à página anterior" ficava embaixo da barra de cima (e do botão do menu) */ #tela-entrega .pa-entrega-menu-voltar,#tela-entrega .pa-entrega-destinos-cheio-voltar,#tela-entrega .pa-ativa-cheio-voltar{top:64px;left:16px} } @media (max-width:760px){ /* ---------- módulos · escolher pontos: em pilha (voltar, painel, mapa, status) ---------- */ #tela-entrega .pa-entrega-destinos-cheio{display:flex;flex-direction:column;position:relative;left:0;margin:0;width:100%;height:auto;min-height:0} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-voltar{position:relative;top:auto;left:auto;order:1;align-self:flex-start;margin:64px 16px 12px} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-painel{position:relative;top:auto;left:auto;right:auto;bottom:auto;order:2;width:auto;max-width:none;max-height:none;margin:0 16px;overflow:visible} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-mapa{position:relative;inset:auto;order:3;width:100%;height:min(64vh,520px);margin-top:14px} #tela-entrega .pa-entrega-destinos-cheio-mapa .pa-mapa-picker-viewport{height:100%} #tela-entrega .pa-entrega-menu,#tela-entrega .pa-entrega-menu-interno{height:auto;min-height:0} } @media (max-width:760px){ /* dica de mouse não serve no toque */ .pa-mapa-zoom-dica{display:none} } @media (max-width:760px){ /* ---------- módulos · tarefa em andamento (já vira uma coluna abaixo de 1100 px) ---------- */ #tela-entrega .pa-ativa-cheio{padding:116px 16px 16px} html #tela-entrega[data-ativa] .pa-ativa-cheio-corpo{margin-top:0} html #tela-entrega[data-ativa] .pa-ativa-cheio-mapa-card{min-height:300px} } @media (max-width:760px){ /* ---------- respiro: mais espaço entre blocos e campos no celular ---------- */ .pc-cab{gap:16px;margin-bottom:24px} .ag-grade,.pc-frota,.pc-mapas,.pc-i-meio,.pc-i-hero,.cf-grade,.cf-col{gap:20px} .pc-kv{gap:12px} .pc-kv div{padding:12px 14px} .cf-form{gap:18px} .cf-campo{gap:8px} .cf-linha{padding:14px 0} } @media (max-width:760px){ /* ---------- Início · cards dos robôs: um por linha, foto à esquerda ---------- */ .tc-robos,:root:not([data-tema="escuro"]) .tc-robos{margin:20px 16px 0} .tc-robos .tc-janela{padding:10px 16px 4px} .tc-cards{grid-template-columns:minmax(0,1fr);gap:12px} .tc-rc{display:grid;grid-template-columns:124px minmax(0,1fr);min-height:140px} .tc-rc.vago{display:none} .tc-cards .tc-rc-foto{height:auto;min-height:140px;border-right:1px solid var(--tc-linha)} .tc-cards .tc-rc-foto img{position:absolute;inset:0;padding:30px 10px 8px} .tc-cards .tc-rc-foto .tc-badge{left:8px;top:8px;right:8px;justify-content:center;height:22px;padding:0 8px;font-size:11px;overflow:hidden;text-overflow:ellipsis} .tc-rc-corpo{padding:14px 16px;min-width:0} .tc-rc h3{font-size:16px} .tc-rc .agora{margin:8px 0 12px;min-height:0} .tc-rc:hover{transform:none;box-shadow:none} } @media (max-width:760px){ .tc-robos .tc-cab{padding:18px 16px 0} .tc-robos .tc-corpo{padding:14px 0} .tc-robos .tc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 16px 2px} .tc-robos .tc-chips::-webkit-scrollbar{display:none} .tc-robos .tc-chips>*{flex:none} .tc-robos .tc-pe{padding:14px 16px 20px;flex-wrap:wrap;gap:10px} } @media (max-width:760px){ /* Início · visão em lista: só robô, estado e bateria */ .tc-tabela{table-layout:auto} .tc-tabela th:nth-child(3),.tc-tabela td:nth-child(3),.tc-tabela th:nth-child(5),.tc-tabela td:nth-child(5){display:none} .tc-tabela th,.tc-tabela td,.tc-tabela th:first-child,.tc-tabela td:first-child{padding:12px 8px} .tc-tabela th:first-child,.tc-tabela td:first-child{padding-left:0} .tc-tabela th:nth-child(4),.tc-tabela td:nth-child(4){padding-right:0} .tc-tabela .nome{gap:10px;min-width:0} .tc-tabela .nome .tc-rc-foto{flex:none;width:44px;height:44px} .tc-tabela .nome small{display:block;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tc-tabela .tc-badge{font-size:11px;padding:0 8px} .tc-tabela .tc-bat{gap:0;justify-content:flex-end} .tc-tabela .tc-bat b{min-width:0} .tc-tabela th:nth-child(4),.tc-tabela td:nth-child(4){text-align:right} .tc-tabela .nome .tc-rc-foto{width:40px;height:40px} .tc-tabela .tc-bat svg,.tc-tabela .tc-bat .barra{display:none} } @media (max-width:760px){ /* Início · mais respiro entre o gráfico de Operação e as notificações */ .tc-grade>#tcPainelNot{margin-top:24px;padding-top:20px} .tc-grade>#tcPainelNot::before{left:16px;right:16px} } @media (max-width:760px){ /* lista de notificações com rolagem própria menor: sobra mais tela para rolar a página com o dedo */ .tc-grade>#tcPainelNot{min-height:0;height:auto} #tcPainelNot .tc-not-in{position:static} .tc-not-lista{flex:none;max-height:264px;overscroll-behavior-y:auto} } @media (max-width:760px){ /* botão da assistente um pouco mais alto (longe da barra do navegador do celular) */ .cp-raiz{bottom:calc(32px + env(safe-area-inset-bottom,0px))} } @media (max-width:760px){ /* ---------- módulos · escolher robô: título abaixo do "Retornar", carrossel no pé da tela ---------- */ #tela-entrega .pa-entrega-menu:has(.pa-entrega-menu-cards.carrossel-ativo), #tela-entrega .pa-entrega-menu:has(.pa-entrega-menu-cards.carrossel-ativo) .pa-entrega-menu-interno{min-height:100vh;min-height:100dvh} #tela-entrega .pa-entrega-menu-conteudo:has(>.pa-entrega-menu-cards.carrossel-ativo){padding:124px 16px calc(20px + env(safe-area-inset-bottom,0px))} #tela-entrega .pa-entrega-menu-conteudo>.pa-entrega-menu-cards.carrossel-ativo{margin-top:auto} } @media (max-width:760px){ /* ---------- módulos · robô escolhido: robô e funções seguem lado a lado, em carrossel, no pé da tela ---------- */ #tela-entrega[data-estilo] .pa-entrega-menu:has(.ec-card), #tela-entrega[data-estilo] .pa-entrega-menu:has(.ec-card) .pa-entrega-menu-interno{min-height:100vh;min-height:100dvh} #tela-entrega[data-estilo] .pa-entrega-menu-conteudo:has(.ec-card){padding:124px 16px 28px} #tela-entrega[data-estilo] .pa-entrega-menu-conteudo:has(.ec-card) .pa-entrega-menu-titulo-bloco{margin-top:0} #tela-entrega[data-estilo] .pa-entrega-menu-cards:has(.ec-card){margin-top:auto} #tela-entrega[data-estilo] .ec-card{display:grid;grid-template-columns:min(78vw,300px) max-content;grid-template-rows:minmax(0,1fr) auto;column-gap:12px; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px;scroll-padding:0 16px;overscroll-behavior-x:contain} #tela-entrega[data-estilo] .ec-card::-webkit-scrollbar{display:none} #tela-entrega[data-estilo] .ec-palco{grid-column:1;grid-row:1;height:auto;min-height:200px;scroll-snap-align:start} #tela-entrega[data-estilo] .ec-nome{grid-column:1;grid-row:2} #tela-entrega[data-estilo] .ec-fns{grid-column:2;grid-row:1 / 3;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);grid-template-columns:none;gap:12px;margin:0} #tela-entrega[data-estilo] .ec-fn{min-height:0;height:100%;scroll-snap-align:start} } @media (max-width:760px){ /* Início · notificações paginadas (5 por página, connect.js): sem rolagem própria */ .tc-not-lista.paginada{max-height:none;overflow:visible} .tc-not-pe{padding:10px 16px 18px} .tc-not-pe .tc-pag-atual{display:inline-grid;place-items:center;grid-auto-flow:column;cursor:default} } @media (max-width:760px){ /* ---------- Minha frota · robôs em faixa lateral (arrasta para o lado) em vez de lista com rolagem ---------- */ #pgFrota .pc-lista,.pc-frota .pc-lista{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:max-content;align-items:stretch;column-gap:10px;row-gap:12px; max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 12px 14px;overscroll-behavior-x:contain} .pc-frota .pc-lista::-webkit-scrollbar{display:none} .pc-frota .pc-busca{grid-row:1;grid-column:1;position:sticky;left:0;top:auto;width:calc(100vw - 58px);margin:0 calc(70px - 100vw) 0 -12px;padding:12px 16px} .pc-frota .pc-grupo{grid-row:2;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 0;gap:6px;justify-content:center} .pc-frota .pc-grupo::after{display:none} .pc-frota .pc-item{grid-row:2;width:132px;grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:start;gap:8px;padding:10px;border:1px solid var(--tc-linha);scroll-snap-align:start} .pc-frota .pc-item .pc-foto{width:100%;height:84px} .pc-frota .pc-item>span:nth-child(2){min-width:0;width:100%} .pc-frota .pc-item b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pc-frota .pc-item.on{border-color:var(--tc-texto)} .pc-frota .pc-item.on::before{left:10px;right:10px;top:auto;bottom:-1px;width:auto;height:3px} } @media (max-width:760px){ /* ---------- módulos · barra do robô: nome + Trocar em cima; bateria, mapa e local embaixo em 3 colunas (rótulo + valor) ---------- */ /* 29/10: antes era apertada (o Trocar encostava na bateria) e a linha de baixo ficava solta, sem rótulos */ #tela-entrega .pa-entrega-menu-status{border-top:1px solid rgba(255,255,255,.1);background:rgba(10,10,10,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} #tela-entrega .pa-entrega-menu-status-interno{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.45fr);align-items:start;gap:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));flex-direction:initial} #tela-entrega .pa-entrega-menu-status-item{min-width:0;max-width:none;text-align:left;display:flex;flex-direction:column;gap:5px} #tela-entrega .pa-entrega-menu-status-item:nth-child(1){grid-column:1 / -1;grid-row:1;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)} #tela-entrega .pa-entrega-menu-status-item:nth-child(n+2){grid-row:2;padding:0 10px;border-left:1px solid rgba(255,255,255,.1)} #tela-entrega .pa-entrega-menu-status-item:nth-child(2){grid-column:1;padding-left:0;border-left:0} #tela-entrega .pa-entrega-menu-status-item:nth-child(3){grid-column:2} #tela-entrega .pa-entrega-menu-status-item:nth-child(4){grid-column:3;padding-right:0} #tela-entrega .pa-entrega-menu-status-rotulo{display:none;margin:0;font-size:10px;line-height:12px;letter-spacing:.06em;color:rgba(255,255,255,.45)} #tela-entrega .pa-entrega-menu-status-item:nth-child(n+2) .pa-entrega-menu-status-rotulo{display:block} #tela-entrega .pa-entrega-menu-status-item:nth-child(n+3) .pa-entrega-menu-status-valor{display:block;height:16px;font-size:12.5px;line-height:16px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tela-entrega .pa-entrega-menu-status-item:nth-child(1) .pa-entrega-menu-status-valor{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;height:32px;font-size:15px;line-height:1;font-weight:700;white-space:nowrap;min-width:0} #tela-entrega .pa-entrega-menu-status-dot{margin:0} #tela-entrega .pa-entrega-menu-status-trocar{margin-left:auto;flex:none;height:32px;padding:0 14px 0 11px;gap:6px;font-size:12.5px;line-height:1;border-radius:999px} #tela-entrega .pa-entrega-menu-status .pa-bateria{gap:6px;height:16px;align-items:center;min-width:0} #tela-entrega .pa-entrega-menu-status .pa-bateria-trilho{width:24px;flex:none} #tela-entrega .pa-entrega-menu-status .pa-bateria-numero{font-size:12.5px;line-height:16px;font-weight:600;color:rgba(255,255,255,.85)} } @media (max-width:760px){ /* ---------- módulos · escolher robô: pergunta em destaque e aviso de offline como etiqueta ---------- */ #tela-entrega[data-estilo] .ec-lista-cab{flex-direction:column;align-items:flex-start;gap:10px;padding:0 0 18px} #tela-entrega[data-estilo] .ec-lista-cab h3{font-size:26px;line-height:1.12;letter-spacing:-.02em;max-width:300px} #tela-entrega[data-estilo] .ec-lista-cab p{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%;box-sizing:border-box;margin:0;padding:8px 12px 8px 9px;font-size:12px;font-weight:600;line-height:1.3; color:rgba(255,255,255,.72);background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.12);border-radius:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #tela-entrega[data-estilo] .ec-lista-cab p::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#F7FF3F;color:#0A0A0A;font-size:11px;font-weight:800;line-height:1;margin-top:0} } @media (max-width:760px){ /* nos módulos a barra de cima deixa o toque passar (entrega-connect.css) — o botão do menu precisa receber */ body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo .tc-menu-bt{pointer-events:auto} /* 29/10: nos módulos o fundo é sempre escuro — o botão do menu acompanha a busca e o sino (antes ficava branco no tema claro) */ body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo .tc-menu-bt{width:34px;height:34px;border:0;background:rgba(12,12,12,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo .tc-menu-bt span{width:16px;background:#fff} } @media (max-width:760px){ /* ---------- módulos · escolher pontos: tudo cabe na tela, sem rolar (o mapa ocupa o que sobra) ---------- */ #tela-entrega .pa-entrega-destinos-cheio{flex:none;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;padding-top:54px;box-sizing:border-box} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-voltar{margin:8px 16px;flex:none} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-painel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 8px;align-items:center;flex:none;padding:12px 14px} #tela-entrega .pa-entrega-destinos-cheio-painel>*{grid-column:1 / -1;margin:0} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-entrega-passo-titulo{font-size:18px;line-height:1.2} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-entrega-passo-dica{display:none} #tela-entrega .pa-entrega-destinos-cheio-painel .md-linha-mapa{padding:6px 10px;min-height:0} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-secao-pontos{max-height:22vh;overflow:auto} #tela-entrega .pa-entrega-destinos-cheio-painel #botaoIniciarEntrega{grid-column:1;height:46px;min-height:0} #tela-entrega .pa-entrega-destinos-cheio-painel .ag-agendar{grid-column:2;width:auto;height:46px;min-height:0;padding:0 14px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapas-lista:empty{display:none} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-mapa{flex:1 1 auto;height:auto;min-height:0;margin-top:10px} /* 29/10: o mapa ganhou altura — topo mais enxuto: voltar menor, linha do mapa numa linha só, ordem da entrega como duas opções lado a lado (sem as frases de baixo), lista de pontos mais baixa e botões de 42px */ #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-voltar{margin:4px 16px 6px;height:34px;min-height:0;padding-top:0;padding-bottom:0} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-painel{gap:8px;padding:10px 12px} #tela-entrega .pa-entrega-destinos-cheio-painel>:empty{display:none} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-entrega-passo-titulo{font-size:16px} #tela-entrega .pa-entrega-destinos-cheio-painel .md-linha-mapa{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 10px;font-size:12px} #tela-entrega .pa-entrega-destinos-cheio-painel .md-linha-mapa>span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tela-entrega .pa-entrega-destinos-cheio-painel .md-linha-mapa .md-trocar-mapa{flex:none;height:28px;padding:0 10px;font-size:11.5px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-secao-pontos{max-height:min(21vh,180px);padding-right:4px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-secao-ordem{display:grid;grid-template-columns:1fr 1fr;gap:6px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-secao-ordem>.pa-secao-pontos-titulo{display:none} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao{margin:0;min-height:0;padding:9px 10px;gap:8px;align-items:center} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao small{display:none} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao strong{font-size:12.5px;line-height:1.2} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao{padding:9px 8px;gap:7px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao input{flex:none;width:16px;height:16px;margin:0} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao-texto{min-width:0} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-ordem-opcao strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* cartão do ponto na lista: arrastar, número, nome e X numa linha; campo, ligação e bandeja embaixo, alinhados ao número */ #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-card{display:grid;grid-template-columns:18px 26px minmax(0,1fr) 26px;align-items:center;gap:7px 8px;padding:9px 10px 10px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-arraste{grid-column:1;grid-row:1;width:18px;height:26px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-numero{grid-column:2;grid-row:1;width:26px;height:26px;font-size:12px} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-info{display:contents} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-info>*{grid-column:2 / -1;margin:0;min-width:0} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-info>.pa-etapa-ponto-nome{grid-column:3;grid-row:1;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-remover{grid-column:4;grid-row:1;width:26px;height:26px} #tela-entrega .pa-entrega-destinos-cheio-painel .ec-item-campo,#tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-item-input{height:36px;min-height:0} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-item-input{font-size:16px} /* 16px: o iPhone não dá zoom ao tocar no campo */ #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-info>.pa-link-telefonia{justify-self:start;width:auto;height:30px;min-height:0;padding:0 12px;font-size:12px} #tela-entrega .pa-entrega-destinos-cheio-painel .bj-campo{display:flex;align-items:center;justify-content:space-between;gap:10px} #tela-entrega .pa-entrega-destinos-cheio-painel .bj-rot{margin:0;font-size:10.5px} #tela-entrega .pa-entrega-destinos-cheio-painel .bj-opcoes{flex:1 1 auto;min-width:0;max-width:210px;grid-template-columns:minmax(50px,1.4fr) repeat(var(--bj-n,4),minmax(0,1fr))} #tela-entrega .pa-entrega-destinos-cheio-painel .bj-opcoes>button{height:30px} #tela-entrega .pa-entrega-destinos-cheio-painel #botaoIniciarEntrega,#tela-entrega .pa-entrega-destinos-cheio-painel .ag-agendar{height:42px} #tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-mapa{margin-top:8px} } /* ---------- 29/10 · mapa 2D dos módulos leve no celular Tudo o que obrigava o navegador a redesenhar o mapa inteiro a cada quadro sai no celular: a rota animada com brilho, as sombras dos nomes dos pontos e do marcador, o pulso dos pontos e a planta original escondida (fica só ocupando o lugar). Parado ou arrastando, o mapa vira uma camada só que a placa de vídeo move. */ @media (max-width:760px){ #entregaMapaZoomConteudo > img.md-com-contorno{visibility:hidden;filter:none;will-change:auto} #entregaMapaZoomConteudo .pa-entrega-trajeto polyline{filter:none;animation:none} #entregaMapaZoomConteudo .pa-mapa-picker-ponto-rotulo{box-shadow:none} #entregaMapaZoomConteudo .pa-mapa-picker-marcador,#entregaMapaZoomConteudo .pa-mapa-picker-marcador img{filter:none} #entregaMapaZoomConteudo .pa-mapa-picker-ponto.marcado::after{animation:none;opacity:.8} } /* ---------- 29/10 · chat da Bella no celular: folha que sobe do pé da tela (não cobre a tela toda) Fundo escurecido atrás (tocar nele fecha — mobile-connect.js), alça no topo, botão redondo some enquanto está aberto, sugestões numa faixa lateral e campo de mensagem acima da barra do celular. */ @media (max-width:760px){ .cp-raiz.aberto{z-index:120} .cp-raiz.aberto::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);animation:cpFundo .2s ease both} @keyframes cpFundo{from{opacity:0}} .cp-raiz.aberto .cp-fab{opacity:0;pointer-events:none;animation:none} .cp-painel{position:fixed;left:0;right:0;bottom:0;width:auto;height:min(66vh,580px);height:min(66dvh,580px);border-radius:20px 20px 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);transform-origin:50% 100%;animation:cpFolha .28s cubic-bezier(.2,.9,.3,1) both;box-shadow:0 -12px 40px rgba(0,0,0,.3)} .cp-painel.saindo{animation:cpFolhaFecha .19s ease-in both} @keyframes cpFolha{from{transform:translateY(100%)}to{transform:none}} @keyframes cpFolhaFecha{to{transform:translateY(100%)}} .cp-cab{position:relative;padding:22px 16px 14px;border-radius:20px 20px 0 0} .cp-cab::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--tc-linha-2)} .cp-ib{width:38px;height:38px} .cp-msgs{padding:16px;gap:12px} .cp-m{max-width:88%} .cp-m p{font-size:14.5px;padding:10px 14px} .cp-sug{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none;scroll-padding:0 16px} .cp-sug::-webkit-scrollbar{display:none} .cp-sug button{flex:none;white-space:nowrap;padding:9px 14px;font-size:13.5px} .cp-vazio{gap:14px} .cp-entrada{gap:8px;padding:10px 12px 12px;align-items:center} .cp-entrada textarea{min-height:44px;font-size:16px;padding:11px 14px;border-radius:22px} .cp-mic,.cp-env{width:44px;height:44px;border-radius:50%} } /* ---------- 29/10 · páginas principais com mais respiro no celular (só os espaços entre blocos; o recheio dos painéis continua igual) */ @media (max-width:760px){ /* Início */ .tc-kpis{gap:16px} .tc-grade{margin-top:28px} #tcMapaOp,#tcPainelRobos{margin-top:32px} /* cabeçalho das páginas (título, filtros, botões) */ .pc-cab{gap:18px;margin-bottom:28px} .ag-cab-dir{gap:12px} /* painéis empilhados: Minha frota, Mapas, Indicadores, Agenda */ .pc-frota,.pc-mapas,.ag-grade,.pc-i-hero,.pc-i-meio{gap:24px} .pc-i-hero,.pc-i-meio{margin-bottom:24px} .ag-cal-sem,.ag-cal-grade{gap:6px} /* Requisições */ .dv-abas{margin-bottom:20px} .dv-aba-desc{margin-bottom:20px} .dv-modo,.dv-barra{margin-bottom:16px} #dvResumo{margin-bottom:20px} .dv-vivo{gap:18px} /* Personalizações */ .pk-barra{margin-bottom:18px;row-gap:16px} .pk-abas{margin-bottom:18px} } /* ---------- 29/10 · Início: os dois cards (robôs ativos e tarefas) lado a lado no celular Ícone e número na mesma linha, o nome embaixo; a frase de apoio sai (não cabe na metade da tela). */ @media (max-width:760px){ .tc-kpis{grid-template-columns:1fr 1fr;gap:12px} .tc-kpi{grid-template-columns:auto 1fr;grid-template-areas:"ic num" "rot rot" "barra barra";column-gap:8px;row-gap:12px;padding:16px 16px 20px;min-width:0} .tc-kpi .k-ic{justify-self:start;align-self:center} .tc-kpi .k-ic svg{width:32px;height:32px} .tc-kpi .k-num{justify-self:end;font-size:40px} .tc-kpi .k-num small{font-size:14px} .tc-kpi .k-rot{align-self:start;font-size:13px;line-height:1.25} .tc-kpi .k-sub{display:none} .tc-kpi .k-barra{width:56%;margin-top:4px} } /* ---------- 29/10 · Início: robô do banner mais para a direita no celular (o recorte mostrava só a ponta direita da foto e o robô ficava encostado à esquerda). Sobrescreve o object-position que o dashboard.js põe em cada foto. */ @media (max-width:760px){ .tc-faixa-fotos .pa-hero-img[src*="hero-inicio.jpg"]{object-position:74% 22% !important} .tc-faixa-fotos .pa-hero-img[src*="hero-inicio-2.jpg"]{object-position:65% 0% !important} } /* ---------- 29/10 · Início, mapa da operação no celular: sem zoom, arrastar o dedo na vertical rola a página (antes o mapa "prendia" a rolagem); com zoom, o dedo volta a mover o mapa. Pinça continua dando zoom. */ @media (max-width:760px){ .tc-mo-palco[data-vista="2d"]:not(.vazio):not(.com-zoom){touch-action:pan-y} } /* ---------- 29/10 · card de tarefas do robô (toque no robô no mapa) compacto no celular Fica preso ao pé da tela (não cobre o robô no meio do mapa), cabeçalho menor e as tarefas viram etiquetas lado a lado; "Chamar até um ponto" abre a lista de pontos ocupando a linha toda. */ @media (max-width:760px){ .tq-card{left:10px !important;right:10px;top:auto !important;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;max-height:min(52vh,420px);max-height:min(52dvh,420px);padding:12px;gap:10px;border-radius:16px;transform-origin:50% 100%} .tq-cab{grid-template-columns:36px 1fr 30px;gap:10px} .tq-foto{width:36px;height:36px;border-radius:10px} .tq-cab>div{gap:2px} .tq-cab b{font-size:15px} .tq-lista{display:flex;flex-wrap:wrap;gap:6px} .tq-op{display:inline-flex;width:auto;align-items:center;gap:6px;min-height:0;height:36px;padding:0 12px 0 4px;border-radius:999px} .tq-op>svg{display:none} .tq-op b{font-size:12.5px;font-weight:700;white-space:nowrap} .tq-ic{width:28px;height:28px;border-radius:50%;background:none} .tq-ic svg{width:15px;height:15px} .tq-op.aberto{background:var(--tc-y2);border-color:var(--tc-y2);color:#0A0A0A} .tq-op.aberto .tq-ic svg{color:#0A0A0A} .tq-chamar{flex:1 0 100%;margin-top:0;border-top:1px solid var(--tc-linha);border-radius:10px} .tq-pontos{max-height:120px} body:has(.tq-card.aberto) .cp-raiz{opacity:0;pointer-events:none} } /* ---------- 29/10 · Mapas no celular: escolha do mapa numa faixa lateral (deslizar para o lado) em vez da lista que empurrava a planta para baixo. Cada mapa vira um card quadrado (miniatura em cima); o escolhido ganha borda e barra amarela. */ @media (max-width:760px){ #pgMapas .pc-mapas .pc-lista{flex-direction:row;flex-wrap:nowrap;gap:8px;max-height:none;overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:2px 16px 6px;border:0;background:none;box-shadow:none;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain} #pgMapas .pc-mapas .pc-lista::-webkit-scrollbar{display:none} #pgMapas .pc-mapa-item{flex:none;width:136px;aspect-ratio:1;grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:stretch;justify-items:start;gap:8px;padding:8px 8px 10px;border:1px solid var(--tc-linha);border-radius:0;background:var(--tc-painel);scroll-snap-align:start;overflow:hidden} #pgMapas .pc-mapa-item.on{border-color:var(--tc-texto);background:var(--tc-painel)} #pgMapas .pc-mapa-item.on::before{left:0;right:0;top:auto;bottom:0;width:auto;height:3px} #pgMapas .pc-mapa-item .pc-mini{width:100%;height:100%;min-height:0;border-radius:0} #pgMapas .pc-mapa-item>span:last-child{min-width:0;width:100%} #pgMapas .pc-mapa-item b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pgMapas .pc-mapa-item small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* ---------- 29/10 · Mapas no celular sem rolagem: a página ocupa exatamente a altura da tela — título, faixa de mapas e o card do mapa, com a planta ficando com todo o espaço que sobra. Sai a frase de apoio do título. */ @media (max-width:760px){ #pgMapas{display:flex;flex-direction:column;height:calc(100vh - 76px);height:calc(100dvh - 76px);overflow:hidden} #pgMapas>.pc-cab{flex:none;margin-bottom:16px} #pgMapas>.pc-cab p{display:none} #pgMapas>.pc-mapas{flex:1 1 auto;min-height:0;height:auto !important;grid-template-rows:auto minmax(0,1fr);gap:14px} #pgMapas .pc-mapa-card{min-height:0;grid-template-rows:auto minmax(0,1fr)} #pgMapas .pc-mapa-card .pc-p-cab{padding-top:12px;padding-bottom:10px} #tela-mapas #pgMapas .pc-mapa-box{min-height:0;height:100%} #pgMapas .pc-mapa-ctrl{left:14px;right:auto} /* zoom do lado esquerdo: o botão da Bella fica no canto direito */ } @media (max-width:760px){ /* 29/10: no celular o balão do ponto no mapa não aparece — o ponto já entra na lista "Pontos selecionados", onde se escreve o que vai e se remove (X) */ #tela-entrega .pa-mapa-ponto-popup{display:none !important} } @media (max-width:760px){ /* ---------- 29/10 · módulos · tarefa em andamento: tudo cabe na tela, o mapa fica com o que sobra ---------- Mesma ideia da tela de escolher pontos: voltar menor (antes descia 64px e caía em cima do título), título curto, cartão do robô enxuto, os 3 comandos numa fileira baixa e "Fazer outra entrega / Voltar" numa linha só. */ html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio{display:flex;flex-direction:column;flex:none;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;padding:58px 16px 10px;box-sizing:border-box} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-topbar{flex:none;margin:0 0 8px;height:auto} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-voltar{top:auto;left:auto;height:34px;min-height:0;padding-top:0;padding-bottom:0} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-corpo{flex:1 1 auto;min-height:0;margin:0;row-gap:8px;grid-template-rows:auto auto auto auto minmax(0,1fr) auto} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-headline{margin:0} html body #tela-entrega[data-ativa][data-modo] #entregaAtivaTitulo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0} html body #tela-entrega[data-ativa][data-modo] #entregaAtivaTitulo h2{margin:0;font-size:17px;line-height:1.15;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #tela-entrega[data-ativa][data-modo] #entregaAtivaTitulo h2::before{display:none} html body #tela-entrega[data-ativa][data-modo] #entregaAtivaTitulo .pa-kpi-status{flex:none;margin:0;position:static} /* cartão do robô */ html body #tela-entrega[data-ativa][data-modo] .ev-painel{gap:8px;padding:10px 12px;overflow:visible} html body #tela-entrega[data-ativa][data-modo] .ev-robo{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding-bottom:8px} html body #tela-entrega[data-ativa][data-modo] .ev-foto{width:40px;height:40px} html body #tela-entrega[data-ativa][data-modo] .ev-robo-txt b{font-size:15px} html body #tela-entrega[data-ativa][data-modo] .ev-robo-txt small{font-size:11.5px} html body #tela-entrega[data-ativa][data-modo] .ev-bat{width:54px;height:22px} html body #tela-entrega[data-ativa][data-modo] .ev-agora{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;padding:8px 10px} html body #tela-entrega[data-ativa][data-modo] .ev-agora b:empty{display:none} html body #tela-entrega[data-ativa][data-modo] .ev-agora em,html body #tela-entrega[data-ativa][data-modo] .ev-agora b{font-size:13.5px;line-height:1.2} html body #tela-entrega[data-ativa][data-modo] .ev-seg{height:6px} html body #tela-entrega[data-ativa][data-modo] .ev-seg-leg{font-size:10.5px} html body #tela-entrega[data-ativa][data-modo] .ev-trilho{max-height:64px;overflow:auto;margin:0} html body #tela-entrega[data-ativa][data-modo] .ev-trilho:has(>li:only-child){display:none} /* uma parada só: o "Agora" já diz onde está */ html body #tela-entrega[data-ativa][data-modo] .ev-trilho li{min-height:30px;column-gap:10px} html body #tela-entrega[data-ativa][data-modo] .ev-trilho b,html body #tela-entrega[data-ativa][data-modo] .ev-trilho small{font-size:12.5px} /* comandos: fileira baixa, ícone e texto lado a lado, sem a numeração 01/02/03 */ html body #tela-entrega[data-ativa][data-modo] .ec-cmds{gap:6px;margin:0} html body #tela-entrega[data-ativa][data-modo] .ec-cmds>.ec-cmd-principal:not(.md-cmd-travado),html body #tela-entrega[data-ativa][data-modo] .ec-cmd-sec{min-height:0;height:46px;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:0 6px;font-size:12px;line-height:1.1;text-align:left} html body #tela-entrega[data-ativa][data-modo] .ec-cmds>.ec-cmd-principal svg,html body #tela-entrega[data-ativa][data-modo] .ec-cmd-sec svg{flex:none;width:17px;height:17px} html body #tela-entrega[data-ativa][data-modo] .ec-cmds [data-ev-n]::before{display:none} /* mapa ao vivo ocupa o resto */ html body #tela-entrega[data-ativa][data-modo] #entregaAtivaMapaCard.pa-ativa-cheio-mapa-card{display:flex;flex-direction:column;min-height:0;height:auto;padding:8px;margin:0} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-mapa-card-cabecalho{flex:none;min-height:0;margin:0 0 6px;padding:0 0 0 4px} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-mapa-card-cabecalho .pa-ativa-card-titulo{font-size:10.5px;margin:0} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-mapa-expandir-btn{width:28px;height:28px} html body #tela-entrega[data-ativa][data-modo] #entregaMapaAoVivo{flex:1 1 auto;min-height:0;height:auto} /* próximas ações numa linha */ html body #tela-entrega[data-ativa][data-modo] .ec-proximas{margin:0} html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha{min-height:0;padding:8px 12px;gap:8px} html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha b{font-size:12.5px} html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha svg{width:16px;height:16px} /* a barra do robô repete o que o cartão já mostra — nesta tela ela sai */ /* 29/10: entrega logística (e as outras telas em andamento sem o cartão do robô) — "muita informação" no celular */ html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-subtitulo{display:none} /* o título repete o botão de voltar ("Comando de entrega …") e cortava ao lado da etiqueta — no celular fica só a etiqueta */ html body #tela-entrega[data-ativa][data-modo] #entregaAtivaTitulo h2{display:none} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-progresso{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;margin:0} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-progresso-linha{display:flex;align-items:center;gap:8px;min-width:0;padding:10px 12px;border:0} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-progresso-linha+.pa-ativa-progresso-linha{border-left:1px solid rgba(255,255,255,.08)} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-progresso-bolha{flex:none;width:26px;height:26px;font-size:12px} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-progresso-texto{display:grid;gap:2px;min-width:0} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-progresso-texto em{font-size:10.5px;line-height:1.2} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-progresso-texto strong{font-size:13px;line-height:1.2;overflow-wrap:anywhere} /* comando que a Pudu não deixa usar pela API não vira botão no celular — fica só o aviso curto com o cadeado */ html body #tela-entrega[data-ativa][data-modo] .ec-cmds .md-cmd-travado{display:none} html body #tela-entrega[data-ativa][data-modo] .ec-cmds .ec-cmd-secund:not(:has(>:not(.md-cmd-travado))){display:none} html body #tela-entrega[data-ativa][data-modo] .md-cmd-aviso{margin:0;font-size:11.5px;line-height:1.35;gap:6px} html body #tela-entrega[data-ativa][data-modo] .md-cmd-aviso svg{width:14px;height:14px} html body #tela-entrega[data-ativa][data-modo] .ec-proximas{display:grid;grid-template-columns:1fr 1fr;padding:0} html body #tela-entrega[data-ativa][data-modo] .ec-proximas .pa-ativa-card-titulo,html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha small,html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha .ec-seta{display:none} html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha+.ec-prox-linha{border-top:0;border-left:1px solid rgba(255,255,255,.08)} html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha b{font-size:12px;line-height:1.2} html body #tela-entrega[data-ativa][data-modo] .ec-prox-linha>span{min-width:0} #tela-entrega:has(.pa-ativa-cheio) .pa-entrega-menu-status{display:none} } @media (max-width:760px){ /* ---------- 29/10 · Tarefa customizada no celular (construtor-connect.css) ---------- */ /* galeria "Tarefas" */ .tz-raiz[data-modo="lista"] .tz-caixa{padding:16px 16px 28px} .tz-raiz .tz-cab{gap:12px;margin-bottom:16px} .tz-raiz .tz-titulo{font-size:30px;gap:10px} .tz-raiz .tz-cab p{margin:4px 0 0;font-size:12.5px;line-height:1.4} .tz-raiz .tz-x{flex:none;width:38px;height:38px} .tz-raiz .tz-grade .tz-grande{padding:16px;min-height:100px;gap:6px} .tz-raiz .tz-grande b{font-size:18px} .tz-raiz .tz-grande small{display:none} .tz-raiz .tz-sec{margin:20px 0 10px} .tz-raiz .tz-salva{grid-template-columns:38px minmax(0,1fr) auto;gap:12px;padding:12px} .tz-raiz .tz-salva-ic{width:38px;height:38px} .tz-raiz .tz-salva-t b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14.5px;line-height:1.25} .tz-raiz .tz-salva-t .tz-tag-padrao{margin-left:0} .tz-raiz .tz-salva-t small{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tz-raiz .tz-salva-acoes .tz-btn{height:36px;padding:0 12px} .tz-raiz .tz-vazio{display:block;padding:14px 16px;font-size:13px;line-height:1.5} /* construtor: barra de cima em duas linhas, blocos numa faixa lateral, roteiro no meio, verificação embaixo */ .tz-raiz[data-modo="construtor"] .tz-topo{flex-wrap:wrap;gap:8px;padding:10px 12px} .tz-raiz[data-modo="construtor"] .tz-voltar{height:38px;padding:0 12px} .tz-raiz[data-modo="construtor"] .tz-nome{flex:1 1 120px;min-width:0;width:auto;height:38px;font-size:16px} .tz-raiz[data-modo="construtor"] .tz-robo,.tz-raiz[data-modo="construtor"] .tz-beta,.tz-raiz[data-modo="construtor"] .tz-esp{display:none} .tz-raiz[data-modo="construtor"] .tz-topo>.tz-btn{flex:1 1 0;height:40px;justify-content:center} .tz-raiz[data-modo="construtor"] .tz-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto} .tz-raiz[data-modo="construtor"] .tz-paleta{display:flex;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:8px 12px;border-right:0;border-bottom:1px solid #262626;scrollbar-width:none} .tz-raiz[data-modo="construtor"] .tz-paleta::-webkit-scrollbar{display:none} .tz-raiz[data-modo="construtor"] .tz-paleta h4,.tz-raiz[data-modo="construtor"] .tz-paleta .tz-nota{display:none} .tz-raiz[data-modo="construtor"] .tz-bp{flex:none;width:auto;margin:0;grid-template-columns:22px auto;gap:8px;padding:7px 12px 7px 9px} .tz-raiz[data-modo="construtor"] .tz-bp small{display:none} .tz-raiz[data-modo="construtor"] .tz-bp b{font-size:12.5px;white-space:nowrap} .tz-raiz[data-modo="construtor"] .tz-bp-ic{width:22px;height:22px} .tz-raiz[data-modo="construtor"] .tz-bp-ic svg{width:15px;height:15px} .tz-raiz[data-modo="construtor"] .tz-palco{padding:14px 12px 24px} .tz-raiz[data-modo="construtor"] .tz-trilha{max-width:none} .tz-raiz[data-modo="construtor"] .tz-vazio-palco{margin:8px 0;padding:18px 14px;font-size:13px} .tz-raiz[data-modo="construtor"] .tz-api{display:none} .tz-raiz[data-modo="construtor"] .tz-lado{max-height:30vh;border-left:0;border-top:1px solid #262626} .tz-raiz[data-modo="construtor"] .tz-abas button{height:40px} .tz-raiz[data-modo="construtor"] .tz-nome{flex-basis:calc(100% - 130px)} .tz-raiz[data-modo="construtor"] .tz-passos::before{left:13px} .tz-raiz[data-modo="construtor"] .tz-passo{grid-template-columns:28px minmax(0,1fr);gap:8px} .tz-raiz[data-modo="construtor"] .tz-passo.recuo{margin-left:16px} .tz-raiz[data-modo="construtor"] .tz-num{width:28px;height:28px;font-size:12px} .tz-raiz[data-modo="construtor"] .tz-passo.recuo .tz-num{width:24px;height:24px;margin:2px} .tz-raiz[data-modo="construtor"] .tz-ponta{gap:8px;font-size:10.5px} .tz-raiz[data-modo="construtor"] .tz-ponta>svg,.tz-raiz[data-modo="construtor"] .tz-ponta>span:first-child{width:28px;height:28px;padding:6px} .tz-raiz[data-modo="construtor"] .tz-card-cab{padding:9px 8px 7px 10px;gap:8px} .tz-raiz[data-modo="construtor"] .tz-card-cab b{font-size:13.5px;line-height:1.2;min-width:0} .tz-raiz[data-modo="construtor"] .tz-cfg{padding:0 10px 10px} .tz-raiz[data-modo="construtor"] .tz-cfg select,.tz-raiz[data-modo="construtor"] .tz-cfg input{font-size:16px;min-width:0;max-width:100%} .tz-raiz[data-modo="construtor"] .tz-cfg input:not([type=checkbox]):not([type=radio]):not([type=number]){flex:1 1 100%} } @media (max-width:760px){ /* ---------- 29/10 · entrega logística no celular: dá para ver qual ponto é a coleta e qual é a entrega ---------- No mapa o ponto 1 (coleta) fica amarelo e o 2 (entrega) verde, cada um com a etiqueta embaixo (em cima fica o nome); no cartão da lista a etiqueta vai na linha do nome (antes caía numa linha solta embaixo). */ #tela-entrega[data-modo="logistica"] .pa-mapa-picker-ponto.marcado:is([title$="(1º na ordem)"],[title$="(2º na ordem)"])::before{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%); padding:3px 7px;font:800 9.5px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#0A0A0A;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.45)} #tela-entrega[data-modo="logistica"] .pa-mapa-picker-ponto.marcado[title$="(1º na ordem)"]::before{content:"Coleta";background:#F7FF3F} #tela-entrega[data-modo="logistica"] .pa-mapa-picker-ponto.marcado[title$="(2º na ordem)"]::before{content:"Entrega";background:#3DDC84} #tela-entrega[data-modo="logistica"] .pa-mapa-picker-ponto.marcado[title$="(2º na ordem)"]{background:#3DDC84;border-color:#1FA85A} #tela-entrega[data-modo="logistica"] .pa-mapa-picker-ponto.marcado[title$="(2º na ordem)"]::after{border-color:rgba(61,220,132,.7)} #tela-entrega[data-modo="logistica"] .pa-mapa-picker-ponto.marcado[title$="(2º na ordem)"] .pa-mapa-picker-ponto-numero{color:#062b14} /* cartão: arrastar · número · etiqueta · nome · X */ #tela-entrega[data-modo="logistica"] .pa-entrega-destinos-cheio-painel .pa-etapa-card{grid-template-columns:18px 26px auto minmax(0,1fr) 26px} #tela-entrega[data-modo="logistica"] .pa-entrega-destinos-cheio-painel .pa-etapa-info::before{grid-column:3;grid-row:1;margin:0;padding:4px 7px;font-size:9.5px;line-height:1;color:#0A0A0A;background:#F7FF3F} #tela-entrega[data-modo="logistica"] .pa-entrega-destinos-cheio-painel .pa-etapa-card:nth-child(2) .pa-etapa-info::before{background:#3DDC84;color:#0A0A0A} #tela-entrega[data-modo="logistica"] .pa-entrega-destinos-cheio-painel .pa-etapa-info>.pa-etapa-ponto-nome{grid-column:4} #tela-entrega[data-modo="logistica"] .pa-entrega-destinos-cheio-painel .pa-etapa-remover{grid-column:5} #tela-entrega[data-modo="logistica"] .pa-entrega-destinos-cheio-painel .pa-etapa-card:nth-child(2) .pa-etapa-numero{background:#3DDC84;color:#062b14} } @media (max-width:760px){ /* 29/10: "Escolha a tarefa" (rótulo dos cartões de função) ocupava sozinho uma coluna de 280px na faixa lateral — no celular sai; o subtítulo do módulo já pede para escolher */ #tela-entrega .ec-fns>.md-fns-rot{display:none} /* títulos longos dos módulos ("Tarefa customizada", "Entrega logística") passavam da tela: quebram em duas linhas */ html #tela-entrega[data-estilo] .pa-entrega-menu-conteudo .pa-modo-hero-titulo{white-space:normal !important;font-size:clamp(34px,11vw,52px) !important;line-height:1.02 !important;max-width:100%} } @media (max-width:760px){ /* ---------- 29/10 · módulos sem rolagem no celular: escolher robô e menu de funções cabem na tela ---------- (testado com 360×670, a área útil de um celular comum com a barra do navegador) */ html #tela-entrega[data-estilo] .pa-entrega-menu-conteudo{padding-top:108px !important;padding-bottom:12px !important} html #tela-entrega[data-estilo] .pa-entrega-menu-titulo-bloco{margin-bottom:14px !important;height:auto !important} html #tela-entrega[data-estilo] .pa-entrega-menu-conteudo .pa-modo-hero-titulo{font-size:clamp(36px,11.5vw,54px) !important;line-height:1 !important;margin:0 !important} html #tela-entrega[data-estilo] .pa-entrega-menu-conteudo .pa-modo-hero-titulo .barra{margin-right:12px} html #tela-entrega[data-estilo] .pa-modo-hero-sub{display:none} /* escolher robô: pergunta e Cancelar numa linha, aviso embaixo; foto do robô acompanha a altura da tela */ html #tela-entrega[data-estilo] .ec-lista-cab{display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:0 0 12px !important} html #tela-entrega[data-estilo] .ec-lista-cab h3{font-size:20px !important;max-width:none !important;margin:0} html #tela-entrega[data-estilo] .ec-lista-cab p{grid-column:1 / -1} html #tela-entrega[data-estilo] .ec-lista-cab .ec-cancelar{grid-column:2;grid-row:1;margin:0} html #tela-entrega[data-estilo] .ec-robo-foto{height:clamp(96px,calc(100dvh - 540px),150px) !important;margin-bottom:8px !important} #tela-entrega:has(.ec-lista-card) .pa-entrega-menu-status{display:none} /* menu de funções: palco do robô e cartões de função mais baixos */ html #tela-entrega[data-estilo] .ec-card .ec-palco{height:clamp(110px,calc(100dvh - 520px),200px) !important} html #tela-entrega[data-estilo] .ec-card .ec-nome{padding-top:4px !important;padding-bottom:12px !important} html #tela-entrega[data-estilo] .ec-fn{padding-top:20px !important;min-height:0 !important} } @media (max-width:760px){ /* ---------- 29/10 · Requisições no celular: mais limpa ---------- Sem as frases explicativas (subtítulo, descrição de cada aba, legenda do rodapé), "Ao vivo" ao lado do título, abas e filtros numa faixa lateral (antes os filtros ocupavam 3 linhas), resumo compacto e busca na largura toda. */ #pgDev>.pc-cab{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} #pgDev>.pc-cab p{display:none} #pgDev>.pc-cab .dv-ao-vivo{flex:none;height:28px;padding:0 10px;font-size:11.5px;border-radius:999px;align-self:center} #pgDev .dv-abas{gap:0;margin:0 -16px 14px;padding:0 10px} #pgDev .dv-aba{height:40px;padding:0 11px;font-size:13.5px} #pgDev .dv-aba-desc,#pgDev .dv-legenda{display:none} #pgDev .dv-modo{margin-bottom:10px} #pgDev .dv-modo button{height:28px;padding:0 14px;font-size:12.5px} #pgDev .dv-resumo{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px} #pgDev .dv-resumo>div{padding:10px 10px 9px;gap:0} #pgDev .dv-resumo>div>b{font-size:22px} #pgDev .dv-resumo span{font-size:11px;line-height:1.25} #pgDev .dv-resumo>.dv-resumo-ult{grid-column:1 / -1;display:flex;align-items:baseline;gap:8px;padding:9px 10px} #pgDev .dv-resumo-ult>span{flex:none} #pgDev .dv-resumo-ult em,#pgDev .dv-resumo-ult button{margin:0;font-size:12.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} #pgDev .dv-barra{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:12px} #pgDev .dv-barra>.pc-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none} #pgDev .dv-barra>.pc-chips::-webkit-scrollbar,#pgDev .dv-abas::-webkit-scrollbar{display:none} #pgDev .dv-barra>.pc-chips .pc-chip{flex:none;height:32px;padding:0 12px;font-size:12.5px} #pgDev .dv-barra-dir{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px} #pgDev .dv-barra-dir .dv-busca{grid-column:1 / -1;grid-row:1;width:100%;min-width:0;height:40px} #pgDev .dv-barra-dir .dv-busca input{font-size:16px} #pgDev .dv-barra-dir .dv-check{grid-column:1;grid-row:2;font-size:12px;min-width:0} #pgDev .dv-barra-dir .pc-btn{height:34px;padding:0 10px;font-size:12px} } /* 29/10: sem o aviso "Robôs offline não podem receber…" na escolha do robô (pedido do Lincoln) — o cartão do robô offline já mostra "Offline" */ #tela-entrega .ec-lista-cab>p{display:none !important} @media (max-width:760px){ /* ---------- 29/10 · Limpeza no celular: a lista de tarefas tinha duas rolagens (a seção com 140px e a lista dentro) e quase não dava para rolar — agora uma rolagem só, mais alta; o cartão da tarefa não usa o layout dos pontos ---------- */ #tela-entrega .pa-entrega-destinos-cheio-painel #mdPlanos{max-height:none;overflow:visible} #tela-entrega .pa-entrega-destinos-cheio-painel #mdPlanos .md-tarefas{max-height:min(22vh,190px);overflow-y:auto;overscroll-behavior:contain} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-card.md-plano{grid-template-columns:20px minmax(0,1fr) !important;align-items:center;gap:10px;padding:10px 12px} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano>.md-radio{grid-column:1;grid-row:1} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano>.pa-etapa-info{grid-column:2;grid-row:1} #tela-entrega .pa-entrega-destinos-cheio-painel .md-dd{min-width:0;max-width:100%} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano .pa-etapa-info{display:grid;gap:2px;flex:1 1 auto;min-width:0} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano .pa-etapa-info>*{grid-column:auto;grid-row:auto} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano .pa-etapa-info>.pa-etapa-ponto-nome{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;white-space:normal} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano small{font-size:11.5px;line-height:1.3} /* o mapa embaixo precisa continuar visível: sem os rótulos 1 · Mapa / 2 · Tarefa e sem a linha de escova/sucção no cartão */ #tela-entrega .pa-entrega-destinos-cheio-painel #mdPlanos .md-limpeza-bloco>.pa-secao-pontos-titulo{display:none} #tela-entrega .pa-entrega-destinos-cheio-painel #mdPlanos .md-limpeza-bloco+.md-limpeza-bloco{margin-top:8px} #tela-entrega .pa-entrega-destinos-cheio-painel .md-plano .lz-params{display:none} #tela-entrega .pa-entrega-destinos-cheio-painel .pa-etapa-card.md-plano{padding:8px 12px;margin-bottom:6px} #tela-entrega .pa-entrega-destinos-cheio-painel .md-dd-btn{min-height:40px;padding:6px 10px} /* 29/10: sem o aviso "O robô está no mapa X… Trocar o robô para este mapa" no celular (pedido do Lincoln): ocupava ~110px e empurrava o mapa para fora da tela. A troca de mapa continua pelo robô/app da Pudu ou no computador. */ #tela-entrega .pa-entrega-destinos-cheio-painel #mdPlanos .md-aviso-mapa{display:none} } @media (max-width:760px){ /* 29/10: na escolha de pontos / plano a barra do robô ficava abaixo da tela (a tela ocupava 100% da altura sozinha) e a página rolava para mostrá-la. A barra fica (pedido do Lincoln): a tela e a barra dividem a altura — a tela de escolha fica com o que sobra acima da barra, e o mapa encolhe junto. */ #tela-entrega .pa-entrega-menu-interno:has(>.pa-entrega-destinos-cheio){display:flex;flex-direction:column;flex:none;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden} #tela-entrega .pa-entrega-menu-interno>.pa-entrega-destinos-cheio{flex:1 1 auto;height:auto !important;max-height:none !important;min-height:0} #tela-entrega .pa-entrega-menu-interno:has(>.pa-entrega-destinos-cheio)>.pa-entrega-menu-status{flex:none} /* limpeza: no máximo duas tarefas à vista; a terceira em diante rola dentro da lista */ #tela-entrega .pa-entrega-destinos-cheio-painel #mdPlanos .md-tarefas{max-height:118px} } @media (max-width:760px){ /* ---------- 29/10 · módulos: "Retornar à página anterior" (e o voltar da tarefa em andamento) vira um ícone na barra de cima, ao lado do menu — o espaço que o botão ocupava volta para a tela ---------- */ html body #tela-entrega :is(.pa-entrega-menu-voltar,.pa-entrega-destinos-cheio-voltar,.pa-ativa-cheio-voltar){position:fixed !important;top:var(--tc-mb-top,9px) !important;left:var(--tc-mb-esq,54px) !important;right:auto !important;bottom:auto !important; z-index:36;width:var(--tc-mb-tam,34px) !important;height:var(--tc-mb-tam,34px) !important;min-height:0 !important;margin:0 !important;padding:0 !important;display:grid !important;place-items:center; font-size:0 !important;gap:0 !important;border:0 !important;border-radius:0 !important;background:rgba(12,12,12,.86) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden} html body #tela-entrega :is(.pa-entrega-menu-voltar,.pa-entrega-destinos-cheio-voltar,.pa-ativa-cheio-voltar) svg{position:absolute;top:50%;left:50%;width:22px !important;height:22px !important;margin:0 !important;padding:0 !important;background:none !important;color:#F7FF3F;transform:translate(-50%,-50%) !important} html body #tela-entrega :is(.pa-entrega-menu-voltar,.pa-entrega-destinos-cheio-voltar,.pa-ativa-cheio-voltar) :is(span,b,em){display:none !important} /* espaço liberado */ html #tela-entrega[data-estilo] .pa-entrega-menu-conteudo{padding-top:66px !important} html body #tela-entrega .pa-entrega-destinos-cheio{padding-top:60px !important} html body #tela-entrega[data-ativa][data-modo] .pa-ativa-cheio-topbar{height:0;margin:0;overflow:visible} } @media (max-width:760px){ /* ---------- 30/10 · Configurações > Teams e Slack */ .cf-entrada{font-size:16px} .cf-canal h2+.cf-linha{flex-wrap:wrap;gap:10px} .cf-canal h2+.cf-linha>div:first-child{flex:1 1 100%} }