/*
 * ══════════════════════════════════════════════════════════════════════
 *  CAOSmarada — Signals Redesign (Onda D · 25/05/2026)
 *  Refundação visual completa da aba #page-signals.
 *  Linguagem: mesma da aba Predições ONNX e Mercado (ultra-premium).
 *
 *  Princípios:
 *   1. Panel sólido (bg-card-solid) — sem glassmorphism colorido nem neon
 *   2. Editorial italic em section titles, mono tabular-nums em números
 *   3. Hierarquia: card → metric → sub-metric (3 níveis, escalas distintas)
 *   4. Filter pills minimal Linear-style (ativo = bg-card-solid + shadow sutil)
 *   5. Signal cards com accent stripe esquerda + badge semântico
 *   6. Confidence bar gradient emerald→amber→rose
 *   7. Zero shadows neon, zero borders grossos coloridos
 *
 *  Importar APÓS ultra-premium.css. Escopo total: #page-signals
 * ══════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────
   1. PAGE HEADER — editorial unificado
   ──────────────────────────────────────────────────────────────── */
#page-signals .page-header h2 {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  margin: 0 0 4px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
#page-signals .page-header .subtitle {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

/* SVG hero (substitui emoji 🚦) */
#page-signals .sig-hero-icon {
  width: 26px;
  height: 26px;
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
  opacity: 0.92;
}

/* ────────────────────────────────────────────────────────────────
   2. KPI STRIP — 4 cards estilo hype (emerald accent)
   ──────────────────────────────────────────────────────────────── */
#page-signals #signals-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 1100px) {
  #page-signals #signals-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  #page-signals #signals-kpi-strip { grid-template-columns: 1fr !important; }
}

#page-signals #signals-kpi-strip .kpi-card {
  position: relative;
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  overflow: hidden;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out) !important;
  box-shadow: none !important;
  cursor: default;
}
#page-signals #signals-kpi-strip .kpi-card:hover {
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

/* faixa de acento no topo (substitui border grossa colorida) */
#page-signals #signals-kpi-strip .kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.5;
}
#page-signals #signals-kpi-strip .kpi-card.up-card::before   { background: var(--signal-buy); }
#page-signals #signals-kpi-strip .kpi-card.down-card::before { background: var(--signal-sell); }
#page-signals #signals-kpi-strip .kpi-card.hold-card::before { background: var(--signal-hold); }

#page-signals #signals-kpi-strip .kpi-label {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 8px !important;
}
#page-signals #signals-kpi-strip .kpi-price {
  font-family: var(--font-mono) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
#page-signals #signals-kpi-strip .kpi-change {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  margin-top: 8px !important;
  color: var(--text-secondary) !important;
  font-variant-numeric: tabular-nums !important;
}
#page-signals #signals-kpi-strip .kpi-change.up   { color: var(--signal-buy) !important; }
#page-signals #signals-kpi-strip .kpi-change.down { color: var(--signal-sell) !important; }
#page-signals #signals-kpi-strip .kpi-change.hold { color: var(--signal-hold) !important; }

/* ────────────────────────────────────────────────────────────────
   3. FILTERS BAR — pills minimalistas Linear-style
   ──────────────────────────────────────────────────────────────── */
#page-signals .sig-filters {
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
#page-signals .sig-filters-group {
  display: flex;
  gap: 4px;
  align-items: center;
}
#page-signals .sig-filter-pill {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#page-signals .sig-filter-pill:hover { color: var(--text-primary) !important; }
#page-signals .sig-filter-pill.active {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}
#page-signals .sig-filter-pill.active.is-long  { color: var(--signal-buy) !important;  background: var(--signal-buy-bg) !important; }
#page-signals .sig-filter-pill.active.is-short { color: var(--signal-sell) !important; background: var(--signal-sell-bg) !important; }
#page-signals .sig-filter-pill.active.is-hold  { color: var(--signal-hold) !important; background: var(--signal-hold-bg) !important; }

/* indicador de cor no pill */
#page-signals .sig-filter-pill .sig-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

#page-signals .sig-filters-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text-secondary);
}
#page-signals .sig-filters-meta label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 500;
}
#page-signals .sig-filters-meta select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--text-primary) !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-family: var(--font-mono) !important;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out);
}
#page-signals .sig-filters-meta select:hover {
  border-color: rgba(52,211,153,0.35) !important;
}
#page-signals .sig-filters-meta select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

/* ────────────────────────────────────────────────────────────────
   4. SIGNALS GRID — cards Linear-style com accent stripe
   ──────────────────────────────────────────────────────────────── */
#page-signals #signals-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
  gap: 14px !important;
}

#page-signals .sig-card {
  position: relative;
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 12px !important;
  padding: 16px 18px 14px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
#page-signals .sig-card:hover {
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
}
#page-signals .sig-card.is-degraded { opacity: 0.82; }

/* stripe vertical à esquerda */
#page-signals .sig-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  border-radius: 12px 0 0 12px;
}
#page-signals .sig-card.is-long::before  { background: var(--signal-buy); }
#page-signals .sig-card.is-short::before { background: var(--signal-sell); }
#page-signals .sig-card.is-hold::before  { background: var(--signal-hold); }

/* HEADER do card: ticker + badge sinal */
#page-signals .sig-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#page-signals .sig-ticker {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  color: var(--text-primary);
}
#page-signals .sig-quality {
  font-size: 13px;
  opacity: 0.75;
}

#page-signals .sig-badge {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.05em !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  border: 1px solid currentColor !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#page-signals .sig-badge.is-long  { color: var(--signal-buy);  background: var(--signal-buy-bg); }
#page-signals .sig-badge.is-short { color: var(--signal-sell); background: var(--signal-sell-bg); }
#page-signals .sig-badge.is-hold  { color: var(--signal-hold); background: var(--signal-hold-bg); }

