/* =============================================================================
   NPDS — NexHub Professional Design System
   npds.css
   ----------------------------------------------------------------------------
   Single source of truth for the design system. ONE file, loaded with ONE link:

     <link rel="stylesheet" href="path/to/01-foundations/npds.css">

   Sections:
     1. FONTS              — @font-face declarations (Posterama 2001, Posterman, Noto Sans)
     2. TOKENS             — :root design tokens (color, type, radius, shadow, motion)
     3. THEMES             — multi-theme accent overrides (oscuro/azul/verde/...)
     4. BS-BRIDGE          — Bootstrap 5 variables → NPDS tokens
     5. BASE               — html/body, scrollbar, focus
     6. TYPOGRAPHY         — logo, wordmark, headings, body, semantic classes
     7. UTILITIES          — color/surface helpers, .tabular, focus-ring
     8. BUTTONS            — .btn, .btn-{primary,success,...}, .btn-icon, .btn-label-*
     9. NAV-PILLS          — non-rounded NPDS pills
    10. CARDS              — radius 12px, soft shadow, hover lift
    11. BADGES             — .bg-label-* pills
    12. DROPDOWN           — slate shadow, accent active
    13. THEME-BANDS        — legacy .Gris/.Azul/.Verde/... full-bleed surfaces
    14. COMPONENTS         — extracted: qty-stepper, row-actions, search-states,
                              segmented toolbar, range-filter, KPI cards
   ============================================================================= */


/* =============================================================================
   1. FONTS
   ----------------------------------------------------------------------------
   - Posterama 2001 (W04, 6 weights): brand-only. Logo lockup, product
     wordmarks, brand-level display in marketing. NEVER for UI/body/headings.
   - Posterman: brand-alt display (PERSONAL USE cut). Marketing accents only.
   - Noto Sans / Noto Sans Mono: the system font for everything else.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=Noto+Sans+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Posterama";
  src: url("/fonts/npds/Posterama-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Posterama";
  src: url("/fonts/npds/Posterama-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Posterama";
  src: url("/fonts/npds/Posterama-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Posterama";
  src: url("/fonts/npds/Posterama-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Posterama";
  src: url("/fonts/npds/Posterama-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Posterama";
  src: url("/fonts/npds/Posterama-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Posterman";
  src: url("/fonts/npds/Posterman-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* =============================================================================
   2. TOKENS
   ============================================================================= */
