/* ═══════════════════════════════════════════════════════════════
   Cerrado Express — telas do app em movimento: recriações fiéis das telas
   REAIS do app (repo cerrado-express, frontend/components), rodando sozinhas
   como uma gravação de tela.
     CelularMockup       moldura; a tela de 300×620 é escalada para `largura` px
     DemoClienteEntrega  Novo Pedido → modal → modalidade → Confirmar → rastreio
                         (ClientMobile, VehicleTypePicker, ModalityPicker, PublicTracking)
     DemoClienteCorrida  aba Mobilidade do ClientMobile: destino → corrida → chegada
     DemoEntregador      DriverApp: online → oferta → coleta com código → entregue
     DemoPainelEmpresa   "Minhas Entregas" do ClientMobile com status ao vivo
   O app é montado em 375×775 (os px das classes Tailwind do app, em estilo
   inline) e reduzido a 0,8. Uma linha do tempo por demo; pausa fora da tela
   e com a aba oculta; prefers-reduced-motion mostra uma tela estática.
   Depende de site-primitives.jsx (CE, Icon); usa ceAsset() se existir.
   ═══════════════════════════════════════════════════════════════ */
(function () {
var F = typeof CE !== 'undefined' ? CE.body : "'Inter',system-ui,sans-serif";
var FD = typeof CE !== 'undefined' ? CE.disp : "'Bahnschrift','Saira Condensed',sans-serif";
var FM = 'ui-monospace,SFMono-Regular,Menlo,Consolas,monospace';
var asset = function (p) { return typeof ceAsset === 'function' ? ceAsset(p) : (window.ASSET_BASE != null ? window.ASSET_BASE : '../../') + p; };
var SAT = 50, SAB = 26; // áreas seguras (status bar / indicador), em px do app

/* tokens do app (index.css @theme: bg-white = #e6e7e9, paper = branco) + Tailwind v4 */
var C = {
  w: '#e6e7e9', paper: '#fff', sheet: '#ecedef', amb: '#d97706', amb2: '#ea8a00',
  p500: '#f2b11d', p100: '#ffda00', p600: '#381003', p50: '#f2eee7',
  rust: '#C2410C', rust6: '#A4360A', rust7: '#832A07', sun4: '#FB923C', sun5: '#F97316', sun50: '#FFF5EB', sun3: '#FDB066', navy: '#0F1C3E',
  n50: '#F6F7F9', n100: '#ECEEF3', n200: '#DCE0E8', n300: '#BFC6D4', n400: '#97A1B4', n500: '#6B7689', n700: '#353C49', n900: '#14171D',
  g50: '#f9fafb', g100: '#f3f4f6', g200: '#e5e7eb', g300: '#d1d5dc', g400: '#99a1af', g500: '#6a7282', g600: '#4a5565', g700: '#364153', g800: '#1e2939', g900: '#101828',
  b50: '#eff6ff', b100: '#dbeafe', b200: '#bedbff', b300: '#8ec5ff', b400: '#51a2ff', b500: '#2b7fff', b600: '#155dfc', b700: '#1447e6', b800: '#193cb8', b900: '#1c398e',
  gr50: '#f0fdf4', gr200: '#b9f8cf', gr400: '#05df72', gr500: '#00c950', gr600: '#00a63e', gr700: '#008236', gr800: '#016630',
  r50: '#fef2f2', r100: '#ffe2e2', r200: '#ffc9c9', r400: '#ff6467', r500: '#fb2c36', r600: '#e7000b',
  a50: '#fffbeb', a100: '#fef3c6', a200: '#fee685', a500: '#fe9a00', a700: '#bb4d00', a800: '#973c00',
  pu50: '#faf5ff', pu100: '#f3e8ff', pu200: '#e9d4ff', pu300: '#dab2ff', pu400: '#c27aff', pu500: '#ad46ff', pu600: '#9810fa', pu700: '#8200db', pu800: '#6e11b0',
  y50: '#fefce8', y200: '#fff085', y400: '#fdc700', y500: '#f0b100', y700: '#a65f00',
  o100: '#ffedd4', o300: '#ffb86a', o500: '#ff6900', o600: '#f54900', o800: '#9f2d00', i100: '#e0e7ff', i800: '#372aac',
  sky: '#0ea5e9', sky4: '#00bcff', d0: '#0D0D0D', d1: '#1A1A1A', d2: '#252525', d3: '#1E1E1E'
};

var CSS = [
  '.ce-app-tela,.ce-app-tela *{box-sizing:border-box}',
  '.ce-app-tela{font:400 16px/1.5 ' + F + ';-webkit-font-smoothing:antialiased;text-align:left;letter-spacing:0;text-transform:none;white-space:normal;user-select:none}',
  '@keyframes ce-app-toque{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.1);opacity:0}}',
  '.ce-app-toque{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:rgba(17,20,26,.26);box-shadow:0 0 0 2px rgba(255,255,255,.85);pointer-events:none;z-index:9;animation:ce-app-toque .6s ease-out both}',
  '@keyframes ce-app-ping{75%,100%{transform:scale(2);opacity:0}}.ce-app-ping{animation:ce-app-ping 1s cubic-bezier(0,0,.2,1) infinite}',
  '@keyframes ce-app-pulso{50%{opacity:.5}}.ce-app-pulso{animation:ce-app-pulso 2s cubic-bezier(.4,0,.6,1) infinite}',
  '@keyframes ce-app-gira{to{transform:rotate(360deg)}}',
  '@keyframes ce-app-pula{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.ce-app-pula{animation:ce-app-pula 1s infinite}',
  '@keyframes ce-app-pisca{0%,100%{background-color:#252525}50%{background-color:rgba(234,179,8,.15)}}.ce-app-pisca{animation:ce-app-pisca 1.5s ease-in-out infinite}',
  '@keyframes ce-app-entra{from{opacity:0}}.ce-app-entra{animation:ce-app-entra .45s ease both}',
  '@keyframes ce-app-sobe{from{opacity:0;transform:translateY(14px)}}.ce-app-sobe{animation:ce-app-sobe .4s cubic-bezier(.2,.8,.2,1) both}',
  '@keyframes ce-app-cursor{50%{opacity:0}}.ce-app-cursor{display:inline-block;width:1.5px;height:15px;background:currentColor;vertical-align:-3px;margin-left:1px;animation:ce-app-cursor .9s steps(1) infinite}',
  '@keyframes ce-app-radar{0%{transform:scale(.3);opacity:.7}100%{transform:scale(2.6);opacity:0}}.ce-app-radar{transform-box:fill-box;transform-origin:center;animation:ce-app-radar 1.8s ease-out infinite}',
  '@keyframes ce-app-zoom{from{transform:scale(.5);opacity:0}}.ce-app-zoom{animation:ce-app-zoom .3s cubic-bezier(.2,.8,.2,1) both}',
  '@keyframes ce-app-aviso{from{opacity:0;transform:translateY(-16px) scale(.98)}}.ce-app-aviso{animation:ce-app-aviso .3s ease both}',
  '@keyframes ce-app-barra{from{width:100%}to{width:0}}',
  '@media (prefers-reduced-motion:reduce){.ce-app-tela *{animation:none!important;transition:none!important}}'
].join('\n');
if (typeof document !== 'undefined' && !document.getElementById('ce-app-css')) {
  var tagCss = document.createElement('style'); tagCss.id = 'ce-app-css'; tagCss.textContent = CSS; document.head.appendChild(tagCss);
}

/* ─── utilitários ─── */
function st() { var o = {}; for (var i = 0; i < arguments.length; i++) if (arguments[i]) Object.assign(o, arguments[i]); return o; }
var ROW = { display: 'flex', alignItems: 'center' }, COL = { display: 'flex', flexDirection: 'column' };
var FILL = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };
var CEN = { display: 'flex', alignItems: 'center', justifyContent: 'center' };
var UP = { textTransform: 'uppercase' }, ELL = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' };
var SH = { sm: '0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)', md: '0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)',
  lg: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)', xl: '0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)', x2: '0 25px 50px -12px rgba(0,0,0,.25)' };
function tx(fs, fw, c, x) { return st({ fontSize: fs, fontWeight: fw, color: c }, x); }
function blur(px) { return { backdropFilter: 'blur(' + px + 'px)', WebkitBackdropFilter: 'blur(' + px + 'px)' }; }
function cl(v) { return v < 0 ? 0 : v > 1 ? 1 : v; }
function pr(t, a, b) { return cl((t - a) / (b - a)); }
function em(t, a, b) { return t >= a && (b == null || t < b); }
function dig(s, t, a, ms) { return s.slice(0, Math.max(0, Math.floor((t - a) / (ms || 55)))); }
function brl(v) { return 'R$ ' + v.toFixed(2).replace('.', ','); }
function suave(p) { return p * p * (3 - 2 * p); }
/* toque visível (como o "mostrar toques" de uma gravação) + botão afundando */
function tq(t, t0) { return t0 != null && em(t, t0, t0 + 600) ? <span key={'tq' + t0} className="ce-app-toque" /> : null; }
function ap(t, t0) { return { position: 'relative', transition: 'transform .15s', transform: t0 != null && em(t, t0, t0 + 220) ? 'scale(.96)' : 'none' }; }
var LBL = { fontSize: 9, fontWeight: 700, color: C.n500, textTransform: 'uppercase', letterSpacing: '.08em' };

/* ─── ícones: os do kit (Icon) quando existem; os demais são traços do lucide ─── */
var LU = {
  menu: '<path d="M4 12h16M4 6h16M4 18h16"/>', plus: '<path d="M5 12h14M12 5v14"/>', x: '<path d="M18 6 6 18M6 6l12 12"/>',
  down: '<path d="m6 9 6 6 6-6"/>', right: '<path d="m9 18 6-6-6-6"/>', left: '<path d="m12 19-7-7 7-7M19 12H5"/>',
  nav: '<polygon points="3 11 22 2 13 21 11 13 3 11"/>', ok: '<path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/>',
  ok2: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>', user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
  car: '<path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/>',
  mira: '<circle cx="12" cy="12" r="10"/><path d="M22 12h-4M6 12H2M12 6V2M12 22v-4"/>', troca: '<path d="m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"/>',
  chat: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>', cartao: '<rect width="20" height="14" x="2" y="5" rx="2"/><path d="M2 10h20"/>',
  casa: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
  maleta: '<path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/><rect width="20" height="14" x="2" y="6" rx="2"/>',
  lapis: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>',
  chave: '<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4M21 2l-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>',
  camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
  alerta: '<circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>', lista: '<path d="M3 12h.01M3 18h.01M3 6h.01M8 12h13M8 18h13M8 6h13"/>',
  mapa: '<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15M9 3.236v15"/>',
  atualiza: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
  gps: '<path d="M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0"/><circle cx="12" cy="8" r="2"/><path d="M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712"/>',
  timer: '<path d="M10 2h4M12 14l3-3"/><circle cx="12" cy="14" r="8"/>', ajuda: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>',
  predio: '<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18ZM6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4"/>',
  coroa: '<path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294zM5 21h14"/>',
  pacote: '<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12M3.3 7l8.7 5 8.7-5M7.5 4.27l9 5.15"/>',
  wpp: '<path fill="currentColor" stroke="none" d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 4.54 0 8.24 3.7 8.24 8.24 0 4.55-3.7 8.24-8.24 8.24z"/>'
};
function Ic(p) {
  var s = p.s || 16, est = st({ flex: 'none', display: 'block' }, p.st);
  if (!LU[p.n] && typeof Icon === 'function') return <Icon name={p.n} size={s} color={p.c || 'currentColor'} strokeWidth={p.w || 2} style={est} />;
  return <svg width={s} height={s} viewBox="0 0 24 24" fill={p.f || 'none'} fillOpacity={p.fo} stroke={p.c || 'currentColor'} strokeWidth={p.w || 2}
    strokeLinecap="round" strokeLinejoin="round" style={est} dangerouslySetInnerHTML={{ __html: LU[p.n] || '' }} />;
}

/* ilustração oficial do modal (lateral), como IllustrationIcon: ocupa s×s e desenha 1,6×escala */
var VEIC = { moto_bag: ['moto-bag', 1, 'Moto Bag'], moto_carretinha: ['moto-carretinha', 1.4, 'Moto Carretinha'], car: ['car', 1.15, 'Carro'], bike: ['bike', 1.05, 'Bike'], truck: ['truck', 1.05, 'Caminhão'] };
function Veic(p) {
  var v = VEIC[p.k], s = p.s || 22, big = Math.round(s * 1.6 * v[1]), off = -Math.round((big - s) / 2);
  return <span style={st(CEN, { width: s, height: s, flex: 'none', overflow: 'visible' })}>
    <img src={asset('assets/veiculos/' + v[0] + '.png')} alt="" draggable="false" style={{ width: big, height: big, maxWidth: 'none', objectFit: 'contain', margin: off, display: 'block' }} /></span>;
}

/* ─── relógio da demo: um tempo só; pausa fora da tela ou com a aba oculta ─── */
function useReduz() {
  var q = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null, _r = React.useState(q ? q.matches : false);
  React.useEffect(function () {
    if (!q) return; var f = function () { _r[1](q.matches); }, add = !!q.addEventListener;
    if (add) q.addEventListener('change', f); else q.addListener(f);
    return function () { if (add) q.removeEventListener('change', f); else q.removeListener(f); };
  }, []);
  return _r[0];
}
function useDemo(total, tEstatico, continuo) {
  var ref = React.useRef(null), rel = React.useRef({ base: 0, acum: 0 });
  var reduz = useReduz();
  var _v = React.useState(false), vis = _v[0], setVis = _v[1];
  var _o = React.useState(typeof document !== 'undefined' && document.hidden), oculto = _o[0], setOculto = _o[1];
  var _t = React.useState(0), abs = _t[0], setAbs = _t[1];
  React.useEffect(function () {
    var el = ref.current, io = null;
    if (el && 'IntersectionObserver' in window) {
      io = new IntersectionObserver(function (es) { setVis(es[es.length - 1].isIntersecting); }, { threshold: 0.12 });
      io.observe(el);
    } else setVis(true);
    var f = function () { setOculto(document.hidden); };
    document.addEventListener('visibilitychange', f);
    return function () { if (io) io.disconnect(); document.removeEventListener('visibilitychange', f); };
  }, []);
  var ativo = vis && !oculto && !reduz;
  React.useEffect(function () {
    if (!ativo) return;
    var r = rel.current; r.base = performance.now() - r.acum;
    var id = setInterval(function () { r.acum = performance.now() - r.base; setAbs(r.acum); }, 90);
    return function () { clearInterval(id); r.acum = performance.now() - r.base; };
  }, [ativo]);
  var t = reduz ? tEstatico : abs % total;
  return { ref: ref, rel: rel, ativo: ativo, reduz: reduz, total: total, t: t, volta: reduz || continuo ? 0 : Math.floor(abs / total), saindo: !reduz && !continuo && t > total - 380,
    borda: !reduz && (t > total - 380 || t < 260) };
}

