/* ════════════════════════════════════════════════════════════════════════════
   Pedidos Pro — restyle del KDS /orders (header + cards + drawer)
   Destino: Gestion_Integraciones.Server/wwwroot/css/pedidos-pro.css
   Referencia visual: "Pedidos Pro.dc.html". Solo tokens --gi-* (dark mode gratis);
   los únicos hex son colores semánticos de estado/canal/urgencia.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --pp-new:   var(--brand, #E0714E);
  --pp-prep:  #F59E0B;  --pp-prep-dark:  #D97706;
  --pp-ready: #10B981;  --pp-ready-dark: #059669;
  --pp-done:  #94A3B8;  --pp-done-dark:  #64748B;
}

/* ── Header (1 fila, envuelve en angosto) ─────────────────────────────────── */
.pp-header { display: flex; align-items: center; gap: 14px; padding: 10px 18px;
             background: var(--gi-card); border-bottom: 1px solid var(--gi-border);
             flex-wrap: wrap; }
.pp-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--gi-fg-strong); }
.pp-spacer { flex: 1; }

.pp-chan { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
           border-radius: 999px; border: 1px solid var(--gi-border); background: var(--gi-card);
           color: var(--gi-body); font-size: 12px; font-weight: 500; cursor: pointer;
           font-family: inherit; }
.pp-chan:hover { border-color: var(--gi-border-strong); }
.pp-chan.on { border-color: var(--pp-new); background: var(--brand-subtle, rgba(224,113,78,.1));
              color: var(--brand-dark, #C25438); font-weight: 700; }

.pp-kpi { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pp-kpi b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-kpi span { font-size: 10px; font-weight: 600; color: var(--gi-faint);
               text-transform: uppercase; letter-spacing: .04em; }
.pp-kpi-new b { color: var(--pp-new); }
.pp-kpi-prep b { color: var(--pp-prep-dark); }
.pp-kpi-debt b { color: #DC2626; }

.pp-clock { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px;
            font-weight: 600; color: var(--gi-fg-strong); background: var(--gi-muted);
            padding: 4px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }

/* Toggles on/off: campana (aviso al editar) y parlante (sonido) */
.pp-toggle { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--gi-border);
             background: var(--gi-card); color: var(--gi-faint); cursor: pointer; font-size: 14px; }
.pp-toggle:hover { filter: brightness(.97); }
.pp-toggle.on { border-color: transparent; background: var(--gi-accent); color: var(--gi-accent-fg); }
.pp-toggle.pp-toggle-neutral.on { border-color: var(--gi-border); background: var(--gi-card); color: var(--gi-body); }

.pp-new-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
              border-radius: 10px; border: none; background: var(--gi-primary); color: var(--gi-primary-fg);
              font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
              box-shadow: var(--gi-shadow-sm); }
.pp-new-btn:hover { background: var(--gi-primary-hover); }

/* ── Tablero responsivo ───────────────────────────────────────────────────── */
.pp-board { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 12px; padding: 12px 16px 18px; align-items: start; }

.pp-col { display: flex; flex-direction: column; min-width: 0; background: var(--gi-muted);
          border-radius: 14px; border: 0; border-top: 3px solid var(--pp-acc); overflow: hidden; }
.pp-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.pp-col-new   { --pp-acc: var(--pp-new); }
.pp-col-prep  { --pp-acc: var(--pp-prep); }
.pp-col-ready { --pp-acc: var(--pp-ready); }
.pp-col-done  { --pp-acc: var(--pp-done); opacity: .9; }
.pp-col-head .bi:first-child { font-size: 13px; color: var(--pp-acc); }
.pp-col-name { flex: 1; font-size: 13px; font-weight: 700; color: var(--gi-fg-strong); }
.pp-col-count { min-width: 22px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center;
                background: var(--gi-card); color: var(--gi-body); box-shadow: var(--gi-shadow-sm); box-sizing: border-box; }
.pp-col-scroll { display: flex; flex-direction: column; gap: 9px; padding: 6px 10px 10px;
                 background: transparent; min-height: 200px; flex: 1; overflow-y: auto; }
/* .col-bell / .col-edit / .col-empty / .col-drop-active: conservar los actuales */

/* ── Card de pedido ───────────────────────────────────────────────────────── */
.pp-card { position: relative; background: var(--gi-card); border: 1px solid var(--gi-border);
           border-radius: 12px; box-shadow: var(--gi-shadow-sm); cursor: grab;
           overflow: hidden; transition: transform .15s, box-shadow .15s; user-select: none; }
.pp-card:hover { transform: translateY(-1px); box-shadow: var(--gi-shadow-md); }
.pp-card:active { cursor: grabbing; }
.pp-card.dragging { opacity: .45; transform: scale(.98); }
.pp-card.urgent { animation: pp-urgent 1.6s ease-in-out infinite; }
@keyframes pp-urgent {
  0%, 100% { box-shadow: var(--gi-shadow-sm); }
  50% { box-shadow: 0 0 0 3px rgba(220,38,38,.18), var(--gi-shadow-sm); }
}

/* Barra SLA: width = min(minutos/15, 1) * 100% desde C# */
.pp-sla { height: 3px; background: var(--gi-muted); }
.pp-sla > div { height: 3px; border-radius: 0 2px 2px 0; }
.pp-sla-fresh > div { background: var(--pp-ready); }
.pp-sla-warn  > div { background: var(--pp-prep); }
.pp-sla-late  > div { background: #DC2626; }

.pp-card-body { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 7px; }
.pp-card-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15.5px;
          font-weight: 800; color: var(--gi-fg-strong); letter-spacing: .01em; }
.pp-elapsed { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
              font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.pp-elapsed-fresh { color: var(--gi-success-text); background: var(--gi-success-bg); }
.pp-elapsed-warn  { color: var(--gi-warning-text); background: var(--gi-warning-bg); }
.pp-elapsed-late  { color: var(--gi-danger-text); background: var(--gi-danger-bg); }
.pp-total { margin-left: auto; font-size: 14.5px; font-weight: 800; color: var(--gi-fg-strong);
            font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp-ch-ico { font-size: 12.5px; flex: none; }
.pp-ch-whatsapp { color: #059669; } .pp-ch-instagram { color: #c026d3; } .pp-ch-web { color: #0284c7; }
.pp-customer { font-size: 12.5px; font-weight: 700; color: var(--gi-fg-strong);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chip de modalidad — SIEMPRE visible en la card */
.pp-ful { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
          font-weight: 700; padding: 2px 8px; border-radius: 6px; flex: none; margin-left: auto; }
.pp-ful-delivery, .pp-ful-pickup, .pp-ful-dine_in { color: var(--gi-body); background: var(--gi-muted); }

.pp-items { display: flex; flex-direction: column; gap: 3px;
            border-top: 1px solid color-mix(in srgb, var(--gi-border) 55%, transparent);
            padding-top: 7px; }
.pp-item { display: flex; align-items: baseline; gap: 6px; min-width: 0; border-radius: 6px; }
.pp-item.promo { background: rgba(180,83,9,.06); padding: 2px 5px; }
.pp-qty { flex: none; font-size: 10.5px; font-weight: 800; min-width: 24px; text-align: center;
          border-radius: 5px; padding: 1px 4px; color: var(--pp-acc, var(--pp-new));
          background: color-mix(in srgb, var(--pp-acc, var(--pp-new)) 10%, transparent); }
.pp-item-name { font-size: 12px; font-weight: 500; color: var(--gi-body);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-promo-ico { color: #B45309; font-size: 10px; margin-right: 3px; }
.pp-item-sub { padding-left: 30px; font-size: 10.5px; font-weight: 600; color: #B45309;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-more { font-size: 11px; color: var(--gi-faint); font-style: italic; padding-left: 2px; }
.pp-notes { display: flex; gap: 6px; padding: 4px 8px; background: var(--gi-warning-bg);
            color: var(--gi-warning-text); border-radius: 7px; font-size: 11px; }

/* Fila final: chips pago/envío + CTA — envuelve para no recortar */
.pp-axes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
           font-weight: 700; padding: 3px 9px; border-radius: 999px; border: none;
           cursor: pointer; font-family: inherit; }
.pp-pay-ok  { color: var(--gi-success-text); background: var(--gi-success-bg); }
.pp-pay-due { color: var(--gi-danger-text); background: var(--gi-danger-bg); }
.pp-ship    { color: var(--gi-body); background: var(--gi-muted); }
.pp-ship-en_camino { color: var(--gi-info-text); background: var(--gi-info-bg); }
.pp-ship-entregado { color: var(--gi-success-text); background: var(--gi-success-bg); }
.pp-advance { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
              width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
              color: var(--gi-primary-fg); font-size: 15px; background: var(--gi-primary);
              box-shadow: var(--gi-shadow-sm); }
.pp-advance:hover { background: var(--gi-primary-hover); }
.pp-done-check { margin-left: auto; color: var(--gi-success); font-size: 18px; }

/* ── Drawer ───────────────────────────────────────────────────────────────── */
/* z-index 3101 (25/9; antes 1101): por encima del botón de ayuda (3000). El backdrop de este
   drawer es .drawer-backdrop, que vive en OrdersList.razor con z-index 3100. Con 51 el fondo negro quedaba ENCIMA del drawer:
   se veia atenuado y cada click adentro pegaba en el backdrop, que cierra — "no me deja". */
.pp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw);
             background: var(--gi-card); z-index: 3101; box-shadow: -12px 0 40px rgba(15,23,42,.18);
             display: flex; flex-direction: column; transition: width .25s ease-out; }
/* Modo edicion: el drawer se ensancha para que entre el form completo de OrderDetail. */
.pp-drawer.drawer-wide { width: min(960px, 96vw); }
.pp-drawer-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--gi-border);
                  border-top: 4px solid var(--pp-acc, var(--pp-new)); }
.pp-drawer-num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px;
                 font-weight: 800; color: var(--gi-fg-strong); }
.pp-drawer-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
                    padding: 2px 10px; border-radius: 999px; color: #fff;
                    background: var(--pp-acc, var(--pp-new)); }
.pp-drawer-close { width: 30px; height: 30px; border-radius: 8px; border: none;
                   background: var(--gi-muted); color: var(--gi-body); cursor: pointer; }
.pp-cust-name { font-size: 15px; font-weight: 700; color: var(--gi-fg-strong); }
.pp-cust-meta { font-size: 12px; color: var(--gi-muted-fg); display: flex; align-items: center; gap: 6px; }
.pp-round-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gi-border);
                background: var(--gi-card); color: var(--gi-body); cursor: pointer; font-size: 14px; }
