/* ============================================================
   CryptoBot — dashboard (tema oscuro, paleta de docs/experts/ux.md)
   ============================================================ */

:root {
  --bg: #0B0E14;
  --surface: #11151F;
  --surface-2: #1A2030;
  --border: #232B3D;
  --text: #E8ECF4;
  --text-dim: #9AA3B8;
  --text-mute: #5E6679;
  --cyan: #22D3EE;
  --violet: #A78BFA;
  --green: #34D399;
  --red: #F87171;
  --amber: #FBBF24;
  --green-bg: #34D3991A;
  --red-bg: #F871711A;
  --brand-grad: linear-gradient(135deg, #22D3EE, #A78BFA);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

button, input { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: var(--cyan); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}

button, input, .chip, tr, .icon-btn {
  transition: background-color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* números siempre tabulares */
.num, td, .kpi-value, .feed-line .t, .mini-table, .kv dd {
  font-variant-numeric: tabular-nums;
}

/* colores semánticos */
.pos { color: var(--green); }
.neg { color: var(--red); }
.zero { color: var(--text-dim); }
.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.amber { color: var(--amber); }
.violet { color: var(--violet); }
.strong { font-weight: 600; }

/* ============================ Header ============================ */

#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.logo, .brand-name {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.brand-name { font-size: 18px; letter-spacing: 0.3px; }
.brand-sub { font-size: 12px; color: var(--text-mute); }

.top-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 13px;
}

.conn { display: inline-flex; align-items: center; gap: 5px; }
.conn.on { color: var(--green); }
.conn.off { color: var(--red); }

@media (prefers-reduced-motion: no-preference) {
  .conn.off .dot { animation: blink 1s step-end infinite; }
}
@keyframes blink { 50% { opacity: 0.25; } }

.pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.mode {
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 10px;
  letter-spacing: 0.5px;
}
.mode.paper { background: var(--surface-2); color: var(--cyan); }
.mode.live { background: var(--red); color: #0B0E14; }

.top-actions { display: flex; gap: 8px; }

.btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.btn:hover:not(:disabled) { background: var(--border); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.start { border-color: var(--cyan); color: var(--cyan); }
.btn.stop { border-color: var(--red); color: var(--red); }
.btn.primary { border-color: var(--cyan); color: var(--cyan); }
.btn.ghost { color: var(--text-dim); }

.icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  line-height: 1;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.live-banner {
  background: var(--red);
  color: #0B0E14;
  font-weight: 700;
  text-align: center;
  padding: 6px 16px;
  font-size: 13px;
  position: sticky;
  top: 56px;
  z-index: 39;
}

/* ============================ Navegación por pestañas ============================ */

.tabs {
  position: sticky;
  top: 56px;
  z-index: 38;
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* cuando el banner de live está visible, la barra de pestañas baja bajo él */
body:has(#liveBanner:not([hidden])) .tabs { top: calc(56px + 29px); }

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.on {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.tab-panel { /* contenedor de cada pestaña (reusa .container) */ }

/* ============================ Layout ============================ */

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px #0008;
  min-width: 0;
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.card-head h2, #detailPanel h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  margin: 18px 0 6px;
}

.hint { font-size: 12px; color: var(--text-mute); margin: 2px 0; }
.hint.err { color: var(--red); }

.disclaimer { font-size: 12px; color: var(--text-mute); margin: 6px 0 0; }
.disclaimer.wide { grid-column: 1 / -1; margin: -6px 2px 0; }

#kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 92px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.kpi-proj { border-color: #A78BFA66; }

/* ============================ Control de capital simulado ============================ */

#capitalBar { grid-column: 1 / -1; }

.capital-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-color: var(--cyan);
  border-left: 3px solid var(--cyan);
}

.capital-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.capital-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.capital-input-wrap { position: relative; display: inline-flex; align-items: center; }

#capitalInput {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 26px 7px 12px;
  width: 150px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#capitalInput:hover { border-color: var(--text-mute); }
.capital-unit {
  position: absolute;
  right: 10px;
  color: var(--text-mute);
  font-weight: 700;
  pointer-events: none;
}

.capital-presets { display: inline-flex; gap: 6px; }
.preset-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
}
.preset-btn:hover { border-color: var(--text-mute); color: var(--text); }
.preset-btn.on { background: #22D3EE26; border-color: var(--cyan); color: var(--cyan); }

.capital-note { font-size: 12px; color: var(--text-mute); margin: 0; }
.capital-note strong { color: var(--cyan); font-variant-numeric: tabular-nums; }

.kpi-label { font-size: 12px; color: var(--text-dim); }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { font-size: 12px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================ Toolbar ============================ */

#toolbar { grid-column: 1 / -1; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 16px;
  min-height: 48px;
}

.search-wrap { display: flex; align-items: center; gap: 10px; }

#search {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  width: 240px;
  color: var(--text);
}
#search::placeholder { color: var(--text-mute); }

/* dropdown de ordenación */
.sort-wrap { display: flex; align-items: center; gap: 6px; }
.sort-wrap label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

#sortSelect {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
}
#sortSelect:hover { border-color: var(--text-mute); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.chip-group { display: flex; gap: 4px; flex-wrap: wrap; padding-right: 10px; border-right: 1px solid var(--border); }
.chip-group:last-child { border-right: none; }

.chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
}
.chip:hover { border-color: var(--text-mute); }
.chip.on {
  background: #22D3EE26;
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ============================ Tabla de estrategias ============================ */

#tableCard { grid-column: 1 / span 8; }

/* segmentado Todos | Spot | Futuros */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 2px 0 10px;
}
.seg-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 16px;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--surface-2); }
.seg-btn.on { background: #22D3EE26; color: var(--cyan); }

.table-wrap {
  overflow: auto;
  max-height: 60vh;
  border: 1px solid var(--border);
  border-radius: 8px;
}

#stratTable {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  font-size: 13px;
}

#stratTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 32px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

#stratTable th.ta-l, #stratTable td.ta-l { text-align: left; }
#stratTable th.ta-r, #stratTable td.ta-r { text-align: right; }

#stratTable th.sortable { cursor: pointer; user-select: none; }
#stratTable th.sortable:hover { color: var(--text); }
#stratTable th.sortable.active { color: var(--text); }
#stratTable th .arrow { color: var(--cyan); font-size: 10px; }

#stratTable tbody tr {
  height: 36px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
#stratTable tbody tr:hover { background: var(--surface-2); }
#stratTable tbody tr.selected {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--cyan);
}

#stratTable td {
  padding: 0 10px;
  text-align: center;
  white-space: nowrap;
}

td.col-name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

#stratTable td .score { font-weight: 700; }

/* mini-curva de equity (sparkline) en cada fila */
td.col-spark { padding: 0 6px; }
.spark-canvas { display: block; width: 80px; height: 24px; }

/* fila de campeón/activo degradado: borde ámbar a la izquierda */
#stratTable tbody tr.row-degraded { box-shadow: inset 3px 0 0 var(--amber); }
#stratTable tbody tr.row-degraded.selected { box-shadow: inset 3px 0 0 var(--amber), inset 6px 0 0 var(--cyan); }

/* contador "N campeones degradados" en la cabecera de la pestaña Estrategias */
.degraded-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  background: #FBBF241A;
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* botón Exportar CSV en la cabecera de Retiradas */
.btn.export-csv { margin-left: auto; padding: 4px 12px; font-size: 12px; }

tr.empty-row td, td.empty {
  text-align: center;
  color: var(--text-mute);
  padding: 22px 10px;
  cursor: default;
}
tr.empty-row:hover { background: transparent !important; }
tr.empty-row .btn { margin-left: 10px; }

/* badges de estado */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.b-champion { background: #A78BFA26; color: var(--violet); border-color: var(--violet); }
.b-active { background: var(--green-bg); color: var(--green); }
.b-candidate { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }
.b-retired { background: var(--red-bg); color: var(--red); }
.b-new { background: #22D3EE1A; color: var(--cyan); border-color: var(--cyan); font-size: 11px; padding: 1px 6px; margin-left: 6px; }
/* validada: histórico completo positivo y con muestra suficiente (>=50 trades) */
.b-validated { background: var(--green-bg); color: var(--green); border-color: var(--green); font-size: 11px; padding: 1px 6px; margin-left: 6px; }

/* significancia estadística: muestra insuficiente (< MIN_TRADES) */
.trades-warn { color: var(--amber); font-weight: 700; }
.trades-warn.crit { color: var(--red); }
.trade-sum.insufficient {
  border: 1px solid var(--amber);
  background: #FBBF241A;
  border-radius: 8px;
  padding: 6px 10px;
}
.trade-sum.insufficient.crit { border-color: var(--red); background: var(--red-bg); }
.trade-sum .warn-tag { color: var(--amber); font-weight: 700; }
.trade-sum.crit .warn-tag { color: var(--red); }

/* chips de mercado y dirección */
.m-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.4px;
}
.m-spot { background: var(--surface-2); color: var(--text-dim); }
.m-fut { background: #22D3EE1A; color: var(--cyan); }

.d-long { color: var(--green); font-weight: 600; }
.d-short { color: var(--red); font-weight: 600; }
.d-both { color: var(--cyan); font-weight: 600; }

/* ============================ Retiradas recientes (plegable) ============================ */

#retiredCard { grid-column: 1 / span 8; }

#retiredCard summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
#retiredCard summary::-webkit-details-marker { display: none; }
#retiredCard summary::before { content: '▸'; color: var(--text-dim); font-size: 14px; }
#retiredCard[open] summary::before { content: '▾'; }
#retiredCard summary h2 { font-size: 20px; font-weight: 600; margin: 0; }

.retired-wrap { max-height: 280px; margin-top: 8px; }
.retired-wrap .mini-table { min-width: 720px; }
.retired-wrap tbody tr { cursor: pointer; }
.retired-wrap tbody tr:hover { background: var(--surface-2); }
.retired-wrap td.reason { white-space: normal; color: var(--text-dim); }

/* separador del escáner de arbitraje (independiente de los bots) */
.section-divider {
  grid-column: 1 / -1;
  width: 100%;
  border: none;
  border-top: 2px dashed var(--border);
  margin: 12px 0 0;
}

/* flash al actualizar por WS */
@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flashAnim 600ms ease-out; }
}
@keyframes flashAnim { 0% { color: var(--cyan); } }

/* ============================ Panel detalle ============================ */

#detailPanel {
  grid-column: 9 / span 4;
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 88px);
  overflow: auto;
}

#detailPanel .card-head { margin-bottom: 4px; }
#detailClose { display: none; }

.detail-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; }
.detail-meta .name { font-weight: 600; width: 100%; word-break: break-all; }

/* bloque destacado bruto / fees / neto (ventana test) */
.net-block {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid #A78BFA66;
  border-left: 3px solid var(--violet);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 12px;
}
.net-item { display: flex; flex-direction: column; gap: 2px; min-width: 86px; }
.net-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.net-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

#equityCanvas, #historyCanvas {
  width: 100%;
  height: 160px;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
