/* Dark theme dashboard - POLY-BIAS-BOT v2 */
:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-card: #1c2128;
    --bg-elevated: #232a33;
    --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); }
.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 {
    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); }

.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); }
.mode-badge.live .pulse-dot { background: var(--green); }
@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; }

/* ── Banner de estado ── */
.status-banner {
    display: flex; align-items: stretch; gap: 0;
    max-width: 1200px; margin: 0 auto; padding: 12px 20px;
    border-bottom: 1px solid var(--border); 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); 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: var(--green); } .sb-dot.amber { background: var(--yellow); }
.sb-dot.red { background: var(--red); } .sb-dot.blue { background: var(--accent); }
.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: var(--green); } .sb-state.amber { color: var(--yellow); }
.sb-state.red { color: var(--red); } .sb-state.blue { color: var(--accent); }
.sb-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.sb-value { font-size: 19px; font-weight: 700; margin-top: 1px; }
.sb-value.positive, .sb-value.good { color: var(--green); }
.sb-value.negative, .sb-value.danger { color: var(--red); }
.sb-value.warning { color: var(--yellow); }
.sb-sub .warning, .hero-context.warning { color: var(--yellow); }
.sb-value.neutral { color: var(--text-primary); }
.sb-value.muted { color: var(--text-muted); }
.sb-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sb-sub .positive { color: var(--green); } .sb-sub .negative { color: var(--red); }
.sb-seg.clickable { cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.sb-seg.clickable:hover { background: rgba(88, 166, 255, 0.06); }

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

/* ── Navegación ── */
.nav-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    border-bottom: 1px solid var(--border); 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); }

/* ── Explainer (¿qué hace?) ── */
.explainer {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 20px; overflow: hidden;
}
.explainer > summary {
    padding: 14px 20px; cursor: pointer; font-weight: 600; font-size: 14px;
    list-style: none; display: flex; align-items: center;
}
.explainer > summary::-webkit-details-marker { display: none; }
.explainer > summary::before { content: '▸'; margin-right: 10px; color: var(--accent); transition: transform 0.15s; }
.explainer[open] > summary::before { transform: rotate(90deg); }
.explainer-hint { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.explainer-body { padding: 0 20px 18px 20px; color: var(--text-secondary); font-size: 13px; }
.explainer-body p { margin-bottom: 8px; }
.explainer-body ul { margin: 6px 0 0 18px; }
.explainer-body li { margin-bottom: 5px; }
.explainer-body strong { color: var(--text-primary); }

/* ── Card héroe (P&L) ── */
.hero-card {
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
    border: 1px solid var(--border); border-radius: 10px;
    padding: 22px 24px; margin-bottom: 20px;
    display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
}
.hero-main { flex: 1; min-width: 260px; }
.hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.hero-value { font-size: 44px; font-weight: 700; line-height: 1.1; margin: 4px 0; }
.hero-value.positive { color: var(--green); } .hero-value.negative { color: var(--red); } .hero-value.neutral { color: var(--text-primary); }
.hero-context { font-size: 13px; color: var(--text-muted); }
.hero-side { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.hero-stat { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; }
.hs-label { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.hs-val { font-size: 16px; font-weight: 600; white-space: nowrap; }
.hs-val.positive { color: var(--green); } .hs-val.negative { color: var(--red); } .hs-val.neutral { color: var(--text-primary); }

/* ── Cards ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; position: relative; }
.card h3 { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.card .value { font-size: 26px; font-weight: 600; }
.card .value.positive, .card .value.good { color: var(--green); }
.card .value.negative, .card .value.danger { color: var(--red); }
.card .value.warning { color: var(--yellow); }
.card .value.neutral { color: var(--text-primary); }
.card .value.muted { color: var(--text-muted); }
.card .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.card-clickable { cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.card-clickable:hover { transform: translateY(-2px); border-color: var(--accent); }
.card-link { font-size: 12px; color: var(--accent); margin-top: 10px; font-weight: 500; }
.good-border { border-left: 3px solid var(--green); }
.warning-border { border-left: 3px solid var(--yellow); }
.danger-border { border-left: 3px solid var(--red); }
.muted-border { border-left: 3px solid var(--text-muted); }
.positive-border { border-left: 3px solid var(--green); }
.neutral-border { border-left: 3px solid var(--text-muted); }

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

/* ── Tablas ── */
.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); display: flex; align-items: center; gap: 8px; }
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); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
td { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
tr:last-child td { border-bottom: none; }
tr:hover { background: rgba(88, 166, 255, 0.05); }
td.positive, span.positive { color: var(--green); }
td.negative, span.negative { color: var(--red); }
td.neutral { color: var(--text-primary); }
.skip-reason { color: var(--orange); }

/* ── Badges de estado ── */
.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); }
.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; cursor: help; }

