/* ══════════════════════════════════════════════════════════════
   WealthOS — Risk-vs-return explorer
   Fondos · acciones · cripto on ONE scatter (volatilidad ↔ rendimiento).
   Makes the tradeoff legible; never declares a winner.
   CSS variables only; theme-aware (dark + light).
════════════════════════════════════════════════════════════════ */

:root {
  /* Categorical palette — one hue per asset type (3-colour legend). */
  --rr-accion:   #3B82F6;  /* blue   */
  --rr-fondo:    #14b8a6;  /* teal   */
  --rr-cripto:   #f472b6;  /* pink   */
  /* References — muted, drawn dashed. */
  --rr-cetes:    #94a3b8;
  --rr-inflacion:#cb8f8f;
  --rr-dim:      #94a3b8;
  --rr-grid:     rgba(148, 163, 184, .16);
}
:root[data-theme="light"] {
  --rr-accion:   #2563EB;
  --rr-fondo:    #0d9488;
  --rr-cripto:   #db2777;
  --rr-cetes:    #64748b;
  --rr-inflacion:#b06a6a;
  --rr-dim:      #64748b;
  --rr-grid:     rgba(100, 116, 139, .18);
}

/* ── Side-by-side explorers row (bottom of the Resumen tab) ─────────────── */
.rr-explorers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;   /* each card grows independently when expanded */
}
.rr-explorers > .panel { margin: 0; }
@media (max-width: 900px) {
  .rr-explorers { grid-template-columns: 1fr; }
}