.pp-round-btn:hover { background: var(--gi-muted); }
.pp-round-btn.wa { border-color: #A7F3D0; background: #ECFDF5; color: #059669; }

/* Stepper */
.pp-steps { display: flex; align-items: center; margin-top: 14px; }
.pp-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.pp-step i { width: 10px; height: 10px; border-radius: 50%; display: block; background: var(--gi-border); }
.pp-step span { font-size: 9.5px; font-weight: 500; color: var(--gi-faint);
                text-transform: uppercase; letter-spacing: .03em; }
.pp-step.hit i { background: var(--pp-acc, var(--pp-new)); }
.pp-step.hit span { color: var(--gi-fg-strong); }
.pp-step.now span { font-weight: 800; }
.pp-step-bar { flex: 1; height: 2px; margin: 0 4px 14px; border-radius: 2px; background: var(--gi-border); }
.pp-step-bar.hit { background: var(--pp-acc, var(--pp-new)); }

.pp-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px 18px;
                  display: flex; flex-direction: column; gap: 14px; }
.pp-sec-title { font-size: 10.5px; font-weight: 800; color: var(--gi-faint);
                text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

/* Card de modalidad */
.pp-ful-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--gi-border);
               border-radius: 10px; padding: 10px 12px; }
.pp-ful-ico { display: inline-flex; align-items: center; justify-content: center;
              width: 34px; height: 34px; border-radius: 9px; font-size: 15px; flex: none; }
.pp-ful-title { font-size: 12.5px; font-weight: 700; color: var(--gi-fg-strong); }
.pp-ful-detail { font-size: 11.5px; color: var(--gi-muted-fg);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ful-fee { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--gi-muted-fg); flex: none; }

/* Detalle estilo ticket */
.pp-tk-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pp-tk-row.incl { padding-left: 18px; }
.pp-tk-qty { flex: none; font-size: 11px; font-weight: 800; min-width: 26px; text-align: center;
             border-radius: 5px; padding: 1px 4px; color: var(--pp-acc, var(--pp-new));
             background: var(--gi-muted); }
.pp-tk-name { font-size: 13px; font-weight: 600; color: var(--gi-body); min-width: 0; }
.pp-tk-dots { flex: 1; border-bottom: 1px dotted var(--gi-border); margin: 0 2px; align-self: center; }
.pp-tk-price { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
               flex: none; color: var(--gi-fg-strong); }
