/* ════════════════════════════════════════════════════════════════════════════
   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: var(--pp-new); background: var(--brand-subtle, rgba(224,113,78,.1));
                color: var(--brand-dark, #C25438); }

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

/* ── 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-card);
          border-radius: 14px; border: 1px solid var(--gi-border);
          box-shadow: var(--gi-shadow-sm); overflow: hidden; }
.pp-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
               border-bottom: 1px solid var(--gi-border); border-top: 3px solid var(--pp-acc); }
.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 { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
                background: var(--gi-muted); color: var(--gi-body); }
.pp-col-new  .pp-col-count { background: var(--brand-subtle); color: var(--brand-dark); }
.pp-col-prep .pp-col-count { background: var(--gi-warning-bg); color: var(--gi-warning-text); }
.pp-col-ready .pp-col-count { background: var(--gi-success-bg); color: var(--gi-success-text); }
.pp-col-scroll { display: flex; flex-direction: column; gap: 9px; padding: 10px;
                 background: var(--gi-muted-2); 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 { color: var(--gi-info-text); background: var(--gi-info-bg); }
.pp-ful-pickup   { color: var(--gi-warning-text); background: var(--gi-warning-bg); }
.pp-ful-dine_in  { color: #5b21b6; background: #ede9fe; }

.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: 34px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
              color: #fff; font-size: 15px; background: var(--pp-acc, var(--pp-new));
              box-shadow: var(--gi-shadow-sm); }
.pp-advance:hover { filter: brightness(.92); }
.pp-done-check { margin-left: auto; color: var(--pp-ready-dark); font-size: 14px; }

/* ── Drawer ───────────────────────────────────────────────────────────────── */
/* z-index 1101 y no 51: el backdrop de este drawer es .drawer-backdrop, que vive en
   OrdersList.razor con z-index 1100. 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: 1101; 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); }