/* StayLiquid · SALA · PANTALLA DE SEÑALES EN DIRECTO · v95
   Para el directo: NUEVA SEÑAL grande que rota, cámara del streamer, operaciones destacadas,
   la mesa de traders y el feed de SEÑALES / MEJORES SEÑALES (bot + monedas de pump.fun que más suben).
   Estética liquid-glass: carbón casi negro, verde esmeralda contenido, rojo solo para negativos. Movimiento continuo.
   Rendimiento: transforms GPU + un canvas ligero de niebla. Respeta prefers-reduced-motion. */
body.pg-sala .sb, body.pg-sala .sh, body.pg-sala .foot, body.pg-sala .ai-fab, body.pg-sala .skip, body.pg-sala .bn { display: none !important; }
/* la sala es pública: ocultamos los modales/overlays del shell (login, buscador, hojas) que si no tapan la sala e interceptan clics */
body.pg-sala .acct, body.pg-sala .sheet, body.pg-sala .drawer, body.pg-sala .sh-sr, body.pg-sala #me-sheet, body.pg-sala .tk-drawer { display: none !important; }
body.pg-sala { margin: 0; background: #05070C; }

.sala {
  --bg: #06080F; --bg2: #0A0E18; --ink: #EAF1F2; --dim: #7E8C92; --mut: #556169;
  --grn: #2FE3A0; --grn-d: #0F7B5B; --red: #FF5D6C; --amb: #F2B544;
  --glass: color-mix(in srgb, #0E1620 62%, transparent);
  --line: rgba(160,220,200,.12); --line2: rgba(160,220,200,.2);
  position: fixed; inset: 0; overflow: hidden; color: var(--ink);
  /* v115 · respeta el notch y la barra de inicio del iPhone (viewport-fit=cover) */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  font-family: "Geist", system-ui, sans-serif;
  background:
    radial-gradient(130% 90% at 50% -20%, #103029 0%, transparent 46%),
    radial-gradient(90% 70% at 50% 116%, #123026 0%, transparent 58%),
    linear-gradient(180deg, #080B12, #06090F 72%);
}
/* suelo en perspectiva (da profundidad al "frente" de la sala) */
.sala::before { content: ""; position: absolute; left: -25%; right: -25%; bottom: -6%; height: 60%; z-index: 0; pointer-events: none; opacity: .9;
  background-image: linear-gradient(rgba(96,214,176,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(96,214,176,.14) 1px, transparent 1px);
  background-size: 58px 58px; transform: perspective(760px) rotateX(72deg); transform-origin: bottom; mask-image: linear-gradient(180deg, transparent 0%, #000 52%, rgba(0,0,0,.35)); }
.sala::after { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 40%; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%, rgba(32,120,92,.2), transparent 70%); filter: blur(10px); }
.sala-fog { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; }
.sala-grain { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sala-vign { position: absolute; inset: 0; z-index: 7; pointer-events: none;
  box-shadow: inset 0 0 180px 40px rgba(0,0,0,.72), inset 0 0 60px rgba(0,0,0,.5); }

/* ── barra superior ── */
.sala-top { position: relative; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 13px 20px; }
.sala-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.sala-brand svg { width: 24px; height: 24px; color: var(--grn); filter: drop-shadow(0 0 8px rgba(47,227,160,.55)); }
.sala-brand b { display: block; font: 700 13px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; }
.sala-brand small { display: block; margin-top: 2px; font: 500 8.5px/1 "Geist Mono", monospace; letter-spacing: .26em; color: var(--dim); }
.sala-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb,#000 40%,transparent); font: 600 11px/1 "Geist Mono", monospace; letter-spacing: .08em; }
.sala-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.sala-status[data-s="live"] i { background: var(--grn); box-shadow: 0 0 0 0 rgba(47,227,160,.6); animation: sala-beat 2s ease-out infinite; }
.sala-status[data-s="live"] b { color: var(--grn); }
.sala-status[data-s="stale"] i { background: var(--amb); } .sala-status[data-s="stale"] b { color: var(--amb); }
.sala-status[data-s="off"] i { background: var(--red); } .sala-status[data-s="off"] b { color: var(--red); }
.sala-status span { color: var(--dim); font-weight: 500; }
.sala-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line2); background: color-mix(in srgb, var(--grn) 12%, transparent); color: var(--grn); font: 600 12px/1 "Geist", sans-serif; }
.sala-back:hover { background: color-mix(in srgb, var(--grn) 20%, transparent); }
.sala-back[hidden] { display: none !important; }   /* v115: el atributo hidden debe ocultarlo (antes asomaba en el borde) */

/* ── menú (reutiliza el patrón de la portada) ── */
.hero-menu { position: relative; }
.hero-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb,#000 42%,transparent); color: var(--ink); font: 600 12px/1 "Geist Mono", monospace; letter-spacing: .09em; }
.hero-menu > summary::-webkit-details-marker, .hero-menu > summary::marker { display: none; content: ""; }
.hero-menu > summary svg { color: var(--grn); }
.hero-menu > summary:hover, .hero-menu[open] > summary { border-color: var(--grn); color: var(--grn); }
.hero-nav { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 250px; max-width: min(88vw,300px); display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line2); border-radius: 14px; background: #0A0F17; box-shadow: 0 22px 54px -18px rgba(0,0,0,.85); }
.hero-nav a { display: block; padding: 9px 11px; border-radius: 9px; text-decoration: none; color: var(--ink); }
.hero-nav a:hover { background: color-mix(in srgb, var(--grn) 13%, transparent); }
.hero-nav a b { display: block; font: 600 13px/1.2 "Geist", sans-serif; }
.hero-nav a small { display: block; margin-top: 1px; font: 500 11px/1.3 "Geist Mono", monospace; color: var(--dim); }

/* ── la sala (apilada para el directo) ── */
.room { position: absolute; z-index: 5; inset: 68px 2.4vw 34px; display: flex; flex-direction: column; gap: 1.5vh; align-items: stretch; justify-content: flex-start;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease; transform-origin: 50% 38%; }
.sala.focus .room { transform: scale(1.03); filter: blur(6px) brightness(.5); pointer-events: none; }

/* glass base */
.hero-screen, .gpanel, .dv-glass, .trd {
  background: linear-gradient(158deg, rgba(26,42,52,.82), rgba(15,25,34,.9));
  -webkit-backdrop-filter: blur(15px) saturate(1.3); backdrop-filter: blur(15px) saturate(1.3);
  border: 1px solid rgba(150,222,196,.2); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(205,255,238,.14), inset 0 0 50px rgba(18,48,38,.35), 0 40px 80px -32px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); position: relative; }
.hero-screen::before, .gpanel::before, .dv-glass::before, .trd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(152deg, rgba(255,255,255,.14), transparent 26%); opacity: .7; }

/* ── OFICINA 3D (protagonista) ── */
.office3d { position: relative; flex: 1 1 auto; min-height: 320px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line2);
  background: radial-gradient(120% 90% at 50% 120%, #0d2520 0%, transparent 55%), linear-gradient(180deg, #070b12, #05080e);
  box-shadow: inset 0 1px 0 rgba(205,255,238,.1), 0 40px 90px -36px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4); }
#sala-3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.office3d.no3d #sala-3d { display: none; }
.o3d-fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 20px; }
.office3d.no3d .o3d-fallback { display: grid; }
.o3d-fallback p { margin: 0; font: 500 13px/1.6 "Geist", sans-serif; color: var(--dim); }
.hud { position: absolute; z-index: 6; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-tl { top: 16px; left: 16px; width: min(34%, 400px); }
.hud-tr { top: 16px; right: 16px; width: min(30%, 340px); display: flex; max-height: calc(100% - 32px); }
.hud-tr .ops { width: 100%; }
.hud-tr .ops .gp-rows { max-height: 46vh; }
.hud .hero { width: 100%; }
.hud .hero-screen { max-height: calc(100% - 4px); }
.hud .hero-main { margin-top: 10px; } .hud .hero-chart { min-height: 72px; } .hud .hero-spark { height: 72px; }
.hud .hero-note { display: none; } .hud .hero-dots { margin-top: 6px; }

/* ── ① ESCENARIO (antiguo, por si queda referenciado) ── */
.stage { display: grid; grid-template-columns: 1.72fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 1.3vw; align-items: stretch; flex: 1 1 auto; min-height: 300px; }
.hero { position: relative; cursor: zoom-in; min-width: 0; display: flex; }
.hero-screen { flex: 1 1 auto; min-height: 0; padding: 13px 18px 12px; display: flex; flex-direction: column; overflow: hidden; }
.wall-glow { position: absolute; inset: -6% -4% -40%; z-index: -1; pointer-events: none; filter: blur(44px); opacity: .5; background: radial-gradient(60% 80% at 50% 10%, rgba(47,227,160,.22), transparent 70%); }
.hero-h { display: flex; align-items: center; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); flex: none; }
.wall-logo { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 "Space Grotesk", sans-serif; letter-spacing: .18em; color: var(--grn); }
.wall-logo svg { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(47,227,160,.5)); }
.hero-tag { margin-left: 2px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 700 11px/1 "Geist Mono", monospace; letter-spacing: .18em; color: var(--grn); }
.hero-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); animation: sala-blink 1.1s steps(2) infinite; }
.wall-live { margin-left: auto; font: 700 9.5px/1 "Geist Mono", monospace; letter-spacing: .12em; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line2); color: var(--dim); }
.wall-live[data-s="live"] { color: var(--grn); border-color: color-mix(in srgb,var(--grn) 45%,transparent); background: color-mix(in srgb,var(--grn) 10%,transparent); }
.wall-live[data-s="stale"] { color: var(--amb); border-color: color-mix(in srgb,var(--amb) 45%,transparent); }
.wall-live[data-s="off"] { color: var(--red); border-color: color-mix(in srgb,var(--red) 45%,transparent); }
.hero-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 10px; overflow: hidden; }
.hero-top { display: flex; align-items: center; gap: 12px; flex: none; }
.hero-tok { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.hero-tok img { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 1px solid var(--line2); }
.hero-tok b { font: 700 clamp(20px, 2.3vw, 30px)/1 "Space Grotesk", sans-serif; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-side { font: 700 11px/1 "Geist Mono", monospace; letter-spacing: .08em; padding: 5px 9px; border-radius: 7px; }
.hero-side.buy { color: var(--grn); background: color-mix(in srgb,var(--grn) 15%,transparent); border: 1px solid color-mix(in srgb,var(--grn) 40%,transparent); }
.hero-side.sell { color: var(--red); background: color-mix(in srgb,var(--red) 15%,transparent); border: 1px solid color-mix(in srgb,var(--red) 40%,transparent); }
.hero-time { margin-left: auto; font: 600 11px/1 "Geist Mono", monospace; color: var(--dim); }
.hero-main { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1.08fr; gap: 16px; margin-top: 12px; align-items: center; }
.hero-data .hd-h { font: 600 9px/1 "Geist Mono", monospace; letter-spacing: .16em; color: var(--mut); margin-bottom: 7px; }
.hd-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed rgba(160,220,200,.08); font: 500 12.5px/1.3 "Geist Mono", monospace; color: var(--dim); }
.hd-line b { color: var(--ink); font-weight: 600; } .hd-line b.up { color: var(--grn); } .hd-line b.dn { color: var(--red); }
.hero-chart { position: relative; min-height: 96px; display: flex; align-items: center; justify-content: center; }
.hero-spark { width: 100%; height: 96px; display: block; }
.chart-tag { position: absolute; right: 2px; bottom: -2px; font: 600 8.5px/1 "Geist Mono", monospace; letter-spacing: .06em; color: var(--mut); }
.hero-ph { font: 500 12px/1.4 "Geist Mono", monospace; color: var(--mut); text-align: center; }
.hero-note { flex: none; margin-top: 10px; font: 400 10.5px/1.45 "Geist", sans-serif; color: var(--mut); } .hero-note b { color: var(--amb); }
.hero-dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.hero-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(160,220,200,.22); transition: background .3s; }
.hero-dots i.on { background: var(--grn); box-shadow: 0 0 7px var(--grn); }
/* barrido liquid-glass + destello al llegar señal nueva */
.hero-sweep { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; overflow: hidden; }
.hero-sweep::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(180,255,230,.08), transparent); animation: hero-sheen 7s ease-in-out infinite; }
.hero-screen.pulse { animation: hero-pulse .9s ease-out; }