:root {
  /* ---------- Slate scale ---------- */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --slate-bg-toolbar: #fafbfc;

  /* ---------- Accent (blue) ---------- */
  --accent-300: #93c5fd;
  --accent-400: #3b82f6;
  --accent-500: #2563eb;
  --accent-600: #1d4ed8;
  --accent-soft-50: #eff6ff;
  --accent-soft-100: #dbeafe;

  /* ---------- Semantics ---------- */
  --success-500: #10b981;
  --success-600: #16a34a;
  --success-700: #198754;
  --success-800: #047857;
  --success-soft: #dcfce7;
  --success-softer: #d1fae5;
  --success-text: #059669;
  --success-text-strong: #065f46;

  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-soft: #fef3c7;
  --warning-softer: #fffbeb;

  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-soft: #fee2e2;
  --danger-softer: #fef2f2;

  --info-500: #0369a1;
  --info-600: #1e40af;
  --info-soft: #e0f2fe;

  /* ---------- Surfaces ---------- */
  --surface: #ffffff;
  --surface-soft: var(--slate-50);
  --surface-toolbar: var(--slate-bg-toolbar);
  --border: var(--slate-200);
  --border-soft: var(--slate-100);

  /* ---------- Signature gradient (Oscuro modal headers) ---------- */
  --gradient-oscuro: linear-gradient(145deg, #0f172a 0%, #334155 60%, #0f172a 100%);
  --modal-backdrop: rgba(15, 23, 42, 0.55);

  /* ---------- White transparencies on Oscuro ---------- */
  --white-18: rgba(255, 255, 255, 0.18);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-88: rgba(255, 255, 255, 0.88);
  --white-82: rgba(255, 255, 255, 0.82);

  /* ---------- Radii ---------- */
  --radius-modal: 16px;
  --radius-card: 12px;
  --radius-input: 10px;
  --radius-btn: 8px;
  --radius-chip: 6px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-modal:   0 24px 48px rgba(15, 23, 42, 0.25);
  --shadow-lift:    0 8px 16px rgba(37, 99, 235, 0.10);
  --shadow-cta:     0 4px 10px rgba(37, 99, 235, 0.25);
  --shadow-dropdown:0 8px 24px rgba(15, 23, 42, 0.08);
  --focus-ring:     0 0 0 3px rgba(37, 99, 235, 0.15);

  /* ---------- Spacing canon ---------- */
  --pad-modal-hero:   32px 28px 24px;
  --pad-modal-body:   32px 28px 24px;
  --pad-modal-footer: 16px 24px 22px;
  --pad-panel-head:   14px 18px;
  --pad-panel-body:   18px;
  --pad-card-body:    1.5rem;
  --pad-section:      18px 20px;

  /* ---------- Transitions ---------- */
  --t-fast:    0.15s ease;
  --t-tap:     0.20s ease;
  --t-modal:   0.22s cubic-bezier(0.22, 1, 0.36, 1);
  --t-material:cubic-bezier(0.4, 0, 0.2, 1);
  --ease-btn:  0.18s ease;

  /* ---------- Type families ----------
     --font-logo         → Posterama. Logo lockup + product wordmarks ONLY.
     --font-brand-display→ Posterama. Marketing hero/display ONLY.
     --font-brand-script → Posterman. Marketing accents ONLY.
     --font-sans         → Noto Sans. THE system font (UI/body/headings).
     --font-display      → Noto Sans (heavier). Display-size headings.
     --font-mono         → Noto Sans Mono. Code/tokens/numbers.
  */
  --font-logo: "Posterama", "Noto Sans", sans-serif;
  --font-brand-display: "Posterama", "Noto Sans", sans-serif;
  --font-brand-script: "Posterman", "Posterama", cursive;
  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type sizes ---------- */
  --fs-h1-wizard:  1.75rem;
  --fs-hero:       1.35rem;
  --fs-paso:       1.25rem;
  --fs-section:    0.98rem;
  --fs-panel:      0.95rem;
  --fs-body:       0.9rem;
  --fs-label:      0.9rem;
  --fs-hint:       0.82rem;
  --fs-meta:       0.75rem;
  --fs-chip:       0.69rem;

  /* ---------- Foreground tokens ---------- */
  --fg-1: var(--slate-900);
  --fg-2: var(--slate-700);
  --fg-3: var(--slate-500);
  --fg-4: var(--slate-400);
  --fg-muted: #6c757d;
  --fg-on-dark: #ffffff;

  /* ---------- Lift / button motion (preserved from legacy) ---------- */
  --lift-y:        -1px;
  --lift-shadow:   0 0.25rem 0.5rem 0 rgba(var(--accent-rgb, 15, 23, 42), 0.30);
  --idle-shadow:   0 0.125rem 0.25rem 0 rgba(var(--accent-rgb, 15, 23, 42), 0.40);

  /* ---------- Semantic accents (NOT theme-affected) ---------- */
  --success:       #16a34a;  --success-rgb:  22, 163, 74;
  --info:          #0369a1;  --info-rgb:     3, 105, 161;
  --warning:       #f59e0b;  --warning-rgb:  245, 158, 11;
  --danger:        #dc2626;  --danger-rgb:   220, 38, 38;
}


/* =============================================================================
   3. THEMES — institutional palettes (oscuro default + 6 alternates)
   Apply on <html> or any wrapper:  data-theme="oscuro|azul|verde|morado|rojo|turquesa|gris"
   ============================================================================= */
:root,
[data-theme="oscuro"] {
  --accent:        #0f172a;
  --accent-rgb:    15, 23, 42;
  --accent-soft:   #1e293b;
  --accent-tint:   rgba(15, 23, 42, 0.08);
  --accent-on:     #ffffff;
}
[data-theme="azul"] {
  --accent: #283593; --accent-rgb: 40, 53, 147;
  --accent-soft: #1a237e; --accent-tint: rgba(40, 53, 147, 0.10);
  --accent-on: #ffffff;
}
[data-theme="verde"] {
  --accent: #004d40; --accent-rgb: 0, 77, 64;
  --accent-soft: #00352d; --accent-tint: rgba(0, 77, 64, 0.10);
  --accent-on: #ffffff;
}
[data-theme="morado"] {
  --accent: #572364; --accent-rgb: 87, 35, 100;
  --accent-soft: #3f1849; --accent-tint: rgba(87, 35, 100, 0.10);
  --accent-on: #ffffff;
}
[data-theme="rojo"] {
  --accent: #7b1f2e; --accent-rgb: 123, 31, 46;
  --accent-soft: #5c1722; --accent-tint: rgba(123, 31, 46, 0.10);
  --accent-on: #ffffff;
}
[data-theme="turquesa"] {
  --accent: #008080; --accent-rgb: 0, 128, 128;
  --accent-soft: #006666; --accent-tint: rgba(0, 128, 128, 0.10);
  --accent-on: #ffffff;
}
[data-theme="gris"] {
  --accent: #424242; --accent-rgb: 66, 66, 66;
  --accent-soft: #2e2e2e; --accent-tint: rgba(66, 66, 66, 0.10);
  --accent-on: #ffffff;
}


/* =============================================================================
   4. BS-BRIDGE — Bootstrap 5 variables → NPDS tokens
   ============================================================================= */
:root {
  --bs-body-bg:         #f8fafc;
  --bs-body-color:      #334155;
  --bs-body-font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

  --bs-primary:         var(--accent);
  --bs-primary-rgb:     var(--accent-rgb);
  --bs-secondary:       #64748b;     --bs-secondary-rgb: 100, 116, 139;
  --bs-success:         var(--success); --bs-success-rgb: var(--success-rgb);
  --bs-info:            var(--info);    --bs-info-rgb:    var(--info-rgb);
  --bs-warning:         var(--warning); --bs-warning-rgb: var(--warning-rgb);
  --bs-danger:          var(--danger);  --bs-danger-rgb:  var(--danger-rgb);
  --bs-dark:            #0f172a;     --bs-dark-rgb:     15, 23, 42;
  --bs-light:           #f1f5f9;
  --bs-border-color:    #e2e8f0;

  --bs-card-border-radius:        12px;
  --bs-card-inner-border-radius:  12px;
  --bs-card-border-color:         #e2e8f0;

  --bs-dropdown-bg:                  #fff;
  --bs-dropdown-color:               #334155;
  --bs-dropdown-border-color:        #e2e8f0;
  --bs-dropdown-border-radius:       10px;
  --bs-dropdown-link-color:          #334155;
  --bs-dropdown-link-hover-color:    #0f172a;
  --bs-dropdown-link-hover-bg:       rgba(15, 23, 42, 0.04);
  --bs-dropdown-link-active-color:   var(--accent);
  --bs-dropdown-link-active-bg:      var(--accent-tint);
  --bs-dropdown-divider-bg:          #e2e8f0;
  --bs-dropdown-box-shadow:          0 8px 16px rgba(15, 23, 42, 0.10);
}


/* =============================================================================
   5. BASE
   ============================================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { background: #f8fafc; color: #334155; }

/* Scrollbar — single, slate, theme-agnostic */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }


