/* =========================================================
   SalesPro Design System (SDS) v1.0.0
   Base visual reusable para ERP, POS y futura tienda web.
   Esta hoja es aditiva: conserva compatibilidad con vistas existentes.
   ========================================================= */

:root {
  /* Brand */
  --sp-primary-950:#0b1220;
  --sp-primary-900:#111827;
  --sp-primary-800:#1e293b;
  --sp-primary-700:#334155;
  --sp-accent-700:#1d4ed8;
  --sp-accent-600:#2563eb;
  --sp-accent-500:#3b82f6;
  --sp-accent-100:#dbeafe;
  --sp-accent-50:#eff6ff;

  /* Semantic */
  --sp-success-700:#047857;
  --sp-success-600:#059669;
  --sp-success-100:#d1fae5;
  --sp-success-50:#ecfdf5;
  --sp-warning-700:#b45309;
  --sp-warning-600:#d97706;
  --sp-warning-100:#fef3c7;
  --sp-warning-50:#fffbeb;
  --sp-danger-700:#b91c1c;
  --sp-danger-600:#dc2626;
  --sp-danger-100:#fee2e2;
  --sp-danger-50:#fef2f2;
  --sp-info-700:#0369a1;
  --sp-info-100:#e0f2fe;
  --sp-info-50:#f0f9ff;

  /* Neutral */
  --sp-gray-950:#020617;
  --sp-gray-900:#0f172a;
  --sp-gray-800:#1e293b;
  --sp-gray-700:#334155;
  --sp-gray-600:#475569;
  --sp-gray-500:#64748b;
  --sp-gray-400:#94a3b8;
  --sp-gray-300:#cbd5e1;
  --sp-gray-200:#e2e8f0;
  --sp-gray-100:#f1f5f9;
  --sp-gray-50:#f8fafc;
  --sp-white:#fff;

  /* Surfaces */
  --sp-page-bg:#f8fafc;
  --sp-surface:#fff;
  --sp-surface-soft:rgba(255,255,255,.88);
  --sp-line:rgba(148,163,184,.25);
  --sp-line-strong:#cbd5e1;
  --sp-text:#0f172a;
  --sp-text-soft:#334155;
  --sp-muted:#64748b;

  /* Typography */
  --sp-font:'Gilroy',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sp-text-xs:11px;
  --sp-text-sm:13px;
  --sp-text-md:15px;
  --sp-text-lg:18px;
  --sp-text-xl:24px;
  --sp-text-2xl:32px;
  --sp-text-3xl:44px;

  /* Radius */
  --sp-radius-xs:8px;
  --sp-radius-sm:11px;
  --sp-radius-md:14px;
  --sp-radius-lg:18px;
  --sp-radius-xl:22px;
  --sp-radius-2xl:28px;
  --sp-radius-pill:999px;

  /* Spacing */
  --sp-space-1:4px;
  --sp-space-2:8px;
  --sp-space-3:12px;
  --sp-space-4:16px;
  --sp-space-5:20px;
  --sp-space-6:24px;
  --sp-space-8:32px;
  --sp-space-10:40px;
  --sp-space-12:48px;

  /* Elevation */
  --sp-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --sp-shadow-sm:0 8px 22px rgba(15,23,42,.06);
  --sp-shadow-md:0 16px 42px rgba(15,23,42,.08);
  --sp-shadow-lg:0 24px 64px rgba(15,23,42,.12);

  /* Motion */
  --sp-ease:cubic-bezier(.2,.8,.2,1);
  --sp-fast:150ms;
  --sp-normal:200ms;

  /* Controls */
  --sp-control-h:44px;
  --sp-control-h-sm:36px;
  --sp-control-h-lg:50px;
}

/* ---------- Shared icon rule ---------- */
.sp-icon,
.sp-btn svg,
.sp-action svg,
.sp-icon-btn svg,
.sp-empty-state svg,
.sp-page-title-icon svg {
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Page headers ---------- */
.sp-page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:8px 0 24px;
}
.sp-page-head-copy {min-width:0}
.sp-page-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--sp-accent-700);
  font-size:var(--sp-text-xs);
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.sp-page-head h1,
.sp-page-title {
  margin:0;
  color:var(--sp-text);
  font-size:clamp(30px,4vw,var(--sp-text-3xl));
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.045em;
}
.sp-page-head p,
.sp-page-description {
  max-width:760px;
  margin:10px 0 0;
  color:var(--sp-muted);
  font-size:var(--sp-text-md);
  line-height:1.55;
}
.sp-page-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

