/* Finanzas · Guille Quintero — hoja de estilos
   Mismo sistema de diseño que el dashboard Performance de C-Tech (tokens, tipografía Work Sans + JetBrains Mono,
   layout topbar + barra lateral 248 px, tarjetas auth, stats/KPIs, tablas). Solo cambian el logo y el nombre del producto.
   Sin estilos en línea: la CSP del panel no permite style="". */

:root {
  --font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;

  --surface-canvas: #fff; --surface-base: #fafafa; --surface-sunken: #f5f5f5; --surface-selected: #eefbe6;
  --text-primary: #171717; --text-secondary: #525252; --text-muted: #5a5a5a; --text-brand: #2c6b1a;
  --border-subtle: #e5e5e5; --border-strong: #d4d4d4; --border-control: #858585; --divider: #ededed;
  --action: #38861e; --action-hover: #2c6b1a; --action-fg: #fff; --brand: #7ddd50;
  --pnl-up: #157f3c; --pnl-down: #c82323; --up-bg: #eef9f1; --down-bg: #fdf0f0; --up-bd: #9fd5b0; --down-bd: #e6a5a5;
  --warn: #a44c08; --warn-bg: #fdf4ec; --warn-bd: #e2bd9d;
  --err-bg: #fdf0f0; --err-bd: #e6a5a5; --err-fg: #8f1a1a;
  --ok-bg: #eef9f1; --ok-bd: #9fd5b0; --ok-fg: #0f5c2b;
  --info-bg: #f0f5ff; --info-bd: #b6c9f4; --info-fg: #1b4cb5;
  --chart-ink: #171717; --chart-fill: #f5f5f5; --chart-grid: #ededed; --chart-label: #5a5a5a; --chart-end: #38861e;
  --avatar-bg: #d6f5c3; --avatar-fg: #2c6b1a;
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06); --shadow: 0 4px 12px rgba(10,10,10,.08); --shadow-lg: 0 12px 32px rgba(10,10,10,.12);
  --sel-ring: #38861e;
  --c1: #38861e; --c2: #1b4cb5; --c3: #a44c08; --c4: #6b3fb0; --c5: #525252; --c6: #0e7490;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --surface-canvas: #0f0f0f; --surface-base: #141414; --surface-sunken: #1c1c1c; --surface-selected: #14330d;
  --text-primary: #e5e5e5; --text-secondary: #b0b0b0; --text-muted: #999999; --text-brand: #93dd6a;
  --border-subtle: #262626; --border-strong: #333; --border-control: #707070; --divider: #232323;
  --action: #7ddd50; --action-hover: #93dd6a; --action-fg: #0a0a0a;
  --pnl-up: #5ac878; --pnl-down: #f26d6d; --up-bg: #0f2a18; --down-bg: #331313; --up-bd: #2f6a45; --down-bd: #7a2d2d;
  --warn: #f0a56a; --warn-bg: #33200f; --warn-bd: #6b4a28;
  --err-bg: #331313; --err-bd: #7a2d2d; --err-fg: #f6b1b1;
  --ok-bg: #0f2a18; --ok-bd: #2f6a45; --ok-fg: #9be3b2;
  --info-bg: #121e3a; --info-bd: #2d4a8f; --info-fg: #a9c1f5;
  --chart-ink: #e5e5e5; --chart-fill: #1c1c1c; --chart-grid: #262626; --chart-label: #a3a3a3; --chart-end: #7ddd50;
  --avatar-bg: #14330d; --avatar-fg: #93dd6a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --sel-ring: #7ddd50;
  --c1: #7ddd50; --c2: #7aa2f7; --c3: #f0a56a; --c4: #c58bff; --c5: #b0b0b0; --c6: #4fd1e6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  background: var(--surface-canvas); color: var(--text-primary); font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--text-brand); }
.mono { font-family: var(--font-mono); }
.hidden, [hidden] { display: none !important; }
.sprite { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--sel-ring); outline-offset: 2px; }
.up { color: var(--pnl-up); } .down { color: var(--pnl-down); }

