/* ─── Binance-inspired Trading UI ───
   Colores: heredan de var(--color-exito), var(--color-peligro), etc.
   del módulo Apariencia. Sin colores hardcodeados.
   Layout compacto, dense, exchange-style. */

/* ── Tabs (Binance: underline, compact, uppercase) ── */
.trading-barra-superior {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: calc(var(--espacio-normal) * 0.75);
}
.trading-selector-simbolo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.trading-selector-simbolo label {
    font-size: 0.72rem;
    font-weight: var(--grosor-titulos);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-suave);
}
.trading-selector-simbolo input {
    width: 140px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    font-weight: var(--grosor-negrita);
    text-transform: uppercase;
}
/* ── Vista unica: titulos de seccion ── */
.trading-titulo-seccion {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--texto-suave);
    margin: 16px 0 8px 0;
}
.trading-titulo-seccion-grande {
    font-size: 1rem;
    margin: 24px 0 12px 0;
    padding-top: 16px;
    border-top: var(--grosor-trazo) solid var(--trazo-suave);
}
.trading-titulo-seccion-grande:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* ── Dashboard cards (Binance: dense, one-line metrics) ── */
.trading-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--espacio-normal) * 0.5);
}
@media (max-width: 768px) {
    .trading-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trading-grid-4 { grid-template-columns: 1fr; }
}
.trading-stat {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 12px 16px;
    text-align: right;
}
.trading-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--texto-suave);
    margin: 0 0 2px 0;
    text-align: left;
}
.trading-stat-value {
    font-size: 1.3rem;
    font-weight: var(--grosor-negrita);
    margin: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.trading-stat-sub {
    font-size: 0.72rem;
    color: var(--texto-suave);
    margin: 0;
}

/* ── Actions bar ── */
.trading-actions {
    display: flex;
    gap: calc(var(--espacio-normal) * 0.5);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Tables (Binance: compact, no stripes, hover only) ── */
.trading-table-wrap {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    overflow-x: auto;
}
.trading-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 600px;
}
.trading-table thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--texto-suave);
    padding: 8px 12px;
    white-space: nowrap;
    font-weight: var(--grosor-titulos);
    border-bottom: var(--grosor-trazo) solid var(--trazo-suave);
    text-align: right;
}
.trading-table thead th:first-child { text-align: left; }
.trading-table tbody td {
    padding: 8px 12px;
    border-bottom: var(--grosor-trazo) solid var(--trazo-suave);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.trading-table tbody td:first-child { text-align: left; font-weight: var(--grosor-titulos); }
.trading-table tbody tr:last-child td { border-bottom: none; }
.trading-table tbody tr:hover { background: rgb(from var(--texto-fuerte) r g b / 0.03); }

/* ── Price change colors ── */
.trading-up { color: var(--color-exito); }
.trading-down { color: var(--color-peligro); }
.trading-up-bg { background: rgb(from var(--color-exito) r g b / 0.08); }
.trading-down-bg { background: rgb(from var(--color-peligro) r g b / 0.08); }

/* ── Badges (Binance: compact, uppercase, no border-radius) ── */
.trading-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: var(--grosor-negrita);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radio-redondeado);
}
.trading-badge-buy { background: rgb(from var(--color-exito) r g b / 0.12); color: var(--color-exito); }
.trading-badge-sell { background: rgb(from var(--color-peligro) r g b / 0.12); color: var(--color-peligro); }
.trading-badge-neutral { background: rgb(from var(--texto-suave) r g b / 0.12); color: var(--texto-suave); }

/* ── Signal card ── */
.trading-signal {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 16px;
}

/* ── Feedback de botones: spinner + resultado persistente ── */
.trading-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: calc(var(--grosor-trazo) * 2) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radio-lleno);
    vertical-align: -1px;
    margin-right: 6px;
    animation: trading-spin 0.7s linear infinite;
}
@keyframes trading-spin {
    to { transform: rotate(360deg); }
}
.trading-resultado {
    margin-top: calc(var(--espacio-normal) * 0.75);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 12px 14px;
    font-size: 0.8rem;
    line-height: 1.6;
}
.trading-resultado.exito {
    background: rgb(from var(--color-exito) r g b / 0.08);
    border: var(--grosor-trazo) solid rgb(from var(--color-exito) r g b / 0.35);
}
.trading-resultado.error {
    background: rgb(from var(--color-peligro) r g b / 0.08);
    border: var(--grosor-trazo) solid rgb(from var(--color-peligro) r g b / 0.35);
}
.trading-resultado-titulo {
    font-size: 0.68rem;
    font-weight: var(--grosor-negrita);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}
