/* Fénix ERP · Pedidos de Ruta v3 (2026-10-02)
   Tabla operativa + Flujo sobre el MISMO componente y los mismos datos.
   Tokens propios del módulo para tema oscuro (por defecto) y claro (.light);
   se apoyan en los tokens globales --ops-* del ERP cuando existen.
   Solo presentación: no hay lógica aquí. */

.pr3{
  --pr3-bg:var(--ops-bg,#070C17);
  --pr3-surface:var(--ops-card,#0E1626);
  --pr3-surface-2:#121C2E;
  --pr3-hover:rgba(255,255,255,.035);
  --pr3-line:var(--ops-line,rgba(255,255,255,.07));
  --pr3-line-strong:var(--ops-line-strong,rgba(255,255,255,.12));
  --pr3-text:var(--ops-text,#EEF2F8);
  --pr3-soft:var(--ops-soft,#C3CCDB);
  --pr3-sub:var(--ops-sub,#8C97AB);
  --pr3-muted:var(--ops-muted,#66728A);
  --pr3-orange:#FF7A1A;
  --pr3-orange-soft:rgba(255,122,26,.13);
  --pr3-focus:0 0 0 2px rgba(255,122,26,.55);
  --pr3-shadow:0 1px 2px rgba(0,0,0,.25);
  --pr3-row-sel:rgba(59,130,246,.08);
  /* estados: fondo suave + texto legible; nunca solo color (siempre ícono + texto) */
  --pr3-pend-fg:#FBBF24;--pr3-pend-bg:rgba(245,158,11,.13);
  --pr3-prep-fg:#7DB4FF;--pr3-prep-bg:rgba(59,130,246,.15);
  --pr3-listo-fg:#67E8F9;--pr3-listo-bg:rgba(6,182,212,.13);
  --pr3-ruta-fg:#4ADE80;--pr3-ruta-bg:rgba(34,197,94,.13);
  --pr3-ent-fg:#86EFAC;--pr3-ent-bg:rgba(22,163,74,.16);
  --pr3-repro-fg:#FCD34D;--pr3-repro-bg:rgba(234,179,8,.12);
  --pr3-canc-fg:#FCA5A5;--pr3-canc-bg:rgba(239,68,68,.13);
  --pr3-alert-fg:#FDA4AF;
  --pr3-neutral-fg:#A8B3C7;--pr3-neutral-bg:rgba(148,163,184,.12);
  position:relative;padding:22px 22px 28px;min-height:100%;background:var(--pr3-bg);color:var(--pr3-text);
}
.light .pr3{
  --pr3-surface:#FFFFFF;
  --pr3-surface-2:#F4F6FA;
  --pr3-hover:rgba(15,23,42,.03);
  --pr3-orange:#E8620A;
  --pr3-orange-soft:rgba(255,116,23,.10);
  --pr3-focus:0 0 0 2px rgba(232,98,10,.45);
  --pr3-shadow:0 1px 2px rgba(24,39,75,.06),0 4px 14px rgba(24,39,75,.04);
  --pr3-row-sel:rgba(59,130,246,.07);
  --pr3-pend-fg:#B45309;--pr3-pend-bg:#FEF3C7;
  --pr3-prep-fg:#1D4ED8;--pr3-prep-bg:#DBEAFE;
  --pr3-listo-fg:#0E7490;--pr3-listo-bg:#CFFAFE;
  --pr3-ruta-fg:#15803D;--pr3-ruta-bg:#DCFCE7;
  --pr3-ent-fg:#166534;--pr3-ent-bg:#D1FAE5;
  --pr3-repro-fg:#A16207;--pr3-repro-bg:#FEF9C3;
  --pr3-canc-fg:#B91C1C;--pr3-canc-bg:#FEE2E2;
  --pr3-alert-fg:#BE123C;
  --pr3-neutral-fg:#475569;--pr3-neutral-bg:#EEF2F7;
}
.pr3 *{box-sizing:border-box}
.pr3 button,.pr3 select,.pr3 input{font-family:inherit}
.pr3 :focus-visible{outline:none;box-shadow:var(--pr3-focus);border-radius:8px}

/* ---------- cabecera ---------- */
.pr3-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pr3-head__title{display:flex;align-items:center;gap:13px;min-width:0}
.pr3-head__icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--pr3-orange-soft);flex-shrink:0}
.pr3-head__icon img{width:28px;height:24px;object-fit:contain}
.pr3-head h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--pr3-text)}
.pr3-head p{margin:2px 0 0;font-size:12.5px;color:var(--pr3-sub)}
.pr3-head__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.pr3-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 13px;border-radius:10px;border:1px solid var(--pr3-line-strong);background:var(--pr3-surface);color:var(--pr3-soft);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.pr3-btn:hover{background:var(--pr3-surface-2);border-color:var(--pr3-line-strong)}
.pr3-btn:disabled{opacity:.5;cursor:not-allowed}
.pr3-btn--primary{background:var(--pr3-orange);border-color:transparent;color:#fff}
.pr3-btn--primary:hover{background:var(--pr3-orange);filter:brightness(1.07)}
.pr3-btn--ghost{background:transparent;border-color:transparent;color:var(--pr3-sub)}
.pr3-btn--ghost:hover{background:var(--pr3-hover);color:var(--pr3-text)}
.pr3-btn--icon{width:36px;padding:0}
.pr3-btn i{font-size:12px}
.pr-refresh-spin{animation:pr3-spin 0.9s linear infinite}
@keyframes pr3-spin{to{transform:rotate(360deg)}}

/* ---------- avisos (acceso directo, offline) ---------- */
.pr3-aviso{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:12px;background:var(--pr3-orange-soft);color:var(--pr3-orange);font-size:12.5px;font-weight:700}
.pr3-aviso button{border:none;background:transparent;color:inherit;font-weight:800;cursor:pointer;padding:4px 6px}

/* ---------- KPIs ---------- */
.pr3-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.pr3-kpi{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--pr3-surface);box-shadow:var(--pr3-shadow);border:1px solid var(--pr3-line);min-width:0}
/* v3.2: las tarjetas son accesos directos (botones). */
button.pr3-kpi{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
button.pr3-kpi:hover{border-color:var(--pr3-orange)}
button.pr3-kpi:focus-visible{outline:2px solid var(--pr3-orange);outline-offset:2px}
button.pr3-kpi.is-activo{border-color:var(--pr3-orange);box-shadow:0 0 0 1px var(--pr3-orange),var(--pr3-shadow);background:var(--pr3-orange-soft)}
.pr3-grupo{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--pr3-orange);background:var(--pr3-orange-soft);color:var(--pr3-orange);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.pr3-kpi__icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.pr3-kpi__label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pr3-sub)}
.pr3-kpi__value{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:3px}
.pr3-kpi__value b{font-size:22px;font-weight:850;line-height:1;color:var(--pr3-text)}
.pr3-kpi__value span{font-size:13px;font-weight:700;color:var(--pr3-soft)}
.pr3-kpi__cap{font-size:11px;color:var(--pr3-muted);margin-top:3px}
.pr3-kpi--pendientes .pr3-kpi__icon{background:var(--pr3-pend-bg);color:var(--pr3-pend-fg)}
.pr3-kpi--preparacion .pr3-kpi__icon{background:var(--pr3-prep-bg);color:var(--pr3-prep-fg)}
.pr3-kpi--ruta .pr3-kpi__icon{background:var(--pr3-ruta-bg);color:var(--pr3-ruta-fg)}
.pr3-kpi--total .pr3-kpi__icon{background:var(--pr3-orange-soft);color:var(--pr3-orange)}

/* ---------- filtros ---------- */
.pr3-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border-radius:14px;background:var(--pr3-surface);border:1px solid var(--pr3-line);box-shadow:var(--pr3-shadow);margin-bottom:10px}
.pr3-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--pr3-line-strong);background:transparent;color:var(--pr3-sub);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pr3-toggle[aria-pressed="true"]{background:var(--pr3-orange-soft);border-color:transparent;color:var(--pr3-orange)}
.pr3-switch{width:28px;height:16px;border-radius:99px;background:var(--pr3-line-strong);position:relative;flex-shrink:0;transition:background .15s}
.pr3-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}
.pr3-toggle[aria-pressed="true"] .pr3-switch{background:var(--pr3-orange)}
.pr3-toggle[aria-pressed="true"] .pr3-switch::after{transform:translateX(12px)}
.pr3-campo{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--pr3-line-strong);background:transparent;color:var(--pr3-soft);min-width:0}
.pr3-campo.is-activo{border-color:var(--pr3-orange);background:var(--pr3-orange-soft)}
.pr3-campo i{font-size:12px;color:var(--pr3-muted)}
.pr3-campo.is-activo i{color:var(--pr3-orange)}
.pr3-campo select,.pr3-campo input{border:none;outline:none;background:transparent;color:var(--pr3-text);font-size:12.5px;min-width:0;max-width:190px;cursor:pointer}
.pr3-campo input{cursor:text}
.pr3-campo select option{color:#0B1533}
.pr3-campo--buscar{flex:1 1 220px}
.pr3-campo--buscar input{width:100%;max-width:none}
.pr3-filtros .fld{min-height:36px;padding:7px 10px;font-size:12.5px;border-radius:10px;background:transparent;border-color:var(--pr3-line-strong);color:var(--pr3-text)}
.pr3-filtros__fin{display:flex;gap:6px;margin-left:auto;align-items:center}
.pr3-filtros__toggle{display:none!important}

/* ---------- barra de selección / vista ---------- */
.pr3-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:40px;margin-bottom:10px}
.pr3-barra__info{font-size:12.5px;color:var(--pr3-sub)}
.pr3-barra__info b{color:var(--pr3-text)}
.pr3-sel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px 6px 12px;border-radius:12px;background:var(--pr3-prep-bg);color:var(--pr3-text)}
.pr3-sel__txt{font-size:13px;font-weight:800}
.pr3-sel__txt span{color:var(--pr3-sub);font-weight:700;margin:0 4px}
.pr3-sel select{min-height:32px;border-radius:9px;border:1px solid var(--pr3-line-strong);background:var(--pr3-surface);color:var(--pr3-text);font-size:12px;padding:0 8px}
.pr3-sel .pr3-btn{min-height:32px}
.pr3-vistas{display:inline-flex;padding:3px;border-radius:11px;background:var(--pr3-surface);border:1px solid var(--pr3-line);margin-left:auto}
.pr3-vistas button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:none;border-radius:8px;background:transparent;color:var(--pr3-sub);font-size:12.5px;font-weight:700;cursor:pointer}
.pr3-vistas button[aria-pressed="true"]{background:var(--pr3-orange-soft);color:var(--pr3-orange)}

