/* ============================================================
   Franco Food PWA — Design System v2 (rediseño completo)
   Mobile-first · iOS safe areas · Dark mode
   ============================================================ */
:root{
  /* Marca por rol */
  --blue:#1a9cf0; --blue-d:#0d7fd1; --blue-soft:#e8f5fe;
  --orange:#f97316; --orange-d:#ea6a0a; --orange-soft:#fff3e8;
  --green:#16a34a; --green-d:#15803d; --green-soft:#eafbef;
  --red:#dc2626; --red-soft:#fdecec;
  --gold:#f59e0b;

  /* Neutros */
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --bg:#f4f7fb; --card:#ffffff; --line:#e6ecf3;

  /* Medidas */
  --nav-h:68px; --hdr-h:56px; --radius:18px; --radius-s:12px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);

  /* Sombras */
  --sh-sm:0 1px 3px rgba(15,23,42,.07);
  --sh-md:0 4px 14px rgba(15,23,42,.09);
  --sh-lg:0 8px 28px rgba(15,23,42,.12);

  /* Tipografía */
  --fs-hero:26px; --fs-t1:20px; --fs-t2:17px; --fs-b:15px; --fs-s:13px; --fs-xs:11px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:var(--fs-b);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue)}

/* ---------- Marco ---------- */
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;box-shadow:0 0 24px rgba(15,23,42,.08)}
#app-header{position:sticky;top:0;z-index:20;min-height:calc(var(--hdr-h) + var(--safe-t));padding-top:var(--safe-t);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding-left:16px;padding-right:16px;gap:10px}
.app-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.2px}
.app-logo img{width:32px;height:32px;border-radius:9px;box-shadow:var(--sh-sm)}
/* Back button — native app feel */
.back-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:24px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;flex-shrink:0;box-shadow:var(--sh-sm);font-family:inherit}
.back-btn:active{transform:scale(.94);background:var(--bg)}
.city-pill{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:5px;font-family:inherit}
#view{padding:16px 16px calc(var(--nav-h) + var(--safe-b) + 20px);min-height:60vh}
body.has-cartfab #view{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 84px)}

/* ---------- Navegación inferior ---------- */
#bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;min-height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;z-index:20}
#bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--faint);font-size:10.5px;font-weight:700;position:relative;padding:8px 0;letter-spacing:.1px}
#bottomnav a .ni{font-size:22px;line-height:1;transition:transform .15s}
#bottomnav a.active{color:var(--blue)}
#bottomnav a.active .ni{transform:scale(1.12)}
.cart-badge{position:absolute;top:4px;right:calc(50% - 24px);background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}

/* ---------- Botones ---------- */
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px 16px;font-size:var(--fs-b);font-weight:800;cursor:pointer;font-family:inherit;transition:transform .08s,filter .15s;letter-spacing:-.1px}
.btn:active{transform:scale(.985)}
.btn.blue{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:0 4px 12px rgba(26,156,240,.35)}
.btn.orange{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;box-shadow:0 4px 12px rgba(249,115,22,.35)}
.btn.green{background:linear-gradient(135deg,#22c55e,var(--green-d));color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.32)}
.btn.ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink);margin-top:10px;box-shadow:none}
.btn.link{background:none;color:var(--blue);box-shadow:none;padding:10px}
.btn:disabled{opacity:.5;box-shadow:none}
.btn-row{display:flex;gap:10px}
.btn-row .btn{margin-top:0}

/* ---------- Tarjetas ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--sh-sm)}
.card.tint-blue{background:linear-gradient(180deg,var(--blue-soft),#fff 70%)}
.card.tint-green{background:linear-gradient(180deg,var(--green-soft),#fff 70%)}
.card.tint-orange{background:linear-gradient(180deg,var(--orange-soft),#fff 70%)}

/* ---------- Formularios ---------- */
.input,select.input,textarea.input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-s);padding:13px 14px;font-size:var(--fs-b);font-family:inherit;margin-bottom:10px;background:var(--card);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,156,240,.15)}
.input::placeholder{color:var(--faint)}
label.f-label{display:block;font-size:var(--fs-s);font-weight:700;color:var(--ink-2);margin:2px 0 6px}

/* ---------- Texto utilitario ---------- */
.muted{color:var(--muted)} .small{font-size:var(--fs-s)} .xs{font-size:var(--fs-xs)}
.center{text-align:center;padding:48px 24px}
.greet{font-size:var(--fs-t1);font-weight:800;margin:4px 0 2px;letter-spacing:-.3px}
.sub{color:var(--muted);font-size:var(--fs-s);margin:0 0 12px}
.sec-title{font-size:var(--fs-t2);font-weight:800;margin:20px 2px 10px;letter-spacing:-.2px}