/* ---------- Buttons ---------- */
.sp-btn {
  min-height:var(--sp-control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:var(--sp-radius-md);
  color:#fff!important;
  background:var(--sp-primary-900);
  font:800 var(--sp-text-sm)/1 var(--sp-font);
  text-decoration:none!important;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:var(--sp-shadow-xs);
  transition:transform var(--sp-fast) var(--sp-ease),box-shadow var(--sp-fast) var(--sp-ease),background var(--sp-fast) var(--sp-ease),border-color var(--sp-fast) var(--sp-ease);
}
.sp-btn:hover {transform:translateY(-1px);box-shadow:var(--sp-shadow-sm)}
.sp-btn:active {transform:translateY(0)}
.sp-btn:focus-visible {outline:0;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.sp-btn[disabled],.sp-btn.is-disabled {opacity:.5;pointer-events:none}
.sp-btn--primary {background:var(--sp-primary-900)}
.sp-btn--accent {background:var(--sp-accent-600)}
.sp-btn--success {background:var(--sp-success-600)}
.sp-btn--danger {background:var(--sp-danger-600)}
.sp-btn--warning {color:#fff!important;background:var(--sp-warning-600)}
.sp-btn--secondary {color:var(--sp-text)!important;border-color:var(--sp-gray-200);background:var(--sp-white);box-shadow:none}
.sp-btn--soft {color:var(--sp-text)!important;border-color:transparent;background:var(--sp-gray-100);box-shadow:none}
.sp-btn--ghost {color:var(--sp-text-soft)!important;background:transparent;box-shadow:none}
.sp-btn--sm {min-height:var(--sp-control-h-sm);padding:0 12px;border-radius:var(--sp-radius-sm);font-size:12px}
.sp-btn--lg {min-height:var(--sp-control-h-lg);padding:0 20px;border-radius:16px;font-size:14px}
.sp-btn--block {width:100%}
.sp-icon-btn {
  width:var(--sp-control-h);
  height:var(--sp-control-h);
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--sp-gray-200);
  border-radius:var(--sp-radius-md);
  color:var(--sp-text-soft);
  background:var(--sp-white);
  cursor:pointer;
  transition:all var(--sp-fast) var(--sp-ease);
}
.sp-icon-btn:hover {color:var(--sp-text);border-color:var(--sp-gray-300);box-shadow:var(--sp-shadow-sm);transform:translateY(-1px)}

/* ---------- Cards & panels ---------- */
.sp-card,
.sp-panel {
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-xl);
  background:var(--sp-surface-soft);
  box-shadow:var(--sp-shadow-md);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.sp-card {padding:22px}
.sp-card--flat {box-shadow:none;background:var(--sp-surface)}
.sp-card--compact {padding:16px;border-radius:var(--sp-radius-lg)}
.sp-panel {overflow:hidden}
.sp-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 16px;
}
.sp-panel-head h2,.sp-card h2 {margin:0;color:var(--sp-text);font-size:19px;font-weight:900;letter-spacing:-.025em}
.sp-panel-head p,.sp-card-subtitle {margin:5px 0 0;color:var(--sp-muted);font-size:12px;line-height:1.45}
.sp-panel-body {padding:0 22px 22px}
.sp-card-grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}

/* ---------- Metrics ---------- */
.sp-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sp-metric {
  min-width:0;
  padding:20px;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-xl);
  background:var(--sp-surface-soft);
  box-shadow:var(--sp-shadow-sm);
}
.sp-metric-label {color:var(--sp-muted);font-size:12px;font-weight:800}
.sp-metric-value {margin-top:9px;color:var(--sp-text);font-size:30px;font-weight:900;letter-spacing:-.045em}
.sp-metric-note {margin-top:5px;color:var(--sp-muted);font-size:11px;font-weight:650}

/* ---------- Forms ---------- */
.sp-form-grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.sp-col-12 {grid-column:span 12}.sp-col-8 {grid-column:span 8}.sp-col-6 {grid-column:span 6}.sp-col-4 {grid-column:span 4}.sp-col-3 {grid-column:span 3}
.sp-field {display:flex;flex-direction:column;gap:7px;min-width:0}
.sp-label {color:var(--sp-text-soft);font-size:13px;font-weight:800}
.sp-label .required {color:var(--sp-danger-600)}
.sp-help {color:var(--sp-muted);font-size:11px;line-height:1.45}
.sp-control,
.sp-select,
.sp-textarea {
  width:100%;
  min-height:var(--sp-control-h);
  padding:10px 13px;
  border:1px solid var(--sp-gray-200);
  border-radius:var(--sp-radius-md);
  color:var(--sp-text);
  background:var(--sp-white);
  font:600 14px/1.3 var(--sp-font);
  outline:none;
  transition:border-color var(--sp-fast) var(--sp-ease),box-shadow var(--sp-fast) var(--sp-ease),background var(--sp-fast) var(--sp-ease);
}
.sp-textarea {min-height:110px;resize:vertical}
.sp-control:hover,.sp-select:hover,.sp-textarea:hover {border-color:var(--sp-gray-300)}
.sp-control:focus,.sp-select:focus,.sp-textarea:focus {border-color:var(--sp-accent-500);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.sp-control[disabled],.sp-select[disabled],.sp-textarea[disabled] {color:var(--sp-gray-500);background:var(--sp-gray-100);cursor:not-allowed}
.sp-input-group {position:relative}
.sp-input-group .sp-control {padding-left:42px}
.sp-input-icon {position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--sp-gray-400);pointer-events:none}
.sp-form-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--sp-gray-200)}

