/* =====================================================================
   SpaceView 2.7 · tanda 11 — Liquid Glass 2 y modo claro con el mismo nivel de diseño que el oscuro.
   Se carga después de mobile.css.

   Material (paneles flotantes, menús, diálogos, barras, tarjetas, navegación):
     · tinte translúcido + desenfoque del fondo (solo en Alta / Equilibrada)
     · borde de luz («rim»): degradé en el borde, más brillante arriba a la izquierda — sin pseudo-elementos
       (truco padding-box / border-box), así no cambia el posicionamiento de ningún componente
     · brillo especular arriba + sombra en dos capas (ambiente + contacto) para dar profundidad
   Calidad (Configuración del gráfico → Rendimiento, o Ajustes → Apariencia):
     · Alta: desenfoque 22 px, saturación 180 %, rim completo
     · Equilibrada: desenfoque 12 px; lo que flota SOBRE el gráfico no desenfoca (el gráfico se redibuja
       muchas veces por segundo y el desenfoque encima cuesta GPU en cada cuadro)
     · Rendimiento o «Liquid Glass» apagado: superficies sólidas, sin desenfoque (rim y sombra quedan: no cuestan)
     · Reducir movimiento: sin animaciones (independiente del material)
   NUNCA se aplica al gráfico: .chart-area, .charts y el lienzo no tienen material ni desenfoque.
   ===================================================================== */
:root {
  --lg2-tint: rgba(17, 23, 36, .62);
  --lg2-tint-strong: rgba(17, 23, 36, .86);
  --lg2-rim: linear-gradient(155deg, rgba(255,255,255,.30), rgba(255,255,255,.07) 28%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.12));
  --lg2-sheen: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,0) 38%);
  --lg2-depth: 0 1px 1px rgba(0,0,0,.30), 0 10px 28px -8px rgba(0,0,0,.50), 0 28px 70px -24px rgba(0,0,0,.60);
  --lg2-depth-sm: 0 1px 1px rgba(0,0,0,.25), 0 6px 16px -6px rgba(0,0,0,.45);
  --lg2-inner: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.20);
  --lg2-blur: 22px; --lg2-sat: 180%;
  --elev-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.25);
  --elev-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px -10px rgba(0,0,0,.6);
  --msg-bg: rgba(20, 26, 40, .9); --msg-fg: #f4f7fc;
}
:root[data-theme="light"] {
  --bg: #edf0f6; --panel: #ffffff; --raise: #f4f6fa; --hover: #eaeef5; --line: #d9dfea; --line2: rgba(16,24,40,.06);
  --fg: #0f1626; --muted: #535e74; --faint: #8e98ab;
  --lg2-tint: rgba(255, 255, 255, .66);
  --lg2-tint-strong: rgba(255, 255, 255, .92);
  --lg2-rim: linear-gradient(155deg, rgba(255,255,255,1), rgba(255,255,255,.55) 30%, rgba(214,222,236,.65) 70%, rgba(170,182,204,.55));
  --lg2-sheen: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 45%);
  --lg2-depth: 0 1px 2px rgba(16,24,40,.07), 0 12px 30px -10px rgba(22,34,64,.18), 0 30px 70px -28px rgba(22,34,64,.24);
  --lg2-depth-sm: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px -8px rgba(22,34,64,.16);
  --lg2-inner: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(16,24,40,.04);
  --elev-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --elev-2: 0 2px 4px rgba(16,24,40,.05), 0 12px 28px -12px rgba(22,34,64,.20);
  --msg-bg: rgba(255, 255, 255, .94); --msg-fg: #0f1626;
  --shadow: var(--lg2-depth);
}
body.q-balanced { --lg2-blur: 12px; --lg2-sat: 140%; }
/* Alta: el vidrio se nota (más transparencia; el desenfoque fuerte mantiene la legibilidad) */
body.q-high { --lg2-tint: rgba(17, 23, 36, .52); --lg2-tint-strong: rgba(17, 23, 36, .72); }
:root[data-theme="light"] body.q-high { --lg2-tint: rgba(255, 255, 255, .56); --lg2-tint-strong: rgba(255, 255, 255, .80); }

