/* Só os cartões V2. O original permanece intacto quando hubExpV2 = '0'. */
.e.exp-card{
  --exp-texto:#323200;--exp-sub:var(--label2,#6B5A4C);
  --exp-fundo:var(--surface,#fff);--exp-quadro:var(--surface2,#F7F3EE);
  --exp-fio:var(--sep,rgba(90,65,45,.14));--exp-acao:var(--acao,#1F5FD0);
  --exp-verde:var(--verde,#11994A);--exp-alerta:var(--queda,#E21D3C);
  position:relative;
  display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;height:auto;flex-shrink:0;
  box-sizing:border-box;padding:12px;border:1px solid var(--exp-fio);border-radius:20px;
  background:var(--exp-fundo);color:var(--exp-texto);box-shadow:0 2px 6px rgba(50,50,0,.04);
  text-align:left;overflow:visible;contain:layout;content-visibility:visible;
  container:exp-card / inline-size;cursor:pointer;
}
body.dark .e.exp-card{--exp-texto:var(--label,#F5EFE8);--exp-sub:var(--label2,#CBBFB3);--exp-fundo:var(--surface,#221F1C);--exp-quadro:var(--surface2,#2A2622);--exp-acao:var(--acao,#3D8BFF);--exp-verde:var(--verde,#34D27B);--exp-alerta:var(--queda,#FF4D63)}
.e.exp-card.sel{outline:0;background:var(--exp-quadro);box-shadow:0 4px 12px rgba(50,50,0,.12);border-color:var(--exp-fio);transform:translateY(-1px)}
.e.exp-card.grouped{border-top-color:var(--exp-fio);border-top-width:1px}
.e.exp-card:focus-visible{outline:3px solid var(--exp-acao);outline-offset:2px}
.exp-card *{box-sizing:border-box}
.exp-card :is(button,[data-jump],[data-shake]){touch-action:manipulation}
.exp-card :is(button,[data-jump],[data-shake]):focus-visible{outline:2px solid var(--exp-acao);outline-offset:2px}
.exp-card .chk{position:static;align-self:flex-end;pointer-events:none}
.exp-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.exp-numero{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;font-size:calc(28px * var(--dt,1) / .85);font-weight:800;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.exp-numero>b{overflow-wrap:anywhere}
.exp-numero.late{color:var(--exp-alerta)}
.exp-card .plat{display:inline-flex;flex:none;width:28px;height:28px;align-items:center;justify-content:center}
.exp-card .plat img{display:block;width:100%;height:100%;border-radius:7px}
.exp-timer{flex:0 1 auto;min-width:0;max-width:48%;padding:5px 8px;border-radius:9px;background:var(--exp-quadro);color:var(--exp-sub);font-size:max(11px,calc(14px * var(--dt,1) / .85));font-weight:750;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.exp-timer.late{color:var(--exp-alerta)}
.exp-cliente{font-size:calc(22px * var(--dt,1) / .85);font-weight:780;line-height:1.15;overflow-wrap:anywhere}
.exp-cliente>small{display:block;margin-top:3px;color:var(--exp-sub);font-size:max(11px,calc(12px * var(--dt,1) / .85));font-weight:600;line-height:1.3}
.exp-faixa{display:flex;align-items:center;gap:8px;min-width:0;border-top:1px solid var(--exp-fio);padding-top:8px;color:var(--exp-sub)}
.exp-cap{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--exp-quadro);color:var(--exp-sub)}
.exp-cap.ifood{background:var(--canal-ifood);color:var(--acao-txt,#fff)}
.exp-cap.nine{background:var(--canal-99food);color:#323200}
.exp-cap.own{background:var(--d-anil,#5B6CFF);color:var(--acao-txt,#fff)}
.exp-card .driver-helmet{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.exp-entregador{flex:1;min-width:0;font-size:max(11px,calc(14px * var(--dt,1) / .85));line-height:1.3;overflow-wrap:anywhere}
.exp-entregador>b{font-weight:700}
.exp-entregador>small{display:block;font-size:max(11px,calc(12px * var(--dt,1) / .85));font-weight:550;color:var(--exp-sub)}
.exp-faixa.loja .exp-entregador{color:var(--tinta-verde,var(--exp-verde))}
.exp-faixa.vem .exp-entregador{color:var(--exp-acao)}
.exp-faixa.sem .exp-entregador{color:var(--d-laranja-t,#A64400)}
.exp-faixa.retirada .exp-entregador{color:var(--d-anil-t,#394DC8)}
.exp-code{display:flex;flex:0 1 auto;max-width:43%;min-width:0;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.15;text-align:right;overflow-wrap:anywhere;color:var(--exp-texto)}
.exp-code small{font-size:max(11px,calc(10px * var(--dt,1) / .85));font-weight:650}
.exp-code b{font-size:calc(20px * var(--dt,1) / .85);font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.exp-code.alerta{padding:5px 7px;border-radius:10px;background:var(--exp-alerta);color:var(--acao-txt,#fff)}
.exp-card .exp-selos{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0}
.exp-card .exp-selos>:is(.cnt,.badge,.turbo,.latetag){display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;max-width:100%;min-height:24px;height:auto;padding:4px 8px;border:0;border-radius:99px;font-size:max(11px,calc(11px * var(--dt,1) / .85));line-height:1.2;white-space:normal;overflow-wrap:anywhere;background:var(--exp-quadro);color:var(--exp-sub)}
.exp-card .exp-selos .grp{flex-wrap:wrap}
.exp-card .exp-selos .grp svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor}
.exp-card .exp-selos .bv{background:color-mix(in srgb,var(--exp-acao) 12%,transparent);color:var(--exp-acao)}
.exp-card .exp-selos :is(.latetag,.exp-conferir){background:var(--exp-alerta);color:var(--acao-txt,#fff)}
.exp-card .exp-selos .simtag{background:var(--exp-alerta);color:var(--acao-txt,#fff);font-weight:800}
.exp-card .exp-selos .obstag{color:var(--exp-sub)}
.exp-card .exp-selos .turbo{color:var(--d-laranja-t,#A64400)}
.exp-card .exp-selos .turbo svg{width:13px;height:13px;fill:none;stroke:currentColor}
.exp-card .exp-avisos:empty,.exp-mini-detalhe:empty{display:none}
.exp-card .exp-avisos{display:flex;flex-direction:column;gap:6px;min-width:0}
.exp-card .exp-avisos>:is(.oinfo,.orow,.her-card){display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:8px 10px;border:0;border-radius:12px;background:color-mix(in srgb,var(--exp-alerta) 9%,var(--exp-fundo));font-size:max(11px,calc(12px * var(--dt,1) / .85));line-height:1.4;overflow-wrap:anywhere}
.exp-card .exp-avisos [data-cancel-pin]{display:block;width:100%;max-width:100%;min-width:0}
.exp-card .exp-avisos .oacts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.exp-card .exp-avisos .btn{min-height:36px;height:auto;max-width:100%;padding:6px 8px;font-size:inherit;line-height:1.25;white-space:normal;text-align:left}
.exp-corpo{display:flex;flex-direction:column;gap:10px;min-width:0}
.exp-corpo>div{display:flex;flex-direction:column;gap:8px;min-width:0}
@container exp-card (min-width:430px){.exp-corpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start}}
.exp-card .items{display:flex;flex-direction:column;gap:6px;min-width:0}
.exp-card .items .pz{padding:0;min-width:0}
.exp-card .items .pzh{font-size:max(11px,calc(11px * var(--dt,1) / .85));line-height:1.3;color:var(--exp-sub)}
#view-exp .e.exp-card .items.sm .fl{font-size:calc(22px * var(--dt,1) / .85);font-weight:750;line-height:1.25;overflow-wrap:anywhere}
.exp-card .items .fr{font-size:.6em}
.exp-card :is(.comp,.obs,.drink){display:block;margin:4px 0 0;padding:6px 8px;border-radius:10px;font-size:max(11px,calc(14px * var(--dt,1) / .85));line-height:1.3;overflow-wrap:anywhere}
.exp-card .comp{background:color-mix(in srgb,var(--d-amarelo,#F2B000) 14%,var(--exp-fundo));color:var(--exp-texto)}
.exp-card .obs{background:color-mix(in srgb,var(--exp-alerta) 10%,var(--exp-fundo));color:var(--exp-alerta)}
.exp-card .drink{background:color-mix(in srgb,var(--exp-acao) 10%,var(--exp-fundo));color:var(--exp-texto);font-weight:700}
.exp-card .drink>small{display:block;color:var(--exp-acao);font-size:.8em}
.exp-card .steps{display:flex;flex-wrap:wrap;gap:5px;margin:0;min-width:0}
.exp-card .step{max-width:100%;padding:4px 7px;border-radius:7px;background:var(--exp-quadro);color:var(--exp-sub);font-size:max(11px,calc(11px * var(--dt,1) / .85));line-height:1.3;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.exp-card .step.live{background:color-mix(in srgb,var(--exp-acao) 12%,var(--exp-fundo));color:var(--exp-acao)}
.exp-card .step.prom{background:color-mix(in srgb,var(--d-laranja,#F57A1C) 12%,var(--exp-fundo));color:var(--d-laranja-t,#A64400)}
.exp-card .step.prom.late{color:var(--exp-alerta)}
.exp-pagamento{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px;border-radius:10px;background:var(--exp-quadro);font-size:max(11px,calc(12px * var(--dt,1) / .85));line-height:1.35;overflow-wrap:anywhere}
.exp-card .lnk{height:auto;min-height:30px;white-space:normal;overflow-wrap:anywhere;text-align:left;font-size:inherit}
.exp-card .waitlbl{position:static;inset:auto;display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-radius:10px;background:var(--exp-quadro);color:var(--exp-sub);font-size:max(11px,calc(12px * var(--dt,1) / .85));line-height:1.35;overflow-wrap:anywhere;z-index:auto}
.exp-card .waitlbl b{display:inline;font-size:inherit}
.exp-pe{order:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px;min-width:0}
.exp-utilidades,.exp-setas{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}
.exp-setas{flex:1 0 auto;max-width:100%;justify-content:flex-end}
.exp-card :is(.exp-icone,.fiscal-lnk){display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;min-width:36px;height:36px;min-height:36px;padding:8px;border:0;border-radius:50%;background:var(--exp-quadro);color:var(--exp-sub);cursor:pointer}
.exp-card .exp-icone svg,.exp-card .fiscal-lnk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.exp-card .exp-cancelar{color:var(--exp-alerta)}
.exp-card .exp-pe .adv{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:0 1 auto;width:auto;min-width:36px;max-width:100%;height:auto;min-height:36px;padding:6px 10px;border:0;border-radius:99px;background:var(--exp-acao);color:var(--acao-txt,#fff);font-size:max(11px,calc(12px * var(--dt,1) / .85));line-height:1.25;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.exp-card .exp-pe .adv.back{background:var(--exp-quadro);color:var(--exp-sub)}
.exp-card .exp-pe button:disabled{opacity:.55;cursor:progress}
/* Enviando: nada entra no fluxo. O aviso cobre o rodapé já existente (sem
   mudar altura nem largura) e a trava absoluta conserva a geometria e recebe
   o toque repetido. O aviso é visível para quem está na loja e para o leitor
   de tela, e não intercepta o toque. */
.exp-card .exp-pe{position:relative}
.exp-enviando{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;
  border-radius:inherit;background:color-mix(in srgb,var(--exp-quadro) 88%,transparent);color:var(--exp-sub);
  font-size:max(11px,calc(12px * var(--dt,1) / .85));font-weight:600;pointer-events:none}
/* A entrada do cartão (animacoes.css) não pode ser remontada no envio: o
   quadro de scale(.96) moveria justamente a área que a pessoa acabou de tocar. */
body[data-hub-exp-v2] :is(#view-exp,#view-kds) .e.exp-card.enviando{animation:none!important}
.e.exp-card.enviando{cursor:progress}
.exp-trava{position:absolute;inset:0;z-index:44;border-radius:inherit;background:transparent;cursor:progress}
.e.exp-card.enviando .exp-pe{opacity:.8}
.e.exp-mini{display:flex;flex-direction:column;align-items:stretch;container-type:normal;padding:9px 10px;gap:5px;border-radius:16px}
.exp-mini .exp-numero{gap:6px;font-size:calc(22px * var(--dt,1) / .85)}
.exp-mini .plat{width:22px;height:22px}
.exp-mini .exp-cliente{font-size:calc(16px * var(--dt,1) / .85)}
#view-exp .e.exp-mini .items.sm .fl{font-size:max(11px,calc(14px * var(--dt,1) / .85))}
/* A paleta global troca os logos por ícones; nas telas operacionais vale o v17. */
html.hub-exp-v2 .exp-card .plat img{content:normal;object-fit:contain;border-radius:6px;background:transparent}
html.hub-exp-v2 .exp-card .plat.own .mark{display:block;width:100%;height:100%;font-size:0;background:url('/assets/canais/philippes-pizza.png') center/contain no-repeat}
.exp-mini-status{border-radius:8px;background:var(--exp-quadro);padding:5px 8px;color:var(--exp-sub);font-size:max(11px,calc(12.5px * var(--dt,1) / .85));font-weight:600;line-height:1.3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.exp-mini-status.loja{background:color-mix(in srgb,var(--exp-verde) 16%,var(--exp-fundo));color:var(--tinta-verde,var(--exp-verde))}
.exp-mini-status small{display:block;font-size:inherit;font-weight:500}
.exp-card .exp-selos:empty{display:none}
.e.exp-card.exp-na-loja:not(.exp-mini){border-color:var(--exp-verde);box-shadow:0 0 0 2px var(--exp-verde)}
/* Mini do v17: número inteiro no alto e ações em pílulas no rodapé.
   Códigos, avisos, grupo, fiscal e reimpressão continuam visíveis. */
.exp-mini .exp-topo{min-width:0}
.exp-mini .chk{justify-self:end}
.exp-mini .exp-pe{display:block;position:relative;z-index:auto;margin-top:auto}
.exp-mini .exp-setas{display:flex;flex-wrap:nowrap;gap:4px;width:100%;margin-top:6px}
.exp-mini .exp-setas:empty{display:none}
.exp-mini .exp-setas .adv:only-child{flex:0 1 calc(50% - 2px);margin-left:auto}
.exp-mini .exp-setas .adv.back:only-child{margin-left:0;margin-right:auto}
.exp-mini .exp-pe .adv{width:auto;flex:1 1 0;height:30px;min-height:30px;padding:0 8px;font-size:18px;line-height:1}
.exp-card .items .drink{border:0}
#view-exp .exp-card .exp-pe .adv{height:auto;min-height:36px;min-width:36px}
#view-exp .exp-mini .exp-pe .adv{height:30px;min-height:30px;min-width:30px}
.exp-cancelamento{display:flex;flex-direction:column;gap:4px;color:var(--exp-sub);font-size:max(11px,calc(12px * var(--dt,1) / .85));line-height:1.35;overflow-wrap:anywhere}
.exp-cancelado .exp-numero>b{text-decoration:line-through}
.exp-comanda{color:var(--d-laranja-t,#A64400)}
@media (prefers-reduced-motion:reduce){.e.exp-card,.e.exp-card *{animation:none!important;transition:none!important}.e.exp-card.sel{transform:none}}

/* A folha de Tempos usa #view-exp #lanes .e. No celular, prevalece o conteúdo real,
   sem descartar a pintura nem reservar os 480 px fictícios daquela folha. */
@media(max-width:760px){#view-exp #lanes .e.exp-card{container-type:normal;content-visibility:visible;contain-intrinsic-size:auto}}

/* TREM-EXPKDS-USO: com MUITOS pedidos (a casca liga html.xk-muitos-exp acima de 60 cards e desliga abaixo de 48),
   só o card perto da tela é estilizado, medido e pintado. Com 320 pedidos, abrir uma folha ou a tela cheia
   recalculava o estilo de 8.700 elementos (até 1,1 s com CPU 4x); o card fora da tela passa a custar um elemento.
   A reserva é a altura medida de cada tipo e coluna, já sem os 26 px de borda e respiro (vale para a caixa de
   conteúdo), e, depois da primeira pintura, a altura real lembrada (auto): a coluna não pula ao rolar.
   Com poucos pedidos nada muda: o card segue sempre pintado, como as regras acima pedem. */
html.xk-muitos-exp #view-exp #lanes .e.exp-card{content-visibility:auto;contain-intrinsic-size:auto 594px}
html.xk-muitos-exp #view-exp #lanes .e.exp-card.mini{contain-intrinsic-size:auto 164px}
html.xk-muitos-exp #view-exp #lanes .c-cozinha .e.exp-card.mini{contain-intrinsic-size:auto 199px}
html.xk-muitos-exp #view-exp #lanes .c-entregue .e.exp-card.mini{contain-intrinsic-size:auto 138px}
html.xk-muitos-exp #view-exp #lanes .c-cancelado .e.exp-card.mini{contain-intrinsic-size:auto 102px}
@media(max-width:760px){
  html.xk-muitos-exp #view-exp #lanes .e.exp-card{content-visibility:auto;contain-intrinsic-size:auto 615px}
  html.xk-muitos-exp #view-exp #lanes .e.exp-card.mini{contain-intrinsic-size:auto 164px}
  html.xk-muitos-exp #view-exp #lanes .c-cozinha .e.exp-card.mini{contain-intrinsic-size:auto 167px}
  html.xk-muitos-exp #view-exp #lanes .c-rota .e.exp-card.mini{contain-intrinsic-size:auto 192px}
  html.xk-muitos-exp #view-exp #lanes .c-entregue .e.exp-card.mini{contain-intrinsic-size:auto 138px}
  html.xk-muitos-exp #view-exp #lanes .c-cancelado .e.exp-card.mini{contain-intrinsic-size:auto 102px}
}

/* A área de toque segue em 44 px sem aumentar a pílula visual do v17. */
html.hub-toque #view-exp .exp-mini .exp-pe .adv{position:relative;height:30px;min-height:30px}
html.hub-toque #view-exp .exp-mini .exp-pe .adv::before{content:'';position:absolute;inset:-7px 0}

/* O aviso da espera está no fluxo, sem o deslocamento vertical do legado. */
.e.exp-card .waitlbl{transform:none}
/* TREM-FICHA-TRAVA rodada 2: o comando de devolver a etapa leva o rótulo inteiro ("Devolver para Pronto"), nunca a
   seta sozinha. No cartão mini ele ocupa a linha de cima e o avançar fica embaixo; armado, pede a confirmação. */
.exp-card .exp-pe .adv.exp-devolver,#view-exp .exp-mini .exp-pe .adv.exp-devolver{height:auto;min-height:30px;padding:5px 10px;font-size:max(11px,calc(12px * var(--dt,1) / .85));font-weight:600;line-height:1.25;white-space:normal;overflow-wrap:anywhere;text-align:center}
.exp-mini .exp-setas:has(.exp-devolver){flex-wrap:wrap}
.exp-mini .exp-setas .adv.exp-devolver,.exp-mini .exp-setas .adv.exp-devolver:only-child{flex:1 1 100%;margin:0}
.exp-mini .exp-setas .adv.exp-devolver + .adv{flex:0 1 calc(50% - 2px);margin-left:auto}
html.hub-toque #view-exp .exp-card .exp-pe .adv.exp-devolver{min-height:44px}
.exp-card .exp-pe .adv.exp-devolver.exp-devolver-confirmar,#view-exp .exp-mini .exp-pe .adv.exp-devolver.exp-devolver-confirmar{background:color-mix(in srgb,var(--exp-alerta) 82%,#000);color:#fff;font-weight:700}
/* Rodada 4: armar não desloca nada. O comando armado guarda a caixa do rótulo de antes e a confirmação fica fora do
   fluxo, logo acima da fileira de comandos do cartão (nunca sob o ponto do primeiro toque). */
.exp-card .exp-pe .adv.exp-devolver[data-devolver-armado],#view-exp .exp-mini .exp-pe .adv.exp-devolver[data-devolver-armado]{display:inline-grid;place-items:center}
.exp-card .exp-pe .adv.exp-devolver.exp-devolver-confirmar,#view-exp .exp-mini .exp-pe .adv.exp-devolver.exp-devolver-confirmar{position:absolute;right:0;bottom:calc(100% + 4px);z-index:3;flex:none;width:auto;height:auto;max-width:100%;margin:0;padding:5px 10px;white-space:normal}
html.hub-toque #view-exp .exp-mini .exp-pe .adv.exp-devolver.exp-devolver-confirmar{position:absolute;min-height:44px}
html.hub-toque #view-exp .exp-mini .exp-pe .adv.exp-devolver.exp-devolver-confirmar::before{content:none}