/* ============================================================
 * StarkTrade 5.0K - style-extras.css
 * Modal Rayos X + Widgets Fase 1 (Por Qué NO + Termómetro)
 * Tag de perfil de trader (Fase 2)
 * Banner de modo del sistema (Fase 4 UI/UX)
 * ============================================================ */

/* ─── Banner de Modo del Sistema (FASE 4) ───────────────────
 * Cinta superior que refleja active_strategy.paper_trading_only
 * en tiempo real via dashboard-realtime.js. Tres estados:
 *   .smb-loading  gris    Cargando…
 *   .smb-paper    ámbar   Simulación
 *   .smb-live     verde   Conectado Demo real
 */
.system-mode-banner {
    position: sticky;          /* permanece visible al scroll de <main> */
    top: 0;
    z-index: 10;               /* sobre cards, MUY por debajo de toasts/modales */
    padding: 8px 18px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.4s ease, color 0.4s ease;
    /* Vive en grid-area "content" (segunda columna, fila inferior).
     * NO se solapa con header (grid-area header, fila superior) ni
     * con sidebar (grid-area sidebar, primera columna). El sidebar
     * NO es position:fixed -> imposible que el banner lo tape. */
}
.smb-loading {
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
}
.smb-paper {
    background: rgba(255, 179, 71, 0.18);
    color: #ffb347;
    border-bottom-color: rgba(255, 179, 71, 0.5);
}
.smb-live {
    background: rgba(0, 255, 153, 0.14);
    color: var(--accent-neon);
    border-bottom-color: rgba(0, 255, 153, 0.5);
    animation: smbLivePulse 2.4s ease-in-out infinite;
}
@keyframes smbLivePulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(0,255,153,0); }
    50%      { box-shadow: inset 0 0 20px 0 rgba(0,255,153,0.12); }
}

/* ─── Modal Rayos X Playground ──────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.88); z-index: 1000;
    justify-content: center; align-items: center; padding: 20px;
}
.modal-box {
    background: var(--bg-card); border: 1px solid var(--accent-ai);
    border-radius: 4px; width: 100%; max-width: 820px; max-height: 88vh;
    overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-title  { font-size: 0.8rem; font-weight: 700; color: var(--accent-ai); letter-spacing: 1px; }
.modal-section { display: flex; flex-direction: column; gap: 6px; }
.modal-label  { font-size: 0.6rem; color: var(--text-secondary); letter-spacing: 1px; }
.modal-len    { color: var(--accent-neon); margin-left: 6px; }
.code-block {
    background: #07070a; border: 1px solid var(--border); border-radius: 2px;
    padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
    color: #a8ff78; white-space: pre-wrap; word-break: break-word;
    max-height: 200px; overflow-y: auto; line-height: 1.6;
}
.code-block--response { color: #79c0ff; }

/* ─── FASE 1: Por Qué NO ────────────────────────────────────── */
.rej-stats {
    display: flex; gap: 20px; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.rej-stat { display: flex; flex-direction: column; gap: 4px; }
.rej-stat .label {
    font-size: 0.55rem; color: var(--text-secondary); letter-spacing: 1px;
}
.rej-stat .value { font-size: 1.1rem; font-weight: 700; }
.rej-last .label {
    font-size: 0.55rem; color: var(--text-secondary);
    letter-spacing: 1px; margin-bottom: 6px;
}
.rej-reason {
    font-size: 0.7rem; line-height: 1.55; color: var(--text-primary);
    background: #07070a; border-left: 2px solid var(--accent-red);
    padding: 8px 10px; border-radius: 2px; min-height: 40px;
}

/* ─── FASE 1: Termómetro de Confluencia ─────────────────────── */
.confluence-bars {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
}
.conf-row {
    display: grid;
    grid-template-columns: 110px 1fr 50px;
    align-items: center; gap: 10px;
}
.conf-label { font-size: 0.6rem; color: var(--text-secondary); letter-spacing: 0.5px; }
.conf-track {
    height: 8px; background: #1a1a1e; border-radius: 4px;
    overflow: hidden; display: flex; position: relative;
}
.conf-track::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; background: #333; z-index: 1;
}
.conf-fill {
    height: 100%; transition: width 0.6s ease;
    box-shadow: 0 0 6px currentColor;
}
.conf-fill.profit  { background: var(--accent-neon); color: var(--accent-neon); }
.conf-fill.loss    { background: var(--accent-red);  color: var(--accent-red); }
.conf-fill.neutral { background: var(--text-secondary); color: var(--text-secondary); }
.conf-score {
    font-size: 0.7rem; font-weight: 700; text-align: right;
}
.confluence-label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px;
    text-align: center; padding: 8px; border-radius: 2px;
    background: #07070a; border: 1px solid var(--border);
}

/* ─── FASE 2: Tag de perfil del trader ──────────────────────── */
.trader-tag {
    display: inline-block; margin-left: 8px;
    padding: 2px 8px; border-radius: 10px;
    background: rgba(157, 78, 221, 0.15);
    border: 1px solid var(--accent-ai);
    color: var(--accent-ai);
    font-size: 0.55rem; letter-spacing: 1px; vertical-align: middle;
}