#historyCanvas { margin-top: 8px; }

.legend { display: flex; gap: 14px; align-items: baseline; font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.leg-train { color: var(--cyan); }
.leg-test { color: var(--violet); }

.banner-amber {
  margin-top: 10px;
  background: #FBBF241A;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
}

.warn-amber { color: var(--amber); font-size: 12px; margin: 6px 0 0; }

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  margin: 0;
  font-size: 13px;
}
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; text-align: right; word-break: break-all; }

.lineage { font-size: 13px; line-height: 1.9; word-break: break-all; }
.lineage .sep { color: var(--text-mute); padding: 0 4px; }
.lineage .self { font-weight: 600; color: var(--violet); }
.lineage button {
  background: none;
  border: none;
  padding: 0;
  color: var(--cyan);
  text-decoration: underline;
  font-size: 13px;
}

.recs { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.recs li { padding: 3px 0 3px 16px; position: relative; }
.recs li::before { content: '›'; position: absolute; left: 2px; color: var(--cyan); font-weight: 700; }

/* tabla scrollable de operaciones (test e histórico) */
.trades-wrap { max-height: 240px; margin-top: 4px; }
.trades-table { min-width: 620px; font-size: 12px; }

.trade-sum { font-size: 12px; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.trade-sum .sep { color: var(--text-mute); }

.hist-title { font-size: 13px; color: var(--text-dim); margin: 4px 0 8px; }

/* banner de fiabilidad del histórico completo (nº de trades como métrica principal) */
.hist-reliab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0 8px;
  font-size: 13px;
}
.hist-reliab .rel-count { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hist-reliab .rel-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.hist-reliab.ok { border-color: var(--green); background: var(--green-bg); }
.hist-reliab.ok .rel-count { color: var(--green); }
.hist-reliab.weak { border-color: var(--amber); background: #FBBF241A; }
.hist-reliab.weak .rel-count { color: var(--amber); }
.hist-reliab.none { border-color: var(--border); background: var(--surface-2); }
.hist-reliab.none .rel-count { color: var(--text-mute); }
.hist-reliab .rel-msg { color: var(--text-dim); }

.calc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.calc-row label { font-size: 13px; color: var(--text-dim); }
#calcCapital {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  width: 130px;
  color: var(--text);
  text-align: right;
}

/* ============================ Mini tablas (calc, arbitraje) ============================ */

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mini-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  font-weight: 600;
  text-align: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.mini-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.mini-table .ta-l { text-align: left; }
.mini-table .ta-r { text-align: right; }
.mini-table .net { font-weight: 700; }

/* ============================ Arbitraje / Exchanges ============================ */

#arbCard { grid-column: 1 / span 6; min-height: 360px; }
#exCard { grid-column: 7 / span 6; min-height: 360px; }

.arb-wrap { max-height: 290px; }
.arb-wrap .mini-table { min-width: 480px; }

tr.hot { background: var(--green-bg); }
.path-arrow { color: var(--text-mute); padding: 0 3px; }

.ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.ex-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.ex-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ex-head .ex-name { font-weight: 600; font-size: 14px; }
.ex-key { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-mute); margin-left: auto; }
.ex-card table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ex-card th, .ex-card td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--border); }
.ex-card th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 11px; }
.ex-card th:first-child, .ex-card td:first-child { text-align: left; color: var(--text-dim); }
.ex-card tr:last-child td { border-bottom: none; }
.ex-hint { font-size: 11px; color: var(--text-mute); margin: 6px 0 0; }

.badge-ok { background: var(--green-bg); color: var(--green); }
.badge-off { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }

/* ============================ Feed ============================ */

#feedCard { grid-column: 1 / -1; }

#feed {
  height: 220px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.feed-line { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.feed-line .t { color: var(--text-mute); margin-right: 8px; }

.pill.paused { color: var(--amber); border-color: var(--amber); }

/* ============================ Toast / Modal ============================ */

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 18px;
  z-index: 60;
  box-shadow: 0 1px 2px #0008;
}

.modal {
  position: fixed;
  inset: 0;
  background: #0B0E14CC;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  padding: 16px;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  width: min(420px, 100%);
}
.modal-card h2 { margin: 0 0 6px; font-size: 20px; }

#tokenInput {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  color: var(--text);
}
.modal-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }

/* ============================ Tokens nuevos (escáner + pool sandbox) ============================ */

#tokScanCard { grid-column: 1 / -1; }
#tokPoolCard { grid-column: 1 / -1; }
/* Por defecto, TODA tarjeta de una pestaña ocupa el ancho completo del grid (12 col). Evita
   que tarjetas nuevas sin regla propia (p.ej. bot de gemas, cartera DEX) salgan estrechas.
   Las tarjetas de ancho parcial (#detailPanel, #arbCard, #exCard) lo sobreescriben por id. */
.tab-panel > .card { grid-column: 1 / -1; }

