/* ==========================================================
   Neural Frontier — global-risk.css
   Global Risk Engine: Event -> Risk -> Transmission -> Impact -> Market.
   Misma superficie que el resto de la app (.ag-panel, .bg-card, --border),
   sin cristal, sin neon, sin sombras — mas terminal, menos dashboard SaaS.
   ========================================================== */

.gre-section {
  padding: 14px 18px 32px;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gre-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
}

.gre-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.gre-panel-title {
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-secondary);
}
.gre-panel-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.gre-panel-body { padding: 11px 12px; min-width: 0; }
/* Chart.js con maintainAspectRatio:false necesita un contenedor con altura
   resuelta, o se colapsa a la altura minima del canvas. Con `flex:1` la
   altura la marca la fila del grid (que se estira para igualar al panel de
   al lado), asi que el grafico llena su recuadro en vez de dejar hueco
   debajo. El canvas va en absolute para que su tamaño no realimente la
   altura del contenedor (el bucle clasico de Chart.js responsive). */
.gre-history .gre-panel-body { flex: 1 1 auto; min-height: 190px; position: relative; }
.gre-history .gre-panel-body > canvas { position: absolute; inset: 11px 12px; }

.gre-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 1100px) { .gre-row-2 { grid-template-columns: 1fr; } }