/* ---------- Pantallas de acceso ---------- */
.auth { background: var(--surface-base); padding: var(--sp-12) var(--sp-6); display: flex; justify-content: center; align-items: center; min-height: 100vh; position: relative; }
.auth-tools { position: absolute; top: var(--sp-4); right: var(--sp-4); display: flex; gap: var(--sp-2); align-items: center; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm); }
.logo { height: 24px; width: auto; display: block; margin: 0 0 var(--sp-6); }
.auth-card .logo { height: 40px; }
:root[data-theme="dark"] .logo.l, :root:not([data-theme="dark"]) .logo.d { display: none; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 var(--sp-2); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 1.2; margin: 0 0 var(--sp-2); font-weight: 600; }
h3 { font-size: 16px; margin: 0 0 var(--sp-2); font-weight: 600; }
.sub { color: var(--text-secondary); margin: 0 0 var(--sp-6); }
.field { margin-bottom: var(--sp-4); }
label, .lab { display: block; font-size: 13px; font-weight: 500; margin-bottom: var(--sp-1); }
.hint { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); }
.input, .select { width: 100%; height: 44px; border: 1px solid var(--border-control); border-radius: var(--radius); padding: 0 var(--sp-3); background: var(--surface-canvas); color: var(--text-primary); }
.input:focus, .select:focus { outline: 2px solid var(--sel-ring); outline-offset: 0; border-color: var(--sel-ring); }
.input::placeholder { color: var(--text-muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-5); border-radius: var(--radius); border: 1px solid var(--action); background: var(--action); color: var(--action-fg); font-weight: 600; cursor: pointer; text-decoration: none; width: 100%; }
.btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.sec { background: var(--surface-canvas); color: var(--text-primary); border-color: var(--border-control); }
.btn.sec:hover { background: var(--surface-sunken); }
.btn.sm { height: 36px; padding: 0 var(--sp-3); width: auto; font-size: 13px; }
.alert { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid; font-size: 13px; margin-bottom: var(--sp-4); text-align: left; align-items: flex-start; }
.alert .i { margin-top: 2px; }
.alert.err { border-color: var(--err-bd); background: var(--err-bg); color: var(--err-fg); }
.alert.info { border-color: var(--info-bd); background: var(--info-bg); color: var(--info-fg); }
.alert.warn { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn); }
.alert strong { display: block; }
.alert.main-alert { margin: 0; }
.login-foot { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--divider); font-size: 12px; color: var(--text-muted); }

/* ---------- Barra superior y menú de usuario ---------- */
.topbar { height: 56px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6); gap: var(--sp-4); background: var(--surface-canvas); position: sticky; top: 0; z-index: 30; }
.topbar .brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.topbar .logo { margin: 0; height: 28px; }
.topbar .prod { font-weight: 600; font-size: 15px; padding-left: var(--sp-3); border-left: 1px solid var(--border-strong); }
.topbar .r { display: flex; align-items: center; gap: var(--sp-4); }
.theme { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--radius); overflow: hidden; }
.theme button { width: 36px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--text-secondary); }
.theme button + button { border-left: 1px solid var(--border-control); }
.theme button[aria-pressed="true"] { background: var(--surface-selected); color: var(--text-brand); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-fg); display: grid; place-items: center; font-weight: 600; font-size: 12px; overflow: hidden; flex: none; }
.uwrap { position: relative; }
.ubtn { display: flex; align-items: center; gap: var(--sp-2); background: transparent; border: 0; cursor: pointer; color: var(--text-primary); padding: 2px var(--sp-1); border-radius: var(--radius); }
.ubtn:hover { background: var(--surface-sunken); }
.umenu { position: absolute; right: 0; top: 44px; z-index: 40; min-width: 244px; background: var(--surface-canvas); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2); display: none; }
.umenu.on { display: block; }
.umenu .who { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--divider); margin-bottom: var(--sp-1); }
.umenu .who b { display: block; font-size: 14px; } .umenu .who span { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.umenu form { margin: 0; }
.umenu .mi { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-sm); color: var(--text-primary); text-align: left; font-size: 14px; }
.umenu .mi:hover { background: var(--surface-sunken); }

