/* ================================================================
   Barriles Campo — Design Tokens v1
   La única fuente de verdad para colores, spacing, type, motion.
   Nunca hardcodear valores: usar var() siempre.
   ================================================================ */
:root {
  /* --- Brand (Aldyl) --- */
  --aldyl-navy-900: #0b1220;
  --aldyl-navy-800: #0f172a;
  --aldyl-navy-700: #1e293b;
  --aldyl-navy-600: #334155;
  --aldyl-blue-700: #1e3a8a;
  --aldyl-blue-600: #1e40af;
  --aldyl-blue-500: #3b82f6;
  --aldyl-blue-400: #60a5fa;
  --aldyl-blue-100: #dbeafe;

  /* --- Semantic status (equipo SCADA) --- */
  --status-live:    #10b981;   /* verde — <5min */
  --status-stale:   #f59e0b;   /* ámbar — 5-60min */
  --status-offline: #ef4444;   /* rojo — >60min */
  --status-info:    var(--aldyl-blue-500);
  --status-warn:    var(--status-stale);
  --status-danger:  var(--status-offline);
  --status-success: var(--status-live);

  /* --- Tipos de pozo --- */
  --type-bcp: #3b82f6;
  --type-bm:  #8b5cf6;
  --type-gl:  #f59e0b;
  --type-ot:  #6b7280;
  --type-ef:  #10b981;

  /* --- Campos --- */
  --campo-jobo:     #f59e0b;
  --campo-pilon:    #8b5cf6;
  --campo-morichal: #10b981;
  --campo-uverito:  #ef4444;
  --campo-yac:      #64748b;

  /* --- Neutrals / Surface (light mode default) --- */
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --surface-3:    #f1f5f9;
  --surface-4:    #e2e8f0;
  --border:       #e2e8f0;
  --border-strong:#cbd5e1;

  /* --- Text (light) --- */
  --text:         #0f172a;
  --text-strong:  #020617;
  --text-muted:   #475569;  /* bumped from #64748b for AA contrast */
  --text-subtle:  #64748b;
  --text-invert:  #ffffff;

  /* --- Brand aliases --- */
  --brand-primary: var(--aldyl-navy-900);
  --brand-accent:  var(--aldyl-blue-500);
  --brand-accent-strong: var(--aldyl-blue-700);

  /* --- Spacing scale (4px base) --- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* --- Border radius --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* --- Shadow / elevation --- */
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md: 0 2px 6px rgba(15,23,42,.06), 0 4px 10px rgba(15,23,42,.08);
  --sh-lg: 0 6px 14px rgba(15,23,42,.08), 0 12px 28px rgba(15,23,42,.12);
  --sh-xl: 0 20px 60px rgba(15,23,42,.3);

  /* --- Typography --- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --letter-wide:  0.5px;
  --letter-wider: 1px;

  /* --- Motion --- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease:   cubic-bezier(.2,.6,.2,1);

  /* --- Focus ring --- */
  --focus-ring: 0 0 0 3px rgba(59,130,246,.4);
  --focus-ring-danger: 0 0 0 3px rgba(239,68,68,.4);

  /* --- Layout --- */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 56px;
  --content-max: 1600px;
}

/* ================================================================
   DARK MODE — override tokens (NO componentes)
   ================================================================ */
[data-theme="dark"] {
  --surface:      #0f172a;
  --surface-2:    #1e293b;
  --surface-3:    #334155;
  --surface-4:    #475569;
  --border:       #334155;
  --border-strong:#475569;

  --text:         #f1f5f9;
  --text-strong:  #ffffff;
  --text-muted:   #cbd5e1;
  --text-subtle:  #94a3b8;

  --sh-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
  --sh-md: 0 2px 6px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.4);
  --sh-lg: 0 6px 14px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.5);
  --sh-xl: 0 20px 60px rgba(0,0,0,.5);

  --aldyl-blue-100: rgba(59,130,246,.15);
}

/* Preferencia del sistema (si localStorage no definió nada) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:      #0f172a;
    --surface-2:    #1e293b;
    --surface-3:    #334155;
    --surface-4:    #475569;
    --border:       #334155;
    --border-strong:#475569;
    --text:         #f1f5f9;
    --text-strong:  #ffffff;
    --text-muted:   #cbd5e1;
    --text-subtle:  #94a3b8;
  }
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-2); color: var(--text); font-size: var(--text-base); line-height: var(--lh-base); }

/* Global focus-visible — a11y crítico */
:focus-visible {
  outline: 2px solid var(--aldyl-blue-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--aldyl-blue-500);
  outline-offset: 2px;
}

/* Skip link */
.skip-to-main { position: absolute; left: -9999px; top: var(--sp-2); background: var(--aldyl-blue-700); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); z-index: 10000; }
.skip-to-main:focus { left: var(--sp-2); }

/* Scrollbar más fino en WebKit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: padding-box; }