/* ─── moldura do celular ─── */
var Barra = React.createContext(function () {});
function useBarra(escura) { var set = React.useContext(Barra); React.useEffect(function () { set(!!escura); }, [escura]); }
function CelularMockup(p) {
  var s = (p.largura || 300) / 300;
  var _e = React.useState(false), escura = _e[0], setEscura = _e[1];
  var cor = escura ? '#fff' : '#0b0d10';
  return (
    <div className="ce-app-tela" style={{ position: 'relative', width: 324 * s, height: 644 * s, flex: 'none' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, width: 324, height: 644, transform: 'scale(' + s + ')', transformOrigin: '0 0' }}>
        {[[-2.5, 104, 28], [-2.5, 148, 50], [-2.5, 206, 50], [323.5, 168, 76]].map(function (b, i) { return <i key={i} style={{ position: 'absolute', left: b[0], top: b[1], width: 3, height: b[2], borderRadius: 2, background: '#1c2027' }} />; })}
        <div style={st(FILL, { borderRadius: 44, background: '#0C0E12', boxShadow: 'inset 0 0 0 1.5px #2c313a, inset 0 0 0 5px #0C0E12, inset 0 0 0 6px #181b21, 0 40px 70px -28px rgba(15,28,62,.6), 0 18px 34px -16px rgba(12,14,18,.45)' })} />
        <div style={{ position: 'absolute', left: 12, top: 12, width: 300, height: 620, borderRadius: 33, overflow: 'hidden', background: '#000', isolation: 'isolate', WebkitMaskImage: '-webkit-radial-gradient(white,black)' }}>
          <Barra.Provider value={setEscura}>{p.children}</Barra.Provider>
          <div style={st(ROW, { position: 'absolute', left: 0, right: 0, top: 0, height: 40, padding: '2px 22px 0 34px', justifyContent: 'space-between', color: cor, zIndex: 60, pointerEvents: 'none', transition: 'color .3s', fontFamily: '-apple-system,BlinkMacSystemFont,' + F })}>
            <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-.01em' }}>9:41</span>
            <span style={st(ROW, { gap: 5 })}>
              <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect y="7" width="3" height="4" rx="1" /><rect x="4.5" y="5" width="3" height="6" rx="1" /><rect x="9" y="2.5" width="3" height="8.5" rx="1" /><rect x="13.5" width="3" height="11" rx="1" /></svg>
              <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 2.3c2.1 0 4.1.8 5.6 2.2l1.2-1.2A9.8 9.8 0 0 0 7.5.6 9.8 9.8 0 0 0 .7 3.3l1.2 1.2a8.1 8.1 0 0 1 5.6-2.2Zm0 3.2c1.3 0 2.5.5 3.4 1.3l1.2-1.2a6.4 6.4 0 0 0-9.2 0l1.2 1.2c.9-.8 2.1-1.3 3.4-1.3Zm0 3.2c.5 0 .9.2 1.2.5L7.5 10.4 6.3 9.2c.3-.3.7-.5 1.2-.5Z" /></svg>
              <svg width="25" height="12" viewBox="0 0 25 12" fill="currentColor"><rect x=".5" y=".5" width="21" height="11" rx="3.2" fill="none" stroke="currentColor" opacity=".4" /><rect x="2" y="2" width="16" height="8" rx="1.8" /><path d="M23 4v4c.8-.3 1.4-1.1 1.4-2S23.8 4.3 23 4Z" opacity=".45" /></svg>
            </span></div>
          <div style={{ position: 'absolute', left: 106, top: 9, width: 88, height: 25, borderRadius: 13, background: '#000', zIndex: 61 }} />
          <div style={{ position: 'absolute', left: 94, bottom: 7, width: 112, height: 4, borderRadius: 3, background: cor, opacity: .85, zIndex: 61, transition: 'background .3s' }} />
        </div></div></div>
  );
}

/* viewport do app (375×775 px do app) reduzido para a tela de 300×620; remonta a cada volta do loop */
function Raiz(p) {
  var d = p.d;
  return (
    <div ref={d.ref} className="ce-app-tela" role="img" aria-label={p.rotulo} style={st(FILL, { overflow: 'hidden', background: p.fundo || '#000' })}>
      <div aria-hidden="true" style={{ position: 'absolute', left: 0, top: 0, width: 375, height: 775, transform: 'scale(.8)', transformOrigin: '0 0', overflow: 'hidden', fontFamily: F, color: C.g800 }}>
        <div key={d.volta} className={d.reduz ? '' : 'ce-app-entra'} style={st(FILL, { opacity: d.saindo ? 0 : 1, transition: 'opacity .35s' })}>{p.children}</div>
      </div></div>
  );
}

/* ─── mapa estilizado (claro = Google sem POI do ClientGoogleMap; escuro = DARK_MAP_STYLE do DriverMap) ─── */
var MAPA = {
  claro: { fundo: '#eef0f1', parque: '#cdeac0', agua: '#aad3f3', rua: '#fff', borda: '#d9dce0', rod: '#fde293', rodB: '#f1c75b', txt: '#7d838a', halo: '#fff' },
  escuro: { fundo: '#1a1a1a', parque: '#1d221e', agua: '#0e1626', rua: '#2c2c2c', borda: '#212121', rod: '#3a3a3a', rodB: '#262626', txt: '#8a8a8a', halo: '#1a1a1a' }
};
var RV = [18, 84, 150, 206, 268, 330], RH = [60, 118, 176, 236, 296, 356, 418, 480, 540, 602, 664, 726];
function Mapa(p) {
  var c = MAPA[p.tema || 'claro'];
  var ruas = function (w, cor) {
    return <g stroke={cor} fill="none">
      {RV.map(function (x) { return <line key={'v' + x} x1={x} y1="-30" x2={x} y2="820" strokeWidth={x === 206 ? w + 5 : w} />; })}
      {RH.map(function (y) { return <line key={'h' + y} x1="-30" y1={y} x2="410" y2={y} strokeWidth={y === 236 || y === 480 ? w + 5 : w} />; })}
      <line x1="117" y1="296" x2="117" y2="356" strokeWidth={w - 2} /><line x1="268" y1="388" x2="330" y2="388" strokeWidth={w - 2} />
    </g>;
  };
  var nome = function (s, x, y, rot) {
    return <text x={x} y={y} transform={rot ? 'rotate(-90 ' + x + ' ' + y + ')' : undefined} fontSize="10" fontWeight="500" fill={c.txt} stroke={c.halo} strokeWidth="3" paintOrder="stroke" fontFamily={F} textAnchor="middle">{s}</text>;
  };
  return (
    <svg viewBox={p.vb || '0 0 375 775'} preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', display: 'block', background: c.fundo }}>
      <path d="M-40 168 C 10 150 40 96 92 70 S 170 20 250 -30" stroke={c.agua} strokeWidth="26" fill="none" />
      <rect x="155" y="301" width="46" height="50" rx="3" fill={c.parque} /><rect x="273" y="423" width="52" height="52" rx="3" fill={c.parque} />
      <ellipse cx="299" cy="510" rx="22" ry="17" fill={c.agua} />
      {ruas(9, c.borda)}{ruas(7, c.rua)}
      <path d="M-30 705 L410 565" stroke={c.rodB} strokeWidth="16" /><path d="M-30 705 L410 565" stroke={c.rod} strokeWidth="12" />
      {nome('Av. Brasil', 290, 239.5)}{nome('R. Goiás', 128, 179.5)}{nome('Av. Goiás', 209.5, 390, true)}{nome('R. 15 de Novembro', 110, 421.5)}
      {p.children}
    </svg>
  );
}
function prep(pts) { var L = [0]; for (var i = 1; i < pts.length; i++) L.push(L[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1])); return { p: pts, L: L, tot: L[L.length - 1] }; }
function ponto(r, d) {
  d = Math.max(0, Math.min(r.tot, d));
  for (var i = 1; i < r.p.length; i++) {
    if (d <= r.L[i] || i === r.p.length - 1) { var k = (d - r.L[i - 1]) / ((r.L[i] - r.L[i - 1]) || 1); return [r.p[i - 1][0] + (r.p[i][0] - r.p[i - 1][0]) * k, r.p[i - 1][1] + (r.p[i][1] - r.p[i - 1][1]) * k]; }
  }
  return r.p[0];
}
/* posição e rumo do veículo: trechos [{r, de, ate}] em ms da linha do tempo */
function posicao(tr, t) {
  var k = 0; for (var i = 0; i < tr.length; i++) if (t >= tr[i].de) k = i;
  var s = tr[k], q = pr(t, s.de, s.ate), d = (s.lin ? q : suave(q)) * s.r.tot;
  var a = ponto(s.r, d - 7), b = ponto(s.r, d + 7), c = ponto(s.r, d);
  return { x: c[0], y: c[1], a: Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI, mov: t >= s.de && t < s.ate };
}
/* veículo visto de cima (frente para a direita): gira para o rumo; indo para oeste é espelhado,
   como no marcador do LiveMap — assim a perspectiva da arte não fica de cabeça para baixo */
var TOPO = { moto: 'moto-bag-top-sprite', car: 'car-top-sprite' };
function Veiculo(p) {
  var g = React.useRef(null), sv = React.useRef(null), d = p.d, S = p.tam || (p.tipo === 'car' ? 54 : 48);
  React.useEffect(function () {
    var raf;
    function desenha(t) {
      var e = posicao(p.trechos, t), oeste = Math.abs(e.a) > 90;
      if (g.current) g.current.setAttribute('transform', 'translate(' + e.x.toFixed(1) + ' ' + e.y.toFixed(1) + ') rotate(' + (oeste ? e.a - 180 : e.a).toFixed(1) + ')' + (oeste ? ' scale(-1 1)' : ''));
      if (sv.current) sv.current.setAttribute('viewBox', (e.mov ? Math.floor(t / 150) % 4 : 0) * 256 + ' 0 256 256');
    }
    function loop() { desenha((performance.now() - d.rel.current.base) % d.total); raf = requestAnimationFrame(loop); }
    if (d.ativo) raf = requestAnimationFrame(loop); else desenha(d.t);
    return function () { cancelAnimationFrame(raf); };
  }, [d.ativo, d.ativo ? 0 : d.t]);
  return <g style={{ opacity: p.mostra === false ? 0 : 1, transition: 'opacity .4s' }}><g ref={g}>
    <svg ref={sv} x={-S / 2} y={-S / 2} width={S} height={S} viewBox="0 0 256 256"><image href={asset('assets/veiculos/' + TOPO[p.tipo || 'moto'] + '.png')} width="1024" height="256" /></svg>
  </g></g>;
}
function Linha(p) {
  return <path d={'M' + p.r.p.map(function (q) { return q.join(' '); }).join(' L')} fill="none" stroke={p.cor || C.amb} strokeWidth={p.w || 5} strokeOpacity={p.op || .9}
    strokeLinejoin="round" strokeLinecap="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset={p.mostra === false ? 1 : 0}
    style={{ opacity: p.mostra === false ? 0 : 1, transition: 'stroke-dashoffset .8s ease, opacity .3s' }} />;
}
var PIN = 'M12 0C5.4 0 0 5.4 0 12c0 9 12 24 12 24s12-15 12-24C24 5.4 18.6 0 12 0z';
function Pino(p) {
  var s = p.s || 1.4;
  return <g style={{ opacity: p.mostra === false ? 0 : 1, transition: 'opacity .3s' }}><g transform={'translate(' + (p.x - 12 * s) + ' ' + (p.y - 36 * s) + ') scale(' + s + ')'}>
    <path d={PIN} fill={p.cor} stroke="#fff" strokeWidth={3 / s} />
    {p.l && <text x="12" y="16.5" textAnchor="middle" fontSize={13 / s} fontWeight="700" fill="#fff" fontFamily={F}>{p.l}</text>}</g></g>;
}
function Caixa(p) { // ícone de coleta do DriverMap (buildBoxIcon)
  return <g transform={'translate(' + (p.x - 14) + ' ' + (p.y - 14) + ')'}><rect x="1.25" y="1.25" width="25.5" height="25.5" rx="7" fill={p.cor} stroke="#fff" strokeWidth="2.5" />
    <g transform="translate(7 7) scale(.5833)" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12" /></g></g>;
}
function Radar(p) { return <g>{[0, .9].map(function (dl) { return <circle key={dl} className="ce-app-radar" cx={p.x} cy={p.y} r="16" fill="rgba(217,119,6,.35)" style={{ animationDelay: dl + 's' }} />; })}</g>; }