.pp-tk-price.incl { color: var(--gi-faint); font-weight: 500; }
.pp-tk-strike { font-size: 11px; color: var(--gi-faint); flex: none; }
.pp-tk-sub { padding-left: 34px; font-size: 11.5px; color: var(--gi-muted-fg); }
.pp-tk-note { padding-left: 34px; font-size: 11.5px; font-weight: 600; color: #B45309; }
.pp-tk-promo { padding-left: 34px; font-size: 11px; font-weight: 600; color: #B45309; }
.pp-totals { border-top: 1px solid var(--gi-border); margin-top: 12px; padding-top: 10px;
             display: flex; flex-direction: column; gap: 4px; }
.pp-totals-row { display: flex; font-size: 12px; color: var(--gi-muted-fg); }
.pp-totals-row b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: inherit; }
.pp-totals-total { display: flex; font-size: 15px; font-weight: 800; color: var(--gi-fg-strong); margin-top: 2px; }

/* Cobro */
.pp-pay-card { border: 1px solid var(--gi-border); border-radius: 10px; padding: 12px; }
.pp-pay-bar { height: 6px; border-radius: 3px; background: var(--gi-muted); overflow: hidden; }
.pp-pay-bar > div { height: 6px; background: var(--pp-ready); }
.pp-pay-legend { display: flex; font-size: 11.5px; color: var(--gi-muted-fg); margin-top: 5px; }
.pp-pay-hist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
               border-top: 1px dashed var(--gi-border); padding-top: 8px; }
.pp-pay-hist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pp-pay-cta { width: 100%; margin-top: 10px; display: inline-flex; align-items: center;
              justify-content: center; gap: 7px; padding: 9px 0; border-radius: 9px; border: none;
              background: var(--gi-fg-strong); color: var(--gi-card); font-size: 12.5px;
              font-weight: 700; cursor: pointer; font-family: inherit; }

/* Footer sticky */
.pp-drawer-foot { padding: 12px 18px; border-top: 1px solid var(--gi-border);
                  display: flex; flex-direction: column; gap: 8px; background: var(--gi-muted-2); }
.pp-foot-cta { width: 100%; display: inline-flex; align-items: center; justify-content: center;
               gap: 8px; padding: 11px 0; border-radius: 10px; border: none; color: #fff;
               font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
               background: var(--pp-acc, var(--pp-new)); box-shadow: var(--gi-shadow-sm); }
.pp-foot-cta:hover { filter: brightness(.92); }
.pp-foot-row { display: flex; gap: 8px; }
.pp-foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center;
               gap: 6px; padding: 8px 0; border-radius: 9px; border: 1px solid var(--gi-border);
               background: var(--gi-card); color: var(--gi-body); font-size: 12px;
               font-weight: 600; cursor: pointer; font-family: inherit; }
.pp-foot-btn:hover { background: var(--gi-muted); }
.pp-foot-btn.danger { border-color: var(--gi-danger-bg); color: #DC2626; }
.pp-foot-btn.danger:hover { background: var(--gi-danger-bg); }


/* ════════════════════════════════════════════════════════════════════════════
   Segunda pasada (25/9, handoff_acumulado_2 03): header, tablero y card
   ════════════════════════════════════════════════════════════════════════════ */
.pp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gi-muted); max-width: 100%;
          overflow-x: auto; scrollbar-width: none; }
.pp-seg::-webkit-scrollbar { display: none; }
.pp-seg-opt { height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-family: inherit;
              font-size: 12.5px; font-weight: 600; color: var(--gi-body); display: inline-flex; align-items: center; gap: 6px;
              white-space: nowrap; flex: none; }
.pp-seg-opt:hover { color: var(--gi-fg-strong); }
.pp-seg-opt.on { background: var(--gi-card); color: var(--gi-fg-strong); box-shadow: var(--gi-shadow-sm); }
.pp-seg-opt .bi-grid { color: var(--gi-muted-fg); }
.pp-seg-opt .pp-ch-whatsapp { color: #25D366; }
.pp-seg-opt .pp-ch-instagram { color: #E1306C; }
.pp-seg-opt .pp-ch-web { color: #0284c7; }

.pp-filters { position: relative; }
.pp-filters-btn { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--gi-border); background: var(--gi-card);
                  color: var(--gi-fg); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
                  display: inline-flex; align-items: center; gap: 6px; }
.pp-filters-btn:hover { background: var(--gi-muted); }
.pp-filters-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gi-primary); color: var(--gi-primary-fg);
                font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.pp-pop-backdrop { position: fixed; inset: 0; z-index: 60; }
.pp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 61; width: 260px; box-sizing: border-box; padding: 14px; outline: none;
          background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 12px; box-shadow: var(--gi-shadow-lg);
          display: flex; flex-direction: column; gap: 10px; }
.pp-pop-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--gi-muted-fg); }
.pp-pop-field .kds-filter { width: 100%; height: 36px; }
.pp-pop-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--gi-muted); }
.pp-link { border: 0; background: none; padding: 0; color: var(--gi-accent-fg); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.pp-link:hover { text-decoration: underline; }
.pp-btn-sm { padding: 6px 12px; font-size: 12.5px; }

.pp-kpis { display: flex; align-items: center; }
.pp-kpis .pp-kpi { padding: 0 14px; border-left: 1px solid var(--gi-border); }
.pp-kpis .pp-kpi:first-child { border-left: 0; }

/* Con el sidebar abierto el header no entra en una fila: se achican los huecos y el reloj
   queda solo en pantallas anchas. */
@media (max-width: 1440px) {
  .pp-header { gap: 10px; }
  .pp-kpis .pp-kpi { padding: 0 10px; }
  .pp-clock { display: none; }
  .pp-seg-opt { padding: 0 9px; }
}

.pp-note-box { display: flex; align-items: flex-start; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 12px; line-height: 1.35;
               background: var(--gi-warning-bg); color: var(--gi-warning-text); min-width: 0; }
.pp-note-box span { overflow: hidden; text-overflow: ellipsis; }
.pp-items .pp-note-box { margin: 2px 0 2px 30px; }

.pp-mtabs { display: none; }
.pp-mtab { flex: 1; min-width: 0; height: 38px; border: 0; background: none; border-radius: 0; cursor: pointer; font-family: inherit;
           font-size: 13px; font-weight: 600; color: var(--gi-muted-fg); display: inline-flex; align-items: center; justify-content: center; gap: 5px;
           white-space: nowrap; padding: 0 6px; }
.pp-mtab span { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gi-muted); color: var(--gi-body);
                font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.pp-mtab.on { color: var(--gi-fg-strong); box-shadow: inset 0 -2px 0 var(--gi-primary); }
.pp-mtab.on span { background: var(--gi-primary); color: var(--gi-primary-fg); }

@media (max-width: 640px) {
  .pp-header { gap: 8px; padding: 10px 12px; }
  .pp-title { font-size: 18px; }
  .pp-kpis, .pp-clock { display: none; }
  .pp-seg { order: 10; flex: 0 1 calc(100% - 52px); min-width: 0; }
  .pp-filters { order: 11; margin-left: auto; }
  .pp-filters-btn { width: 42px; height: 36px; padding: 0; justify-content: center; }
  .pp-filters-lbl { display: none; }
  .pp-new-btn { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .pp-new-lbl { display: none; }
  .pp-pop { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; border-radius: 16px 16px 0 0; z-index: 3101;
            padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .pp-pop-backdrop { background: rgba(15,23,42,.35); z-index: 3100; }
  .pp-mtabs { display: flex; background: var(--gi-card); border-bottom: 1px solid var(--gi-border); overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
  .pp-board { grid-template-columns: 1fr; padding: 10px 10px 16px; }
  .pp-col.pp-mob-hide { display: none; }
}


/* ── new (rediseño 25/9) ── */

/* ════════════════════════════════════════════════════════════════════════════
   Segunda pasada (25/9, handoff_acumulado_2 03 §4): NUEVO PEDIDO — panel lateral
   760px, productos a la izquierda, carrito 300px a la derecha. Móvil: pantalla
   completa, columnas apiladas y carrito como barra fija abajo.
   ════════════════════════════════════════════════════════════════════════════ */
.pp-np-backdrop { position: fixed; inset: 0; z-index: 3100; background: rgba(15,23,42,.28); animation: pp-np-fade .15s ease-out; }
.pp-np-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 3101; width: min(760px, 100vw); box-sizing: border-box;
               display: flex; flex-direction: column; background: var(--gi-card); color: var(--gi-fg);
               border-left: 1px solid var(--gi-border); box-shadow: var(--gi-shadow-lg); outline: none;
               animation: pp-np-in .18s ease-out; }
@keyframes pp-np-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes pp-np-fade { from { opacity: 0; } to { opacity: 1; } }

.pp-np-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--gi-border); }
.pp-np-head h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; color: var(--gi-fg-strong); }
.pp-np-x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--gi-muted-fg);
           font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pp-np-x:hover { background: var(--gi-muted); color: var(--gi-fg-strong); }

