/* ═══════════════════════════════════════════════════════════════════════
   dg2.css — DarkGamma Design System v2 · "terminal premium"
   Capa base moderna: fuentes self-hosted, tokens, primitivas.
   Se carga ANTES del <style> de cada página; las páginas construyen
   sobre estos tokens. Piloto: levelv2 /dashboard.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens v2 ── */
:root{
  /* superficies: elevación por tono, no por borde */
  --bg:#070f16;            /* fondo página */
  --surf1:#0c1823;         /* panel base */
  --surf2:#12212f;         /* panel elevado / hover */
  --surf3:#18293a;         /* controles activos */
  --ink:#050a10;           /* pozos (charts, código) */
  /* anillos sutiles (sustituyen bordes) */
  --ring:rgba(148,197,222,.07);
  --ring2:rgba(148,197,222,.14);
  /* texto */
  --tx:#e9f2f8; --tx2:#a3bac9; --tx3:#7e96a7;
  /* acento único */
  --acc:#1fc6d6; --acc2:#3ad6e2; --accD:#0f9fb2; --accInk:#02202a;
  /* semánticos de mercado */
  --up:#2bd9a8; --down:#ff5468; --warn:#f5b544;
  /* compat con nombres v1 (dg-skin) */
  --bg2:var(--surf1); --panel:var(--surf1); --panel2:var(--surf2);
  --line:var(--ring); --line2:var(--ring2);
  --tx-dim:var(--tx2); --tx-mut:var(--tx3);
  --cyan:var(--acc2); --acc-deep:var(--accD); --acc-ink:var(--accInk);
  /* tipografía */
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* forma y sombra */
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 16px 40px -20px rgba(0,0,0,.6);
  --easing:cubic-bezier(.2,.6,.2,1);
}

/* ── Base ── */
body:not(.light-mode){
  background:var(--bg);color:var(--tx);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv05','cv11';
}
::selection{background:color-mix(in srgb,var(--acc) 28%,transparent);color:var(--tx)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--acc) 30%,var(--surf3))}

/* números siempre tabulares donde haya mono */
.mono,[class*=premium],[class*=price]{font-variant-numeric:tabular-nums}

/* ── Primitiva: superficie sin borde ── */
.dg-surface{
  background:linear-gradient(180deg,var(--surf1),color-mix(in srgb,var(--surf1) 55%,var(--bg)));
  box-shadow:inset 0 0 0 1px var(--ring),var(--shadow);
  border-radius:var(--r);
}

/* ── Botón segmento (filtros, tabs de feed) ── */
.seg-btn{
  background:transparent;border:none;border-radius:7px;
  color:var(--tx3);font-family:var(--sans);font-size:11px;font-weight:550;
  padding:4px 11px;cursor:pointer;
  transition:color .13s var(--easing),background .13s var(--easing);
}
.seg-btn:hover{color:var(--tx)}
.seg-btn.active{background:var(--surf3);color:var(--acc);font-weight:650}

/* ── Mini barra call/put ── */
.mini-ratio{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--ink)}
.mini-ratio .seg{height:100%}
.mini-ratio .seg-call{background:var(--up)}
.mini-ratio .seg-put{background:var(--down)}