/* ---------- Estructura del panel ---------- */
.dash { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 56px); align-items: start; }
.side { border-right: 1px solid var(--divider); padding: var(--sp-5) var(--sp-4); background: var(--surface-base); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; }
.side-h { display: flex; align-items: center; justify-content: space-between; }
.navclose, .navbtn { display: none; }
.side .cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 var(--sp-2) var(--sp-1); }
.track { display: flex; flex-direction: column; gap: var(--sp-2); }
.acc { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); cursor: pointer; color: var(--text-primary); text-decoration: none; }
.acc:hover { background: var(--surface-sunken); }
.acc.sel { background: var(--surface-selected); border-left-color: var(--sel-ring); }
.acc .ni { margin-top: 2px; width: 18px; height: 18px; color: var(--text-secondary); }
.acc.sel .ni { color: var(--text-brand); }
.acc .tt { display: block; min-width: 0; }
.acc .t { font-weight: 600; font-size: 14px; display: block; }
.acc .m { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.side .sp { flex: 1; }
.side .sup { font-size: 12px; color: var(--text-muted); padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--divider); }
.main { padding: var(--sp-6) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; max-width: 1280px; }
.head { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; }
.head h1 { font-size: 24px; }
.head .sub { margin: 0; }
.ctrls { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.sg { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--radius); overflow: hidden; background: var(--surface-canvas); }
.sg button { height: 38px; border: 0; background: transparent; padding: 0 var(--sp-3); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.sg button + button { border-left: 1px solid var(--border-control); }
.sg button[aria-pressed="true"] { background: var(--surface-selected); color: var(--text-brand); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.stat { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
.stat + .stat { padding-left: var(--sp-5); border-left: 1px solid var(--divider); }
.stat .k { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.stat .v { font-size: 28px; line-height: 1.2; font-weight: 600; }
.stat .s { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); }
.sec-h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.sec-h h2 { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--divider); border: 1px solid var(--divider); border-radius: var(--radius-lg); overflow: hidden; }
.kpi { background: var(--surface-canvas); padding: var(--sp-4); }
.kpi .k { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.kpi .v { font-size: 24px; line-height: 1.2; font-weight: 600; }
.kpi .s { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); }
.chartbox { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5) var(--sp-3); position: relative; min-width: 0; }
svg.ch { width: 100%; height: auto; display: block; }
svg.ch .g { stroke: var(--chart-grid); } svg.ch .tx { fill: var(--chart-label); font-size: 12px; }
svg.ch .ln { fill: none; stroke: var(--chart-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg.ch .ar { fill: var(--chart-fill); } svg.ch .end { fill: var(--chart-end); }
svg.ch .track-ring { fill: none; stroke: var(--surface-sunken); stroke-width: 22; }
svg.ch .seg { fill: none; stroke-width: 22; }
svg.ch .c-v { fill: var(--text-primary); font-size: 18px; font-weight: 600; text-anchor: middle; }
svg.ch .c-l { fill: var(--chart-label); font-size: 12px; text-anchor: middle; }
.c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); } .c4 { --c: var(--c4); } .c5 { --c: var(--c5); } .c6 { --c: var(--c6); }
svg.ch .seg { stroke: var(--c); }
.sample { position: absolute; top: var(--sp-3); right: var(--sp-4); font-size: 12px; font-weight: 600; border: 1px solid var(--border-control); border-radius: var(--radius-pill); padding: 1px var(--sp-2); background: var(--surface-canvas); color: var(--text-secondary); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.alloc { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.donut { width: 190px; flex: none; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); flex: 1; min-width: 140px; font-size: 13px; }
.legend li { display: flex; align-items: center; gap: var(--sp-2); }
.legend .pct { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.sw { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.bar-row + .bar-row { margin-top: var(--sp-3); }
.bar-row .meta { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: 13px; margin-bottom: var(--sp-1); }
.bar-row .meta span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.bar-fill { height: 100%; background: var(--action); border-radius: inherit; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 12px; color: var(--text-secondary); font-weight: 600; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
td { padding: var(--sp-3); border-bottom: 1px solid var(--divider); }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
td small { display: block; color: var(--text-muted); font-size: 12px; }
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; border-radius: var(--radius-pill); padding: 2px var(--sp-2); border: 1px solid var(--border-strong); background: var(--surface-canvas); color: var(--text-secondary); white-space: nowrap; }
.chip.ok { color: var(--pnl-up); border-color: var(--up-bd); background: var(--up-bg); }
.chip.wait { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }
.risk { font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--divider); padding-top: var(--sp-4); }
.muted { color: var(--text-muted); }
.mt { margin-top: var(--sp-5); }
.sub.small { font-size: 12px; margin: var(--sp-3) 0 0; color: var(--text-muted); }
#dividendos h3 { margin-bottom: var(--sp-2); }
#dividendos .chartbox h3 { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
#dividendos .stats { margin-bottom: 0; }
svg.ch .bs { fill: var(--c); }
.legend.inline { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); }
.legend.inline li { flex: none; }

/* ---------- Tablet ---------- */
@media (min-width: 761px) and (max-width: 1040px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: var(--sp-3) 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--divider); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2, .cards3, .idea-grid { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .navbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--surface-canvas); color: var(--text-primary); cursor: pointer; flex: none; }
  .navbtn:hover { background: var(--surface-sunken); }
  .navbtn .i { width: 22px; height: 22px; }
  .navclose { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; border-radius: var(--radius); }
  .navclose:hover { background: var(--surface-sunken); }
  /* barra lateral como cajón: fuera de pantalla, sin foco y sin lectura hasta abrirla */
  .side { position: fixed; top: 56px; left: 0; bottom: 0; height: auto; width: min(320px, 86vw); z-index: 50; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; border-right: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); padding: var(--sp-3) var(--sp-3) var(--sp-5); }
  .side.open { transform: none; visibility: visible; transition: transform .2s ease; }
  .side .sup { display: block; }
  .side .sp { display: block; }
  .acc { min-height: 48px; align-items: center; }
  .acc .m { display: block; }
  .scrim { position: fixed; inset: 56px 0 0 0; z-index: 45; background: rgba(0, 0, 0, .45); }
  body.nav-open { overflow: hidden; }
  .main { padding: var(--sp-4); }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: var(--sp-3) 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--divider); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 20px; }
  .grid2, .score-grid, .cards3, .idea-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .topbar .prod, .hide-m { display: none; }
  .topbar .brand { margin-right: auto; }
  .topbar .r { gap: var(--sp-2); }
  .auth { padding: var(--sp-6) var(--sp-4); }
  .auth-card { padding: var(--sp-5); }
  .head h1 { font-size: 20px; }
  input, select, textarea, .input, .select { font-size: 16px; }
  .sg button { height: 44px; min-width: 44px; }
  .theme button { min-height: 40px; min-width: 40px; }
  .brand { min-height: 44px; }
  .ubtn { min-height: 44px; }
  .umenu { right: -8px; }
  .chartbox, .card { padding: var(--sp-3); }
  .alloc { justify-content: center; }
  .rep-bar { flex-direction: column; align-items: stretch; }
  .rep-bar .sg { display: flex; flex-wrap: wrap; }
  .rep-bar .sg button { flex: 1 1 auto; }
  .kv { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- Vistas, tarjetas y análisis ---------- */
.view { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.view[hidden] { display: none !important; }
.main #view-title:focus { outline: none; }
.lnk { font-size: 13px; font-weight: 500; }
.card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--surface-canvas); min-width: 0; }
.card h3 { margin: 0 0 var(--sp-3); }
.card h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.card .sec-h h3 { margin: 0; }
.card-list { display: grid; gap: var(--sp-4); max-width: 720px; }
.card .sub { margin-bottom: var(--sp-3); }
.card .sub.small { margin: var(--sp-3) 0 0; }
.cap2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.lead { font-size: 18px; line-height: 1.45; margin: 0 0 var(--sp-2); font-weight: 500; }
.lead.sm { font-size: 15px; font-weight: 400; }
.hero { background: var(--surface-selected); border-color: var(--up-bd); }
.grid2.top2 { align-items: start; }
.an-body { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.rep-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rep-date { font-size: 12px; }
.alert.disc { margin: 0; }
.sum-card .lead { margin-bottom: var(--sp-3); }
.mini-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.mini { display: flex; flex-direction: column; border-left: 3px solid var(--border-strong); padding-left: var(--sp-3); }
.mini .k { font-size: 12px; color: var(--text-secondary); }
.mini .v { font-size: 20px; font-weight: 600; }
.mini .s { font-size: 12px; color: var(--text-muted); }
@media (max-width: 760px) { .mini-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.score { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-4); background: var(--surface-canvas); min-width: 0; }
.score .k { font-size: 12px; color: var(--text-secondary); }
.score .big { font-size: 30px; font-weight: 600; line-height: 1.2; margin: var(--sp-1) 0 var(--sp-2); }
.score .big small { font-size: 14px; color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.score .s { margin: var(--sp-2) 0; }
.score .d { font-size: 12px; color: var(--text-secondary); margin: 0; }
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.meter-fill { height: 100%; border-radius: inherit; background: var(--action); }
.meter-fill.tone-good { background: var(--pnl-up); } .meter-fill.tone-mid { background: var(--warn); } .meter-fill.tone-bad { background: var(--pnl-down); } .meter-fill.tone-neutral { background: var(--border-control); }
.chip.lvl-good { color: var(--pnl-up); border-color: var(--up-bd); background: var(--up-bg); }
.chip.lvl-mid { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }
.chip.lvl-bad { color: var(--pnl-down); border-color: var(--down-bd); background: var(--down-bg); }
.chip.act { font-weight: 600; }
.chip.act-aumentar, .chip.act-considerar { color: var(--pnl-up); border-color: var(--up-bd); background: var(--up-bg); }
.chip.act-reducir { color: var(--pnl-down); border-color: var(--down-bd); background: var(--down-bg); }
.chip.act-mantener, .chip.act-opcional, .chip.act-no_prioritario { color: var(--text-secondary); }
.chip.sev-alta { color: var(--pnl-down); border-color: var(--down-bd); background: var(--down-bg); font-weight: 600; }
.chip.sev-media { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); font-weight: 600; }
.chip.sev-baja, .chip.sev-info { color: var(--info-fg); border-color: var(--info-bd); background: var(--info-bg); }
.chip.kind-aporte { color: var(--pnl-up); border-color: var(--up-bd); background: var(--up-bg); }
.chip.kind-exceso { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }
.chip.kind-consolidar { color: var(--info-fg); border-color: var(--info-bd); background: var(--info-bg); }

.narr p, .narr .bul { margin: 0 0 var(--sp-2); }
.bul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.bul li { line-height: 1.5; }
.finds { display: grid; gap: var(--sp-3); }
.find { border: 1px solid var(--border-subtle); border-left-width: 4px; border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.find.sev-alta { border-left-color: var(--pnl-down); } .find.sev-media { border-left-color: var(--warn); } .find.sev-baja, .find.sev-info { border-left-color: var(--info-fg); }
.find .fh { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--sp-1); }
.find p { margin: var(--sp-1) 0 0; color: var(--text-secondary); font-size: 13px; }
.find .fa { color: var(--text-primary); }
.lab-i { font-weight: 600; }
.bands { display: grid; gap: var(--sp-4); }
.band .bl { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: 13px; margin-bottom: var(--sp-1); flex-wrap: wrap; }
.band .bv { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.band-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.band-zone { position: absolute; top: 0; bottom: 0; background: var(--up-bd); opacity: .55; }
.band-fill { position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--action); border-radius: var(--radius-pill); }
.band .bs2 { margin-top: var(--sp-1); }
.heat-wrap { overflow-x: auto; }
svg.heat { max-width: none; height: auto; }
svg.ch .hm { stroke: var(--surface-canvas); fill: var(--c2); }
svg.ch .hm0 { fill-opacity: .06; } svg.ch .hm1 { fill-opacity: .12; } svg.ch .hm2 { fill-opacity: .25; } svg.ch .hm3 { fill-opacity: .42; } svg.ch .hm4 { fill-opacity: .62; } svg.ch .hm5 { fill-opacity: .85; }
svg.ch .hv { fill: var(--text-primary); font-size: 10px; font-family: var(--font-mono); pointer-events: none; }
svg.ch .hl { font-size: 11px; }
td.why { white-space: normal; min-width: 220px; color: var(--text-secondary); }
td small { display: block; color: var(--text-muted); font-size: 12px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.rec h3 { font-size: 15px; margin: var(--sp-2) 0; }
.rec p { margin: 0 0 var(--sp-2); font-size: 13px; color: var(--text-secondary); }
.rec .amt { color: var(--text-primary); font-weight: 600; }
.sym-line { font-size: 13px; }
.op-item { border-top: 1px solid var(--divider); padding-top: var(--sp-2); margin-top: var(--sp-2); font-size: 13px; }
.op-item p { margin: var(--sp-1) 0 0; color: var(--text-secondary); }
.hint2 { font-size: 13px; color: var(--text-brand); margin: var(--sp-1) 0 0; font-weight: 500; }
.intro { background: var(--surface-base); }
.idea-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.idea { display: flex; flex-direction: column; gap: var(--sp-3); }
.idea .ih { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.idea .ih small { display: block; color: var(--text-muted); font-size: 12px; font-weight: 400; max-width: 34ch; }
.idea .btn { align-self: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sc { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sp-3); }
.sc .k { font-size: 12px; color: var(--text-secondary); }
a.sym { font-weight: 600; text-decoration: none; font-family: var(--font-mono); font-size: 13px; }
a.sym:hover, .lnk:hover { text-decoration: underline; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); margin: 0; }
.kvp { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider); font-size: 13px; min-width: 0; }
.kvp dt { color: var(--text-secondary); flex: none; max-width: 55%; }
.kvp dd { margin: 0; text-align: right; font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.kv.small { grid-template-columns: 1fr 1fr; }
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.news li { display: flex; flex-direction: column; gap: 2px; }
.news a { font-weight: 500; overflow-wrap: anywhere; }
.news small { color: var(--text-muted); font-size: 12px; }
.asset-h h2 { font-size: 24px; margin-bottom: var(--sp-2); }
.back { margin-bottom: calc(-1 * var(--sp-2)); }
.backlink { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; font-size: 13px; font-weight: 500; min-height: 32px; }
.op-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.sec-h.tight { margin-bottom: var(--sp-2); }
.sector-bars { margin-bottom: var(--sp-3); }
.chartcard .ch .refline { stroke: var(--warn); stroke-dasharray: 5 4; stroke-width: 1.5; }
svg.ch .refline { stroke: var(--warn); stroke-dasharray: 5 4; stroke-width: 1.5; }
svg.ch .tx.ref { fill: var(--warn); font-weight: 600; }
svg.ch .curline { stroke: var(--chart-label); stroke-dasharray: 3 3; }
svg.ch .curdot { fill: var(--chart-end); stroke: var(--surface-canvas); stroke-width: 2; }
svg.ch .tipbg { fill: var(--surface-canvas); stroke: var(--border-strong); }
svg.ch .tip1 { fill: var(--text-secondary); font-size: 11px; }
svg.ch .tip2 { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
svg.ch { touch-action: pan-y; }

/* ---------- Navegación: aspecto común ---------- */
.scrim[hidden] { display: none; }
@media (min-width: 761px) { .scrim { display: none !important; } }
@media (max-width: 1040px) and (min-width: 761px) { .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

svg.ch .tx.ref { paint-order: stroke; stroke: var(--surface-canvas); stroke-width: 4px; stroke-linejoin: round; }
svg.ch.heat { width: auto; max-width: none; }
.table-wrap, .heat-wrap { max-width: 100%; }
@media (max-width: 760px) {
  .score-grid, .cards3, .idea-grid, .kv, .kv.small { grid-template-columns: 1fr; }
  .mini-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc { grid-template-columns: auto auto; } .sc .meter { grid-column: 1 / -1; }
  td.why { min-width: 180px; }
  .asset-h h2 { font-size: 20px; }
  .lead { font-size: 16px; }
}