/* ---------- Encabezado de sección ---------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 12px}
.sec-head span{font-size:var(--fs-t2);font-weight:800;letter-spacing:-.2px}
.sec-head a{color:var(--blue);font-size:var(--fs-s);font-weight:700;text-decoration:none}

/* ---------- Buscador ---------- */
.searchbar{display:flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.searchbar input{border:0;outline:0;flex:1;font-size:var(--fs-b);background:transparent;font-family:inherit;color:var(--ink)}

/* ---------- Hero / banners ---------- */
.hero{background:linear-gradient(135deg,#0f172a,#1e3a5f);border-radius:22px;padding:22px 18px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-md)}
.hero::after{content:'';position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(26,156,240,.45),transparent 70%)}
.hero-t{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.5px;line-height:1.2}
.hero-s{font-size:var(--fs-s);opacity:.85;margin:6px 0 14px;max-width:75%}
.hero .btn{width:auto;display:inline-block;padding:11px 26px}
.cat-banner{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--blue),var(--blue-d));border-radius:20px;padding:20px 18px;margin-bottom:14px;text-decoration:none;color:#fff;box-shadow:0 6px 18px rgba(26,156,240,.35)}
.cb-t{font-size:19px;font-weight:800;letter-spacing:-.2px}
.cb-s{font-size:var(--fs-s);opacity:.92;margin:3px 0 12px}
.cb-btn{display:inline-block;background:#fff;color:var(--blue-d);font-weight:800;font-size:13px;border-radius:999px;padding:8px 20px}
.cb-ill{font-size:46px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}

/* ---------- Accesos directos de servicios ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.svc-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 6px 11px;text-align:center;text-decoration:none;color:inherit;box-shadow:var(--sh-sm);transition:transform .1s}
.svc-item:active{transform:scale(.96)}
.svc-ic{font-size:27px;line-height:1}
.svc-lb{font-size:var(--fs-xs);font-weight:700;margin-top:6px;color:var(--ink-2)}

/* ---------- Carrusel horizontal ---------- */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}

/* ---------- Negocios / categorías ---------- */
.biz-item{flex-shrink:0;width:80px;text-align:center;text-decoration:none;color:inherit}
.biz-item img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#eef2f7;border:2px solid var(--line);box-shadow:var(--sh-sm)}
.biz-label{font-size:11px;font-weight:600;margin-top:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.cat-item{flex-shrink:0;width:76px;text-align:center;cursor:pointer}
.cat-circle{width:60px;height:60px;margin:0 auto;border-radius:20px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-size:29px;box-shadow:var(--sh-sm)}
.cat-label{font-size:11px;font-weight:600;margin-top:6px;color:var(--ink-2)}

/* ---------- Platos destacados ---------- */
.dish-card{flex-shrink:0;width:158px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:9px;box-shadow:var(--sh-sm)}
.dish-card img{width:100%;height:100px;border-radius:var(--radius-s);object-fit:cover;background:#eef2f7}
.dish-n{font-size:13px;font-weight:700;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dish-s{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dish-p{font-size:15px;font-weight:800;color:var(--blue);margin:4px 0 7px}
.dish-add{width:100%;padding:8px;font-size:13px}

/* ---------- Filas de tienda / producto ---------- */
.store-row{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:10px;text-decoration:none;color:inherit;box-shadow:var(--sh-sm)}
.store-row img{width:60px;height:60px;border-radius:14px;object-fit:cover;background:#eef2f7;flex-shrink:0}
.store-row .si{flex:1;min-width:0}
.store-row .sn{font-weight:700;font-size:var(--fs-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-row .sm{font-size:var(--fs-s);color:var(--muted);margin-top:2px}
.open-dot{font-size:11px;font-weight:800}
.open-dot.on{color:var(--green)} .open-dot.off{color:var(--red)}
.prod-row{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px;margin-bottom:10px;align-items:center;box-shadow:var(--sh-sm)}
.prod-row img{width:66px;height:66px;border-radius:var(--radius-s);object-fit:cover;background:#eef2f7;flex-shrink:0}
.prod-row .pi{flex:1;min-width:0}
.prod-row .pn{font-weight:700;font-size:14px}
.prod-row .pp{font-weight:800;color:var(--blue);font-size:var(--fs-b);margin-top:3px}
.add-btn{border:0;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;font-weight:800;border-radius:11px;padding:9px 16px;font-size:14px;cursor:pointer;flex-shrink:0;box-shadow:0 3px 8px rgba(26,156,240,.3)}
.add-btn:active{transform:scale(.96)}

/* ---------- Taxi ---------- */
.taxi-card{background:var(--card);border:1.5px solid #bfe3fb;border-radius:20px;padding:18px;margin-bottom:8px;box-shadow:0 3px 12px rgba(13,127,209,.1)}
.taxi-badge{display:inline-block;background:#fef9c3;color:#713f12;font-size:11px;font-weight:800;border-radius:999px;padding:5px 13px;margin-bottom:9px}
.taxi-t{font-size:21px;font-weight:800;letter-spacing:-.3px}
.taxi-s{color:var(--muted);font-size:var(--fs-s);margin:3px 0 12px}
.taxi-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.taxi-ill{font-size:42px;flex-shrink:0}
.tx-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tx-head .greet{margin:0;flex:1;font-size:18px}
.tx-label{display:block;font-size:var(--fs-s);font-weight:700;color:var(--muted);margin-bottom:6px}
.tx-row{display:flex;gap:8px}
.tx-row .input{flex:1}
.taxi-map{height:250px;border-radius:var(--radius);overflow:hidden;margin-bottom:12px;background:#dbe4ee;border:1px solid var(--line)}
.taxi-map.tall{height:300px}
.tx-fare-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;font-size:14px}
.tx-fare-row.total{border-top:1.5px solid var(--line);margin-top:6px;padding-top:12px;font-size:17px;font-weight:800}
.ride-payrows{background:#f8fafc;border-radius:12px;padding:10px 12px;margin:8px 0}
.ride-payrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:14px}
.ride-payrow.total{border-top:1.5px solid #bbf7d0;margin-top:6px;padding-top:10px;font-size:16px;font-weight:800}
.ride-payrow.total b{color:#16a34a}
.ride-cash{background:#fefce8;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;margin:8px 0}
.ride-cardok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;margin:8px 0}

/* ---------- Seguimiento de viaje ---------- */
.tx-hero{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-d));border-radius:var(--radius);padding:18px;margin-bottom:12px;color:#fff;box-shadow:0 6px 18px rgba(26,156,240,.35)}
.tx-hero[data-phase="-1"]{background:linear-gradient(135deg,#64748b,#475569);box-shadow:none}
.tx-hero[data-phase="3"]{background:linear-gradient(135deg,#22c55e,var(--green-d));box-shadow:0 6px 18px rgba(22,163,74,.35)}
.tx-hero-ico{font-size:44px;line-height:1;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.tx-hero-ico.pulse{animation:txpulse 1.4s ease-in-out infinite}
@keyframes txpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.85}}
.tx-hero-title{font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.2px}
.tx-eta{font-weight:800;font-size:17px;margin-top:5px;background:rgba(255,255,255,.22);display:inline-block;padding:5px 14px;border-radius:999px}
.tx-hero-sub{font-size:12px;opacity:.9;margin-top:4px}
.tx-steps{display:flex;margin:14px 2px 4px}
.tx-step{flex:1;text-align:center;position:relative;font-size:10px;color:var(--faint);font-weight:700;line-height:1.35}
.tx-step .dot{width:28px;height:28px;border-radius:50%;background:#e2e8f0;color:#94a3b8;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;font-size:13px;font-weight:800;transition:all .2s}
.tx-step.done .dot{background:var(--green);color:#fff}
.tx-step.now .dot{background:var(--blue);color:#fff;box-shadow:0 0 0 5px #dbeafe}
.tx-step.done,.tx-step.now{color:var(--ink)}
.tx-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:calc(50% + 17px);right:calc(-50% + 17px);height:2px;background:#e2e8f0;border-radius:2px}
.tx-step.done:not(:last-child)::after{background:var(--green)}

/* ---------- Conductores disponibles ---------- */
.avail-list{display:flex;flex-direction:column;gap:8px}
.avail-item{display:flex;align-items:center;gap:12px;background:var(--green-soft);border:1px solid #bbf7d0;border-radius:var(--radius-s);padding:11px 13px}
.avail-avatar{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;box-shadow:var(--sh-sm)}
.avail-dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #bbf7d0;flex-shrink:0;animation:txpulse 1.6s infinite}

/* ---------- Rastreo de pedido ---------- */
.track-timeline{display:flex;flex-direction:column}
.track-step{display:flex;gap:13px;position:relative;padding-bottom:22px}
.track-step:last-child{padding-bottom:0}
.track-step .track-line{position:absolute;left:18px;top:38px;bottom:0;width:2px;background:#e2e8f0;border-radius:2px}
.track-step:last-child .track-line{display:none}
.track-step.done .track-line{background:var(--green)}
.track-dot{width:38px;height:38px;border-radius:50%;background:#f1f5f9;color:var(--faint);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;z-index:1;font-size:16px}
.track-step.done .track-dot{background:var(--green);color:#fff}
.track-step.cur .track-dot{background:var(--orange);color:#fff;animation:txpulse 1.5s infinite}
.track-lbl{padding-top:7px;font-weight:700;font-size:14px}
.track-lbl small{display:block;color:var(--muted);margin-top:2px;font-weight:400;font-size:12px}
.status-pill{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:4px 12px;background:var(--blue-soft);color:#0369a1}
.status-pill.ok{background:var(--green-soft);color:var(--green-d)}
.status-pill.warn{background:var(--orange-soft);color:var(--orange-d)}
.status-pill.bad{background:var(--red-soft);color:var(--red)}

/* ---------- Carrito flotante ---------- */
#cart-fab{position:fixed;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:448px;background:var(--ink);color:#fff;border:0;border-radius:16px;padding:15px 18px;font-size:var(--fs-b);font-weight:800;display:none;align-items:center;justify-content:space-between;cursor:pointer;z-index:25;font-family:inherit;box-shadow:var(--sh-lg)}
#cart-fab.show{display:flex;animation:fabIn .25s ease-out}
@keyframes fabIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%)}}

/* ---------- Sheets / modales ---------- */
.sheet{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
.sheet.hidden{display:none}
.sheet-box{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:480px;padding:20px 18px calc(20px + var(--safe-b));animation:sheetUp .25s ease-out;max-height:88vh;overflow-y:auto}
@keyframes sheetUp{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.sheet-box h3{margin:0 0 14px;font-size:17px;font-weight:800;letter-spacing:-.2px}
.sheet-close{display:block;width:100%;border:0;background:none;color:var(--muted);font-size:14px;font-weight:700;padding:12px;margin-top:6px;cursor:pointer;font-family:inherit;text-align:center}

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 50%,#eef2f7 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius-s)}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- Cupones ---------- */
.coupon-card{border:2px dashed var(--blue);background:linear-gradient(180deg,#f2f9ff 0%,#fff 70%);border-radius:var(--radius)}
.coupon-title{font-weight:800;margin-bottom:8px;color:#0b6cb8;font-size:14px}
.coupon-msg{margin-top:8px;font-size:13px;font-weight:600;min-height:18px}
.coupon-msg.ok{color:var(--green)}
.coupon-msg.err{color:var(--red)}
.coupon-disc-line{display:flex;justify-content:space-between;align-items:center;color:var(--green-d);font-weight:700;margin:6px 0;font-size:14px;background:var(--green-soft);border-radius:10px;padding:8px 12px}

/* ---------- Live ---------- */
.live-wrap{position:relative;margin-top:10px;border-radius:var(--radius);overflow:hidden;background:#000}
.live-video{width:100%;aspect-ratio:9/14;max-height:62vh;display:block;background:#000}
.live-card{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:112px;text-align:center;text-decoration:none;color:inherit;position:relative}
.live-card img{width:76px;height:76px;flex-shrink:0;border-radius:50%;object-fit:cover;border:3px solid var(--red);background:#eef2f7}
.live-badge{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;background:var(--red);color:#fff;font-size:9px;font-weight:800;border-radius:999px;padding:3px 9px;letter-spacing:.5px}
.live-card .biz-label{width:100%}
/* Página de lives (#/lives): rejilla de tarjetas (antes el <a> quedaba inline y se rompía) */
#lives-list{display:flex;flex-wrap:wrap;gap:20px 14px;align-content:flex-start}
.live-card.big{width:124px}
.live-card.big img{width:88px;height:88px}
.live-comments{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.live-comment{display:flex;gap:9px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:9px 11px}
.live-comment img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
#live-toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.live-toast{background:rgba(17,24,39,.95);color:#fff;border-radius:14px;padding:13px 16px;font-size:14px;box-shadow:var(--sh-lg);animation:toastIn .3s ease-out}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ---------- Panel conductor (verde) ---------- */
.drv-head{padding:18px}
.drv-head-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.drv-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid var(--green);flex-shrink:0}
.drv-name{font-weight:800;font-size:18px;letter-spacing:-.2px}
.drv-status{font-size:12px;font-weight:800;margin-top:3px}
.drv-status.on{color:var(--green)} .drv-status.off{color:var(--red)}
.drv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.drv-tabs .btn{flex:1 1 calc(33.333% - 6px);margin-top:0;font-size:12px;padding:12px 8px;white-space:nowrap;min-width:0}
.ride-card{border:1px solid var(--line);border-left:5px solid var(--green);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-md)}
.ride-fare{font-size:24px;font-weight:800;letter-spacing:-.4px}
.ride-actions{display:flex;gap:10px;margin-top:8px}
.ride-actions .btn{margin-top:0}
.drv-earn-hero{text-align:center;padding:24px 16px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;border-radius:var(--radius)}
.drv-prof-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line,#eef2f7)}
.drv-prof-row:last-child{border-bottom:none}
.drv-prof-row .k{color:var(--muted,#64748b);font-size:13px;font-weight:600;flex:none}
.drv-prof-row .v{color:var(--ink,#0f172a);font-size:14px;font-weight:700;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.drv-earn-big{font-size:38px;font-weight:800;color:var(--green-d);margin-top:6px;letter-spacing:-1px}

/* ---------- Panel negocio (naranja) ---------- */
#biz-tabs .btn.orange{box-shadow:0 4px 12px rgba(249,115,22,.35)}
.biz-reg-sec{font-size:15px;font-weight:800;margin:4px 0 12px;color:var(--orange)}

/* ---------- Switch ---------- */
.sw{position:relative;display:inline-block;width:48px;height:28px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0}
.sw .tk{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s;cursor:pointer}
.sw .tk::before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw input:checked + .tk{background:var(--blue)}
.sw input:checked + .tk::before{transform:translateX(20px)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row .sl{font-weight:700;font-size:var(--fs-b)}
.set-row .sd{font-size:var(--fs-s);color:var(--muted);margin-top:2px}

/* ---------- FAQ ---------- */
.faq-q{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:14px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.faq-a{display:none;background:var(--bg);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-s) var(--radius-s);padding:14px;margin:-8px 0 8px;font-size:14px}
.faq-item.open .faq-a{display:block}

/* ---------- Splash / role picker ---------- */
#splash{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .45s ease}
#splash.hide{opacity:0;pointer-events:none}
#splash img{width:150px;height:150px;object-fit:contain}
.splash-bar{width:130px;height:5px;background:#f1f5f9;border-radius:3px;margin-top:26px;overflow:hidden}
.splash-bar div{height:100%;width:40%;background:linear-gradient(90deg,var(--orange),var(--green));border-radius:3px;animation:splashslide 1.1s infinite ease-in-out}
@keyframes splashslide{0%{margin-left:-40%}100%{margin-left:100%}}
#role-picker{position:fixed;inset:0;background:var(--bg);z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px}
.role-box{max-width:380px;width:100%;text-align:center}
.role-logo{width:92px;height:92px;object-fit:contain;margin-bottom:14px}
.role-title{font-size:23px;font-weight:800;margin-bottom:6px;letter-spacing:-.4px}
.role-card{display:flex;align-items:center;gap:15px;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:17px;margin-top:11px;cursor:pointer;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.role-card:hover{border-color:var(--blue);box-shadow:var(--sh-md)}
.rc-ico{font-size:36px}
.role-card b{display:block;font-size:16px}
.role-card small{color:var(--muted);font-size:13px}

/* ---------- Perfil conductor (modal) ---------- */
.dp-overlay{position:fixed;inset:0;background:rgba(10,25,45,.55);z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.dp-sheet{background:#fff;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;border-radius:24px 24px 0 0;animation:dpUp .25s ease-out}
@keyframes dpUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.dp-head{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;padding:24px 18px 66px;position:relative;text-align:center;border-radius:24px 24px 0 0}
.dp-head.green{background:linear-gradient(135deg,#22c55e,var(--green-d))}
.dp-body{padding:0 18px 26px;margin-top:-54px}
.dp-photo{width:106px;height:106px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--sh-md);display:block;margin:0 auto;background:#eef2f7;position:relative;z-index:2}
.dp-name{font-size:20px;font-weight:800;text-align:center;margin:10px 0 4px;letter-spacing:-.3px}
.dp-card{background:#f7fafd;border:1px solid #e4edf5;border-radius:var(--radius);padding:15px;margin-top:14px}
.dp-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.25);color:#fff;font-size:18px;cursor:pointer;font-weight:800}
.dp-live{position:absolute;top:18px;left:18px;font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.25);border-radius:999px;padding:5px 12px}
.dp-stars{text-align:center;font-size:22px;margin:6px 0 2px;letter-spacing:2px}
.dp-rate-n{text-align:center;color:var(--muted);font-size:13px;margin-bottom:4px}
.dp-card-t{font-weight:800;font-size:14px;margin-bottom:6px}
.dp-actions{display:flex;gap:10px;margin-top:14px}
.dp-actions .btn{flex:1;margin-top:0;padding:12px 8px;font-size:14px}
.dp-call{text-decoration:none;text-align:center}
.dp-msgbtn{flex:1}
.dp-row{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}
.dp-row:last-child{border-bottom:0}
.dp-lang,.dp-hearing{display:inline-block;background:#f1f5f9;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;margin:2px 4px 2px 0;color:var(--ink-2)}
.tx-drv-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tx-live{display:inline-block;background:var(--green-soft);color:var(--green-d);font-size:11px;font-weight:800;border-radius:999px;padding:4px 12px;margin-top:4px}

/* ---------- Anuncios ---------- */
.ann-slide{display:block;border-radius:var(--radius);padding:18px;margin:14px 0 4px;background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;text-decoration:none;background-size:cover;background-position:center;box-shadow:0 6px 18px rgba(249,115,22,.3)}
.ann-slide.has-img{min-height:168px}
.ann-t{font-size:16px;font-weight:800}
.ann-x{font-size:13px;opacity:.92;margin-top:3px}

/* ---------- Clasificados ---------- */
.job-row{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:10px;text-decoration:none;color:inherit;box-shadow:var(--sh-sm)}
.job-ic{width:48px;height:48px;border-radius:14px;background:#fef3c7;display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}

/* ---------- Utilidades ---------- */
.sub-badge{display:inline-block;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;vertical-align:middle;white-space:nowrap;box-shadow:0 1px 4px rgba(245,158,11,.4)}
.empty-ill{font-size:52px;margin-bottom:10px}
.divider{height:1px;background:var(--line);margin:14px 0}
.pac-container{z-index:100!important}

/* ---------- Dark mode ---------- */
[data-theme="dark"]{
  --ink:#e8eef5; --ink-2:#c3cfdd; --muted:#93a1b5; --faint:#64748b;
  --bg:#0f1622; --card:#182234; --line:#243349;
  --blue:#2aa9f2; --blue-d:#1a8fd6; --blue-soft:#12324a;
  --green-soft:#0f2c1c; --orange-soft:#2c1f0f;
}
[data-theme="dark"] #app{box-shadow:none}
[data-theme="dark"] #app-header{background:rgba(24,34,52,.92)}
[data-theme="dark"] #bottomnav{background:rgba(24,34,52,.96)}
[data-theme="dark"] .skel{background:linear-gradient(90deg,#1c2940 25%,#243349 50%,#1c2940 75%);background-size:200% 100%}
[data-theme="dark"] .store-row img,[data-theme="dark"] .prod-row img{background:#243349}
[data-theme="dark"] input::placeholder{color:#5d6f88}
[data-theme="dark"] .sw .tk{background:#334155}
[data-theme="dark"] .dp-sheet,[data-theme="dark"] .sheet-box{background:#182234}
[data-theme="dark"] .dp-card{background:#0f1622;border-color:#243349}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0b1220,#16283f)}

/* ---------- Profile (organized sections) ---------- */
.pf-head{display:flex;align-items:center;gap:14px;padding:18px}
.pf-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#6366f1);color:#fff;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.pf-photo-btn{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--blue);cursor:pointer}
.pf-photo-btn:active{opacity:.7}
.pf-name{font-size:17px;font-weight:800;letter-spacing:-.2px}
.pf-mail{margin-top:2px}
.pf-badge{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;background:#fff7ed;color:#c2410c;border-radius:999px;padding:4px 12px}
.pf-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pf-sec-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:12px 16px 6px}
.pf-item{display:flex;align-items:center;gap:12px;padding:13px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;border-top:1px solid var(--line)}
.pf-item:first-of-type{border-top:0}
.pf-ic{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.pf-go{margin-left:auto;color:var(--muted);font-size:20px;font-weight:700}
.pf-duo{display:flex;gap:8px;padding:0 16px 14px}
.pf-duo .btn{margin-top:0}

/* ---------- Driver card (customer tracking view) ---------- */
.drv-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.drv-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--line)}
.drv-name{font-size:16px;font-weight:800}
.drv-rate{font-size:13px;margin-top:2px}
.drv-veh{display:flex;gap:12px;align-items:center;background:#f7fafd;border:1px solid #e4edf5;border-radius:var(--radius);padding:10px;margin-bottom:10px}
.drv-carphoto{width:90px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0}
.drv-carline{font-weight:800;font-size:14px}
.drv-plate{display:inline-block;margin-top:4px;background:#1a2233;color:#ffd60a;font-weight:800;font-size:14px;letter-spacing:1px;border-radius:6px;padding:4px 12px;border:2px solid #ffd60a}
.drv-actions{display:flex;gap:8px;margin-top:4px}
.drv-actions .btn{margin-top:0}

/* ===== Rediseño 17-oct-2026: variantes de botones del design-examples ===== */
.btn-primary{background:linear-gradient(135deg,#f97316,#ea6a0a);color:#fff;box-shadow:0 4px 14px rgba(249,115,22,.35)}
.btn-blue{background:linear-gradient(135deg,#1a9cf0,#0d7fd1);color:#fff;box-shadow:0 4px 14px rgba(26,156,240,.35)}
.btn-green{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 4px 14px rgba(22,163,74,.35)}
.btn-outline{background:#fff;color:#f97316;border:2px solid #f97316;box-shadow:none}
.btn-ghost{background:#f1f5f9;color:#334155;box-shadow:none;border:0}

/* ===== Rediseño 17-oct-2026: tarjeta de orden ===== */
.order-card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 4px 14px rgba(15,23,42,.09);margin-bottom:12px;border-left:4px solid #f97316}
.order-card .oh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.order-card .oid{font-weight:800;font-size:15px}
.order-card .status{background:#eafbef;color:#15803d;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.order-card .detail{color:#64748b;font-size:13px;margin-bottom:4px}
.order-card .actions{display:flex;gap:8px;margin-top:12px}
.order-card .actions .btn{margin:0;margin-top:0;padding:12px;font-size:14px}

/* ===== Rediseño 17-oct-2026: botón conductor estilo Uber ===== */
.driver-toggle{width:120px;height:120px;border-radius:50%;border:none;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s;margin:0 auto;display:block}
.driver-toggle.online{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 8px 28px rgba(22,163,74,.4)}
.driver-toggle.offline{background:#f1f5f9;color:#64748b;border:2px dashed #cbd5e1;box-shadow:none}
.driver-toggle:active{transform:scale(.95)}

/* ===== Home organizado 17-oct-2026: tarjeta de servicios + grupos ===== */
.svc-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 12px 12px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.svc-card-t{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px;padding:0 4px}
.svc-card .svc-grid{margin-bottom:0}
.svc-card .svc-item{box-shadow:none;border:1px solid var(--line)}
.home-group{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 12px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.home-group .sec-head{margin-top:0}
.home-group .sec-head:first-child{margin-top:0}

/* ---------- Native-feel package (v48) ---------- */
/* Slide-in transition on every route change (re-triggered from route()) */
@keyframes viewSlideIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
#view.view-enter { animation: viewSlideIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) { #view.view-enter { animation: none; } }
/* ---------- Native-feel package v2 (Lester 19 oct 2026: "se siente como una web") ---------- */
/* Kill rubber-band overscroll + iOS long-press callout on the app shell */
html, body { overscroll-behavior: none; }
body { -webkit-touch-callout: none; }
/* Instant taps everywhere (no 300ms delay / double-tap zoom) */
#view { touch-action: manipulation; }
/* Native apps don't let you select UI text or pop callouts on chrome */
#view button, #view .btn, #view a, #view .svc-item, #view .cat-item, #view .sec-head,
#bottomnav, #bottomnav *, #app-back {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
#view input, #view textarea, #view select { user-select: text; -webkit-user-select: text; }
/* Tactile press feedback on tappables */
#view .btn, #view .svc-item, #view .cat-item, #bottomnav a { transition: transform .12s ease-out, opacity .12s ease-out; }
#view .btn:active, #view .svc-item:active, #view .cat-item:active, #bottomnav a:active { transform: scale(.94); opacity: .85; }
/* Pull-to-refresh indicator */
#ptr-ind{position:fixed;top:0;left:0;right:0;z-index:60;display:none;align-items:flex-end;justify-content:center;overflow:hidden;height:0;pointer-events:none}
.ptr-spin{width:26px;height:26px;margin-bottom:10px;border:3px solid rgba(140,140,140,.35);border-top-color:var(--orange);border-radius:50%;animation:ptrSpin .7s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}
#ptr-ind.ready .ptr-spin{border-top-color:var(--green)}

/* Instant in-app notification toast */
#ff-notif-toast{position:fixed;top:calc(var(--safe-t,0px) + 10px);left:12px;right:12px;z-index:9999;background:#0f172a;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:14px;line-height:1.35;animation:ffToastIn .25s ease-out;cursor:pointer}
#ff-notif-toast b{font-size:15px}
#ff-notif-toast .ff-nt-msg{opacity:.85;margin-top:2px}
@keyframes ffToastIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Vehicle photos: background-removed PNGs, shown fully (v49) ---------- */
.tx-carphoto{width:84px;height:64px;object-fit:contain;background:transparent;border-radius:8px}
.vphoto-card img{width:100%;max-height:240px;object-fit:contain;background:transparent;display:block}

/* ============================================================
   Grocery 3D restyle (preview, Oct 18 2026) — lenguaje visual
   de la referencia: tarjetas muy redondeadas, sombras suaves,
   botones pill, iconos 3D clay.
   ============================================================ */
/* Botones pill grandes */
.btn{border-radius:999px}
/* Tarjetas: más redondeadas, sombra suave */
.card{border-radius:22px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.home-group,.svc-card{border-radius:22px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
/* Buscador pill */
.searchbar{border-radius:999px;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.searchbar input{border:0;outline:0;background:transparent;flex:1;font-size:15px;font-family:inherit;color:var(--ink)}
/* Círculos de categoría con pasteles rotativos */
.cat-circle{border-radius:24px}
.cat-item:nth-child(4n+1) .cat-circle{background:#e8f5fe}
.cat-item:nth-child(4n+2) .cat-circle{background:#eafbef}
.cat-item:nth-child(4n+3) .cat-circle{background:#fff3e8}
.cat-item:nth-child(4n+4) .cat-circle{background:#f3e8ff}
/* Tarjetas de producto estilo grocery */
.dish-card{border-radius:20px;box-shadow:0 10px 26px rgba(15,23,42,.09);padding:10px}
.add-btn{border-radius:999px}
/* Fotos de producto: recortes 3D sin fondo (object-fit contain, fondo sutil para fotos viejas) */
.dish-card img,.prod-row img{object-fit:contain;background:linear-gradient(180deg,#f8fafc,#eef2f7)}
.prod-row img{border-radius:14px}
/* Tab bar: estado activo */
/*#bottomnav a .ni img.ni3d,#bottomnav a img.ni3d{width:30px;height:30px;object-fit:contain;display:block}
#bottomnav a.active .ni3d{transform:scale(1.12)}*/
#bottomnav a.active{background:var(--blue-soft);border-radius:18px;margin:4px 2px;padding-top:6px}
/* Cart FAB */
#cart-fab{border-radius:999px}
/*#cart-fab img.ni3d{width:30px;height:30px;object-fit:contain}*/
/* Hero como banner promo */
.hero{border-radius:24px;background:linear-gradient(135deg,var(--blue-soft),#fff);border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,23,42,.08);color:var(--ink)}
.hero .btn{margin-top:10px}
/* Encabezados de sección */
.sec-head{font-weight:800}
.sec-head span{font-size:16px;letter-spacing:-.2px}
/* Encabezados de sección */
/*.greet img.ni3d{width:30px;height:30px;object-fit:contain;vertical-align:-6px;margin-right:2px}*/
/* Anuncios / banners promo más redondeados */
.ann-slide{border-radius:22px}
.cat-banner{border-radius:22px}
/* Modo oscuro: fotos de producto sobre tarjetas oscuras */
[data-theme="dark"] .dish-card img,[data-theme="dark"] .prod-row img{background:linear-gradient(180deg,#1e293b,#0f172a)}
[data-theme="dark"] #bottomnav a.active{background:rgba(26,156,240,.18)}
/* Banner de fotos sin fondo en el formulario de producto */
.prod-bg-banner{background:linear-gradient(135deg,#eafbef,#f6fff9);border:1px solid #bbf7d0;color:#15803d;border-radius:16px;padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:12px;line-height:1.45}
[data-theme="dark"] .prod-bg-banner{background:linear-gradient(135deg,rgba(22,163,74,.18),rgba(22,163,74,.08));color:#86efac;border-color:rgba(22,163,74,.35)}
/* ===== Taxi wizard (3 pantallas) + driver arriving ===== */
.txw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.txw-dots{display:flex;gap:6px}
.txw-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb}
.txw-dot.on{background:#16a34a}
.txw-search{display:flex;align-items:center;gap:8px;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:999px;padding:6px 8px 6px 14px;margin-bottom:10px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.txw-search>span{font-size:16px}
.txw-search .input{box-shadow:none}
.txw-promo{background:#16a34a;color:#fff;border-radius:14px;padding:10px 14px;font-weight:700;margin-bottom:10px;font-size:14px}
.txw-opt{display:flex;align-items:center;gap:12px;background:var(--card,#fff);border:2px solid #16a34a;border-radius:18px;padding:12px;margin-bottom:10px;box-shadow:0 4px 14px rgba(22,163,74,.12)}
.txw-veh{width:58px;height:44px;object-fit:contain;flex-shrink:0}
.txw-opt-mid{flex:1;min-width:0}
.txw-opt-name{font-weight:800;font-size:15px}
.txw-rec{background:#dcfce7;color:#15803d;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.txw-opt-price{text-align:right;font-size:17px;font-weight:800;white-space:nowrap}
.txw-opt-price s{color:#9ca3af;font-weight:400;font-size:13px;display:block}
.btn.txw-continue{background:#16a34a;border-color:#16a34a;color:#fff;border-radius:999px;font-size:17px;font-weight:800;padding:15px;width:100%;margin-top:10px}
.btn.txw-continue:disabled{opacity:.45}
/* Taxi step 3: keep the Confirmar button fully visible (Lester 19 oct 2026) */
#tx-step3 .btn.txw-continue{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:5}
#tx-step3{padding-bottom:90px}
.txw-mapwrap{position:relative}
.txw-arrive{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#2563eb;color:#fff;font-weight:800;font-size:13px;border-radius:999px;padding:8px 14px;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:5;white-space:nowrap}
.txw-minlabel{background:#16a34a!important;color:#fff!important;font-weight:800!important;font-size:12px!important;border-radius:999px;padding:4px 10px!important;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);font-family:inherit!important}
.txw-sheet{background:var(--card,#fff);border-radius:24px 24px 0 0;margin-top:-24px;position:relative;z-index:4;padding:16px 16px 8px;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.txw-crow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line,#e5e7eb);font-size:14px}
.txw-cdot{width:12px;height:12px;border-radius:50%;background:#16a34a;margin-top:4px;flex-shrink:0;box-shadow:0 0 0 4px rgba(22,163,74,.2)}
.txw-cchk{width:22px;height:22px;border-radius:50%;background:#16a34a;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
/* Driver arriving */
.txa-verified{position:absolute;left:12px;right:12px;bottom:12px;background:#2563eb;color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:11px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 16px rgba(37,99,235,.4);z-index:5}
.txa-verified .vchk{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.txa-eta{font-size:26px;font-weight:800;text-align:center;margin:2px 0 10px}
.txa-veh{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line,#e5e7eb)}
.txa-plate{font-size:26px;font-weight:800;letter-spacing:1px}
.txa-carimg{width:110px;height:80px;object-fit:contain;margin-left:auto;flex-shrink:0}
.txa-drv{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line,#e5e7eb)}
.txa-drv img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.txa-drv-name{font-weight:800;font-size:16px}
.txa-drv-sub{font-size:13px;color:#6b7280}
.txa-drv-btns{margin-left:auto;display:flex;gap:8px}
.txa-drv-btns .btn{width:48px;height:48px;border-radius:50%;padding:0;font-size:20px;margin-top:0;display:flex;align-items:center;justify-content:center}
/* Radio-cards de gestión de pedidos (negocio) */
.ordmgmt-card{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line,#e5e7eb);border-radius:16px;padding:14px;margin-bottom:10px;cursor:pointer;background:var(--card,#fff)}
.ordmgmt-card.sel{border-color:#f97316;background:#fff7ed;box-shadow:0 4px 14px rgba(249,115,22,.12)}
.ordmgmt-card input{margin-top:3px;accent-color:#f97316;width:18px;height:18px;flex-shrink:0;cursor:pointer}
.ordmgmt-card b{display:block;margin-bottom:4px;font-size:15px}
.ordmgmt-card .muted{line-height:1.45}
[data-theme="dark"] .ordmgmt-card.sel{background:rgba(249,115,22,.12)}
/* Quixotic para panel del conductor (PWA) */
.dqx-welcome{margin:2px 0 14px}
.dqx-hello{font-size:22px;font-weight:800;letter-spacing:-.02em}
.dqx-hello span{color:#16a34a}
.dqx-sub{color:#6b7280;font-size:13px;margin-top:2px}
/* SM Shop para panel de negocio (PWA) — verde suave + acento naranja */
.smb-welcome .dqx-hello span{color:#f97316}
.smb-welcome .dqx-sub{color:#9a6a3b}
/* Tarjetas 🔗 Compartir (negocio / conductor / cliente) */
#ff-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#111827;color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.3)}
#ff-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.share-panel-card{border-left:4px solid #cbd5e1}
.share-orange{border-left-color:#f97316}
.share-green{border-left-color:#16a34a}
.share-blue{border-left-color:#2563eb}

/* ---------- DRIVER MAP SCREEN (Uber-style, v76) ---------- */
#drv-mapwrap{position:relative;height:calc(100vh - var(--hdr-h) - var(--safe-t) - var(--nav-h) - var(--safe-b));height:calc(100dvh - var(--hdr-h) - var(--safe-t) - var(--nav-h) - var(--safe-b));min-height:440px;margin:-16px -16px calc(-1 * (var(--nav-h) + var(--safe-b) + 20px));overflow:hidden;background:#0f1115}
#drv-map{position:absolute;inset:0;background:#0f1115}
#drv-maptop{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:6;pointer-events:none}
#drv-maptop>*{pointer-events:auto}
.drv-topbtn{width:52px;height:52px;border-radius:50%;background:rgba(20,22,28,.92);color:#fff;border:1px solid rgba(255,255,255,.14);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);font-family:inherit}
#drv-earn-pill{background:rgba(20,22,28,.92);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:12px 22px;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap;font-family:inherit}
#drv-shieldbtn{position:absolute;left:12px;bottom:200px;z-index:6}
#drv-sidebtns{position:absolute;right:12px;bottom:200px;z-index:6;display:flex;flex-direction:column;gap:12px}
#drv-go-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:104px;z-index:9;width:96px;height:96px;border-radius:50%;background:#1a73e8;border:3px solid rgba(255,255,255,.35);color:#fff;font-size:15px;font-weight:800;letter-spacing:.5px;cursor:pointer;box-shadow:0 6px 22px rgba(26,115,232,.5);font-family:inherit}
#drv-go-btn.online{background:#b3261e;box-shadow:0 8px 28px rgba(179,38,30,.5)}
#drv-go-btn:disabled{opacity:.55;cursor:default}
/* Long labels (DESCONECTAR/INTERROMPI/…) must fit the circle in all languages */
#drv-go-btn{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px;line-height:1.25;overflow:hidden}
#drv-go-btn.online{width:104px;height:104px;font-size:12px;letter-spacing:.3px}
/* While turn-by-turn navigation is active, hide the trip data sheet content —
   the navbar carries the ETA plus our own action buttons (step + cancel).
   The 5-minute no-show timer stays visible. */
#drv-maptrip.drv-navigating #drv-tripsheet .card,
#drv-maptrip.drv-navigating #drv-tripsheet .tsheet-title,
#drv-maptrip.drv-navigating #drv-tripsheet .btn{display:none}
#drv-navbar .nbb-info{flex:1;min-width:0}
#drv-navbar .nbb-step{width:auto;margin:0;padding:12px 18px;font-size:15px;white-space:nowrap;flex:0 0 auto}
#drv-navbar .nbb-exitbtn{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:16px;cursor:pointer;font-family:inherit}
#drv-navbar .nbb-cancel{width:100%;margin:8px 0 0;padding:9px;color:#fca5a5;border-color:rgba(220,38,38,.45);font-size:14px}
#drv-statusbar{position:absolute;left:0;right:0;bottom:0;z-index:8;background:rgba(18,20,26,.97);border-top:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px calc(12px + var(--safe-b));color:#fff}
#drv-statusbar .drv-icobtn{background:none;border:0;color:#cfd3da;font-size:24px;cursor:pointer;padding:8px;font-family:inherit}
#drv-status-text{font-size:18px;font-weight:700;text-align:center;flex:1}
#drv-reqsheet{position:absolute;left:0;right:0;bottom:0;z-index:7;max-height:48%;overflow-y:auto;padding:6px 12px calc(78px + var(--safe-b));pointer-events:none;background:linear-gradient(to top,rgba(10,12,16,.88),transparent)}
#drv-reqsheet>*{pointer-events:none}
#drv-reqsheet .drv-reqcard,#drv-reqsheet .card{pointer-events:auto}
/* Incoming LIVE offer takes over the bottom of the map screen (bug 20-oct-2026:
   the GO/STOP circle — z-index 9 at bottom:104px — floated over the z-7 request
   sheet and covered the middle of the order card, incl. the Accept button).
   While a live (non-scheduled) request card is on screen, the sheet rises
   above the status bar and the circle is hidden; it returns when the offer is
   accepted, rejected or expired. Scheduled cards (.rq-sched) never trigger
   this — they are not urgent. The .has-live-req class is synced by
   drvSyncGoBtn() in app.js; the :has() rules keep it correct on every DOM
   change in modern webviews. */
#drv-mapwrap.has-live-req #drv-reqsheet{z-index:9}
#drv-mapwrap.has-live-req #drv-go-btn{display:none}
#drv-mapwrap:has(#drv-requests .drv-reqcard:not(.rq-sched)) #drv-reqsheet{z-index:9}
#drv-mapwrap:has(#drv-requests .drv-reqcard:not(.rq-sched)) #drv-go-btn{display:none}
#drv-trip-banner{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:calc(var(--nav-h) + var(--safe-b));z-index:21;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;font-weight:800;font-size:14px;text-align:center;padding:11px 12px;cursor:pointer;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.drv-reqcard{background:#fff;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.45);padding:12px;margin-bottom:10px;color:#111}
.drv-reqcard .rq-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.rq-title{display:flex;align-items:center;gap:8px}
.rq-type{display:inline-flex;align-items:center;font-weight:800;font-size:12px;padding:6px 12px;border-radius:999px;letter-spacing:.2px}
.rq-type-taxi{background:#dcfce7;color:#15803d}
.rq-type-food{background:#ffedd5;color:#c2410c}
.rq-num{font-size:14px;color:#111;font-weight:800}
.rq-count{font-weight:800;font-size:14px;color:#b3261e;background:#fdeceb;border-radius:999px;padding:5px 12px;white-space:nowrap;box-shadow:inset 0 0 0 1px #f5c6c2}
.rq-route{position:relative;margin:2px 0 10px;padding:2px 0 2px 2px}
.rq-route::before{content:'';position:absolute;left:8px;top:24px;bottom:24px;width:2px;background:#e5e7eb;border-radius:2px}
.rq-stop{display:flex;gap:10px;align-items:flex-start;padding:5px 0;position:relative}
.rq-dot{width:14px;height:14px;border-radius:50%;margin-top:3px;flex-shrink:0;z-index:1}
.rq-dot-pick{background:#22c55e;box-shadow:0 0 0 5px #dcfce7}
.rq-dot-drop{background:#ef4444;border-radius:4px;box-shadow:0 0 0 5px #fee2e2}
.rq-addr{font-size:13px;font-weight:600;line-height:1.35;color:#1f2937}
.rq-sub{color:#6b7280;font-size:11.5px;font-weight:400}
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.rq-chip{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.rq-chip-top{font-size:13.5px;color:#111}
.rq-chip-top b{font-weight:800}
.rq-chip-lbl{color:#64748b;font-size:10.5px;font-weight:600}
.rq-chip-earn{background:#f0fdf4;border-color:#bbf7d0}
.rq-chip-earn .rq-chip-top b{color:#15803d;font-size:16px}
.rq-total2{font-size:12px;color:#6b7280;text-align:center;margin-bottom:8px}
.rq-total2 b{color:#111}
.rq-actions{display:flex;gap:8px;position:sticky;bottom:0;background:#fff;padding:8px 0 2px}
.rq-accept{flex:2.2;padding:13px;font-size:16px;font-weight:800;border-radius:14px;margin-top:0;font-family:inherit}
.rq-reject{flex:1;padding:13px;font-size:14px;border-radius:14px;margin-top:0;font-family:inherit}
.rq-empty{text-align:center;color:#fff;background:rgba(20,22,28,.85);border-radius:14px;padding:14px;font-size:14px;pointer-events:none}
#drv-maptrip{position:absolute;inset:0;z-index:10;background:#0f1115}
#drv-navmap{position:absolute;inset:0;background:#0f1115}
#drv-navstep{position:absolute;top:10px;left:12px;right:12px;z-index:11;background:rgba(20,22,28,.94);color:#fff;border-radius:14px;padding:10px 14px;font-size:14px;display:none;box-shadow:0 4px 14px rgba(0,0,0,.4)}
/* Google Maps-style navigation UI (Lester 18 oct 2026) */
#drv-navbanner{position:absolute;top:10px;left:12px;right:12px;z-index:12;background:#0d6e5f;color:#fff;border-radius:16px;padding:12px 16px;display:none;box-shadow:0 4px 16px rgba(0,0,0,.45)}
#drv-navbanner .nb-main{display:flex;align-items:center;gap:14px}
#drv-navbanner .nb-arrow{font-size:36px;line-height:1;flex:0 0 auto}
#drv-navbanner .nb-street{font-size:20px;font-weight:700;line-height:1.3}
#drv-navbanner .nb-next{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;display:flex;align-items:center;gap:8px}
#drv-navbar{position:absolute;left:12px;right:12px;bottom:12px;z-index:12;background:rgba(18,20,26,.96);color:#fff;border-radius:18px;padding:12px 16px;display:none;box-shadow:0 4px 16px rgba(0,0,0,.45)}
#drv-navbar .nbb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#drv-navbar .nbb-eta{font-size:30px;font-weight:800;color:#4ade80;line-height:1.1}
#drv-navbar .nbb-sub{font-size:14px;color:#d1d5db;margin-top:2px}
#drv-navexit{background:#dc2626;color:#fff;border:none;border-radius:999px;padding:12px 28px;font-size:16px;font-weight:800;cursor:pointer}
#drv-navspeed{position:absolute;left:12px;bottom:118px;z-index:12;background:rgba(18,20,26,.92);color:#fff;border-radius:12px;padding:8px 14px;font-size:12px;display:none;text-align:center;line-height:1.3}
#drv-navspeed b{font-size:18px;display:block}
#drv-navctl{position:absolute;right:12px;top:42%;z-index:12;display:none;flex-direction:column;gap:10px}
#drv-navctl button{width:48px;height:48px;border-radius:50%;border:none;background:rgba(18,20,26,.92);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#drv-tripsheet{position:absolute;left:0;right:0;bottom:0;z-index:11;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);padding:14px 16px calc(16px + var(--safe-b));max-height:54%;overflow-y:auto;color:#111}
#drv-tripsheet .btn{width:100%;padding:15px;font-size:16px;font-weight:800;border-radius:12px;margin-top:10px;font-family:inherit}
.drv-licbar{position:absolute;top:72px;left:12px;right:12px;z-index:7}
.drv-docbar{position:absolute;left:12px;right:12px;bottom:240px;z-index:5}
.drv-sheet-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:8px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;color:#111}

/* ---------- DRIVER MAP: native-app polish (v76) ---------- */
#drv-mapwrap,#drv-mapwrap *{-webkit-tap-highlight-color:transparent}
#drv-mapwrap{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
#drv-mapwrap button{touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
/* Card entrance */
@keyframes drvCardIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.drv-reqcard{animation:drvCardIn .38s cubic-bezier(.22,.9,.3,1.12)}
/* Press states — instant tactile feedback */
#drv-go-btn{transition:transform .12s ease,background-color .25s ease,box-shadow .25s ease}
#drv-go-btn:active{transform:translateX(-50%) scale(.92)}
.drv-topbtn{transition:transform .12s ease,background-color .2s ease}
.drv-topbtn:active{transform:scale(.86)}
.rq-actions .btn{transition:transform .12s ease,filter .15s ease}
.rq-actions .btn:active{transform:scale(.95);filter:brightness(.93)}
#drv-statusbar .drv-icobtn{transition:transform .12s ease}
#drv-statusbar .drv-icobtn:active{transform:scale(.82)}
#drv-earn-pill{transition:transform .12s ease}
#drv-earn-pill:active{transform:scale(.94)}
.drv-sheet-row{transition:transform .12s ease,background-color .15s ease}
.drv-sheet-row:active{transform:scale(.98);background-color:#f1f5f9}
/* Skeleton loading */
@keyframes drvShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.drv-skel{pointer-events:none;border-radius:18px;height:168px;margin-bottom:10px;background:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.17) 50%,rgba(255,255,255,.07) 75%);background-size:800px 100%;animation:drvShimmer 1.4s infinite linear}
/* Trip sheet slide-up */
@keyframes drvSheetUp{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
#drv-tripsheet{animation:drvSheetUp .34s cubic-bezier(.2,.9,.3,1)}
/* Online pulse on the stop button */
@keyframes drvPulse{0%,100%{box-shadow:0 8px 28px rgba(179,38,30,.5)}50%{box-shadow:0 8px 36px rgba(179,38,30,.8)}}
#drv-go-btn.online{animation:drvPulse 2.2s infinite}
/* Status text fade on change */
#drv-status-text{transition:opacity .22s ease}
/* Countdown urgency */
.rq-count.urgent{color:#b3261e;background:#fdeceb;animation:drvBlink 1s infinite}
@keyframes drvBlink{50%{opacity:.55}}
/* Top pill + buttons: frosted glass */
#drv-maptop .drv-topbtn,#drv-earn-pill{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#drv-shieldbtn,#drv-sidebtns .drv-topbtn{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* Trip sheet buttons: native press */
#drv-tripsheet .btn{transition:transform .12s ease,filter .15s ease}
#drv-tripsheet .btn:active{transform:scale(.97);filter:brightness(.94)}
#drv-tripsheet .btn:disabled{opacity:.55}
/* Smooth step content swap */
#drv-tripsheet{transition:none}
@keyframes drvStepSwap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#drv-tripsheet > div:first-child{animation:drvStepSwap .25s ease}