.trading-resultado.exito .trading-resultado-titulo { color: var(--color-exito); }
.trading-resultado.error .trading-resultado-titulo { color: var(--color-peligro); }
.trading-resultado-detalle {
    font-variant-numeric: tabular-nums;
    color: var(--texto-fuerte);
}
.trading-resultado-json {
    background: var(--fondo-pantalla);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.3);
    padding: 8px;
    margin: 6px 0 0 0;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    max-height: 220px;
    overflow-y: auto;
}

/* ── Monitor terminal ── */
.trading-terminal {
    background: var(--fondo-pantalla);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.7;
    max-height: 350px;
    overflow-y: auto;
    white-space: pre-wrap;
}
.trading-terminal-line {
    padding: 2px 0;
    border-bottom: var(--grosor-trazo) solid rgb(from var(--trazo-suave) r g b / 0.5);
}
.trading-terminal-line:last-child { border-bottom: none; }

/* ── SSE status badge ── */
.trading-sse-status {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.65rem;
    font-weight: var(--grosor-negrita);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radio-redondeado);
}
.trading-sse-status[data-state="connected"] { background: rgb(from var(--color-exito) r g b / 0.12); color: var(--color-exito); }
.trading-sse-status[data-state="disconnected"] { background: rgb(from var(--color-peligro) r g b / 0.12); color: var(--color-peligro); }
.trading-sse-status[data-state="listening"] { background: rgb(from var(--color-advertencia) r g b / 0.12); color: var(--color-advertencia); }

/* ── Monitor stats mini-grid ── */
.trading-mon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--espacio-normal) * 0.5);
    margin-top: calc(var(--espacio-normal) * 0.75);
}
@media (max-width: 480px) {
    .trading-mon-grid { grid-template-columns: repeat(2, 1fr); }
}
.trading-mon-stat {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 10px 12px;
}
.trading-mon-stat h4 {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--texto-suave);
    margin: 0 0 2px 0;
}
.trading-mon-stat p {
    font-size: 1.1rem;
    font-weight: var(--grosor-negrita);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Contadores del histórico (Aprendizaje) ── */
.trading-datos-historicos {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.8rem;
    color: var(--texto-suave);
}
.trading-datos-historicos span {
    font-variant-numeric: tabular-nums;
}

/* ── Barra de descarga progresiva (Aprendizaje) ── */
.trading-descarga {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 10px 14px;
}
.trading-descarga-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    margin-bottom: 6px;
}
.trading-descarga-label {
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}
.trading-descarga-pct {
    font-weight: var(--grosor-negrita);
    color: var(--color-marca);
    font-variant-numeric: tabular-nums;
}
.trading-descarga-barra {
    background: var(--fondo-pantalla);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: var(--radio-pildora);
    height: 8px;
    overflow: hidden;
}
.trading-descarga-progreso {
    height: 100%;
    width: 0%;
    background: var(--color-marca);
    border-radius: var(--radio-pildora);
    transition: width var(--transicion-lenta);
}

/* ── Config inputs ── */
.trading-config-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: calc(var(--espacio-normal) * 0.75);
}
.trading-config-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: var(--grosor-titulos);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-suave);
    margin-bottom: 4px;
}
.trading-config-field input {
    width: 100%;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.82rem;
}
.trading-config-field .hint {
    font-size: 0.65rem;
    color: var(--texto-suave);
    margin-top: 2px;
}

/* ── Cycle/status indicator ── */
.trading-cycle {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

/* ── Chart (candlestick) ── */
.trading-chart-wrap {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 12px;
    box-sizing: border-box;
}
.trading-chart-wrap canvas {
    display: block;
    width: 100%;
    height: 420px;
}

/* ── Indicators grid ── */
.trading-ind-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--espacio-normal) * 0.5);
}
@media (max-width: 768px) {
    .trading-ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trading-ind-grid { grid-template-columns: 1fr; }
}

/* ── Ticker de precios en vivo ── */
.trading-ticker {
    display: flex;
    gap: calc(var(--espacio-normal) * 0.5);
    overflow-x: auto;
    padding-bottom: 6px;
}
.trading-ticker-item {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 8px 14px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.trading-ticker-simbolo {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-suave);
}
.trading-ticker-precio {
    font-size: 1.05rem;
    font-weight: var(--grosor-negrita);
    font-variant-numeric: tabular-nums;
}
.trading-ticker-var {
    font-size: 0.75rem;
    font-weight: var(--grosor-titulos);
}