/* ---------- Filters ---------- */
.sp-filters {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  padding:18px;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-xl);
  background:rgba(255,255,255,.82);
  box-shadow:var(--sp-shadow-sm);
}
.sp-filter-actions {display:flex;align-items:flex-end;justify-content:flex-end;gap:8px}

/* ---------- Tables ---------- */
.sp-table-wrap {
  width:100%;
  overflow:auto;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-xl);
  background:var(--sp-white);
  box-shadow:var(--sp-shadow-sm);
  -webkit-overflow-scrolling:touch;
}
.sp-table {width:100%;border-collapse:separate;border-spacing:0;background:transparent}
.sp-table th {
  position:relative;
  padding:13px 14px;
  border-bottom:1px solid var(--sp-gray-200);
  color:var(--sp-muted);
  background:var(--sp-gray-50);
  font-size:11px;
  font-weight:900;
  letter-spacing:.075em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}
.sp-table td {padding:14px;border-bottom:1px solid #edf2f7;color:var(--sp-text);font-size:13px;vertical-align:middle}
.sp-table tbody tr:last-child td {border-bottom:0}
.sp-table tbody tr {transition:background var(--sp-fast) var(--sp-ease)}
.sp-table tbody tr:hover {background:#fafcff}
.sp-table-primary {font-weight:850}.sp-table-secondary {margin-top:4px;color:var(--sp-muted);font-size:11px}
.sp-table-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px}
.sp-action {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid var(--sp-gray-200);
  border-radius:10px;
  color:var(--sp-text-soft)!important;
  background:var(--sp-white);
  font-size:11px;
  font-weight:850;
  text-decoration:none!important;
  cursor:pointer;
  transition:all var(--sp-fast) var(--sp-ease);
}
.sp-action:hover {border-color:var(--sp-gray-300);box-shadow:var(--sp-shadow-sm);transform:translateY(-1px)}
.sp-action--edit {color:var(--sp-accent-700)!important;border-color:#bfdbfe;background:var(--sp-accent-50)}
.sp-action--danger {color:var(--sp-danger-700)!important;border-color:#fecaca;background:var(--sp-danger-50)}
.sp-action--success {color:var(--sp-success-700)!important;border-color:#a7f3d0;background:var(--sp-success-50)}

/* ---------- Badges ---------- */
.sp-badge {
  min-height:26px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid transparent;
  border-radius:var(--sp-radius-pill);
  color:var(--sp-text-soft);
  background:var(--sp-gray-100);
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.sp-badge--success {color:var(--sp-success-700);border-color:#a7f3d0;background:var(--sp-success-50)}
.sp-badge--warning {color:var(--sp-warning-700);border-color:#fde68a;background:var(--sp-warning-50)}
.sp-badge--danger {color:var(--sp-danger-700);border-color:#fecaca;background:var(--sp-danger-50)}
.sp-badge--info {color:var(--sp-info-700);border-color:#bae6fd;background:var(--sp-info-50)}
.sp-badge-dot::before {content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Alerts ---------- */
.sp-alert {
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px 16px;
  border:1px solid var(--sp-gray-200);
  border-radius:var(--sp-radius-md);
  color:var(--sp-text-soft);
  background:var(--sp-gray-50);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.sp-alert--success {color:var(--sp-success-700);border-color:#a7f3d0;background:var(--sp-success-50)}
.sp-alert--warning {color:var(--sp-warning-700);border-color:#fde68a;background:var(--sp-warning-50)}
.sp-alert--danger {color:var(--sp-danger-700);border-color:#fecaca;background:var(--sp-danger-50)}
.sp-alert--info {color:var(--sp-info-700);border-color:#bae6fd;background:var(--sp-info-50)}

/* ---------- Empty states ---------- */
.sp-empty-state {padding:38px 22px;text-align:center;color:var(--sp-muted)}
.sp-empty-state-icon {width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;border-radius:17px;color:var(--sp-accent-600);background:var(--sp-accent-50)}
.sp-empty-state-icon svg {width:24px;height:24px}
.sp-empty-state h3 {margin:0;color:var(--sp-text);font-size:17px;font-weight:900}
.sp-empty-state p {max-width:480px;margin:8px auto 0;font-size:12px;line-height:1.55}
.sp-empty-state .sp-btn {margin-top:16px}

/* ---------- Modal ---------- */
.sp-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:2500;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.sp-modal {
  width:min(620px,100%);
  max-height:min(88dvh,860px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--sp-radius-2xl);
  background:var(--sp-white);
  box-shadow:0 32px 90px rgba(2,6,23,.3);
}
.sp-modal-head {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px;border-bottom:1px solid var(--sp-gray-200)}
.sp-modal-head h2 {margin:0;font-size:20px;font-weight:900;letter-spacing:-.025em}
.sp-modal-head p {margin:6px 0 0;color:var(--sp-muted);font-size:12px}
.sp-modal-body {padding:22px 24px}
.sp-modal-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:16px 24px 22px;border-top:1px solid var(--sp-gray-200)}

/* ---------- Pagination ---------- */
.sp-pagination {display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px}
.sp-pagination-list {display:flex;align-items:center;gap:6px}
.sp-page-link {min-width:36px;height:36px;display:grid;place-items:center;padding:0 9px;border:1px solid var(--sp-gray-200);border-radius:10px;color:var(--sp-text-soft)!important;background:var(--sp-white);font-size:12px;font-weight:850;text-decoration:none!important}
.sp-page-link.is-active {color:#fff!important;border-color:var(--sp-primary-900);background:var(--sp-primary-900)}

/* ---------- Utility ---------- */
.sp-stack {display:grid;gap:16px}.sp-stack--sm {gap:10px}.sp-cluster {display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.sp-text-muted {color:var(--sp-muted)}.sp-text-danger {color:var(--sp-danger-700)}.sp-text-success {color:var(--sp-success-700)}
.sp-divider {height:1px;border:0;background:var(--sp-gray-200);margin:20px 0}
.sp-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Legacy bridge ----------
   Permite migrar progresivamente sin romper vistas actuales. */
.page-head {align-items:flex-end;gap:20px}
.page-head h1 {color:var(--sp-text)}
.card,.panel,.data-card,.quote-card,.catalog-card {border-color:var(--sp-line);box-shadow:var(--sp-shadow-md)}
.btn,button.btn,a.btn {min-height:44px;border-radius:var(--sp-radius-md);font-size:13px;box-shadow:var(--sp-shadow-xs)}
.btn.secondary,.btn-sec,.btn-secondary {border-color:var(--sp-gray-200)}
input,select,textarea {border-color:var(--sp-gray-200);border-radius:var(--sp-radius-md)}
input:focus,select:focus,textarea:focus {border-color:var(--sp-accent-500);box-shadow:0 0 0 4px rgba(59,130,246,.12)}

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .sp-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-col-3,.sp-col-4 {grid-column:span 6}
}
@media (max-width:760px) {
  .sp-page-head {display:grid;align-items:start;margin-bottom:18px}
  .sp-page-actions {justify-content:stretch}
  .sp-page-actions .sp-btn {flex:1 1 auto}
  .sp-card {padding:17px;border-radius:var(--sp-radius-lg)}
  .sp-panel-head {padding:18px 17px 14px}.sp-panel-body {padding:0 17px 18px}
  .sp-metrics {grid-template-columns:1fr 1fr;gap:11px}.sp-metric {padding:16px;border-radius:var(--sp-radius-lg)}
  .sp-col-8,.sp-col-6,.sp-col-4,.sp-col-3 {grid-column:span 12}
  .sp-filter-actions {justify-content:stretch}.sp-filter-actions .sp-btn {flex:1 1 auto}
  .sp-table-wrap.sp-table-cards {overflow:visible;border:0;background:transparent;box-shadow:none}
  .sp-table-cards .sp-table,.sp-table-cards tbody,.sp-table-cards tr,.sp-table-cards td {display:block;width:100%}
  .sp-table-cards thead {display:none}
  .sp-table-cards tr {margin-bottom:12px;padding:14px;border:1px solid var(--sp-line);border-radius:var(--sp-radius-lg);background:var(--sp-white);box-shadow:var(--sp-shadow-sm)}
  .sp-table-cards td {display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:8px 0;border:0}
  .sp-table-cards td::before {content:attr(data-label);color:var(--sp-muted);font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
  .sp-table-cards .sp-table-actions {justify-content:stretch}.sp-table-cards .sp-action {flex:1 1 auto;min-height:40px}
  .sp-modal-backdrop {padding:10px;align-items:end}.sp-modal {max-height:92dvh;border-radius:24px 24px 0 0}.sp-modal-head,.sp-modal-body,.sp-modal-actions {padding-left:18px;padding-right:18px}
}
@media (max-width:520px) {
  .sp-metrics {grid-template-columns:1fr}
  .sp-btn {width:100%}
  .sp-btn.sp-btn--inline {width:auto}
  .sp-form-actions {display:grid;grid-template-columns:1fr}
  .sp-table-cards td {grid-template-columns:100px minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}