/* =============================================================================
   6. TYPOGRAPHY
   ============================================================================= */

/* ---- Logo + wordmark (Posterama only) ----------------------------------------
   Brand-only. NEVER use these for UI copy or headings.

     <span class="npds-logo">
       <span class="npds-logo__nex">NEX</span><span class="npds-logo__hub">HUB</span>
     </span>
     <span class="npds-wordmark">Retail</span>
   --------------------------------------------------------------------------- */
.npds-logo {
  font-family: var(--font-logo);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  color: var(--fg-1);
}
.npds-logo__nex { font-weight: 700; }
.npds-logo__hub { font-weight: 400; }

.npds-wordmark {
  font-family: var(--font-logo);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--fg-1);
}

/* ---- Semantic type classes ------------------------------------------------ */
.npds-h1-wizard      { font-size: var(--fs-h1-wizard); font-weight: 500; color: var(--fg-muted); margin: 0; }
.npds-hero-title     { font-size: var(--fs-hero); font-weight: 700; color: var(--fg-on-dark); margin: 0; }
.npds-hero-sub       { font-size: 0.88rem; color: var(--white-88); margin: 0; }
.npds-paso-title     { font-size: var(--fs-paso); font-weight: 700; color: var(--fg-1); margin: 0; }
.npds-panel-title    { font-size: var(--fs-panel); font-weight: 700; color: var(--fg-1); margin: 0; }
.npds-section-title  { font-size: var(--fs-section); font-weight: 700; color: var(--fg-1); margin: 0; }
.npds-body           { font-size: var(--fs-body); font-weight: 400; color: var(--fg-2); }
.npds-label          { font-size: var(--fs-label); font-weight: 600; color: var(--fg-2); }
.npds-hint           { font-size: var(--fs-hint); font-weight: 400; color: var(--fg-3); }
.npds-meta {
  font-size: var(--fs-meta); font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.npds-meta-soft { color: var(--slate-400); }

/* Plain HTML headings, scoped to .npds container */
.npds h1 { font-size: 2rem;    font-weight: 700; color: var(--fg-1); }
.npds h2 { font-size: 1.5rem;  font-weight: 700; color: var(--fg-1); }
.npds h3 { font-size: 1.15rem; font-weight: 700; color: var(--fg-1); }
.npds h4 { font-size: 1rem;    font-weight: 700; color: var(--fg-1); }
.npds p  { color: var(--fg-2); font-size: var(--fs-body); line-height: 1.5; }
.npds code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--accent-soft-50); color: var(--accent-500);
  padding: 1px 6px; border-radius: 6px;
}