/* WARNING tag — sem modelo */
#page-signals .sig-warn {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--signal-hold);
  background: var(--signal-hold-bg);
  border: 1px solid var(--signal-hold-border);
  border-radius: 6px;
  padding: 4px 9px;
  letter-spacing: 0.01em;
}

/* CONFIDENCE bar */
#page-signals .sig-conf {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#page-signals .sig-conf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
}
#page-signals .sig-conf-label {
  font-family: var(--font-ui);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
#page-signals .sig-conf-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#page-signals .sig-conf-value.is-high { color: var(--signal-buy); }
#page-signals .sig-conf-value.is-mid  { color: var(--signal-hold); }
#page-signals .sig-conf-value.is-low  { color: var(--signal-sell); }

#page-signals .sig-conf-bar {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
}
#page-signals .sig-conf-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms var(--ease-out);
}
#page-signals .sig-conf-bar-fill.is-high { background: linear-gradient(90deg, var(--accent-light), var(--signal-buy)); }
#page-signals .sig-conf-bar-fill.is-mid  { background: linear-gradient(90deg, #fde68a, var(--signal-hold)); }
#page-signals .sig-conf-bar-fill.is-low  { background: linear-gradient(90deg, #fecaca, var(--signal-sell)); }

/* META grid (Regime / VaR / Pred / Sentimento) */
#page-signals .sig-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
#page-signals .sig-meta {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 7px 9px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-signals .sig-meta.is-wide { grid-column: span 2; }
#page-signals .sig-meta-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
#page-signals .sig-meta-value {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
#page-signals .sig-meta-value.is-muted { color: var(--text-muted); }

/* DRIVERS (Top features XAI) */
#page-signals .sig-drivers {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#page-signals .sig-drivers-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
#page-signals .sig-drivers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#page-signals .sig-driver-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border-radius: 4px;
  letter-spacing: 0.01em;
}

/* ACTIONS — botões finais (cross-tab) */
#page-signals .sig-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
#page-signals .sig-action-btn {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-card);
  transition: all 160ms var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#page-signals .sig-action-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
}
#page-signals .sig-action-btn.is-primary {
  color: var(--accent);
  border-color: rgba(52,211,153,0.35);
  background: rgba(52,211,153,0.06);
}
#page-signals .sig-action-btn.is-primary:hover {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.55);
}
#page-signals .sig-action-btn.is-secondary {
  color: var(--accent-premium);
  border-color: rgba(167,139,250,0.30);
  background: rgba(167,139,250,0.05);
}
#page-signals .sig-action-btn.is-secondary:hover {
  background: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.50);
}
#page-signals .sig-action-btn svg {
  width: 12px; height: 12px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
}

/* ────────────────────────────────────────────────────────────────
   5. PANEL HISTÓRICO (Chart Acurácia 30d)
   ──────────────────────────────────────────────────────────────── */
#page-signals .sig-history-panel {
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-top: 24px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#page-signals .sig-history-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding: 0;
  border: none !important;
}
#page-signals .sig-history-panel .panel-header h3 {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  text-transform: none !important;
}
#page-signals #signals-history-status {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

#page-signals .sig-chart-wrap {
  position: relative;
  height: 240px;
  margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────────
   6. EMPTY / LOADING states
   ──────────────────────────────────────────────────────────────── */
#page-signals .empty-state {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  background: var(--bg-card-solid);
  border: 1px dashed var(--border-card);
  padding: 36px 20px !important;
  text-align: center;
  border-radius: 12px;
  letter-spacing: 0.01em;
}

/* botão Recarregar / Exportar do header */
#page-signals .page-header .btn-sm {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 7px 13px !important;
  border-radius: 7px !important;
  transition: all 160ms var(--ease-out);
}
#page-signals .page-header .btn-primary {
  background: var(--accent) !important;
  color: #0a0f1c !important;
  border: 1px solid var(--accent) !important;
}
#page-signals .page-header .btn-primary:hover {
  background: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
}
#page-signals .page-header .btn-secondary {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-card) !important;
}
#page-signals .page-header .btn-secondary:hover {
  color: var(--text-primary) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.03) !important;
}

/* ────────────────────────────────────────────────────────────────
   7. LIGHT THEME overrides
   ──────────────────────────────────────────────────────────────── */
.light-theme #page-signals .page-header h2 { color: #0f172a !important; }
.light-theme #page-signals .sig-card { box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important; }
.light-theme #page-signals .sig-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,0.08) !important; }
.light-theme #page-signals .sig-meta { background: rgba(15,23,42,0.025); border-color: rgba(15,23,42,0.05); }
.light-theme #page-signals .sig-driver-tag { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.06); color: #475569; }
.light-theme #page-signals .sig-conf-bar { background: rgba(15,23,42,0.06); }
.light-theme #page-signals .sig-action-btn:hover { background: rgba(15,23,42,0.04); }

/* ────────────────────────────────────────────────────────────────
   8. WARMTH & POLISH — sutilezas finais
   ──────────────────────────────────────────────────────────────── */
#page-signals #signals-kpi-strip .kpi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(52,211,153,0.04), transparent 60%);
  pointer-events: none;
}
#page-signals .sig-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(52,211,153,0.025), transparent 70%);
  pointer-events: none;
}
#page-signals .sig-card.is-short::after {
  background: radial-gradient(circle at top right, rgba(251,113,133,0.025), transparent 70%);
}
#page-signals .sig-card.is-hold::after {
  background: radial-gradient(circle at top right, rgba(251,191,36,0.025), transparent 70%);
}