/* ---------- 09/10 · Novo visual do módulo Chamar (estilos-chamar.js)
   "Estação": título grande com a barrinha amarela à esquerda e, embaixo, uma faixa com o robô e as
   funções em blocos grandes numerados (01/02/03, o principal todo amarelo). Só visual — mesmos botões
   e eventos de sempre. Se for aprovado, vira o padrão de todos os módulos.
   Escopo: #tela-entrega[data-estilo="4"] e só quando a tela tem o card do robô (.ec-card).
   As 3 propostas anteriores (recusadas) estão em estilos-chamar.css.bak-ANTES-ESTACAO. */

/* seletor Nova/Atual */
.ech-estilos{position:fixed;top:20px;left:50%;z-index:60;display:flex;align-items:center;gap:2px;padding:4px;transform:translateX(-50%);
  background:rgba(10,10,10,.82);border:1px solid rgba(247,255,63,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ech-estilos span{padding:0 10px 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ech-estilos button{height:30px;min-width:38px;padding:0 12px;border:0;background:none;color:rgba(255,255,255,.75);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ech-estilos button:hover{color:#fff}
.ech-estilos button.on{background:#F7FF3F;color:#0A0A0A}
.ech-estilos[hidden]{display:none}

/* fundo: escurece embaixo (onde fica a faixa) e à esquerda (onde fica o título) */
#tela-entrega[data-estilo="4"]:has(.ec-card,.ec-lista-card) .ec-fundo-fixo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.6) 36%,rgba(5,5,5,0) 64%),linear-gradient(90deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,0) 50%)}

/* composição: título em cima da faixa, faixa ocupando a largura toda */
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card){flex-direction:column;align-items:stretch;justify-content:flex-end;gap:30px;padding:96px 48px 32px}
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-entrega-menu-titulo-bloco{align-self:flex-start;max-width:820px;margin-top:auto}
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-modo-hero-titulo{font-size:118px;letter-spacing:-.045em;line-height:.95}
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-modo-hero-sub{margin-top:14px;font-size:17px;color:rgba(255,255,255,.72)}
#tela-entrega[data-estilo="4"] .pa-entrega-menu-cards:has(.ec-card,.ec-lista-card){max-width:none;width:100%;align-self:stretch}

/* faixa: painel do robô à esquerda + 3 blocos de função */
#tela-entrega[data-estilo="4"] .ec-card{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
#tela-entrega[data-estilo="4"] .ec-card::before{display:none}
#tela-entrega[data-estilo="4"] .ec-palco,#tela-entrega[data-estilo="4"] .ec-nome{grid-column:1;background-color:rgba(12,12,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.09)}
#tela-entrega[data-estilo="4"] .ec-palco{grid-row:1;height:160px;border-bottom:0;border-top:2px solid #F7FF3F;
  background-image:radial-gradient(ellipse 60% 55% at 50% 85%,rgba(247,255,63,.14),rgba(247,255,63,0) 70%)}
#tela-entrega[data-estilo="4"] .ec-palco img{inset:8% 0 0 0;height:92%}
#tela-entrega[data-estilo="4"] .ec-nome{grid-row:2;border-top:0;padding:6px 22px 20px}
#tela-entrega[data-estilo="4"] .ec-nome h3{font-size:22px}

#tela-entrega[data-estilo="4"] .ec-fns{grid-column:2;grid-row:1 / 3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border-top:0;counter-reset:echfn}
#tela-entrega[data-estilo="4"] .ec-fn{position:relative;counter-increment:echfn;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:100%;padding:24px 26px;
  background:rgba(12,12,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,box-shadow .2s}
#tela-entrega[data-estilo="4"] .ec-fn+.ec-fn{border-top:1px solid rgba(255,255,255,.1)}
#tela-entrega[data-estilo="4"] .ec-fn::before{content:counter(echfn,decimal-leading-zero);position:absolute;top:20px;left:26px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.38)}
#tela-entrega[data-estilo="4"] .ec-fn-ic{position:absolute;top:18px;right:20px;width:60px;height:60px;border:0;background:none;color:#F7FF3F}
#tela-entrega[data-estilo="4"] .ec-fn-ic svg{width:46px;height:46px;stroke-width:1.6}
#tela-entrega[data-estilo="4"] .ec-fn-t{padding-right:30px}
#tela-entrega[data-estilo="4"] .ec-fn-t b{font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
#tela-entrega[data-estilo="4"] .ec-fn-t small{margin-top:6px;font-size:13px}
#tela-entrega[data-estilo="4"] .ec-fn .ec-seta{position:absolute;right:20px;bottom:24px}
#tela-entrega[data-estilo="4"] .ec-fn:hover{transform:translateY(-4px);border-color:#F7FF3F;background:rgba(18,18,18,.88);box-shadow:0 16px 40px rgba(0,0,0,.45)}
/* principal: bloco todo amarelo */
#tela-entrega[data-estilo="4"] .ec-fn.prim{background:#F7FF3F;border-color:#F7FF3F;color:#0A0A0A}
#tela-entrega[data-estilo="4"] .ec-fn.prim::before,#tela-entrega[data-estilo="4"] .ec-fn.prim .ec-fn-t small{color:rgba(10,10,10,.6)}
#tela-entrega[data-estilo="4"] .ec-fn.prim .ec-fn-ic{background:none;color:#0A0A0A}
#tela-entrega[data-estilo="4"] .ec-fn.prim .ec-seta,#tela-entrega[data-estilo="4"] .ec-fn.prim:hover .ec-seta{color:#0A0A0A}
#tela-entrega[data-estilo="4"] .ec-fn.prim:hover{background:#FBFF7A;border-color:#FBFF7A;box-shadow:0 16px 40px rgba(247,255,63,.18)}
#tela-entrega[data-estilo="4"] .ec-fn:disabled{transform:none;cursor:not-allowed}

/* escolher o robô: faixa com os robôs em blocos lado a lado (mesma linguagem da tela de funções) */
#tela-entrega[data-estilo="4"] .ec-lista-card{max-height:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
#tela-entrega[data-estilo="4"] .ec-lista-card::before{display:none}
#tela-entrega[data-estilo="4"] .ec-lista-cab{display:flex;align-items:baseline;gap:16px;padding:0 0 14px}
#tela-entrega[data-estilo="4"] .ec-lista-cab h3{padding:0;font-size:22px}
#tela-entrega[data-estilo="4"] .ec-lista-cab p{margin:0;font-size:13px}
#tela-entrega[data-estilo="4"] .ec-cancelar{position:static;margin-left:auto;align-self:center}
#tela-entrega[data-estilo="4"] .ec-lista-pe{display:none}
#tela-entrega[data-estilo="4"] .ec-lista{flex-direction:row;align-items:stretch;gap:26px;padding:0 0 10px;overflow-x:auto;overflow-y:hidden}
#tela-entrega[data-estilo="4"] .ec-grupo{position:relative;flex-direction:row;gap:14px;padding-top:30px}
#tela-entrega[data-estilo="4"] .ec-grupo+.ec-grupo{margin-top:0}
#tela-entrega[data-estilo="4"] .ec-grupo-rot{position:absolute;top:0;left:0;right:0;padding:0}
#tela-entrega[data-estilo="4"] .ec-robo{position:relative;flex:0 0 228px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"foto foto" "t t" "bat seta";align-items:center;gap:0 10px;padding:0 0 18px;
  background:rgba(12,12,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-top:2px solid rgba(255,255,255,.12);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,box-shadow .2s}
#tela-entrega[data-estilo="4"] .ec-robo-foto{grid-area:foto;width:100%;height:150px;margin-bottom:12px;background:radial-gradient(ellipse 60% 55% at 50% 85%,rgba(247,255,63,.12),rgba(247,255,63,0) 70%)}
#tela-entrega[data-estilo="4"] .ec-robo-foto img{max-width:80%;max-height:88%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.6))}
#tela-entrega[data-estilo="4"] .ec-robo-foto svg{width:54px;height:54px}
#tela-entrega[data-estilo="4"] .ec-robo-t{grid-area:t;padding:0 18px 12px;gap:4px}
#tela-entrega[data-estilo="4"] .ec-robo-t b{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.01em}
#tela-entrega[data-estilo="4"] .ec-robo-t .ec-badge{margin-top:4px}
#tela-entrega[data-estilo="4"] .ec-robo .ec-bat{grid-area:bat;padding-left:18px}
#tela-entrega[data-estilo="4"] .ec-robo .ec-seta{grid-area:seta;padding-right:16px}
#tela-entrega[data-estilo="4"] .ec-robo:hover:not(:disabled){transform:translateY(-4px);border-color:rgba(247,255,63,.6);border-top-color:#F7FF3F;background:rgba(18,18,18,.88);box-shadow:0 16px 40px rgba(0,0,0,.45)}
#tela-entrega[data-estilo="4"] .ec-robo.atual{border-top-color:#F7FF3F}
#tela-entrega[data-estilo="4"] .ec-robo:disabled{background:rgba(12,12,12,.6)}
#tela-entrega[data-estilo="4"] .ec-vazio{margin:0}

/* subtítulo vivo do Comando (modulos-connect.js → data-vivo) */
#tela-entrega .ec-fn[data-vivo] .ec-fn-t small{display:flex;align-items:center;gap:7px}
#tela-entrega .ec-fn[data-vivo] .ec-fn-t small::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor}
#tela-entrega .ec-fn[data-vivo="vivo"] .ec-fn-t small{color:#F7FF3F}
#tela-entrega .ec-fn[data-vivo="vivo"] .ec-fn-t small::before{box-shadow:0 0 0 0 rgba(247,255,63,.6);animation:echVivo 1.6s ease-out infinite}
#tela-entrega .ec-fn[data-vivo="ocupado"] .ec-fn-t small{color:#FBBF24}
#tela-entrega .ec-fn[data-vivo="livre"] .ec-fn-t small{color:#4ADE80}
#tela-entrega .ec-fn[data-vivo="off"] .ec-fn-t small{color:rgba(255,255,255,.45)}
#tela-entrega[data-estilo="4"] .ec-fn[data-vivo="vivo"]{border-color:rgba(247,255,63,.55)}
@keyframes echVivo{0%{box-shadow:0 0 0 0 rgba(247,255,63,.6)}100%{box-shadow:0 0 0 8px rgba(247,255,63,0)}}
html.tc-reduzir-anim #tela-entrega .ec-fn[data-vivo] .ec-fn-t small::before{animation:none}

@media (max-width:1100px){
  #tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card){padding:90px 24px 24px}
  #tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-modo-hero-titulo{font-size:72px}
  #tela-entrega[data-estilo="4"] .ec-card{grid-template-columns:1fr}
  #tela-entrega[data-estilo="4"] .ec-fns{grid-column:1;grid-row:auto;grid-template-columns:1fr;margin-top:14px}
  #tela-entrega[data-estilo="4"] .ec-fn{min-height:120px}
}
/* faixa de robôs: esmaece na borda quando tem mais robôs pra rolar (estilos-chamar.js marca data-mais) */
#tela-entrega[data-estilo="4"] .ec-lista{scrollbar-width:thin;scrollbar-color:#3A3A3A transparent}
#tela-entrega[data-estilo="4"] .ec-lista[data-mais="dir"]{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
#tela-entrega[data-estilo="4"] .ec-lista[data-mais="esq"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%)}
#tela-entrega[data-estilo="4"] .ec-lista[data-mais="ambos"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

/* 13/10 · o visual vale pra todos os módulos: títulos mais longos ("Entrega logística", "Tarefa customizada")
   encolhem pra caber; a lista de tarefas da Tarefa customizada vira um rótulo acima dos blocos */
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-modo-hero-titulo{font-size:clamp(60px,7vw,118px)}
#tela-entrega[data-estilo="4"] .md-fns-rot{grid-column:1 / -1;padding:0 0 2px}

/* faixa de robôs: setas nos lados e arrastar com o mouse */
#tela-entrega[data-estilo="4"] .ec-lista-card{position:relative}
#tela-entrega[data-estilo="4"] .ec-lista{cursor:grab;user-select:none}
#tela-entrega[data-estilo="4"] .ec-lista.arrastando{cursor:grabbing}
#tela-entrega[data-estilo="4"] .ec-lista.arrastando .ec-robo{pointer-events:none}
.ech-seta{display:none}
#tela-entrega[data-estilo="4"] .ec-lista-card.ech-rola .ech-seta{position:absolute;bottom:calc(50% - 56px);z-index:4;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(247,255,63,.45);background:rgba(10,10,10,.85);color:#F7FF3F;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .2s,background .15s,color .15s,transform .15s}
#tela-entrega[data-estilo="4"] .ech-seta svg{width:20px;height:20px}
#tela-entrega[data-estilo="4"] .ech-seta.esq{left:-14px}
#tela-entrega[data-estilo="4"] .ech-seta.esq svg{transform:rotate(180deg)}
#tela-entrega[data-estilo="4"] .ech-seta.dir{right:-14px}
#tela-entrega[data-estilo="4"] .ech-seta:hover:not(:disabled){background:#F7FF3F;color:#0A0A0A;transform:scale(1.06)}
#tela-entrega[data-estilo="4"] .ech-seta:disabled{opacity:0;pointer-events:none}
#tela-entrega[data-estilo="4"] .ech-seta:focus-visible{outline:2px solid #F7FF3F;outline-offset:2px}
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-entrega-menu-titulo-bloco{max-width:none}
#tela-entrega[data-estilo="4"] .pa-entrega-menu-conteudo:has(.ec-card,.ec-lista-card) .pa-modo-hero-titulo{font-size:clamp(52px,6.2vw,118px);white-space:nowrap}
/* o texto do bloco nunca sobe até a área do ícone */
#tela-entrega[data-estilo="4"] .ec-fn{padding-top:86px}
/* 14/10 (leveza): bolinha do "em andamento" pulsa por opacidade (GPU) em vez de box-shadow (repintura) */
#tela-entrega .ec-fn[data-vivo="vivo"] .ec-fn-t small::before{box-shadow:none;animation:echVivoLeve 1.6s ease-in-out infinite}
@keyframes echVivoLeve{50%{opacity:.35;transform:scale(.8)}}