/* ---------- 1. Cabecera ---------- */
.gre-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.gre-score-block { display: flex; flex-direction: column; gap: 9px; }
.gre-eyebrow {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.gre-score-row { display: flex; align-items: center; gap: 16px; }

.gre-gauge { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.gre-gauge svg { display: block; }
.gre-gauge-track { stroke: var(--border-subtle); }
.gre-gauge-fill { transition: stroke-dasharray var(--dur-slow) ease, stroke var(--dur-slow) ease; }
.gre-gauge-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.gre-gauge-num {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.gre-score-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gre-score-num-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gre-score-num {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.gre-score-scale { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.gre-level-badge {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.gre-delta-row { display: flex; align-items: center; gap: 10px; }
.gre-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.gre-updated { font-size: 10.5px; color: var(--text-secondary); }
.gre-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  font-style: italic;
  max-width: 78ch;
}
.gre-partial-note {
  font-size: 10.5px;
  color: var(--text-secondary);
  border-left: 2px solid var(--warning);
  padding-left: 8px;
}

/* ---------- 2. Drivers ---------- */
.gre-driver-row {
  display: grid;
  grid-template-columns: 110px 1fr 92px 50px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.gre-driver-row:last-child { border-bottom: none; }
.gre-driver-name { font-size: 11.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gre-driver-name-na { color: var(--text-secondary); }
.gre-driver-track {
  height: 5px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.gre-driver-fill { height: 100%; border-radius: 3px; transition: width var(--dur-slow) ease; }
.gre-driver-score {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-align: right;
  white-space: nowrap;
}
.gre-driver-score-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.gre-driver-trend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ---------- 3. Mapa de transmision ---------- */
.gre-map-panel { min-height: 0; }
.gre-map-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gre-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--text-secondary); }
.gre-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gre-legend-type {
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 4px;
}

/* El mapa mantiene su tamano de pixeles nativo y el contenedor hace scroll
   horizontal en vez de encoger el SVG — con 7 nodos por fila, encogerlo para
   caber en un panel estrecho dejaria el texto ilegible. */
.gre-map-body { padding: 6px 4px 10px; overflow-x: auto; }
.gre-map-svg {
  display: block;
  font-family: var(--font-mono);
  max-width: none;
}
.gre-map-hint {
  font-size: 9.5px;
  color: var(--text-secondary);
  padding: 6px 10px 0;
}

/* Nodos y conexiones (contenido generado en JS, clases aplicadas aqui) */
.gre-node-box { cursor: pointer; }
.gre-node-box rect { transition: stroke-width 120ms ease; }
.gre-node-box:hover rect { stroke-width: 2; }
.gre-node-type {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.05em;
  fill: var(--text-muted);
}
.gre-node-label {
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--text-primary);
}
.gre-node-value {
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  fill: var(--text-secondary);
}
.gre-edge-path { fill: none; }
.gre-chain-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  fill: var(--text-secondary);
  text-transform: uppercase;
  cursor: help;
}

/* ---------- 4. Market Impact ---------- */
.gre-impact-row {
  display: grid;
  grid-template-columns: 1fr 70px 90px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.gre-impact-row:last-child { border-bottom: none; }
.gre-impact-sector { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gre-impact-name { font-size: 11px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gre-impact-etf { font-family: var(--font-mono); font-size: 9px; color: var(--text-secondary); }
.gre-impact-expect {
  font-size: 9.5px;
  text-align: center;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.gre-impact-actual {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. Why is risk moving ---------- */
.gre-why-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
}
.gre-why-arrow { color: var(--text-muted); }
.gre-why-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
}
.gre-why-delta { font-family: var(--font-mono); font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; }
.gre-why-label { color: var(--text-primary); }
.gre-why-empty { font-size: 11.5px; color: var(--text-secondary); }

/* ---------- 10. Event timeline ---------- */
.gre-tl-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}
.gre-tl-item:last-child { border-bottom: none; }
.gre-tl-item:hover { background: var(--surface-hover); }
.gre-tl-date {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-secondary);
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.gre-tl-time { font-size: 8.5px; color: var(--text-muted); }
.gre-tl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gre-tl-title { font-size: 11px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gre-tl-meta { display: flex; align-items: center; gap: 6px; }
.gre-tl-sev {
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 5px;
  border-radius: 2px;
}
.gre-tl-country { font-size: 9.5px; color: var(--text-secondary); }

/* ---------- Sources + Methodology ---------- */
.gre-foot { flex-direction: row; }
.gre-foot-col { flex: 1; min-width: 0; padding: 11px 12px; }
/* Fuentes son 5 lineas cortas y Metodologia cinco parrafos: dandole a
   Fuentes el ancho justo, el hueco vacio a su lado deja de ser media
   columna y la prosa de Metodologia gana el sitio que necesita. */
.gre-foot-col:first-child { flex: 0 0 clamp(200px, 26%, 300px); }
.gre-foot-col + .gre-foot-col { border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .gre-foot { flex-direction: column; }
  .gre-foot-col + .gre-foot-col { border-left: none; border-top: 1px solid var(--border); }
}
.gre-sources { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.gre-source-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 10.5px; }
.gre-source-name { color: var(--text-primary); }
.gre-source-status { font-family: var(--font-mono); font-size: 9.5px; }
.gre-methodology { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.gre-methodology p { font-size: 10.5px; line-height: 1.55; color: var(--text-secondary); }
.gre-methodology b { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* ---------- Empty / degraded states ---------- */
.gre-empty { font-size: 11.5px; color: var(--text-secondary); padding: 6px 0; }

/* ---------- Panel de detalle (drawer lateral) ---------- */
.gre-detail-panel { position: fixed; inset: 0; z-index: 2001; pointer-events: none; }
.gre-detail-panel:not([hidden]) { pointer-events: auto; }
.gre-detail-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 200ms ease;
}
.gre-detail-panel:not([hidden]) .gre-detail-overlay { opacity: 1; }

.gre-detail-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.gre-detail-panel:not([hidden]) .gre-detail-drawer { transform: translateX(0); }

.gre-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.gre-detail-title { font-size: 13px; font-weight: var(--fw-bold); color: var(--text-primary); }
.gre-detail-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.gre-detail-close:hover { background: var(--surface-hover); color: var(--text-primary); }
.gre-detail-body { padding: 16px; overflow-y: auto; flex: 1; }

.gre-detail-chain { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.gre-detail-node {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
}
.gre-detail-node-dot { width: 9px; height: 9px; border-radius: 50%; }
.gre-detail-node-label { font-size: 12px; color: var(--text-primary); }
.gre-detail-node-type { font-size: 8.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.gre-detail-node-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); text-align: right; }
.gre-detail-connector { grid-column: 1; width: 1px; height: 14px; background: var(--border); margin-left: 4px; }

.gre-detail-field { margin-bottom: 12px; }
.gre-detail-field-label { font-size: 9.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 3px; display: block; }
.gre-detail-field-value { font-size: 12.5px; color: var(--text-primary); line-height: 1.5; }
.gre-detail-source-link { font-size: 11px; color: var(--accent); text-decoration: none; }
.gre-detail-source-link:hover { text-decoration: underline; }