/* ── Decision del bot ── */
.trading-decision {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 16px;
}
.trading-decision-card {
    border-left: calc(var(--grosor-trazo) * 4) solid var(--color-advertencia);
    border-radius: var(--radio-redondeado);
    padding: 12px 14px;
}
.trading-decision-buy {
    border-left-color: var(--color-exito);
    background: rgb(from var(--color-exito) r g b / 0.06);
}
.trading-decision-sell {
    border-left-color: var(--color-peligro);
    background: rgb(from var(--color-peligro) r g b / 0.06);
}
.trading-decision-wait {
    border-left-color: var(--color-advertencia);
    background: rgb(from var(--color-advertencia) r g b / 0.06);
}
.trading-decision-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.trading-decision-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.trading-decision-confianza {
    font-size: 1.4rem;
    font-weight: var(--grosor-negrita);
    font-variant-numeric: tabular-nums;
}
.trading-decision-texto {
    display: flex;
    flex-direction: column;
}
.trading-decision-etiqueta {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--texto-suave);
}
.trading-decision-valor {
    font-size: 1.5rem;
    font-weight: var(--grosor-negrita);
    line-height: 1.1;
}
.trading-decision-precio {
    font-size: 0.8rem;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}
.trading-decision-plan {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--espacio-normal) * 0.5);
    margin-top: 12px;
}
@media (max-width: 640px) {
    .trading-decision-plan { grid-template-columns: repeat(2, 1fr); }
}
.trading-decision-plan > div {
    background: var(--fondo-pantalla);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.3);
    padding: 8px 10px;
}
.trading-decision-plan span {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-suave);
    margin-bottom: 2px;
}
.trading-decision-plan strong {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.trading-decision-factores {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.trading-chip {
    background: rgb(from var(--texto-fuerte) r g b / 0.06);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: var(--radio-pildora);
    padding: 2px 10px;
    font-size: 0.68rem;
    color: var(--texto-suave);
}
.trading-motivos {
    margin-top: 12px;
}
.trading-motivos h5 {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--texto-suave);
    margin: 0 0 6px 0;
}
.trading-motivos ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trading-motivos li {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: var(--radio-redondeado);
}
.trading-motivo-ok {
    background: rgb(from var(--color-exito) r g b / 0.08);
    color: var(--color-exito);
}
.trading-motivo-block {
    background: rgb(from var(--color-advertencia) r g b / 0.08);
    color: var(--color-advertencia);
}
.trading-decision-indicadores {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: var(--grosor-trazo) solid var(--trazo-suave);
    font-size: 0.72rem;
    color: var(--texto-suave);
}
.trading-decision-indicadores strong {
    color: var(--texto-fuerte);
    font-variant-numeric: tabular-nums;
}

/* ── Daemon card (Resumen) ── */
.trading-daemon-card {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 14px 16px;
}
.trading-daemon-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.trading-daemon-estado {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: var(--grosor-negrita);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radio-redondeado);
}
.trading-daemon-estado[data-state="activo"] { background: rgb(from var(--color-exito) r g b / 0.12); color: var(--color-exito); }
.trading-daemon-estado[data-state="detenido"] { background: rgb(from var(--color-peligro) r g b / 0.12); color: var(--color-peligro); }
.trading-daemon-estado[data-state="desconocido"] { background: rgb(from var(--texto-suave) r g b / 0.12); color: var(--texto-suave); }
.trading-daemon-info {
    font-size: 0.75rem;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    flex: 1;
    min-width: 160px;
}
.trading-daemon-acciones {
    display: flex;
    gap: 8px;
}
.trading-daemon-datos {
    margin-top: 10px;
}
.trading-daemon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--espacio-normal) * 0.4);
}
@media (max-width: 768px) {
    .trading-daemon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .trading-daemon-grid { grid-template-columns: repeat(2, 1fr); }
}
.trading-daemon-stat {
    background: var(--fondo-pantalla);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.3);
    padding: 8px 10px;
}
.trading-daemon-stat span {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-suave);
    margin-bottom: 2px;
}
.trading-daemon-stat strong {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.trading-daemon-error {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 0.74rem;
    background: rgb(from var(--color-peligro) r g b / 0.08);
    border: var(--grosor-trazo) solid rgb(from var(--color-peligro) r g b / 0.3);
    border-radius: calc(var(--radio-redondeado) * 0.3);
    color: var(--color-peligro);
}

/* ── Pipeline del ciclo (Resumen) ── */
.trading-pipeline {
    display: flex;
    gap: 0;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 6px;
}
.trading-pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    font-size: 0.72rem;
    font-weight: var(--grosor-titulos);
    color: var(--texto-suave);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}
