/* BingX Premium Mobile — iOS-first app shell */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root, [data-theme="adminlte"] {
  --bg: #f4f6f9;
  --card: #ffffff;
  --card2: #f8f9fa;
  --bd: #dee2e6;
  --tx: #212529;
  --mu: #6c757d;
  --ac: #007bff;
  --ac-tx: #ffffff;
  --ac2: #ffc107;
  --long: #28a745;
  --short: #dc3545;
  --tab: rgba(255,255,255,.94);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --radius: 6px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --login-bg: linear-gradient(145deg, #343a40 0%, #007bff 55%, #343a40 100%);
  --tab-h: 58px;
}

[data-theme="professional"] {
  --bg: #1a1d20; --card: #2b3035; --card2: #343a40; --bd: #495057;
  --tx: #f8f9fa; --mu: #adb5bd; --ac: #0d6efd; --ac-tx: #fff; --ac2: #ffc107;
  --long: #28a745; --short: #dc3545; --tab: rgba(33,37,41,.94);
  --login-bg: linear-gradient(145deg, #212529, #0d6efd 60%, #212529);
}

[data-theme="royal"] {
  --bg: #0c1220; --card: #122033; --card2: #182a42; --bd: rgba(212,175,55,.25);
  --tx: #f3f0e7; --mu: #9aa8bc; --ac: #d4af37; --ac-tx: #1a1200; --ac2: #e8c872;
  --long: #3ecf8e; --short: #f07178; --tab: rgba(0,31,63,.95);
  --login-bg: radial-gradient(900px 480px at 80% 0%, rgba(212,175,55,.2), transparent 50%), #001f3f;
}

[data-theme="minimal"] {
  --bg: #f4f6f8; --card: #fff; --card2: #eef1f5; --bd: #d5dbe3;
  --tx: #18181b; --mu: #64748b; --ac: #0f766e; --ac-tx: #fff; --ac2: #b45309;
  --long: #16a34a; --short: #dc2626; --tab: rgba(255,255,255,.95);
  --login-bg: linear-gradient(180deg, #20c997, #0f766e);
}

[data-theme="futurist"] {
  --bg: #16141f; --card: #1e1a2e; --card2: #2a2340; --bd: #3d3558;
  --tx: #f3e8ff; --mu: #a78bfa; --ac: #a855f7; --ac-tx: #1a052e; --ac2: #22d3ee;
  --long: #22c55e; --short: #ef4444; --tab: rgba(46,10,69,.96);
  --login-bg: radial-gradient(800px 400px at 50% -20%, rgba(168,85,247,.3), transparent 55%), #3f0a5c;
}

[data-theme="contrast"] {
  --bg: #000; --card: #111; --card2: #1a1a1a; --bd: #444;
  --tx: #fff; --mu: #bbb; --ac: #ffd400; --ac-tx: #111; --ac2: #ff6b00;
  --long: #0f0; --short: #f00; --tab: #0a0a0a;
  --login-bg: #000;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.4 var(--font);
  background: var(--bg); color: var(--tx);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Login */
.login-screen {
  min-height: 100%; min-height: 100dvh;
  display: flex; align-items: flex-end; justify-content: center;
  padding: calc(24px + var(--safe-t)) 16px calc(28px + var(--safe-b));
  background: var(--login-bg);
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card {
  background: var(--card); border-radius: 22px; padding: 26px 22px 22px;
  box-shadow: var(--shadow);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-brand .logo {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(145deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #000));
  display: grid; place-items: center; color: var(--ac-tx); font-weight: 800; font-size: 20px;
}
.login-card h1 { margin: 0; font-size: 24px; letter-spacing: -.5px; font-weight: 700; }
.login-card .sub { color: var(--mu); font-size: 13px; margin: 8px 0 20px; }
.login-card label {
  display: block; font-size: 12px; color: var(--mu); font-weight: 600;
  margin: 0 0 6px;
}
.login-card input {
  width: 100%; background: var(--card2); border: 1px solid var(--bd); color: var(--tx);
  border-radius: 12px; padding: 14px 14px; font-size: 17px; margin-bottom: 14px;
  font-family: var(--font);
}
.login-card input:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 25%, transparent); }
.login-card button[type=submit] {
  width: 100%; border: 0; border-radius: 12px; padding: 15px; font-weight: 700; font-size: 16px;
  background: var(--ac); color: var(--ac-tx); cursor: pointer; margin-top: 4px;
}
.login-error { color: var(--short); font-size: 13px; min-height: 18px; margin-bottom: 8px; font-weight: 600; }
.login-hint { font-size: 12px; color: var(--mu); margin-top: 14px; line-height: 1.45; }
.login-hint a { color: var(--ac); word-break: break-all; }
.login-themes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }
.login-themes button {
  border: 0; background: rgba(255,255,255,.14); color: #fff;
  border-radius: 999px; padding: 7px 11px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.login-themes button.on { background: #fff; color: #111; }

/* App shell — column + bottom tabs */
.app-shell { display: none; height: 100%; height: 100dvh; flex-direction: column; }
.app-shell.on { display: flex; }

.topbar {
  height: calc(52px + var(--safe-t)); padding: var(--safe-t) 14px 0;
  background: #1e293b;
  border-bottom: 3px solid var(--ac);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; z-index: 40;
  color: #fff;
}
.topbar .icon-btn {
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.1); color: #fff;
  display: grid; place-items: center; font-size: 16px; cursor: pointer;
}
.topbar h1 { font-size: 16px; margin: 0; flex: 1; font-weight: 700; letter-spacing: -.2px; color: #fff; }
.topbar .pill {
  font-size: 10px; font-weight: 600; color: #cbd5e1; background: rgba(255,255,255,.1);
  border-radius: 6px; padding: 4px 8px; font-family: var(--mono);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.35); }

/* Hide legacy desktop sidebar on phone — more menu lives in "Más" */
.shell-body { flex: 1; display: flex; min-height: 0; position: relative; }
.sidebar, .backdrop, .topbar .menu-only { display: none !important; }

.content {
  flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 12px;
  width: 100%; max-width: 720px; margin: 0 auto;
  background: var(--bg);
}

/* Bottom tab bar — AdminLTE style */
.tabbar {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tab-h) + var(--safe-b));
  padding: 6px 4px calc(6px + var(--safe-b));
  background: #fff;
  border-top: 1px solid var(--bd);
  box-shadow: 0 -2px 10px rgba(15,23,42,.06);
  z-index: 50;
}
.tabbar button {
  border: 0; background: transparent; color: var(--mu);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10px; font-weight: 600; font-family: var(--font); cursor: pointer;
  position: relative; padding: 2px 0; border-radius: 8px;
}
.tabbar button .ti { font-size: 18px; line-height: 1; }
.tabbar button.active { color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent); }
.tabbar button .badge {
  position: absolute; top: -2px; right: calc(50% - 18px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--short); color: #fff; font-size: 9px; font-weight: 800;
  display: grid; place-items: center;
}

.page { display: none; padding-bottom: 8px; }
.page.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-h { margin-bottom: 12px; }
.section-h h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--tx); }
.section-h p { margin: 4px 0 0; font-size: 12px; color: var(--mu); }