/* =============================================================================
   7. UTILITIES
   ============================================================================= */
.tabular { font-variant-numeric: tabular-nums; }

.bg-surface       { background: var(--surface); }
.bg-surface-soft  { background: var(--surface-soft); }
.bg-toolbar       { background: var(--surface-toolbar); }
.bg-oscuro        { background: var(--gradient-oscuro); color: var(--fg-on-dark); }

.bg-primary-soft  { background: var(--accent-soft-50); }
.bg-success-soft  { background: var(--success-soft); color: var(--success-600); }
.bg-warning-soft  { background: var(--warning-soft); color: var(--warning-700); }
.bg-danger-soft   { background: var(--danger-soft);  color: var(--danger-800); }
.bg-info-soft     { background: var(--info-soft);    color: var(--info-600); }

.text-primary-npds { color: var(--accent-500); }
.text-success-npds { color: var(--success-600); }
.text-warning-npds { color: var(--warning-700); }
.text-danger-npds  { color: var(--danger-600); }
.text-muted-npds   { color: var(--fg-3); }
.text-fg-1 { color: var(--fg-1); }
.text-fg-2 { color: var(--fg-2); }
.text-fg-3 { color: var(--fg-3); }

.npds-focus-ring:focus,
.npds-focus-ring:focus-visible {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: var(--focus-ring);
}


/* =============================================================================
   8. BUTTONS — preserve legacy lift+shadow feel; color follows theme.
   ============================================================================= */
.btn {
  border-radius: 8px;
  font-weight: 500;
  transition: background-color var(--ease-btn),
              border-color var(--ease-btn),
              color var(--ease-btn),
              transform var(--ease-btn),
              box-shadow var(--ease-btn);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25) !important;
}

/* Primary — follows the active theme accent */
.btn-primary {
  color: var(--accent-on) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--accent-rgb), 0.40);
}
.btn-primary:hover {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0.25rem 0.5rem rgba(var(--accent-rgb), 0.30) !important;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-outline-primary {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  color: var(--accent-on) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--accent-rgb), 0.40) !important;
}

.btn-label-primary {
  color: var(--accent) !important;
  background: var(--accent-tint) !important;
  border-color: transparent !important;
}
.btn-label-primary:hover {
  color: var(--accent-on) !important;
  background: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(var(--accent-rgb), 0.40) !important;
}