.tok-controls { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
#tokScanWarn.warn, #dexScanWarn.warn { color: var(--amber); font-weight: 600; }

.tok-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tok-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.tok-toggle input { width: 15px; height: 15px; accent-color: var(--cyan); }

.tok-wrap { max-height: 56vh; }
#tokTable { min-width: 1080px; }
#tokTable th.sortable { cursor: pointer; user-select: none; }
#tokTable th.sortable:hover, #tokTable th.sortable.active { color: var(--text); }
#tokTable th .arrow { color: var(--cyan); font-size: 10px; }
#tokTable tbody tr { cursor: pointer; }
#tokTable tbody tr:hover { background: var(--surface-2); }
#tokTable tbody tr.tok-expanded { background: var(--surface-2); }

/* fila de detalle expandida (reasons + on-chain) */
.tok-detail-row td { white-space: normal; text-align: left; background: var(--bg); padding: 10px 14px; cursor: default; }
.tok-detail-row:hover td { background: var(--bg); }
.tok-reasons { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; }
.tok-reasons li { padding: 2px 0 2px 16px; position: relative; color: var(--text-dim); }
.tok-reasons li::before { content: '›'; position: absolute; left: 2px; color: var(--cyan); font-weight: 700; }
.tok-onchain { font-size: 12px; color: var(--text-mute); }
.tok-onchain .oc-item { margin-right: 14px; }
.tok-onchain .oc-item strong { color: var(--text-dim); font-weight: 600; }

/* score 0–100 con color por umbral (rojo alto para P&D/riesgo) */
.score-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-hi { color: var(--red); }
.sc-mid { color: var(--amber); }
.sc-lo { color: var(--text-dim); }
.sc-opp-hi { color: var(--green); font-weight: 700; }
.sc-opp-mid { color: var(--text); }

/* badges de etiqueta de token (colores semánticos) */
.lbl {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.lbl-pump_dump { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.lbl-volatile { background: #FBBF241A; color: var(--amber); border-color: var(--amber); }
.lbl-trending { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.lbl-stable { background: #22D3EE1A; color: var(--cyan); border-color: var(--cyan); }
.lbl-accumulation { background: #A78BFA26; color: var(--violet); border-color: var(--violet); }
.lbl-unknown { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }

/* badge "best-effort / n/d" del on-chain */
.oc-tag { font-size: 10px; font-weight: 600; color: var(--text-mute); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; margin-left: 4px; }

/* ============================ Bloque C — Descubrimiento on-chain (DexScreener) ============================ */

#dexCard { grid-column: 1 / -1; }

/* aviso ámbar destacado: riesgo muy alto, solo descubrimiento */
.dex-banner {
  margin: 8px 0 12px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--amber);
  background: #FBBF2412;
  border: 1px solid var(--amber);
  border-left-width: 3px;
  border-radius: 6px;
}
.dex-banner strong { color: var(--amber); }

.dex-wrap { max-height: 56vh; }
#dexTable { min-width: 1240px; }

/* sub-scores S/L/P/H: cuatro mini-celdas coloreadas por umbral (verde/ámbar/rojo) */
.subscores { display: inline-flex; gap: 3px; }
.ss-cell {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05;
  min-width: 22px; padding: 1px 3px; border-radius: 4px; cursor: default;
  border: 1px solid var(--border); background: var(--surface-2);
}
.ss-cell .ss-letter { font-size: 9px; font-weight: 700; color: var(--text-mute); letter-spacing: 0.3px; }
.ss-cell .ss-num { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-cell.pos { border-color: var(--green); background: var(--green-bg); }
.ss-cell.pos .ss-num { color: var(--green); }
.ss-cell.amber { border-color: var(--amber); background: #FBBF241A; }
.ss-cell.amber .ss-num { color: var(--amber); }
.ss-cell.neg { border-color: var(--red); background: var(--red-bg); }
.ss-cell.neg .ss-num { color: var(--red); }
.ss-cell.dim .ss-num { color: var(--text-mute); }

/* badge ⚠ WASH (posible wash trading / volumen inflado) */
.wash-badge {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
  text-transform: uppercase; border-radius: 4px; padding: 1px 5px; margin-left: 5px;
  color: var(--amber); border: 1px solid var(--amber); background: #FBBF241A; white-space: nowrap;
}

/* fila de posición con volumen cayendo (posible fin del pump) */
#gemBotOpenTable tbody tr.row-vol-fade,
#sniperBotOpenTable tbody tr.row-vol-fade { box-shadow: inset 3px 0 0 var(--red); }

/* tabla de estadísticas por rango de gemScore */
.gem-buckets { margin-top: 4px; }
.gem-buckets .mini-table { min-width: 360px; }
#dexTable th.sortable { cursor: pointer; user-select: none; }
#dexTable th.sortable:hover, #dexTable th.sortable.active { color: var(--text); }
#dexTable th .arrow { color: var(--cyan); font-size: 10px; }
#dexTable .ta-c { text-align: center; }
#dexTable tbody tr { cursor: pointer; }
#dexTable tbody tr:hover { background: var(--surface-2); }
#dexTable tbody tr.tok-expanded { background: var(--surface-2); }

/* token: símbolo + cadena como subtítulo/badge */
.dex-chain { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; margin-left: 4px; border: 1px solid var(--border); color: var(--text-dim); background: var(--surface-2); }
.dex-chain-solana { color: var(--violet); border-color: var(--violet); background: #A78BFA1A; }
.dex-chain-base { color: var(--cyan); border-color: var(--cyan); background: #22D3EE1A; }
.dex-chain-ethereum { color: var(--text-dim); border-color: var(--text-mute); }
.dex-chain-bsc { color: var(--amber); border-color: var(--amber); background: #FBBF241A; }

.dex-bs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dex-bs .sep { color: var(--text-mute); margin: 0 2px; }

/* enlace externo a dexscreener (no propaga el click de expandir) */
.dex-link { color: var(--cyan); font-weight: 700; text-decoration: none; padding: 0 4px; }
.dex-link:hover { color: var(--text); }

/* ====== Bot de gemas (cartera DEX en papel) ====== */
#gemBotCard .tok-kpis { margin: 12px 0; }
.gembot-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.gembot-controls label { font-size: 12px; color: var(--text-dim); }
.gembot-controls input[type="number"] { width: 120px; }
.gembot-warn { color: var(--amber); }
.gembot-warn strong { color: var(--amber); }
.gembot-sub { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.gembot-sub h3 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0; }

/* ===== PnL realizado acumulado (métrica honesta, distinta del equity volátil) ===== */
.realized-panel { border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 8px; padding: 12px 14px; margin: 4px 0 6px; background: var(--surface-2); }
.realized-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 12px; }
.realized-big { flex: 1 1 220px; min-width: 200px; }
.realized-value { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.realized-value.pos { color: var(--green); }
.realized-value.neg { color: var(--red); }
.realized-value.zero { color: var(--text-dim); }
.realized-kpis { display: flex; flex-wrap: wrap; gap: 16px; }
.realized-kpis .kpi { min-width: 96px; }
.realized-chart { margin: 8px 0 10px; }
.realized-chart canvas { width: 100%; display: block; }
.realized-empty { margin: 12px 0; color: var(--text-mute); }
.realized-note { margin: 8px 0 0; color: var(--text-mute); }
/* motivo de cierre: riesgo en ámbar */
.gb-reason-risk { background: #FBBF241A; color: var(--amber); border-color: var(--amber); }

/* dirección del token truncada + botón copiar en la fila de detalle */
.dex-addr { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-dim); }
.dex-copy { margin-left: 6px; font-size: 11px; padding: 1px 6px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); }
.dex-copy:hover { color: var(--text); border-color: var(--text-mute); }

/* ===== Seguridad on-chain (columna + badges + detalle) ===== */
.dex-safety { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; }
.sf-score { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.sf-hi { color: var(--green); }
.sf-mid { color: var(--amber); }
.sf-lo { color: var(--red); }
.sf-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; border: 1px solid var(--border); white-space: nowrap; }
.sf-ok { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.sf-risk { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.sf-none { color: var(--text-mute); border-color: var(--border); background: var(--surface-2); }

/* ===== Cazador de gemas (score + badge + perfil de riesgo) ===== */
.dex-gem { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; }
.gem-score { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.gem-hi { color: var(--green); }
.gem-mid { color: var(--amber); }
.gem-lo { color: var(--text-mute); }
.gem-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
  color: var(--green); border: 1px solid var(--green); background: var(--green-bg);
  box-shadow: 0 0 6px -2px var(--green);
}

/* iconos de presencia de redes/comunidad junto al símbolo */
.dex-socials { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.soc-icon { font-size: 11px; line-height: 1; cursor: default; opacity: 0.9; }

/* barra del perfil de riesgo (segmented) */
.dex-gem-bar { margin: 6px 0 2px; }
.gem-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gem-profile-label { font-size: 13px; font-weight: 600; color: var(--violet); }
.gem-profile-hint { margin-top: 4px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg-btn {
  font-size: 12px; padding: 4px 10px; cursor: pointer; border: none; border-right: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); white-space: nowrap;
}
.seg-btn:last-child { border-right: none; }
.seg-btn small { font-size: 10px; color: var(--text-mute); margin-left: 3px; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: #A78BFA1A; color: var(--violet); }
.seg-btn.on small { color: var(--violet); }

/* línea de Comunidad en el detalle */
.dex-comm-block, .dex-market-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.dex-link-btn { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--cyan); text-decoration: none; padding: 3px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); }
.dex-link-btn:hover { color: var(--text); border-color: var(--cyan); }
.dex-comm-head { font-size: 12px; margin-bottom: 4px; }
.dex-comm-head strong { color: var(--text-dim); }
.dex-comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 14px; font-size: 12px; color: var(--text-mute); }
.dex-comm-grid .oc-item strong { color: var(--text-dim); font-weight: 600; }

/* botón ★ para guardar en la cartera DEX */
.dex-star { font-size: 11px; padding: 2px 7px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); white-space: nowrap; }
.dex-star:hover { color: var(--text); border-color: var(--amber); }
.dex-star.on { color: var(--green); border-color: var(--green); background: var(--green-bg); cursor: default; }

/* bloque de seguridad dentro del detalle expandible */
.dex-sec-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.dex-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.dex-sec-head .sf-score { font-size: 13px; }
.dex-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; font-size: 12px; color: var(--text-mute); }
.dex-sec-grid .oc-item strong { color: var(--text-dim); font-weight: 600; }
.sec-good { color: var(--green); }
.sec-bad { color: var(--red); font-weight: 600; }
.sec-na { color: var(--text-mute); }
.dex-sec-flags { margin-top: 8px; font-size: 12px; }
.dex-sec-flags strong { color: var(--red); }
.sec-flag { display: inline-block; margin: 2px 4px 0 0; font-size: 11px; padding: 1px 6px; border-radius: 4px; color: var(--red); border: 1px solid var(--red); background: var(--red-bg); }

/* cartera DEX (watchlist) */
.dex-watch-wrap { max-height: 40vh; }
#dexWatchTable { min-width: 480px; }
.dex-remove { font-size: 11px; padding: 2px 8px; }

/* KPIs compactos del pool sandbox */
.tok-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0; }
.tok-kpi {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.tok-kpi-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.tok-kpi-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }

.tok-pool-actions { display: flex; gap: 8px; margin: 4px 0 12px; }
.tok-pool-wrap { max-height: 50vh; }
#tokPoolTable { min-width: 760px; }
#tokPoolTable tbody tr { cursor: pointer; }
#tokPoolTable tbody tr:hover { background: var(--surface-2); }
#tokPoolTable tbody tr.selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--cyan); }

#tokPoolRunning.running { color: var(--green); border-color: var(--green); background: var(--green-bg); }

/* ============================ Cartera (varios bots, capital común) ============================ */

#portfolioIntro { grid-column: 1 / -1; border-left: 3px solid var(--violet); }
#portfolioIntro .card-head { justify-content: space-between; }
#portfolioEmpty { grid-column: 1 / -1; }
#portfolioContent { grid-column: 1 / -1; display: contents; }

#portfolioKpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* KPI destacado: posiciones simultáneas (la clave de la cartera) */
.kpi-peak { border-color: var(--violet); background: #A78BFA12; }

#portfolioCurveCard { grid-column: 1 / -1; }
#portfolioMembersCard { grid-column: 1 / -1; }

#portfolioCanvas {
  width: 100%;
  height: 200px;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.portfolio-members-wrap { max-height: 360px; }
.portfolio-members-wrap .mini-table { min-width: 520px; }

#portfolioRebuildWarn.warn { color: var(--amber); font-weight: 600; }
#portfolioRebuildWarn { display: block; margin-top: 4px; }

/* botón "Preset conservador" (×2, stop −30%) */
.btn.preset-conservative { border-color: var(--amber); color: var(--amber); }
.btn.preset-conservative:hover:not(:disabled) { background: #FBBF241A; }

/* ---- Correlación entre bots suscritos (heatmap) ---- */
#correlationCard { grid-column: 1 / -1; }
#correlationCard .card-head { justify-content: space-between; }
#correlationCard .card-head #btnCorrelationRefresh { margin-left: auto; }
#correlationWarn.warn { color: var(--amber); font-weight: 600; }
#correlationNote.warn { color: var(--amber); font-weight: 600; }

.corr-matrix { overflow-x: auto; margin: 8px 0 6px; }
.corr-table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.corr-table th { color: var(--text-dim); font-weight: 600; padding: 4px 8px; white-space: nowrap; }
.corr-table th.corr-rowhead { text-align: left; color: var(--text); }
.corr-table th.corr-rowhead .corr-idx { color: var(--text-mute); font-weight: 700; }
.corr-table th.corr-head { text-align: center; }
.corr-table th.corr-corner { background: transparent; }
.corr-cell {
  text-align: center;
  padding: 6px 10px;
  min-width: 44px;
  border: 1px solid var(--bg);
  color: #0B0E14;
  font-weight: 700;
}
.corr-diag { background: var(--surface-2); color: var(--text-mute); }
/* escala verde (baja corr, diversifica) → rojo (alta, redundante) */
.corr-c0 { background: #34D399; }
.corr-c1 { background: #86E6C0; }
.corr-c2 { background: #FBBF24; }
.corr-c3 { background: #F9A06A; }
.corr-c4 { background: #F87171; }

.corr-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-dim); margin: 4px 0; }
.corr-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.corr-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.corr-swatch.corr-c0 { background: #34D399; }
.corr-swatch.corr-c2 { background: #FBBF24; }
.corr-swatch.corr-c4 { background: #F87171; }

/* ---- Etiquetas BACKTEST vs EN VIVO ---- */
.badge-backtest, .badge-live {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
}
.badge-backtest { background: #FBBF2418; color: var(--amber); border: 1px solid var(--amber); }
.badge-live { background: #22D3EE18; color: var(--cyan); border: 1px solid var(--cyan); }
.hint.backtest-warn { color: var(--amber); }
.hint.backtest-warn strong { color: var(--amber); }

/* ---- Simulación EN VIVO (papel) ---- */
#paperPortfolioCard { grid-column: 1 / -1; border-color: var(--cyan); border-left: 3px solid var(--cyan); }
#paperPortfolioCard .card-head { flex-wrap: wrap; gap: 8px; }
#paperResetWarn.warn { color: var(--amber); font-weight: 600; }

/* PnL prominente */
.paper-pnl {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.paper-pnl .kpi-value { font-size: 40px; }

/* KPIs secundarios */
#paperKpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.paper-curve { margin-top: 16px; }
.paper-curve .card-head h3 { margin: 0; font-size: 15px; }
#paperPortfolioCanvas {
  width: 100%;
  height: 200px;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ---- Mis bots (suscripciones de la cartera) ---- */
#myBotsCard { grid-column: 1 / -1; }
#myBotsCard .card-head { justify-content: space-between; }
.my-bots-wrap { max-height: 360px; margin-top: 8px; }
.my-bots-wrap .mini-table { min-width: 640px; }
.my-bots-wrap tbody tr { cursor: pointer; }
.my-bots-wrap tbody tr:hover { background: var(--surface-2); }
.my-bots-wrap td { white-space: nowrap; }
/* nombre largo (genomas con linaje extenso): truncar el texto, mantener el badge AUTO visible */
.my-bots-wrap td.my-bot-name { max-width: 260px; }
.my-bots-wrap td.my-bot-name { display: flex; align-items: center; gap: 6px; }
.my-bots-wrap td.my-bot-name .mb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.my-bots-wrap td.my-bot-name .b-auto { flex: none; margin-left: 0; }

#subsModeWarn { display: block; margin-top: 2px; }
#subsModeWarn.warn { color: var(--amber); font-weight: 600; }

/* botón pequeño «Quitar» dentro de la tabla */
.unsub-btn { padding: 3px 10px; font-size: 12px; }
.unsub-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }

/* badge AUTO (bot elegido por el sistema en modo automático) */
.b-auto { background: #A78BFA26; color: var(--violet); border-color: var(--violet); font-size: 11px; padding: 1px 6px; margin-left: 6px; }

/* ---- Botón Suscribir del panel de detalle ---- */
.btn.subscribe {
  margin-left: auto;
  border-color: var(--violet);
  color: var(--violet);
}
.btn.subscribe:hover:not(:disabled) { background: #A78BFA26; }
.btn.subscribe.on { border-color: var(--green); color: var(--green); }
.btn.subscribe.on:hover:not(:disabled) { background: var(--green-bg); }

/* ============================ Trading real (OKX) ============================ */

#liveTradingCard { grid-column: 1 / -1; border-left: 3px solid var(--cyan); }
#liveTradingCard .card-head { justify-content: space-between; }
#liveTradingCard .card-head #btnLiveRefresh { margin-left: auto; }
#liveRefreshWarn.warn { color: var(--amber); font-weight: 600; }

/* badge grande de modo */
.live-mode {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 8px;
  padding: 8px 16px;
  margin: 4px 0 12px;
  border: 1px solid transparent;
}
.live-mode.off { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }
.live-mode.demo { background: #22D3EE1A; color: var(--cyan); border-color: var(--cyan); }
.live-mode.live {
  background: var(--red);
  color: #0B0E14;
  border-color: var(--red);
  box-shadow: 0 0 0 2px #F8717155, 0 1px 8px #F8717166;
}
@media (prefers-reduced-motion: no-preference) {
  .live-mode.live { animation: liveBlink 1.4s ease-in-out infinite; }
}
@keyframes liveBlink { 50% { box-shadow: 0 0 0 4px #F8717133, 0 1px 12px #F8717188; } }

/* rejilla de indicadores de conexión */
.live-indicators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.live-ind {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.live-ind .li-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.live-ind .li-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.live-loop { font-size: 13px; color: var(--text-dim); margin: 2px 0 8px; }
.live-loop strong.pos { color: var(--green); }
.live-loop strong.dim { color: var(--text-dim); }

.live-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-dim);
  font-size: 12px;
}
.live-error {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  margin: 6px 0;
}

.live-actions { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 180px; overflow-y: auto; }
.live-actions li {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.live-actions li:last-child { border-bottom: none; }
.live-actions .t { color: var(--text-mute); flex: none; font-variant-numeric: tabular-nums; }
.live-actions .msg { color: var(--text-dim); word-break: break-word; }

.disclaimer.live-warn {
  margin-top: 12px;
  padding: 9px 12px;
  background: #FBBF2412;
  border: 1px solid var(--amber);
  border-left-width: 3px;
  border-radius: 6px;
  color: var(--amber);
  line-height: 1.5;
}
.disclaimer.live-warn code { color: var(--amber); background: #FBBF2418; border-color: var(--amber); }
.disclaimer.live-warn strong { color: var(--amber); }

/* ============================ Responsive <1100px ============================ */

@media (max-width: 1099px) {
  .container { grid-template-columns: 1fr; }
  #kpis { grid-template-columns: repeat(2, 1fr); grid-column: 1 / -1; }
  #portfolioKpis { grid-template-columns: repeat(2, 1fr); grid-column: 1 / -1; }
  #paperKpis { grid-template-columns: repeat(2, 1fr); }
  #portfolioContent { display: block; }
  #portfolioContent > * { margin-bottom: 16px; }
  #tableCard, #retiredCard, #arbCard, #exCard, #feedCard, #toolbar { grid-column: 1 / -1; }
  .tok-kpis { grid-template-columns: repeat(2, 1fr); }
  .brand-sub { display: none; }

  #detailPanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    max-height: 100vh;
    width: 92vw;
    z-index: 50;
    border-radius: 0;
    transform: translateX(102%);
    transition: transform 200ms ease-out;
  }
  #detailPanel.open { transform: translateX(0); box-shadow: -8px 0 24px #000A; }
  #detailClose { display: inline-block; margin-left: auto; }
}

@media (min-width: 1100px) {
  #detailPanel.open { transform: none; }
}

/* ============================ Accesibilidad: reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Calculadora de retiro (interés compuesto por estrategia) ---- */
.retire-calc {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, #1e2738);
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.05);
}
.retire-calc h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--cyan, #22D3EE);
  font-weight: 600;
}
.retire-row { flex-wrap: wrap; gap: 8px; align-items: center; }
.retire-row label { font-size: 12px; color: var(--muted, #8b97ad); }
.retire-row select,
.retire-row input[type="date"] {
  background: var(--panel, #0f1622);
  color: var(--text, #e6edf6);
  border: 1px solid var(--border, #1e2738);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
}
#retireCapital { width: 110px; }
.retire-result { margin-top: 10px; min-height: 24px; }
.retire-line { display: flex; flex-direction: column; gap: 2px; }
.retire-final { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.retire-sub { font-size: 13px; font-variant-numeric: tabular-nums; }
.retire-final.pos, .retire-sub.pos { color: var(--green, #34D399); }
.retire-final.neg, .retire-sub.neg { color: var(--red, #F87171); }
.retire-final.zero, .retire-sub.zero { color: var(--text, #e6edf6); }
.warn-amber.small { font-size: 11px; margin-top: 6px; }

/* ---- Login con wallet (Phantom / Metamask) ---- */
.wallet-login { margin-top: 16px; }
.wallet-sep { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; color: var(--muted, #8b97ad); font-size: 12px; }
.wallet-sep::before, .wallet-sep::after { content: ""; flex: 1; height: 1px; background: var(--border, #1e2738); }
.wallet-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.wallet {
  flex: 1; min-width: 150px;
  background: var(--panel, #0f1622);
  border: 1px solid var(--border, #1e2738);
  color: var(--text, #e6edf6);
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px;
}
.btn.wallet:hover { border-color: var(--cyan, #22D3EE); }
#walletMsg.err { color: var(--red, #F87171); }

/* ---- Panel Invertir (propuestas no-custodial) ---- */
.prop-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.prop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.prop-card { border: 1px solid var(--border, #1e2738); border-radius: 10px; padding: 12px 14px; background: var(--panel, #0f1622); display: flex; flex-direction: column; gap: 8px; }
.prop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop-kind { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.prop-kind.k-gem { background: rgba(167,139,250,0.15); color: var(--violet, #A78BFA); }
.prop-kind.k-sniper { background: rgba(34,211,238,0.15); color: var(--cyan, #22D3EE); }
.prop-sym { font-weight: 700; font-size: 16px; }
.prop-chain { font-size: 11px; color: var(--muted, #8b97ad); text-transform: uppercase; }
.prop-safe { margin-left: auto; font-size: 11px; font-weight: 600; }
.prop-safe.pos { color: var(--green, #34D399); } .prop-safe.amber { color: var(--amber, #FBBF24); } .prop-safe.neg { color: var(--red, #F87171); }
.prop-name { font-size: 13px; color: var(--muted, #8b97ad); }
.prop-meta, .prop-fees { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted, #8b97ad); font-variant-numeric: tabular-nums; }
.prop-fees { border-top: 1px solid var(--border, #1e2738); padding-top: 8px; }
.prop-warn { font-size: 11px; color: var(--amber, #FBBF24); }
.prop-actions { display: flex; gap: 8px; margin-top: 4px; }
.prop-actions .btn { flex: 1; text-align: center; text-decoration: none; }

/* ============ Wallet en el header + cartera de bot custodiada ============ */
.wallet-chip { display: flex; align-items: center; }
.btn.wallet-connect { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 7px 12px; }
.btn.wallet-connect:hover { border-color: var(--violet); }
.wallet-conn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; }
.wallet-dot { color: var(--green); font-size: 10px; }
.wallet-addr { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-dim); }
.btn-icon { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.btn-icon:hover { color: var(--red); }

.wallet-menu { position: fixed; top: 64px; right: 18px; z-index: 90; }
.wallet-menu-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; width: 320px; box-shadow: 0 12px 40px #0008; display: flex; flex-direction: column; gap: 10px; }
.wallet-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.btn.wallet { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; flex: 1; min-width: 150px; text-align: center; }
.btn.wallet:hover { border-color: var(--violet); }

.custody-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
@media (max-width: 720px) { .custody-grid { grid-template-columns: 1fr; } }
.custody-block h3, .custody-withdraw h3 { font-size: 14px; margin: 0 0 6px; color: var(--text); }
.deposit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.deposit-addr { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; flex: 1; min-width: 220px; color: var(--cyan); }
.deposit-qr { background: #fff; border-radius: 8px; padding: 6px; }
.bal-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 7px 0; font-variant-numeric: tabular-nums; }
.bal-label { color: var(--text-dim); }
.bal-val { font-family: ui-monospace, monospace; }
.custody-withdraw { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.custody-sniper { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.sniper-controls { display: flex; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.sniper-positions { font-size: 13px; color: var(--text-dim); }

/* ============ Cartera unificada: divisor + bots papel/real por bot ============ */
.section-divider:has(span) { display: flex; align-items: center; gap: 12px; margin: 26px 0 6px; border: none; }
.section-divider:has(span)::before, .section-divider:has(span)::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.section-divider span { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; }
.custody-bots { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.bot-real-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bot-real-row.inbot { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; background: var(--surface-2); }
.bot-real-name { min-width: 90px; font-weight: 600; }
.bot-real-state { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-dim); }
.bot-real-state.on { background: var(--red); color: #0B0E14; font-weight: 600; }
.bot-real-state.pending { background: #FBBF241A; color: var(--amber); }
.bot-real-row .btn { padding: 6px 10px; font-size: 13px; }

/* Cartera: el dinero real (wallet/saldo) va ARRIBA; el backtest debajo. */
#tab-cartera:not([hidden]) { display: flex; flex-direction: column; }
#tab-cartera > .cartera-real { order: -1; }

/* Modo REAL en una tarjeta de bot: oculta TODAS las cifras simuladas (capital, ROI, PnL realizado,
   gráficos, posiciones de papel) y muestra SOLO el panel real. El panel lo muestra el JS
   (panel.hidden=false), por eso es visible pese al ocultado de sus hermanos. */
.card.real-mode > *:not(.card-head):not(.bot-real-row):not(.bot-real-panel) { display: none !important; }
.bot-real-panel { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface-2); }
.bot-real-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; font-variant-numeric: tabular-nums; }
.bot-real-stats b { color: var(--text); }
.bot-real-poslist { font-size: 13px; color: var(--text-dim); }
.bot-real-substats { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.bot-real-substats .btn { padding: 5px 9px; font-size: 12px; }
.bot-real-trades-title { font-size: 13px; margin: 12px 0 6px; color: var(--text-dim); }
.real-trades-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.real-trades-table th, .real-trades-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.real-trades-table th { color: var(--text-mute); font-weight: 600; }

/* Colores por clase (la CSP default-src 'self' bloquea los style="" inline) */
.c-green { color: var(--green) !important; }
.c-red { color: var(--red) !important; }
.c-cyan { color: var(--cyan) !important; }
.c-amber { color: var(--amber) !important; }
.c-dim { color: var(--text-dim) !important; }
.score-hi { color: var(--green) !important; font-weight: 600; }
.score-mid { color: var(--cyan) !important; font-weight: 600; }
.score-lo { color: var(--amber) !important; font-weight: 600; }