/* ---------- el material ---------- */
:is(.glass, .menu, .sheet:not(.indp), .tsearch, .lv-panel, .cpop, .ai-panel, .onb, .tool-chip, .dstyle, .replay-bar, .fav-float, .chart-news, .delta-card) {
  background: var(--lg2-sheen) padding-box, linear-gradient(var(--lg2-tint), var(--lg2-tint)) padding-box, var(--lg2-rim) border-box !important;
  border: 1px solid transparent !important;
  -webkit-backdrop-filter: blur(var(--lg2-blur)) saturate(var(--lg2-sat)) !important; backdrop-filter: blur(var(--lg2-blur)) saturate(var(--lg2-sat)) !important;
  box-shadow: var(--lg2-depth), var(--lg2-inner) !important;
}
/* superficies chicas: sombra corta */
:is(.tool-chip, .dstyle, .replay-bar, .fav-float, .chart-news, .menu) { box-shadow: var(--lg2-depth-sm), var(--lg2-inner) !important; }
/* menús y diálogos se leen sobre cualquier fondo: un poco más de tinte */
:is(.menu, .sheet:not(.indp), .tsearch, .lv-panel, .cpop, .ai-panel) { background: var(--lg2-sheen) padding-box, linear-gradient(var(--lg2-tint-strong), var(--lg2-tint-strong)) padding-box, var(--lg2-rim) border-box !important; }

/* Equilibrada: lo que flota sobre el gráfico no desenfoca (protege los FPS del gráfico) */
body.q-balanced .chart-area :is(.tool-chip, .dstyle, .replay-bar, .fav-float, .chart-news) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--lg2-sheen) padding-box, linear-gradient(var(--lg2-tint-strong), var(--lg2-tint-strong)) padding-box, var(--lg2-rim) border-box !important; }

/* Rendimiento o Glass apagado: sólido, sin desenfoque. El rim y la sombra quedan (no cuestan GPU). */
body:is(.q-performance, .no-glass, .is-fs) :is(.glass, .menu, .sheet:not(.indp), .tsearch, .lv-panel, .cpop, .ai-panel, .onb, .tool-chip, .dstyle, .replay-bar, .fav-float, .chart-news, .delta-card, .bnav, .top) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--lg2-rim) border-box !important; }
body:is(.q-performance, .no-glass, .is-fs) .modal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body:is(.q-performance, .no-glass, .is-fs) .top { background: var(--panel) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; }

/* barra superior y navegación del celular: vidrio de barra (sin rim diagonal, con hairline) */
body.q-high .top { background: var(--lg2-sheen), color-mix(in srgb, var(--panel) 78%, transparent) !important; border-bottom: 1px solid var(--line2); box-shadow: 0 1px 0 var(--line2), 0 6px 20px -14px rgba(0,0,0,.5); }
body:not(.q-performance):not(.no-glass) .bnav { background: var(--lg2-sheen), linear-gradient(var(--lg2-tint-strong), var(--lg2-tint-strong)) !important; border: 0 !important; border-top: 1px solid var(--line2) !important;
  -webkit-backdrop-filter: blur(var(--lg2-blur)) saturate(var(--lg2-sat)); backdrop-filter: blur(var(--lg2-blur)) saturate(var(--lg2-sat)); box-shadow: 0 -8px 24px -18px rgba(0,0,0,.6) !important; }

