/* ═══════════════════════════════════════════════════════════════════
   EZGEARS · Design tokens v1.0
   Fuente: Manual de Marca v1.0 (mayo 2026)
   Uso: <link rel="stylesheet" href="/shared/brand-tokens.css">
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── PALETA PRIMARIA ─────────────────────────────────────────── */
  --ez-blue:           #1E6EB2;   /* Azul EZGEARS — protagonista (55%) */
  --ez-blue-deep:      #0B2D44;   /* Azul Profundo (13%) */
  --ez-bone:           #F4F1EC;   /* Hueso (22%) */

  /* ─── ACENTO ──────────────────────────────────────────────────── */
  --ez-electric:       #00C2FF;   /* Eléctrico — solo CTAs, highlights (≤10%) */

  /* ─── NEUTROS ─────────────────────────────────────────────────── */
  --ez-carbon:         #1A1F26;   /* Carbón — dashboards, tech */
  --ez-silver:         #9BA8B5;   /* Plata — líneas, detalle */
  --ez-gray-sys:       #F2F4F7;   /* Gris Sys — fondos UI */

  /* ─── ESCALA DE GRISES (derivada para texto/borders) ──────────── */
  --ez-text:           #1A1F26;   /* texto principal sobre claro */
  --ez-text-muted:     #5F6B78;   /* texto secundario */
  --ez-text-soft:      #9BA8B5;   /* hints, placeholders */
  --ez-text-on-dark:   #F2F4F7;   /* texto sobre Carbón / Azul Profundo */
  --ez-border:         #E5E9EE;   /* borders default */
  --ez-border-strong:  #9BA8B5;   /* borders énfasis */

  /* ─── SEMÁNTICOS ──────────────────────────────────────────────── */
  --ez-success:        #2E8B57;
  --ez-warning:        #E08B00;
  --ez-danger:         #C0392B;
  --ez-info:           #1E6EB2;   /* = Azul EZGEARS */

  /* ─── TIPOGRAFÍA ──────────────────────────────────────────────── */
  --ez-font-display:   'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --ez-font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ez-font-mono:      'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  --ez-fw-light:       300;
  --ez-fw-regular:     400;
  --ez-fw-semibold:    600;
  --ez-fw-bold:        700;

  --ez-lh-tight:       1.15;
  --ez-lh-body:        1.55;     /* Manual de marca, fija */
  --ez-lh-relaxed:     1.7;

  /* ─── ESCALA TIPOGRÁFICA (modular 1.250) ──────────────────────── */
  --ez-fs-xs:          12px;     /* etiquetas, badges */
  --ez-fs-sm:          14px;     /* secundario */
  --ez-fs-base:        16px;     /* cuerpo */
  --ez-fs-lg:          20px;     /* subtítulos */
  --ez-fs-xl:          25px;     /* H2 */
  --ez-fs-2xl:         31px;     /* H1 */
  --ez-fs-3xl:         39px;     /* display */

  /* ─── ESPACIADO (escala 4px) ──────────────────────────────────── */
  --ez-sp-1:           4px;
  --ez-sp-2:           8px;
  --ez-sp-3:           12px;
  --ez-sp-4:           16px;
  --ez-sp-5:           20px;
  --ez-sp-6:           24px;
  --ez-sp-8:           32px;
  --ez-sp-10:          40px;
  --ez-sp-12:          48px;
  --ez-sp-16:          64px;

  /* ─── RADIOS ──────────────────────────────────────────────────── */
  --ez-radius-sm:      4px;
  --ez-radius-md:      8px;      /* default componentes */
  --ez-radius-lg:      12px;     /* cards */
  --ez-radius-xl:      16px;
  --ez-radius-pill:    9999px;

  /* ─── SOMBRAS (mínimas, marca es flat) ────────────────────────── */
  --ez-shadow-sm:      0 1px 2px rgba(11, 45, 68, 0.06);
  --ez-shadow-md:      0 4px 12px rgba(11, 45, 68, 0.08);
  --ez-shadow-focus:   0 0 0 3px rgba(0, 194, 255, 0.35);

  /* ─── DURACIONES ──────────────────────────────────────────────── */
  --ez-dur-fast:       120ms;
  --ez-dur-base:       200ms;
  --ez-dur-slow:       320ms;
  --ez-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ───────────────────────────────────────────────────────────────────
   Carga de fuentes (Google Fonts via CDN público)
   En producción se puede self-host para evitar dependencia externa.
   ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@500&family=Space+Grotesk:wght@300;700&display=swap');

/* ───────────────────────────────────────────────────────────────────
   Reset mínimo + base
   ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--ez-font-body);
  font-size: var(--ez-fs-base);
  line-height: var(--ez-lh-body);
  color: var(--ez-text);
  background: var(--ez-gray-sys);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ez-font-display);
  font-weight: var(--ez-fw-bold);
  line-height: var(--ez-lh-tight);
  color: var(--ez-blue-deep);
  margin: 0;
}
h1 { font-size: var(--ez-fs-2xl); }
h2 { font-size: var(--ez-fs-xl); }
h3 { font-size: var(--ez-fs-lg); }

code, kbd, .ez-mono { font-family: var(--ez-font-mono); font-size: var(--ez-fs-sm); }

a {
  color: var(--ez-blue);
  text-decoration: none;
  transition: color var(--ez-dur-fast) var(--ez-ease);
}
a:hover { color: var(--ez-blue-deep); }
a:focus-visible { outline: none; box-shadow: var(--ez-shadow-focus); border-radius: var(--ez-radius-sm); }

/* ───────────────────────────────────────────────────────────────────
   Componentes utilitarios de marca
   ─────────────────────────────────────────────────────────────────── */

/* Botones */
.ez-btn {
  display: inline-flex; align-items: center; gap: var(--ez-sp-2);
  font-family: var(--ez-font-body); font-size: var(--ez-fs-sm); font-weight: var(--ez-fw-semibold);
  padding: var(--ez-sp-3) var(--ez-sp-5);
  border-radius: var(--ez-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ez-dur-fast) var(--ez-ease),
              border-color var(--ez-dur-fast) var(--ez-ease),
              transform var(--ez-dur-fast) var(--ez-ease);
}
.ez-btn--primary {
  background: var(--ez-blue); color: white;
}
.ez-btn--primary:hover { background: var(--ez-blue-deep); }
.ez-btn--secondary {
  background: transparent; color: var(--ez-blue); border-color: var(--ez-blue);
}
.ez-btn--secondary:hover { background: var(--ez-blue); color: white; }
.ez-btn--cta {
  background: var(--ez-electric); color: var(--ez-blue-deep);
}
.ez-btn--cta:hover { background: #1ACFFF; }
.ez-btn:active { transform: translateY(1px); }
.ez-btn:focus-visible { outline: none; box-shadow: var(--ez-shadow-focus); }

/* Cards */
.ez-card {
  background: white;
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius-lg);
  padding: var(--ez-sp-5);
}
.ez-card--dark {
  background: var(--ez-carbon);
  color: var(--ez-text-on-dark);
  border-color: rgba(255,255,255,0.08);
}

/* KPI tile (estilo dashboard del brochure) */
.ez-kpi {
  background: white;
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius-md);
  padding: var(--ez-sp-4) var(--ez-sp-5);
}
.ez-kpi__label {
  font-size: var(--ez-fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ez-text-muted); margin: 0;
}
.ez-kpi__value {
  font-family: var(--ez-font-display);
  font-size: 28px; font-weight: var(--ez-fw-bold);
  color: var(--ez-blue-deep); margin: var(--ez-sp-1) 0 0;
}
.ez-kpi__delta {
  font-family: var(--ez-font-mono); font-size: var(--ez-fs-xs);
  margin: var(--ez-sp-2) 0 0;
}
.ez-kpi__delta--up   { color: var(--ez-success); }
.ez-kpi__delta--down { color: var(--ez-danger); }

/* Badges */
.ez-badge {
  display: inline-flex; align-items: center;
  font-family: var(--ez-font-mono); font-size: 11px; font-weight: 500;
  padding: 2px var(--ez-sp-2);
  border-radius: var(--ez-radius-sm);
  background: var(--ez-gray-sys); color: var(--ez-text-muted);
  letter-spacing: 0.04em;
}
.ez-badge--success { background: rgba(46,139,87,0.12); color: var(--ez-success); }
.ez-badge--warning { background: rgba(224,139,0,0.12); color: var(--ez-warning); }
.ez-badge--danger  { background: rgba(192,57,43,0.12); color: var(--ez-danger); }
.ez-badge--info    { background: rgba(30,110,178,0.10); color: var(--ez-blue); }

/* Tabla técnica (estilo OT del brochure) */
.ez-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ez-font-body); font-size: var(--ez-fs-sm);
}
.ez-table thead th {
  text-align: left; font-weight: var(--ez-fw-semibold);
  font-size: var(--ez-fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ez-text-muted);
  padding: var(--ez-sp-3) var(--ez-sp-4);
  border-bottom: 1px solid var(--ez-border);
}
.ez-table tbody td {
  padding: var(--ez-sp-3) var(--ez-sp-4);
  border-bottom: 1px solid var(--ez-border);
}
.ez-table tbody tr:hover { background: var(--ez-gray-sys); }
.ez-table .ez-ot-id { font-family: var(--ez-font-mono); color: var(--ez-blue); }