/* ─── Laboratorio del Simulador (Playground) ───────────────── */
.hidden { display: none !important; }

.lab-container {
    padding: 24px; max-width: 1100px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 20px;
}

.lab-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.lab-title {
    font-size: 0.85rem; font-weight: 700; color: var(--accent-ai);
    letter-spacing: 2px;
}

.lab-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
}
@media (max-width: 700px) { .lab-grid { grid-template-columns: 1fr; } }

.lab-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.55rem; color: var(--text-secondary);
    letter-spacing: 1px;
}
.lab-grid input,
.lab-grid select {
    background: #07070a; border: 1px solid var(--border);
    color: var(--text-primary); border-radius: 2px;
    padding: 8px 10px; font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem; transition: border-color 0.2s;
}
.lab-grid input:focus,
.lab-grid select:focus {
    outline: none; border-color: var(--accent-ai);
    box-shadow: 0 0 6px rgba(157, 78, 221, 0.4);
}

.lab-textarea {
    width: 100%; box-sizing: border-box;
    background: #07070a; border: 1px solid var(--border);
    color: #a8ff78; border-radius: 2px;
    padding: 12px; font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem; line-height: 1.6;
    resize: vertical; min-height: 360px;
}
.lab-textarea:focus {
    outline: none; border-color: var(--accent-ai);
    box-shadow: 0 0 8px rgba(157, 78, 221, 0.4);
}

.lab-actions { display: flex; justify-content: center; }
.lab-actions .btn-primary { max-width: 360px; }

.lab-result {
    font-size: 0.7rem; line-height: 1.7;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 2px; padding: 14px;
    min-height: 60px;
}
.lab-result:empty { display: none; }

/* ─── Gestor de Variantes ──────────────────────────────────── */
.lab-variants {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.lab-variants-label {
    font-size: 0.55rem; color: var(--text-secondary);
    letter-spacing: 1px; margin-right: 4px;
}
.lab-select, .lab-name-input {
    background: #07070a; border: 1px solid var(--border);
    color: var(--text-primary); border-radius: 2px;
    padding: 6px 10px; font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; min-width: 200px;
    transition: border-color 0.2s;
}
.lab-select:focus, .lab-name-input:focus {
    outline: none; border-color: var(--accent-ai);
    box-shadow: 0 0 6px rgba(157, 78, 221, 0.4);
}
.lab-name-input { flex: 1; max-width: 320px; }
.lab-variants .btn-sm:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* ─── Win Rate Widget ───────────────────────────────────────── */
.wr-main {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.wr-rate {
    font-size: 2.4rem; font-weight: 700; letter-spacing: 1px;
    line-height: 1;
}
.wr-rate.profit  { color: var(--accent-neon); text-shadow: 0 0 12px rgba(0,255,65,0.4); }
.wr-rate.loss    { color: var(--accent-red);  text-shadow: 0 0 12px rgba(255,62,62,0.4); }
.wr-rate.neutral { color: var(--text-secondary); }
.wr-status {
    font-size: 0.65rem; letter-spacing: 1.5px; text-align: center;
}
.wr-status.profit  { color: var(--accent-neon); }
.wr-status.loss    { color: var(--accent-red); }
.wr-status.neutral { color: var(--text-secondary); }
.wr-meta {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 0.65rem; color: var(--text-secondary);
    line-height: 1.6;
}
.wr-pnl.profit { color: var(--accent-neon); font-weight: 700; }
.wr-pnl.loss   { color: var(--accent-red);  font-weight: 700; }

  /* ─── Responsive: tablet/movil ──────────────────────────────── */
  @media (max-width: 768px) {
      /* Modal Rayos X: padding minimo para no comerse la pantalla */
      .modal-overlay { padding: 8px; }
      .modal-box { max-height: 92vh; padding: 14px; gap: 12px; }
      .code-block { font-size: 0.6rem; max-height: 160px; padding: 10px; }

      /* Por Que NO: KPIs apilados */
      .rej-stats { flex-direction: column; gap: 10px; align-items: stretch; }

      /* Termometro de Confluencia: columna de etiqueta mas estrecha */
      .conf-row { grid-template-columns: 80px 1fr 40px; gap: 8px; }
      .conf-label { font-size: 0.55rem; }
      .confluence-label { font-size: 0.7rem; }

      /* Laboratorio del Simulador */
      .lab-container { padding: 14px; }
      .lab-grid { grid-template-columns: 1fr; }
      .lab-toolbar { flex-wrap: wrap; gap: 10px; }
      .lab-name-input, .lab-select {
          max-width: 100%;
          flex: 1 1 100%;
      }
      .lab-textarea { min-height: 140px; font-size: 0.7rem; }

      /* Win-Rate widget: rate menor para que respire con el meta */
      .wr-main { flex-direction: column; align-items: flex-start; gap: 6px; }
      .wr-rate { font-size: 1.6rem; }
      .wr-meta { font-size: 0.6rem; flex-wrap: wrap; gap: 8px 14px; }
  }