.pp-np-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }

/* ── Izquierda ── */
.pp-np-left { min-height: 0; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px;
              border-right: 1px solid var(--gi-border); }
.pp-np-search { position: relative; flex: none; }
.pp-np-search > .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gi-faint); pointer-events: none; }
.pp-np-search input { width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px 0 36px; border-radius: 10px;
                      border: 1px solid var(--gi-input-border, var(--gi-border)); background: var(--gi-card); color: var(--gi-fg-strong);
                      font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.pp-np-search input:focus { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }

.pp-np-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-np-cat { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--gi-border); background: var(--gi-card);
             color: var(--gi-body); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
             display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pp-np-cat:hover { border-color: var(--gi-border-strong); }
.pp-np-cat.on { border-color: var(--gi-primary); background: var(--gi-accent); color: var(--gi-accent-fg); }
.pp-np-cat .bi { font-size: 11px; }

.pp-np-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-np-tile { display: flex; align-items: center; gap: 10px; padding: 10px; min-width: 0; border-radius: 10px; text-align: left;
              border: 1px solid var(--gi-border); background: var(--gi-card); color: inherit; font-family: inherit; cursor: pointer;
              transition: border-color .12s, background .12s; }
.pp-np-tile:hover { border-color: var(--gi-border-strong); }
.pp-np-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gi-ring); }
.pp-np-tile.in { border-color: color-mix(in srgb, var(--gi-primary) 30%, var(--gi-card));
                 background: color-mix(in srgb, var(--gi-primary) 4%, var(--gi-card)); }
.pp-np-ico { width: 38px; height: 38px; flex: none; border-radius: 9px; background: var(--gi-muted); color: var(--gi-muted-fg);
             display: inline-flex; align-items: center; justify-content: center; font-size: 16px; object-fit: cover; }
.pp-np-ico.promo { background: var(--gi-accent); color: var(--gi-accent-fg); }
.pp-np-tile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-np-tile-name { font-size: 13.5px; font-weight: 600; color: var(--gi-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-np-tile-price { font-size: 12.5px; color: var(--gi-muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-np-tile-price b { font-weight: 700; color: var(--gi-accent-fg); }
.pp-np-tile-price s { font-size: 11px; color: var(--gi-faint); }
.pp-np-badge { min-width: 22px; height: 22px; padding: 0 6px; flex: none; box-sizing: border-box; border-radius: 11px;
               background: var(--gi-primary); color: var(--gi-primary-fg); font-size: 12px; font-weight: 700;
               display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pp-np-add { flex: none; font-size: 17px; color: var(--gi-faint); }
.pp-np-tile:hover .pp-np-add { color: var(--gi-primary); }

.pp-np-nores { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px; text-align: center;
               border: 1px dashed var(--gi-border); border-radius: 10px; font-size: 13px; color: var(--gi-muted-fg); }
.pp-np-nores > .bi { font-size: 20px; color: var(--gi-faint); }

.pp-np-client { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--gi-border); padding-top: 14px; }
.pp-np-client-head { display: flex; align-items: center; gap: 10px; }
.pp-np-label { flex: 1; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gi-muted-fg); }
.pp-np-chan { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 8px;
              border: 1px solid var(--gi-border); background: var(--gi-card); color: var(--gi-muted-fg); font-size: 12.5px; }
.pp-np-chan select { border: 0; background: transparent; color: var(--gi-fg-strong); font-size: 12.5px; font-weight: 600;
                     font-family: inherit; outline: none; cursor: pointer; padding: 0 2px; }
.pp-np-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-np-in { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; padding: 0 10px; border-radius: 8px;
            border: 1px solid var(--gi-input-border, var(--gi-border)); background: var(--gi-card); color: var(--gi-fg-strong);
            font-size: 13.5px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.pp-np-in::placeholder, .pp-np-search input::placeholder { color: var(--gi-faint); }
.pp-np-in:focus { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }
.pp-np-in-sm { height: 32px; font-size: 13px; }

.pp-np-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--gi-muted); }
.pp-np-seg-opt { flex: 1; min-width: 0; height: 32px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
                 font-family: inherit; font-size: 13px; font-weight: 600; color: var(--gi-muted-fg);
                 display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.pp-np-seg-opt:hover { color: var(--gi-fg-strong); }
.pp-np-seg-opt.on { background: var(--gi-card); color: var(--gi-fg-strong); box-shadow: var(--gi-shadow-sm); }

/* ── Derecha: carrito ── */
.pp-np-cart { min-height: 0; display: flex; flex-direction: column; background: var(--gi-muted-2); }
.pp-np-cart-head { flex: none; display: flex; align-items: center; padding: 14px 16px 8px; font-size: 11.5px; font-weight: 600;
                   letter-spacing: .05em; text-transform: uppercase; color: var(--gi-muted-fg); }
.pp-np-cart-head > span { flex: 1; }
.pp-np-cart-hide { display: none; }
.pp-np-cart-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.pp-np-empty { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
               font-size: 13px; color: var(--gi-faint); }
.pp-np-empty .bi { font-size: 24px; }
.pp-np-manual { align-self: flex-start; margin: 2px 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }

.pp-np-line { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 10px; padding: 10px;
              display: flex; flex-direction: column; gap: 8px; }
.pp-np-line.open { border-color: color-mix(in srgb, var(--gi-primary) 30%, var(--gi-card)); }
.pp-np-line-top { display: flex; align-items: flex-start; gap: 8px; }
.pp-np-line-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--gi-fg-strong); overflow-wrap: anywhere; }
.pp-np-promo { font-size: 11px; color: var(--gi-primary); margin-right: 2px; }
.pp-np-line-sub { flex: none; margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--gi-fg-strong);
                  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 32px; }
