/* ══════════════════════════════════════════════════════════════════════════
   chartCompare.css — "Comparar 2 fechas" toggle button + breakdown popup
   Uses only WealthOS CSS variables, so it inherits light/dark automatically.
   All numbers use --font-mono (DM Mono) with tabular figures.

   Structure the popup follows:
     .cmp-head      eyebrow + title + span chip + close
     .cmp-hero      A → B totals and the headline delta block
     .cmp-insight   one-sentence takeaway callout
     .cmp-toolbar   row count + expandir todo
     .cmp-table     sortable breakdown, magnitude bars, drill-down rows, totals
   Below 620px the A/B columns collapse into an inline "A → B" line under each
   component name, so the table keeps 3 legible columns instead of scrolling.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar toggle (sits inside the chart's .tab-group) ─────────────────── */
.cmp-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  min-height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.cmp-btn-ic { display: inline-flex; }
.cmp-btn-ic svg { width: 13px; height: 13px; display: block; }
.cmp-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
.cmp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-btn--armed {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.cmp-btn--armed:hover { background: var(--accent); color: #fff; }

/* ── Transient hint pill (fallback when no page toast exists) ────────────── */
.cmp-hint {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 500;
}
.cmp-hint--show { opacity: 1; transform: translate(-50%, 0); }

/* Screen-reader-only text (skeleton status, etc.) */
.cmp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Overlay + modal ────────────────────────────────────────────────────── */
.cmp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.66);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 450;
}
:root[data-theme="light"] .cmp-overlay { background: rgba(23, 29, 49, 0.42); }

.cmp-modal {
  position: relative;
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 24px 64px rgba(0, 0, 0, 0.45);
  width: 100%;
  max-width: 820px;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Gradient hairline ring — same treatment as the .wm-card modal engine, so the
   comparison popup reads as part of the same family. */
.cmp-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--accent-glow), rgba(37,99,235, 0.10) 40%, var(--border) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* ── Motion (enter / exit / content swap) ───────────────────────────────── */
.cmp-overlay--open { display: flex; animation: cmp-fade-in 180ms ease-out both; }
.cmp-overlay--open .cmp-modal { animation: cmp-card-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.cmp-overlay--closing { animation: cmp-fade-out 140ms ease-in both; }
.cmp-overlay--closing .cmp-modal { animation: cmp-card-out 140ms ease-in both; }
/* Declared last so a re-paint (loading → data, re-sort) crossfades instead of
   replaying the entrance. */
.cmp-overlay--open .cmp-modal--swap { animation: cmp-swap 170ms ease-out both; }

@keyframes cmp-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmp-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cmp-card-in  { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes cmp-card-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.99); } }
@keyframes cmp-swap     { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes cmp-rowin    { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes cmp-shimmer  { to { background-position: 200% 0; } }

/* ── Head ───────────────────────────────────────────────────────────────── */
.cmp-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.cmp-head-titles { min-width: 0; flex: 1 1 auto; }
.cmp-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 6px;
}
.cmp-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}
.cmp-span {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 11px;
  white-space: nowrap;
}
.cmp-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.15s ease, background 0.15s ease;
}
.cmp-close svg { width: 17px; height: 17px; }
.cmp-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.cmp-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Hero: A → B totals + headline delta ────────────────────────────────── */
.cmp-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  padding: 18px 24px;
  background: var(--bg-panel-alt);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.cmp-heroline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 300px;
  min-width: 0;
}
.cmp-datecol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1 1 0;
}
.cmp-datetag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #fff;
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}
.cmp-datelabel { font-size: 11.5px; line-height: 1.3; color: var(--text-secondary); }
/* Left-align the total to match its label (overrides .cmp-num's right align). */
.cmp-datetotal {
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 500;
  text-align: left;
  letter-spacing: -0.3px;
}
.cmp-arrow {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  display: inline-flex;
  align-self: flex-end;
  padding-bottom: 6px;
}
.cmp-arrow svg { width: 18px; height: 18px; }

