/* =========================================================
   SalesPro Design System — SPDS 1.1 / Componentes base
   Version 3.2.6.41
   Capa de normalización progresiva para panel y tienda.
   ========================================================= */

/* ---------- Base compartida ---------- */
.spds-admin,
.spds-store {
  color:var(--sp-text-primary);
  font-family:var(--sp-font-family);
  font-size:var(--sp-font-14);
  line-height:var(--sp-line-body);
}

.spds-admin :where(button,input,select,textarea),
.spds-store :where(button,input,select,textarea) {
  font:inherit;
}

.spds-admin :where(h1,h2,h3,h4,p),
.spds-store :where(h1,h2,h3,h4,p) { text-wrap:pretty; }

/* ---------- Tipografía ---------- */
.spds-admin :where(.sp-title-1),.spds-store :where(.sp-title-1){font-size:clamp(var(--sp-font-36),4vw,var(--sp-font-48));line-height:var(--sp-line-tight);font-weight:var(--sp-weight-black);letter-spacing:-.04em}
.spds-admin :where(.sp-title-2),.spds-store :where(.sp-title-2){font-size:var(--sp-font-36);line-height:var(--sp-line-title);font-weight:var(--sp-weight-bold);letter-spacing:-.03em}
.spds-admin :where(.sp-title-3),.spds-store :where(.sp-title-3){font-size:var(--sp-font-28);line-height:var(--sp-line-title);font-weight:var(--sp-weight-bold);letter-spacing:-.025em}
.spds-admin :where(.sp-title-4),.spds-store :where(.sp-title-4){font-size:var(--sp-font-22);line-height:var(--sp-line-title);font-weight:var(--sp-weight-semibold)}

/* ---------- Botones oficiales y puente legado ---------- */
.spds-admin :where(.sp-btn,.btn,button.btn,a.btn),
.spds-store :where(.sp-btn,.sp-store-btn) {
  min-height:var(--sp-control-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-space-8);
  padding:0 var(--sp-space-16);
  border:1px solid transparent;
  border-radius:var(--sp-radius-16);
  color:var(--sp-text-inverse)!important;
  background:var(--sp-color-primary);
  font-size:var(--sp-font-14);
  font-weight:var(--sp-weight-bold);
  line-height:1;
  text-decoration:none!important;
  cursor:pointer;
  box-shadow:var(--sp-shadow-sm);
  transition:background var(--sp-duration-fast) var(--sp-easing),border-color var(--sp-duration-fast) var(--sp-easing),box-shadow var(--sp-duration-fast) var(--sp-easing),transform var(--sp-duration-fast) var(--sp-easing),color var(--sp-duration-fast) var(--sp-easing);
}
.spds-admin :where(.sp-btn,.btn,button.btn,a.btn):hover,
.spds-store :where(.sp-btn,.sp-store-btn):hover {background:var(--sp-color-primary-hover);box-shadow:var(--sp-shadow-md);transform:translateY(-1px)}
.spds-admin :where(.sp-btn,.btn,button.btn,a.btn):active,
.spds-store :where(.sp-btn,.sp-store-btn):active {background:var(--sp-color-primary-active);transform:none}
.spds-admin :where(.sp-btn,.btn,button.btn,a.btn):focus-visible,
.spds-store :where(.sp-btn,.sp-store-btn):focus-visible {outline:0;box-shadow:0 0 0 4px var(--sp-color-focus)}
.spds-admin :where(.sp-btn,.btn,button.btn,a.btn)[disabled],
.spds-store :where(.sp-btn,.sp-store-btn)[disabled] {opacity:.5;pointer-events:none}

