/* ─── Paleta Vectorizer ──────────────────────────────────────────
   Tonos azul-noche con accent celeste. Optimizado para uso táctil:
   tipografía grande, radios generosos, botones ≥44px en móvil.
*/
:root {
  /* Capas de superficie (de fondo a primer plano) */
  --bg-0: #0a1322;          /* fondo de página */
  --bg-1: #14213a;          /* tarjetas / paneles */
  --bg-2: #1a2a47;          /* filas hover, inputs */
  --bg-3: #233553;          /* chips, headers de tarjeta */

  /* Texto */
  --fg-0: #e7eef7;          /* texto principal */
  --fg-1: #a8b4c8;          /* texto secundario */
  --fg-2: #7585a0;          /* texto terciario / hints */
  --fg-3: #4a5772;          /* placeholders, divisores fuertes */

  /* Acento principal: celeste brillante */
  --accent: #3fb6ff;
  --accent-strong: #2aa3ee;
  --accent-soft: rgba(63, 182, 255, 0.14);
  --accent-bg: rgba(63, 182, 255, 0.18);
  --accent-fg: #061826;     /* texto sobre el accent (alto contraste) */

  /* Estados */
  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.16);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.16);
  --yellow: #f59e0b;
  --yellow-soft: rgba(245, 158, 11, 0.16);
  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, 0.16);
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.16);
  /* Aviso (deriva de plan, trabajo sin colocar…). Alias del ámbar. */
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.16);

  /* Bordes */
  --border: #233553;
  --border-soft: #1c2a45;
  --border-strong: #2e4366;

  /* Radios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Espaciado */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Tipografía */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Tamaños de texto (un punto por encima del original para ergonomía móvil) */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* Tap targets (mínimo recomendado WCAG 2.5.5) */
  --tap: 44px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(63, 182, 255, 0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }

/* Mejor scrollbar oscuro */
* { scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }