/* ═══════════════════════════════════════════════════════════════════════
   AgentID design system — shared across all journey pages (no build).

   TWO layers in one file:

   1. `.aid` — the redesign language ("Rediseño AgentID PoC", 2026-07-10):
      paper/panel/ink tokens with LIGHT + DARK themes, EN/ES bilingual
      display rules and the GLOBAL NAV bar. New journey pages (home,
      /payments, /lifecycle, /delegation) are built on this.

   2. Legacy dark components (sheets, kv, chips) kept at global scope so the
      existing cinema pages (/trust, /learn, /dashboard) keep rendering
      until each one is re-ported to `.aid` (Story/Map/Steps designs).
   ═══════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; }
[x-cloak] { display: none !important; }

/* ── 1. Redesign tokens (source: Rediseño AgentID PoC / AgentID Map.dc.html) ── */
.aid {
  --paper: #0e1116; --panel: #151a21; --panel-2: #1b212a;
  --ink: #eceff3; --ink-2: #a7b0bc; --ink-3: #6f7a87;
  --line: #212831; --line-2: #2c333f; --accent: #5b8cff;
  --buyer: #5b9bff; --supplier: #b98cff; --issuer: #e0b445; --bank: #54c06f; --anchor: #7c8798;
  --ok: #54c06f; --warn: #e0b445; --err: #e0616e;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 24px 48px -30px rgba(0,0,0,.8);
  --font: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  background: var(--paper); color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.aid.light {
  --paper: #f4f3ee; --panel: #ffffff; --panel-2: #efeee7;
  --ink: #191b1f; --ink-2: #555b64; --ink-3: #8b909a;
  --line: #e6e4da; --line-2: #dbd9ce; --accent: #2860e0;
  --buyer: #2f6fe0; --supplier: #8a54d6; --issuer: #a9790a; --bank: #2c9150; --anchor: #8b909a;
  --ok: #2c9150; --warn: #a9790a; --err: #c23a48;
  --shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 44px -30px rgba(20,22,28,.4);
}
.aid ::selection { background: var(--accent); color: #fff; }

/* bilingual: default EN; [data-lang="es"] flips */
.aid .lang-es { display: none; }
.aid[data-lang="es"] .lang-es { display: revert; }
.aid[data-lang="es"] .lang-en { display: none; }

/* ── GLOBAL NAV (bar mode) ── */
.aid-nav {
  flex: none; height: 60px; display: flex; align-items: center; gap: 22px;
  padding: 0 22px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.aid-nav a { text-decoration: none; }
.aid-nav-brand { display: flex; align-items: center; gap: 9px; color: var(--accent); }
.aid-nav-brand span { font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.aid-nav-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.aid-tab { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; color: var(--ink-3); font-size: 13.5px; font-weight: 500; }
.aid-tab:hover { color: var(--ink); background: var(--panel-2); }
.aid-tab.aid-current { background: var(--panel-2); color: var(--ink); font-weight: 600; }
.aid-tab-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.aid-tab.aid-soon { opacity: .45; cursor: default; }
.aid-tab-soon { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--warn); border: 1px solid var(--line-2); border-radius: 7px; padding: 1px 6px; }
.aid-nav-spacer { flex: 1; }
.aid-lang { display: flex; align-items: center; gap: 6px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.aid-lang button { border: none; background: none; padding: 4px 8px; border-radius: 6px; font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.aid-lang button.on { background: var(--panel-2); color: var(--ink); }
.aid-lang-sep { width: 1px; height: 14px; background: var(--line); }
.aid-theme-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }

/* GLOBAL NAV (floating mode — cinema pages keep their own HUD) */
.aid-float-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--ink); font-family: var(--font); font-weight: 600; font-size: 12.5px;
  box-shadow: var(--shadow);
}
.aid-float-btn:hover { border-color: var(--accent); }
.aid-float-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(3,5,9,.55); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px; }
.aid-float-menu { width: min(320px, 92vw); border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--shadow); margin-bottom: 56px; }
.aid-float-title { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 13px 16px 7px; }
.aid-float-item { display: flex; align-items: center; gap: 11px; padding: 10px 16px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.aid-float-item:hover { background: var(--panel-2); }
.aid-float-item.aid-current { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.aid-float-item.aid-soon { opacity: .45; cursor: default; }
.aid-float-desc { font-size: 10.5px; color: var(--ink-3); display: block; }

/* ── shared vocabulary on redesign tokens ── */
.aid .sec-title { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }
.aid .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.aid .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink-2); }
.aid .badge-sandbox { color: var(--warn); }
.aid .badge-ok { color: var(--ok); }
.aid .badge-err { color: var(--err); }
.aid .badge-live { color: var(--ok); }

/* ═══════════════ 2. Legacy dark components (cinema pages) ═══════════════
   Consumed by /trust?classic=1 · /playground · /dashboard until their full
   redesign port. Do NOT restyle — matches the current cinema look. */

/* Base look of the legacy pages: they relied on rules that used to live in
   each monolith's <style>; the .aid tokens are scoped, so non-.aid bodies
   need their own base or they fall back to serif/white (bug caught by Javi,
   2026-07-10: 'letras mal formateadas' en el cinema). */
body:not(.aid) {
  background: #07090f;
  color: #e6edf3;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body:not(.aid) ::selection { background: #1f6feb; color: #fff; }

.raw-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.raw-scroll::-webkit-scrollbar-thumb { background: #24304a; border-radius: 8px; }
.term { font-family: 'JetBrains Mono', monospace; }
.term::-webkit-scrollbar { width: 8px; }
.term::-webkit-scrollbar-thumb { background: #1c2940; border-radius: 8px; }

.sheet-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(3,5,9,.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sheet { width: min(560px,94vw); max-height: 84vh; overflow: auto; border-radius: 14px; background: rgba(8,12,20,.97); box-shadow: 0 40px 120px -40px rgba(0,0,0,.95); }
.sheet::-webkit-scrollbar { width: 8px; }
.sheet::-webkit-scrollbar-thumb { background: #24304a; border-radius: 8px; }

body:not(.aid) .sec-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7d8ba3; margin: 18px 0 8px; }
.kv { display: flex; gap: 12px; padding: 4px 0; align-items: baseline; }
.kv-k { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7d8ba3; min-width: 112px; flex-shrink: 0; }
.kv-v { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c9d3de; word-break: break-all; min-width: 0; }
.chip-sm { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 8px; border: 1px solid #22304a; border-radius: 10px; color: #9db3d1; margin: 2px 4px 2px 0; }
.pre-sm { margin: 0; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.55; color: #9db3d1; background: rgba(4,7,12,.8); border: 1px solid #141d2e; border-radius: 8px; overflow: auto; max-height: 180px; white-space: pre-wrap; word-break: break-all; }
.verified-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #1d4a2e; background: rgba(63,185,80,.08); border-radius: 8px; padding: 6px 11px; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #5fd07a; }
.empty-hint { font-size: 12px; color: #5a6577; font-style: italic; }