.help {
  background: color-mix(in srgb, var(--ac) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ac) 28%, var(--bd));
  border-left: 4px solid var(--ac);
  border-radius: 6px; padding: 10px 12px; font-size: 13px; color: var(--tx);
  margin-bottom: 12px; line-height: 1.4;
}

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac);
}
.kpi:nth-child(2)::before { background: var(--ac2); }
.kpi:nth-child(3)::before { background: var(--long); }
.kpi:nth-child(4)::before { background: #8b5cf6; }
.kpi span { display: block; font-size: 11px; color: var(--mu); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.kpi b { display: block; margin-top: 6px; font-size: 22px; font-weight: 700; font-family: var(--mono); letter-spacing: -.5px; }
.kpi b.pos { color: var(--long); } .kpi b.neg { color: var(--short); }

.real-hero {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 18%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--ac) 35%, var(--bd));
  border-radius: 12px;
  padding: 16px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.real-hero-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
.real-hero-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mu);
}
.real-hero-eq {
  font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -.8px;
  line-height: 1.1; margin: 4px 0 12px;
}
.real-hero-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.real-hero-row span {
  display: block; font-size: 10px; color: var(--mu); font-weight: 600; text-transform: uppercase;
}
.real-hero-row b {
  display: block; margin-top: 4px; font-size: 15px; font-family: var(--mono); font-weight: 700;
}
.real-hero-row b.pos { color: var(--long); }
.real-hero-row b.neg { color: var(--short); }
.real-hero-day {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd);
  font-size: 12px; color: var(--mu);
}
.real-hero-day b { font-family: var(--mono); color: var(--tx); }

