/* ═══════════════════════════════════════════════
   DHL PICKUPS PAGE — Styles
   ═══════════════════════════════════════════════ */

/* ── Stats Cards ── */
.pkps-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.pkps-stat-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: white;
  border: 1px solid var(--g100, #f1f5f9);
  border-radius: 14px;
  transition: all 0.3s var(--ease, ease);
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.pkps-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.pkps-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.pkps-stat-icon.st-total { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.pkps-stat-icon.st-scheduled { background: linear-gradient(135deg, #fefce8, #fde68a); }
.pkps-stat-icon.st-completed { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.pkps-stat-icon.st-cancelled { background: linear-gradient(135deg, #fef2f2, #fecaca); }

.pkps-stat-info { display: flex; flex-direction: column; }
.pkps-stat-val {
  font-size: 1.5rem; font-weight: 800;
  color: var(--navy-800, #0a1628);
  line-height: 1;
}
.pkps-stat-label {
  font-size: 0.78rem; font-weight: 600;
  color: var(--g500, #64748b);
  margin-top: 4px;
}

/* ── Toolbar ── */
.pkps-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.pkps-toolbar-left { display: flex; align-items: center; gap: 10px; }
.pkps-btn-new {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; border: none; border-radius: 10px;
  font-size: 0.88rem; font-weight: 700;
  font-family: var(--font, inherit);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245,158,11,.2);
  transition: all 0.25s var(--ease, ease);
}
.pkps-btn-new:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,158,11,.3);
}
.pkps-btn-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px; border: 1.5px solid var(--g200, #e2e8f0);
  background: white; cursor: pointer;
  color: var(--g500, #64748b);
  transition: all 0.2s;
}
.pkps-btn-refresh:hover {
  border-color: var(--navy-300, #93c5fd);
  color: var(--navy-600, #1e4d78);
  transform: rotate(180deg);
}
.pkps-btn-refresh svg { width: 18px; height: 18px; }

/* ── Table ── */
.pkps-dispatch {
  font-family: var(--mono, monospace);
  font-size: 0.8rem; font-weight: 700;
  color: var(--navy-700, #1e4d78);
  background: var(--navy-50, #eff6ff);
  padding: 3px 8px; border-radius: 6px;
}
.pkps-guia-link {
  font-family: var(--mono, monospace);
  font-size: 0.8rem; font-weight: 600;
  color: var(--navy-600, #2a6da8);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.pkps-guia-link:hover { color: var(--red-500, #d32f2f); }

.pkps-status {
  display: inline-flex; align-items: center;
  font-size: 0.78rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  white-space: nowrap;
}
.pkps-st-programada { background: #fefce8; color: #92400e; }
.pkps-st-completada { background: #f0fdf4; color: #166534; }
.pkps-st-cancelada { background: #fef2f2; color: #991b1b; }

.pkps-btn-cancel {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 8px;
  border: 1.5px solid #fca5a5;
  background: #fef2f2; color: #dc2626;
  font-size: 0.75rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  font-family: var(--font, inherit);
}
.pkps-btn-cancel:hover {
  background: #dc2626; color: #fff;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220,38,38,.15);
}

/* ── Edit button (visible until 14:15 hrs) ── */
.pkps-btn-edit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 8px;
  border: 1.5px solid #93c5fd;
  background: #eff6ff; color: #1d4ed8;
  font-size: 0.75rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  font-family: var(--font, inherit);
  margin-right: 6px;
}
.pkps-btn-edit:hover {
  background: #1d4ed8; color: #fff;
  border-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(29,78,216,.18);
}

/* ── Edit-locked indicator (after 14:15) ── */
.pkps-edit-locked {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 8px;
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc; color: #64748b;
  font-size: 0.72rem; font-weight: 700;
  margin-right: 6px;
  cursor: help;
  white-space: nowrap;
}

.pkps-na { color: var(--g300, #cbd5e1); font-size: 0.82rem; }

/* ── Loading & Empty ── */
.pkps-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 40px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--g500, #64748b);
}
.pkps-loading .cl-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--g200, #e2e8f0);
  border-top-color: var(--navy-400, #2a6da8);
  border-radius: 50%;
  animation: cpspin 0.6s linear infinite;
}

/* ── Confirm Cancel Modal ── */
.pkps-confirm-card {
  background: white;
  border-radius: 20px;
  padding: 32px;
  width: 440px; max-width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: pkpSlideUp 0.4s var(--ease, cubic-bezier(.22,1,.36,1)) both;
}
.pkps-confirm-icon { font-size: 2.5rem; margin-bottom: 12px; }
.pkps-confirm-title {
  margin: 0 0 8px; font-size: 1.15rem; font-weight: 800;
  color: var(--navy-800, #0a1628);
}
.pkps-confirm-desc {
  margin: 0 0 24px; font-size: 0.88rem;
  color: var(--g500, #64748b); line-height: 1.5;
}
.pkps-confirm-actions {
  display: flex; gap: 10px; justify-content: center;
}

/* ── Count Badge ── */
.pkps-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  background: var(--navy-50, #eff6ff);
  color: var(--navy-700, #1e4d78);
  border-radius: 20px;
  font-size: 0.75rem; font-weight: 800;
  font-family: var(--mono, monospace);
}

/* ═══ DARK MODE ═══ */
:root.dark-mode .pkps-stat-card { background: #1f2937; border-color: #374151; }
:root.dark-mode .pkps-stat-val { color: #f3f4f6; }
:root.dark-mode .pkps-stat-label { color: #9ca3af; }
:root.dark-mode .pkps-stat-icon.st-total { background: rgba(37,99,235,.12); }
:root.dark-mode .pkps-stat-icon.st-scheduled { background: rgba(245,158,11,.12); }
:root.dark-mode .pkps-stat-icon.st-completed { background: rgba(16,185,129,.12); }
:root.dark-mode .pkps-stat-icon.st-cancelled { background: rgba(239,68,68,.12); }
:root.dark-mode .pkps-dispatch { background: rgba(37,99,235,.1); color: #93c5fd; }
:root.dark-mode .pkps-guia-link { color: #60a5fa; }
:root.dark-mode .pkps-st-programada { background: rgba(254,252,232,.1); color: #fbbf24; }
:root.dark-mode .pkps-st-completada { background: rgba(16,185,129,.1); color: #34d399; }
:root.dark-mode .pkps-st-cancelada { background: rgba(239,68,68,.1); color: #f87171; }
:root.dark-mode .pkps-btn-cancel { background: rgba(239,68,68,.08); border-color: #7f1d1d; color: #f87171; }
:root.dark-mode .pkps-btn-cancel:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
:root.dark-mode .pkps-btn-edit { background: rgba(59,130,246,.1); border-color: #1e3a5f; color: #93c5fd; }
:root.dark-mode .pkps-btn-edit:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
:root.dark-mode .pkps-edit-locked { background: rgba(30,41,59,.6); border-color: #475569; color: #94a3b8; }
:root.dark-mode .pkps-btn-refresh { background: #1f2937; border-color: #374151; color: #9ca3af; }
:root.dark-mode .pkps-confirm-card { background: #1f2937; }
:root.dark-mode .pkps-confirm-title { color: #f3f4f6; }
:root.dark-mode .pkps-confirm-desc { color: #9ca3af; }
:root.dark-mode .pkps-count-badge { background: rgba(37,99,235,.1); color: #60a5fa; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .pkps-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pkps-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .pkps-stats { grid-template-columns: 1fr; }
}