/* ============================================================
 * StarkTrade 5.0K - style-diag.css
 * Terminal de Diagnóstico + sistema de Toasts
 * ============================================================ */

/* ─── Terminal de Diagnóstico ───────────────────────────────── */
#diag-terminal-card {
    background:
        linear-gradient(135deg, rgba(0,207,255,0.04), transparent 70%),
        var(--bg-card);
}

.diag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 700px) { .diag-grid { grid-template-columns: 1fr; } }

.diag-cell {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px;
    background: #07070a;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.btn-diag {
    background: transparent;
    border: 1px solid var(--accent-ai);
    color: var(--accent-ai);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 10px; border-radius: 2px;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}
.btn-diag:hover:not(:disabled) {
    background: rgba(157,78,221,0.14);
    box-shadow: 0 0 10px rgba(157,78,221,0.45);
    text-shadow: 0 0 5px rgba(157,78,221,0.55);
}
.btn-diag:disabled { opacity: 0.55; cursor: not-allowed; }

.diag-desc {
    font-size: 0.6rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ─── Toasts ────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 2000;
    display: flex; flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 3px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    line-height: 1.4;
    max-width: 360px;
    opacity: 0; transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.toast.show { opacity: 1; transform: translateX(0); }

.toast-info { border-left-color: #00cfff; }
.toast-info::before {
    content: 'ℹ '; color: #00cfff; font-weight: 700;
}
.toast-ok   { border-left-color: var(--accent-neon); }
.toast-ok::before {
    content: '✓ '; color: var(--accent-neon); font-weight: 700;
    text-shadow: 0 0 5px rgba(0,255,65,0.5);
}
.toast-err  { border-left-color: var(--accent-red); }
.toast-err::before {
    content: '⚠ '; color: var(--accent-red); font-weight: 700;
    text-shadow: 0 0 5px rgba(255,62,62,0.5);
}

/* ─── Spin de los botones REFRESH ───────────────────────────── */
/* Solo gira el .ico interno para no rotar el texto del boton.
   Aplicado por withSpin() durante la promesa del fetch. */
.btn-sm .ico,
.btn-sync .ico {
    display: inline-block;
    transform-origin: center center;
}
.btn-sm.syncing .ico,
.btn-sync.syncing .ico {
    animation: stk-spin 0.8s linear infinite;
}
.btn-sm.syncing {
    color: #00cfff;
    border-color: #00cfff;
    box-shadow: 0 0 8px rgba(0,207,255,0.4);
}
@keyframes stk-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Market Chart ──────────────────────────────────────────── */
.market-chart {
    position: relative;
    width: 100%;
    height: 450px;
    margin: 4px 0 14px;
    background:
        linear-gradient(180deg, rgba(0,207,255,0.04), transparent 50%),
        rgba(7,7,10,0.35);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.market-chart-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    font-size: 0.7rem; letter-spacing: 1.5px;
    background: repeating-linear-gradient(
        45deg, rgba(157,78,221,0.04) 0 6px,
        transparent 6px 12px
    );
}
/* Lightweight Charts inyecta sus propios canvas; nos aseguramos de
   que ocupen el contenedor sin overflow horizontal. */
.market-chart > div { width: 100% !important; }

/* Destello al recibir actualizacion por Real-Time. Borde + glow neon
   verde que se desvanecen en 1.3s. La clase se quita por JS al final. */
.market-chart.rt-flash {
    animation: market-rt-flash 1.3s ease-out;
}
@keyframes market-rt-flash {
    0%   { border-color: var(--border);
           box-shadow: 0 0 0 0 rgba(0,255,136,0.0); }
    18%  { border-color: #00ff88;
           box-shadow: 0 0 22px 4px rgba(0,255,136,0.55),
                       inset 0 0 22px 0 rgba(0,255,136,0.18); }
    100% { border-color: var(--border);
           box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}

/* Leyenda .ia-logs-legend migrada a style-logs.css */

/* ─── Panel RENDIMIENTO GLOBAL ─────────────────────────────── */
#performance-card {
    background:
        linear-gradient(135deg, rgba(0,255,136,0.05), transparent 60%),
        var(--bg-card);
}
.perf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
@media (max-width: 700px) { .perf-kpi-grid { grid-template-columns: 1fr; } }

.perf-kpi {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    background: #07070a;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.perf-kpi-label {
    font-size: 0.55rem; letter-spacing: 1.8px;
    color: var(--text-secondary);
}
.perf-kpi-value {
    font-size: 1.7rem; font-weight: 700; line-height: 1;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.perf-kpi-value.profit  { color: var(--accent-neon); text-shadow: 0 0 12px rgba(0,255,65,0.4); }
.perf-kpi-value.loss    { color: var(--accent-red);  text-shadow: 0 0 12px rgba(255,62,62,0.4); }
.perf-kpi-value.neutral { color: var(--text-secondary); }
.perf-kpi-meta {
    font-size: 0.55rem; letter-spacing: 1px;
    color: var(--text-secondary);
}

.perf-sparkline {
    position: relative;
    width: 100%; height: 80px;
    background: rgba(7,7,10,0.4);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.perf-sparkline-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    font-size: 0.6rem; letter-spacing: 1.2px;
}
.perf-sparkline > div { width: 100% !important; }

/* FASE 4: tag inline para el contador EXPIRED en perf-ops-detail. */
.perf-exp-tag {
    color: #c9a227;
    border-bottom: 1px dotted rgba(201,162,39,0.5);
    cursor: help;
}

/* ─── Sensor Mini Grid ─────────────────────────────────────── */
/* Layout compacto debajo de la grafica. Grid 2-cols (3 en wide)
   para minimizar el scroll vertical dentro del card. */
.sensor-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 900px) {
    .sensor-mini { grid-template-columns: repeat(3, 1fr); }
}
.sm-cell {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: #07070a;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.sm-cell-wide { grid-column: 1 / -1; }
.sm-icon {
    font-size: 1rem; line-height: 1;
    color: var(--accent-ai);
    width: 18px; text-align: center;
    flex: 0 0 18px;
}
.sm-text {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.sm-label {
    font-size: 0.55rem; letter-spacing: 1.5px;
    color: var(--text-secondary);
}
.sm-value {
    font-size: 0.8rem; font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-cell-wide .trend-meter { margin-top: 4px; }

  /* ─── Responsive: refuerzo a 768 (los 700px existentes cubren <700) ── */
  @media (max-width: 768px) {
      .diag-grid { grid-template-columns: 1fr; }
      .perf-kpi-grid { grid-template-columns: 1fr; }
      .btn-diag { font-size: 0.7rem; padding: 8px 10px; }
      .diag-desc { font-size: 0.6rem; }
      .perf-kpi-value { font-size: 1.1rem; }
  }