/* Dark theme dashboard — POLY-BIAS-BOT */
:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-card: #1c2128;
    --border: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --accent: #58a6ff;
    --green: #3fb950;
    --red: #f85149;
    --yellow: #d29922;
    --orange: #db6d28;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ── Header ── */
header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.header-left h1 {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.strategy-label {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(88, 166, 255, 0.12);
    color: var(--accent);
    border: 1px solid rgba(88, 166, 255, 0.25);
    white-space: nowrap;
}

/* ── Branch badge ── */
.branch-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    background: rgba(110, 118, 129, 0.12);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.mode-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mode-badge.dry-run {
    background: rgba(210, 153, 34, 0.15);
    color: var(--yellow);
    border: 1px solid var(--yellow);
}

.mode-badge.live {
    background: rgba(63, 185, 80, 0.15);
    color: var(--green);
    border: 1px solid var(--green);
}

/* ── Pulsing dot ── */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.mode-badge.dry-run .pulse-dot {
    background: var(--yellow);
    box-shadow: 0 0 0 0 rgba(210, 153, 34, 0.5);
}

.mode-badge.live .pulse-dot {
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5);
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.header-label {
    color: var(--text-muted);
}

.header-value {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── Navigation ── */
.nav-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
}

.nav-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--text-primary);
}

.nav-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Cards ── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.card h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.card .value {
    font-size: 26px;
    font-weight: 600;
}

.card .value.positive { color: var(--green); }
.card .value.negative { color: var(--red); }
.card .value.neutral { color: var(--text-primary); }

.card .sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Two-column layout ── */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* ── Tables ── */
.table-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 24px;
}

.table-container h2 {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover {
    background: rgba(88, 166, 255, 0.04);
}

td.positive, span.positive { color: var(--green); }
td.negative, span.negative { color: var(--red); }
td.neutral { color: var(--text-primary); }

/* ── Status badges ── */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.good {
    background: rgba(63, 185, 80, 0.15);
    color: var(--green);
}

.status-badge.warning {
    background: rgba(210, 153, 34, 0.15);
    color: var(--yellow);
}

.status-badge.danger {
    background: rgba(248, 81, 73, 0.15);
    color: var(--red);
}

.status-badge.insufficient {
    background: rgba(110, 118, 129, 0.15);
    color: var(--text-muted);
}

/* ── Warning badge (cluster) ── */
.warn-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(248, 81, 73, 0.15);
    color: var(--red);
    margin-left: 4px;
}

/* ── Status dots ── */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-dot.green { background: var(--green); }
.status-dot.red { background: var(--red); }
.status-dot.yellow { background: var(--yellow); }
.status-dot.orange { background: #f0a050; }

/* ── Log viewer ── */
.log-viewer {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 12px;
    max-height: 600px;
    overflow-y: auto;
    margin-bottom: 24px;
}

.log-entry {
    padding: 2px 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.log-entry.INFO { color: var(--text-secondary); }
.log-entry.WARNING { color: var(--yellow); }
.log-entry.ERROR { color: var(--red); }
.log-entry.DEBUG { color: var(--text-muted); }

/* ── Settings form ──
   Las cards de grupo necesitan ancho real: cada row es label + chip + input.
   Con menos de ~430px los inputs se salen de la card. */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    align-items: start;
}

/* ── Buttons ── */
.btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg-card);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

/* ── Filter bar ── */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-input {
    padding: 5px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
}