/* el gráfico nunca lleva material (por si alguna regla general lo alcanzara) */
.chart-area, .charts, .chart-cell, .chart-host, .chart-host canvas { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- mensajes: oscuro → texto blanco, claro → texto oscuro (excepción: error, por contraste) ---------- */
.toast, .tip { background: var(--msg-bg) !important; color: var(--msg-fg) !important; border: 1px solid transparent !important;
  background: var(--lg2-sheen) padding-box, linear-gradient(var(--msg-bg), var(--msg-bg)) padding-box, var(--lg2-rim) border-box !important;
  box-shadow: var(--lg2-depth-sm), var(--lg2-inner) !important; }
.toast[data-kind="err"] { background: linear-gradient(var(--down), var(--down)) padding-box, var(--lg2-rim) border-box !important; color: #fff !important; }
.toast[data-kind="ok"] { background: linear-gradient(color-mix(in srgb, var(--up) 85%, #000), color-mix(in srgb, var(--up) 85%, #000)) padding-box, var(--lg2-rim) border-box !important; color: #fff !important; }

/* ---------- profundidad de los paneles y tarjetas (los dos temas) ---------- */
.tools, .chart-area, .side, .rail { box-shadow: var(--elev-1), inset 0 1px 0 var(--glass-hi); }
:is(.hm-sc, .ch-tile, .cm-lcard, .tut-cat, .tut-row, .plan-card, .mk-card, .hm-q) { box-shadow: var(--elev-1); }
@media (hover: hover) {
  :is(.hm-sc, .ch-tile, .cm-lcard, .tut-cat, .tut-row, .mk-card):hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
  body.no-motion :is(.hm-sc, .ch-tile, .cm-lcard, .tut-cat, .tut-row, .mk-card):hover { transform: none; }
}

/* ---------- modo claro: jerarquía propia, no una inversión de colores ---------- */
:root[data-theme="light"] body { background: radial-gradient(1100px 520px at 12% -12%, #dde8fb 0%, transparent 60%), radial-gradient(900px 480px at 100% 0%, #e6ecf8 0%, transparent 55%), var(--bg); }
:root[data-theme="light"] .main { background: transparent; }
:root[data-theme="light"] .tools, :root[data-theme="light"] .rail { background: linear-gradient(180deg, #ffffff, #f8fafd); }
:root[data-theme="light"] .side { background: #fff; }
:root[data-theme="light"] .sym-btn { background: #fff; border-color: var(--line); box-shadow: var(--elev-1); }
:root[data-theme="light"] .views { background: var(--raise); border: 1px solid var(--line); }
:root[data-theme="light"] .view-btn[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--line); color: var(--accent); }
:root[data-theme="light"] .ib:hover, :root[data-theme="light"] .tf:hover { background: var(--hover); }
:root[data-theme="light"] .tools .ib[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-theme="light"] .btn { box-shadow: 0 1px 2px rgba(16,24,40,.06); }
:root[data-theme="light"] .btn.pri { box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 4px 12px -4px color-mix(in srgb, var(--accent) 55%, transparent); }
:root[data-theme="light"] .inp, :root[data-theme="light"] .search, :root[data-theme="light"] select.inp { background: #fff; border-color: var(--line); box-shadow: inset 0 1px 2px rgba(16,24,40,.04); }
:root[data-theme="light"] .inp:focus, :root[data-theme="light"] .search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root[data-theme="light"] .modal { background: rgba(30, 40, 62, .28); }
:root[data-theme="light"] .wl .row:hover { background: #f3f6fb; }
:root[data-theme="light"] .wl .row[aria-current="true"], :root[data-theme="light"] .wl .row.cur { background: color-mix(in srgb, var(--accent) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-theme="light"] .hm-sec, :root[data-theme="light"] .hm-sc, :root[data-theme="light"] .ch-tile, :root[data-theme="light"] .cm-lcard { border-color: var(--line); }
:root[data-theme="light"] .chip { background: #fff; border-color: var(--line); }
:root[data-theme="light"] .badge { background: #eef2f8; }
:root[data-theme="light"] .badge.m-crypto { color: #b26a00; } :root[data-theme="light"] .badge.m-byma { color: #1556b8; } :root[data-theme="light"] .badge.m-us { color: #0b7a66; }
:root[data-theme="light"] .qt-tag { color: #9a6200; border-color: color-mix(in srgb, #9a6200 45%, transparent); }
:root[data-theme="light"] .nrm-banner { color: var(--fg); }

/* ---------- listas largas: el navegador no pinta lo que está fuera de pantalla ---------- */
.wl .row:not(.sec), .nw-item, .cm-post { content-visibility: auto; contain-intrinsic-size: auto 38px; }
.nw-item, .cm-post { contain-intrinsic-size: auto 120px; }