/* gauge para monedas que suben (compras vs ventas) */
.gauge { width: 100%; }
.gauge-h { display: flex; align-items: baseline; justify-content: space-between; font: 600 11px/1 "Geist Mono", monospace; color: var(--dim); }
.gauge-h b { font-size: 20px; } .gauge-h b.up { color: var(--grn); }
.gauge-bar { margin: 8px 0 6px; height: 9px; border-radius: 999px; background: color-mix(in srgb,var(--red) 30%,#0a1016); overflow: hidden; border: 1px solid var(--line); }
.gauge-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--grn-d), var(--grn)); box-shadow: 0 0 10px rgba(47,227,160,.5); border-radius: 999px; transition: width .6s cubic-bezier(.22,.61,.36,1); }
.gauge-foot { display: flex; justify-content: space-between; font: 500 10px/1 "Geist Mono", monospace; color: var(--mut); }
.gauge-vol { display: flex; align-items: baseline; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); font: 500 11px/1 "Geist Mono", monospace; color: var(--dim); }
.gauge-vol b { color: var(--ink); font-weight: 600; }

/* lado del escenario: operaciones destacadas (a toda altura) */
.stage-side { display: flex; flex-direction: column; gap: 1.1vh; min-height: 0; min-width: 0; }
.ops { flex: 1 1 auto; min-height: 0; }
.ops .gp-rows { max-height: 100%; }