.filter-input:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-sep {
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Filter chips ── */
.filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.chip-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.chip {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.chip.active {
    background: rgba(88, 166, 255, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Table subtitle ── */
.table-subtitle {
    padding: 4px 20px 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Resultados: tabla de estadísticas en dos columnas ── */
.stats-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    padding: 0 20px 4px;
}
.stats-two-col table { width: 100%; }
.stats-two-col td {
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.stats-two-col td:first-child { color: var(--text-secondary); }
.stats-two-col td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
}
@media (max-width: 720px) {
    .stats-two-col { grid-template-columns: 1fr; gap: 0; }
}

/* ── Log level tabs ── */
.level-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
}

.level-tab {
    padding: 4px 12px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.15s;
}

.level-tab:hover {
    color: var(--text-primary);
}

.level-tab.active {
    background: var(--bg-card);
    color: var(--accent);
}

/* ── Toggle label ── */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.toggle-label input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ── Section titles ── */
.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Section dividers (Trades tab) ── */
.section-divider {
    margin: 28px 0 16px;
    padding: 14px 20px;
    border-radius: 8px;
    border-left: 4px solid var(--border);
}

.section-divider.dry-run-section {
    background: rgba(210, 153, 34, 0.06);
    border-left-color: var(--yellow);
}

.section-divider.live-section {
    background: rgba(88, 166, 255, 0.06);
    border-left-color: var(--accent);
}

.section-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.section-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-badge.dry-run {
    background: rgba(210, 153, 34, 0.15);
    color: var(--yellow);
}

.section-badge.live {
    background: rgba(88, 166, 255, 0.15);
    color: var(--accent);
}

/* ── Auto-cycle toggle ── */
.auto-cycle-toggle {
    font-size: 13px;
    color: var(--text-secondary);
    gap: 6px;
}

.auto-cycle-toggle input[type="checkbox"] {
    accent-color: var(--green);
    width: 16px;
    height: 16px;
}

/* ── Tab panels ── */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ── Loading/empty states ── */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
    /* El banner forzaba ancho mínimo (180px × segmento) y desbordaba todo el dashboard */
    .sb-seg {
        min-width: 0;
        padding: 2px 10px;
    }
    .header-left {
        gap: 8px;
    }
    .header-left h1 {
        font-size: 16px;
    }
}

/* Settings field descriptions */
.setting-help {
    font-size: 12px;
    color: var(--text-muted, #888);
    margin-top: 4px;
    line-height: 1.4;
    max-width: 520px;
}

/* About tab */
.about-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 32px;
    line-height: 1.6;
}
.about-doc h2 {
    margin-top: 28px;
    margin-bottom: 8px;
}
.about-doc h2:first-child {
    margin-top: 0;
}
.about-doc p {
    margin: 8px 0;
}
.about-doc ul {
    margin: 8px 0;
    padding-left: 22px;
}
.about-doc li {
    margin: 4px 0;
}
.about-doc code {
    background: rgba(127, 127, 127, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

/* ─────────── Ported from V2 dashboard ─────────── */

/* Status banner (health-only, simplified for TWEET) */
.status-banner {
    display: flex; align-items: stretch; gap: 0;
    max-width: 1200px; margin: 0 auto; padding: 12px 20px;
    border-bottom: 1px solid var(--border, #30363d); flex-wrap: wrap;
}
.sb-seg { display: flex; flex-direction: column; justify-content: center; padding: 2px 22px; min-width: 180px; flex: 1; }
.sb-seg:first-child { padding-left: 0; }
.sb-divider { width: 1px; background: var(--border, #30363d); align-self: stretch; }
.sb-head { display: flex; align-items: center; gap: 8px; }
.sb-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.sb-dot.green { background: #3fb950; }
.sb-dot.amber { background: #d29922; }
.sb-dot.red { background: #f85149; }
.sb-dot.blue { background: #58a6ff; }
.sb-dot.pulsing { animation: pulse 2s ease-in-out infinite; }
.sb-state { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; }
.sb-state.green { color: #3fb950; }
.sb-state.amber { color: #d29922; }
.sb-state.red { color: #f85149; }
.sb-state.blue { color: #58a6ff; }
.sb-sub { font-size: 12px; color: var(--text-muted, #8b949e); margin-top: 2px; }

/* Error banner */
.error-banner {
    background: rgba(248, 81, 73, 0.15); color: #f85149;
    border-bottom: 1px solid #f85149; text-align: center;
    padding: 8px 20px; font-size: 13px; font-weight: 600;
}

/* Header clock + countdown */
.header-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.server-clock { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; color: var(--text-secondary, #c9d1d9); white-space: nowrap; }
.next-cycle-hdr { font-size: 11px; color: var(--text-muted, #8b949e); white-space: nowrap; }

/* Floating tooltip + tip badge */
.tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(110, 118, 129, 0.18);
    color: var(--text-muted, #8b949e);
    font-size: 11px; font-weight: 700;
    border: 1px solid var(--border, #30363d);
    margin-left: 4px; cursor: help; user-select: none;
}
.tip:hover { color: #58a6ff; border-color: #58a6ff; }
.floating-tip {
    display: none; position: fixed; z-index: 9999;
    max-width: 320px; padding: 8px 12px;
    background: #161b22; border: 1px solid #30363d; border-radius: 6px;
    font-size: 12px; color: var(--text-primary, #c9d1d9);
    line-height: 1.4; pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Muted "sin datos" hint */
.muted-nodata { color: var(--text-muted, #8b949e); font-style: italic; }

/* Level tabs (used by Notas filter) */
.level-tabs { display: flex; gap: 2px; background: var(--bg-primary, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 2px; }
.level-tab { padding: 4px 12px; border: none; background: none; color: var(--text-muted, #8b949e); cursor: pointer; font-size: 12px; font-weight: 500; border-radius: 4px; transition: all 0.15s; }
.level-tab:hover { color: var(--text-primary, #c9d1d9); }
.level-tab.active { background: var(--bg-card, #161b22); color: #58a6ff; }

/* Panel note (small grey explanation text) */
.panel-note { font-size: 12px; color: var(--text-muted, #8b949e); }

/* Notas tab */
.note-compose-box { background: var(--bg-card, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 16px 20px; margin-bottom: 18px; }
.note-compose-box .section-title { margin-bottom: 6px; }
.note-textarea {
    width: 100%; background: var(--bg-primary, #0d1117); color: var(--text-primary, #c9d1d9);
    border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 10px 12px;
    font-family: inherit; font-size: 13px; resize: vertical;
}
.note-textarea:focus { outline: none; border-color: #58a6ff; }
.note-card { background: var(--bg-card, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.note-kind { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.note-kind.manual { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.note-kind.settings { background: rgba(210, 153, 34, 0.15); color: #d29922; }
.note-time { font-size: 12px; color: var(--text-muted, #8b949e); }
.note-actions { margin-left: auto; display: flex; gap: 6px; }
.note-body { font-size: 13px; color: var(--text-primary, #c9d1d9); white-space: pre-wrap; word-break: break-word; }

/* Sparkline */
.spark { display: inline-block; vertical-align: middle; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ── Allow-list cards (Rango de precio, etc.) ── */
.band-card {
    background: var(--bg-card, #1c2128);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    padding: 8px 0;
    margin-bottom: 16px;
    overflow: hidden;
}
.band-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border, #30363d);
    font-size: 13px;
    cursor: pointer;
    flex-wrap: wrap;
}
.band-row:last-child { border-bottom: none; }
.band-row:hover { background: rgba(88, 166, 255, 0.05); }
.band-row input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }
.band-row.band-outside { opacity: 0.55; cursor: not-allowed; }
.band-row.band-outside:hover { background: transparent; }
.band-row.band-outside input[type="checkbox"] { cursor: not-allowed; }
.band-label {
    font-weight: 600; min-width: 70px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    color: var(--text-primary, #e6edf3);
}
.band-stats {
    font-size: 12px; color: var(--text-secondary, #8b949e);
    flex: 1;
}
.band-note {
    font-size: 11px; color: var(--text-muted, #6e7681);
    font-style: italic;
    margin-left: auto;
}

.section-title {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary, #e6edf3);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.table-subtitle {
    font-size: 12px;
    color: var(--text-muted, #6e7681);
    margin-bottom: 12px;
}

/* ── Settings groups (5 paneles agrupados) ── */
.settings-group {
    background: var(--bg-card, #1c2128);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.settings-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, #30363d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.settings-group-note {
    font-size: 11px;
    color: var(--text-muted, #6e7681);
    margin-bottom: 8px;
    font-style: italic;
}
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 5px 0;
    border-bottom: 1px dashed transparent;
}
.setting-row + .setting-row { border-top: 1px dashed rgba(255,255,255,0.04); }
.setting-row-label {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-primary, #e6edf3);
    flex: 1 1 180px;
    min-width: 0;
}
/* Campos de texto libre largos (tags, keywords): input a lo ancho, debajo del label. */
.setting-row-wide { display: block; }
.setting-row-wide .setting-row-widget {
    margin-top: 6px;
    text-align: left;
    min-width: 0;
}
.setting-row-wide .setting-row-widget input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.setting-raw {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 10px;
    color: var(--text-muted, #6e7681);
    background: rgba(110, 118, 129, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
}
.setting-row-widget {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}
.setting-row-widget input[type="text"] {
    width: 120px;
    max-width: 100%;
    padding: 5px 9px;
    background: var(--bg-primary, #0d1117);
    color: var(--text-primary, #e6edf3);
    border: 1px solid var(--border, #30363d);
    border-radius: 5px;
    font-size: 12px;
    text-align: right;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}
.setting-row-widget input[type="text"]:focus {
    outline: none;
    border-color: var(--accent, #58a6ff);
}

/* Toggle switch (replaces raw checkbox for boolean settings) */
.switch {
    position: relative; display: inline-block;
    width: 44px; height: 24px; cursor: pointer; vertical-align: middle;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; inset: 0;
    background: var(--bg-primary, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 24px;
    transition: 0.18s;
}
.switch .slider::before {
    content: ''; position: absolute;
    height: 18px; width: 18px; left: 2px; top: 50%;
    transform: translateY(-50%);
    background: var(--text-secondary, #8b949e);
    border-radius: 50%; transition: 0.18s;
}
.switch input:checked + .slider {
    background: rgba(63, 185, 80, 0.18);
    border-color: var(--green, #3fb950);
}
.switch input:checked + .slider::before {
    transform: translate(20px, -50%);
    background: var(--green, #3fb950);
}

/* Pills: presets clickeables para settings con pocas opciones válidas */
.pill-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}
.pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-family: inherit;
    background: var(--bg-primary, #0d1117);
    border: 1px solid var(--border, #30363d);
    color: var(--text-secondary, #8b949e);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.pill:hover { border-color: var(--accent, #58a6ff); color: var(--text-primary, #e6edf3); }
.pill.pill-on {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent, #58a6ff);
    color: var(--accent, #58a6ff);
    font-weight: 600;
}

.override-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    border: none;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    text-transform: uppercase;
    background: rgba(210, 153, 34, 0.15);
    color: var(--yellow, #d29922);
    margin-left: 4px;
    cursor: pointer;
}
.override-badge:hover { background: rgba(210, 153, 34, 0.3); }

/* ── Cross-filter de calibración (fade simulado sobre snapshots) ── */
.lab-section { margin-bottom: 24px; }
.lab-banner {
    background: rgba(210, 153, 34, 0.08);
    border: 1px solid var(--yellow);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.lab-banner strong { color: var(--text-primary); }
.lab-axes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.lab-axis-col { min-width: 0; }
.lab-axis-col .band-card { margin-bottom: 0; }
.lab-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0 16px;
}
.lab-grid-scroll { overflow-x: auto; }
table.lab-pivot { width: 100%; border-collapse: collapse; }
table.lab-pivot th,
table.lab-pivot td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
}
table.lab-pivot thead th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.lab-cell-money { display: block; font-weight: 600; font-size: 13px; }
.lab-cell-sub { display: block; font-size: 11px; }
.lab-cell-n { display: block; font-size: 10px; color: var(--text-muted); }
td.lab-cell-empty { color: var(--text-muted); }

/* Banda recomendada (50-70c): negrita en el card de bandas de Ajustes */
.band-row.band-recommended .band-label { font-weight: 700; }

/* ── Modo LIVE y preflight de conexión ── */

/* El chip de modo estaba en VERDE para live, que es el color de "todo bien".
   El modo en el que el bot gasta dinero real no puede leerse como el estado
   tranquilo: va en rojo, y con la barra de abajo. */
.mode-badge.live {
    background: rgba(248, 81, 73, 0.15);
    color: var(--red, #f85149);
    border: 1px solid var(--red, #f85149);
}

.mode-badge.live .pulse-dot {
    background: var(--red, #f85149);
    box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.5);
}

.live-bar {
    display: flex; align-items: center; gap: 10px;
    background: rgba(248, 81, 73, 0.12);
    border-bottom: 1px solid var(--red, #f85149);
    color: var(--red, #f85149);
    padding: 8px 20px; font-size: 13px;
}

.live-bar-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--red, #f85149); flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

.sb-dot.grey { background: var(--text-muted, #8b949e); }
.sb-state.grey { color: var(--text-muted, #8b949e); }

/* Botón "verificar" del preflight: un enlace, no un botón grande. Se aprieta
   pocas veces y no compite con "Ejecutar ciclo". */
.btn-inline-link {
    background: none; border: none; padding: 0 0 0 4px;
    color: var(--accent, #58a6ff); font-size: 11px; cursor: pointer;
    text-decoration: underline; font-family: inherit;
}
.btn-inline-link:hover { color: var(--text-primary, #c9d1d9); }
.btn-inline-link:disabled { color: var(--text-muted, #8b949e); cursor: default; }

.preflight-details {
    max-width: 1200px; margin: 0 auto; padding: 12px 20px;
    border-bottom: 1px solid var(--border, #30363d);
}
.preflight-details.has-fail { background: rgba(248, 81, 73, 0.08); }
.preflight-details.has-warn { background: rgba(210, 153, 34, 0.08); }
.preflight-details .pf-title {
    font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.preflight-details.has-fail .pf-title { color: var(--red, #f85149); }
.preflight-details.has-warn .pf-title { color: var(--yellow, #d29922); }
.pf-row {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 12px; line-height: 1.5; margin-bottom: 6px;
}
.pf-tag {
    flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    padding: 1px 6px; border-radius: 4px; margin-top: 2px;
}
.pf-fail .pf-tag { background: rgba(248, 81, 73, 0.2); color: var(--red, #f85149); }
.pf-warn .pf-tag { background: rgba(210, 153, 34, 0.2); color: var(--yellow, #d29922); }
.pf-body { color: var(--text-secondary, #8b949e); }

/* Respuesta cruda del exchange en la tabla de órdenes reales */
.pf-raw-toggle {
    cursor: pointer; font-size: 11px; color: var(--accent, #58a6ff);
    margin-top: 4px;
}
.pf-raw {
    background: var(--bg-secondary, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 4px; padding: 8px; margin-top: 4px;
    font-size: 11px; max-width: 480px; max-height: 260px;
    overflow: auto; white-space: pre-wrap; word-break: break-all;
}

/* ── Patas del motor (Ajustes) ── */
.leg-row {
    border: 1px solid var(--border, #30363d); border-radius: 6px;
    padding: 12px 14px; margin-bottom: 10px;
}
.leg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.leg-id { font-weight: 700; font-size: 13px; }
.leg-meta { font-size: 12px; color: var(--text-muted, #8b949e); }
.leg-gate {
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    padding: 1px 7px; border-radius: 4px;
    background: rgba(139, 148, 158, 0.2); color: var(--text-secondary, #8b949e);
}
.leg-gate-ready { background: rgba(63, 185, 80, 0.2); color: #3fb950; }
.leg-gate-on_track { background: rgba(88, 166, 255, 0.2); color: #58a6ff; }
.leg-gate-insufficient { background: rgba(210, 153, 34, 0.2); color: #d29922; }
.leg-gate-n { font-size: 11px; color: var(--text-muted, #8b949e); }
.leg-actions { display: flex; gap: 8px; margin-top: 10px; }
.leg-btn {
    flex: 0 0 auto; padding: 5px 14px; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-family: inherit;
    background: var(--bg-secondary, #161b22);
    border: 1px solid var(--border, #30363d);
    color: var(--text-secondary, #8b949e);
}
.leg-btn:hover:not(:disabled) { color: var(--text-primary, #c9d1d9); }
.leg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.leg-btn.active {
    opacity: 1; font-weight: 700;
    border-color: var(--accent, #58a6ff); color: var(--accent, #58a6ff);
}
/* En vivo va en rojo SIEMPRE, activo o no: es el unico que gasta dinero. */
.leg-btn.leg-live { border-color: rgba(248, 81, 73, 0.5); color: var(--red, #f85149); }
.leg-btn.leg-live.active {
    background: rgba(248, 81, 73, 0.15);
    border-color: var(--red, #f85149); font-weight: 700;
}
.leg-reason { font-size: 11px; color: var(--text-muted, #8b949e); margin-top: 8px; }
.leg-warn {
    font-size: 11px; color: var(--red, #f85149); margin-top: 8px;
    background: rgba(248, 81, 73, 0.08); padding: 6px 8px; border-radius: 4px;
}

/* Wallet compartido: filas de posiciones/liquidaciones de OTRO bot. Se ven,
   no cuentan, y se atenuan para que no se lean como propias. */
tr.foreign-row td { opacity: 0.55; font-style: italic; }