/* ─── peças comuns do ClientMobile ─── */
function Hamb() { return <div style={st(CEN, { position: 'absolute', top: 24 + SAT, left: 16, padding: 10, background: C.amb2, borderRadius: 12, border: '1px solid rgba(230,231,233,.2)', boxShadow: SH.lg, zIndex: 4, color: C.w })}><Ic n="menu" s={20} /></div>; }
function Alca(p) {
  return <div style={st(CEN, { padding: '12px 0 4px', position: 'relative' })}><div style={{ width: 40, height: 4, borderRadius: 9, background: C.g300 }} />
    {p.dedo && <span style={{ position: 'absolute', left: '50%', top: 4, width: 40, height: 40, marginLeft: -20, borderRadius: 99, background: 'rgba(17,20,26,.26)', boxShadow: '0 0 0 2px rgba(255,255,255,.85)', zIndex: 9 }} />}</div>;
}
function Folha(p) { // VehicleTypePicker / ModalityPicker: folha sobre a tela
  return <div style={st(FILL, { zIndex: 30, pointerEvents: 'none' })}>
    <div style={st(FILL, { background: 'rgba(0,0,0,.5)', opacity: p.aberto ? 1 : 0, transition: 'opacity .25s' }, p.aberto && blur(6))} />
    <div style={st(COL, { position: 'absolute', left: 0, right: 0, bottom: 0, background: C.paper, borderRadius: '16px 16px 0 0', boxShadow: SH.x2, transform: p.aberto ? 'none' : 'translateY(105%)', transition: 'transform .32s cubic-bezier(.2,.8,.2,1)' })}>
      <div style={st(ROW, { alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, padding: '16px 16px 12px', borderBottom: '1px solid ' + C.n200 })}>
        <div><div style={tx(15, 700, C.n900)}>{p.titulo}</div><div style={tx(11, 400, C.n500, { marginTop: 2 })}>{p.sub}</div></div>
        <span style={{ color: C.n400, padding: 2 }}><Ic n="x" s={18} /></span>
      </div>
      <div style={{ padding: 8, paddingBottom: p.rodape ? 2 : 8 + SAB }}>{p.children}</div>
      {p.rodape && <div style={{ padding: '10px 16px', paddingBottom: 10 + SAB, borderTop: '1px solid ' + C.n200 }}><p style={tx(10, 400, C.n400, { margin: 0, lineHeight: 1.375 })}>{p.rodape}</p></div>}
    </div>
  </div>;
}
function Opcao(p) {
  return <div style={st(ROW, ap(p.t, p.t0), { gap: 12, padding: 12, borderRadius: 12, border: '1px solid ' + (p.on ? C.sun4 : C.n200), background: p.on ? C.sun50 : C.paper, marginBottom: 6, transition: 'background .2s, border-color .2s, transform .15s' })}>
    <span style={st(CEN, { width: 20, height: 20, borderRadius: 99, border: '2px solid ' + (p.on ? C.sun5 : C.n300), background: p.on ? C.sun5 : 'transparent', color: C.w, flex: 'none' })}>{p.on && <Ic n="check" s={12} w={3} />}</span>
    {p.children}{tq(p.t, p.t0)}
  </div>;
}
function Aviso(p) { // toast do FeedbackHost
  return p.on ? <div className="ce-app-aviso" style={{ position: 'absolute', left: 8, right: 8, top: SAT + 8, zIndex: 50, borderRadius: 12, border: '1px solid rgba(0,201,80,.4)', background: 'rgba(27,27,27,.95)', boxShadow: '0 12px 40px -12px rgba(0,0,0,.8)', overflow: 'hidden' }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 36px 12px 14px' }}><span style={{ color: C.gr400, marginTop: 1 }}><Ic n="ok2" s={18} /></span><span style={tx(13, 400, C.g100, { lineHeight: 1.375 })}>{p.msg}</span></div>
    <span style={{ position: 'absolute', top: 10, right: 10, color: C.g500 }}><Ic n="x" s={14} /></span>
    <div style={{ position: 'absolute', left: 0, bottom: 0, height: 3, width: '100%', background: 'rgba(255,255,255,.06)' }}><div style={{ height: '100%', background: C.gr500, opacity: .8, animation: 'ce-app-barra 4s linear both' }} /></div>
  </div> : null;
}

/* ═══════════ Embarcador · "Minhas Entregas" (aba Início do ClientMobile) ═══════════ */
var CHIPS = [['P', 'Novos', C.a700, C.a100, C.a200], ['A', 'Aceitos', C.b700, C.b100, C.b200], ['T', 'Em Rota', C.pu700, C.pu100, C.pu200], ['F', 'Avaliar', C.g700, C.g100, C.g200]];
var ST_CLI = { P: ['Aguardando', C.y50, C.y700, C.y200], A: ['Aceito', C.b50, C.b700, C.b200], T: ['Em Trânsito', C.pu50, C.pu700, C.pu200], C: ['Chegando', C.pu50, C.pu700, C.pu200], E: ['Entregue', C.gr50, C.gr700, C.gr200] };
var COLETA = 'Rua Goiás, 230, Centro, Itumbiara, GO', ENTREGA = 'Avenida Brasil, 1450, Setor Central, Itumbiara, GO';
function CardPedido(p) {
  var o = p.o, s = ST_CLI[o.st];
  return (
    <div className={p.novo ? 'ce-app-sobe' : ''} style={{ background: C.w, padding: 12, borderRadius: 12, border: '1px solid ' + C.g200, boxShadow: SH.sm, flex: 'none' }}>
      <div style={st(ROW, { justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 })}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}><b style={tx(16, 900, C.g800, { lineHeight: 1 })}>#{o.n}</b><span style={tx(10, 500, C.g500)}>{o.d}</span></div>
        <span style={tx(9, 700, s[2], st(UP, { padding: '2px 8px', borderRadius: 99, letterSpacing: '.05em', background: s[1], border: '1px solid ' + s[3], transition: 'all .3s' }))}>{s[0]}</span>
      </div>
      <div style={st(COL, { gap: 6, marginBottom: 10 })}>
        {[['C', C.p100, C.p600, o.c], ['E', C.r100, C.r600, o.e]].map(function (l) {
          return <div key={l[0]} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}><span style={st(CEN, tx(10, 700, l[2], { width: 20, height: 20, borderRadius: 99, background: l[1], flex: 'none', marginTop: 2 }))}>{l[0]}</span><span style={tx(11, 400, C.g600, { lineHeight: 1.25, paddingTop: 3 })}>{l[3]}</span></div>; })}
      </div>
      <div style={st(ROW, { justifyContent: 'space-between', paddingTop: 8, borderTop: '1px solid ' + C.g100 })}>
        <div style={st(ROW, { gap: 12 })}>
          <span style={st(ROW, { gap: 4, padding: '2px 6px', borderRadius: 4, background: C.g50, border: '1px solid ' + C.g100 })}><Veic k="moto_bag" s={10} /><span style={tx(9, 700, C.g500, UP)}>Moto Bag</span></span>
          {o.m ? <span style={st(ROW, { gap: 6 })}><span style={st(CEN, { width: 20, height: 20, borderRadius: 99, background: C.g200, color: C.g500 })}><Ic n="user" s={10} /></span><span style={tx(10, 700, C.g600)}>{o.m}</span></span>
            : <span style={tx(10, 400, C.g400, { fontStyle: 'italic' })}>Aguardando...</span>}
        </div>
        <span style={tx(18, 900, C.amb, { lineHeight: '28px' })}>R$ {o.val.toFixed(2)}</span>
      </div></div>
  );
}
function HomeEmbarcador(p) {
  var t = p.t, tc = p.tChips || {};
  return (
    <div style={FILL}>
      {p.mapa}<Hamb />
      <div style={st(COL, { position: 'absolute', left: 0, right: 0, bottom: 0, top: '55%', background: C.sheet, borderRadius: '24px 24px 0 0', boxShadow: SH.x2, zIndex: 5 })}>
        <Alca />
        <div style={{ padding: '8px 16px' }}>
          <div style={st(ROW, { gap: 12, padding: '4px 0' })}>
            <div style={{ flex: 1 }}><div style={tx(18, 900, C.g800, { letterSpacing: '-.025em', lineHeight: '28px' })}>Minhas Entregas</div><div style={tx(12, 500, C.g500, { lineHeight: '16px' })}>{p.andamento} em andamento</div></div>
            <div style={st(ROW, ap(t, p.tNovo), tx(14, 700, C.w, { gap: 6, background: C.amb, padding: '8px 12px', borderRadius: 12, boxShadow: '0 10px 15px -3px rgba(255,105,0,.2),0 4px 6px -4px rgba(255,105,0,.2)' }))}><Ic n="plus" s={16} w={3} />Novo{tq(t, p.tNovo)}</div>
          </div>
          <div style={st(ROW, { justifyContent: 'space-between', gap: 4, padding: '6px 0' })}>
            {CHIPS.map(function (c) {
              var on = p.filtro === c[0], n = p.cont[c[0]] || 0;
              return <div key={c[0]} style={st(ROW, ap(t, tc[c[0]]), { flex: 1, justifyContent: 'center', gap: 2, padding: '4px 2px', borderRadius: 8, fontWeight: 700, border: '1px solid ' + (on ? c[4] : C.g100), background: on ? c[3] : C.w, color: on ? c[2] : C.g400, boxShadow: on ? SH.sm : 'none', transition: 'background .25s, color .25s, border-color .25s, transform .15s' })}>
                <Ic n="clock" s={8} w={3} c={on ? c[2] : C.g300} /><span style={{ fontSize: 10.4 }}>{c[1]}</span>
                {n > 0 && <span style={st(CEN, { minWidth: 12, height: 12, padding: '0 2px', borderRadius: 4, fontSize: 7, fontWeight: 900, background: on ? 'rgba(230,231,233,.6)' : C.g100, color: on ? c[2] : C.g500 })}>{n}</span>}
                {tq(t, tc[c[0]])}
              </div>;
            })}
          </div></div>
        <div style={st(COL, { flex: 1, overflow: 'hidden', padding: '8px 16px 16px', gap: 12, opacity: p.oculta ? 0 : 1, transition: 'opacity .25s' })}>
          {p.lista.length ? p.lista : <div style={{ textAlign: 'center', padding: '40px 0', opacity: .5 }}><Ic n="pacote" s={48} c={C.g400} st={{ margin: '0 auto 8px' }} /><p style={tx(16, 400, C.g500, { margin: 0 })}>Nenhum pedido encontrado</p></div>}
        </div></div></div>
  );
}