.cmp-totaldelta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  gap: 1px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.cmp-deltacap {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cmp-totaldelta-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cmp-trend { display: inline-flex; }
.cmp-trend svg { width: 16px; height: 16px; }
.cmp-totaldelta-pct { font-size: 12.5px; opacity: 0.9; }

/* ── Insight callout ────────────────────────────────────────────────────── */
.cmp-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 13px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--accent-dim);
  flex-shrink: 0;
}
.cmp-insight-ic { color: var(--accent-light); display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.cmp-insight-ic svg { width: 16px; height: 16px; }
.cmp-insight p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.cmp-insight strong { color: var(--text-primary); font-weight: 600; }

/* ── Table toolbar ──────────────────────────────────────────────────────── */
.cmp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  flex-shrink: 0;
}
.cmp-toolbar-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cmp-expandall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 5px 11px;
  min-height: 30px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.cmp-expandall:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--accent); }
.cmp-expandall:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-expandall[aria-pressed="true"] .cmp-chev { transform: rotate(90deg); }

/* ── Table ──────────────────────────────────────────────────────────────── */
.cmp-tablewrap {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--border-subtle);
  -webkit-overflow-scrolling: touch;
}
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.cmp-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  padding: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  z-index: 2;
}
.cmp-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 38px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cmp-table th.cmp-num-h .cmp-sort { justify-content: flex-end; }
.cmp-sort:hover { color: var(--text-secondary); }
.cmp-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cmp-sortic { display: inline-flex; opacity: 0; transition: opacity 0.15s ease; }
.cmp-sortic svg { width: 12px; height: 12px; }
.cmp-sort:hover .cmp-sortic { opacity: 0.5; }
.cmp-sort--active { color: var(--accent-light); }
.cmp-sort--active .cmp-sortic { opacity: 1; }

.cmp-table td, .cmp-table tfoot th {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.cmp-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
  color: var(--text-primary);
}
.cmp-c-name { text-align: left; color: var(--text-primary); }
.cmp-subpct { color: var(--text-tertiary); font-size: 11px; margin-left: 2px; }
.cmp-up   { color: var(--up); }
.cmp-down { color: var(--down); }
.cmp-dash { color: var(--text-tertiary); }

/* Magnitude bar behind the "Cambio en valor" cell — inherits the row's up/down
   colour via currentColor, so ranking is readable without adding a column. */
.cmp-c-delta { position: relative; isolation: isolate; }
.cmp-bar {
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  background: currentColor;
  opacity: 0.13;
  border-radius: 3px 0 0 3px;
  z-index: -1;
}
.cmp-cellv { position: relative; }

/* Group rows */
.cmp-grouprow > td { transition: background 0.15s ease; }
.cmp-grouprow:hover > td { background: var(--bg-hover); }
.cmp-grouprow--open > td { background: var(--bg-panel-alt); }
.cmp-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 3px 0;
  margin: -3px 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
}
.cmp-expand--static { cursor: default; }
.cmp-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-group-label { font-weight: 500; }
.cmp-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-tertiary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 99px;
  padding: 0 5px;
  line-height: 15px;
}
.cmp-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.cmp-chev svg { width: 13px; height: 13px; }
.cmp-chev--empty { visibility: hidden; }
.cmp-expand[aria-expanded="true"] .cmp-chev { transform: rotate(90deg); color: var(--accent-light); }

/* Item (drill-down) rows */
.cmp-itemrow > td { background: var(--bg-base); }
.cmp-itemrow .cmp-c-name { padding-left: 32px; }
.cmp-item-label { color: var(--text-secondary); }
.cmp-itemrow--in { animation: cmp-rowin 180ms ease-out both; animation-delay: var(--cmp-delay, 0ms); }

/* Totals row */
.cmp-totalrow > th, .cmp-totalrow > td {
  position: sticky;
  bottom: 0;
  background: var(--bg-panel-alt);
  border-top: 1px solid var(--border);
  border-bottom: none;
  font-weight: 600;
  z-index: 1;
}
.cmp-totalrow > .cmp-c-name { text-align: left; font-size: 12px; letter-spacing: 0.3px; }