.trading-pipeline-step + .trading-pipeline-step { margin-left: 8px; }
.trading-pipeline-step + .trading-pipeline-step::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--trazo-suave);
}
.trading-pipeline-num {
    width: 18px;
    height: 18px;
    border-radius: var(--radio-lleno);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: var(--grosor-negrita);
    background: var(--fondo-pantalla);
    border: var(--grosor-trazo) solid var(--trazo-suave);
}
.trading-pipeline-step.hecho {
    color: var(--color-exito);
    border-color: rgb(from var(--color-exito) r g b / 0.4);
    background: rgb(from var(--color-exito) r g b / 0.06);
}
.trading-pipeline-step.hecho .trading-pipeline-num {
    background: var(--color-exito);
    border-color: var(--color-exito);
    color: var(--texto-invertido);
}
.trading-pipeline-step.activo {
    color: var(--color-marca);
    border-color: var(--color-marca);
    background: rgb(from var(--color-marca) r g b / 0.08);
}
.trading-pipeline-step.activo .trading-pipeline-num {
    background: var(--color-marca);
    border-color: var(--color-marca);
    color: var(--texto-invertido);
    animation: trading-spin 1.2s linear infinite;
}
.trading-pipeline-step.error {
    color: var(--color-peligro);
    border-color: var(--color-peligro);
    background: rgb(from var(--color-peligro) r g b / 0.08);
}
.trading-pipeline-step.error .trading-pipeline-num {
    background: var(--color-peligro);
    border-color: var(--color-peligro);
    color: var(--texto-invertido);
}

/* ── Timeline de actividad (Resumen) ── */
.trading-timeline {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 10px 14px;
    max-height: 300px;
    overflow-y: auto;
}
.trading-timeline-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-bottom: var(--grosor-trazo) solid rgb(from var(--trazo-suave) r g b / 0.6);
    font-size: 0.74rem;
}
.trading-timeline-item:last-child { border-bottom: none; }
.trading-timeline-item.error .trading-timeline-accion { color: var(--color-peligro); }
.trading-timeline-item.warn .trading-timeline-accion { color: var(--color-advertencia); }
.trading-timeline-item.info .trading-timeline-accion { color: var(--texto-fuerte); }
.trading-timeline-hora {
    font-size: 0.66rem;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.trading-timeline-accion {
    font-weight: var(--grosor-titulos);
    flex-shrink: 0;
}
.trading-timeline-detalle {
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Estado (Panel) ── */
.trading-state {
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 12px 16px;
}
.trading-state-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: var(--grosor-trazo) solid rgb(from var(--trazo-suave) r g b / 0.6);
    font-size: 0.82rem;
}
.trading-state-row:last-child { border-bottom: none; }
.trading-state-row span { color: var(--texto-suave); }
.trading-state-row strong { font-variant-numeric: tabular-nums; }

/* ── Backtest ── */
.trading-backtest-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--espacio-normal) * 0.5);
    background: var(--fondo-elemento);
    border: var(--grosor-trazo) solid var(--trazo-suave);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 14px;
}
@media (max-width: 768px) {
    .trading-backtest-form { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trading-backtest-form { grid-template-columns: 1fr; }
}
.trading-backtest-field label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-suave);
    margin-bottom: 3px;
}
.trading-backtest-field input,
.trading-backtest-field select {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
}
.trading-backtest-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--espacio-normal) * 0.5);
}
@media (max-width: 640px) {
    .trading-backtest-resumen { grid-template-columns: repeat(2, 1fr); }
}
.trading-backtest-mejor {
    background: rgb(from var(--color-marca) r g b / 0.06);
    border: var(--grosor-trazo) solid var(--color-marca);
    border-radius: calc(var(--radio-redondeado) * 0.4);
    padding: 12px 16px;
}
.trading-backtest-mejor h4 {
    margin: 0 0 6px 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-marca);
}
.trading-backtest-mejor p { margin: 2px 0; font-size: 0.82rem; }