/* ═══════════ 1 · Cliente (embarcador) — pede a entrega e acompanha ═══════════ */
var R_ENT = { S: prep([[150, 296], [150, 236], [84, 236], [84, 176]]), PD: prep([[84, 176], [206, 176], [206, 236], [330, 236]]) };
var R_FUNDO = prep([[84, 236], [206, 236], [206, 356], [84, 356], [84, 236]]); // volta fechada: o loop não dá salto
var MODAIS = [['bike', 'Bike'], ['moto_bag', 'Moto Bag'], ['moto_carretinha', 'Moto Carretinha'], ['car', 'Carro'], ['truck', 'Caminhão']];
var MODALIDADES = [['Sem modalidade', null, 12.9], ['Super Expressa', 'Entrega em até 40 min · raio 3 km', 18.9], ['Expressa', 'Entrega em até 1,5h · raio 6 km', 15.4], ['Econômica', 'Entrega em até 22h · raio 10 km', 9.9]];
function Bloco(p) { return <div style={st({ background: C.paper, borderRadius: 8, padding: '6px 10px', border: '1px solid ' + (p.foco ? C.sun4 : C.n200), boxShadow: p.foco ? '0 0 0 2px rgba(251,146,60,.2)' : 'none', transition: 'all .2s' }, p.st)}>{p.children}</div>; }
function Campo(p) { return <Bloco foco={p.foco}><div style={st(LBL, { marginBottom: 2 })}>{p.l}</div><div style={tx(13, p.v ? 500 : 400, p.v ? C.n900 : C.n300, st(ELL, { lineHeight: '19.5px' }))}>{p.v || p.ph}{p.foco && <i className="ce-app-cursor" style={{ color: C.sun5 }} />}</div></Bloco>; }
function NovoPedido(p) {
  var t = p.t, T = p.T;
  var sel = t >= T.sugTq, end = sel ? ENTREGA : dig('Av. Brasil 1450', t, T.end0, 55), foco = em(t, T.end0, T.sugTq);
  var veic = t >= T.motoTq + 120, modal = t >= T.superTq + 120;
  var valor = !sel || em(t, T.sugTq + 50, T.sugTq + 380) || em(t, T.superTq + 250, T.superTq + 520) ? null : modal ? 18.9 : 12.9;
  var calc = sel && valor == null;
  return (
    <div style={st(FILL, COL, { background: C.paper, zIndex: 20, transform: p.aberto ? 'none' : 'translateY(100%)', transition: 'transform .35s cubic-bezier(.2,.8,.2,1)' })}>
      <div style={st(ROW, { background: C.navy, padding: '10px 16px', paddingTop: 10 + SAT, justifyContent: 'space-between' })}>
        <div style={st(ROW, { gap: 8, fontFamily: FD, fontSize: 17, fontWeight: 700, color: C.w, textTransform: 'uppercase', letterSpacing: '.025em' })}><span style={st(CEN, { width: 24, height: 24, borderRadius: 8, background: C.sun4, color: C.navy })}><Ic n="plus" s={15} w={3} /></span>Novo Pedido</div>
        <span style={{ padding: 6, color: C.n300 }}><Ic n="x" s={18} w={2.5} /></span>
      </div>
      <div style={st(COL, { flex: 1, background: C.n100, padding: '10px 10px 0', gap: 10, overflow: 'hidden' })}>
        <div style={{ borderRadius: 12, boxShadow: SH.sm, border: '1px solid ' + C.n200, overflow: 'hidden', flex: 'none' }}>
          <div style={st(ROW, { padding: '10px 12px', background: C.paper, gap: 10, color: C.g800 })}>
            <span style={st(CEN, tx(10, 700, C.n500, { width: 20, height: 20, borderRadius: 99, background: C.n200, flex: 'none' }))}>1</span>
            <span style={st(ROW, { flex: 1, minWidth: 0, gap: 8, alignItems: 'baseline', fontFamily: FD, fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.025em', color: C.n700 })}><span>Coleta</span><span style={tx(10, 400, C.n400, st(ELL, { fontFamily: F, textTransform: 'none', letterSpacing: 0, minWidth: 0 }))}>{COLETA}</span></span>
            <Ic n="down" s={18} />
          </div></div>
        <div style={{ borderRadius: 12, boxShadow: SH.sm, border: '1px solid ' + C.n200, flex: 'none', background: C.n50 }}>
          <div style={st(ROW, { padding: '10px 12px', background: C.n900, gap: 10, color: C.g800, borderRadius: '11px 11px 0 0' })}>
            <span style={st(CEN, tx(10, 700, C.navy, { width: 20, height: 20, borderRadius: 99, background: C.sun4, flex: 'none' }))}>2</span>
            <span style={st(ROW, { flex: 1, minWidth: 0, gap: 8, alignItems: 'baseline', fontFamily: FD, fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.025em', color: C.w })}><span>Entrega</span>{sel && <span style={tx(10, 400, C.n400, st(ELL, { fontFamily: F, textTransform: 'none', letterSpacing: 0, minWidth: 0 }))}>{ENTREGA}</span>}</span>
            <Ic n="down" s={18} st={{ transform: 'rotate(180deg)' }} />
          </div>
          <div style={st(COL, { padding: 10, gap: 8 })}>
            <Bloco foco={foco} st={{ position: 'relative', zIndex: 3 }}>
              <div style={st(ROW, { justifyContent: 'space-between', marginBottom: 2 })}><span style={LBL}>Endereço de Entrega</span><span style={tx(9, 700, C.n400, { padding: '2px 6px' })}>USAR MEU ENDEREÇO</span></div>
              <div style={{ position: 'relative' }}>
                <span style={{ position: 'absolute', left: 12, top: '50%', marginTop: -6, width: 12, height: 12, borderRadius: 99, background: C.r500 }} />
                <div style={tx(14, 400, end ? C.g800 : C.g400, st(ELL, { background: C.w, border: '1px solid ' + C.g200, borderRadius: 12, padding: '12px 32px 12px 36px', boxShadow: SH.sm, lineHeight: '20px' }))}>{end || 'Rua, número, bairro...'}{foco && <i className="ce-app-cursor" style={{ color: C.amb }} />}</div>
                {end && <span style={{ position: 'absolute', right: 12, top: '50%', marginTop: -8, color: C.g400 }}><Ic n="x" s={16} /></span>}
                {em(t, T.sug, T.sugTq + 200) && <div className="ce-app-entra" style={{ position: 'absolute', left: 0, right: 0, top: '100%', marginTop: 4, background: C.w, borderRadius: 12, boxShadow: SH.x2, border: '1px solid ' + C.g100, overflow: 'hidden', zIndex: 5 }}>
                  {['Avenida Brasil, 1450 - Setor Central, Itumbiara - GO, Brasil', 'Avenida Brasil, 1450 - Vila Vitória, Itumbiara - GO, Brasil'].map(function (s, i) {
                    return <div key={i} style={st(ap(t, i ? null : T.sugTq), { display: 'flex', gap: 12, padding: 14, borderBottom: '1px solid ' + C.g50, background: i === 0 && t >= T.sugTq ? C.a100 : 'transparent' })}><Ic n="pin" s={16} c={C.b500} st={{ marginTop: 2 }} /><span><span style={tx(14, 500, C.g700, { display: 'block', lineHeight: 1.35 })}>{s}</span><span style={tx(10, 400, C.g400)}>Via Google Maps</span></span>{i ? null : tq(t, T.sugTq)}</div>; })}
                </div>}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 6, paddingTop: 6, borderTop: '1px solid ' + C.n100 }}>
                {[['CEP', '00000-000'], ['Complemento', 'Apto, Bloco...']].map(function (c) { return <div key={c[0]}><div style={st(LBL, { fontSize: 8 })}>{c[0]}</div><div style={tx(12, 400, C.n300)}>{c[1]}</div></div>; })}
              </div>
            </Bloco>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <Campo l="Destinatário" ph="Nome" v={dig('Ana Souza', t, T.nome0, 45)} foco={em(t, T.nome0, T.nome0 + 450)} />
              <Campo l="Telefone" ph="(00) 00000-0000" v={dig('(64) 99812-4410', t, T.nome0 + 450, 28)} foco={em(t, T.nome0 + 450, T.nome0 + 900)} />
            </div>
            <Campo l="Observações" ph="Ex: Tocar campainha 2" />
          </div></div>
        <div style={st(COL, { background: C.paper, borderRadius: 12, boxShadow: SH.sm, border: '1px solid ' + C.n200, padding: 10, gap: 8, flex: 'none' })}>
          <div style={st(ROW, { justifyContent: 'space-between', borderRadius: 8, border: '1px solid ' + C.n200, padding: '8px 10px' })}><span style={tx(13, 600, C.n500)}>Adicionar retorno</span><Ic n="plus" s={14} c={C.n400} /></div>
          <Bloco>
            <div style={st(LBL, { marginBottom: 2 })}>Selecionar Transporte</div>
            <div style={st(ROW, ap(t, T.transp), { justifyContent: 'space-between' })}>
              <span style={st(ROW, { gap: 8 })}>{veic ? <Veic k="moto_bag" s={18} /> : <Ic n="truck" s={18} c={C.sun5} />}<span style={tx(13, 500, C.n900)}>{veic ? 'Moto Bag' : 'Selecione...'}</span></span>
              <Ic n="down" s={16} c={C.n400} />{tq(t, T.transp)}
            </div>
            {veic && <div className="ce-app-entra" style={st(ROW, { marginTop: 6, justifyContent: 'space-between', borderRadius: 8, border: '1px ' + (modal ? 'solid ' + C.sun3 : 'dashed ' + C.n300), background: modal ? C.sun50 : C.paper, padding: '6px 8px' })}>
              <span style={st(ROW, { gap: 6 })}><Ic n="clock" s={12} c={modal ? C.rust6 : C.n400} /><span><span style={tx(12, 700, modal ? C.rust7 : C.n500, { display: 'block', lineHeight: 1.3 })}>{modal ? 'Super Expressa' : 'Escolher modalidade'}</span>{modal && <span style={tx(9, 400, C.n500, { display: 'block' })}>até 40 min</span>}</span></span>
              <Ic n="down" s={14} c={C.n400} />
            </div>}
          </Bloco>
        </div></div>
      <div style={{ background: 'rgba(255,255,255,.9)', padding: 12, paddingBottom: 12 + SAB, borderTop: '1px solid ' + C.n200, display: 'flex', gap: 10 }}>
        <div style={st(COL, { flex: 1, minWidth: 0, background: C.navy, borderRadius: 12, padding: '8px 12px', justifyContent: 'center' })}>
          <span style={tx(8, 700, C.sun4, st(UP, { letterSpacing: '.08em' }))}>Valor do Pedido</span>
          {calc ? <span style={st(ROW, tx(11, 600, C.n300, { gap: 4 }))}><Ic n="atualiza" s={10} st={{ animation: 'ce-app-gira 1s linear infinite' }} />Calculando...</span>
            : valor != null ? <span key={valor} className="ce-app-entra" style={{ fontFamily: FD, fontSize: 22, fontWeight: 700, color: C.w, lineHeight: 1 }}>{brl(valor)}</span>
              : <span style={tx(11, 600, C.n400)}>Insira os endereços</span>}
        </div>
        <div style={st(COL, CEN, ap(t, T.solic), { width: '46%', flex: 'none', gap: 2, background: sel ? C.rust : C.n300, color: C.w, borderRadius: 12, padding: '10px 8px', fontFamily: FD, fontWeight: 700, fontSize: 13, textTransform: 'uppercase', letterSpacing: '.025em', lineHeight: 1.25, boxShadow: sel ? '0 10px 15px -3px rgba(194,65,12,.25)' : 'none' })}><Ic n="pacote" s={16} />Solicitar Entrega{tq(t, T.solic)}</div>
      </div>
      <Folha aberto={em(t, T.transp + 150, T.motoTq + 280)} titulo="Modal de transporte" sub="O veículo vale para a rota inteira.">
        {MODAIS.map(function (m) { return <Opcao key={m[0]} t={t} t0={m[0] === 'moto_bag' ? T.motoTq : null} on={m[0] === 'moto_bag' && t >= T.motoTq + 60}><span style={{ color: C.sun5 }}><Veic k={m[0]} s={22} /></span><span style={tx(13, 700, C.n900, { flex: 1 })}>{m[1]}</span></Opcao>; })}
      </Folha>
      <Folha aberto={em(t, T.motoTq + 300, T.superTq + 260)} titulo="Modalidade da entrega" sub={<span>Opções para <b>Moto Bag</b> — prazo e valor mudam por modalidade.</span>} rodape="Só aparecem as modalidades que a sua tabela de preço tem cadastradas para este veículo.">
        {MODALIDADES.map(function (m, i) {
          var on = i === 1 ? t >= T.superTq + 60 : i === 0 && t < T.superTq + 60;
          return <Opcao key={m[0]} t={t} t0={i === 1 ? T.superTq : null} on={on}>
            <span style={{ flex: 1, minWidth: 0 }}><span style={tx(13, 700, C.n900, { display: 'block' })}>{m[0]}</span>
              <span style={st(ROW, tx(11, 400, C.n500, { gap: 4 }))}>{m[1] ? [<Ic key="i" n="clock" s={11} />, <span key="s">{m[1]}</span>] : 'Prazo padrão do seu cadastro'}</span></span>
            <span style={st(tx(14, 900, C.n900), { fontVariantNumeric: 'tabular-nums' })}>{brl(m[2])}</span>
          </Opcao>;
        })}
      </Folha>
    </div>
  );
}
function Confirmar(p) { // renderConfirmation()
  var t = p.t, T = p.T, env = t >= T.chamar + 120;
  var card = { background: C.d2, borderRadius: 12, padding: 16 };
  return (
    <div style={st(FILL, COL, { background: 'rgba(0,0,0,.95)', zIndex: 35, opacity: p.aberto ? 1 : 0, transition: 'opacity .25s' })}>
      <div style={st(ROW, { background: C.d1, padding: 16, paddingTop: 16 + SAT, justifyContent: 'space-between', color: C.w })}><Ic n="x" s={24} /><span style={tx(16, 700, C.w)}>Confirmar Pedido</span><span style={{ width: 24 }} /></div>
      <div style={st(COL, { padding: 16, gap: 16 })}>
        <div style={st(COL, CEN, { background: C.d2, borderRadius: 12, height: 144, border: '1px solid ' + C.g800, boxShadow: 'inset 0 2px 4px 0 rgba(0,0,0,.05)' })}>
          <Ic n="pin" s={32} c={C.p500} st={{ marginBottom: 8 }} /><span style={tx(24, 900, C.w, { lineHeight: 1.2 })}>4.2 km</span>
          <span style={tx(12, 700, C.g400, st(UP, { letterSpacing: '.1em', marginTop: 4 }))}>Distância Total Percorrida</span>
        </div>
        <div style={card}>
          {[['Coleta', C.b500, COLETA], ['Entrega', C.r500, ENTREGA]].map(function (l, i) {
            return <div key={l[0]}>{i > 0 && <div style={{ borderLeft: '2px dashed ' + C.g700, marginLeft: 6, height: 24, margin: '8px 0 8px 6px' }} />}
              <div style={st(ROW, { gap: 8, marginBottom: 4 })}><i style={{ width: 12, height: 12, borderRadius: 99, background: l[1] }} /><span style={tx(12, 400, C.g400)}>{l[0].toUpperCase()}</span></div>
              <div style={tx(14, 400, C.w)}>{l[2]}</div></div>; })}
        </div>
        <div style={card}><div style={tx(12, 400, C.g400, { marginBottom: 8 })}>DESTINATÁRIO</div><div style={tx(16, 400, C.w)}>Ana Souza</div><div style={tx(14, 400, C.g400)}>(64) 99812-4410</div></div>
        <div style={st(ROW, { gap: 8 })}>
          <div style={st(ROW, CEN, tx(16, 700, C.w, { flex: 1, gap: 4, padding: '16px 8px', background: C.p600, borderRadius: 12, boxShadow: SH.sm }))}><Ic n="clock" s={16} />Agendar</div>
          <div style={st(ROW, CEN, ap(t, T.chamar), tx(16, 700, C.w, { flex: 2, gap: 8, padding: '16px 0', background: C.rust, borderRadius: 12, opacity: env ? .5 : 1 }))}>
            {env ? <Ic n="atualiza" s={20} st={{ animation: 'ce-app-gira 1s linear infinite' }} /> : [<Ic key="i" n="ok" s={20} />, 'Chamar Agora']}{tq(t, T.chamar)}</div>
        </div></div></div>
  );
}
var ST_RAST = [['Aguardando Entregador', 0, '0%', 0], ['Motorista a caminho da coleta', 1, '33.333%', 2], ['Motorista no local de coleta', 1, '33.333%', 1],
  ['Em rota de entrega', 2, '66.667%', 4], ['Motorista chegou ao destino', 2, '66.667%', 0], ['Pedido Entregue ✓', 3, '100%', null]];
function Rastreio(p) { // PublicTracking.tsx (layout do celular)
  var s = ST_RAST[p.i], fim = p.i === 5, box = { margin: '0 16px 8px', background: C.g50, border: '1px solid ' + C.g100, borderRadius: 12, padding: '8px 12px', flex: 'none' };
  return (
    <div style={st(FILL, COL, { background: C.g100, overflow: 'hidden' })}>
      <div style={{ height: '42%', position: 'relative', flex: 'none' }}>{p.mapa}</div>
      <div style={st(COL, { flex: 1, background: C.w, borderRadius: '16px 16px 0 0', boxShadow: '0 -4px 16px rgba(0,0,0,.10)', marginTop: -8, overflow: 'hidden', position: 'relative' })}>
        <div style={st(CEN, { paddingTop: 8 })}><div style={{ width: 32, height: 4, borderRadius: 99, background: C.g200 }} /></div>
        <div style={st(ROW, { justifyContent: 'space-between', padding: '8px 16px 4px' })}>
          <div><div style={tx(9, 700, C.g400, st(UP, { letterSpacing: '.1em', lineHeight: 1 }))}>Rastreamento</div><div style={tx(18, 900, C.g900, { lineHeight: 1.25 })}>Pedido #482</div></div>
          <span style={st(ROW, tx(11, 700, C.r500, { gap: 4, background: C.r50, border: '1px solid ' + C.r200, borderRadius: 99, padding: '4px 10px' }))}>Ajuda <Ic n="ajuda" s={12} /></span>
        </div>
        <div style={box}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}><b key={p.i} className="ce-app-entra" style={tx(12, 700, C.g800)}>{s[0]}</b>{s[3] != null && <span style={tx(9, 400, C.g400)}>⏳ {s[3]} min</span>}</div>
          <div style={st(ROW, { position: 'relative', justifyContent: 'space-between' })}>
            <div style={{ position: 'absolute', left: 0, right: 0, top: 5, height: 3, background: C.g200, borderRadius: 99 }} />
            <div style={{ position: 'absolute', left: 0, top: 5, height: 3, borderRadius: 99, width: s[2], background: fim ? C.gr500 : C.p500, transition: 'all .7s' }} />
            {[0, 1, 2, 3].map(function (k) { return <div key={k} style={{ position: 'relative', width: 12, height: 12, borderRadius: 99, border: '2px solid ' + C.w, boxShadow: SH.sm, background: k <= s[1] ? (k === 3 ? C.gr500 : C.p500) : C.g300, transition: 'background .5s' }} />; })}
          </div>
          <div style={st(ROW, { justifyContent: 'space-between', marginTop: 4 })}>{['Criado', 'Motorista', 'Em Rota', 'Entregue'].map(function (l) { return <span key={l} style={tx(8, 600, C.g400)}>{l}</span>; })}</div>
        </div>
        <div style={st(ROW, box, { gap: 10, minHeight: 54 })}>
          {p.i > 0 ? [
            <div key="a" className="ce-app-zoom" style={{ position: 'relative', flex: 'none' }}><span style={st(CEN, tx(12, 700, C.p600, { width: 36, height: 36, borderRadius: 99, background: C.p100, border: '2px solid ' + C.w, boxShadow: SH.md }))}>C</span>
              <span style={{ position: 'absolute', right: -2, bottom: -2, background: C.w, borderRadius: 99, padding: 2 }}><i style={{ display: 'block', width: 8, height: 8, borderRadius: 99, background: C.gr500 }} /></span></div>,
            <div key="b" style={{ minWidth: 0, flex: 1 }}><div style={tx(14, 700, C.g900, { lineHeight: 1.25 })}>Carlos Mendes</div><div style={tx(11, 400, C.g500)}>Moto Bag</div></div>,
            <Veic key="c" k="moto_bag" s={30} />
          ] : <span style={st(ROW, tx(12, 500, C.g400, { gap: 8 }))}><i style={{ width: 32, height: 32, borderRadius: 99, background: C.g200 }} />Aguardando motorista...</span>}
        </div>
        <div style={{ margin: '0 16px 8px', position: 'relative', paddingLeft: 20, flex: 'none' }}>
          <div style={{ position: 'absolute', left: 7, top: 4, bottom: 4, width: 1, background: C.g200 }} />
          {[['Origem', C.p100, C.g700, C.p500, C.p600, COLETA], ['Destino', C.r100, C.r400, C.r500, C.r600, ENTREGA]].map(function (l, i) {
            return <div key={l[0]} style={{ position: 'relative', marginBottom: i ? 0 : 8 }}>
              <span style={st(CEN, { position: 'absolute', left: -20, top: 2, width: 14, height: 14, borderRadius: 99, background: l[1], border: '1px solid ' + l[2] })}><i style={{ width: 4, height: 4, borderRadius: 9, background: l[3] }} /></span>
              <div style={tx(9, 900, l[4], st(UP, { letterSpacing: '.05em', lineHeight: 1 }))}>{l[0]}</div><div style={tx(12, 500, C.g700, { lineHeight: 1.375 })}>{l[5]}</div></div>; })}
        </div>
        <div style={st(COL, { flex: 1, margin: '0 16px 12px', minHeight: 0, background: 'linear-gradient(135deg,' + C.p50 + ',' + C.i100 + ')', border: '1px solid ' + C.p100, borderRadius: 12, padding: 12, justifyContent: 'space-between' })}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <span style={{ padding: 6, background: C.w, borderRadius: 8, boxShadow: SH.sm, color: C.p600 }}><Ic n="pacote" s={20} /></span>
            <div><div style={tx(14, 700, C.g900, { lineHeight: 1.25 })}>Tudo em um só app!</div><div style={tx(11, 400, C.g600, { lineHeight: 1.375, marginTop: 2 })}>Acompanhe suas entregas, peça envios ou cadastre-se para entregar com a gente.</div></div>
          </div>
          <div style={st(ROW, CEN, tx(14, 700, C.w, { gap: 8, marginTop: 12, background: C.p600, padding: '10px 0', borderRadius: 12, boxShadow: SH.md }))}><Ic n="userplus" s={16} />Faça seu Cadastro</div>
        </div></div></div>
  );
}
function DemoClienteEntrega() {
  var T = { novo: 800, form: 1000, end0: 1400, sug: 2250, sugTq: 2650, nome0: 2800, transp: 3750, motoTq: 4350, superTq: 5250, solic: 6100, conf: 6300, chamar: 7100,
    home: 7550, rast: 8900, aceito: 10000, coleta: 11800, rota: 12500, destino: 15300, entregue: 15900, sai: 16900, fim: 17600 };
  var d = useDemo(T.fim, 13900, true), t = d.t, home2 = em(t, T.home, T.sai); // no fim o rastreio sai e a Home volta ao começo
  useBarra(em(t, T.form, T.home));
  var iR = t < T.aceito ? 0 : t < T.coleta ? 1 : t < T.rota ? 2 : t < T.destino ? 3 : t < T.entregue ? 4 : 5;
  var ped = [{ n: '0481', d: '13/10/2026, 09:12', st: 'P', c: COLETA, e: 'Rua 15 de Novembro, 88, Centro, Itumbiara, GO', val: 12.9 }];
  if (home2) ped.unshift({ n: '0482', d: '13/10/2026, 09:41', st: 'P', c: COLETA, e: ENTREGA, val: 18.9 });
  return (
    <Raiz d={d} fundo={MAPA.claro.fundo} rotulo="App Cerrado Express: o cliente pede uma entrega de moto e acompanha no mapa até ser entregue">
      <HomeEmbarcador t={t} tNovo={T.novo} filtro="P" cont={{ P: ped.length, T: 1 }} andamento={ped.length + 1}
        lista={ped.map(function (o, i) { return <CardPedido key={o.n} o={o} novo={home2 && i === 0} />; })}
        mapa={<Mapa><Veiculo d={d} trechos={[{ r: R_FUNDO, de: 0, ate: T.fim, lin: true }]} /></Mapa>} />
      <NovoPedido t={t} T={T} aberto={em(t, T.form, T.home)} />
      <Confirmar t={t} T={T} aberto={em(t, T.conf, T.home)} />
      <Aviso on={em(t, T.home + 80, T.rast + 900)} msg="Pedido criado com sucesso!" />
      <div style={st(FILL, { zIndex: 30, transform: em(t, T.rast, T.sai) ? 'none' : 'translateX(100%)', transition: 'transform .45s cubic-bezier(.2,.8,.2,1)' })}>
        <Rastreio i={iR} mapa={<Mapa vb="0 0 375 326">
          <Linha r={R_ENT.PD} mostra={iR > 0} />
          {iR === 0 && <Radar x={84} y={176} />}
          <Pino x={84} y={176} cor="#3B82F6" s={1.2} /><Pino x={330} y={236} cor="#EF4444" s={1.2} />
          <Veiculo d={d} mostra={iR > 0} trechos={[{ r: R_ENT.S, de: T.aceito, ate: T.coleta - 100 }, { r: R_ENT.PD, de: T.rota, ate: T.destino - 100 }]} />
        </Mapa>} />
      </div>
    </Raiz>
  );
}

/* ═══════════ 2 · Cliente — corrida (aba Mobilidade do ClientMobile) ═══════════ */
var R_COR = { C0: prep([[268, 356], [206, 356], [206, 236], [84, 236], [84, 176]]), AB: prep([[84, 176], [206, 176], [206, 296], [330, 296]]) };
var ORIGEM = 'Rua Goiás, 230, Centro, Itumbiara - GO', DESTINO = 'Avenida Goiás, 980 - Setor Oeste, Itumbiara - GO';
var CATEGORIAS = [['Cerrado Econômico', 'car', 14.9, 4, 'Viagem rápida e acessível', '3 min • 2 disponíveis'], ['Cerrado Conforto', 'car', 22.5, 4, 'Carros novos e mais espaço', '3 min • 2 disponíveis'],
  ['Cerrado Black', null, 38, 4, 'Motoristas premium, alta avaliação', '3 min • 2 disponíveis'], ['Cerrado Moto', 'moto_bag', 9.9, 1, 'O jeito mais rápido de chegar', '2 min • 3 disponíveis']];
var CARD = { background: C.w, borderRadius: 16, border: '1px solid ' + C.g100 };
var BTN_AMB = { background: C.amb, color: C.w, fontWeight: 900, padding: '12px 0', borderRadius: 12, gap: 8 };
function Trajeto(p) {
  return <div style={st(COL, { gap: 8 })}>
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}><i style={{ width: 10, height: 10, borderRadius: 99, background: C.gr500, marginTop: 4, flex: 'none' }} /><span style={tx(12, 400, C.g700, st(ELL, { lineHeight: 1.25 }))}>{ORIGEM}</span></div>
    <div style={{ marginLeft: 4, borderLeft: '2px dashed ' + C.g300, height: 12 }} />
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}><i style={{ width: 10, height: 10, borderRadius: 2, background: C.g800, marginTop: 4, flex: 'none' }} /><span style={tx(12, 700, C.g800, { lineHeight: 1.25 })}>{DESTINO}</span></div>
    {p.children}
  </div>;
}
function DemoClienteCorrida() {
  var T = { dig0: 500, sug: 1450, sugTq: 2000, conf: 2250, confTq: 3550, opc: 3750, rola: 4500, viagem: 5650, busca: 5900, aceito: 7500, drag: 8000, solta: 8450,
    chegando: 10500, viajando: 11400, fim: 14600, sobe: 15100, concluir: 15950, volta: 16150, total: 16900 };
  var d = useDemo(T.total, 12800, true), t = d.t, caixa = React.useRef(null), _r = React.useState(214), fimRola = _r[0], setFimRola = _r[1];
  useBarra(false);
  // no fim o passageiro sobe a folha e toca em Concluir: volta ao destino vazio, igual ao começo do loop
  var passo = t < T.conf ? 'dest' : t < T.opc ? 'conf' : t < T.busca ? 'opc' : t < T.aceito ? 'busca' : t < T.volta ? 'ok' : 'dest';
  var pct = passo === 'conf' ? 45 : passo === 'ok' && em(t, T.drag, T.sobe) ? 55 : 15;
  var corrida = t < T.chegando ? 0 : t < T.viajando ? 1 : t < T.fim ? 2 : 3;
  var head = { dest: ['Para onde vamos?', 'Chame um carro em segundos'], conf: ['Confirme o trajeto', 'Revise a origem e o destino'], opc: ['Escolha sua viagem', 'Selecione a categoria e o pagamento'] }[passo];
  var dist = Math.max(0.1, 1.4 * (1 - pr(t, T.drag, T.chegando)));
  var corpo;
  if (passo === 'dest') {
    var sel = em(t, T.sugTq, T.volta), q = t < T.volta ? dig('Av Goiás 980', t, T.dig0, 70) : '', foco = !sel;
    corpo = [
      <div key="b" style={st(COL, CARD, { boxShadow: SH.md, padding: 12, gap: 8 })}>
        <div style={{ borderRadius: 12, padding: 12, background: C.g50 }}>
          <div style={st(ROW, { gap: 12, marginBottom: 4 })}><i style={{ width: 10, height: 10, borderRadius: 99, background: C.gr500 }} /><span style={st(LBL, { color: C.g500, letterSpacing: '.1em', flex: 1 })}>Origem</span>
            <span style={st(ROW, tx(10, 700, C.amb, { gap: 4, background: C.w, border: '1px solid rgba(217,119,6,.3)', padding: '4px 8px', borderRadius: 8 }))}><Ic n="mira" s={11} />Usar localização</span></div>
          <div style={tx(14, 700, C.g800, ELL)}>{ORIGEM}</div>
        </div>
        <div style={st(CEN, { margin: '-4px 0' })}><span style={{ background: C.w, border: '1px solid ' + C.g200, padding: 6, borderRadius: 99, boxShadow: SH.sm, color: C.g500 }}><Ic n="troca" s={12} /></span></div>
        <div style={st(ROW, CEN, tx(12, 700, C.amb, { gap: 6, background: C.w, border: '1px dashed rgba(217,119,6,.4)', padding: '8px 10px', borderRadius: 12 }))}><Ic n="plus" s={13} />Adicionar parada</div>
        <div style={{ borderRadius: 12, padding: 12, background: 'rgba(255,251,235,.6)', boxShadow: '0 0 0 2px ' + C.amb, position: 'relative', zIndex: 2 }}>
          <div style={st(ROW, { gap: 12, marginBottom: 4 })}><i style={{ width: 10, height: 10, borderRadius: 2, background: C.g800 }} /><span style={st(LBL, { color: C.g500, letterSpacing: '.1em' })}>Destino</span></div>
          <div style={{ position: 'relative' }}>
            <span style={{ position: 'absolute', left: 12, top: '50%', marginTop: -6, width: 12, height: 12, borderRadius: 99, background: C.r500 }} />
            <div style={tx(14, 400, q ? C.g800 : C.g400, st(ELL, { background: C.w, border: '1px solid ' + (foco ? C.a500 : C.g200), borderRadius: 12, padding: '12px 32px 12px 36px', boxShadow: SH.sm, lineHeight: '20px' }))}>{sel ? DESTINO : q || 'Para onde em Itumbiara?'}{foco && <i className="ce-app-cursor" style={{ color: C.amb }} />}</div>
            {em(t, T.sug, T.sugTq + 220) && <div className="ce-app-entra" style={{ position: 'absolute', left: 0, right: 0, top: '100%', marginTop: 4, background: C.w, borderRadius: 12, boxShadow: SH.x2, border: '1px solid ' + C.g100, zIndex: 5, overflow: 'hidden' }}>
              {['Avenida Goiás, 980 - Setor Oeste, Itumbiara - GO, Brasil', 'Avenida Goiás - Centro, Itumbiara - GO, Brasil'].map(function (s, i) {
                return <div key={i} style={st(ap(t, i ? null : T.sugTq), { display: 'flex', gap: 12, padding: 14, borderBottom: '1px solid ' + C.g50, background: i === 0 && t >= T.sugTq ? C.a100 : 'transparent' })}><Ic n="pin" s={16} c={C.b500} st={{ marginTop: 2 }} /><span><span style={tx(14, 500, C.g700, { display: 'block', lineHeight: 1.35 })}>{s}</span><span style={tx(10, 400, C.g400)}>Via Google Maps</span></span>{i ? null : tq(t, T.sugTq)}</div>; })}
            </div>}
          </div>
          <div style={st(ROW, { gap: 8, marginTop: 8 })}>
            <span style={st(ROW, CEN, tx(12, 700, C.amb, { flex: 1, gap: 6, background: C.w, border: '1px solid rgba(217,119,6,.3)', padding: '8px 10px', borderRadius: 8 }))}><Ic n="pin" s={13} />Selecionar no mapa</span>
            <span style={st(ROW, CEN, tx(12, 700, C.g600, { flex: 1, gap: 6, background: C.w, border: '1px solid ' + C.g200, padding: '8px 10px', borderRadius: 8 }))}><Ic n="search" s={13} />Outra cidade</span>
          </div></div>
      </div>,
      <div key="l" style={st(CARD, { boxShadow: SH.sm })}>
        <div style={tx(10, 900, C.g400, st(UP, { letterSpacing: '.1em', padding: '12px 16px 8px' }))}>Locais Salvos</div>
        {[['casa', 'Casa', ORIGEM, 'lapis'], ['maleta', 'Trabalho', null, 'plus']].map(function (l, i) {
          return <div key={l[1]} style={st(ROW, { gap: 12, padding: '12px 16px', borderTop: i ? '1px solid ' + C.g100 : 'none' })}>
            <span style={st(CEN, { width: 40, height: 40, borderRadius: 99, background: C.g100, color: C.g600, flex: 'none' })}><Ic n={l[0]} s={18} /></span>
            <span style={{ flex: 1, minWidth: 0 }}><span style={tx(14, 700, C.g800, { display: 'block' })}>{l[1]}</span><span style={tx(12, l[2] ? 400 : 700, l[2] ? C.g500 : C.amb, st(ELL, { display: 'block' }))}>{l[2] || 'Definir endereço do trabalho'}</span></span>
            <span style={{ padding: 8, color: C.g400 }}><Ic n={l[3]} s={l[2] ? 15 : 17} /></span></div>; })}
      </div>];
  } else if (passo === 'conf') {
    corpo = [
      <div key="i" style={{ background: C.b50, border: '1px solid ' + C.b200, borderRadius: 16, padding: 16, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <span style={st(CEN, { width: 28, height: 28, borderRadius: 99, background: C.b500, color: C.w, flex: 'none', marginTop: 2 })}><Ic n="pin" s={14} /></span>
        <div><div style={tx(14, 900, C.b900, { lineHeight: 1.25 })}>Ajuste os pontos no mapa</div><div style={tx(12, 400, C.b700, { lineHeight: 1.375, marginTop: 4 })}>Toque e arraste os pinos <b>A</b> (origem) e <b>B</b> (destino) para corrigir o local exato antes de chamar o carro.</div></div>
      </div>,
      <div key="p" style={st(COL, CARD, { boxShadow: SH.sm, padding: 12, gap: 8 })}>
        {[['A', C.gr500, 99, ORIGEM], ['B', C.g800, 2, DESTINO]].map(function (l) { return <div key={l[0]} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}><span style={st(CEN, tx(10, 900, C.w, { width: 24, height: 24, borderRadius: l[2], background: l[1], flex: 'none' }))}>{l[0]}</span><span style={tx(12, 400, C.g700, { lineHeight: 1.25, paddingTop: 4 })}>{l[3]}</span></div>; })}
      </div>,
      <div key="b" style={st(ROW, { gap: 8 })}><span style={st(ROW, CEN, tx(16, 700, C.g700, { flex: 1, background: C.g100, padding: '12px 0', borderRadius: 12 }))}>Voltar</span>
        <span style={st(ROW, CEN, ap(t, T.confTq), BTN_AMB, { flex: 2, fontSize: 16 })}>Confirmar pontos<Ic n="arrow" s={16} />{tq(t, T.confTq)}</span></div>];
  } else if (passo === 'opc') {
    var env = t >= T.viagem + 100;
    corpo = [
      <div key="v" style={st(CARD, { boxShadow: SH.md, padding: 16 })}>
        <div style={st(ROW, { justifyContent: 'space-between', marginBottom: 12 })}><span style={tx(10, 900, C.g400, st(UP, { letterSpacing: '.1em' }))}>Sua Viagem</span><span style={st(ROW, tx(12, 700, C.amb, { gap: 4 }))}>Alterar <Ic n="right" s={12} /></span></div>
        <Trajeto />
      </div>,
      <div key="c"><div style={tx(10, 900, C.g400, st(UP, { letterSpacing: '.1em', padding: '0 4px', marginBottom: 8 }))}>Escolha a categoria</div>
        <div style={st(COL, { gap: 8 })}>{CATEGORIAS.map(function (c, i) {
          var on = i === 0;
          return <div key={c[0]} style={st(ROW, { gap: 12, padding: 12, borderRadius: 16, border: '2px solid ' + (on ? C.amb : C.g100), background: on ? 'rgba(255,251,235,.3)' : C.w, boxShadow: on ? SH.md : SH.sm })}>
            <span style={st(CEN, { width: 56, height: 56, borderRadius: 12, flex: 'none', background: on ? C.amb : C.g100, color: on ? C.w : C.g600, overflow: 'hidden' })}>{c[1] ? <Veic k={c[1]} s={c[1] === 'car' ? 28 : 30} /> : <Ic n="coroa" s={28} />}</span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={st(ROW, { gap: 8 })}><span style={tx(14, 900, C.g800, { lineHeight: 1.25 })}>{c[0]}</span><span style={st(ROW, tx(10, 400, C.g500, { gap: 2, flex: 'none' }))}><Ic n="user" s={10} />{c[3]}</span></span>
              <span style={tx(10, 400, C.g500, { display: 'block', lineHeight: 1.25 })}>{c[4]}</span>
              <span style={st(ROW, tx(10, 700, C.gr600, { gap: 4, marginTop: 2 }))}><Ic n="clock" s={10} />Chegada em {c[5]}</span>
            </span>
            <span style={{ textAlign: 'right', flex: 'none' }}><span style={tx(16, 900, C.g800, { display: 'block' })}>{brl(c[2])}</span>{on && <span style={tx(9, 700, C.w, st(UP, { background: C.amb, padding: '2px 6px', borderRadius: 4, display: 'inline-block', marginTop: 2 }))}>Selecionado</span>}</span>
          </div>; })}</div></div>,
      <div key="p" style={st(CARD, { boxShadow: SH.sm })}>
        <div style={tx(10, 900, C.g400, st(UP, { letterSpacing: '.1em', padding: '12px 16px 8px' }))}>Forma de Pagamento</div>
        <div style={{ padding: '0 16px 12px' }}><div style={st(ROW, { gap: 12, padding: 12, borderRadius: 12, border: '1px solid ' + C.g200, background: C.w })}>
          <span style={st(CEN, { width: 36, height: 36, borderRadius: 99, background: C.amb, color: C.w, flex: 'none' })}><Ic n="cartao" s={16} /></span>
          <span style={{ flex: 1 }}><span style={tx(14, 900, C.g800, { display: 'block' })}>Cartão de Crédito</span><span style={tx(10, 400, C.g500)}>Final 1234</span></span><Ic n="down" s={18} c={C.g400} /></div></div>
      </div>,
      <div key="ok" style={st(ROW, CEN, ap(t, T.viagem), tx(16, 900, C.w, { gap: 8, background: C.g900, padding: '16px 0', borderRadius: 16, boxShadow: SH.lg, opacity: env ? .5 : 1 }))}>
        {env ? <Ic n="atualiza" s={20} st={{ animation: 'ce-app-gira 1s linear infinite' }} /> : ['Confirmar Viagem', <Ic key="a" n="arrow" s={18} />]}{tq(t, T.viagem)}</div>];
  } else if (passo === 'busca') {
    corpo = <div key="s" style={st(CARD, { boxShadow: SH.md, padding: 32, textAlign: 'center' })}>
      <div style={{ position: 'relative', width: 96, height: 96, margin: '0 auto 16px' }}>
        <div className="ce-app-ping" style={st(FILL, { borderRadius: 99, background: 'rgba(217,119,6,.2)' })} />
        <div className="ce-app-ping" style={{ position: 'absolute', top: 8, left: 8, right: 8, bottom: 8, borderRadius: 99, background: 'rgba(217,119,6,.3)', animationDelay: '.3s' }} />
        <div style={st(FILL, CEN, { borderRadius: 99, background: C.amb, boxShadow: SH.lg, color: C.w })}><Ic n="car" s={40} /></div>
      </div>
      <div style={tx(18, 900, C.g800, { marginBottom: 4 })}>Buscando motorista...</div><div style={tx(14, 400, C.g500)}>Aguarde enquanto encontramos o motorista mais próximo</div>
      <div style={tx(14, 700, C.r600, { marginTop: 24, padding: '8px 16px', display: 'inline-block' })}>Cancelar</div>
    </div>;
  } else {
    var b = [['Motorista a caminho!', 'Chega em aproximadamente ' + Math.max(1, Math.round(dist * 2)) + ' minuto' + (Math.round(dist * 2) > 1 ? 's' : ''), C.b50, C.b200, C.b500, C.b800, C.b700, 'ok'],
      ['Motorista chegando!', 'Aguarde no ponto de embarque', C.a50, C.a200, C.a500, C.a800, C.a700, 'pin'], ['Em viagem', 'A caminho do destino', C.pu50, C.pu200, C.pu500, C.pu800, C.pu700, 'nav'],
      ['Viagem concluida', 'Obrigado por viajar com a gente!', C.gr50, C.gr200, C.gr500, C.gr800, C.gr700, 'ok']][corrida];
    corpo = [
      <div key={'s' + corrida} className="ce-app-entra" style={{ background: b[2], border: '2px solid ' + b[3], borderRadius: 16, padding: 16, textAlign: 'center' }}>
        <div style={st(CEN, { width: 56, height: 56, margin: '0 auto 8px', borderRadius: 99, background: b[4], color: C.w })}><Ic n={b[7]} s={32} /></div>
        <div style={tx(16, 900, b[5])}>{b[0]}</div><div style={tx(12, 400, b[6])}>{b[1]}</div>
      </div>,
      <div key="m" style={st(CARD, { boxShadow: SH.md, padding: 16 })}>
        <div style={st(ROW, { gap: 12 })}>
          <span style={st(CEN, { width: 56, height: 56, borderRadius: 99, background: C.g200, color: C.g500, flex: 'none' })}><Ic n="user" s={28} /></span>
          <span style={{ flex: 1, minWidth: 0 }}><span style={tx(16, 900, C.g800, { display: 'block' })}>Rafael Oliveira</span>
            <span style={st(ROW, tx(12, 400, C.g400, { gap: 4 }))}><Ic n="star_fill" s={12} c={C.a500} /><b style={{ color: C.g700 }}>4.9</b>• Carro</span></span>
          <span style={st(CEN, { width: 40, height: 40, borderRadius: 99, background: C.amb, color: C.w })}><Ic n="chat" s={16} /></span>
        </div>
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid ' + C.g100, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, textAlign: 'center' }}>
          {[['Veículo', 'Carro'], ['Placa', 'RBC4F21'], ['Distância', corrida ? '—' : dist.toFixed(1) + ' km']].map(function (c, i) {
            return <div key={c[0]}><div style={tx(9, 700, C.g400, UP)}>{c[0]}</div><div style={st(ROW, CEN, tx(12, 700, C.g800, { gap: 8 }))}>{i === 0 && <Veic k="car" s={14} />}{c[1]}</div></div>; })}
        </div>
      </div>,
      <div key="r" style={st(CARD, { boxShadow: SH.sm, padding: 16 })}><Trajeto>
        <div style={st(ROW, { justifyContent: 'space-between', paddingTop: 8, borderTop: '1px solid ' + C.g100 })}><span style={tx(12, 700, C.g500)}>Valor estimado</span><span style={tx(18, 900, C.amb)}>R$ 14,90</span></div>
      </Trajeto></div>];
    if (corrida === 3) corpo.push(<div key="c" style={st(ROW, CEN, ap(t, T.concluir), BTN_AMB, { fontWeight: 700, borderRadius: 16 })}>Concluir{tq(t, T.concluir)}</div>);
  }
  var medir = passo === 'opc' && t >= T.rola - 250; // mede com a folha já parada em 15%
  React.useEffect(function () { var el = caixa.current; if (medir && el && el.firstChild) setFimRola(Math.max(0, el.firstChild.offsetHeight - el.clientHeight + 24)); }, [medir]);
  var rola = passo === 'opc' && t >= T.rola ? fimRola : 0;
  return (
    <Raiz d={d} fundo={MAPA.claro.fundo} rotulo="App Cerrado Express: o cliente escolhe o destino, chama um carro e acompanha o motorista">
      <Mapa>
        <Linha r={R_COR.AB} mostra={passo === 'conf' || passo === 'ok'} />
        <Pino x={84} y={176} cor="#22c55e" l="A" mostra={passo !== 'dest'} /><Pino x={330} y={296} cor="#1f2937" l="B" mostra={passo !== 'dest'} />
        <Veiculo d={d} tipo="car" trechos={[{ r: prep([[150, 60], [150, 118]]), de: 1e9, ate: 2e9 }]} />
        <Veiculo d={d} tipo="car" trechos={[{ r: prep([[18, 296], [84, 296]]), de: 1e9, ate: 2e9 }]} />
        <Veiculo d={d} tipo="car" trechos={[{ r: R_COR.C0, de: T.drag + 200, ate: T.chegando - 150 }, { r: R_COR.AB, de: T.viajando, ate: T.fim - 150 }]} />
      </Mapa>
      <Hamb />
      <div style={st(COL, { position: 'absolute', left: 0, right: 0, bottom: 0, top: pct + '%', background: C.sheet, borderRadius: '24px 24px 0 0', boxShadow: SH.x2, transition: 'top .45s cubic-bezier(.32,.72,0,1)', zIndex: 5 })}>
        <Alca dedo={em(t, T.drag - 150, T.solta) || em(t, T.sobe - 150, T.sobe + 450)} />
        <div style={{ padding: '8px 16px' }}><div style={{ padding: '4px 0', minHeight: 8 }}>{head && <div key={passo} className="ce-app-entra"><div style={tx(18, 900, C.g800, { letterSpacing: '-.025em', lineHeight: '28px' })}>{head[0]}</div><div style={tx(12, 500, C.g500, { lineHeight: '16px' })}>{head[1]}</div></div>}</div></div>
        <div ref={caixa} style={{ flex: 1, overflow: 'hidden', padding: '0 16px 16px' }}>
          <div key={passo} className="ce-app-entra" style={st(COL, { gap: passo === 'conf' ? 12 : 16, paddingTop: 8, transform: 'translateY(' + -rola + 'px)', transition: 'transform .7s cubic-bezier(.4,0,.2,1)' })}>{corpo}</div>
        </div></div>
    </Raiz>
  );
}

/* ═══════════ 3 · Entregador (DriverApp, tema escuro) ═══════════ */
var NAV = [['d', 'pacote', 'Entregas'], ['a', 'nav', 'Rota'], ['m', 'mapa', 'Mapa'], ['c', 'chat', 'Chat'], ['p', 'user', 'Menu']];
var ST_ENT = { A: ['Aceito', C.b100, C.b800], K: ['Na Coleta', C.o100, C.o800], T: ['Em Rota', C.i100, C.i800], D: ['No Destino', C.pu100, C.pu800] };
var FOTO = <svg viewBox="0 0 160 90" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"><rect width="160" height="90" fill="#cdb796" /><rect y="66" width="160" height="24" fill="#8f7a5f" />
  <rect x="92" y="8" width="40" height="60" rx="2" fill="#6b4a33" /><circle cx="125" cy="40" r="2" fill="#d9b25a" /><rect x="40" y="46" width="36" height="26" rx="2" fill="#c8955a" /><rect x="40" y="46" width="36" height="7" fill="#b58149" /><rect x="55" y="46" width="6" height="26" fill="#e9d3a2" opacity=".8" /></svg>;
function hora(seg) { var h = Math.floor(seg / 3600), m = Math.floor(seg % 3600 / 60); return (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m; }
function cron(seg) { var m = Math.floor(seg / 60), s = Math.floor(seg % 60); return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s; }
function Arco(p) { var Cc = 2 * Math.PI * 30, len = cl(p.b) - cl(p.a); return len > 0 ? <circle cx="33" cy="33" r="30" fill="none" stroke={p.c} strokeWidth="6" strokeLinecap="round" strokeDasharray={len * Cc + ' ' + Cc} strokeDashoffset={-cl(p.a) * Cc} opacity={p.o || 1} /> : null; }
function Parada(p) { // Stop do RideRouteTimeline
  var cor = p.tom === 'b' ? [C.b500, C.b400, 'rgba(43,127,255,.1)', 'rgba(43,127,255,.4)', 'rgba(43,127,255,.3)'] : [C.r500, C.r400, 'rgba(251,44,54,.1)', 'rgba(251,44,54,.4)', 'rgba(251,44,54,.3)'];
  return <div style={{ position: 'relative', paddingLeft: 28, paddingBottom: p.ultima ? 0 : 12 }}>
    <span style={st(CEN, { position: 'absolute', left: 0, top: 2, width: 18, height: 18, borderRadius: 99, border: '2px solid ' + C.d3, background: p.feito ? C.gr500 : cor[0], boxShadow: p.ativo && !p.feito ? '0 0 0 4px ' + cor[3] : 'none', transition: 'background .3s' })}>
      {p.feito ? <Ic n="check" s={11} w={3} c="#000" /> : <i style={{ width: 6, height: 6, borderRadius: 9, background: 'rgba(255,255,255,.9)' }} />}</span>
    <div style={st(ROW, tx(9, 900, p.feito ? C.gr400 : cor[1], st(UP, { letterSpacing: '.16em', gap: 6 })))}>{p.rot}{p.feito ? <span style={tx(8, 700, 'rgba(5,223,114,.7)', { textTransform: 'none', letterSpacing: 0 })}>concluída</span> : p.ativo ? <span style={tx(8, 700, 'rgba(255,255,255,.6)', { textTransform: 'none', letterSpacing: 0 })}>agora</span> : null}</div>
    <div style={st(ROW, { justifyContent: 'space-between', gap: 8, marginTop: 4 })}>
      <span style={tx(11, 700, p.feito ? C.g500 : C.g300, ELL)}>{p.contato}</span>
      <span style={st(ROW, { gap: 4 })}>
        <span style={st(ROW, tx(10, 900, '#fff', st(UP, { gap: 4, height: 28, padding: '0 10px', borderRadius: 8, background: cor[0], letterSpacing: '.025em' })))}><Ic n="pin" s={11} />Mapa</span>
        {[['chat', cor[2], cor[1]], ['wpp', 'rgba(0,201,80,.1)', C.gr400], ['phone', cor[2], cor[1]]].map(function (b) { return <span key={b[0]} style={st(CEN, { width: 28, height: 28, borderRadius: 8, background: b[1], color: b[2] })}><Ic n={b[0]} s={14} /></span>; })}
      </span></div>
    <div style={tx(13, 700, p.feito ? C.g400 : C.w, { lineHeight: 1.375, marginTop: 6 })}>{p.end}</div>
    {p.compl && <div style={tx(11, 500, C.g300, { marginTop: 2, paddingLeft: 8, borderLeft: '2px solid ' + cor[4] })}>{p.compl}</div>}
    {p.badge && <div style={{ marginTop: 6 }}><span style={st(ROW, tx(8, 700, C.pu400, st(UP, { display: 'inline-flex', gap: 4, padding: '2px 6px', background: 'rgba(173,70,255,.1)', border: '1px solid rgba(173,70,255,.2)', borderRadius: 99 })))}><Ic n="chave" s={9} />Código de coleta</span></div>}
  </div>;
}
function DemoEntregador() {
  var T = { online: 800, oferta: 1900, aceitar: 3500, rota: 3850, coletaTq: 4700, emRotaTq: 5500, cod0: 5950, codTq: 6800, mapaTq: 7500, moto: 7800, motoFim: 10800,
    rotaTq: 11000, destTq: 11700, entTq: 12500, fotoTq: 13200, concTq: 14000, sucesso: 14300, volta: 15700, total: 17600 };
  var d = useDemo(T.total, 2800), t = d.t;
  useBarra(true);
  var on = t >= T.online + 100, oferta = em(t, T.oferta, T.rota), aba = t < T.rota ? 'd' : t < T.mapaTq + 100 ? 'a' : t < T.rotaTq + 100 ? 'm' : t < T.volta ? 'a' : 'd';
  var s = t < T.coletaTq + 150 ? 'A' : t < T.codTq + 200 ? 'K' : t < T.destTq + 150 ? 'T' : 'D', col = s === 'T' || s === 'D';
  var feitas = t >= T.volta ? 8 : 7, ganho = 87.5 + 12.5 * pr(t, T.volta + 200, T.volta + 900);
  var agora = 9 * 3600 + 41 * 60 + t / 1000, ini = 9 * 3600 + 38 * 60, pCol = 9 * 3600 + 53 * 60, pEnt = 10 * 3600 + 18 * 60, el = (agora - ini) / (pEnt - ini), cf = (pCol - ini) / (pEnt - ini);
  var codigo = em(t, T.emRotaTq + 150, T.codTq + 200), foto = em(t, T.entTq + 150, T.sucesso), fotoOk = t >= T.fotoTq + 200;
  var cartao = { borderRadius: 12, border: '1px solid rgba(255,255,255,.06)', boxShadow: '0 6px 24px -12px rgba(0,0,0,.8)', flex: 'none' };
  var stats = [['pacote', oferta ? 1 : 0, 'Pendentes', C.y400], ['timer', t >= T.rota && t < T.sucesso ? 1 : 0, 'Em Rota', C.pu400], ['ok', feitas, 'Concl. Hoje', C.b400], ['trending', 'R$' + ganho.toFixed(0), 'Ganhos Hoje', C.p500]];
  var rodape = { A: [['NA COLETA', C.sky, T.coletaTq], ['b']], K: [['EM ROTA', C.o500, T.emRotaTq], ['o']], T: [['NO DESTINO', C.pu600, T.destTq], ['p']], D: [['ENTREGUE', C.gr700, T.entTq, 4], ['NÃO ENTREGUE', C.r600, null, 4], ['b']] }[s];
  var camCor = { b: [C.b100, C.b300, C.b600], o: [C.o100, C.o300, C.o600], p: [C.pu100, C.pu300, C.pu600] };
  return (
    <Raiz d={d} fundo={C.d0} rotulo="App do entregador Cerrado Express: fica online, aceita a entrega, confirma a coleta com código e conclui a entrega">
      <div style={st(FILL, COL, { background: C.d0, color: C.w })}>
        <div style={st(ROW, { background: C.d1, padding: '8px 8px', paddingTop: SAT + 8, justifyContent: 'space-between', borderBottom: '1px solid ' + C.g800, boxShadow: SH.md, position: 'relative', zIndex: 3 })}>
          <img src={asset('assets/symbol-white.png')} alt="" style={{ width: 36, height: 36, objectFit: 'contain' }} />
          <div style={st(ROW, { gap: 10 })}>
            <span style={{ padding: '2px 8px', borderRadius: 99, background: 'rgba(43,127,255,.2)', color: C.b400 }}><Ic n="gps" s={12} /></span>
            <span style={st(ROW, ap(t, T.online), { gap: 6, padding: '4px 10px', borderRadius: 99, background: on ? 'rgba(242,177,29,.2)' : 'rgba(251,44,54,.2)', transition: 'background .3s, transform .15s' })}>
              <i className={on ? 'ce-app-pulso' : ''} style={{ width: 6, height: 6, borderRadius: 9, background: on ? C.p500 : C.r400 }} /><span style={tx(12, 700, on ? C.p500 : C.r400)}>{on ? 'Online' : 'Offline'}</span>{tq(t, T.online)}</span>
            <span style={{ padding: 6, borderRadius: 99, background: C.g800, color: C.g400 }}><Ic n="bell" s={18} /></span>
          </div></div>
        {aba !== 'm' && <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 4, padding: '6px 8px', background: C.d1, borderBottom: '1px solid rgba(255,255,255,.05)' }}>
          {stats.map(function (c, i) {
            var pisca = i === 0 && c[1] > 0;
            return <div key={c[2]} className={pisca ? 'ce-app-pisca' : ''} style={st(COL, CEN, { borderRadius: 8, padding: 6, background: C.d2, border: pisca ? '1px solid rgba(240,177,0,.3)' : '1px solid transparent' })}>
              <span className={pisca ? 'ce-app-pula' : ''} style={{ color: pisca ? C.y500 : c[3], marginBottom: 2 }}><Ic n={c[0]} s={12} /></span>
              <span style={tx(10.5, i === 3 ? 900 : 700, pisca ? C.y500 : i === 3 ? C.p500 : C.w, { lineHeight: 1.3 })}>{c[1]}</span>
              <span style={tx(7, 400, pisca ? C.y500 : C.g500, st(UP, { letterSpacing: '-.025em', whiteSpace: 'nowrap' }))}>{c[2]}</span></div>; })}
        </div>}
        {aba === 'd' && oferta && <div className="ce-app-entra" style={st(COL, { gap: 6, padding: '6px 16px', background: C.d1, borderBottom: '1px solid rgba(30,41,57,.5)' })}><div style={st(ROW, { gap: 8 })}>
          <span style={st(ROW, CEN, tx(14, 700, C.w, { flex: 1, gap: 8, padding: '8px 0', borderRadius: 8, background: C.rust }))}><Ic n="lista" s={16} />Lista</span>
          <span style={st(ROW, CEN, tx(14, 700, C.g400, { flex: 1, gap: 8, padding: '8px 0', borderRadius: 8, background: C.d2 }))}><Ic n="mapa" s={16} />Mapa</span>
          <span style={{ padding: 8, borderRadius: 8, background: C.d2, color: C.g400 }}><Ic n="atualiza" s={18} /></span></div></div>}
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden', padding: '8px 16px' }}>
          {aba === 'd' && (oferta ? <div className="ce-app-sobe">
            <div style={tx(12, 700, C.g400, st(UP, { letterSpacing: '.05em', marginBottom: 12 }))}>Entregas Disponíveis (1)</div>
            <div style={{ borderRadius: 12, padding: 12, background: C.d3, border: '1px solid rgba(54,65,83,.4)' }}>
              <div style={st(ROW, { justifyContent: 'space-between', marginBottom: 8 })}>
                <span style={st(ROW, { gap: 6 })}><span style={tx(10, 700, C.g500)}>#4821</span><span style={st(ROW, tx(8, 700, C.g300, { gap: 4, background: C.g800, border: '1px solid ' + C.g700, padding: '2px 6px', borderRadius: 99 }))}><Veic k="moto_bag" s={10} />Moto Bag</span></span>
                <span style={st(COL, { alignItems: 'flex-end', gap: 4 })}><span style={st(ROW, { gap: 8 })}><span style={tx(10, 400, C.g400)}>3.2 km</span><span style={tx(18, 900, C.p500)}>R$ 12.50</span></span>
                  <span style={st(ROW, tx(10, 700, C.a500, { gap: 4, fontFamily: FM, background: 'rgba(254,154,0,.2)', padding: '2px 8px', borderRadius: 99 }))}><Ic n="clock" s={12} />{Math.max(0, 45 - Math.floor((t - T.oferta) / 1000))}s</span></span>
              </div>
              <div style={st(ROW, { gap: 6, marginBottom: 8, padding: '4px 8px', background: 'rgba(230,231,233,.05)', borderRadius: 8, border: '1px solid rgba(230,231,233,.05)' })}><Ic n="user" s={10} c="rgba(242,177,29,.7)" /><span style={tx(8, 400, C.g400, st(UP, { letterSpacing: '.05em' }))}>De:</span><span style={tx(11, 700, C.p500)}>Padaria Pão Dourado</span></div>
              <div style={st(COL, { gap: 4, marginBottom: 10 })}>
                {[[C.b500, COLETA, 400, .8], [C.r500, ENTREGA, 500, 1]].map(function (l, i) { return <div key={i} style={st(ROW, { gap: 8 })}><i style={{ width: 6, height: 6, borderRadius: 9, background: l[0], flex: 'none' }} /><span style={tx(11, l[2], C.w, st(ELL, { opacity: l[3] }))}>{l[1]}</span></div>; })}
              </div>
              <div style={st(ROW, { gap: 6 })}>
                <span style={tx(9, 700, C.g500, { padding: '6px 10px', border: '1px solid rgba(54,65,83,.5)', borderRadius: 8 })}>RECUSAR</span>
                <span style={st(ROW, CEN, ap(t, T.aceitar), tx(12, 700, C.w, { flex: 1, padding: '6px 0', borderRadius: 8, background: C.rust, boxShadow: SH.md, opacity: t >= T.aceitar + 100 ? .5 : 1 }))}>{t >= T.aceitar + 100 ? 'PROCESSANDO...' : '⚡ ACEITAR'}{tq(t, T.aceitar)}</span>
              </div></div>
          </div> : <div style={st(COL, { alignItems: 'center', padding: '64px 0' })}>
            <span style={st(CEN, { width: 80, height: 80, borderRadius: 99, background: C.d2, color: C.g600, marginBottom: 16 })}><Ic n="clock" s={36} /></span>
            <div style={tx(20, 700, C.w, { marginBottom: 8 })}>Sem Novas Entregas</div><div style={tx(16, 400, C.g500, { marginBottom: 24 })}>Aguardando novas ofertas...</div>
            <span style={st(ROW, tx(16, 700, C.w, { gap: 8, background: C.rust, padding: '12px 24px', borderRadius: 12 }))}><Ic n="atualiza" s={18} />Atualizar</span>
          </div>)}
          {aba === 'a' && <div key="a" className="ce-app-entra" style={st(COL, { position: 'absolute', left: 0, right: 0, top: 0, bottom: 96 + SAB, padding: '0 16px' })}><div style={st(COL, { flex: 1, minHeight: 0, overflow: 'hidden', gap: 8 })}>
            <div style={st(ROW, tx(14, 700, C.g400, { flex: 'none', gap: 8, margin: '0 -16px', padding: '8px 16px', borderBottom: '1px solid rgba(54,65,83,.3)', background: 'rgba(13,13,13,.6)' }))}><Ic n="left" s={16} />Voltar para lista</div>
            <div style={st(cartao, { background: 'linear-gradient(135deg,#202020,#161616)' })}>
              <div style={st(ROW, { justifyContent: 'space-between', alignItems: 'flex-start', padding: '10px 10px 8px', gap: 8 })}>
                <div style={{ minWidth: 0 }}>
                  <div style={st(ROW, { gap: 6 })}><span style={tx(8, 900, C.g500, st(UP, { letterSpacing: '.16em' }))}>Entrega</span><span style={tx(17, 900, C.w, { lineHeight: 1, letterSpacing: '-.025em' })}>#4821</span></div>
                  <div style={st(ROW, tx(12, 900, C.p500, st(UP, { gap: 4, marginTop: 4, letterSpacing: '.025em' })))}><Ic n="predio" s={11} />Padaria Pão Dourado</div>
                  <div style={st(ROW, { gap: 4, marginTop: 6 })}>
                    <span style={st(ROW, tx(9, 700, C.g300, st(UP, { gap: 4, padding: '2px 6px', borderRadius: 6, background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.08)' })))}><Veic k="moto_bag" s={10} />Moto Bag</span>
                    <span key={s} className="ce-app-zoom" style={tx(9, 900, ST_ENT[s][2], st(UP, { padding: '2px 6px', borderRadius: 6, background: ST_ENT[s][1] }))}>{ST_ENT[s][0]}</span>
                  </div></div>
                <div style={{ textAlign: 'right', flex: 'none' }}><div style={tx(8, 900, C.g500, st(UP, { letterSpacing: '.16em' }))}>Valor</div><div style={tx(22, 900, C.gr400, { lineHeight: 1, textShadow: '0 0 12px rgba(74,222,128,.25)' })}>R$ 12,50</div></div>
              </div>
              <div style={{ margin: '0 10px', height: 1, background: 'linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.05),transparent)' }} />
              <div style={st(ROW, { gap: 8, padding: '8px 10px' })}>
                <div style={st(COL, { flex: 1, gap: 6 })}>
                  {[['nav', 'Distância', '3.2', 'km', C.p500, '242,177,29'], ['timer', 'Tempo est.', '7 min', '', C.sky4, '0,166,244']].map(function (c) {
                    return <div key={c[1]} style={st(ROW, { gap: 8 })}><span style={st(CEN, { width: 24, height: 24, borderRadius: 8, background: 'rgba(' + c[5] + ',.15)', border: '1px solid rgba(' + c[5] + ',.25)', color: c[4] })}><Ic n={c[0]} s={12} /></span>
                      <div style={{ lineHeight: 1 }}><div style={tx(7, 900, C.g500, st(UP, { letterSpacing: '.14em', marginBottom: 2 }))}>{c[1]}</div><div style={tx(15, 900, C.w)}>{c[2]}{c[3] && <span style={tx(10, 700, C.g400, { marginLeft: 2 })}>{c[3]}</span>}</div></div></div>; })}
                </div>
                <div style={{ width: 1, alignSelf: 'stretch', background: 'linear-gradient(transparent,rgba(255,255,255,.1),transparent)' }} />
                <div style={st(ROW, { gap: 10 })}>
                  <div style={{ position: 'relative', width: 66, height: 66 }}>
                    <svg width="66" height="66" viewBox="0 0 66 66" style={{ transform: 'rotate(-90deg)' }}><Arco a={0} b={cf} c={C.p500} o={.22} /><Arco a={cf} b={1} c="#ef4444" o={.22} /><Arco a={0} b={el} c={C.p500} /></svg>
                    <div style={st(FILL, COL, CEN)}><span style={tx(13, 900, '#fde68a', { lineHeight: 1, letterSpacing: '-.02em' })}>{cron(col ? pEnt - agora : pCol - agora)}</span><span style={tx(6, 900, C.g500, st(UP, { letterSpacing: '.1em', marginTop: 2 }))}>{col ? 'p/ entrega' : 'p/ coleta'}</span></div>
                  </div>
                  <div style={st(COL, { gap: 4, fontWeight: 700, lineHeight: 1 })}>
                    {[[null, 'Lançado', ini, C.g400], [C.y400, 'Coleta', pCol, col ? 'rgba(253,199,0,.5)' : C.y400], ['#ff6467', 'Entrega', pEnt, col ? C.r400 : 'rgba(255,100,103,.5)']].map(function (l) {
                      return <div key={l[1]} style={st(ROW, { gap: 4, color: l[3] })}>{l[0] ? <i style={{ width: 6, height: 6, borderRadius: 9, background: l[0] }} /> : <Ic n="clock" s={9} />}<span style={tx(7, 700, l[0] ? l[3] : C.g500, st(UP, { letterSpacing: '.05em' }))}>{l[1]}</span><span style={tx(10, 900, l[0] ? l[3] : C.w)}>{hora(l[2])}</span></div>; })}
                  </div></div></div></div>
            <div style={st(cartao, { background: C.d3, padding: '10px 10px 8px', position: 'relative' })}>
              <div style={{ position: 'absolute', left: 18.5, top: 22, bottom: 26, borderLeft: '2px dashed rgba(255,255,255,.1)' }} />
              <Parada tom="b" rot="Coleta" contato="Padaria Pão Dourado" end={COLETA} feito={col} ativo={!col} badge />
              <Parada tom="r" rot="Entrega" contato="Ana Souza" end={ENTREGA} compl="Apto 302" ativo={col} ultima />
            </div></div>
            <div style={st(ROW, { gap: 8, padding: '8px 0 4px', background: C.d0, flex: 'none' })}>
              {rodape.map(function (b, i) {
                if (b.length === 1) { var k = camCor[b[0]]; return <span key="cam" style={st(CEN, { flex: 2, alignSelf: 'stretch', background: k[0], border: '2px dashed ' + k[1], borderRadius: 12, color: k[2] })}><Ic n="camera" s={24} /></span>; }
                return <span key={b[0]} style={st(ROW, CEN, ap(t, b[2]), tx(14, 900, C.w, { flex: b[3] || 7, padding: '12px 0', borderRadius: 12, background: b[1], boxShadow: SH.xl }))}><span key={b[0]} className="ce-app-entra">{b[0]}</span>{tq(t, b[2])}</span>;
              }).concat(s !== 'D' ? [<span key="al" style={st(CEN, { flex: 1, alignSelf: 'stretch', background: C.r500, borderRadius: 12, color: C.w })}><Ic n="alerta" s={20} /></span>] : [])}
            </div>
          </div>}
          {aba === 'm' && <div key="m" className="ce-app-entra">
            <div style={st(ROW, { justifyContent: 'space-between', marginBottom: 12 })}>
              <div><div style={tx(18, 900, C.w, { letterSpacing: '-.025em', lineHeight: '28px' })}>Mapa de Rotas</div><div style={tx(12, 400, C.g500, { marginTop: 2 })}>1 pedido ativo</div></div>
              <div style={st(ROW, tx(10, 400, C.g400, { gap: 12 }))}>
                <span style={st(ROW, { gap: 6 })}><i style={{ width: 12, height: 12, background: '#6B7280', borderRadius: 3, border: '1.5px solid #fff' }} />Coleta</span>
                <span style={st(ROW, { gap: 6 })}><svg width="10" height="14" viewBox="0 0 28 38"><path d="M14 1C7.1 1 1 7.1 1 14c0 9.3 13 23 13 23S27 23.3 27 14C27 7.1 20.9 1 14 1z" fill="#6B7280" stroke="#fff" strokeWidth="2" /></svg>Entrega</span>
                <span style={{ borderLeft: '1px solid ' + C.g700, paddingLeft: 12 }}>Cor = status</span>
              </div></div>
            <div style={{ position: 'relative', height: 372, borderRadius: 16, overflow: 'hidden', border: '1px solid ' + C.g800 }}>
              <Mapa tema="escuro" vb="36 22 343 372"><Linha r={R_ENT.PD} cor="#8B5CF6" w={4} op={.55} /><Caixa x={84} y={176} cor="#8B5CF6" /><Pino x={330} y={236} cor="#8B5CF6" />
                <Veiculo d={d} trechos={[{ r: R_ENT.PD, de: T.moto, ate: T.motoFim }]} /></Mapa>
              <span style={st(ROW, tx(11, 700, C.g800, { position: 'absolute', top: 12, right: 12, gap: 6, background: 'rgba(255,255,255,.9)', padding: '6px 10px', borderRadius: 8, boxShadow: SH.md, border: '1px solid ' + C.g200 }))}><Ic n="plus" s={13} w={2.5} />Ver tudo</span>
            </div>
            <div style={{ marginTop: 12, background: C.d1, border: '1px solid ' + C.g800, borderRadius: 16, padding: '12px 16px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
              {[['Paradas', C.g500, '2', '1 pedido'], ['1ª Coleta', C.a500, '—', 'km aprox.'], ['Distância', C.b400, '2.6', 'km em linha reta']].map(function (c) {
                return <div key={c[0]} style={st(COL, { alignItems: 'center', gap: 2 })}><span style={tx(9, 700, c[1], st(UP, { letterSpacing: '.05em' }))}>{c[0]}</span><span style={tx(18, 900, C.w, { lineHeight: 1 })}>{c[2]}</span><span style={tx(9, 400, C.g600)}>{c[3]}</span></div>; })}
            </div>
          </div>}
        </div>
        <div style={st(ROW, { position: 'absolute', left: 16, right: 16, bottom: 16 + SAB, justifyContent: 'space-around', padding: '12px 16px', borderRadius: 32, background: 'rgba(17,17,17,.95)', border: '1px solid ' + C.g800, boxShadow: SH.x2, zIndex: 20 })}>
          {NAV.map(function (n) {
            var ativo = aba === n[0], tt = n[0] === 'm' ? T.mapaTq : n[0] === 'a' && t > T.mapaTq ? T.rotaTq : null;
            return <div key={n[0]} style={st(COL, CEN, ap(t, tt), { width: 56, gap: 2, color: ativo ? C.y500 : C.g500, transform: ativo ? 'scale(1.05)' : 'none', transition: 'color .2s, transform .2s' })}>
              <Ic n={n[1]} s={22} f={ativo ? 'currentColor' : 'none'} fo={ativo ? .2 : undefined} /><span style={tx(9, 700, 'inherit', st(UP, { opacity: ativo ? 1 : .7 }))}>{n[2]}</span>
              {ativo && <i style={{ position: 'absolute', bottom: -6, width: 4, height: 4, borderRadius: 9, background: C.y500 }} />}{tq(t, tt)}</div>;
          })}
        </div>
        {codigo && <div className="ce-app-entra" style={st(FILL, CEN, st({ zIndex: 60, padding: 16, background: 'rgba(0,0,0,.6)' }, blur(4)))}>
          <div className="ce-app-zoom" style={{ width: '100%', background: C.g900, border: '1px solid ' + C.g800, borderRadius: 16, boxShadow: SH.x2, overflow: 'hidden' }}>
            <div style={st(ROW, { justifyContent: 'space-between', padding: 16, borderBottom: '1px solid ' + C.g800 })}>
              <span style={st(ROW, { gap: 8 })}><span style={{ padding: 8, background: 'rgba(173,70,255,.1)', borderRadius: 8, color: C.pu400 }}><Ic n="chave" s={18} /></span><span style={tx(16, 700, C.g100)}>Código de Coleta</span></span>
              <span style={{ padding: 8, color: C.g400 }}><Ic n="x" s={20} /></span>
            </div>
            <div style={{ padding: 20 }}>
              <p style={tx(14, 400, C.g400, { margin: '0 0 16px', lineHeight: 1.43 })}>Este pedido exige um código de validação para confirmar a coleta. Solicite ao remetente.</p>
              <div style={st(CEN, { background: C.g800, border: '1px solid ' + C.g700, borderRadius: 12, padding: '12px 16px', height: 54, boxShadow: '0 0 0 2px rgba(173,70,255,.5)' })}>
                {t >= T.cod0 ? <span style={tx(20, 400, C.w, { fontFamily: FM, letterSpacing: '.5em', marginRight: '-.5em' })}>{dig('7351', t, T.cod0, 160)}</span> : <span style={tx(16, 400, C.g600)}>Informe o código</span>}</div>
              <div style={st(ROW, CEN, ap(t, T.codTq), tx(16, 700, C.w, { marginTop: 16, gap: 8, padding: '16px 0', borderRadius: 12, background: C.pu600, boxShadow: SH.lg, opacity: t >= T.cod0 + 640 ? 1 : .5 }))}><Ic n="ok" s={20} />CONFIRMAR CÓDIGO{tq(t, T.codTq)}</div>
            </div></div>
        </div>}
        {foto && <div className="ce-app-entra" style={st(FILL, CEN, { zIndex: 60, padding: 16, background: 'rgba(0,0,0,.9)' })}>
          <div className="ce-app-zoom" style={{ width: '100%', background: C.d1, borderRadius: 24, border: '1px solid rgba(255,255,255,.1)', boxShadow: SH.x2, overflow: 'hidden' }}>
            <div style={{ background: 'linear-gradient(90deg,' + C.p600 + ',' + C.p500 + ')', padding: 20 }}><div style={tx(20, 900, C.w, st(UP, { fontStyle: 'italic' }))}>Finalizar Entrega</div><div style={tx(10, 700, C.w, st(UP, { opacity: .7, letterSpacing: '.1em', marginTop: 4 }))}>Pedido #4821</div></div>
            <div style={st(COL, { padding: 24, gap: 24 })}>
              <div><div style={tx(10, 900, C.g500, st(UP, { letterSpacing: '.1em', marginBottom: 8, padding: '0 4px' }))}>Nome do Recebedor</div>
                <div style={st(ROW, tx(14, 700, C.w, { gap: 14, background: C.d2, border: '1px solid ' + C.g700, borderRadius: 16, padding: 16 }))}><Ic n="user" s={18} c={C.p500} />Ana Souza</div></div>
              <div><div style={tx(10, 900, C.g500, st(UP, { letterSpacing: '.1em', marginBottom: 8, padding: '0 4px' }))}>Prova de Entrega (Foto)</div>
                {fotoOk ? <div className="ce-app-entra" style={{ borderRadius: 16, overflow: 'hidden', height: 166, border: '2px solid rgba(242,177,29,.3)' }}>{FOTO}</div>
                  : <div style={st(COL, CEN, ap(t, T.fotoTq), { height: 166, border: '2px dashed ' + C.g700, borderRadius: 16, gap: 12, color: C.g500 })}>
                    <span style={st(CEN, { width: 64, height: 64, borderRadius: 99, background: C.g800 })}><Ic n="camera" s={28} /></span>
                    <span style={{ textAlign: 'center' }}><span style={tx(14, 900, C.g500, st(UP, { display: 'block' }))}>Tirar Foto</span><span style={tx(10, 400, C.g500)}>Obrigatório para concluir</span></span>{tq(t, T.fotoTq)}</div>}</div>
              <div style={st(ROW, { gap: 12, paddingTop: 8 })}><span style={tx(12, 700, C.g500, st(UP, { flex: 1, textAlign: 'center', letterSpacing: '.1em' }))}>Cancelar</span>
                <span style={st(ROW, CEN, ap(t, T.concTq), tx(14, 900, C.w, st(UP, { flex: 2, padding: '16px 0', background: C.rust, borderRadius: 16, letterSpacing: '.1em', boxShadow: '0 10px 15px -3px rgba(242,177,29,.2)', opacity: fotoOk ? 1 : .5 })))}>Concluir Entrega{tq(t, T.concTq)}</span></div>
            </div></div>
        </div>}
        {em(t, T.sucesso, T.volta) && <div className="ce-app-entra" style={st(FILL, CEN, st({ zIndex: 70, background: 'rgba(0,0,0,.8)' }, blur(8)))}>
          <div className="ce-app-zoom" style={{ textAlign: 'center' }}>
            <span style={st(CEN, { width: 96, height: 96, margin: '0 auto 16px', borderRadius: 99, background: C.gr500, color: C.w, boxShadow: '0 25px 50px -12px rgba(0,201,80,.5)' })}><Ic n="ok" s={48} /></span>
            <div style={tx(24, 900, C.w)}>ENTREGA CONCLUÍDA!</div><div style={tx(18, 700, C.p500, { marginTop: 8 })}>+R$ 12.50</div>
          </div>
        </div>}
      </div>
    </Raiz>
  );
}

/* ═══════════ 4 · Painel do embarcador — "Minhas Entregas" com status ao vivo ═══════════ */
var VOLTAS = [[[268, 118], [330, 118], [330, 236], [268, 236], [268, 118]], [[84, 236], [18, 236], [18, 356], [84, 356], [84, 236]],
  [[150, 60], [206, 60], [206, 176], [150, 176], [150, 60]], [[84, 118], [150, 118], [150, 236], [84, 236], [84, 118]]].map(prep);
function DemoPainelEmpresa() {
  var T = { entregue: 1800, novo: 2600, tNovos: 3400, aceito: 5600, tAceitos: 6300, saiu: 8400, tRota: 9100, chegando: 10400, total: 12600 };
  var d = useDemo(T.total, 1000, true), t = d.t; // contínuo: só a lista pisca na virada do loop
  useBarra(false);
  var filtro = t < T.tNovos + 100 ? 'T' : t < T.tAceitos + 100 ? 'P' : t < T.tRota + 100 ? 'A' : 'T';
  var E2 = 'Avenida Goiás, 980, Setor Oeste, Itumbiara, GO', E3 = 'Rua 15 de Novembro, 88, Centro, Itumbiara, GO';
  var ped = [
    { n: '0486', d: '13/10/2026, 09:43', st: t >= T.aceito ? 'A' : 'P', m: t >= T.aceito ? 'PEDRO H.' : null, c: COLETA, e: E3, val: 12.9, existe: t >= T.novo },
    { n: '0485', d: '13/10/2026, 09:31', st: t >= T.saiu ? 'T' : 'A', m: 'JOÃO P.', c: COLETA, e: E2, val: 15.4 },
    { n: '0484', d: '13/10/2026, 09:26', st: 'A', m: 'ANA L.', c: COLETA, e: 'Rua das Flores, 410, Jardim Europa, Itumbiara, GO', val: 12.9 },
    { n: '0483', d: '13/10/2026, 09:18', st: t >= T.chegando ? 'C' : 'T', m: 'MARIA S.', c: COLETA, e: ENTREGA, val: 18.9 },
    { n: '0482', d: '13/10/2026, 09:05', st: t >= T.entregue ? 'E' : 'C', m: 'CARLOS M.', c: COLETA, e: 'Avenida Paranaíba, 1200, Centro, Itumbiara, GO', val: 14.9 }
  ].filter(function (o) { return o.existe !== false; });
  var grupo = function (o) { return o.st === 'P' ? 'P' : o.st === 'A' ? 'A' : 'T'; };
  var cont = { P: 0, A: 0, T: 0, F: 1 };
  ped.forEach(function (o) { cont[grupo(o)]++; });
  var andamento = ped.filter(function (o) { return o.st !== 'E'; }).length;
  return (
    <Raiz d={d} fundo={MAPA.claro.fundo} rotulo="App Cerrado Express: a empresa acompanha as entregas do dia com o status mudando ao vivo">
      <HomeEmbarcador t={t} filtro={filtro} cont={cont} andamento={andamento} tChips={{ P: T.tNovos, A: T.tAceitos, T: T.tRota }}
        lista={ped.filter(function (o) { return grupo(o) === filtro; }).map(function (o) { return <CardPedido key={filtro + o.n} o={o} novo />; })} oculta={d.borda}
        mapa={<Mapa>{VOLTAS.map(function (v, i) { return <Veiculo key={i} d={d} mostra={i < 3 || t >= T.aceito} trechos={[{ r: v, de: 0, ate: T.total, lin: true }]} />; })}</Mapa>} />
    </Raiz>
  );
}

Object.assign(window, { CelularMockup: CelularMockup, DemoClienteEntrega: DemoClienteEntrega, DemoClienteCorrida: DemoClienteCorrida, DemoEntregador: DemoEntregador, DemoPainelEmpresa: DemoPainelEmpresa });
})();