/* ── Puntos de estado ── */
.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; }

/* ── Embudo del ciclo ── */
.funnel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px; }
.funnel-step { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 10px 18px; text-align: center; min-width: 92px; }
.funnel-step.accent { border-color: var(--accent); background: rgba(88, 166, 255, 0.08); }
.fs-num { font-size: 22px; font-weight: 700; }
.fs-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.funnel-arrow { color: var(--text-muted); font-size: 18px; }
.funnel-meta { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.reject-reasons { padding: 0 20px 18px 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rr-title { font-size: 12px; color: var(--text-secondary); margin-right: 4px; }
.rr-pill { font-size: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 3px 10px; color: var(--text-secondary); }
.rr-pill strong { color: var(--text-primary); }

/* ── Sparklines ── */
.spark { display: inline-block; vertical-align: middle; }
.h2-spark { margin-left: auto; opacity: 0.85; }
.summary-spark { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.ss-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Sin datos ── */
.muted-nodata { color: var(--text-muted); font-style: italic; }

/* ── Tooltip ── */
.tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%; font-size: 10px; font-weight: 700;
    background: var(--bg-elevated); color: var(--text-secondary);
    border: 1px solid var(--border); cursor: help; flex-shrink: 0;
}
.tip:hover { color: var(--accent); border-color: var(--accent); }
.floating-tip {
    display: none; position: fixed; z-index: 1000; max-width: 320px;
    background: #0a0d12; color: var(--text-primary); border: 1px solid var(--accent);
    border-radius: 6px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); pointer-events: none;
}

/* ── 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); }

/* ── Ajustes (paneles agrupados) ── */
.settings-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; margin-bottom: 24px; }
.settings-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; }
.settings-panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.setting-row:last-child { border-bottom: none; }
.setting-row-label { font-size: 13px; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.setting-raw { font-family: 'SF Mono', Monaco, monospace; font-size: 10px; color: var(--text-muted); }
.setting-row-widget { flex-shrink: 0; }
.setting-row-widget input[type="number"], .setting-row-widget input[type="text"] {
    width: 160px; padding: 6px 10px; background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text-primary); font-size: 13px; text-align: right;
}
.setting-row-widget input[type="text"] { text-align: left; }
.setting-row-widget input:focus { outline: none; border-color: var(--accent); }
.setting-row-widget input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.seg-control { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: inline-block; padding: 5px 14px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.seg-opt input:checked + span { background: var(--accent); color: #fff; }
.override-badge { font-size: 10px; font-weight: 600; background: rgba(88, 166, 255, 0.15); color: var(--accent); padding: 1px 7px; border-radius: 8px; text-transform: uppercase; cursor: help; }
.settings-warning { margin-bottom: 16px; }
.bin-dead { color: var(--text-muted); font-style: italic; font-size: 0.82em; margin-left: 4px; }
.checkbox-row.is-dead .bin-label { color: var(--text-muted); }

/* ── Botones ── */
.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.6; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { opacity: 0.9; background: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ── Barra de filtros ── */
.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; }
.panel-note { font-size: 12px; color: var(--text-muted); }

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

/* ── Tabs de nivel (logs) ── */
.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 ── */
.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); }
.auto-cycle-toggle { font-size: 13px; gap: 6px; }
.auto-cycle-toggle input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; }

/* ── Secciones (Operaciones) ── */
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.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-subtitle-inline { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.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(248, 81, 73, 0.15); color: var(--red); }

