/* ============================================================
   D&D Repuestos y Servicios — Sistema de diseño central
   Fuente única de verdad: colores, tipografía, espaciados,
   radios y sombras. Cargar en TODAS las páginas, antes del
   <style> propio de cada una (para poder usar var(--ds-*)).

   Modos: claro (por defecto) / oscuro / sistema
   Activar oscuro con [data-theme="dark"] en <html>.
   Requiere theme.js para el toggle (clase .ds-bg en <body>).
   ============================================================ */

:root {
  /* ---------- Superficie base: modo claro ---------- */
  --ds-bg-page:      #f4f5f7;
  --ds-bg-card:       #ffffff;
  --ds-bg-elevated:   #f9fafb;
  --ds-bg-subtle:     #f1f2f5;
  --ds-bg-input:      #ffffff;

  /* Barra de cabecera de sección: degradado azul → negro (no naranja) */
  --ds-header-bar: linear-gradient(135deg, #2c3e50 0%, #16202c 100%);
  --ds-header-bar-text: #ffffff;

  /* ---------- Acento naranja — USO MÍNIMO: solo CTA primario, focos y datos clave ---------- */
  --ds-accent:       #ff7a1a;
  --ds-accent-hover: #ff9244;
  --ds-accent-deep:  #e8650a;
  --ds-accent-soft:  rgba(255, 122, 26, 0.10);
  --ds-accent-ring:  rgba(255, 122, 26, 0.20);
  --ds-text-on-accent: #1a1208;

  /* ---------- Texto ---------- */
  --ds-text-primary:   #1c1f26;
  --ds-text-secondary: #4b5563;
  --ds-text-muted:     #7c8493;

  /* ---------- Bordes y separadores ---------- */
  --ds-border:        #e2e5ea;
  --ds-border-subtle: #edeff2;

  /* ---------- Estados (neutros, distintos del acento naranja) ---------- */
  --ds-success:      #15834f;
  --ds-success-bg:   #e3f7ed;
  --ds-warning:      #b5650b;
  --ds-warning-bg:   #fdf0dd;
  --ds-danger:       #c4314b;
  --ds-danger-bg:    #fbe6ea;
  --ds-info:         #2563eb;
  --ds-info-bg:      #e6eefd;

  /* ---------- Tipografía ---------- */
  --ds-font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Tahoma, Geneva, Verdana, sans-serif;
  --ds-font-mono: 'Courier New', Consolas, monospace;
  --ds-text-xs:   11px;
  --ds-text-sm:   13px;
  --ds-text-base: 14px;
  --ds-text-md:   16px;
  --ds-text-lg:   20px;
  --ds-text-xl:   26px;
  --ds-weight-regular: 400;
  --ds-weight-medium:  600;
  --ds-weight-bold:    700;

  /* ---------- Espaciado (escala de 4px) ---------- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  /* ---------- Radios ---------- */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;

  /* ---------- Sombras ---------- */
  --ds-shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --ds-shadow-md: 0 8px 24px rgba(15,23,42,0.10);
  --ds-shadow-lg: 0 16px 40px rgba(15,23,42,0.14);

  /* ---------- Fondo de página (var compuesta, usada por .ds-bg) ---------- */
  --ds-page-bg: var(--ds-bg-page);
  color-scheme: light;
}

/* ============================================================
   MODO OSCURO — negro degradado a azul, naranja solo de acento
   ============================================================ */
html[data-theme="dark"] {
  --ds-bg-page:      #0a0c12;
  --ds-bg-card:       #12141c;
  --ds-bg-elevated:   #171a24;
  --ds-bg-subtle:     #1a1d27;
  --ds-bg-input:      #0d0f15;

  --ds-header-bar: linear-gradient(135deg, #1c2c44 0%, #06070a 100%);
  --ds-header-bar-text: #F1F2F4;

  --ds-accent-soft:  rgba(255, 122, 26, 0.14);
  --ds-accent-ring:  rgba(255, 122, 26, 0.28);
  --ds-text-on-accent: #161208;

  --ds-text-primary:   #F1F2F4;
  --ds-text-secondary: #C7CCD6;
  --ds-text-muted:     #868D9B;

  --ds-border:        #262a35;
  --ds-border-subtle: #1d2029;

  --ds-success-bg:   rgba(31, 181, 116, 0.14);
  --ds-success:      #34d399;
  --ds-warning-bg:   rgba(245, 165, 36, 0.14);
  --ds-warning:      #f5a524;
  --ds-danger-bg:    rgba(240, 80, 110, 0.14);
  --ds-danger:       #f87171;
  --ds-info-bg:      rgba(79, 156, 249, 0.14);
  --ds-info:         #60a5fa;

  /* Sombra + leve realce superior (estilo "premium"), discreto, no compite con el naranja */
  --ds-shadow-sm: inset 0 1px 0 rgba(255,255,255,0.035), 0 2px 8px rgba(0,0,0,0.35);
  --ds-shadow-md: inset 0 1px 0 rgba(255,255,255,0.045), 0 8px 24px rgba(0,0,0,0.45);
  --ds-shadow-lg: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.55);

  --ds-glow-blue: rgba(59, 110, 196, 0.10);

  --ds-page-bg:
    radial-gradient(circle at 85% -12%, rgba(255,122,26,0.06), transparent 42%),
    radial-gradient(circle at 8% 105%, var(--ds-glow-blue), transparent 50%),
    linear-gradient(160deg, #06070a 0%, #0b1320 55%, #0a0c12 100%);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { background: var(--ds-bg-page); }
body { font-family: var(--ds-font-sans); color: var(--ds-text-primary); }

/* ---------- Fondo de página: aplicar en <body> o wrapper principal ---------- */
.ds-bg {
  background: var(--ds-page-bg);
  min-height: 100vh;
  transition: background 0.2s;
}

/* ---------- Superficies ---------- */
.ds-card {
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}

/* ---------- Barra de cabecera de sección (reemplaza el gradiente naranja) ---------- */
.ds-header-bar {
  background: var(--ds-header-bar);
  color: var(--ds-header-bar-text);
  padding: 10px 16px;
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-medium);
}

/* ---------- Botones ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  padding: 10px 18px; border-radius: var(--ds-radius-sm); border: none;
  cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s;
}
.ds-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ds-btn-primary {
  background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-accent-deep) 100%);
  color: var(--ds-text-on-accent);
}
.ds-btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 20px var(--ds-accent-ring);
  transform: translateY(-1px);
}

.ds-btn-secondary {
  background: var(--ds-bg-elevated);
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border);
}
.ds-btn-secondary:hover:not(:disabled) { background: var(--ds-bg-subtle); color: var(--ds-text-primary); }

.ds-btn-danger { background: var(--ds-danger); color: #fff; }
.ds-btn-danger:hover:not(:disabled) { opacity: 0.88; }

/* ---------- Inputs ---------- */
.ds-input { width: 100%; padding: 10px 12px; border-radius: var(--ds-radius-sm); background: var(--ds-bg-input); border: 1.5px solid var(--ds-border); color: var(--ds-text-primary); font-size: var(--ds-text-base); }
.ds-input::placeholder { color: var(--ds-text-muted); }
.ds-input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }

/* ---------- Badges de estado ---------- */
.ds-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); text-transform: uppercase; letter-spacing: 0.4px; }
.ds-badge-success { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-badge-warning { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-badge-danger  { background: var(--ds-danger-bg);  color: var(--ds-danger); }
.ds-badge-info    { background: var(--ds-info-bg);    color: var(--ds-info); }
.ds-badge-accent  { background: var(--ds-accent-soft); color: var(--ds-accent); }

/* ---------- Texto utilitario ---------- */
.ds-text-muted  { color: var(--ds-text-muted); }
.ds-text-accent { color: var(--ds-accent); }
.ds-mono        { font-family: var(--ds-font-mono); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ds-bg-page); }
::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-text-muted); }

/* ============================================================
   TOGGLE DE TEMA (claro / oscuro / sistema)
   Reutilizable en cualquier página: <div class="ds-theme-toggle">…</div>
   ============================================================ */
.ds-theme-toggle {
  display: flex; gap: 4px;
  background: var(--ds-bg-subtle); border-radius: 8px; padding: 4px;
}
.ds-theme-toggle button {
  padding: 6px 12px; border: none; background: transparent; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--ds-text-muted); cursor: pointer;
  font-family: inherit; display: flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.ds-theme-toggle button.active {
  background: var(--ds-bg-card); color: var(--ds-text-primary); box-shadow: var(--ds-shadow-sm);
}
.ds-theme-toggle button:hover:not(.active) { color: var(--ds-text-primary); }