.topbar .pill.warn { color: #fde68a; }
.topbar .pill.err { color: #fca5a5; background: rgba(239,68,68,.2); }

.card {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.card.signal {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 0 12px; align-items: start;
  padding: 0; overflow: hidden;
}
.card.signal .sig-bar { min-height: 70px; background: var(--mu); }
.card.signal.long .sig-bar { background: var(--long); }
.card.signal.short .sig-bar { background: var(--short); }
.card.signal .sig-body { padding: 12px 0; min-width: 0; }
.card.signal .sig-side { padding: 12px 12px 12px 0; }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .title { font-weight: 700; font-size: 15px; }
.card .title .sym { font-family: var(--mono); }
.card .meta { font-size: 12px; color: var(--mu); margin-top: 4px; }
.card .reason {
  font-size: 12.5px; color: var(--mu); margin-top: 8px; line-height: 1.4;
  background: var(--card2); border-radius: 10px; padding: 8px 10px;
}
.card .levels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.card .lvl {
  font-size: 11px; font-family: var(--mono); font-weight: 600;
  background: var(--card2); border-radius: 8px; padding: 4px 8px;
}

.tag {
  font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--mu) 14%, transparent); color: var(--mu);
  text-transform: uppercase;
}
.tag.long { background: color-mix(in srgb, var(--long) 16%, transparent); color: var(--long); }
.tag.short { background: color-mix(in srgb, var(--short) 16%, transparent); color: var(--short); }
.tag.run { background: color-mix(in srgb, var(--ac) 16%, transparent); color: var(--ac); }
.tag.watch { background: color-mix(in srgb, var(--ac2) 16%, transparent); color: var(--ac2); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.btn {
  border: 0; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 14px;
  background: var(--ac); color: var(--ac-tx); cursor: pointer; font-family: var(--font);
  min-height: 44px;
}
.btn.ghost { background: var(--card2); color: var(--tx); }
.btn.danger { background: color-mix(in srgb, var(--short) 14%, transparent); color: var(--short); }
.btn:disabled { opacity: .45; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.act {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 64px; padding: 10px 6px;
  border: 1px solid var(--bd); border-radius: 12px;
  background: var(--card); color: var(--tx);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
}
.act .ai { font-size: 18px; line-height: 1; }
.act:active { transform: scale(.97); }
.act.danger {
  border-color: color-mix(in srgb, var(--short) 35%, var(--bd));
  background: color-mix(in srgb, var(--short) 8%, var(--card));
  color: var(--short);
}
.act:disabled { opacity: .45; pointer-events: none; }

.health-card .health-mini { margin-top: 8px; display: grid; gap: 4px; }
.health-issue {
  font-size: 12px; font-family: var(--mono);
  color: var(--short);
  padding: 6px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--short) 10%, transparent);
}
.card.health-bad {
  border-color: color-mix(in srgb, var(--short) 40%, var(--bd));
  background: color-mix(in srgb, var(--short) 6%, var(--card));
}

.sheet-bg {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 80;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--card); border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(16px + var(--safe-b));
  box-shadow: 0 -8px 32px rgba(0,0,0,.2);
  animation: sheetUp .2s ease;
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-handle {
  width: 36px; height: 4px; border-radius: 99px; background: var(--bd);
  margin: 2px auto 12px;
}
.sheet-title {
  font-size: 15px; font-weight: 800; margin-bottom: 12px; text-align: center;
}
.sheet-grid { margin-bottom: 4px; }

@media (min-width: 900px) {
  .action-grid, .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

select, input, textarea {
  width: 100%; background: var(--card2); border: 1px solid var(--bd); color: var(--tx);
  border-radius: 12px; padding: 13px 12px; font-size: 16px; margin-bottom: 10px; font-family: var(--font);
}
.field-label { font-size: 12px; color: var(--mu); margin-bottom: 5px; display: block; font-weight: 600; }

.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt {
  border: 1px solid var(--bd); border-radius: 14px; padding: 12px; background: var(--card);
  display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--shadow);
}
.theme-opt.active { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--card)); }
.theme-swatch { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }
.theme-opt .title { font-size: 13px; font-weight: 700; }
.theme-opt .meta { margin-top: 2px; font-size: 11px; color: var(--mu); }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mu); margin: 6px 0; }
.check input { width: auto; margin: 0; }
.btn.mini { padding: 6px 10px; font-size: 11px; border-radius: 6px; }
.sig-table {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px;
}
.sig-row {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--bd); font-size: 13px;
}
.sig-row:last-child { border-bottom: 0; }
.sig-row .t { font-family: var(--mono); font-size: 11px; color: var(--mu); line-height: 1.25; }
.sig-row .sym { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.sig-row .src { font-size: 11px; color: var(--mu); margin-top: 2px; }
.sig-row .side-chip {
  font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 6px; text-transform: uppercase;
}
.sig-row .side-chip.long { background: color-mix(in srgb, var(--long) 16%, transparent); color: var(--long); }
.sig-row .side-chip.short { background: color-mix(in srgb, var(--short) 16%, transparent); color: var(--short); }
.muted-list .sig-row { opacity: .72; }
.nav-label {
  font-size: 12px; font-weight: 700; color: var(--mu);
  letter-spacing: .2px; padding: 10px 2px 6px; text-transform: uppercase;
}
.empty {
  text-align: center; color: var(--mu); padding: 28px 16px; font-size: 14px;
  background: var(--card); border-radius: var(--radius);
}
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(12px);
  bottom: calc(var(--tab-h) + 16px + var(--safe-b));
  background: rgba(28,28,30,.94); color: #fff; border: 0;
  padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 80;
  opacity: 0; pointer-events: none; transition: .22s; max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.bot-card .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.bot-card .stat { background: var(--card2); border-radius: 10px; padding: 8px; text-align: center; }
.bot-card .stat span { display: block; font-size: 10px; color: var(--mu); font-weight: 700; text-transform: uppercase; }
.bot-card .stat b { font-size: 13px; font-family: var(--mono); }

.more-list { display: flex; flex-direction: column; gap: 0; }
.more-list button {
  width: 100%; text-align: left; border: 0; background: var(--card); color: var(--tx);
  padding: 16px 14px; font-size: 16px; font-weight: 600; font-family: var(--font);
  border-bottom: 0.5px solid var(--bd); cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.more-list button:first-child { border-radius: 14px 14px 0 0; }
.more-list button:last-child { border-radius: 0 0 14px 14px; border-bottom: 0; }
.more-list .chev { margin-left: auto; color: var(--mu); font-weight: 400; }

.pos-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 8px 0 4px; padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ac) 35%, var(--bd));
  border-radius: 8px; background: color-mix(in srgb, var(--ac) 8%, transparent);
  color: var(--tx); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left;
}
.pos-toggle::before { content: '▸'; width: 1em; }
.pos-toggle.open::before { content: '▾'; }
.pos-toggle.open { border-color: var(--ac); }
.pos-panel { display: grid; gap: 6px; margin-bottom: 6px; }
.pos-panel[hidden] { display: none; }
.pos-row {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--bd); background: color-mix(in srgb, var(--bg) 80%, #000);
}
.pos-row .tag.long { background: color-mix(in srgb, var(--long) 18%, transparent); color: var(--long); }
.pos-row .tag.short { background: color-mix(in srgb, var(--short) 18%, transparent); color: var(--short); }

