/* =========================================================================
   Taskr Connect — Entrega, etapa 1 do novo visual (02/10/2026).
   Lista de robôs + tela de funções (card único com o robô grande).
   Padrão Connect: cantos retos, preto translúcido, contorno amarelo fino que
   some pra baixo, ícones amarelos. A barra de status de baixo NÃO muda.
   ========================================================================= */

/* coluna da direita um pouco mais larga pro card novo */
.pa-entrega-menu-cards:has(.ec-card),.pa-entrega-menu-cards:has(.ec-lista-card){max-width:420px;width:420px;gap:0}

/* card base (contorno Connect) */
.ec-card,.ec-lista-card{position:relative;background:linear-gradient(to bottom,rgba(12,12,12,.84),rgba(12,12,12,.72));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ec-card::before,.ec-lista-card::before{content:"";position:absolute;inset:0;padding:1px 1px 0;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,rgba(247,255,63,.5) 0%,rgba(247,255,63,.18) 35%,rgba(255,255,255,.06) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* seta + selo de status + bateria (compartilhados) */
.ec-seta{color:rgba(255,255,255,.45);display:grid;place-items:center;transition:transform .15s,color .15s}.ec-seta svg{width:16px;height:16px}
.ec-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:700;width:max-content}
.ec-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ec-badge.disponivel{background:rgba(34,197,94,.14);color:#4ADE80}
.ec-badge.trabalhando{background:rgba(247,255,63,.13);color:#F7FF3F}
.ec-badge.carregando{background:rgba(91,155,240,.15);color:#8DB8F5}
.ec-badge.indisponivel{background:rgba(245,165,36,.15);color:#FBBF24}
.ec-badge.offline{background:rgba(255,255,255,.07);color:rgba(255,255,255,.5)}
.ec-bat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap}
.ec-bat svg{width:15px;height:15px;color:rgba(255,255,255,.45)}
.ec-bat i{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;display:block}
.ec-bat i b{display:block;height:100%;border-radius:3px;background:#22C55E}
.ec-bat.baixa{color:#FCA5A5}.ec-bat.baixa i b{background:#F25F5C}
.ec-bat.sem{font-weight:600;color:rgba(255,255,255,.45)}

/* ---------- lista de robôs ---------- */
.ec-lista-card{display:flex;flex-direction:column;max-height:calc(100vh - 260px)}
.ec-lista-cab{position:relative;padding:22px 22px 14px}
.ec-lista-cab h3{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff;padding-right:70px}
.ec-lista-cab p{margin:4px 0 0;font-size:12.5px;color:rgba(255,255,255,.5)}
.ec-cancelar{position:absolute;top:20px;right:20px;height:30px;padding:0 12px;border-radius:15px;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ec-cancelar:hover{border-color:rgba(247,255,63,.5)}
.ec-lista{flex:1;min-height:0;overflow:auto;padding:0 12px 6px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:#3A3A3A transparent}
.ec-robo{display:grid;grid-template-columns:52px 1fr auto 18px;align-items:center;gap:14px;padding:10px 12px 10px 10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.ec-robo:hover:not(:disabled){background:rgba(255,255,255,.06);border-color:rgba(247,255,63,.35)}
.ec-robo:hover:not(:disabled) .ec-seta{color:#F7FF3F;transform:translateX(3px)}
.ec-robo.atual{border-color:rgba(247,255,63,.45)}
.ec-robo:disabled{opacity:.42;cursor:not-allowed}
.ec-robo-foto{width:52px;height:52px;display:grid;place-items:center;background:radial-gradient(circle at 50% 70%,#2A2A2A,#161616);overflow:hidden}
.ec-robo-foto img{max-width:86%;max-height:90%;object-fit:contain}.ec-robo-foto svg{width:26px;height:26px;color:#F7FF3F}
.ec-robo-t{display:grid;gap:3px;min-width:0}
.ec-robo-t b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-robo-t small{font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-vazio{margin:8px 10px 14px;font-size:13px;color:rgba(255,255,255,.6)}
.ec-lista-pe{padding:12px 22px 16px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.5)}

/* ---------- tela de funções ---------- */
.ec-palco{position:relative;height:250px;background:radial-gradient(ellipse 58% 50% at 50% 80%,rgba(247,255,63,.13),rgba(247,255,63,0) 70%),radial-gradient(circle at 50% 65%,#202020,rgba(14,14,14,0) 70%)}
.ec-palco img{position:absolute;inset:6% 0 0 0;margin:auto;width:100%;height:94%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 22px 26px rgba(0,0,0,.7));animation:ecSobe .5s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,#000 93%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,#000 93%,transparent 100%);mask-composite:intersect}
.ec-palco>svg{position:absolute;inset:0;margin:auto;width:110px;height:110px;color:#F7FF3F}
.ec-luz{position:absolute;bottom:2%;left:50%;width:58%;height:26px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(247,255,63,.45),rgba(247,255,63,0));filter:blur(4px)}
@keyframes ecSobe{from{opacity:0;transform:translateY(14px)}}
.ec-nome{padding:14px 22px 18px;text-align:center;display:grid;justify-items:center}
.ec-nome h3{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
.ec-nome small{color:rgba(255,255,255,.5);font-size:12.5px}
.ec-chips{display:flex;gap:10px;align-items:center;margin-top:10px;justify-content:center}
.ec-fns{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.07)}
.ec-fn{display:grid;grid-template-columns:44px 1fr 18px;align-items:center;gap:14px;padding:15px 20px;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.ec-fn+.ec-fn{border-top:1px solid rgba(255,255,255,.05)}
.ec-fn:hover{background:rgba(255,255,255,.05)}.ec-fn:hover .ec-seta{color:#F7FF3F;transform:translateX(3px)}
.ec-fn-ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(247,255,63,.35);color:#F7FF3F}.ec-fn-ic svg{width:20px;height:20px}
.ec-fn.prim .ec-fn-ic{background:#F7FF3F;border-color:#F7FF3F;color:#0A0A0A}
.ec-fn-t b{display:block;font-size:15px;font-weight:700}.ec-fn-t small{display:block;margin-top:2px;color:rgba(255,255,255,.5);font-size:12.5px}
.ec-fn:focus-visible,.ec-robo:focus-visible{outline:2px solid #F7FF3F;outline-offset:-2px}

/* ---------- 02/10 · Entrega em tela cheia: o módulo ocupa a janela toda
   (inclusive por trás da sidebar, que continua flutuando por cima) e a barra
   do topo fica transparente, só com a busca e o sino. O conteúdo começa
   depois da sidebar (padding-left = --tc-off), pra nada ficar escondido. */
body:has(#tela-entrega:not([hidden])){overflow:hidden}
#tela-entrega:not([hidden]){position:fixed;inset:0;z-index:25;overflow-y:auto;overflow-x:hidden;background:#0A0A0A}
#tela-entrega .pa-entrega-menu{left:0;width:100%;margin:0;min-height:100vh}
#tela-entrega .pa-entrega-menu-interno{padding-left:var(--tc-off);min-height:100vh}
#tela-entrega .pa-entrega-menu-conteudo{padding-top:96px}
#tela-entrega .pa-entrega-menu-status{left:0;width:auto;margin-left:calc(-1 * var(--tc-off));padding-left:var(--tc-off)}
body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo{position:fixed;left:var(--tc-off);right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:35}

/* ---------- botão "Retornar à página anterior" (todas as etapas da Entrega) */
#tela-entrega .pa-entrega-destinos-cheio-voltar,#tela-entrega .pa-ativa-cheio-voltar{
  position:absolute;top:22px;left:calc(var(--tc-off) + 32px);z-index:6;
  display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 5px;
  border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(12,12,12,.62);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:border-color .2s,background .2s}
#tela-entrega .pa-entrega-destinos-cheio-voltar svg,#tela-entrega .pa-ativa-cheio-voltar svg{
  box-sizing:content-box;width:14px;height:14px;padding:8px;border-radius:50%;
  background:rgba(247,255,63,.12);color:#F7FF3F;transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
#tela-entrega .pa-entrega-destinos-cheio-voltar:hover,#tela-entrega .pa-ativa-cheio-voltar:hover{border-color:rgba(247,255,63,.45);background:rgba(20,20,20,.75);color:#fff}
#tela-entrega .pa-entrega-destinos-cheio-voltar:hover svg,#tela-entrega .pa-ativa-cheio-voltar:hover svg{background:#F7FF3F;color:#0A0A0A;transform:translateX(-2px)}

/* ---------- palco da foto do robô: sem o halo amarelo (destoava da foto);
   luz neutra suave + sombra de chão escura, como um produto em vitrine */
.ec-palco{background:radial-gradient(ellipse 55% 60% at 50% 58%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%)}
.ec-luz{bottom:3%;width:52%;height:22px;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));filter:blur(3px)}
.ec-palco img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.55));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%)}

/* ---------- lista de robôs agrupada por modelo */
.ec-grupo{display:flex;flex-direction:column;gap:6px}
.ec-grupo+.ec-grupo{margin-top:10px}
.ec-grupo-rot{display:flex;align-items:center;gap:10px;padding:6px 2px 2px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ec-grupo-rot em{font-style:normal;color:#F7FF3F;letter-spacing:.04em}
.ec-grupo-rot::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
/* busca e sino por cima da foto: vidro escuro, igual ao botão Retornar */
body:has(#tela-entrega:not([hidden])) .tc-topo .tc-busca-btn,body:has(#tela-entrega:not([hidden])) .tc-topo .tc-sino{background:rgba(12,12,12,.62);border-color:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body:has(#tela-entrega:not([hidden])) .tc-topo .tc-busca.aberta{background:rgba(12,12,12,.75);border-color:rgba(255,255,255,.14)}
body:has(#tela-entrega:not([hidden])) .tc-topo .tc-busca input{color:#fff}

/* =========================================================================
   02/10 (rodada 2) — correções + comando ativo no padrão Connect
   ========================================================================= */

/* Botão "Retornar" não respondia: a barra do topo (fixa e transparente na
   Entrega) ficava por cima dele e pegava o mouse. Agora só a busca e o sino
   recebem clique; o resto da barra deixa o mouse passar. */
body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo{pointer-events:none}
body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo .tc-busca,
body:has(#tela-entrega:not([hidden])) .pa-topo.tc-topo .tc-sino-wrap{pointer-events:auto}

/* No comando ativo o botão fica no fluxo, acima do título (não flutuando por cima dele) */
#tela-entrega .pa-ativa-cheio-voltar{position:relative;top:auto;left:auto}

/* ---------- transição suave entre as etapas (lista → funções → mapa → comando) */
#tela-entrega .pa-fade-saida{opacity:0;transform:translateX(-28px);filter:blur(6px);transition:opacity .3s ease,transform .3s ease,filter .3s ease}
#tela-entrega .pa-fade-entrada{animation:ecEtapa .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes ecEtapa{from{opacity:0;transform:translateX(32px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* os cards entram logo depois do título, um pouco em cascata */
#tela-entrega .pa-fade-entrada .ec-card,#tela-entrega .pa-fade-entrada .ec-lista-card,
#tela-entrega .pa-fade-entrada .pa-ativa-cheio-card,#tela-entrega .pa-fade-entrada .pa-ativa-comando-item{animation:ecCard .6s cubic-bezier(.2,.8,.2,1) both}
#tela-entrega .pa-fade-entrada .pa-ativa-cheio-coluna-direita .pa-ativa-cheio-card:nth-child(2),#tela-entrega .pa-fade-entrada .pa-ativa-comando-item:nth-child(2){animation-delay:.06s}
#tela-entrega .pa-fade-entrada .pa-ativa-cheio-coluna-direita .pa-ativa-cheio-card:nth-child(3),#tela-entrega .pa-fade-entrada .pa-ativa-comando-item:nth-child(3){animation-delay:.12s}
#tela-entrega .pa-fade-entrada .pa-ativa-comando-item:nth-child(4){animation-delay:.18s}
@keyframes ecCard{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- comando ativo */
/* sem a vinheta antiga (no tema claro ela virava uma "elipse" branca em volta da tela) */
#tela-entrega .pa-fundo-vinheta::after{display:none}
#tela-entrega .pa-ativa-cheio{padding:22px 32px 16px} /* 26/10: a barra de status de baixo já ocupa o próprio espaço (estava sobrando 104 px e a tela rolava) */

/* título igual ao "Entrega" das outras etapas: barrinha amarela à esquerda */
#tela-entrega .pa-ativa-cheio-headline{max-width:560px}
#tela-entrega .pa-ativa-cheio-headline h2{display:flex;align-items:center;gap:14px;margin:0 0 8px;font-family:"Plus Jakarta Sans",sans-serif;font-size:44px;font-weight:800;letter-spacing:-.025em;line-height:1.05;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
#tela-entrega .pa-ativa-cheio-headline h2::before{content:"";flex:0 0 auto;width:6px;height:.82em;border-radius:2px;background:#F7FF3F}
#tela-entrega .pa-ativa-cheio-subtitulo{font-size:16px;font-weight:500;color:rgba(255,255,255,.75);margin:0 0 12px}
#tela-entrega #entregaAtivaTitulo .pa-kpi-status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px;border-radius:13px;background:rgba(34,197,94,.14);color:#4ADE80;font-size:12px;font-weight:700}
#tela-entrega #entregaAtivaTitulo .pa-kpi-status.neutro{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}

/* cards no padrão Connect: cantos retos, preto translúcido, contorno amarelo fino que some pra baixo */
#tela-entrega .pa-ativa-cheio-card,#tela-entrega .pa-ativa-comando-item{
  border-radius:0;box-shadow:none;border:1px solid transparent;
  background:linear-gradient(to bottom,rgba(12,12,12,.84),rgba(12,12,12,.72)) padding-box,
             linear-gradient(to bottom,rgba(247,255,63,.5),rgba(247,255,63,.14) 40%,rgba(255,255,255,.06)) border-box;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#tela-entrega .pa-ativa-card-titulo{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 10px}
#tela-entrega .pa-ativa-cheio-progresso{width:420px;padding:20px 22px}
#tela-entrega .pa-ativa-progresso-numero{font-size:40px;font-weight:700;letter-spacing:-.03em;color:#F7FF3F}
#tela-entrega .pa-ativa-progresso-bolha{border-radius:0;background:transparent;border:1px solid rgba(247,255,63,.4);color:#F7FF3F;font-weight:700}
#tela-entrega .pa-ativa-progresso-linha{border-top-color:rgba(255,255,255,.07)}

/* comandos: 4 blocos iguais, mesmo tamanho e estilo; o bloco inteiro é clicável */
#tela-entrega .pa-ativa-cheio-comandos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:600px;align-self:flex-start;margin:auto 0 0}
#tela-entrega .pa-ativa-comando-item{position:relative;flex:none;height:112px;padding:16px 10px 14px;gap:10px;justify-content:center;transition:background .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
#tela-entrega .pa-ativa-comando-btn{position:static;width:46px;height:46px;border-radius:0;border:1px solid rgba(247,255,63,.38);background:transparent;color:#F7FF3F;box-shadow:none;backdrop-filter:none;transition:background .2s,color .2s,border-color .2s}
#tela-entrega .pa-ativa-comando-btn::after{content:"";position:absolute;inset:0;cursor:pointer}
#tela-entrega .pa-ativa-comando-btn svg{width:20px;height:20px}
#tela-entrega .pa-ativa-comando-btn.cancelar{border-color:rgba(242,95,92,.45);color:#FCA5A5}
#tela-entrega .pa-ativa-comando-label{font-size:12.5px;font-weight:600;color:#fff;text-shadow:none;line-height:1.25}
#tela-entrega .pa-ativa-comando-item:hover:has(.pa-ativa-comando-btn:not(:disabled)){transform:translateY(-3px);background:linear-gradient(to bottom,rgba(26,26,26,.88),rgba(20,20,20,.76)) padding-box,linear-gradient(to bottom,rgba(247,255,63,.75),rgba(247,255,63,.2) 40%,rgba(255,255,255,.08)) border-box}
#tela-entrega .pa-ativa-comando-item:hover .pa-ativa-comando-btn:not(:disabled){background:#F7FF3F;border-color:#F7FF3F;color:#0A0A0A;transform:none}
#tela-entrega .pa-ativa-comando-item:hover .pa-ativa-comando-btn.cancelar:not(:disabled){background:#F25F5C;border-color:#F25F5C;color:#fff}
#tela-entrega .pa-ativa-comando-item:has(.pa-ativa-comando-btn:disabled){opacity:.4}
#tela-entrega .pa-ativa-comando-btn:disabled{opacity:1;filter:none}
#tela-entrega .pa-ativa-comando-btn:disabled::after{cursor:not-allowed}

/* "Fazer outra entrega" e "Voltar para a base": mesma altura, mesmo desenho
   (ícone quadrado à esquerda, título + descrição, seta à direita) */
#tela-entrega .pa-ativa-cheio-nova-card,#tela-entrega .pa-ativa-cheio-base{
  display:flex;align-items:center;justify-content:flex-start;gap:14px;height:76px;margin:0;padding:0 20px;text-align:left;cursor:pointer;transition:background .2s}
#tela-entrega .pa-ativa-cheio-nova-card .pa-entrega-menu-card-icone,#tela-entrega .pa-ativa-cheio-base .pa-entrega-menu-card-icone{
  order:-1;flex:0 0 auto;width:44px;height:44px;border-radius:0;background:transparent;border:1px solid rgba(247,255,63,.38);color:#F7FF3F;display:grid;place-items:center}
#tela-entrega .pa-ativa-cheio-nova-card .pa-entrega-menu-card-icone svg,#tela-entrega .pa-ativa-cheio-base .pa-entrega-menu-card-icone svg{width:20px;height:20px}
#tela-entrega .pa-ativa-cheio-nova-card .pa-ativa-cheio-base-texto,#tela-entrega .pa-ativa-cheio-base .pa-ativa-cheio-base-texto{flex:1}
#tela-entrega .pa-ativa-cheio-nova-card .pa-ativa-cheio-base-titulo,#tela-entrega .pa-ativa-cheio-base .pa-ativa-cheio-base-titulo{font-size:15px;font-weight:700}
#tela-entrega .pa-ativa-cheio-nova-card .pa-ativa-cheio-base-desc,#tela-entrega .pa-ativa-cheio-base .pa-ativa-cheio-base-desc{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55)}
#tela-entrega .pa-ativa-cheio-nova-card::after,#tela-entrega .pa-ativa-cheio-base::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:4px;border-top:2px solid rgba(255,255,255,.45);border-right:2px solid rgba(255,255,255,.45);transform:rotate(45deg);transition:transform .15s,border-color .15s}
#tela-entrega .pa-ativa-cheio-nova-card:hover,#tela-entrega .pa-ativa-cheio-base:hover{background:linear-gradient(to bottom,rgba(26,26,26,.88),rgba(20,20,20,.76)) padding-box,linear-gradient(to bottom,rgba(247,255,63,.75),rgba(247,255,63,.2) 40%,rgba(255,255,255,.08)) border-box}
#tela-entrega .pa-ativa-cheio-nova-card:hover::after,#tela-entrega .pa-ativa-cheio-base:hover::after{border-color:#F7FF3F;transform:translateX(3px) rotate(45deg)}
#tela-entrega .pa-ativa-cheio-nova-card:hover .pa-entrega-menu-card-icone,#tela-entrega .pa-ativa-cheio-base:hover .pa-entrega-menu-card-icone{background:#F7FF3F;color:#0A0A0A;border-color:#F7FF3F}
#tela-entrega .pa-ativa-cheio-mapa-card{padding:18px 20px}

/* 02/10: a linha de status logo abaixo do selo ("O robô está trabalhando na entrega — aguardando…",
   "Nome — status") saiu da tela de comando a pedido do Lincoln; o título + selo já dizem o estado. */
#tela-entrega #entregaAtivaStatus{display:none}

/* ---------- comando ativo · formato 3 aprovado (02/10): ação principal + secundárias */
#tela-entrega .pa-ativa-cheio-comandos.ec-cmds{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:600px;align-self:flex-start;margin:auto 0 0}
.ec-cmd-principal{height:68px;display:flex;align-items:center;justify-content:center;gap:12px;border:1.5px solid #F7FF3F;background:#F7FF3F;color:#0A0A0A;font:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.ec-cmd-principal svg{width:22px;height:22px}
.ec-cmd-principal:hover:not(:disabled){background:#FBFF7A;transform:translateY(-2px)}
.ec-cmd-principal.retomar{background:rgba(12,12,12,.6);color:#F7FF3F;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ec-cmd-principal.retomar:hover:not(:disabled){background:#F7FF3F;color:#0A0A0A}
.ec-cmd-secund{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ec-cmd-sec{height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.16);background:rgba(12,12,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.ec-cmd-sec svg{width:18px;height:18px;color:#F7FF3F}
.ec-cmd-sec:hover:not(:disabled){border-color:#F7FF3F;background:rgba(20,20,20,.8)}
.ec-cmd-sec.perigo{color:#FCA5A5;border-color:rgba(242,95,92,.4)}.ec-cmd-sec.perigo svg{color:#FCA5A5}
.ec-cmd-sec.perigo:hover:not(:disabled){border-color:#F25F5C;background:rgba(242,95,92,.1)}
.ec-cmd-principal:disabled,.ec-cmd-sec:disabled{opacity:.38;cursor:not-allowed}
.ec-cmd-principal:focus-visible,.ec-cmd-sec:focus-visible,.ec-prox-linha:focus-visible{outline:2px solid #F7FF3F;outline-offset:2px}

/* selo "Pausada" */
#tela-entrega #entregaAtivaTitulo .pa-kpi-status.pausada{background:rgba(245,165,36,.15);color:#FBBF24}
#tela-entrega #entregaAtivaTitulo .pa-kpi-status.pausada .bolinha::before{animation:none}

/* card "Próximas ações" (no lugar dos dois cards soltos) */
#tela-entrega .ec-proximas{padding:6px 0}
#tela-entrega .ec-proximas .pa-ativa-card-titulo{padding:12px 20px 0;margin:0 0 4px}
.ec-prox-linha{width:100%;display:grid;grid-template-columns:28px 1fr 18px;align-items:center;gap:14px;padding:16px 20px;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.ec-prox-linha+.ec-prox-linha{border-top:1px solid rgba(255,255,255,.06)}
.ec-prox-linha>svg{width:24px;height:24px;color:#F7FF3F}
.ec-prox-linha b{display:block;font-size:15px;font-weight:700}.ec-prox-linha small{display:block;margin-top:2px;color:rgba(255,255,255,.5);font-size:12.5px}
.ec-prox-linha:hover{background:rgba(255,255,255,.04)}.ec-prox-linha:hover .ec-seta{color:#F7FF3F;transform:translateX(3px)}
.ec-prox-linha:disabled{opacity:.5;cursor:wait}
#tela-entrega .pa-fade-entrada .ec-cmd-principal,#tela-entrega .pa-fade-entrada .ec-cmd-secund{animation:ecCard .6s cubic-bezier(.2,.8,.2,1) both}
#tela-entrega .pa-fade-entrada .ec-cmd-secund{animation-delay:.08s}

/* 02/10: no comando ativo o fundo continua sendo a cena de cada modelo, mas SEM o
   tracejado de rota e o pino (eles vêm desenhados dentro das fotos "ativas"). Usa a
   mesma cena na versão vazia — a posição real do robô aparece no mapa ao vivo. */
#tela-entrega .pa-entrega-menu-fundo.fundo-bellabot-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-bellabot-vazia.jpg') 50% 35%/cover no-repeat}
#tela-entrega .pa-entrega-menu-fundo.fundo-kettybot-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-bellabot-vazia.jpg') 50% 35%/cover no-repeat}
#tela-entrega .pa-entrega-menu-fundo.fundo-t300-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-t300-vazia.jpg') 50% 35%/cover no-repeat}
#tela-entrega .pa-entrega-menu-fundo.fundo-flashbot-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-flashbot-vazia.jpg') 50% 35%/cover no-repeat}
#tela-entrega .pa-entrega-menu-fundo.fundo-cc1-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-cc1-vazia.jpg') 50% 35%/cover no-repeat}
#tela-entrega .pa-entrega-menu-fundo.fundo-mt1-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-mt1-vazia.jpg') 50% 35%/cover no-repeat}
#tela-entrega .pa-entrega-menu-fundo.fundo-pudubot2-ativa{background:linear-gradient(100deg,rgba(6,6,5,.75) 0%,rgba(6,6,5,.4) 45%,rgba(6,6,5,.2) 100%),linear-gradient(0deg,rgba(6,6,5,.85) 0%,rgba(6,6,5,.15) 30%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/entrega-fundo-pudubot2-vazia.jpg') 50% 35%/cover no-repeat}

/* =========================================================================
   02/10 — tela do mapa (destinos) no padrão Connect
   ========================================================================= */
/* o mapa encosta na sidebar (antes começava 12px depois dela) */
#tela-entrega .pa-entrega-destinos-cheio{margin-left:calc(-1 * var(--tc-gap))}
/* "Retornar" alinhado com o card da esquerda (aqui o container já desconta a sidebar) */
#tela-entrega .pa-entrega-destinos-cheio>.pa-entrega-destinos-cheio-voltar{left:32px;top:22px}

/* card da esquerda */
#tela-entrega .pa-entrega-destinos-cheio-painel{
  top:80px;left:32px;bottom:24px;width:390px;padding:24px 24px 22px;border-radius:0;
  border:1px solid transparent;
  background:linear-gradient(to bottom,rgba(12,12,12,.88),rgba(12,12,12,.8)) padding-box,
             linear-gradient(to bottom,rgba(247,255,63,.5),rgba(247,255,63,.14) 30%,rgba(255,255,255,.06)) border-box;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  scrollbar-width:thin;scrollbar-color:#3A3A3A transparent}
#tela-entrega .pa-entrega-passo-titulo{margin:0 0 6px;font-family:"Plus Jakarta Sans",sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
#tela-entrega .pa-entrega-passo-dica{margin:0 0 18px;font-size:13px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.55)}
#tela-entrega .pa-secao-pontos-titulo,#tela-entrega .pa-secao-ordem>p,#tela-entrega .pa-secao-ordem>h3,#tela-entrega .pa-secao-ordem>strong{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
#tela-entrega .pa-link-limpar-lista{font-size:12px;font-weight:700;color:#F7FF3F}
#tela-entrega .pa-link-limpar-lista:hover{text-decoration:underline}
#tela-entrega .pa-etapa-card{border-radius:0;box-shadow:none;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);backdrop-filter:none}
#tela-entrega .pa-etapa-card:hover{border-color:rgba(247,255,63,.3)}
#tela-entrega .pa-etapa-numero{background:#F7FF3F;color:#0A0A0A}
#tela-entrega .pa-etapa-item-input{border-radius:0;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
#tela-entrega .pa-etapa-item-input:focus{border-color:rgba(247,255,63,.5);outline:0}

/* ordem da entrega: opções no mesmo desenho dos cards (cantos retos, amarelo quando marcada) */
#tela-entrega .pa-ordem-opcao{border-radius:0;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);backdrop-filter:none;transition:border-color .2s,background .2s}
#tela-entrega .pa-ordem-opcao:hover{border-color:rgba(247,255,63,.35)}
#tela-entrega .pa-ordem-opcao.selecionada{border-color:#F7FF3F;background:rgba(247,255,63,.07)}
#tela-entrega .pa-ordem-opcao input[type="radio"]{accent-color:#F7FF3F}
#tela-entrega .pa-ordem-opcao-texto strong{font-size:13.5px;font-weight:700}
#tela-entrega .pa-ordem-opcao-texto small{font-weight:500}

/* "+ Ações do robô" vira um botão discreto */
#tela-entrega .pa-link-acoes-robo{display:inline-flex;align-items:center;gap:6px;height:34px;margin-top:14px;padding:0 14px;border:1px solid rgba(247,255,63,.35);background:transparent;color:#F7FF3F;font:inherit;font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
#tela-entrega .pa-link-acoes-robo:hover{background:rgba(247,255,63,.1);border-color:#F7FF3F}

/* "Iniciar entrega": o mesmo botão principal amarelo do comando ativo */
#tela-entrega #botaoIniciarEntrega{height:56px;border-radius:0;border:1.5px solid #F7FF3F;background:#F7FF3F;color:#0A0A0A;font-size:16px;font-weight:700;box-shadow:none;transition:background .2s,transform .2s}
#tela-entrega #botaoIniciarEntrega:hover:not(:disabled){background:#FBFF7A;transform:translateY(-2px)}
#tela-entrega #botaoIniciarEntrega:disabled{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.4);cursor:not-allowed}

/* controles de zoom: pílula de vidro escuro, igual ao botão Retornar */
#tela-entrega .pa-mapa-zoom-controles-flutuante{right:24px;bottom:24px;gap:8px;padding:6px 14px 6px 6px;border-radius:24px;background:rgba(12,12,12,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#tela-entrega .pa-mapa-zoom-controles button{height:32px;min-width:32px;padding:0 10px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
#tela-entrega .pa-mapa-zoom-controles button:hover{background:#F7FF3F;border-color:#F7FF3F;color:#0A0A0A}
#tela-entrega .pa-mapa-zoom-dica{font-size:11.5px;color:rgba(255,255,255,.5)}

/* ---------- 02/10 · "Ações do robô" (FlashBot: texto/portas · KettyBot: áudio/volume)
   no padrão Connect escuro (antes herdava o cartão claro do tema claro) */
#tela-entrega .pa-acoes-robo{display:grid;gap:10px;margin-top:10px}
#tela-entrega .pa-acao-robo-bloco{margin:0;padding:16px;border-radius:0;box-shadow:none;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
#tela-entrega .pa-acao-robo-bloco h4{margin:0 0 12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
#tela-entrega .pa-acao-robo-input{width:100%;height:40px;padding:0 12px;border-radius:0;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:13px;color-scheme:dark}
#tela-entrega select.pa-acao-robo-input{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7FF3F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px}
#tela-entrega .pa-acao-robo-input:focus{outline:0;border-color:rgba(247,255,63,.55)}
/* botões das ações: todos do mesmo tamanho; o principal (Tocar / Enviar pra tela) em amarelo */
#tela-entrega .pa-acao-audio-botoes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 0}
#tela-entrega .pa-acoes-robo .pa-btn{height:38px;min-width:0;margin:0;padding:0 8px;border-radius:0;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:12.5px;font-weight:600;box-shadow:none;justify-content:center;transition:background .2s,border-color .2s,color .2s}
#tela-entrega .pa-acoes-robo .pa-btn:hover:not(:disabled){border-color:#F7FF3F;background:rgba(247,255,63,.08)}
#tela-entrega .pa-acoes-robo .pa-btn.secundario{background:#F7FF3F;border-color:#F7FF3F;color:#0A0A0A}
#tela-entrega .pa-acoes-robo .pa-btn.secundario:hover:not(:disabled){background:#FBFF7A}
#tela-entrega .pa-acoes-robo .pa-btn.bloco{width:100%;margin-top:8px}
#tela-entrega .pa-acoes-robo .pa-btn:disabled{opacity:.4;cursor:not-allowed}
#tela-entrega .pa-acao-portas{display:grid;gap:6px}
#tela-entrega .pa-acao-porta-linha{display:grid;grid-template-columns:1fr 72px 72px;align-items:center;gap:6px}
#tela-entrega .pa-acao-porta-nome{font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
#tela-entrega .pa-acao-volume-rotulo{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6)}
#tela-entrega #acaoVolumeValor{min-width:26px;color:#F7FF3F;font-weight:700}
#tela-entrega #acaoVolumeSlider{flex:1;accent-color:#F7FF3F;cursor:pointer}

/* "Iniciar entrega" não pode ser espremido quando o card enche (ex.: ações do robô abertas) */
#tela-entrega #botaoIniciarEntrega{flex:0 0 auto;min-height:56px;margin-top:auto}
#tela-entrega .pa-entrega-destinos-cheio-painel>*{flex-shrink:0}

/* ---------- 02/10 · transição entre etapas, de verdade
   saída: animação (não transição) — a troca de classe cancelava a transição e o miolo sumia na hora.
   entrada: aceita um atraso negativo (--ec-atraso) pra continuar de onde parou se o miolo for recriado. */
#tela-entrega .pa-fade-saida{transition:none;animation:ecSai .3s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
@keyframes ecSai{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateX(-28px);filter:blur(6px)}}
#tela-entrega .pa-fade-entrada{animation:ecEtapa .55s cubic-bezier(.2,.8,.2,1) var(--ec-atraso,0ms) both}
#tela-entrega .pa-fade-entrada .ec-card,#tela-entrega .pa-fade-entrada .ec-lista-card,
#tela-entrega .pa-fade-entrada .pa-ativa-cheio-card,#tela-entrega .pa-fade-entrada .pa-ativa-comando-item,
#tela-entrega .pa-fade-entrada .ec-cmd-principal,#tela-entrega .pa-fade-entrada .pa-entrega-destinos-cheio-painel{animation:ecCard .6s cubic-bezier(.2,.8,.2,1) calc(var(--ec-atraso,0ms) + .08s) both}
#tela-entrega .pa-fade-entrada .ec-cmd-secund,#tela-entrega .pa-fade-entrada .pa-ativa-cheio-coluna-direita .pa-ativa-cheio-card:nth-child(2){animation:ecCard .6s cubic-bezier(.2,.8,.2,1) calc(var(--ec-atraso,0ms) + .16s) both}
#tela-entrega .pa-fade-entrada .pa-ativa-cheio-coluna-direita .pa-ativa-cheio-card:nth-child(3){animation:ecCard .6s cubic-bezier(.2,.8,.2,1) calc(var(--ec-atraso,0ms) + .24s) both}
#tela-entrega .pa-fade-entrada .ec-fn,#tela-entrega .pa-fade-entrada .ec-robo{animation:ecCard .5s cubic-bezier(.2,.8,.2,1) calc(var(--ec-atraso,0ms) + .18s) both}
#tela-entrega .pa-fade-entrada .ec-fn:nth-child(2),#tela-entrega .pa-fade-entrada .ec-grupo:nth-child(2) .ec-robo{animation-delay:calc(var(--ec-atraso,0ms) + .24s)}
#tela-entrega .pa-fade-entrada .ec-fn:nth-child(3),#tela-entrega .pa-fade-entrada .ec-grupo:nth-child(n+3) .ec-robo{animation-delay:calc(var(--ec-atraso,0ms) + .30s)}

/* ---------- 02/10 · transição da Entrega mais leve (estava travando)
   Antes: blur na tela inteira a cada quadro + cards com backdrop-filter se movendo — caro demais
   em tela cheia. Agora: só opacidade e translate3d (feitos pela GPU), tempos mais curtos, e o
   "vidro" (backdrop-filter) dos cards desligado SÓ durante a troca (volta sozinho no fim). */
@keyframes ecSai{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-18px,0,0)}}
@keyframes ecEtapa{from{opacity:0;transform:translate3d(22px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes ecCard{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
#tela-entrega .pa-fade-saida{animation:ecSai .28s cubic-bezier(.4,0,1,1) forwards;will-change:opacity,transform}
#tela-entrega .pa-fade-entrada{animation:ecEtapa .42s cubic-bezier(.2,.8,.2,1) var(--ec-atraso,0ms) both;will-change:opacity,transform}
#tela-entrega .pa-fade-saida *,#tela-entrega .pa-fade-entrada *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
#tela-entrega .pa-fade-entrada .ec-card,#tela-entrega .pa-fade-entrada .ec-lista-card,
#tela-entrega .pa-fade-entrada .pa-ativa-cheio-card,#tela-entrega .pa-fade-entrada .ec-cmd-principal,
#tela-entrega .pa-fade-entrada .ec-cmd-secund,#tela-entrega .pa-fade-entrada .pa-entrega-destinos-cheio-painel{animation-duration:.45s}
#tela-entrega .pa-fade-entrada .ec-fn,#tela-entrega .pa-fade-entrada .ec-robo{animation-duration:.38s}

/* ---------- 02/10 · fundo fixo da Entrega (camada própria, fora do conteúdo que troca a cada passo) */
#tela-entrega .ec-fundo-fixo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,6,5,.82) 0%,rgba(6,6,5,.5) 45%,rgba(6,6,5,.25) 100%),linear-gradient(0deg,rgba(6,6,5,.9) 0%,rgba(6,6,5,.1) 32%,rgba(6,6,5,0) 55%),url('/plataforma-api/imagens/hero-entrega.jpg') 50% 40%/cover no-repeat}
#tela-entrega #entregaRoot{position:relative;z-index:1}
#tela-entrega .pa-entrega-menu-fundo{background:none !important;transition:none}
#tela-entrega .pa-entrega-menu,#tela-entrega .pa-entrega-destinos-cheio,#tela-entrega .pa-ativa-cheio{background-color:transparent}

/* ---------- 02/10 · animações ainda mais leves (Entrega e módulos)
   1) sem "vidro" (backdrop-filter) em nada da tela cheia: ele recalcula o desfoque da foto inteira
      a cada quadro que algo se mexe, e "religava" no fim de cada transição (o tranco no final).
      No lugar, fundo preto mais opaco — visualmente quase igual sobre a foto escura;
   2) entrada/saída de tela só com opacidade (antes: a tela inteira, com a foto, diminuía e crescia);
   3) troca de etapa mais curta e sem a cascata de atrasos dos cards. */
#tela-entrega *,#tela-entrega *::before,#tela-entrega *::after,
body:has(#tela-entrega:not([hidden])) .tc-topo *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
#tela-entrega .ec-card,#tela-entrega .ec-lista-card{background:linear-gradient(to bottom,rgba(12,12,12,.94),rgba(12,12,12,.88))}
#tela-entrega .pa-entrega-destinos-cheio-painel,#tela-entrega .pa-ativa-cheio-card,#tela-entrega .pa-ativa-card{background-color:rgba(12,12,12,.9)}
#tela-entrega .pa-entrega-menu-status{background:rgba(8,8,8,.92)}
#tela-entrega .pa-entrega-destinos-cheio-voltar,#tela-entrega .pa-ativa-cheio-voltar,#tela-entrega .pa-entrega-menu-voltar,
body:has(#tela-entrega:not([hidden])) .tc-topo .tc-busca-btn,body:has(#tela-entrega:not([hidden])) .tc-topo .tc-sino{background:rgba(12,12,12,.86)}

@keyframes tcTelaEntra{from{opacity:0}to{opacity:1}}
.pa-tela{animation:tcTelaEntra .2s ease-out both}
.pa-tela-saindo{transform:none !important;transition:opacity .18s ease-in !important}

@keyframes ecSai{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-10px,0,0)}}
@keyframes ecEtapa{from{opacity:0;transform:translate3d(12px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
#tela-entrega .pa-fade-saida{animation:ecSai .18s cubic-bezier(.4,0,1,1) forwards}
#tela-entrega .pa-fade-entrada{animation:ecEtapa .26s cubic-bezier(.2,.8,.2,1) var(--ec-atraso,0ms) both}
#tela-entrega .pa-fade-entrada *{animation-delay:0s !important;animation-duration:.26s !important}
#tela-entrega .ec-palco img{filter:none;animation-duration:.3s}

/* ---------- 02/10 · mapa (Entrega e módulos) sem travar
   - camada da GPU fixa no conteúdo do mapa (antes ligava/desligava a cada arraste: tranco no início
     e no fim) e a planta com o filtro cinza vira uma camada própria (o filtro é calculado uma vez);
   - o pulso dos pontos marcados animava box-shadow (repintava o mapa inteiro a cada quadro):
     agora é um anel que só muda escala/opacidade;
   - pontos sem transição de largura/altura (mexia no layout). */
.pa-mapa-zoom-conteudo{will-change:transform}
.pa-mapa-picker-viewport img[alt="Planta do mapa"]{will-change:transform;backface-visibility:hidden}
.pa-mapa-picker-ponto{transition:transform .12s ease,border-color .12s ease}
.pa-mapa-picker-ponto.marcado{animation:none}
.pa-mapa-picker-ponto.marcado::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,209,0,.7);pointer-events:none;animation:ecPontoPulso 1.6s ease-out infinite}
@keyframes ecPontoPulso{from{transform:scale(1);opacity:.9}to{transform:scale(2.2);opacity:0}}

/* ---------- 02/10 · barrinha amarela do título acompanha o texto (1 ou 2 linhas)
   Antes: altura fixa de 64px — em "Entrega logística" (2 linhas) ficava do tamanho de 1 linha.
   Agora estica na altura do título, descontando o respiro de cima/baixo da linha. */
#tela-entrega .pa-entrega-menu-titulo-bloco .pa-modo-hero-titulo{align-items:stretch}
#tela-entrega .pa-entrega-menu-titulo-bloco .pa-modo-hero-titulo .barra{height:auto;align-self:stretch;flex:0 0 auto;margin:.2em 14px .18em 0}

/* ---------- 05/10 · robô offline já entra escurecido na lista (Entrega e módulos)
   Antes: o escurecimento era opacidade no próprio botão, e a animação de entrada da lista (que vai
   de opacidade 0 a 1 e "segura" o fim) passava por cima até a classe de entrada sair (~1s) — os
   offline apareciam acesos e só depois apagavam. Agora o escurecimento fica no CONTEÚDO do card,
   sem disputa com a animação: já entram apagados. */
.ec-robo:disabled{opacity:1}
.ec-robo:disabled > *{opacity:.42}
.ec-robo:disabled{background:rgba(255,255,255,.012)}

/* 13/10: robô offline selecionável com confirmação (entrega-connect.js#tocarRoboOffline) */
.ec-robo[data-offline]{cursor:pointer;background:rgba(255,255,255,.012)}
.ec-robo[data-offline] > *{opacity:.42}
.ec-robo[data-offline][data-tentou] > *{opacity:.75}
.ec-off-balanca{animation:ecOffBalanca .4s ease}
@keyframes ecOffBalanca{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
#tela-entrega[data-estilo="4"] .ec-robo[data-offline]{background:rgba(12,12,12,.6)}
#tela-entrega[data-estilo="4"] .ec-robo[data-offline][data-tentou]{border-color:rgba(251,191,36,.6)}
/* confirmação no padrão Connect (window.tcConfirmar) */
.tc-conf-fundo{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6);animation:tcConfF .2s ease both}
.tc-conf-fundo.saindo{animation:tcConfS .18s ease forwards}
.tc-conf{width:min(440px,100%);padding:26px 26px 20px;background:#0B0B0B;border:1px solid rgba(247,255,63,.3);box-shadow:0 24px 70px rgba(0,0,0,.6);color:#fff;animation:tcConfC .3s cubic-bezier(.2,.9,.25,1.1) both}
.tc-conf-ic{width:44px;height:44px;display:grid;place-items:center;margin-bottom:12px;border:1px solid rgba(247,255,63,.45);color:#F7FF3F}
.tc-conf-ic.perigo{border-color:rgba(251,191,36,.6);color:#FBBF24}
.tc-conf-ic svg{width:22px;height:22px}
.tc-conf h3{margin:0 0 8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800}
.tc-conf p{margin:0 0 20px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}
.tc-conf-pe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tc-conf-btn{height:44px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tc-conf-btn:hover{border-color:#fff}
.tc-conf-btn.y{background:#F7FF3F;border-color:#F7FF3F;color:#0A0A0A}
.tc-conf-btn.perigo{background:#FBBF24;border-color:#FBBF24;color:#0A0A0A}
.tc-conf-btn:focus-visible{outline:2px solid #F7FF3F;outline-offset:2px}
@keyframes tcConfF{from{opacity:0}}@keyframes tcConfS{to{opacity:0}}@keyframes tcConfC{from{opacity:0;transform:translateY(12px) scale(.96)}}
html.tc-reduzir-anim .tc-conf-fundo,html.tc-reduzir-anim .tc-conf,html.tc-reduzir-anim .ec-off-balanca{animation:none}

/* 14/10: rostinho cansado do BellaBot com X vermelho na confirmação do robô offline */
.tc-conf-robo{position:relative;display:inline-block;width:92px;margin-bottom:12px}
.tc-conf-rosto{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));animation:tcConfCansado 3.2s ease-in-out infinite;transform-origin:50% 90%}
.tc-conf-x{position:absolute;right:-12px;bottom:-4px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#E5484D;box-shadow:0 0 0 3px #0B0B0B}
.tc-conf-x svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
@keyframes tcConfCansado{0%,100%{transform:rotate(-4deg) translateY(1px)}50%{transform:rotate(-1deg) translateY(3px)}}
html.tc-reduzir-anim .tc-conf-rosto{animation:none}

/* 14/10: rostinho centralizado no card e "offline" em vermelho no título */
.tc-conf-robo{display:block;margin:0 auto 14px}
.tc-conf-destaque{color:#FF6B66}

/* 14/10: campo "o que vai nesta parada" com cara de campo (largura toda, ícone, foco amarelo) */
#tela-entrega .ec-item-campo{position:relative;display:block;margin-top:8px}
#tela-entrega .ec-item-campo svg{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:rgba(255,255,255,.4);pointer-events:none;transition:color .15s}
#tela-entrega .ec-item-campo .pa-etapa-item-input{display:block;width:100%;height:36px;margin:0;padding:0 12px 0 34px;box-sizing:border-box;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13.5px;font-weight:500;transition:border-color .15s,background .15s}
#tela-entrega .ec-item-campo .pa-etapa-item-input::placeholder{color:rgba(255,255,255,.42);font-weight:400}
#tela-entrega .ec-item-campo .pa-etapa-item-input:hover{border-color:rgba(255,255,255,.26)}
#tela-entrega .ec-item-campo .pa-etapa-item-input:focus{border-color:#F7FF3F;background:rgba(247,255,63,.05);outline:0}
#tela-entrega .ec-item-campo:focus-within svg{color:#F7FF3F}
#tela-entrega .pa-etapa-card .pa-link-telefonia{display:inline-flex;align-items:center;margin-top:8px;padding:4px 9px;border:1px solid rgba(255,255,255,.14);background:none;color:rgba(255,255,255,.7);font-size:12px;font-weight:600;text-decoration:none;cursor:pointer}
#tela-entrega .pa-etapa-card .pa-link-telefonia:hover{border-color:#F7FF3F;color:#F7FF3F}
#tela-entrega:is([data-modo="cruzeiro"],[data-modo="logistica"],[data-modo="limpeza"],[data-modo="chamada"],[data-modo="custom"]) .ec-item-campo{display:none}