/* Inline "A → B" line — desktop hides it, narrow screens promote it. */
.cmp-ab {
  display: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Badges */
.cmp-badge {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 99px;
  vertical-align: middle;
  text-transform: uppercase;
}
.cmp-badge--new   { background: var(--up-dim);   color: var(--up); }
.cmp-badge--gone  { background: var(--down-dim); color: var(--down); }
.cmp-badge--approx{ background: var(--bg-panel-alt); color: var(--text-tertiary); }
.cmp-approx { color: var(--text-tertiary); }

/* ── Loading skeleton ───────────────────────────────────────────────────── */
.cmp-sk {
  display: block;
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 37%, var(--bg-hover) 63%);
  background-size: 200% 100%;
  animation: cmp-shimmer 1.3s linear infinite;
}
.cmp-hero--sk .cmp-datecol { gap: 8px; }
.cmp-hero--sk .cmp-sk:last-child { height: 20px; }
.cmp-skbody { padding: 16px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.cmp-skrow { display: flex; align-items: center; gap: 14px; }
.cmp-skrow .cmp-sk:first-child { margin-right: auto; }

/* ── Empty / error states ───────────────────────────────────────────────── */
.cmp-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 52px 24px 56px;
}
.cmp-state-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-panel-alt);
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.cmp-state-ic svg { width: 21px; height: 21px; }
.cmp-state-ic--error { background: var(--down-dim); color: var(--down); }
.cmp-state-title { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-primary); }
.cmp-state-sub { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); max-width: 38ch; }
.cmp-retry {
  margin-top: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  min-height: 40px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cmp-retry:hover { filter: brightness(1.1); }
.cmp-retry:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* ── Narrow screens: collapse the A/B columns into an inline line ────────── */
@media (max-width: 620px) {
  .cmp-c-a, .cmp-c-b { display: none; }
  .cmp-ab { display: block; }
  .cmp-itemrow .cmp-ab { padding-left: 0; }
}

/* ── Phones (≤ 480px, target 380px): bottom sheet ───────────────────────── */
@media (max-width: 480px) {
  .cmp-overlay { padding: 0; align-items: flex-end; }
  .cmp-modal {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .cmp-overlay--open .cmp-modal { animation-name: cmp-sheet-in; }
  .cmp-overlay--closing .cmp-modal { animation-name: cmp-sheet-out; }
  /* Grab handle — signals the sheet affordance. */
  .cmp-modal::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--border);
    z-index: 4;
  }
  .cmp-head { padding: 22px 16px 14px; }
  .cmp-title { font-size: 21px; }
  .cmp-hero { padding: 14px 16px; gap: 12px; }
  .cmp-heroline { flex: 1 1 100%; gap: 12px; }
  .cmp-datetotal { font-size: 17px; }
  .cmp-totaldelta {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .cmp-deltacap { margin-right: auto; align-self: center; }
  .cmp-totaldelta-val { font-size: 19px; }
  .cmp-insight, .cmp-toolbar { padding-left: 16px; padding-right: 16px; }
  .cmp-table { font-size: 12.5px; }
  .cmp-sort { padding: 11px 12px; }
  .cmp-table td, .cmp-table tfoot th { padding: 10px 12px; }
  .cmp-itemrow .cmp-c-name { padding-left: 24px; }
  /* Comfortable touch targets on the two things you actually tap. */
  .cmp-close { width: 44px; height: 44px; }
  .cmp-expand { min-height: 32px; padding: 7px 0; margin: -7px 0; }
  .cmp-expandall { min-height: 40px; padding: 8px 14px; }
}

@keyframes cmp-sheet-in  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cmp-sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px); } }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cmp-overlay--open,
  .cmp-overlay--open .cmp-modal,
  .cmp-overlay--closing,
  .cmp-overlay--closing .cmp-modal,
  .cmp-overlay--open .cmp-modal--swap,
  .cmp-itemrow--in,
  .cmp-sk {
    animation: none !important;
  }
  .cmp-sk { background: var(--bg-hover); }
  .cmp-chev, .cmp-grouprow > td, .cmp-hint { transition: none; }
}