/* Posiciones reales: colapsable y claramente separado del papel */
.section-collapsible { margin: 28px 0 16px; border: 1px dashed var(--border); border-radius: 8px; background: rgba(248, 81, 73, 0.04); }
.section-collapsible > summary { padding: 14px 20px; cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-collapsible > summary::-webkit-details-marker { display: none; }
.section-collapsible > summary::before { content: '▸'; color: var(--text-muted); transition: transform 0.15s; }
.section-collapsible[open] > summary::before { transform: rotate(90deg); }
.section-collapsible .table-container { margin: 0 16px 16px 16px; }

/* ── Paneles de pestaña ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Estados de carga/vacío ── */
.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; }
    .sb-divider { display: none; }
    .sb-seg { min-width: 45%; padding: 6px 0; }
    .hero-card { gap: 18px; }
}
@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-stack { grid-template-columns: 1fr; }
    .funnel-meta { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
    .header-left { gap: 8px; }
    .header-left h1 { font-size: 16px; }
    .hero-value { font-size: 34px; }
    .sb-seg { min-width: 100%; }
}

/* ── Calibración: tablas de filtro cruzado ── */
.cal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .cal-cards { grid-template-columns: 1fr; } }
.cal-card { margin-bottom: 0; }
.cal-table { width: 100%; border-collapse: collapse; }
.cal-table th, .cal-table td { padding: 7px 10px; font-size: 12.5px; }
.cal-table th { position: sticky; top: 0; background: var(--bg-card); }
.cal-table .cb-col { width: 30px; text-align: center; }
.cal-table .cb-col input { cursor: pointer; accent-color: var(--accent); margin: 0; }
.cal-good { color: var(--green); }
.cal-bad { color: var(--red); }
.cal-warn { color: var(--yellow); }
.cal-totals-row { border-top: 2px solid var(--border); background: var(--bg-secondary); }
.cal-totals-row td { font-weight: 600; }

/* ── Ajustes: grupos de checkboxes de allow-list ── */
.settings-group-title { margin: 18px 0 6px; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.checkbox-group { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); margin-bottom: 14px; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; }
.checkbox-row input { accent-color: var(--accent); cursor: pointer; }
.checkbox-row .bin-label { min-width: 12em; color: var(--text-primary); font-size: 13px; }
.bin-stats { font-size: 0.82em; color: var(--text-secondary); }
.bin-stats-empty { font-style: italic; color: var(--text-muted); }
.bin-pnl-pos { color: var(--green); }
.bin-pnl-neg { color: var(--red); }
.settings-group-note { font-size: 11px; color: var(--text-muted); margin: -2px 0 6px; font-style: italic; }

/* ── Reloj de servidor (header) ── */
.header-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.3; }
.server-clock { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.next-cycle-hdr { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Notas ── */
.note-compose-box { background: var(--bg-card); border: 1px solid var(--border); 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); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-primary); font-size: 13px; padding: 9px 12px; resize: vertical;
    font-family: inherit; line-height: 1.5;
}
.note-textarea:focus { outline: none; border-color: var(--accent); }
.note-card { background: var(--bg-card); border: 1px solid var(--border); 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: var(--accent); }
.note-kind.settings { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
.note-time { font-size: 12px; color: var(--text-muted); }
.note-actions { margin-left: auto; display: flex; gap: 6px; }
.note-body { font-size: 13px; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }

/* ── Acerca de ── */
.about-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 24px 28px; max-width: 820px; }
.about-panel h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.about-panel h3 { font-size: 15px; font-weight: 600; color: var(--accent); margin: 20px 0 8px; }
.about-panel p { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.about-panel ul, .about-panel ol { margin: 4px 0 8px 20px; }
.about-panel li { font-size: 14px; color: var(--text-secondary); margin-bottom: 5px; }
.about-panel strong { color: var(--text-primary); }
.about-panel .ok { color: var(--green); font-weight: 600; }
.about-panel .bad { color: var(--red); font-weight: 600; }
.about-table { width: 100%; max-width: 480px; border-collapse: collapse; margin: 6px 0 4px; }
.about-table th, .about-table td { text-align: left; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.about-table th { color: var(--text-secondary); font-weight: 500; text-transform: none; letter-spacing: 0; position: static; background: none; }

/* Key form (shown until the browser holds a key the bot accepts) */
.key-dialog {
    position: fixed; inset: 0; z-index: 1000; background: rgba(13, 17, 23, 0.85);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.key-dialog-box {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    padding: 24px 28px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px;
}
.key-dialog-box h2 { font-size: 18px; font-weight: 600; }
.key-dialog-box p { font-size: 13px; color: var(--text-secondary); }
.key-dialog-box input {
    padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg-primary); color: var(--text-primary); font-size: 14px;
}