.spds-admin :where(.sp-btn--secondary,.sp-btn-secondary,.btn.secondary,.btn-secondary,.btn-sec),
.spds-store :where(.sp-store-btn.is-secondary,.sp-store-btn.secondary) {
  color:var(--sp-text-primary)!important;
  border-color:var(--sp-border);
  background:var(--sp-surface-1);
  box-shadow:none;
}
.spds-admin :where(.sp-btn--secondary,.sp-btn-secondary,.btn.secondary,.btn-secondary,.btn-sec):hover,
.spds-store :where(.sp-store-btn.is-secondary,.sp-store-btn.secondary):hover {border-color:var(--sp-border-strong);background:var(--sp-surface-2)}
.spds-admin :where(.sp-btn--ghost,.btn.ghost,.btn-ghost){color:var(--sp-text-secondary)!important;background:transparent;box-shadow:none}
.spds-admin :where(.sp-btn--danger,.btn.danger,.btn-danger){color:#fff!important;background:var(--sp-danger-600)}
.spds-admin :where(.sp-btn--success,.btn.success,.btn-success){color:#fff!important;background:var(--sp-success-600)}
.spds-admin :where(.sp-btn--sm,.btn.small,.btn-sm){min-height:var(--sp-control-sm);padding:0 var(--sp-space-12);border-radius:var(--sp-radius-8);font-size:var(--sp-font-12)}
.spds-admin :where(.sp-btn--lg,.btn.large,.btn-lg){min-height:var(--sp-control-lg);padding:0 var(--sp-space-24);font-size:var(--sp-font-16)}

/* ---------- Tarjetas ---------- */
.spds-admin :where(.sp-card,.sp-panel,.card,.panel,.data-card,.table-card,.quote-card,.catalog-card),
.spds-store :where(.sp-card,.sp-store-card) {
  border:1px solid var(--sp-border);
  border-radius:var(--sp-radius-24);
  background:var(--sp-surface-1);
  box-shadow:var(--sp-shadow-sm);
}
.spds-admin :where(.sp-card,.card,.data-card,.quote-card,.catalog-card){padding:var(--sp-space-24)}
.spds-admin :where(.sp-panel,.panel,.table-card){overflow:hidden}
.spds-admin :where(.card,.panel,.data-card,.table-card,.quote-card,.catalog-card):hover {border-color:var(--sp-border-strong)}
.spds-admin :where(.card h2,.card h3,.panel h2,.panel h3){color:var(--sp-text-primary);font-weight:var(--sp-weight-bold);letter-spacing:-.02em}

/* ---------- Formularios ---------- */
.spds-admin :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.sp-control,.sp-select,.sp-textarea),
.spds-store :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  width:100%;
  min-height:var(--sp-control-md);
  padding:10px var(--sp-space-12);
  border:1px solid var(--sp-border);
  border-radius:var(--sp-radius-16);
  color:var(--sp-text-primary);
  background:var(--sp-surface-1);
  font-size:var(--sp-font-14);
  font-weight:var(--sp-weight-medium);
  outline:0;
  box-shadow:none;
  transition:border-color var(--sp-duration-fast) var(--sp-easing),box-shadow var(--sp-duration-fast) var(--sp-easing),background var(--sp-duration-fast) var(--sp-easing);
}
.spds-admin :where(textarea,.sp-textarea),.spds-store textarea{min-height:112px;resize:vertical}
.spds-admin :where(input,select,textarea,.sp-control,.sp-select,.sp-textarea):hover,
.spds-store :where(input,select,textarea):hover {border-color:var(--sp-border-strong)}
.spds-admin :where(input,select,textarea,.sp-control,.sp-select,.sp-textarea):focus,
.spds-store :where(input,select,textarea):focus {border-color:var(--sp-color-secondary);box-shadow:0 0 0 4px var(--sp-color-focus)}
.spds-admin :where(input,select,textarea)[disabled],.spds-store :where(input,select,textarea)[disabled]{color:var(--sp-text-muted);background:var(--sp-surface-2);cursor:not-allowed}
.spds-admin :where(label,.label,.sp-label),.spds-store label{color:var(--sp-text-secondary);font-size:var(--sp-font-14);font-weight:var(--sp-weight-semibold)}
.spds-admin :where(.muted,.help,.sp-help),.spds-store :where(.muted,.help){color:var(--sp-text-muted);font-size:var(--sp-font-12)}
.spds-admin :where(input[type="checkbox"],input[type="radio"]),.spds-store :where(input[type="checkbox"],input[type="radio"]){accent-color:var(--sp-color-primary)}

/* ---------- Tablas ---------- */
.spds-admin :where(.sp-table-wrap,.table-wrap,.table-card){width:100%;overflow:auto;border:1px solid var(--sp-border);border-radius:var(--sp-radius-24);background:var(--sp-surface-1);box-shadow:var(--sp-shadow-sm);-webkit-overflow-scrolling:touch}
.spds-admin :where(table,.sp-table){width:100%;border-collapse:separate;border-spacing:0;background:transparent}
.spds-admin :where(table thead th,.sp-table th){padding:var(--sp-space-12) var(--sp-space-16);border-bottom:1px solid var(--sp-border);color:var(--sp-text-muted);background:var(--sp-surface-2);font-size:var(--sp-font-12);font-weight:var(--sp-weight-bold);letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap}
.spds-admin :where(table tbody td,.sp-table td){padding:var(--sp-space-16);border-bottom:1px solid var(--sp-border);color:var(--sp-text-primary);font-size:var(--sp-font-14);vertical-align:middle}
.spds-admin :where(table tbody tr:last-child td,.sp-table tbody tr:last-child td){border-bottom:0}
.spds-admin :where(table tbody tr,.sp-table tbody tr){transition:background var(--sp-duration-fast) var(--sp-easing)}
.spds-admin :where(table tbody tr:hover,.sp-table tbody tr:hover){background:var(--sp-surface-2)}