/* Semantics — fixed (do NOT follow theme) */
.btn-success  { background:#16a34a !important; border-color:#16a34a !important; color:#fff !important; box-shadow: 0 0.125rem 0.25rem rgba(22,163,74,.40); }
.btn-success:hover  { background:#15803d !important; border-color:#15803d !important; transform: translateY(-1px) !important; box-shadow: 0 0.25rem 0.5rem rgba(22,163,74,.30) !important; }
.btn-outline-success { color:#16a34a !important; border-color:#16a34a !important; background:transparent !important; }
.btn-outline-success:hover { background:#16a34a !important; color:#fff !important; transform: translateY(-1px) !important; }
.btn-label-success { color:#16a34a !important; background:rgba(22,163,74,.10) !important; border-color:transparent !important; }
.btn-label-success:hover { background:#16a34a !important; color:#fff !important; transform: translateY(-1px) !important; }

.btn-info  { background:#0369a1 !important; border-color:#0369a1 !important; color:#fff !important; box-shadow: 0 0.125rem 0.25rem rgba(3,105,161,.40); }
.btn-info:hover  { background:#075985 !important; border-color:#075985 !important; transform: translateY(-1px) !important; box-shadow: 0 0.25rem 0.5rem rgba(3,105,161,.30) !important; }
.btn-outline-info { color:#0369a1 !important; border-color:#0369a1 !important; background:transparent !important; }
.btn-outline-info:hover { background:#0369a1 !important; color:#fff !important; transform: translateY(-1px) !important; }
.btn-label-info { color:#0369a1 !important; background:rgba(3,105,161,.10) !important; border-color:transparent !important; }
.btn-label-info:hover { background:#0369a1 !important; color:#fff !important; transform: translateY(-1px) !important; }

.btn-warning  { background:#f59e0b !important; border-color:#f59e0b !important; color:#fff !important; box-shadow: 0 0.125rem 0.25rem rgba(245,158,11,.40); }
.btn-warning:hover  { background:#d97706 !important; border-color:#d97706 !important; transform: translateY(-1px) !important; box-shadow: 0 0.25rem 0.5rem rgba(245,158,11,.30) !important; }
.btn-outline-warning { color:#b45309 !important; border-color:#f59e0b !important; background:transparent !important; }
.btn-outline-warning:hover { background:#f59e0b !important; color:#fff !important; transform: translateY(-1px) !important; }
.btn-label-warning { color:#b45309 !important; background:rgba(245,158,11,.12) !important; border-color:transparent !important; }
.btn-label-warning:hover { background:#f59e0b !important; color:#fff !important; transform: translateY(-1px) !important; }

.btn-danger  { background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important; box-shadow: 0 0.125rem 0.25rem rgba(220,38,38,.40); }
.btn-danger:hover  { background:#b91c1c !important; border-color:#b91c1c !important; transform: translateY(-1px) !important; box-shadow: 0 0.25rem 0.5rem rgba(220,38,38,.30) !important; }
.btn-outline-danger { color:#dc2626 !important; border-color:#dc2626 !important; background:transparent !important; }
.btn-outline-danger:hover { background:#dc2626 !important; color:#fff !important; transform: translateY(-1px) !important; }
.btn-label-danger { color:#dc2626 !important; background:rgba(220,38,38,.10) !important; border-color:transparent !important; }
.btn-label-danger:hover { background:#dc2626 !important; color:#fff !important; transform: translateY(-1px) !important; }

/* Secondary — slate neutro */
.btn-secondary { background:#64748b !important; border-color:#64748b !important; color:#fff !important; box-shadow: 0 0.125rem 0.25rem rgba(100,116,139,.30); }
.btn-secondary:hover { background:#475569 !important; border-color:#475569 !important; transform: translateY(-1px) !important; }
.btn-outline-secondary { color:#475569 !important; border-color:#cbd5e1 !important; background:#fff !important; }
.btn-outline-secondary:hover { background:#f8fafc !important; color:#0f172a !important; border-color:#94a3b8 !important; transform: translateY(-1px) !important; }
.btn-label-secondary { color:#475569 !important; background:#f1f5f9 !important; border-color:transparent !important; }
.btn-label-secondary:hover { background:#475569 !important; color:#fff !important; transform: translateY(-1px) !important; }

/* btn-icon — square, no padding */
.btn-icon    { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.btn-sm.btn-icon { width:30px; height:30px; }


/* =============================================================================
   9. NAV-PILLS — non-rounded, theme-aware
   ============================================================================= */
.nav-pills {
  --bs-nav-pills-border-radius: 8px;
  --bs-nav-pills-link-active-bg: var(--accent);
  --bs-nav-pills-link-active-color: var(--accent-on);
  gap: 4px;
}
.nav-pills .nav-link {
  border-radius: 8px !important;
  padding: 6px 14px;
  color: #475569;
  font-weight: 500;
  font-size: 0.86rem;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color var(--ease-btn), color var(--ease-btn), border-color var(--ease-btn);
}
.nav-pills .nav-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(var(--accent-rgb), 0.30);
}


/* =============================================================================
   10. CARDS
   ============================================================================= */
.card {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.card[class*="card-border-shadow-"]:hover,
.card[class*="card-hover-border-"]:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px);
}
.card-header,
.card-footer { border-color: #e2e8f0 !important; background: transparent; }


/* =============================================================================
   11. BADGES — bg-label-* in NPDS palette, no uppercase
   ============================================================================= */
.badge { text-transform: none !important; letter-spacing: 0; font-weight: 500; }

.bg-label-primary   { background-color: var(--accent-tint) !important;       color: var(--accent) !important; }
.bg-label-secondary { background-color: #f1f5f9 !important;                  color: #475569 !important; }
.bg-label-success   { background-color: rgba(22, 163, 74, 0.10) !important;  color: #16a34a !important; }
.bg-label-info      { background-color: rgba(3, 105, 161, 0.10) !important;  color: #0369a1 !important; }
.bg-label-warning   { background-color: rgba(245, 158, 11, 0.12) !important; color: #b45309 !important; }
.bg-label-danger    { background-color: #fee2e2 !important;                  color: #dc2626 !important; }
.bg-label-dark      { background-color: #e2e8f0 !important;                  color: #0f172a !important; }


/* =============================================================================
   12. DROPDOWN
   ============================================================================= */
.dropdown-menu {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.10) !important;
}


/* =============================================================================
   13. THEME-BANDS — legacy .Gris/.Azul/... full-bleed surfaces.
   They double as theme scopes (override --accent for descendants).
   ============================================================================= */
.Gris,     [data-theme="gris"]     { --accent:#424242; --accent-rgb:66,66,66;     --accent-soft:#2e2e2e; --accent-tint:rgba(66,66,66,.10);    --accent-on:#fff; }
.Azul,     [data-theme="azul"]     { --accent:#283593; --accent-rgb:40,53,147;    --accent-soft:#1a237e; --accent-tint:rgba(40,53,147,.10);   --accent-on:#fff; }
.Verde,    [data-theme="verde"]    { --accent:#004d40; --accent-rgb:0,77,64;      --accent-soft:#00352d; --accent-tint:rgba(0,77,64,.10);     --accent-on:#fff; }
.Morado,   [data-theme="morado"]   { --accent:#572364; --accent-rgb:87,35,100;    --accent-soft:#3f1849; --accent-tint:rgba(87,35,100,.10);   --accent-on:#fff; }
.Rojo,     [data-theme="rojo"]     { --accent:#7b1f2e; --accent-rgb:123,31,46;    --accent-soft:#5c1722; --accent-tint:rgba(123,31,46,.10);   --accent-on:#fff; }
.Turquesa, [data-theme="turquesa"] { --accent:#008080; --accent-rgb:0,128,128;    --accent-soft:#006666; --accent-tint:rgba(0,128,128,.10);   --accent-on:#fff; }
.Gris, .Azul, .Verde, .Morado, .Rojo, .Turquesa { opacity: 1 !important; color: #fff; }


/* =============================================================================
   14. COMPONENTS — extracted from preview <style> blocks
   ----------------------------------------------------------------------------
   Canonical NPDS components. Use these classes directly in any page.
   ============================================================================= */

/* ---- Quantity stepper ----------------------------------------------------- */
.npds-stepper {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 8px; overflow: hidden;
}
.npds-stepper button {
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--slate-600); cursor: pointer;
  font-size: 0.85rem; font-family: inherit;
}
.npds-stepper button:hover { background: var(--slate-100); color: var(--accent); }
.npds-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.npds-stepper .val {
  min-width: 38px; text-align: center;
  font-size: 0.88rem; font-weight: 600; color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--slate-200); border-right: 1px solid var(--slate-200);
  height: 28px; display: inline-flex; align-items: center; justify-content: center;
}
.npds-stepper.lg button { width: 36px; height: 36px; font-size: 0.95rem; }
.npds-stepper.lg .val   { min-width: 56px; font-size: 1rem; height: 36px; }

/* ---- Unit chip (kg/un/lt) ------------------------------------------------- */
.npds-unit {
  font-size: 11px; font-weight: 600;
  color: var(--slate-500); background: var(--slate-100);
  padding: 2px 8px; border-radius: 999px;
}

/* ---- Row actions (table action column) ------------------------------------ */
.npds-row-actions { display: inline-flex; gap: 6px; justify-content: center; }
.npds-row-actions .btn-icon,
.row-actions .btn-icon {
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 0.78rem; line-height: 1;
  transition: background var(--ease-btn), color var(--ease-btn), transform var(--ease-btn);
}
.npds-row-actions .btn-icon:hover { transform: translateY(-1px); }
.npds-row-actions .btn-icon:active { transform: translateY(0); }

/* ---- Add-CTA (+ green pill at the top of a list) -------------------------- */
.npds-add-cta {
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: var(--success); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  box-shadow: 0 2px 4px rgba(22,163,74,0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.npds-add-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(22,163,74,0.35);
  background: #15803d;
}

/* ---- Search input (boxed, with leading icon) ------------------------------ */
.npds-search {
  padding: 10px 14px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-card);
}
.npds-search i { color: var(--slate-400); }
.npds-search input {
  flex: 1; border: none; outline: none;
  font-size: 0.88rem; color: var(--slate-900);
  font-family: inherit; background: transparent;
}
.npds-search input::placeholder { color: var(--slate-400); }

/* ---- Search input · in-card variant (relative wrap with positioned icons) - */
.npds-search-wrap { position: relative; padding: 14px 14px 0; }
.npds-search-wrap i.pre {
  position: absolute; left: 24px; top: 24px;
  color: var(--slate-400); font-size: 0.85rem;
}
.npds-search-wrap input {
  width: 100%; padding: 9px 34px 9px 34px;
  border: 1px solid var(--slate-200); border-radius: 10px;
  font-size: 0.88rem; font-family: inherit;
  color: var(--slate-900); background: #fff;
}
.npds-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.npds-search-wrap .clear {
  position: absolute; right: 24px; top: 25px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--slate-200); color: var(--slate-500); border: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
}

/* ---- Empty / idle state inside a card ------------------------------------- */
.npds-empty {
  padding: 18px 14px; min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
}
.npds-empty i   { font-size: 1.6rem; color: var(--slate-300); }
.npds-empty .ttl { font-size: 0.88rem; font-weight: 600; color: var(--slate-600); }
.npds-empty .sub { font-size: 0.78rem; color: var(--slate-400); }

/* ---- ID chip (used in tables for IDs / SKUs) ------------------------------ */
.npds-id-chip {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--slate-200); background: #fff;
  border-radius: 8px;
  font-size: 0.78rem; color: var(--accent); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- State pill (Activo / Decreciente / etc.) ----------------------------- */
.npds-badge-state {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.npds-badge-state--activo { background:#e8fadf; color:#5d9b29; border:1px solid #c1e9a4; }
.npds-badge-state--decre  { background:#ffe0db; color:#ff3e1d; border:1px solid #ff8e7a; }