.pp-np-line-name + .pp-np-line-sub { line-height: inherit; }
.pp-np-line-comps { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; font-size: 12px; color: var(--gi-muted-fg); }
.pp-np-line-comps .bi { font-size: 10px; color: var(--gi-faint); }
.pp-np-line-meta { margin-top: -4px; font-size: 12px; color: var(--gi-muted-fg); overflow-wrap: anywhere; }
.pp-np-line-note { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12px; line-height: 1.35;
                   background: var(--gi-warning-bg); color: var(--gi-warning-text); }
.pp-np-line-note span { min-width: 0; overflow-wrap: anywhere; }
.pp-np-line-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pp-np-step { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--gi-border); border-radius: 8px;
              overflow: hidden; background: var(--gi-card); flex: none; }
.pp-np-step button { width: 28px; height: 100%; border: 0; background: transparent; color: var(--gi-body); cursor: pointer;
                     display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.pp-np-step button:hover { background: var(--gi-muted); }
.pp-np-step button .bi-trash3 { font-size: 12px; color: var(--gi-danger-text); }
.pp-np-step span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 600; color: var(--gi-fg-strong);
                   font-variant-numeric: tabular-nums; }
/* Cantidad tipeable (mismo ancho que el número que reemplaza) */
.pp-np-step input { width: 34px; min-width: 26px; height: 100%; padding: 0 2px; border: 0; background: transparent; outline: none;
                    text-align: center; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--gi-fg-strong);
                    font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pp-np-step input::-webkit-outer-spin-button,
.pp-np-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-np-step input:focus { background: var(--gi-muted); }
.pp-np-step:focus-within { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }
.pp-np-more { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600;
              color: var(--gi-accent-fg); cursor: pointer; }
.pp-np-more:hover { text-decoration: underline; }
.pp-np-dup { display: inline-flex; align-items: center; gap: 4px; color: var(--gi-muted-fg); }
.pp-np-dup .bi { font-size: 12px; }
.pp-np-dup:hover { color: var(--gi-accent-fg); }

.pp-np-price-in { display: inline-flex; align-items: center; height: 30px; min-width: 0; border: 1px solid var(--gi-input-border, var(--gi-border));
                  border-radius: 8px; overflow: hidden; background: var(--gi-card); }
.pp-np-price-in > span { padding: 0 7px; align-self: stretch; display: inline-flex; align-items: center; font-size: 12.5px;
                         color: var(--gi-muted-fg); background: var(--gi-muted-2); border-right: 1px solid var(--gi-border); }
.pp-np-price-in input { width: 84px; min-width: 0; height: 100%; border: 0; padding: 0 8px; background: transparent; color: var(--gi-fg-strong);
                        font-size: 13px; font-family: inherit; outline: none; font-variant-numeric: tabular-nums; }
.pp-np-price-in:focus-within { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }
.pp-np-price-in input[readonly] { color: var(--gi-muted-fg); cursor: not-allowed; }

/* Editor de adicionales / mitades / nota (se abre con "+ Adicionales") */
.pp-np-editor { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--gi-border); }
.pp-np-agroup { display: flex; flex-direction: column; gap: 5px; }
.pp-np-agroup-name { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gi-muted-fg); }
.pp-np-aopts { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-np-aopt-wrap { display: inline-flex; align-items: center; gap: 3px; }
.pp-np-aopt { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; cursor: pointer;
              border: 1px solid var(--gi-border); background: var(--gi-card); color: var(--gi-body); font-size: 12px; line-height: 1.3; }
.pp-np-aopt:hover { border-color: var(--gi-primary); }
.pp-np-aopt.on { border-color: var(--gi-primary); background: var(--gi-accent); color: var(--gi-accent-fg); font-weight: 600; }
.pp-np-aopt input { width: 12px; height: 12px; margin: 0; accent-color: var(--gi-primary); cursor: pointer; }
.pp-np-portion { height: 24px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--gi-border); background: var(--gi-card);
                 color: var(--gi-muted-fg); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pp-np-portion.on { border-color: var(--gi-warning-text); background: var(--gi-warning-bg); color: var(--gi-warning-text); }
.pp-np-unit { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--gi-muted-fg); }

/* Pie fijo del carrito */
.pp-np-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--gi-border);
              background: var(--gi-card); }
.pp-np-alert { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.35;
               background: var(--gi-danger-bg); color: var(--gi-danger-text); }
.pp-np-alert .bi { margin-top: 1px; }
.pp-np-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--gi-muted-fg);
             font-variant-numeric: tabular-nums; }
.pp-np-disc input { width: 76px; text-align: right; }
.pp-np-total { display: flex; justify-content: space-between; gap: 8px; font-size: 18px; font-weight: 700; color: var(--gi-fg-strong);
               font-variant-numeric: tabular-nums; }
.pp-np-paysel { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 0 0 10px; box-sizing: border-box; border-radius: 8px;
                border: 1px solid var(--gi-input-border, var(--gi-border)); background: var(--gi-card); color: var(--gi-muted-fg); font-size: 13px; }
.pp-np-paysel select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--gi-body);
                       font-size: 13px; font-family: inherit; outline: none; cursor: pointer; }
.pp-np-paysel:focus-within { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }
.pp-np-create { height: 42px; border: 0; border-radius: 8px; background: var(--gi-primary); color: var(--gi-primary-fg);
                font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.pp-np-create:hover:not(:disabled) { background: var(--gi-primary-hover); }
.pp-np-create:disabled { opacity: .6; cursor: progress; }

/* Barra inferior del carrito: solo móvil */
.pp-np-mbar { display: none; }

@media (max-width: 640px) {
  .pp-np-panel { width: 100vw; border-left: 0; }
  .pp-np-head { padding: 12px 16px; }
  .pp-np-body { display: block; overflow: hidden; position: relative; }
  .pp-np-left { height: 100%; box-sizing: border-box; border-right: 0; padding: 14px 16px calc(84px + env(safe-area-inset-bottom)); }
  .pp-np-grid2 { grid-template-columns: 1fr; }
  .pp-np-seg-opt { font-size: 12.5px; gap: 4px; }

  /* Carrito: oculto hasta "Ver pedido"; ahí cubre todo el cuerpo del panel */
  .pp-np-cart { display: none; }
  .pp-np-cart.open { display: flex; position: absolute; inset: 0; z-index: 2; }
  .pp-np-cart-hide { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0;
                     border-radius: 8px; background: var(--gi-card); color: var(--gi-body); cursor: pointer; }
  .pp-np-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Carrito: targets de 40px (stepper con cantidad tipeable, + Adicionales, Duplicar) */
  .pp-np-step { height: 40px; }
  .pp-np-step button { width: 40px; }
  .pp-np-step input { width: 42px; font-size: 15px; }
  .pp-np-more { min-height: 40px; }

  .pp-np-mbar { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3;
                display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 0; border-radius: 12px;
                background: var(--gi-primary); color: var(--gi-primary-fg); box-shadow: var(--gi-shadow-lg);
                font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .pp-np-mbar-n { opacity: .9; }
  .pp-np-mbar-total { font-weight: 700; font-variant-numeric: tabular-nums; }
  .pp-np-mbar-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Segunda pasada (25/9, handoff_acumulado_2 03 §5): REGISTRAR PAGO — modal
   centrado 440px (móvil pantalla completa). Todo scopeado a .pp-pay-dlg para no
   chocar con .pp-pay-card/.pp-pay-bar del drawer.
   ════════════════════════════════════════════════════════════════════════════ */
.pp-pay-backdrop { position: fixed; inset: 0; z-index: 3200; padding: 16px; box-sizing: border-box; background: rgba(15,23,42,.35);
                   display: flex; align-items: center; justify-content: center; animation: pp-np-fade .15s ease-out; }
.pp-pay-dlg { width: 440px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
              background: var(--gi-card); color: var(--gi-fg); border-radius: 16px; box-shadow: var(--gi-shadow-lg); outline: none; }
.pp-pay-dlg .pp-pay-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; }
.pp-pay-dlg .pp-pay-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; color: var(--gi-fg-strong); }
.pp-pay-dlg .pp-pay-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }

.pp-pay-dlg .pp-pay-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--gi-border);
                          border-radius: 12px; overflow: hidden; }
.pp-pay-dlg .pp-pay-sum > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-pay-dlg .pp-pay-sum > div + div { border-left: 1px solid var(--gi-border); }
.pp-pay-dlg .pp-pay-sum span { font-size: 12px; color: var(--gi-muted-fg); }
.pp-pay-dlg .pp-pay-sum b { font-size: 15px; font-weight: 600; color: var(--gi-fg-strong); font-variant-numeric: tabular-nums;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pay-dlg .pp-pay-sum .bal { background: var(--gi-warning-bg); }
.pp-pay-dlg .pp-pay-sum .bal span, .pp-pay-dlg .pp-pay-sum .bal b { color: var(--gi-warning-text); }
.pp-pay-dlg .pp-pay-sum .bal b { font-weight: 700; }

.pp-pay-dlg .pp-pay-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pp-pay-dlg .pp-pay-field > span:first-child { font-size: 12.5px; font-weight: 500; color: var(--gi-body); }
.pp-pay-dlg .pp-pay-amt { display: flex; height: 48px; box-sizing: border-box; border-radius: 10px; overflow: hidden;
                          border: 1px solid var(--gi-input-border, var(--gi-border)); background: var(--gi-card);
                          transition: border-color .15s, box-shadow .15s; }
.pp-pay-dlg .pp-pay-amt:focus-within { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }
.pp-pay-dlg .pp-pay-cur { display: flex; align-items: center; padding: 0 12px; font-size: 16px; color: var(--gi-muted-fg);
                          background: var(--gi-muted-2); border-right: 1px solid var(--gi-border); }
.pp-pay-dlg .pp-pay-amt input { flex: 1; min-width: 0; border: 0; padding: 0 12px; background: transparent; color: var(--gi-fg-strong);
                                font-size: 20px; font-weight: 600; font-family: inherit; outline: none; font-variant-numeric: tabular-nums; }

.pp-pay-dlg .pp-pay-quick { display: flex; gap: 6px; }
.pp-pay-dlg .pp-pay-quick button { flex: 1; min-width: 0; height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--gi-border);
                                   background: var(--gi-card); color: var(--gi-body); font-family: inherit; font-size: 12.5px; font-weight: 600;
                                   cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pay-dlg .pp-pay-quick button:hover { border-color: var(--gi-border-strong); }
.pp-pay-dlg .pp-pay-quick button.on { border-color: var(--gi-primary); background: var(--gi-accent); color: var(--gi-accent-fg); }

.pp-pay-dlg .pp-pay-meth { display: grid; grid-template-columns: repeat(var(--pay-n, 4), minmax(0, 1fr)); gap: 2px; padding: 3px;
                           border-radius: 9px; background: var(--gi-muted); }
.pp-pay-dlg .pp-pay-meth button { height: 44px; min-width: 0; padding: 0 4px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
                                  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--gi-muted-fg);
                                  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pp-pay-dlg .pp-pay-meth button .bi { font-size: 15px; }
.pp-pay-dlg .pp-pay-meth button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pay-dlg .pp-pay-meth button:hover { color: var(--gi-fg-strong); }
.pp-pay-dlg .pp-pay-meth button.on { background: var(--gi-card); color: var(--gi-fg-strong); box-shadow: var(--gi-shadow-sm); }
.pp-pay-dlg .pp-pay-select { display: flex; align-items: center; gap: 8px; height: 38px; padding-left: 10px; box-sizing: border-box;
                             border-radius: 8px; border: 1px solid var(--gi-input-border, var(--gi-border)); background: var(--gi-card);
                             color: var(--gi-muted-fg); }
.pp-pay-dlg .pp-pay-select select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--gi-fg-strong);
                                    font-size: 13.5px; font-family: inherit; outline: none; cursor: pointer; }
.pp-pay-dlg .pp-pay-select:focus-within { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }

.pp-pay-dlg .pp-pay-in { width: 100%; height: 38px; box-sizing: border-box; padding: 0 10px; border-radius: 8px;
                         border: 1px solid var(--gi-input-border, var(--gi-border)); background: var(--gi-card); color: var(--gi-fg-strong);
                         font-size: 13.5px; font-family: inherit; outline: none; }
.pp-pay-dlg .pp-pay-in::placeholder { color: var(--gi-faint); }
.pp-pay-dlg .pp-pay-in:focus { border-color: var(--gi-primary); box-shadow: 0 0 0 3px var(--gi-ring); }

.pp-pay-dlg .pp-pay-hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gi-muted-fg); }
.pp-pay-dlg .pp-pay-hint.ok { color: var(--gi-success-text); }

.pp-pay-dlg .pp-pay-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px;
                           border-top: 1px solid var(--gi-border); background: var(--gi-muted-2); }
.pp-pay-dlg .pp-pay-cancel { height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--gi-border); background: var(--gi-card);
                             color: var(--gi-fg-strong); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pp-pay-dlg .pp-pay-cancel:hover { background: var(--gi-muted); }