/* ── OPERACIONES DESTACADAS (filas) ── */
.gpanel { padding: 11px 13px; cursor: zoom-in; display: flex; flex-direction: column; min-height: 0; }
.gpanel > header { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 "Geist Mono", monospace; letter-spacing: .14em; color: var(--dim); margin-bottom: 8px; flex: none; }
.gpanel > header small { color: var(--mut); letter-spacing: 0; margin-left: auto; font-size: 9.5px; }
.gp-led { width: 8px; height: 8px; border-radius: 50%; background: var(--amb); box-shadow: 0 0 8px var(--amb); }
.gp-led.good { background: var(--grn); box-shadow: 0 0 8px var(--grn); }
.gp-rows { display: flex; flex-direction: column; gap: 5px; overflow: hidden; min-height: 0; }
.feat-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb,#000 22%,transparent); font: 500 12px/1.1 "Geist Mono", monospace; }
.feat-row .fr-sym { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.feat-row .fr-sym img { width: 15px; height: 15px; border-radius: 50%; }
.feat-row .fr-st { font-size: 9.5px; color: var(--dim); padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb,#fff 5%,transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.feat-row .fr-pnl { margin-left: auto; font-weight: 700; }

/* ── LIVE SIGNAL CONTROLS ── */
.sig-ctl { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-radius: 13px; border: 1px solid var(--line2);
  background: color-mix(in srgb, #0C1620 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ctl-g { display: inline-flex; align-items: center; gap: 4px; }
.ctl-g.ctl-act { margin-left: auto; }
.ctl-lbl { font: 700 8.5px/1 "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-right: 4px; }
.sig-ctl button { cursor: pointer; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb,#000 32%,transparent); color: var(--dim); font: 600 11.5px/1 "Geist Mono", monospace; letter-spacing: .02em; transition: background .15s, color .15s, border-color .15s; }
.sig-ctl button:hover { color: var(--ink); border-color: var(--line2); }
.sig-ctl .ctl-g button.on { color: #05140E; background: var(--grn); border-color: var(--grn); box-shadow: 0 0 12px rgba(47,227,160,.4); }
.ctl-g[data-k="sign"] button[data-v="neg"].on { color: #180608; background: var(--red); border-color: var(--red); box-shadow: 0 0 12px rgba(255,93,108,.4); }
#ctl-pause.on { color: #1b1403; background: var(--amb); border-color: var(--amb); }
#ctl-clear:hover { color: var(--red); border-color: color-mix(in srgb,var(--red) 50%,transparent); }
/* v111 · más opciones: separadores entre grupos y, en pantallas estrechas, una sola fila deslizable */
.ctl-g + .ctl-g { padding-left: 14px; border-left: 1px solid var(--line); }
.ctl-g.ctl-act { border-left: 0; padding-left: 0; }
.ctl-g[data-k="strat"] button.on, .ctl-g[data-k="sort"] button.on { color: #041b26; background: var(--cya, #35E0FF); border-color: var(--cya, #35E0FF); box-shadow: 0 0 12px rgba(53,224,255,.4); }
@media (max-width: 760px) {
  .sig-ctl { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0 10px; }
  .sig-ctl::-webkit-scrollbar { display: none; }
  .ctl-g { flex: none; } .ctl-g.ctl-act { margin-left: 8px; }
  .ctl-g + .ctl-g { padding-left: 10px; }
  .ctl-search { flex: none; }
}
/* v112 · buscador por símbolo, botón reset y tira de KPIs del fondo */
.ctl-search { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb,#000 32%,transparent); color: var(--mut); }
.ctl-search svg { flex: none; opacity: .7; }
.ctl-search input { border: 0; background: transparent; color: var(--ink); font: 600 11.5px/1 "Geist Mono", monospace; width: 94px; outline: none; }
.ctl-search input::placeholder { color: var(--mut); }
.ctl-search:focus-within { border-color: var(--line2); box-shadow: 0 0 0 2px color-mix(in srgb,var(--grn) 18%,transparent); }
#ctl-reset:hover { color: var(--amb); border-color: color-mix(in srgb,var(--amb) 50%,transparent); }
.sala-kpis { flex: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.sala-kpis:empty { display: none; }
.kpi { padding: 7px 11px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb,#0C1620 60%,transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kpi small { display: block; font: 700 8px/1 "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.kpi b { display: block; margin-top: 4px; font: 700 16px/1 "Space Grotesk", sans-serif; color: var(--ink); }
.kpi b.up { color: var(--grn); } .kpi b.dn { color: var(--red); }
@media (max-width: 760px) { .sala-kpis { grid-template-columns: repeat(3, 1fr); } }

/* ── ②③ PANELES DE SEÑALES ── */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; flex: none; }
.panels .gp-rows { max-height: 25vh; }
.sig-row { display: grid; grid-template-columns: auto 1fr 46px auto auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb,#000 20%,transparent); font: 500 12px/1.1 "Geist Mono", monospace; }
.sig-row.top { animation: sig-in .5s ease; border-color: color-mix(in srgb,var(--grn) 26%,transparent); }
.sig-row.mkt { background: color-mix(in srgb,#1A2E22 24%,transparent); }
.sig-row .s-side { font: 700 9px/1 "Geist Mono", monospace; padding: 3px 6px; border-radius: 5px; text-align: center; }
.s-side.buy { color: var(--grn); background: color-mix(in srgb,var(--grn) 14%,transparent); } .s-side.sell { color: var(--red); background: color-mix(in srgb,var(--red) 14%,transparent); }
.sig-row .s-id { min-width: 0; overflow: hidden; }
.sig-row .s-sym { font-weight: 700; color: var(--ink); } .sig-row .s-strat { color: var(--dim); font-size: 10px; }
.sig-row .s-mini { display: flex; align-items: center; justify-content: flex-end; }
.sig-row .s-pnl { font-weight: 700; text-align: right; } .s-pnl.live { color: var(--amb); }
.sig-row .s-ago { color: var(--mut); font-size: 10px; text-align: right; text-decoration: none; }
a.s-ago:hover { color: var(--grn); }
.up { color: var(--grn); } .dn { color: var(--red); } .flat { color: var(--dim); }

/* ── LA SALA: DOS TRADERS LANZANDO SEÑALES ── */
.desks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; flex: none; }
.trd { cursor: zoom-in; overflow: hidden; display: grid; grid-template-columns: 1fr 118px; gap: 12px; padding: 13px 15px; align-items: stretch; --tc: var(--grn); transition: transform .25s ease; }
.trd:hover { transform: translateY(-2px); }
.trd-screen { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trd-h { display: flex; align-items: center; gap: 8px; }
.trd-tag { font: 700 9px/1 "Geist Mono", monospace; letter-spacing: .06em; color: #05140E; background: var(--tc); padding: 3px 6px; border-radius: 5px; }
.trd-h b { font: 600 14px/1.1 "Space Grotesk", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-st { margin-left: auto; font: 700 8px/1 "Geist Mono", monospace; letter-spacing: .05em; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.desk-st.on { color: var(--grn); border-color: color-mix(in srgb,var(--grn) 45%,transparent); background: color-mix(in srgb,var(--grn) 10%,transparent); }
.desk-st.warn { color: var(--amb); border-color: color-mix(in srgb,var(--amb) 45%,transparent); }
.desk-st.off { color: var(--red); border-color: color-mix(in srgb,var(--red) 45%,transparent); }
.trd-role { font: 500 10px/1 "Geist Mono", monospace; letter-spacing: .04em; color: var(--dim); }
.trd-live { position: relative; margin-top: 2px; padding: 9px 11px; border-radius: 11px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tc) 28%, transparent); background: color-mix(in srgb, var(--tc) 8%, transparent); }
.trd-launch { font: 700 8px/1 "Geist Mono", monospace; letter-spacing: .14em; color: var(--tc); }
.trd-sig { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.trd-sym { display: inline-flex; align-items: center; gap: 6px; font: 700 18px/1 "Space Grotesk", sans-serif; color: var(--ink); min-width: 0; }
.trd-sym img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.trd-sym.muted { font-weight: 500; font-size: 13px; color: var(--mut); }
.trd-move { margin-left: auto; font: 700 12px/1 "Geist Mono", monospace; white-space: nowrap; }
.trd-move.up { color: var(--grn); } .trd-move.dn { color: var(--red); } .trd-move.flat { color: var(--dim); }
.trd-ago { display: block; margin-top: 5px; font: 500 10px/1 "Geist Mono", monospace; color: var(--mut); }
.trd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: auto; padding-top: 9px; }
.trd-kv { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb,#000 24%,transparent); min-width: 0; }
.trd-kv small { display: block; font: 600 8px/1 "Geist Mono", monospace; letter-spacing: .04em; color: var(--mut); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-kv b { display: block; margin-top: 3px; font: 700 13px/1 "Geist", sans-serif; color: var(--ink); }
/* figura del trader (estilizada; no es una persona real) */
.trd .trader { align-self: end; width: 118px; height: 118px; position: relative; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.trd .trader svg { height: 150px; filter: drop-shadow(0 -8px 18px color-mix(in srgb, var(--tc) 30%, transparent)); }
.trader .t-body { fill: #0C141B; stroke: rgba(150,210,190,.28); stroke-width: 1; }
.trader .t-rim { fill: none; stroke: var(--tc); stroke-width: 1.4; opacity: .55; }
.trd .trader .t-head { transform-box: fill-box; transform-origin: 50% 90%; animation: trader-idle 6s ease-in-out infinite; }
.trd:nth-child(2) .trader .t-head { animation-delay: -3s; }
.trd .trader .t-hand { transform-box: fill-box; transform-origin: 20% 50%; animation: trader-type 1.1s steps(2) infinite; }
.trd:nth-child(2) .trader .t-hand { animation-duration: 1.45s; }
/* animación: lanzar una señal */
.trd-beam { position: absolute; right: 44px; bottom: 58px; z-index: 4; opacity: 0; pointer-events: none; }
.trd-beam span { display: inline-block; font: 700 9px/1 "Geist Mono", monospace; letter-spacing: .06em; color: #05140E; background: var(--tc); padding: 4px 7px; border-radius: 6px; box-shadow: 0 0 16px var(--tc); }
.trd.fire .trd-beam { animation: trd-launch 1.2s ease-out; }
.trd.fire .trd-live { animation: trd-flash 1.2s ease-out; }
.trd.fire .trader .t-hand { animation-duration: .5s; }

/* ── VISTA AMPLIADA ── */
.deskview { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; }
.deskview[hidden] { display: none !important; }
.deskview::before { content: ""; position: absolute; inset: 0; background: rgba(4,7,12,.55); }
.dv-glass { position: relative; width: min(760px, 96vw); max-height: 86vh; overflow: auto; padding: 20px 22px; }
.dv-body h3 { margin: 0 0 2px; font: 700 18px/1.1 "Space Grotesk", sans-serif; }
.dv-body .dv-role { font: 600 10px/1 "Geist Mono", monospace; letter-spacing: .14em; color: var(--grn); text-transform: uppercase; }
.dv-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; }
.dv-close:hover { color: var(--ink); }
.dv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; margin: 14px 0; }
.dv-kv { padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb,#000 24%,transparent); }
.dv-kv small { display: block; font: 600 9px/1 "Geist Mono", monospace; letter-spacing: .08em; color: var(--mut); text-transform: uppercase; }
.dv-kv b { display: block; margin-top: 5px; font: 700 17px/1 "Geist", sans-serif; color: var(--ink); }
.dv-kv b.up { color: var(--grn); } .dv-kv b.dn { color: var(--red); }
.dv-desc { font: 400 13px/1.6 "Geist", sans-serif; color: var(--dim); } .dv-desc b { color: var(--ink); }
.dv-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.dv-note { margin-top: 12px; font: 400 11px/1.5 "Geist", sans-serif; color: var(--mut); }
/* v109 · detalle de una señal: su gráfica (velas reales) */
.sig-row[data-k] { cursor: pointer; transition: border-color .15s, background .15s; }
.sig-row[data-k]:hover, .sig-row[data-k]:focus-visible { border-color: var(--line2); background: color-mix(in srgb,var(--grn) 9%,transparent); outline: none; }
.sig-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.sig-head img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2); }
.sig-move { font: 700 13px/1 "Geist Mono", monospace; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line2); }
.sig-move.up { color: var(--grn); background: color-mix(in srgb,var(--grn) 12%,transparent); }
.sig-move.dn { color: var(--red); background: color-mix(in srgb,var(--red) 12%,transparent); }
.sig-ago { margin-left: auto; font: 500 11px/1 "Geist Mono", monospace; color: var(--mut); }
.sig-chart { position: relative; height: 210px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb,#000 30%,transparent); overflow: hidden; }
.sig-candle { width: 100%; height: 100%; display: block; }
.sig-chart .hero-spark { width: 100%; height: 100%; }
.sig-chart .hero-ph { display: flex; align-items: center; justify-content: center; height: 100%; }
.sig-chart .gauge { padding: 16px; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font: 600 10px/1 "Geist Mono", monospace; color: var(--dim); }
.ch-k { display: inline-flex; align-items: center; gap: 6px; }
.ch-dash { width: 16px; height: 0; border-top: 2px dashed var(--mut); }
.ch-dash.up { border-color: var(--grn); } .ch-dash.dn { border-color: var(--red); } .ch-dash.live { border-color: var(--amb); }
.dv-link { display: inline-block; margin-top: 12px; font: 600 12px/1 "Geist Mono", monospace; color: var(--grn); text-decoration: none; border-bottom: 1px solid color-mix(in srgb,var(--grn) 40%,transparent); }

.wall-sk { height: 22px; border-radius: 6px; background: linear-gradient(90deg, #0C141C, #121C26, #0C141C); background-size: 200% 100%; animation: sala-sk 1.4s linear infinite; }
.sala-foot { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 7px 16px; font: 500 9.5px/1.4 "Geist Mono", monospace; letter-spacing: .04em; color: var(--mut); background: linear-gradient(0deg, rgba(4,7,12,.9), transparent); }
.sala-sim { color: var(--amb); }
.sala-empty { font: 400 12px/1.5 "Geist", sans-serif; color: var(--mut); padding: 8px 2px; }

@keyframes sala-beat { 0% { box-shadow: 0 0 0 0 rgba(47,227,160,.55); } 70%,100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes sala-sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes sala-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } }
@keyframes trader-idle { 0%,100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-1px); } }
@keyframes trader-type { 0% { transform: translateY(0); } 100% { transform: translateY(1.5px); } }
@keyframes hero-sheen { 0% { left: -50%; } 55%,100% { left: 130%; } }
@keyframes hero-pulse { 0% { box-shadow: inset 0 1px 0 rgba(205,255,238,.14), 0 0 0 0 rgba(47,227,160,.55), 0 40px 80px -32px rgba(0,0,0,.9); } 100% { box-shadow: inset 0 1px 0 rgba(205,255,238,.14), 0 0 0 10px rgba(47,227,160,0), 0 40px 80px -32px rgba(0,0,0,.9); } }
@keyframes sig-in { from { transform: translateX(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes trd-launch { 0% { opacity: 0; transform: translateY(8px) scale(.82); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateY(-58px) scale(1.06); } }
@keyframes trd-flash { 0% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent), 0 0 18px color-mix(in srgb, var(--tc) 55%, transparent); } 100% { box-shadow: none; } }

/* ── responsive ── */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .ops { flex: none; }
  .desks { grid-template-columns: 1fr 1fr; }
  .trd { grid-template-columns: 1fr 90px; } .trd .trader { width: 90px; height: 96px; } .trd .trader svg { height: 118px; }
}
@media (max-width: 640px) {
  .sala-brand small { display: none; } .sala-status span { display: none; }
  .room { inset: 56px 3vw 0; gap: 12px; overflow-y: auto; }
  .hero-main { grid-template-columns: 1fr; gap: 10px; } .hero-chart { min-height: 72px; } .hero-spark { height: 72px; }
  .office3d { min-height: 46vh; flex: none; }
  .hud-tl { left: 10px; right: 10px; width: auto; } .hud-tr { display: none; }
  .panels { grid-template-columns: 1fr; }
  .sala-foot { position: static; font-size: 8.5px; }
  .hero-h { gap: 8px; } .hero-tag { letter-spacing: .1em; } .wall-logo { letter-spacing: .08em; }
  .sala-top { padding: 11px 14px; gap: 10px; }
  .sig-ctl { padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sala-status[data-s="live"] i, .wall-sk, .trader .t-head, .trader .t-hand, .hero-tag i, .hero-sweep::after, .sig-row.top, .trd.fire .trd-beam, .trd.fire .trd-live { animation: none !important; }
  .room, .trd, .gauge-bar i { transition: none !important; }
  .sala-fog { display: none; }
}
