/* ─────────────────────────────────────────────────────────────────
   HUB MODULOS JONNY · iTorq® PROTORQ
   PALETA CORPORATIVA PROTORQ:
     · Negro (background)
     · Naranja PROTORQ #ff8000 (marca y acentos)
     · Blanco (tinta)
   Estados (rojo/amarillo/verde) reservados para advertencias técnicas.
   Origen: consistencia con Sales Console + Commercial Hub PROTORQ.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Fondos / capas (negro corporativo) ──────── */
  --bg:        #0a0e14;
  --bg-2:      #0f141c;
  --panel:     #141a23;
  --panel-2:   #1a212c;
  --panel-3:   #11161f;
  --bg-grad:   radial-gradient(circle at 15% 0%, rgba(255,140,26,.04), transparent 50%),
               radial-gradient(circle at 85% 100%, rgba(255,140,26,.03), transparent 50%),
               #0a0e14;
  --line:      rgba(255,255,255,.06);
  --line-soft: rgba(255,255,255,.03);
  --line-hard: rgba(255,255,255,.12);

  /* ── Tinta (blanco corporativo) ──────────────── */
  --text:        #e6edf3;
  --text-strong: #ffffff;
  --text-dim:    #8b949e;
  --text-soft:   #5c6773;

  /* ── MARCA PROTORQ · NARANJA ─────────────────── */
  --orange:      #ff8000;
  --orange-2:    #ff7a00;
  --orange-soft: rgba(255,140,26,.16);
  --orange-line: rgba(255,140,26,.32);
  --orange-glow: rgba(255,140,26,.40);

  /* Alias semánticos: marca primaria = naranja */
  --brand:       #ff8000;
  --brand-deep:  #ff7a00;
  --brand-ink:   #d96b00;
  --grad-active: linear-gradient(135deg, #ff8000 0%, #ff7a00 100%);
  --grad-brand:  linear-gradient(135deg, #ff8000 0%, #d96b00 100%);

  /* ── ESTADOS (solo advertencias técnicas) ────── */
  --green:       #4ade80;
  --green-soft:  rgba(74,222,128,.16);
  --green-line:  rgba(74,222,128,.32);

  --yellow:      #fbbf24;
  --yellow-soft: rgba(251,191,36,.16);
  --yellow-line: rgba(251,191,36,.32);

  --red:         #f87171;
  --red-soft:    rgba(248,113,113,.16);
  --red-line:    rgba(248,113,113,.32);

  /* Aliases para no romper código existente · todos mapean al naranja
     porque ya no usamos cyan/blue/purple decorativos */
  --cyan:        #ff8000;
  --cyan-soft:   rgba(255,140,26,.16);
  --cyan-line:   rgba(255,140,26,.32);
  --purple:      #ff8000;
  --purple-soft: rgba(255,140,26,.12);

  /* Naranja "advertencia" (más rojo) para distinguir de la marca */
  --alert:       #fb923c;
  --alert-soft:  rgba(251,146,60,.16);
  --alert-line:  rgba(251,146,60,.32);

  --gray:        #8b949e;
  --gray-soft:   rgba(139,148,158,.16);

  /* ── Tipografía ──────────────────────────────── */
  --font:      "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Escalas */
  --t-9:  9px;
  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;
  --t-34: 34px;
  --t-44: 44px;

  /* ── Espaciado ──────────────────────────────── */
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;

  /* ── Radios ─────────────────────────────────── */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-18: 18px;

  /* ── Sombras ─────────────────────────────────── */
  --sh-card:   0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.45);
  --sh-pop:    0 12px 36px rgba(0,0,0,.65);
  --sh-glow-b: 0 0 0 1px rgba(255,140,26,.35), 0 0 18px rgba(255,140,26,.20);
  --sh-glow-g: 0 0 0 1px rgba(74,222,128,.35),  0 0 18px rgba(74,222,128,.18);
  --sh-glow-r: 0 0 0 1px rgba(248,113,113,.35), 0 0 22px rgba(248,113,113,.22);

  /* ── Layout ──────────────────────────────────── */
  --sidebar-w:    180px;
  --topbar-h:     56px;
  --contextbar-h: 44px;
  --rightpane-w:  340px;
}

/* ─── Reset operativo ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--t-13);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }
::-webkit-scrollbar-track { background: transparent; }

::selection { background: var(--orange-soft); color: var(--text-strong); }