/* =============================================================
   my-orders.css — Panel "Mis pedidos"
   ============================================================= */

/* Overlay */
.ord-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10, 5, 25, 0.55);
  z-index: 700;
  backdrop-filter: blur(2px);
}
.ord-overlay.open { display: block; }

/* Drawer */
.ord-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: #1a0533;
  border-left: 1px solid rgba(102, 51, 170, 0.30);
  z-index: 701;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}
.ord-drawer.open { transform: translateX(0); }

/* Tabs */
.ord-tabs {
  display: flex;
  border-bottom: 1px solid rgba(102,51,170,0.30);
  background: rgba(10,5,25,0.40);
  flex-shrink: 0;
}
.ord-tab {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  padding: 12px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.ord-tab.active {
  color: #F5C430;
  border-bottom-color: #F5C430;
}
.ord-tab:hover:not(.active) { color: rgba(255,255,255,.75); }

/* Body */
.ord-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
}

/* Loading / error / empty */
.ord-loading,
.ord-error {
  text-align: center;
  padding: 48px 20px;
  color: rgba(255,255,255,.55);
  font-size: .88rem;
}
.ord-error { color: #f87171; }

.ord-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px;
  gap: 10px;
  color: rgba(255,255,255,.70);
}
.ord-empty-ico { font-size: 3rem; }
.ord-empty h3  { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.ord-empty p   { font-size: .83rem; margin: 0; }

/* Tarjeta de pedido (lista) */
.ord-card {
  background: rgba(102,51,170,0.14);
  border: 1px solid rgba(102,51,170,0.28);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ord-card:hover {
  border-color: rgba(245,196,48,0.50);
  background: rgba(102,51,170,0.22);
}

.ord-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ord-num  { font-weight: 700; font-size: .88rem; color: #fff; }
.ord-date { font-size: .75rem; color: rgba(255,255,255,.50); }

.ord-card-total {
  margin-top: 10px;
  font-size: .82rem;
  color: rgba(255,255,255,.65);
}
.ord-card-total strong { color: #F5C430; }

/* Status pill */
.ord-status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.ord-status-lg {
  display: block;
  text-align: center;
  padding: 8px 16px;
  font-size: .80rem;
  margin: 12px 0 18px;
}

.ord-s-pendiente  { background: #374151; color: #d1d5db; }
.ord-s-pagado     { background: #5b21b6; color: #ede9fe; }
.ord-s-preparando { background: #92400e; color: #fde68a; }
.ord-s-enviado    { background: #1e3a5f; color: #bfdbfe; }
.ord-s-entregado  { background: #14532d; color: #bbf7d0; }
.ord-s-cancelado  { background: #7f1d1d; color: #fecaca; }

/* Detalle */
.ord-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255,255,255,.60);
  font-size: .80rem;
  cursor: pointer;
  padding: 0 0 16px;
  transition: color 0.2s;
}
.ord-back:hover { color: #fff; }

.ord-detail-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

/* Items */
.ord-items-list {
  border: 1px solid rgba(102,51,170,0.28);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ord-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(102,51,170,0.18);
}
.ord-item-row:last-child { border-bottom: none; }
.ord-item-name  { font-size: .83rem; color: rgba(255,255,255,.90); flex: 1; }
.ord-item-meta  { display: flex; gap: 12px; align-items: center; }
.ord-item-qty   { font-size: .75rem; color: rgba(255,255,255,.45); }
.ord-item-price { font-size: .83rem; font-weight: 700; color: #F5C430; }

/* Totales */
.ord-totals { display: flex; flex-direction: column; gap: 6px; }
.ord-tot-row {
  display: flex;
  justify-content: space-between;
  font-size: .83rem;
  color: rgba(255,255,255,.65);
}
.ord-tot-disc span:last-child { color: #4ade80; }
.ord-tot-total {
  border-top: 1px solid rgba(102,51,170,0.35);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
}
.ord-tot-total span:last-child { color: #F5C430; }