/* Agentes War Room */
.agent-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 55%),
    var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}
.agent-card .agent-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.agent-card .agent-orb {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
  background: linear-gradient(145deg, var(--ac), color-mix(in srgb, var(--ac) 40%, #000));
  color: var(--ac-tx); flex-shrink: 0;
}
.agent-card .agent-title { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.agent-card .agent-role { color: var(--mu); font-size: 12px; margin-top: 2px; }
.agent-card .agent-detail {
  font-family: var(--mono); font-size: 11px; color: var(--tx);
  background: var(--card2); border-radius: 8px; padding: 8px 10px; margin: 8px 0;
}
.agent-card .agent-why {
  font-size: 13px; line-height: 1.45; color: var(--tx);
  border-left: 3px solid var(--ac); padding-left: 10px; margin-top: 6px;
}
.agent-status {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; padding: 4px 8px; border-radius: 999px;
}
.agent-status.on { background: color-mix(in srgb, var(--long) 22%, transparent); color: var(--long); }
.agent-status.off { background: color-mix(in srgb, var(--mu) 22%, transparent); color: var(--mu); }
.agent-status.halt { background: color-mix(in srgb, var(--short) 22%, transparent); color: var(--short); }
.agent-status.adv { background: color-mix(in srgb, var(--ac2) 28%, transparent); color: var(--ac2); }

.agent-bot-card {
  border: 1px solid var(--bd); border-radius: 14px; padding: 14px;
  background: var(--card); margin-bottom: 10px;
}
.agent-bot-card .why-box {
  margin-top: 10px; padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 10%, var(--card2)), var(--card2));
  border: 1px solid color-mix(in srgb, var(--ac) 25%, var(--bd));
}
.agent-bot-card .why-box .lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ac); margin-bottom: 4px;
}