/* ---------- Badges ---------- */
.spds-admin :where(.sp-badge,.badge),.spds-store :where(.sp-badge,.badge){min-height:26px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--sp-border);border-radius:var(--sp-radius-pill);color:var(--sp-text-secondary);background:var(--sp-surface-2);font-size:var(--sp-font-12);font-weight:var(--sp-weight-bold);line-height:1;white-space:nowrap}
.spds-admin :where(.sp-badge--success,.badge.success,.badge.is-success){color:var(--sp-success-700);border-color:color-mix(in srgb,var(--sp-success-600) 24%,transparent);background:var(--sp-success-50)}
.spds-admin :where(.sp-badge--warning,.badge.warning,.badge.is-warning){color:var(--sp-warning-700);border-color:color-mix(in srgb,var(--sp-warning-600) 24%,transparent);background:var(--sp-warning-50)}
.spds-admin :where(.sp-badge--danger,.badge.danger,.badge.is-danger){color:var(--sp-danger-700);border-color:color-mix(in srgb,var(--sp-danger-600) 24%,transparent);background:var(--sp-danger-50)}
.spds-admin :where(.sp-badge--info,.badge.info,.badge.is-info){color:var(--sp-info-700);border-color:color-mix(in srgb,var(--sp-info-600) 24%,transparent);background:var(--sp-info-50)}
.spds-admin :where(.sp-badge--primary,.badge.primary,.badge.active){color:var(--sp-brand-700);border-color:var(--sp-brand-100);background:var(--sp-brand-50)}

/* ---------- Alertas ---------- */
.spds-admin :where(.sp-alert,.alert,.notice),.spds-store :where(.sp-alert,.alert,.notice){display:flex;align-items:flex-start;gap:var(--sp-space-12);padding:var(--sp-space-16);border:1px solid var(--sp-border);border-radius:var(--sp-radius-16);color:var(--sp-text-secondary);background:var(--sp-surface-2);font-size:var(--sp-font-14);font-weight:var(--sp-weight-medium);line-height:var(--sp-line-body)}
.spds-admin :where(.sp-alert--success,.alert.success,.notice.success){color:var(--sp-success-700);border-color:color-mix(in srgb,var(--sp-success-600) 24%,transparent);background:var(--sp-success-50)}
.spds-admin :where(.sp-alert--warning,.alert.warning,.notice.warning){color:var(--sp-warning-700);border-color:color-mix(in srgb,var(--sp-warning-600) 24%,transparent);background:var(--sp-warning-50)}
.spds-admin :where(.sp-alert--danger,.alert.danger,.notice.danger,.alert.error){color:var(--sp-danger-700);border-color:color-mix(in srgb,var(--sp-danger-600) 24%,transparent);background:var(--sp-danger-50)}
.spds-admin :where(.sp-alert--info,.alert.info,.notice.info){color:var(--sp-info-700);border-color:color-mix(in srgb,var(--sp-info-600) 24%,transparent);background:var(--sp-info-50)}

/* ---------- Modales ---------- */
.spds-admin :where(.sp-modal-backdrop,.modal-backdrop,.modal-overlay){background:rgba(9,14,26,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.spds-admin :where(.sp-modal,.modal,.modal-content,.popup-content){border:1px solid var(--sp-border);border-radius:var(--sp-radius-24);background:var(--sp-surface-1);box-shadow:var(--sp-shadow-lg);color:var(--sp-text-primary)}
.spds-admin :where(.sp-modal-head,.modal-header){padding:var(--sp-space-24);border-bottom:1px solid var(--sp-border)}
.spds-admin :where(.sp-modal-body,.modal-body){padding:var(--sp-space-24)}
.spds-admin :where(.sp-modal-actions,.modal-footer){display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-space-8);padding:var(--sp-space-16) var(--sp-space-24) var(--sp-space-24);border-top:1px solid var(--sp-border)}

/* ---------- Estados oscuros ---------- */
html[data-theme="dark"] .spds-admin,
body.dark-mode.spds-admin,
html[data-store-mode="dark"] .spds-store {
  --sp-success-50:rgba(5,150,105,.12);
  --sp-warning-50:rgba(217,119,6,.12);
  --sp-danger-50:rgba(220,38,38,.12);
  --sp-info-50:rgba(2,132,199,.12);
  --sp-brand-50:rgba(124,58,237,.14);
  --sp-brand-100:rgba(139,92,246,.24);
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .spds-admin :where(.sp-card,.card,.data-card,.quote-card,.catalog-card){padding:var(--sp-space-16);border-radius:var(--sp-radius-16)}
  .spds-admin :where(.sp-modal,.modal,.modal-content,.popup-content){border-radius:var(--sp-radius-24) var(--sp-radius-24) 0 0}
  .spds-admin :where(.sp-modal-head,.sp-modal-body,.modal-header,.modal-body){padding:var(--sp-space-16)}
  .spds-admin :where(.sp-modal-actions,.modal-footer){padding:var(--sp-space-16)}
}

@media (max-width:520px){
  .spds-admin :where(.sp-btn,.btn,button.btn,a.btn):not(.sp-btn--inline):not(.btn-inline){width:100%}
}