.pp-pay-dlg .pp-pay-save { height: 38px; padding: 0 16px; border-radius: 8px; border: 0; background: var(--gi-primary); color: var(--gi-primary-fg);
                           font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pp-pay-dlg .pp-pay-save:hover:not(:disabled) { background: var(--gi-primary-hover); }
.pp-pay-dlg .pp-pay-save:disabled { opacity: .6; cursor: progress; }

@media (max-width: 640px) {
  .pp-pay-backdrop { padding: 0; align-items: stretch; }
  .pp-pay-dlg { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .pp-pay-dlg .pp-pay-head { padding: 14px 16px 12px; }
  .pp-pay-dlg .pp-pay-body { padding: 0 16px 16px; }
  .pp-pay-dlg .pp-pay-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pp-pay-dlg .pp-pay-foot button { flex: 1; height: 44px; }
}

/* Comanda impresa: ni el alta ni el cobro salen en el papel */
@media print {
  .pp-np-backdrop, .pp-np-panel, .pp-pay-backdrop { display: none !important; }
}


/* ── drawer (rediseño 25/9) ── */
/* ── Drawer / OrderDetail (rediseño 03 §3) ─────────────────────────────────────
   Clases pp-dw-*: las usa el drawer de /orders y también la página /orders/{id}
   (OrderDetail), que toma el mismo estilo. Orden de bloques: Cliente, Entrega,
   Detalle, Cobro. Head con banda del estado (--pp-acc) y footer con la próxima
   acción en primario naranja. */

.pp-drawer.pp-dw { width: min(460px, 100vw); border-left: 1px solid var(--gi-border);
                   box-shadow: var(--gi-shadow-lg); outline: none; color: var(--gi-fg-strong); }
.pp-drawer.pp-dw.drawer-wide { width: min(960px, 96vw); }

/* Head */
.pp-dw-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px;
              border-bottom: 1px solid var(--gi-border); border-top: 3px solid var(--pp-acc, var(--gi-primary));
              background: var(--gi-card); flex: none; min-width: 0; }
.pp-dw-code { font-size: 20px; font-weight: 700; color: var(--gi-fg-strong); font-variant-numeric: tabular-nums;
              white-space: nowrap; }
.pp-dw-pill { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 8px;
              border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.pp-dw-pill > i { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-acc, currentColor); flex: none; }
.pp-dw-tone-new    { background: var(--gi-accent);      color: var(--gi-accent-fg); }
.pp-dw-tone-prep   { background: var(--gi-warning-bg);  color: var(--gi-warning-text); }
.pp-dw-tone-ready  { background: var(--gi-success-bg);  color: var(--gi-success-text); }
.pp-dw-tone-done   { background: var(--gi-muted);       color: var(--gi-body); }
.pp-dw-tone-cancel { background: var(--gi-danger-bg);   color: var(--gi-danger-text); }
.pp-dw-tone-cancel > i { background: var(--gi-danger-text); }
.pp-dw-ago { font-size: 12.5px; color: var(--gi-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dw-spacer { flex: 1; }
.pp-dw-icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent;
                  color: var(--gi-muted-fg); display: inline-flex; align-items: center; justify-content: center;
                  cursor: pointer; font-size: 15px; flex: none; font-family: inherit; }
.pp-dw-icon-btn:hover { background: var(--gi-muted); color: var(--gi-fg-strong); }
.pp-dw-icon-btn:focus-visible, .pp-dw-sq-btn:focus-visible, .pp-dw-btn2:focus-visible,
.pp-dw-cancel:focus-visible, .pp-dw-primary:focus-visible, .pp-dw-mini:focus-visible, .pp-dw-x:focus-visible,
.pp-dw-seg-opt:focus-visible { outline: 2px solid var(--gi-ring); outline-offset: 2px; }
.pp-dw-close { font-size: 16px; }

/* Body */
.pp-dw-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.pp-dw-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-dw-sec-head { display: flex; align-items: center; gap: 8px; }
.pp-dw-sec-head .pp-dw-label { flex: 1; }
.pp-dw-label { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
               color: var(--gi-muted-fg); }

/* 1 · Cliente */
.pp-dw-client { display: flex; align-items: center; gap: 12px; padding: 12px;
                border: 1px solid var(--gi-border); border-radius: 12px; background: var(--gi-card); }
.pp-dw-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex;
                align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
                background: var(--gi-accent); color: var(--gi-accent-fg); }
.pp-dw-client-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-dw-client-name { font-size: 14.5px; font-weight: 600; color: var(--gi-fg-strong);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dw-client-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gi-muted-fg);
                     min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dw-sq-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--gi-border);
                background: var(--gi-card); color: var(--gi-body); display: inline-flex; align-items: center;
                justify-content: center; flex: none; text-decoration: none; font-size: 15px; }
.pp-dw-sq-btn:hover { background: var(--gi-muted); color: var(--gi-fg-strong); }
.pp-dw-sq-btn.wa { color: #25D366; }
.pp-dw-sq-btn.wa:hover { color: #25D366; }

/* 2 · Entrega */
.pp-dw-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--gi-muted); }
.pp-dw-seg-opt { flex: 1; min-width: 0; height: 32px; border-radius: 7px; border: 0; background: transparent;
                 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                 font-size: 13px; font-weight: 600; color: var(--gi-muted-fg); font-family: inherit;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dw-seg-opt.on { background: var(--gi-card); color: var(--gi-fg-strong); box-shadow: var(--gi-shadow); }
button.pp-dw-seg-opt { cursor: pointer; }
button.pp-dw-seg-opt:not(.on):hover { color: var(--gi-fg-strong); }
.pp-dw-addr { display: flex; align-items: flex-start; gap: 10px; padding: 4px 2px; font-size: 13.5px;
              color: var(--gi-body); min-width: 0; }
.pp-dw-addr > .bi { color: var(--gi-faint); margin-top: 2px; flex: none; }
.pp-dw-addr-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pp-dw-addr-empty { color: var(--gi-faint); }
.pp-dw-link { font-size: 12.5px; font-weight: 600; color: var(--gi-accent-fg); text-decoration: none;
              white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.pp-dw-link:hover { text-decoration: underline; }
.pp-dw-link .bi { font-size: 11px; }
.pp-dw-sticky { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 6px;
                background: var(--gi-warning-bg); color: var(--gi-warning-text); font-size: 12px;
                line-height: 1.45; overflow-wrap: anywhere; }
.pp-dw-sticky > .bi { margin-top: 1px; flex: none; }
/* Datos extra del pedido (8/10): DNI, tipo de factura… */
.pp-dw-datos { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--gi-border); border-radius: 6px; }
.pp-dw-map { display: block; width: 100%; height: 200px; border: 1px solid var(--gi-border);
             border-radius: 12px; background: var(--gi-muted-2); }
.pp-dw-coords { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--gi-muted-fg); }
.pp-dw-coords > span { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 3 · Detalle (card-lista) */
.pp-dw-list { border: 1px solid var(--gi-border); border-radius: 12px; overflow: hidden; background: var(--gi-card); }
.pp-dw-line { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start;
              padding: 10px 14px; border-top: 1px solid var(--gi-border); }
.pp-dw-line:first-child { border-top: 0; }
.pp-dw-line.comp { padding-left: 34px; background: var(--gi-muted-2); border-top-style: dashed; }
.pp-dw-line.comp .pp-dw-qty, .pp-dw-line.comp .pp-dw-line-name { font-size: 12.5px; color: var(--gi-body); }
.pp-dw-qty { font-size: 13.5px; font-weight: 700; color: var(--gi-fg-strong); font-variant-numeric: tabular-nums; }
.pp-dw-line-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-dw-line-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px;
                   color: var(--gi-fg-strong); overflow-wrap: anywhere; }