.agent-log {
  max-height: 52vh; overflow: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bd); border-radius: 14px; background: #0b1220;
  padding: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.45;
  color: #d7e0ea;
}
.agent-log .log-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 8px;
  padding: 8px 8px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.agent-log .log-row:last-child { border-bottom: 0; }
.agent-log .log-ts { color: #7f8ea3; font-size: 10px; }
.agent-log .log-type {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; margin-right: 6px; vertical-align: middle;
}
.agent-log .log-type.info { background: #1d4ed8; color: #fff; }
.agent-log .log-type.warn { background: #b45309; color: #fff; }
.agent-log .log-type.error { background: #b91c1c; color: #fff; }
.agent-log .log-type.signal,
.agent-log .log-type.try_open,
.agent-log .log-type.open { background: #15803d; color: #fff; }
.agent-log .log-type.close { background: #7c3aed; color: #fff; }
.agent-log .log-type.tick,
.agent-log .log-type.war_room_info { background: #334155; color: #e2e8f0; }
.agent-log .log-msg { color: #cbd5e1; }
.agent-log .log-why { color: #94a3b8; margin-top: 3px; font-size: 10.5px; }

@media (min-width: 900px) {
  .content { padding: 20px 24px; max-width: 1100px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  #botsList, #homeBots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .action-grid, .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #agentsCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* Terminal posiciones live (MT / BingX) */
.pos-live-bar {
  position: sticky; top: 0; z-index: 4;
  margin: 0 0 12px; padding: 8px 10px;
  background: color-mix(in srgb, var(--card) 92%, var(--ac));
  border: 1px solid var(--bd); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pos-live-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mu); margin-bottom: 6px;
}
.pos-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--long);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--long) 55%, transparent);
  animation: pos-pulse 1.4s ease-out infinite;
}
.pos-live-sum { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; }
.pos-live-track {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; scroll-snap-type: x mandatory;
}
.pos-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 168px; max-width: 220px;
  padding: 8px 10px; border-radius: 6px;
  background: var(--card2); border: 1px solid var(--bd);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.pos-chip:active { border-color: var(--ac); }
.pos-chip .pc-top {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 11px; font-weight: 700;
}
.pos-chip .pc-side-long { color: var(--long); }
.pos-chip .pc-side-short { color: var(--short); }
.pos-chip .pc-pnl { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.pos-chip .pc-meta { font-size: 10px; color: var(--mu); margin-top: 3px; font-family: var(--mono); }
.pos-chip.flash-up { animation: flash-up .55s ease; }
.pos-chip.flash-down { animation: flash-down .55s ease; }

.pos-terminal {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.pos-row {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer;
}
.pos-row:active { border-color: var(--ac); }
.pos-row .pr-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.pos-row .pr-sym { font-weight: 700; font-size: 14px; }
.pos-row .pr-side { font-size: 11px; font-weight: 700; margin-left: 6px; }
.pos-row .pr-side.long { color: var(--long); }
.pos-row .pr-side.short { color: var(--short); }
.pos-row .pr-acc { font-size: 10px; color: var(--mu); font-weight: 600; }
.pos-row .pr-pnl {
  font-family: var(--mono); font-weight: 700; font-size: 14px; text-align: right;
}
.pos-row .pr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px; margin-top: 8px;
}
.pos-row .pr-cell span { display: block; font-size: 9px; color: var(--mu); text-transform: uppercase; letter-spacing: .03em; }
.pos-row .pr-cell b { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.pos-row.flash-up { animation: flash-up .55s ease; }
.pos-row.flash-down { animation: flash-down .55s ease; }

.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--card2); border: 1px solid var(--bd); border-radius: 8px;
  padding: 3px; margin: 0 0 12px;
}
.seg-btn {
  border: 0; background: transparent; color: var(--mu);
  font: 600 13px/1.2 var(--font); padding: 10px 8px; border-radius: 6px; cursor: pointer;
}
.seg-btn.active { background: var(--card); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

@keyframes pos-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--long) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes flash-up {
  0% { background: color-mix(in srgb, var(--long) 28%, var(--card)); }
  100% { background: var(--card); }
}
@keyframes flash-down {
  0% { background: color-mix(in srgb, var(--short) 28%, var(--card)); }
  100% { background: var(--card); }
}