/* Repartos BuyPal — herramienta de ruta.
   Identidad: consola de campo. Verde BuyPal de marca; el avance de la ruta
   es el elemento protagonista (se llena conforme se entrega). Todo lo demas,
   quieto y legible al sol, con dedos grandes. */
:root {
  --green:#0E6B54; --green-d:#0A5743; --tint:#E4F2EC; --mint:#7FE3C0;
  --ink:#16211D; --muted:#6A756F; --line:#E6E9E6; --bg:#EEF1EE; --surface:#FFF;
  --ok:#168F66; --no:#CF4242; --re:#C07A18; --pend:#8A938E;
  --tap:54px; --radius:16px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-text-size-adjust:100%; }

/* ---------- Header con avance ---------- */
header { position:sticky; top:0; z-index:20;
  background:linear-gradient(160deg,var(--green) 0%,var(--green-d) 100%);
  color:#fff; padding:14px 16px 12px; padding-top:calc(14px + env(safe-area-inset-top));
  box-shadow:0 2px 12px rgba(10,87,67,.18); }
.topbar { display:flex; align-items:baseline; justify-content:space-between; }
.topbar h1 { margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.fecha { font-size:13px; font-weight:500; opacity:.85; text-transform:capitalize; }
.track { margin-top:12px; height:8px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
.fill { height:100%; width:0; background:var(--mint); border-radius:99px;
  transition:width .5s cubic-bezier(.4,0,.2,1); }
.proglabel { margin-top:7px; font-size:13px; font-weight:600; }
.proglabel b { font-weight:700; }
.syncbar { margin-top:10px; font-size:12.5px; font-weight:500; padding:6px 11px;
  border-radius:9px; background:rgba(255,255,255,.16); display:inline-block; }
.syncbar.pend { background:var(--re); }
.syncbar.off  { background:var(--no); }

/* ---------- Tabs ---------- */
.tabs { position:sticky; top:0; z-index:15; display:flex; gap:4px;
  background:var(--surface); border-bottom:1px solid var(--line); padding:0 10px; }
.tab { flex:1; min-height:48px; border:0; background:none; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--muted);
  border-bottom:2.5px solid transparent; display:flex; align-items:center;
  justify-content:center; gap:7px; }
.tab.active { color:var(--green); border-bottom-color:var(--green); }
.tab .count { min-width:22px; height:22px; padding:0 6px; border-radius:99px;
  background:var(--line); color:var(--muted); font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; }
.tab.active .count { background:var(--re); color:#fff; }

/* ---------- Lista ---------- */
main { padding:14px 12px 40px; max-width:640px; margin:0 auto; }
.empty { color:var(--muted); text-align:center; padding:48px 16px; font-size:15px; line-height:1.5; }

.card { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:var(--radius); padding:14px 15px; margin-bottom:11px;
  box-shadow:0 1px 2px rgba(22,33,29,.04); transition:border-color .2s, transform .12s; }
.card.estado-Entregado     { border-left-color:var(--ok); }
.card.estado-Noentregado   { border-left-color:var(--no); }
.card.estado-Reprogramado  { border-left-color:var(--re); }
.card.flash { animation:flash 1.1s ease-out; }
@keyframes flash { from { background:var(--tint); } to { background:var(--surface); } }

.head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.name { font-weight:650; font-size:16px; line-height:1.25; }
.addr { color:var(--muted); font-size:13.5px; margin-top:3px; line-height:1.35; }
.monto { display:inline-block; margin-top:9px; padding:4px 10px; border-radius:9px;
  background:var(--tint); color:var(--green-d); font-weight:700; font-size:13.5px; }

.badge { flex:none; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:99px;
  color:#fff; white-space:nowrap; letter-spacing:.01em; }
.badge.Entregado { background:var(--ok); }
.badge.Noentregado { background:var(--no); }
.badge.Reprogramado { background:var(--re); }
.badge.Pendiente { background:var(--pend); }

/* Acciones (tarjeta pendiente o en edicion) */
.acciones { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.bs { min-height:var(--tap); border:1.5px solid var(--line); background:var(--surface);
  border-radius:12px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  line-height:1.15; padding:4px; transition:transform .1s; }
.bs:active { transform:scale(.97); }
.bs.sel { border-color:var(--green); background:var(--tint); color:var(--green-d); }

.detalle { margin-top:13px; display:flex; flex-direction:column; gap:11px; }
.detalle label { display:flex; flex-direction:column; gap:5px; font-size:12.5px;
  font-weight:600; color:var(--muted); }
.detalle input, .detalle select { min-height:var(--tap); font-size:16px; padding:0 13px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.detalle input:focus, .detalle select:focus { outline:none; border-color:var(--green); }
.confirm { min-height:var(--tap); background:var(--green); color:#fff; border:0;
  border-radius:12px; font-size:16px; font-weight:700; cursor:pointer; transition:opacity .15s; }
.confirm:active { opacity:.88; }

/* Tarjeta resuelta: resumen compacto + boton Cambiar */
.resumen { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:9px; }
.resumen .detalle-txt { font-size:13.5px; color:var(--muted); }
.cambiar { background:none; border:0; color:var(--green); font-size:13.5px;
  font-weight:700; cursor:pointer; padding:6px 2px; }
.cambiar:active { opacity:.7; }

.porsubir { margin-top:11px; font-size:12.5px; font-weight:600; color:var(--re);
  display:flex; align-items:center; gap:6px; }
.porsubir::before { content:""; width:7px; height:7px; border-radius:99px; background:var(--re); }

@media (prefers-reduced-motion:reduce) { *,.fill { transition:none !important; animation:none !important; } }

/* ---------- Trazabilidad: eyebrow, mapa, fecha reprogramada ---------- */
.eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px; }
.head-right { display:flex; align-items:center; gap:8px; flex:none; }
.mapa { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; background:var(--tint); color:var(--green-d); text-decoration:none; flex:none; }
.mapa:active { opacity:.7; }

.chip-fecha { display:inline-block; margin-top:11px; padding:6px 12px; border-radius:10px;
  background:#FBEFD8; color:#8A5512; font-weight:700; font-size:13.5px; }

.acciones-reprog { display:flex; gap:8px; margin-top:13px; }
.bs2 { flex:1; min-height:48px; border:1.5px solid var(--green); background:var(--surface);
  color:var(--green-d); border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; }
.bs2:active { transform:scale(.97); }
.bs2.ghost { border-color:var(--line); color:var(--muted); }

.subform { margin-top:13px; display:flex; flex-direction:column; gap:11px; }
.subform label { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--muted); }
.subform input, .subform select { min-height:var(--tap); font-size:16px; padding:0 13px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.subform input:focus, .subform select:focus { outline:none; border-color:var(--green); }

/* ---------- Distrito+direccion, telefono, badge "Para hoy" ---------- */
.loc { color:var(--ink); font-size:14px; margin-top:3px; line-height:1.35; }
.tel { display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 11px;
  border-radius:10px; background:var(--tint); color:var(--green-d); text-decoration:none;
  font-weight:600; font-size:14px; }
.tel:active { opacity:.7; }
.badge.Parahoy { background:var(--re); }

/* ---------- Tabs con 3 apartados (scroll horizontal si no caben) ---------- */
.tabs { overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:1 0 auto; white-space:nowrap; padding:0 14px; }

/* ---------- Eyebrow: OrderID + SKU, ojito ---------- */
.oid { font-weight:800; }
.sep { opacity:.5; }
.sku { font-weight:600; }
.ojo { background:none; border:0; padding:2px 4px; margin-left:3px; color:var(--muted);
  cursor:pointer; vertical-align:middle; display:inline-flex; }
.ojo:active { opacity:.6; }
.trunc { vertical-align:middle; }

/* ---------- Direccion + sin ubicacion ---------- */
.dirline { font-size:14px; color:var(--ink); margin-top:6px; line-height:1.35; }
.sinubic { font-size:12px; color:var(--no); margin-top:4px; font-weight:600; }
.mapa.off { background:#EFEFEC; color:#B7BBB6; position:relative; }
.mapa.off::after { content:""; position:absolute; left:7px; right:7px; top:50%; height:2px;
  background:#B7BBB6; transform:rotate(-45deg); border-radius:2px; }

/* ---------- Pagado ---------- */
.pagado { display:inline-block; margin-top:9px; padding:4px 11px; border-radius:9px;
  background:#E4F2EC; color:var(--ok); font-weight:700; font-size:13.5px; }

/* ---------- Cobro (mini columnas) + cobro en partes ---------- */
.cobro { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600;
  color:var(--ink); padding:4px 0; }
.check input { width:20px; height:20px; accent-color:var(--green); }
.nota { font-size:14px; color:var(--muted); background:var(--tint); padding:11px 13px;
  border-radius:10px; }

/* ---------- Liquidacion ---------- */
.liq { padding:4px 2px 20px; }
.liq-hero { background:linear-gradient(160deg,var(--green),var(--green-d)); color:#fff;
  border-radius:18px; padding:22px 20px; text-align:center; box-shadow:0 4px 16px rgba(10,87,67,.18); }
.liq-cap { font-size:13.5px; opacity:.9; }
.liq-monto { display:block; font-size:42px; font-weight:800; letter-spacing:-.02em; margin:6px 0 4px; }
.liq-sub { font-size:12.5px; opacity:.85; }
.liq-list { margin-top:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; }
.liq-row { display:flex; justify-content:space-between; padding:14px 16px; font-size:15px;
  border-bottom:1px solid var(--line); }
.liq-row:last-child { border-bottom:0; }
.liq-row span:last-child { font-weight:700; }
.liq-row.ef { background:#E4F2EC; }
.liq-row.ef span { color:var(--green-d); }
.liq-row.total { background:#FAFAF8; font-weight:700; }
.liq-meta { text-align:center; color:var(--muted); font-size:13px; margin-top:14px; }

/* ---------- FIX: 'hidden' debe ganar siempre (cobro en partes, subform, etc.) ---------- */
[hidden] { display: none !important; }

/* Date input oculto visualmente pero accionable (calendario nativo). */
.fecha-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---------- Admin: filtro de repartidores + chip ---------- */
.filtros { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none; }
.filtros::-webkit-scrollbar { display:none; }
.filtro { flex:none; min-height:38px; padding:0 16px; border:1.5px solid var(--line);
  background:var(--surface); border-radius:99px; font-size:14px; font-weight:600;
  color:var(--muted); cursor:pointer; white-space:nowrap; }
.filtro.sel { border-color:var(--green); background:var(--tint); color:var(--green-d); }
.repchip { font-size:11px; font-weight:700; padding:4px 8px; border-radius:99px;
  background:#EDEFEC; color:var(--muted); white-space:nowrap; }

/* ---------- Historial ---------- */
.hist-filtros { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px; margin-bottom:10px; display:flex; flex-direction:column; gap:9px; }
.hf-input { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; color:var(--ink); background:#fff; }
.hf-linea { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.hf-lbl { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.hf-chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 13px;
  font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
.hf-chip.sel { background:#0E6B54; border-color:#0E6B54; color:#fff; }
.hf-cuenta { margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:600; }
.hist-resumen { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.hr-item { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:10px 6px; text-align:center; }
.hr-item b { display:block; font-size:17px; color:var(--ink); }
.hr-item span { font-size:11px; color:var(--muted); }
.hr-item.ok b { color:var(--ok); }
.hr-item.no b { color:var(--no); }
.hr-item.re b { color:var(--re); }
.hp-cli { display:block; font-size:12.5px; color:var(--muted); }
.hist-dia { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  margin-bottom:10px; overflow:hidden; }
.hist-head { width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:15px 16px; background:none; border:0; cursor:pointer; text-align:left; }
.hist-head.abierto { border-bottom:1px solid var(--line); }
.hist-fecha { font-weight:700; font-size:15px; color:var(--ink); text-transform:capitalize; }
.hist-res { font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap; }
.hist-detalle { padding:14px 16px; }
.hist-detalle .liq-list { margin:0 0 14px; }
.hist-pedidos { display:flex; flex-direction:column; gap:0; }
.hist-ped { display:flex; justify-content:space-between; gap:10px; padding:9px 0;
  border-top:1px solid var(--line); font-size:14px; }
.hist-ped span:first-child { color:var(--ink); }
.hp-estado-Entregado { color:var(--ok); font-weight:600; }
.hp-estado-Noentregado { color:var(--no); font-weight:600; }
.hp-estado-Reprogramado { color:var(--re); font-weight:600; }
.hp-estado-Pendiente { color:var(--muted); }

/* ---------- Header: nombre del transportista + boton buscar ---------- */
.ttl { display:flex; flex-direction:column; gap:1px; }
.quien { font-size:13px; font-weight:600; opacity:.9; }
.topright { display:flex; align-items:center; gap:12px; }
.iconbtn { width:40px; height:40px; border-radius:11px; border:0; background:rgba(255,255,255,.16);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.iconbtn.on { background:#fff; color:var(--green-d); }
.iconbtn:active { opacity:.8; }

/* ---------- Barra de busqueda ---------- */
.buscador { position:sticky; top:0; z-index:14; background:var(--surface);
  border-bottom:1px solid var(--line); padding:10px 12px; }
.buscador input { width:100%; min-height:46px; font-size:16px; padding:0 14px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); }
.buscador input:focus { outline:none; border-color:var(--green); background:#fff; }

/* ---------- Historial: OrderID en cada pedido ---------- */
.hp-id { display:flex; flex-direction:column; gap:1px; font-weight:700; color:var(--ink); }
.hp-cli { font-weight:500; font-size:12.5px; color:var(--muted); }

/* ---------- Buscador global rediseñado ---------- */
.buscador { position:static; background:var(--surface); border-bottom:1px solid var(--line); padding:12px; }
.search-wrap { display:flex; align-items:center; gap:9px; background:var(--bg);
  border:1.5px solid var(--line); border-radius:13px; padding:0 13px; transition:border-color .15s, background .15s; }
.search-wrap:focus-within { border-color:var(--green); background:#fff; }
.search-ic { color:var(--muted); display:inline-flex; flex:none; }
.buscador input { flex:1; min-height:48px; font-size:16px; border:0; background:none; color:var(--ink); }
.buscador input:focus { outline:none; }
.qclear { flex:none; border:0; background:none; color:var(--muted); font-size:16px;
  cursor:pointer; padding:8px; line-height:1; }
.qclear:active { opacity:.6; }
.search-hint { font-size:12px; color:var(--muted); margin:8px 4px 0; }

.busq-count { color:var(--muted); font-size:13px; font-weight:600; margin:2px 2px 12px; }
.busq-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.busq-fecha { font-size:12.5px; font-weight:700; color:var(--green-d); text-transform:capitalize; }
.busq-foot { display:flex; align-items:center; gap:10px; margin-top:11px; }
.busq-detalle { margin-top:11px; font-size:13.5px; color:var(--muted);
  border-top:1px solid var(--line); padding-top:10px; }

/* En pantallas anchas (PC), el contenido queda centrado y comodo */
@media (min-width:700px) {
  .buscador { padding:14px 0; }
  main { padding-top:18px; }
}

/* ---------- Reordenar Ruta por arrastre ---------- */
.grip { color:var(--muted); opacity:.45; display:inline-flex; align-items:center;
  touch-action:none; cursor:grab; }
#sortable .card { touch-action:pan-y; transition:box-shadow .12s ease; }
.card.drag { box-shadow:0 12px 30px rgba(0,0,0,.22); opacity:.97; transform:scale(1.01);
  cursor:grabbing; }
.card-ph { border:2px dashed var(--green); border-radius:16px; margin-bottom:11px;
  background:rgba(15,110,84,.05); }

/* ===== Navegación: hamburguesa (móvil) + pestañas (desktop) ===== */
.hamb { display:none; width:40px; height:40px; margin-right:6px; border:0; border-radius:11px;
  background:rgba(255,255,255,.16); color:#fff; align-items:center; justify-content:center; cursor:pointer; }
.hamb:active { opacity:.8; }
.topbar { display:flex; align-items:center; gap:10px; }

.aparbar { display:none; width:100%; align-items:center; gap:10px; background:var(--surface);
  border:0; border-bottom:1px solid var(--line); padding:13px 16px; font-size:16px; font-weight:700;
  color:var(--ink); cursor:pointer; }
.aparbar .menu-ic { color:var(--green); display:inline-flex; }
.aparbar .count { background:var(--tint); color:var(--green-d); }

/* Drawer */
.drawer { position:fixed; inset:0; z-index:60; }
.drawer-bg { position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:opacity .22s; }
.drawer.open .drawer-bg { opacity:1; }
.drawer-panel { position:absolute; top:0; left:0; bottom:0; width:80%; max-width:330px;
  background:var(--surface); box-shadow:3px 0 24px rgba(0,0,0,.22); padding:20px 14px;
  transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px; }
.drawer.open .drawer-panel { transform:translateX(0); }
.drawer-tit { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; padding:4px 12px 10px; }
.drawer-item { display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:52px; padding:0 16px; border:0; border-radius:12px; background:none;
  font-size:16px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; }
.drawer-item.active { background:var(--tint); color:var(--green-d); }
.drawer-item .count { background:var(--line); color:var(--muted); }
.drawer-item.active .count { background:var(--green); color:#fff; }

@media (max-width:640px) {
  .hamb { display:inline-flex; }
  .tabs { display:none !important; }
  .aparbar { display:flex; }
}

/* ===== Arrastre estilo Notion: mango a la izquierda, ítem transparente ===== */
.grip { display:none; }                              /* se reemplaza por el mango lateral */
#sortable .card { touch-action:auto; }
.card.has-handle { padding-left:40px; position:relative; }
.drag-handle { position:absolute; left:4px; top:0; bottom:0; width:30px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  opacity:.4; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.drag-handle:hover { opacity:.75; }
.drag-handle:active { cursor:grabbing; }
.card.drag { opacity:.55; box-shadow:0 14px 34px rgba(0,0,0,.22); cursor:grabbing; }
.card-ph { border:2px dashed var(--green); border-radius:16px; margin-bottom:11px;
  background:rgba(15,110,84,.06); }
body.arrastrando { user-select:none; -webkit-user-select:none; }

/* Chips de turno */
.turno-chip { font-size:10px; font-weight:700; padding:2px 8px; border-radius:6px; text-transform:uppercase; }
.turno-chip.turno-M { background:#FEF3C7; color:#B45309; }
.turno-chip.turno-T { background:#DBEAFE; color:#1D4ED8; }
.filtros-turno { margin-top:6px; align-items:center; gap:6px; }
.filtro-lbl { font-size:12px; font-weight:700; color:#6B7280; margin-right:2px; }
.filtro-turno { padding:6px 14px; border:1.5px solid #E5E7EB; border-radius:16px; background:#fff; font-size:12px; font-weight:600; color:#6B7280; cursor:pointer; }
.filtro-turno.sel { background:#0E6B54; color:#fff; border-color:#0E6B54; }
.bloqueado-tag { font-size:12px; font-weight:700; color:#128C3E; }