.pp-dw-promo-ico { color: var(--gi-primary); font-size: 11px; }
.pp-dw-line-sub { display: block; font-size: 12px; color: var(--gi-muted-fg); overflow-wrap: anywhere; }
.pp-dw-line-sub .bi { font-size: 11px; }
.pp-dw-line-note { display: block; font-size: 12px; font-weight: 600; color: var(--gi-warning-text); overflow-wrap: anywhere; }
.pp-dw-line-price { font-size: 13.5px; color: var(--gi-fg-strong); font-variant-numeric: tabular-nums;
                    text-align: right; white-space: nowrap; }
.pp-dw-strike { display: block; font-size: 11.5px; color: var(--gi-faint); }
.pp-dw-incl { font-size: 12px; color: var(--gi-faint); }
.pp-dw-empty { padding: 12px 14px; font-size: 13px; color: var(--gi-faint); }
.pp-dw-list-foot { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px;
                   border-top: 1px solid var(--gi-border); background: var(--gi-muted-2); font-size: 13px; }
.pp-dw-foot-row { display: flex; justify-content: space-between; gap: 12px; color: var(--gi-muted-fg);
                  font-variant-numeric: tabular-nums; }
.pp-dw-discount span:last-child { color: var(--gi-success-text); }
.pp-dw-total { font-size: 15px; font-weight: 700; color: var(--gi-fg-strong); }

/* 4 · Cobro */
.pp-dw-paypill { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px;
                 border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pp-dw-paypill.ok  { background: var(--gi-success-bg); color: var(--gi-success-text); }
.pp-dw-paypill.due { background: var(--gi-danger-bg);  color: var(--gi-danger-text); }
.pp-dw-bar { height: 8px; border-radius: 999px; background: var(--gi-muted); overflow: hidden; }
.pp-dw-bar > div { height: 100%; background: var(--gi-success); border-radius: 999px; transition: width .3s ease; }
.pp-dw-paysum { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--gi-body); }
.pp-dw-paysum b { color: var(--gi-fg-strong); font-variant-numeric: tabular-nums; }
.pp-dw-paysum .due b { color: var(--gi-danger-text); }
.pp-dw-payments { display: flex; flex-direction: column; border: 1px solid var(--gi-border); border-radius: 10px;
                  overflow: hidden; }
.pp-dw-pay-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 12px;
                 border-top: 1px solid var(--gi-border); font-size: 12.5px; color: var(--gi-body); }
.pp-dw-pay-row:first-child { border-top: 0; }
.pp-dw-pay-row b { color: var(--gi-fg-strong); font-variant-numeric: tabular-nums; }
.pp-dw-pay-method { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-dw-pay-date { margin-left: auto; color: var(--gi-muted-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-dw-pay-row.confirm { background: var(--gi-danger-bg); flex-wrap: wrap; }
.pp-dw-x { width: 26px; height: 26px; border-radius: 6px; border: 0; background: transparent; color: var(--gi-faint);
           display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; font-size: 12px; }
.pp-dw-x:hover { background: var(--gi-danger-bg); color: var(--gi-danger-text); }
.pp-dw-meta { font-size: 12px; color: var(--gi-muted-fg); }
.pp-dw-btn2 { height: 38px; border-radius: 8px; border: 1px solid var(--gi-border); background: var(--gi-card);
              color: var(--gi-fg-strong); font-size: 13.5px; font-weight: 600; font-family: inherit;
              display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; width: 100%; }
.pp-dw-btn2:hover { background: var(--gi-muted); }

/* Confirmaciones inline (pago / cancelar) */
.pp-dw-confirm { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.pp-dw-confirm-q { flex: 1; min-width: 140px; font-size: 13px; font-weight: 600; color: var(--gi-fg-strong); }
.pp-dw-pay-row.confirm .pp-dw-confirm-q { color: var(--gi-danger-text); font-size: 12.5px; }
.pp-dw-mini { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--gi-border);
              background: var(--gi-card); color: var(--gi-fg-strong); font-size: 12.5px; font-weight: 600;
              font-family: inherit; cursor: pointer; white-space: nowrap; }
.pp-dw-mini:hover { background: var(--gi-muted); }
.pp-dw-mini.danger { border-color: transparent; background: var(--gi-destructive); color: var(--gi-destructive-fg); }
.pp-dw-mini.danger:hover { filter: brightness(.92); background: var(--gi-destructive); }

/* Footer */
.pp-dw-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; flex: none;
              border-top: 1px solid var(--gi-border); background: var(--gi-card); }
.pp-dw-cancel { height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--gi-border);
                background: var(--gi-card); color: var(--gi-danger-text); font-size: 13.5px; font-weight: 600;
                font-family: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
                white-space: nowrap; flex: none; }
.pp-dw-cancel:hover { background: var(--gi-danger-bg); border-color: var(--gi-danger-bg); }
.pp-dw-primary { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 8px; border: 0;
                 background: var(--gi-primary); color: var(--gi-primary-fg); font-size: 14px; font-weight: 600;
                 font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                 cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dw-primary:hover:not(:disabled) { background: var(--gi-primary-hover); }
.pp-dw-primary:disabled { opacity: .6; cursor: default; }
.pp-dw-state { flex: 1; height: 40px; border-radius: 8px; display: inline-flex; align-items: center;
               justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.pp-dw-state.ok  { background: var(--gi-success-bg); color: var(--gi-success-text); }
.pp-dw-state.off { background: var(--gi-muted); color: var(--gi-muted-fg); }

/* Móvil: drawer a pantalla completa */
@media (max-width: 639.98px) {
  .pp-drawer.pp-dw, .pp-drawer.pp-dw.drawer-wide { width: 100vw; border-left: 0; }
  .pp-dw-head { padding: 12px 16px; gap: 8px; }
  .pp-dw-code { font-size: 18px; }
  .pp-dw-ago { display: none; }
  .pp-dw-body { padding: 14px 16px; }
  .pp-dw-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pp-dw-seg-opt { font-size: 12.5px; gap: 4px; }
}

/* Comanda impresa: solo el contenido del pedido */
@media print {
  .pp-drawer.pp-dw { width: 100% !important; border: 0; }
  .pp-dw-body { overflow: visible; }
  .pp-dw-foot, .pp-dw-noprint, .pp-dw-btn2, .pp-dw-x, .pp-dw-map, .pp-dw-coords, .pp-dw-sq-btn { display: none !important; }
}