/* ============================================================
   StarkTrade 5.0K - style-aiops.css (FASE AI OPS)
   Estilos del portal /aiops. Reusa variables del tema dark del
   resto del proyecto (var(--neon-cyan), var(--accent-red), etc).
   ============================================================ */

/* ── Shell + toolbar ───────────────────────────────────────── */
.aiops-shell { display:flex; flex-direction:column; gap:18px; padding:18px; }
.aiops-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.aiops-controls { display:flex; gap:8px; align-items:center; }
.aiops-select {
    background: rgba(0,207,255,0.05);
    color: var(--neon-cyan, #00cfff);
    border: 1px solid rgba(0,207,255,0.30);
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 5px 10px; border-radius: 3px; letter-spacing: 0.4px;
    cursor: pointer;
}
.aiops-select:hover { background: rgba(0,207,255,0.12); }

/* ── Sample warning ────────────────────────────────────────── */
.aiops-warning {
    background: rgba(255,180,61,0.10);
    border: 1px solid rgba(255,180,61,0.45);
    color: #ffb43d;
    padding: 10px 14px; border-radius: 4px; font-size: 0.78rem;
    line-height: 1.5;
}

/* ── Grid de cards ─────────────────────────────────────────── */
.aiops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.aiops-card {
    background: rgba(0,255,65,0.02);
    border: 1px solid rgba(0,255,65,0.20);
    border-left: 3px solid var(--text-secondary, #6a7080);
    padding: 14px 16px;
    border-radius: 4px;
    min-height: 100px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: border-color 0.2s ease;
}
.aiops-card-wide { grid-column: span 2; min-height: 140px; }
.aiops-card-title { font-size: 0.68rem; color: var(--text-secondary); letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase; }
.aiops-card-value { font-size: 1.6rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin: 4px 0; }
.aiops-card-meta  { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.4; }

/* Status colors (aplicados a la card entera) */
.aiops-status-ok           { border-left-color: var(--matrix-green, #00ff41); }
.aiops-status-ok .aiops-card-value     { color: var(--matrix-green, #00ff41); }
.aiops-status-warn         { border-left-color: #ffb43d; }
.aiops-status-warn .aiops-card-value   { color: #ffb43d; }
.aiops-status-crit         { border-left-color: var(--accent-red, #ff4757); }
.aiops-status-crit .aiops-card-value   { color: var(--accent-red, #ff4757); }
.aiops-status-insufficient { border-left-color: #6a7080; }
.aiops-status-insufficient .aiops-card-value { color: #6a7080; }

/* ── Histogram + gate reasons ─────────────────────────────── */
.aiops-histogram, .aiops-gates-list { display:flex; flex-direction:column; gap:6px; margin-top: 8px; }
.aiops-hist-row { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; gap: 8px; font-size: 0.72rem; }
.aiops-hist-label { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; }
.aiops-hist-bar-host { background: rgba(0,207,255,0.05); border-radius: 2px; height: 16px; overflow: hidden; }
.aiops-hist-bar { height: 100%; background: linear-gradient(90deg, var(--neon-cyan,#00cfff), rgba(0,207,255,0.55)); }
.aiops-hist-bar-gate { background: linear-gradient(90deg, #ffb43d, rgba(255,180,61,0.55)); }
.aiops-hist-meta { color: var(--text-secondary); text-align: right; font-family: 'JetBrains Mono', monospace; }
.aiops-empty-bar { color: var(--text-secondary); font-size: 0.72rem; padding: 8px 0; opacity: 0.6; }

/* ── Section header de la audit table ─────────────────────── */
.aiops-section-header { display:flex; justify-content:space-between; align-items:baseline; margin-top: 12px; padding-bottom: 6px; border-bottom: 1px dashed rgba(0,207,255,0.20); }
.aiops-audit-meta { font-size: 0.72rem; color: var(--text-secondary); }

/* ── Audit table ──────────────────────────────────────────── */
.aiops-audit-host { background: rgba(0,0,0,0.18); border-radius: 4px; overflow-x: auto; }
.aiops-audit-empty { padding: 18px; text-align: center; color: var(--text-secondary); opacity: 0.6; }
.aiops-audit-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.aiops-audit-table thead th { background: rgba(0,207,255,0.06); color: var(--neon-cyan); padding: 8px 10px; text-align: left; font-weight: 700; letter-spacing: 0.5px; font-size: 0.68rem; }
.aiops-audit-table tbody td { padding: 8px 10px; border-top: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.aiops-audit-table tbody tr:hover { background: rgba(0,207,255,0.03); }
.aiops-col-time { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); width: 90px; }
.aiops-col-pair { width: 80px; }
.aiops-col-conf { width: 50px; text-align: center; font-family: 'JetBrains Mono', monospace; }
.aiops-col-outcome { width: 110px; }
.aiops-col-pnl { width: 70px; font-family: 'JetBrains Mono', monospace; text-align: right; }
.aiops-col-reasoning { line-height: 1.4; }
.aiops-col-actions { width: 170px; white-space: nowrap; }
.aiops-gate-tag { background: rgba(255,180,61,0.10); color: #ffb43d; padding: 1px 6px; border-radius: 3px; font-size: 0.65rem; margin-left: 4px; }

/* ── Outcome badges ───────────────────────────────────────── */
.aiops-badge { display:inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px; }
.aiops-badge-win     { background: rgba(0,255,65,0.15);  color: var(--matrix-green, #00ff41); }
.aiops-badge-loss    { background: rgba(255,71,87,0.15); color: var(--accent-red, #ff4757); }
.aiops-badge-exp     { background: rgba(255,180,61,0.15); color: #ffb43d; }
.aiops-badge-wait    { background: rgba(106,112,128,0.15); color: #8a8f99; }
.aiops-badge-pending { background: rgba(0,207,255,0.10); color: var(--neon-cyan); }

/* ── Tag buttons (acierto / falso positivo / review) ─────── */
.aiops-tag-btn {
    background: rgba(0,207,255,0.06); color: var(--neon-cyan, #00cfff);
    border: 1px solid rgba(0,207,255,0.25);
    font-family: inherit; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.4px;
    padding: 3px 7px; margin-right: 3px; cursor: pointer; border-radius: 2px;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    min-height: 26px; transition: all 0.15s ease;
}
.aiops-tag-btn:hover:not(:disabled) { background: rgba(0,207,255,0.14); }
.aiops-tag-btn:disabled { opacity: 0.45; cursor: default; }
.aiops-tag-hit:hover:not(:disabled) { background: rgba(0,255,65,0.20); color: #00ff41; border-color: #00ff41; }
.aiops-tag-fp:hover:not(:disabled)  { background: rgba(255,71,87,0.20); color: #ff4757; border-color: #ff4757; }
.aiops-tag-rev:hover:not(:disabled) { background: rgba(255,180,61,0.20); color: #ffb43d; border-color: #ffb43d; }
.aiops-tag-pending { animation: aiops-pulse 1s infinite; }
.aiops-tag-applied { opacity: 0.6; pointer-events: none; }
@keyframes aiops-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Row tagged states */
.aiops-row-tagged-hit            { background: rgba(0,255,65,0.04)  !important; }
.aiops-row-tagged-false_positive { background: rgba(255,71,87,0.04) !important; }
.aiops-row-tagged-needs_review   { background: rgba(255,180,61,0.04) !important; }

.aiops-error { color: var(--accent-red, #ff4757); padding: 18px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .aiops-grid { grid-template-columns: repeat(2, 1fr); }
    .aiops-card-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
    .aiops-grid { grid-template-columns: 1fr; }
    .aiops-card-wide { grid-column: span 1; }
    .aiops-col-reasoning { display: none; }
}

/* Consultor AI Ops (FASE AI OPS ADVISOR) */
.btn-advisor { background: linear-gradient(90deg, #2a3aff, #4c1d95); color: #fff; border-color: #5b5bff; }
.btn-advisor:hover:not(:disabled) { filter: brightness(1.15); }

.aiops-advisor-panel { background: #0f1320; border: 1px solid #2a3158; border-radius: 8px;
    padding: 16px 18px; margin: 12px 0 18px; }
.aiops-advisor-header { display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.aiops-advisor-title { display: flex; align-items: center; gap: 10px; font-size: 1.05em; }
.aiops-advisor-badge { font-size: 0.78em; padding: 2px 10px; border-radius: 10px; letter-spacing: 0.5px;
    background: #2a2a2a; color: #ccc; }
.advisor-h-ok   { background: rgba(0,255,136,0.15); color: #00ff88; border: 1px solid #00ff88; }
.advisor-h-warn { background: rgba(255,193,7,0.15);  color: #ffc107; border: 1px solid #ffc107; }
.advisor-h-crit { background: rgba(255,68,68,0.15);  color: #ff4444; border: 1px solid #ff4444; }
.aiops-advisor-toolbar { display: flex; align-items: center; gap: 8px; }
.aiops-advisor-meta { font-size: 0.78em; color: #888; }
.aiops-advisor-summary { font-size: 0.95em; line-height: 1.45; color: #d6d6d6;
    background: #161a2c; border-left: 3px solid #5b5bff; padding: 10px 12px;
    border-radius: 4px; margin: 8px 0 14px; }
.aiops-advisor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aiops-advisor-col h4 { margin: 0 0 8px; font-size: 0.85em; color: #aaa;
    text-transform: uppercase; letter-spacing: 0.6px; }
.aiops-advisor-list { display: flex; flex-direction: column; gap: 8px; }
.advisor-item { background: #161a2c; border: 1px solid #232846; border-radius: 6px; padding: 10px 12px; }
.advisor-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.advisor-item-icon { font-size: 1.1em; }
.advisor-item-area { font-weight: 600; color: #b6b6ff; font-size: 0.85em; text-transform: uppercase; }
.advisor-item-what { color: #e0e0e0; font-size: 0.92em; line-height: 1.4; }
.advisor-item-why { color: #888; font-size: 0.82em; margin-top: 4px; line-height: 1.35; }
.advisor-sev-crit { border-left: 3px solid #ff4444; }
.advisor-sev-warn { border-left: 3px solid #ffc107; }
.advisor-sev-ok   { border-left: 3px solid #00ff88; }
.advisor-pri-alta  { border-left: 3px solid #ff4444; }
.advisor-pri-media { border-left: 3px solid #ffc107; }
.advisor-pri-baja  { border-left: 3px solid #6a6a6a; }
.advisor-empty { color: #666; font-style: italic; font-size: 0.85em; padding: 6px 0; }
@media (max-width: 800px) { .aiops-advisor-grid { grid-template-columns: 1fr; } }