/* ── Badges de dato (SWP/FLR) ── */
.badge-swp,.badge-flr{
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.06em;
  padding:1px 4px;border-radius:3px;margin-left:4px;vertical-align:1px;
}
.badge-swp{color:var(--acc2);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.badge-flr{color:#b39dff;background:rgba(124,77,255,.16)}

/* ── Skeleton loading ── */
.sk{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--surf1);
}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(148,197,222,.06),transparent);
  animation:dg-shimmer 1.4s infinite;
}
@keyframes dg-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ═══ Overrides del panel Asistente IA (ai-flow.js, estilos inline) ═══ */
#ai-flow-card>div{
  background:linear-gradient(180deg,var(--surf1),color-mix(in srgb,var(--surf1) 55%,var(--bg))) !important;
  border:none !important;
  box-shadow:inset 0 0 0 1px var(--ring),var(--shadow) !important;
  border-radius:var(--r) !important;
  font-family:var(--sans) !important;
}
.aif-head>span:first-child{
  font-style:normal !important;font-weight:650 !important;
  color:var(--tx) !important;font-size:13px !important;letter-spacing:-.01em;
}
.aif-ticker,.aif-q,.aif-model{
  background:var(--ink) !important;border:none !important;
  box-shadow:inset 0 0 0 1px var(--ring2) !important;
  border-radius:var(--r-sm) !important;color:var(--tx) !important;
  font-family:var(--mono) !important;
}
.aif-q{font-family:var(--sans) !important}
.aif-q:focus,.aif-ticker:focus{box-shadow:inset 0 0 0 1px var(--acc) !important}
.aif-explain{
  background:linear-gradient(135deg,var(--acc2),var(--accD)) !important;
  color:var(--accInk) !important;border-radius:var(--r-sm) !important;
  box-shadow:0 2px 12px color-mix(in srgb,var(--acc) 28%,transparent) !important;
}
.aif-rec,.aif-ask{
  background:var(--surf3) !important;color:var(--tx) !important;
  border:none !important;border-radius:var(--r-sm) !important;
  box-shadow:inset 0 0 0 1px var(--ring2) !important;
}
.aif-rec:hover,.aif-ask:hover{color:var(--acc) !important}
.aif-out{
  background:var(--ink) !important;border:none !important;
  box-shadow:inset 0 0 0 1px var(--ring) !important;
  border-radius:var(--r-sm) !important;
}

@media (prefers-reduced-motion:reduce){
  .sk::after{animation:none}
  *{transition-duration:.01ms !important}
}

/* ── Chip de idioma (i18n.js lo inyecta con estilos inline) ── */
#lv-lang-toggle{
  background:none !important;color:var(--tx2) !important;
  border:none !important;box-shadow:inset 0 0 0 1px var(--ring2);
  border-radius:8px !important;font-family:var(--mono);
  font-size:10px !important;font-weight:600 !important;
  padding:5px 9px !important;cursor:pointer;transition:color .13s;
}
#lv-lang-toggle:hover{color:var(--acc) !important}

/* ── Logo ballena (tamaño seguro en todas las páginas) ── */
.tm-whale{height:26px;width:auto;flex:0 0 auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}

/* ═══ Light mode GLOBAL — se redefinen los tokens y todo cae en cascada.
   El tema se persiste en localStorage('theme'); cada página lo aplica con
   un bootstrap en <head> (html.light-mode) + toggle (body.light-mode). ═══ */
html.light-mode, body.light-mode{
  --bg:#f2f6f8; --surf1:#ffffff; --surf2:#f3f7f9; --surf3:#e5edf2; --ink:#eef3f6;
  --ring:#e2eaf0; --ring2:#d3dfe7;
  --tx:#16242e; --tx2:#3d5364; --tx3:#7c93a3;
  --shadow:0 1px 2px rgba(30,50,65,.05),0 10px 28px -18px rgba(30,50,65,.18);
  /* alias de tokens locales que usan algunas páginas (alerts/profile/scanners) */
  --txt:#16242e; --mut:#62798a; --dim:#62798a;
  /* semánticos más profundos para fondo claro */
  --up:#0e9f77; --down:#e5484d; --warn:#b07f00;
  --acc:#0d9fb0; --acc2:#15b5c6;
}
body.light-mode{background:var(--bg);color:var(--tx)}
body.light-mode #topbar, body.light-mode header{
  background:rgba(242,246,248,.88) !important;
  border-bottom:1px solid var(--ring) !important;
}
body.light-mode .filter-btn.active, body.light-mode .seg-btn.active{background:#dff3f6}
body.light-mode .sk{background:#e8eef2}
body.light-mode .tm-whale{filter:none}