/* ── Controls ───────────────────────────────────────────────────────────── */
.rr-controls { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.rr-controls__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.rr-control-group { display: flex; align-items: center; gap: .5rem; }
.rr-control-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.rr-segmented {
  display: inline-flex; background: var(--bg-panel-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 2px; gap: 2px; flex-wrap: wrap;
}
.rr-seg-btn {
  border: 0; background: transparent; color: var(--text-secondary);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em;
  padding: .32rem .6rem; border-radius: 6px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rr-seg-btn:hover { color: var(--text-primary); }
.rr-seg-btn--active { background: var(--accent); color: #fff; }

/* ── Scatter (hero) ─────────────────────────────────────────────────────── */
.rr-scatter { margin-bottom: .4rem; }
.rr-scatter__head { display: flex; justify-content: flex-start; margin-bottom: .3rem; }
.rr-scatter__hint { font-size: .68rem; color: var(--text-tertiary); font-style: italic; }
.rr-scatter__scroll { width: 100%; overflow-x: auto; }
.rr-scatter__canvas { position: relative; width: 100%; height: var(--rr-chart-h, 340px); }
.rr-scatter__canvas canvas { min-width: 100%; }

/* ── Legend + comparability note ────────────────────────────────────────── */
.rr-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.rr-legend__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg-panel-alt); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: .26rem .6rem; font-size: .7rem; color: var(--text-secondary);
}
.rr-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rr-legend__dash { width: 14px; height: 0; border-top: 2px dashed currentColor; flex: 0 0 auto; }
.rr-legend__chip--ref { color: var(--text-tertiary); }
.rr-compare-note { margin: .55rem 0 0; font-size: .68rem; color: var(--text-tertiary); line-height: 1.45; }

/* ── Insight ────────────────────────────────────────────────────────────── */
.rr-insight {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: .9rem; padding: .7rem .85rem;
  background: var(--accent-dim); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); font-size: .8rem; color: var(--text-primary); line-height: 1.45;
}
.rr-insight__icon { color: var(--accent); flex: 0 0 auto; }

/* ── Ranked list ────────────────────────────────────────────────────────── */
.rr-list { margin-top: 1.1rem; }
.rr-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.rr-filter {
  border: 1px solid var(--border); background: var(--bg-panel-alt);
  color: var(--text-secondary); font-size: .7rem; padding: .26rem .6rem;
  border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.rr-filter:hover { color: var(--text-primary); }
.rr-filter--active { background: var(--accent); border-color: var(--accent); color: #fff; }

.rr-table { display: flex; flex-direction: column; }
.rr-table__head, .rr-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) .9fr 1.1fr .9fr .8fr;
  align-items: center; gap: .5rem;
  padding: .5rem .3rem;
}
.rr-table__head { border-bottom: 1px solid var(--border); }
.rr-th { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.rr-th--num { text-align: right; }
.rr-row {
  border-bottom: 1px solid var(--border-subtle); cursor: pointer;
  transition: background .12s ease;
}
.rr-row:hover { background: var(--bg-panel-alt); }
.rr-row--fit .rr-row__label { color: var(--text-primary); font-weight: 600; }
.rr-row:not(.rr-row--fit) { opacity: .72; }

.rr-td { font-size: .8rem; color: var(--text-secondary); }
.rr-td--name { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.rr-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.rr-row__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rr-row__type {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 5px; border-radius: 4px; background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle); color: var(--text-tertiary); flex: 0 0 auto;
}
.rr-row__flag {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 5px; border-radius: 4px; background: var(--warn); color: #1a1200;
  font-weight: 600; flex: 0 0 auto;
}
:root[data-theme="light"] .rr-row__flag { color: #3a2a00; }
.rr-td--num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rr-td--vol { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.rr-vol-val { font-family: var(--font-mono); }
.rr-td--ra { font-weight: 600; color: var(--text-primary); }
.rr-up { color: var(--up); }
.rr-down { color: var(--down); }

/* Risk-band chip */
.rr-band {
  font-size: .56rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 5px; border-radius: 4px; font-weight: 600; white-space: nowrap;
}
.rr-band--muy_bajo { background: rgba(20, 184, 166, .18); color: #0d9488; }
.rr-band--bajo     { background: rgba(34, 197, 94, .18);  color: #16a34a; }
.rr-band--medio    { background: rgba(234, 179, 8, .18);  color: #b78a00; }
.rr-band--alto     { background: rgba(249, 115, 22, .18); color: #ea580c; }
.rr-band--muy_alto { background: rgba(244, 63, 94, .18);  color: #e11d48; }
:root[data-theme="dark"] .rr-band--muy_bajo { color: #2dd4bf; }
:root[data-theme="dark"] .rr-band--bajo     { color: #4ade80; }
:root[data-theme="dark"] .rr-band--medio    { color: #facc15; }
:root[data-theme="dark"] .rr-band--alto     { color: #fb923c; }
:root[data-theme="dark"] .rr-band--muy_alto { color: #fb7185; }

.rr-list__help { margin: .6rem 0 0; font-size: .66rem; color: var(--text-tertiary); line-height: 1.45; }

/* ── Excluded + footer ──────────────────────────────────────────────────── */
.rr-excluded {
  margin-top: .85rem; padding: .55rem .7rem;
  background: var(--bg-panel-alt); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); font-size: .7rem; color: var(--text-tertiary); line-height: 1.45;
}
.rr-excluded__icon { margin-right: .25rem; }
.rr-footer { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border-subtle); }
.rr-footer__note { margin: 0 0 .4rem; font-size: .66rem; color: var(--text-tertiary); line-height: 1.45; }
.rr-footer__disc { margin: 0; font-size: .66rem; color: var(--text-tertiary); font-style: italic; line-height: 1.45; }
.rr-state { padding: 1.6rem; text-align: center; color: var(--text-tertiary); font-size: .82rem; line-height: 1.5; }

/* ── Responsive: 380px pass ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .rr-scatter__canvas { --rr-chart-h: 300px; }
  .rr-scatter__canvas canvas { min-width: 460px; } /* legible → scrolls */
  .rr-table__head { display: none; }
  .rr-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name ret"
      "vol  ra";
    row-gap: .3rem;
  }
  .rr-td--name { grid-area: name; }
  .rr-row > .rr-up, .rr-row > .rr-down:not(.rr-td--vol) { }
  .rr-td--name + .rr-td { grid-area: ret; }
  .rr-td--vol { grid-area: vol; justify-content: flex-start; }
  .rr-td--ra { grid-area: ra; }
  /* hide max-drawdown column on very small screens (kept in tooltip) */
  .rr-row > .rr-td:nth-child(4) { display: none; }
  .rr-controls__row { gap: .6rem; }
}