/* ============================================================================
   Jax · Design System — folha ÚNICA dos dashboards do Panteão.
   Fonte da verdade: infra/design/jax-design.css (repo jax-portal).
   Servida pelo Caddy em https://<qualquer-host>/assets/jax-design.css, mesma
   origem de cada módulo (sem CORS, sem build, sem cópia por módulo).

   Linguagem derivada de defiemfoco.com em 2026-08-22, adaptada à identidade
   do Panteão: fundo quase preto com viés azul-violeta, superfície de VIDRO
   (branco a 3-6%) em vez de card com cor própria, borda de FIO (branco a 8%),
   raio grande, Inter, micro-labels em caixa alta e ZERO sombra — a separação
   vem de borda + translucidez.

   REGRAS (as três que já custaram bug aqui):
   1. Nunca hex fixo num componente. Hex solto não acompanha troca de tema e
      vira mancha clara quando o fundo muda. Use os tokens.
   2. --surface/--surface2 são TRANSLÚCIDOS (vidro). --card/--card2 são os
      equivalentes OPACOS e existem para SVG: cor translúcida em halo de
      marcador ou fundo de tooltip some em cima do que deveria destacar.
   3. Cor de ATIVO (BTC/SOL/USDC...) vem do mapa de ativos do módulo, nunca da
      paleta de UI. Um ativo não pode ter duas cores na mesma tela.
   ========================================================================= */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;

  /* ---- superfícies ---- */
  --bg:#02010a;
  --surface:rgba(255,255,255,.03);
  --surface2:rgba(255,255,255,.06);
  --surface3:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.18);
  /* equivalentes OPACOS do vidro — ver regra 2 */
  --card:#0B0A14;
  --card2:#12111C;

  /* ---- texto ---- */
  --text:#FFFFFF;
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.40);

  /* ---- marca e semântica ---- */
  --green:#12A282;
  --brand-blue:#1A54AA;
  --accent:var(--green);        /* cada módulo pode sobrescrever */
  --blue:#6aa3f5;
  --pos:#34d399;
  --neg:#E05252;
  --warn:#D4A017;
  --purple:#9a7cf0;

  /* ---- forma ---- */
  --r:20px;      /* card */
  --r2:12px;     /* bloco interno, input */
  --r3:999px;    /* pílula */
  --pad:1.35rem 1.45rem;

  /* ---- tipografia ---- */
  --font:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Halos: o vidro só tem graça se houver algo atrás para filtrar. Nas cores da
   marca (verde e azul do logo), não nas do site de referência. */
.jx-bg,body.jx-bg{
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(18,162,130,.10), transparent 62%),
    radial-gradient(900px 520px at 90% 2%, rgba(26,84,170,.16), transparent 64%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------------------------------------------------------------- base */
.jx-base{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------- componentes
   Prefixo jx- para não colidir com as classes que cada módulo já tem. Adotar
   é opcional: a maior parte do ganho vem só dos tokens acima. */
.jx-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--pad)}
.jx-card-h{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:0 0 1rem}

.jx-btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-size:.82rem;
  padding:.42rem .85rem;border-radius:var(--r2);cursor:pointer;transition:background .13s,border-color .13s}
.jx-btn:hover{border-color:var(--border2);background:var(--surface3)}
.jx-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}

.jx-input{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font:inherit;
  padding:.42rem .7rem;border-radius:var(--r2);font-variant-numeric:tabular-nums}
.jx-input:focus{outline:none;border-color:var(--accent);background:var(--surface2);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.jx-input::placeholder{color:var(--muted2)}

/* rótulo ACIMA do campo. Placeholder some ao digitar e o campo fica sem nome. */
.jx-field{display:flex;flex-direction:column;gap:.25rem}
.jx-field>span{font-size:.62rem;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}

.jx-pill{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);background:var(--surface2);
  border-radius:var(--r3);padding:.4rem .85rem;font-size:.82rem;font-weight:600}
.jx-badge{font-size:.68rem;font-weight:700;padding:.12rem .55rem;border-radius:var(--r3);
  text-transform:uppercase;letter-spacing:.04em}

/* aba em pílula: mesma forma dos chips e botões */
.jx-tab{border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;
  font-weight:600;padding:.42rem .95rem;cursor:pointer;border-radius:var(--r3);transition:background .13s,color .13s}
.jx-tab:hover{color:var(--text);background:var(--surface)}
.jx-tab[aria-selected="true"],.jx-tab.active{color:var(--text);background:var(--surface2);border-color:var(--border)}

.jx-table{width:100%;border-collapse:collapse;font-size:.84rem}
.jx-table th{text-align:right;color:var(--muted2);font-weight:600;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.6rem .7rem;border-bottom:1px solid var(--border);white-space:nowrap}
.jx-table td{padding:.75rem .7rem;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.jx-table th:first-child,.jx-table td:first-child{text-align:left}
.jx-table tr:last-child td{border-bottom:none}

/* header colado no topo, com desfoque — o padrão dos quatro módulos */
.jx-header{position:sticky;top:0;z-index:20;background:rgba(2,1,10,.72);
  backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border)}

.jx-pos{color:var(--pos)} .jx-neg{color:var(--neg)} .jx-warn{color:var(--warn)}
.jx-muted{color:var(--muted)} .jx-num{font-variant-numeric:tabular-nums}