/* ---------- tabla ---------- */
.pr3-tabla-wrap{border-radius:14px;background:var(--pr3-surface);border:1px solid var(--pr3-line);box-shadow:var(--pr3-shadow);overflow:auto}
.pr3-tabla{width:100%;border-collapse:collapse;font-size:13px;min-width:980px}
.pr3-tabla th{position:sticky;top:0;z-index:1;background:var(--pr3-surface);padding:11px 10px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pr3-muted);text-align:left;border-bottom:1px solid var(--pr3-line);white-space:nowrap}
.pr3-tabla th.num,.pr3-tabla td.num{text-align:right}
.pr3-tabla td{padding:10px;border-bottom:1px solid var(--pr3-line);vertical-align:middle}
.pr3-tabla tbody tr.pr-row{cursor:pointer;transition:background .12s}
.pr3-tabla tbody tr.pr-row:hover{background:var(--pr3-hover)!important}
.pr3-tabla tbody tr.pr-row[data-sel="1"]{background:var(--pr3-row-sel)}
.pr3-tabla tbody tr.pr-row[data-abierto="1"]{background:var(--pr3-hover)}
.pr3-check{width:16px;height:16px;accent-color:var(--pr3-orange);cursor:pointer}
.pr3-folio{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;padding:2px 0;color:var(--pr3-sub);font-size:12px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;white-space:nowrap}
.pr3-folio:hover{color:var(--pr3-orange)}
.pr3-folio i{font-size:9px;opacity:.7}
.pr3-cliente{font-weight:800;font-size:13.5px;color:var(--pr3-text);line-height:1.25}
.pr3-cliente.is-link{cursor:pointer}
.pr3-cliente.is-link:hover{text-decoration:underline;text-underline-offset:3px}
.pr3-sec{font-size:11.5px;color:var(--pr3-sub);margin-top:2px}
.pr3-dim{color:var(--pr3-sub)}
.pr3-persona{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--pr3-soft);font-size:12.5px;white-space:nowrap}
.pr3-persona__nombre{overflow:hidden;text-overflow:ellipsis;max-width:130px}
.pr3-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:9.5px;font-weight:850;letter-spacing:.02em;background:var(--pr3-neutral-bg);color:var(--pr3-neutral-fg)}
/* Repartidor con color propio (2026-10-05) */
.pr3-rep{position:relative;isolation:isolate;padding:3px 11px 3px 3px;border-radius:999px;color:var(--pr3-rc)!important;font-weight:800;gap:7px}
.pr3-rep::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pr3-rc);opacity:.16;z-index:-1}
.pr3-rep::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--pr3-rc);opacity:.45;pointer-events:none}
.pr3-rep .pr3-rep__av{background:var(--pr3-rc);color:#0B1220}
.light .pr3-rep{color:var(--pr3-rc-d)!important}
.light .pr3-rep::before,.light .pr3-rep .pr3-rep__av{background:var(--pr3-rc-d)}
.light .pr3-rep::after{border-color:var(--pr3-rc-d)}
.light .pr3-rep .pr3-rep__av{color:#fff}
.pr3-sinasignar{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--pr3-muted);font-weight:650;white-space:nowrap}
.pr3-sinasignar.is-alerta{color:var(--pr3-alert-fg);font-weight:750}
.pr3-link{border:none;background:transparent;color:var(--pr3-orange);font-size:12px;font-weight:800;cursor:pointer;padding:2px 4px;white-space:nowrap}
.pr3-piezas{color:var(--pr3-soft);font-variant-numeric:tabular-nums}
.pr3-importe{font-weight:800;font-size:13.5px;color:var(--pr3-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr3-fecha{line-height:1.25;white-space:nowrap}
.pr3-fecha b{display:block;font-size:12.5px;font-weight:700;color:var(--pr3-soft)}
.pr3-fecha span{font-size:11.5px;color:var(--pr3-sub);font-variant-numeric:tabular-nums}

/* estado */
.pr3 .pr-status-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pr3 .pr3-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:none;font-size:11.5px;font-weight:800;white-space:nowrap}
.pr3 .pr3-badge i{font-size:11px}
.pr3-st--pendiente{background:var(--pr3-pend-bg)!important;color:var(--pr3-pend-fg)!important}
.pr3-st--preparacion{background:var(--pr3-prep-bg)!important;color:var(--pr3-prep-fg)!important}
.pr3-st--listo{background:var(--pr3-listo-bg)!important;color:var(--pr3-listo-fg)!important}
.pr3-st--ruta{background:var(--pr3-ruta-bg)!important;color:var(--pr3-ruta-fg)!important}
.pr3-st--entregado{background:var(--pr3-ent-bg)!important;color:var(--pr3-ent-fg)!important}
.pr3-st--reprogramado{background:var(--pr3-repro-bg)!important;color:var(--pr3-repro-fg)!important}
.pr3-st--cancelado{background:var(--pr3-canc-bg)!important;color:var(--pr3-canc-fg)!important}
.pr3-st--asignado{background:var(--pr3-orange-soft)!important;color:var(--pr3-orange)!important}
.pr3-alertas{display:flex;flex-wrap:wrap;gap:4px 8px}
.pr3-alerta{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:750;color:var(--pr3-sub);white-space:nowrap}
.pr3-alerta--repartidor,.pr3-alerta--inventario{color:var(--pr3-alert-fg)}

/* acciones */
.pr3-acciones{display:flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
.pr3 .pr3-accion{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;min-width:96px;margin:0;padding:0 12px;border-radius:9px;border:1px solid var(--pr3-line-strong);background:transparent;color:var(--pr3-soft);font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.pr3 .pr3-accion:hover{background:var(--pr3-hover)}
.pr3 .pr3-accion i{margin:0;font-size:11px}
.pr3 .pr3-accion--preparar{background:var(--pr3-prep-bg);border-color:transparent;color:var(--pr3-prep-fg)}
.pr3 .pr3-accion--asignar{background:var(--pr3-orange-soft);border-color:transparent;color:var(--pr3-orange)}
.pr3 .pr3-accion--entrega{background:var(--pr3-ruta-bg);border-color:transparent;color:var(--pr3-ruta-fg)}
.pr3 .pr3-accion--ruta{background:var(--pr3-ruta-bg);border-color:transparent;color:var(--pr3-ruta-fg)}
.pr3-menu{position:relative}
.pr3-menu__lista{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:210px;padding:5px;border-radius:12px;background:var(--pr3-surface);border:1px solid var(--pr3-line-strong);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.light .pr3-menu__lista{box-shadow:0 12px 32px rgba(24,39,75,.16)}
.pr3-menu__lista button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:none;border-radius:8px;background:transparent;color:var(--pr3-text);font-size:12.5px;font-weight:650;text-align:left;cursor:pointer}
.pr3-menu__lista button:hover,.pr3-menu__lista button:focus-visible{background:var(--pr3-hover)}
.pr3-menu__lista button i{width:15px;text-align:center;color:var(--pr3-sub)}

/* detalle desplegado */
.pr3-detalle td{background:var(--pr3-hover);padding:8px 16px 14px}
.pr3-linea{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--pr3-line);font-size:12.5px;color:var(--pr3-soft)}
.pr3-linea:last-of-type{border-bottom:none}
.pr3-linea__foto{width:28px;height:28px;border-radius:7px;background:var(--pr3-surface-2);overflow:hidden;display:grid;place-items:center;flex-shrink:0;font-size:13px}
.pr3-linea__foto img{width:100%;height:100%;object-fit:cover}
.pr3-linea span{flex:1}
.pr3-linea b{color:var(--pr3-text)}

/* detalle al tocar un pedido (tabla y flujo) */
.pr3-det{display:flex;flex-direction:column;gap:0;padding:4px 0 2px;cursor:default}
.pr3-linea__cant{font-variant-numeric:tabular-nums}
.pr3-det__total{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0 4px;margin-top:2px;border-top:1px dashed var(--pr3-line-strong);font-size:12.5px;color:var(--pr3-sub)}
.pr3-det__total b{font-size:14px;color:var(--pr3-text)}
.pr3-det__acciones{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* v3.3: acciones arriba de los productos; en escritorio no hacen falta
   la etiqueta ni el botón de desplegar dentro de la celda de repartidor. */
.pr3-det__acciones--top{margin:0 0 8px}
.pr3-det__titulo{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pr3-sub);padding:2px 0 4px}
.pr3-movil-label,.pr3-movil-toggle{display:none}
.pr3-tarjeta{cursor:pointer}
.pr3-tarjeta[data-abierto="1"]{border-color:var(--pr3-line-strong);box-shadow:0 0 0 1px var(--pr3-line-strong)}
.pr3-tarjeta .pr3-det{margin:2px 0 8px;padding:8px 10px;border-radius:10px;background:var(--pr3-hover)}
.pr3-seltodos{margin-left:8px;min-height:30px}

/* vacío, paginación, impresión */
.pr3-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 16px;text-align:center;color:var(--pr3-sub);font-size:13px;font-weight:600}
.pr3-vacio img{width:160px;height:auto;opacity:.9}
.pr3-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--pr3-sub)}
.pr3-pag{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pr3-pag button{min-width:32px;min-height:32px;padding:0 9px;border-radius:9px;border:1px solid var(--pr3-line);background:var(--pr3-surface);color:var(--pr3-soft);font-weight:700;cursor:pointer}
.pr3-pag button[aria-current="page"]{background:var(--pr3-orange);border-color:transparent;color:#fff}
.pr3-pag button:disabled{opacity:.45;cursor:not-allowed}
.pr3-pag select{min-height:32px;border-radius:9px;border:1px solid var(--pr3-line);background:var(--pr3-surface);color:var(--pr3-text);padding:0 8px;font-size:12px}
.pr3-resumen{margin-top:16px;border-radius:14px;background:var(--pr3-surface);border:1px solid var(--pr3-line)}
.pr3-resumen>button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 16px;border:none;background:transparent;color:var(--pr3-text);font-size:13px;font-weight:750;cursor:pointer;text-align:left}
.pr3-resumen>div{padding:0 16px 16px}

/* ---------- flujo ---------- */
.pr3-flujo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.pr3-col{border-radius:14px;background:var(--pr3-surface-2);border:1px solid var(--pr3-line);min-width:0;display:flex;flex-direction:column;max-height:calc(100vh - 220px)}
.light .pr3-col{background:#EEF2F7}
.pr3-col__head{padding:12px 12px 10px;border-bottom:1px solid var(--pr3-line)}
.pr3-col__titulo{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850;color:var(--pr3-text)}
.pr3-col__punto{width:8px;height:8px;border-radius:50%}
.pr3-col--pendientes .pr3-col__punto{background:var(--pr3-pend-fg)}
.pr3-col--preparacion .pr3-col__punto{background:var(--pr3-prep-fg)}
.pr3-col--ruta .pr3-col__punto{background:var(--pr3-ruta-fg)}
.pr3-col--cerrados .pr3-col__punto{background:var(--pr3-ent-fg)}
.pr3-col__meta{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--pr3-sub)}
.pr3-col__meta b{color:var(--pr3-text);font-variant-numeric:tabular-nums}
.pr3-col__cuerpo{padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.pr3-col__vacio{padding:18px 8px;text-align:center;font-size:12px;color:var(--pr3-muted)}
.pr3-col__mas{border:none;background:transparent;color:var(--pr3-orange);font-weight:800;font-size:12px;padding:8px;cursor:pointer}
.pr3-tarjeta{padding:11px 12px;border-radius:12px;background:var(--pr3-surface);border:1px solid var(--pr3-line);box-shadow:var(--pr3-shadow)}
.pr3-tarjeta[data-sel="1"]{border-color:var(--pr3-prep-fg)}
.pr3-tarjeta__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pr3-tarjeta__cliente{margin:5px 0 7px;font-size:14px;font-weight:850;line-height:1.25;color:var(--pr3-text);overflow-wrap:anywhere}
.pr3-tarjeta__datos{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11.5px;color:var(--pr3-sub)}
.pr3-tarjeta__datos dt{color:var(--pr3-muted)}
.pr3-tarjeta__datos dd{margin:0;color:var(--pr3-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr3-tarjeta__datos dd.is-alerta{color:var(--pr3-alert-fg);font-weight:700}
.pr3-tarjeta__nums{display:flex;justify-content:space-between;align-items:baseline;margin:9px 0;gap:8px}
.pr3-tarjeta__nums .pr3-importe{font-size:15px}
.pr3-tarjeta__nums small{font-size:11.5px;color:var(--pr3-sub)}
.pr3-tarjeta__acciones{display:flex;align-items:center;gap:6px}
.pr3-tarjeta__acciones .pr3-accion{flex:1}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pr3-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr3-flujo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr3-col{max-height:none}
}
@media (max-width:760px){
  .pr3{padding:14px 12px 22px}
  .pr3-head h2{font-size:18px}
  .pr3-head__actions{width:100%}
  .pr3-head__actions .pr3-btn span{display:none}
  .pr3-head__actions .pr3-btn--primary span{display:inline}
  .pr3-kpi{padding:11px 12px;gap:10px}
  .pr3-kpi__icon{width:32px;height:32px}
  .pr3-kpi__value b{font-size:18px}
  .pr3-kpi__cap{display:none}
  .pr3-filtros{gap:6px}
  .pr3-campo select{max-width:none}
  .pr3-filtros>*{flex:1 1 calc(50% - 6px)}
  .pr3-campo--buscar{flex-basis:100%}
  /* Filtros plegados: solo búsqueda + botón "Filtros · N" */
  .pr3-filtros__toggle{display:inline-flex!important;flex:0 0 auto!important}
  .pr3-filtros[data-abierto="0"]>*:not(.pr3-campo--buscar):not(.pr3-filtros__toggle){display:none!important}
  .pr3-filtros[data-abierto="0"] .pr3-campo--buscar{flex:1 1 0}
  .pr3-vistas{margin-left:0}
  /* Flujo: carrusel horizontal controlado, una columna por pantalla */
  .pr3-flujo{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}
  .pr3-col{flex:0 0 88%;scroll-snap-align:start}
  /* Tabla: misma tabla, cada pedido se apila como tarjeta compacta */
  .pr3-tabla-wrap{background:transparent;border:none;box-shadow:none;overflow:visible}
  .pr3-tabla{min-width:0}
  .pr3-tabla thead{display:none}
  .pr3-tabla tbody tr.pr-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:11px 12px;margin-bottom:8px;border-radius:12px;background:var(--pr3-surface);border:1px solid var(--pr3-line)}
  .pr3-tabla tbody tr.pr-row td{padding:0;border:none}
  .pr3-tabla td.pr3-c-check{grid-row:1/3}
  .pr3-tabla td.pr3-c-cliente{grid-column:2;grid-row:1}
  .pr3-tabla td.pr3-c-importe{grid-column:3;grid-row:1;text-align:right}
  .pr3-tabla td.pr3-c-estado{grid-column:2;grid-row:2}
  .pr3-tabla td.pr3-c-acciones{grid-column:3;grid-row:2}
  .pr3-tabla td.pr3-c-folio{grid-column:2;grid-row:3}
  .pr3-tabla td.pr3-c-fecha{grid-column:3;grid-row:3;text-align:right}
  .pr3-tabla td.pr3-c-ruta,.pr3-tabla td.pr3-c-vendedor,.pr3-tabla td.pr3-c-piezas{display:none}
  /* v3.3: en el celular se ve a quién está asignado y cómo desplegar. */
  .pr3-tabla td.pr3-c-repartidor{grid-column:2/4;grid-row:4;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:6px!important;margin-top:2px;border-top:1px dashed var(--pr3-line)!important;font-size:12.5px}
  .pr3-movil-label{display:inline;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--pr3-sub)}
  .pr3-movil-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:auto;border:1px solid var(--pr3-line);background:var(--pr3-surface-2);color:var(--pr3-text);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
  .pr3-tabla tbody tr.pr-row[data-abierto="1"]{border-color:var(--pr3-orange);border-radius:12px 12px 0 0;margin-bottom:0}
  /* En móvil, tocar el nombre del cliente despliega el pedido (Ver cliente
     sigue en el detalle y en el menú ⋮). */
  .pr3-tabla td.pr3-c-cliente{pointer-events:none}
  .pr3-det__acciones .pr3-btn{flex:1 1 calc(50% - 6px)}
  .pr3-seltodos{margin-left:0;margin-top:6px}
  .pr3-barra__info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .pr3-fecha b,.pr3-fecha span{display:inline;margin-left:4px}
  .pr3 .pr3-accion{min-width:0}
  .pr3-tabla tr.pr3-detalle{display:block;margin:0 0 8px}
  .pr3-tabla tr.pr3-detalle td{display:block;border-radius:0 0 12px 12px;border:1px solid var(--pr3-orange);border-top:none}
}
@media (prefers-reduced-motion:reduce){.pr3 *{transition:none!important;animation:none!important}}