/* ============================================================
   Dashboard de Portafolio — styles.css
   Identidad visual: Algedi & Antares Legacy (shared/brand.css)
   Modo claro:  old money (crema / café / dorado)
   Modo oscuro: Tokyo Night adaptado a la marca
   ============================================================ */

@import url('./shared/brand.css');

/* ── MODO CLARO — paleta old money ──────────────────────────── */
:root {
  --bg:            var(--aa-bg);
  --bg-alt:        var(--aa-bg-alt);
  --card:          var(--aa-surface);
  --card-soft:     var(--aa-bg);
  --card-dark:     var(--aa-bg-alt);
  --text:          var(--aa-text);
  --text-muted:    var(--aa-text-muted);
  --primary:       var(--aa-accent);
  --primary-hover: var(--aa-accent-hover);
  --primary-light: rgba(139,111,71,0.10);
  --border:        var(--aa-border);
  --success:       var(--aa-success);
  --danger:        var(--aa-danger);
  --warning:       var(--aa-warning);
  --highlight:     var(--aa-gold);
  --neutral:       var(--aa-text-muted);
}

/* ── MODO OSCURO — Tokyo Night con tonos café/dorado ────────── */
:root.dark, body.dark {
  --bg:            #1A1208;
  --bg-alt:        #231A0E;
  --card:          #2C2010;
  --card-soft:     #332614;
  --card-dark:     #1A1208;
  --text:          #EDE8DC;
  --text-muted:    #A08060;
  --primary:       #C4A265;
  --primary-hover: #D4B275;
  --primary-light: rgba(196,162,101,0.15);
  --border:        #4A3520;
  --success:       #7AAF78;
  --danger:        #C06060;
  --warning:       #C4943A;
  --highlight:     #C4A265;
  --neutral:       #7A6A52;
}

/* ── BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 28px 32px;
  font-family: var(--aa-font-body);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3 { font-family: var(--aa-font-heading); font-weight: 500; }
h1 { margin: 0 0 6px; color: var(--primary); font-size: 1.4rem; letter-spacing: 0.06em; }
h2 { margin: 0 0 16px; color: var(--primary); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
h3 { margin: 0 0 12px; color: var(--text); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }

.subtitle {
  font-family: var(--aa-font-body);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* ── HEADER ──────────────────────────────────────────────────── */
.header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.header-brand__sep {
  display: block;
  width: 1px;
  height: 34px;
  background-color: var(--aa-gold);
  opacity: 0.45;
  flex-shrink: 0;
}

.header-brand__title {
  margin: 0;
  font-family: var(--aa-font-heading);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── LOGO ALGEDI & ANTARES (mismo formato que sitio web) ─────── */
.aa-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 0.1rem;
  text-decoration: none;
  cursor: default;
}

.aa-logo__name {
  font-family: var(--aa-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--aa-text, #2C2416);
  white-space: nowrap;
}

.aa-logo__sub {
  font-family: var(--aa-font-body);
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.20em;
  color: var(--aa-text-muted, #7A6A52);
}

.aa-logo__amp {
  color: var(--aa-gold);
}

body.dark .aa-logo__name { color: var(--text); }
body.dark .aa-logo__sub  { color: var(--text-muted); }
body.dark .aa-logo__amp  { color: var(--aa-gold); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ── STATUS BOX (barra fija inferior) ────────────────────────── */
#statusBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 7px 32px;
  font-family: var(--aa-font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
body.dark #statusBox {
  background: var(--card-dark);
  border-top-color: var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}

/* Espacio al fondo del body para que el contenido no quede tapado */
body {
  padding-bottom: 92px;
  scroll-padding-bottom: 92px;
}

/* ── TABS ────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  margin: 20px 0 28px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 20px 10px;
  margin-bottom: -1px;
  font-family: var(--aa-font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-content { display: none; }
.tab-content.active { display: block; }

body.dark .tab-btn       { color: var(--text-muted); }
body.dark .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── SECTIONS ────────────────────────────────────────────────── */
section {
  background: var(--card);
  padding: 22px 26px;
  border-radius: var(--aa-radius-lg);
  margin-bottom: 24px;
  border: 1px solid var(--border);
  color: var(--text);
}

body.dark section { background: var(--card); border-color: var(--border); }

/* ── KPI TOOLBAR ─────────────────────────────────────────────── */
.kpi-toolbar-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg);
  padding: 12px 22px;
  margin-bottom: 24px;
}

.kpi-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kpi-toolbar label {
  font-family: var(--aa-font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-periodo-info { font-style: italic; font-size: 0.85rem; color: var(--text-muted); }

body.dark .kpi-toolbar-section { background: var(--card); border-color: var(--border); }

/* ── KPI PERIOD PILLS ────────────────────────────────────────── */
.kpi-period-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-alt, #f4f6fa);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 4px;
}

.kpi-pill {
  padding: 4px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--aa-font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.kpi-pill:hover {
  background: var(--card);
  color: var(--text);
}

.kpi-pill--active {
  background: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 1px 4px rgba(37,99,235,0.18);
}

.kpi-pill--active:hover {
  background: var(--primary, #2563eb);
  color: #fff;
}

body.dark .kpi-period-pills {
  background: var(--card-soft);
  border-color: var(--border);
}

body.dark .kpi-pill:hover {
  background: var(--card);
  color: var(--text);
}

/* ── KPI CARDS ───────────────────────────────────────────────── */
#kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px 14px;
  border-radius: var(--aa-radius-lg);
  text-align: center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.kpi:hover { border-color: var(--primary); box-shadow: var(--aa-shadow-sm); }

.kpi span {
  display: block;
  font-family: var(--aa-font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kpi strong {
  font-family: var(--aa-font-body);
  font-size: 1.45rem;
  font-weight: 500;
  color: #7A7470;
}

body.dark #kpis  { background: transparent; border: none; }
body.dark .kpi   { background: var(--card); border-color: var(--border); }
body.dark .kpi strong { color: var(--text); }

/* ── LAYOUT ──────────────────────────────────────────────────── */

/* ── TABLAS ──────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  table-layout: fixed;
  word-wrap: break-word;
  font-family: var(--aa-font-body);
  font-size: 0.92rem;
}

th {
  text-align: left;
  font-family: var(--aa-font-heading);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  padding: 10px 8px;
  background: var(--bg-alt);
}

td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

td:last-child, th:last-child { text-align: right; }
td:first-child, th:first-child { text-align: left; }

tr:hover td { background: var(--primary-light); }

.total-row { background: var(--bg-alt); border-top: 2px solid var(--border); font-weight: 600; }
.total-row td { color: var(--primary); }

body.dark table                { background: var(--card); border-color: var(--border); }
body.dark th, body.dark td     { color: var(--text); border-color: var(--border); }
body.dark tr:hover td          { background: var(--card-soft); }
body.dark .total-row           { background: var(--card-dark); border-top-color: var(--primary); }

/* Anchos de columnas — tablas genéricas */
table th:nth-child(1), table td:nth-child(1) { text-align: left;  width: 110px; min-width: 110px; }
table th:nth-child(2), table td:nth-child(2) { text-align: right; width: 55px;  min-width: 55px; }
table th:nth-child(3), table td:nth-child(3) { text-align: right; width: 100px; min-width: 100px; }
table th:nth-child(4), table td:nth-child(4) { text-align: right; width: 50px;  min-width: 50px; }
table th:nth-child(5), table td:nth-child(5) { text-align: right; width: 85px;  min-width: 85px; }
table th:nth-child(6), table td:nth-child(6) { text-align: right; width: 85px;  min-width: 85px; }
table th:nth-child(7), table td:nth-child(7) { text-align: right; width: 100px; min-width: 100px; }
table th:nth-child(8), table td:nth-child(8) { text-align: right; width: 50px;  min-width: 50px; }

/* ── Tabla Distribución por Perfil de Riesgo (10 columnas) ───── */
/*    Col 1  Riesgo       Col 2  $Anterior   Col 3  % ant.
      Col 4  P&G          Col 5  Movimientos Col 6  Adic./Ret.
      Col 7  $Actual      Col 8  % act.      Col 9  ROI %   Col 10 TIR % */
#tablaRiesgo {
  table-layout: fixed;
  width: 100%;
  font-size: 0.83rem;
}
/* Col  1 — Riesgo */
#tablaRiesgo th:nth-child(1),  #tablaRiesgo td:nth-child(1)  { width: 13%; text-align: left; }
/* Col  2 — $Anterior */
#tablaRiesgo th:nth-child(2),  #tablaRiesgo td:nth-child(2)  { width: 10%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col  3 — % anterior */
#tablaRiesgo th:nth-child(3),  #tablaRiesgo td:nth-child(3)  { width: 4%;  text-align: right; }
#tablaRiesgo td:nth-child(3)  { font-size: 0.78rem; opacity: 0.72; }
/* Col  4 — Valorización */
#tablaRiesgo th:nth-child(4),  #tablaRiesgo td:nth-child(4)  { width: 10%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col  5 — Dividendos / Intereses */
#tablaRiesgo th:nth-child(5),  #tablaRiesgo td:nth-child(5)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col  6 — Movimientos (Compras+Ventas) */
#tablaRiesgo th:nth-child(6),  #tablaRiesgo td:nth-child(6)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col  7 — Adiciones / Retiros */
#tablaRiesgo th:nth-child(7),  #tablaRiesgo td:nth-child(7)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col  8 — $Actual */
#tablaRiesgo th:nth-child(8),  #tablaRiesgo td:nth-child(8)  { width: 10%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col  9 — % actual */
#tablaRiesgo th:nth-child(9),  #tablaRiesgo td:nth-child(9)  { width: 4%;  text-align: right; }
#tablaRiesgo td:nth-child(9)  { font-size: 0.78rem; opacity: 0.72; }
/* Col 10 — ROE % */
#tablaRiesgo th:nth-child(10), #tablaRiesgo td:nth-child(10) { width: 8%;  text-align: right; font-variant-numeric: tabular-nums; }
/* Col 11 — TIR % */
#tablaRiesgo th:nth-child(11), #tablaRiesgo td:nth-child(11) { width: 8%;  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Tooltip en headers */
#tablaRiesgo th[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ── Perfil de Riesgo — Análisis de Rentabilidad (tab-detalle) ── */
/*    11 columnas: Riesgo | $Ant | %ant | Valoriz. | Div/Int      */
/*                Movs   | Adic/Ret | $Act | %act | ROE% | TIR%   */
.riesgo-rent-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
#tablaRiesgoRent {
  table-layout: fixed;
  width: 100%;
  font-size: 0.83rem;
}
/* Col 1 — Riesgo */
#tablaRiesgoRent th:nth-child(1),  #tablaRiesgoRent td:nth-child(1)  { width: 13%; text-align: left; }
/* Col 2 — $Anterior */
#tablaRiesgoRent th:nth-child(2),  #tablaRiesgoRent td:nth-child(2)  { width: 10%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col 3 — % anterior */
#tablaRiesgoRent th:nth-child(3),  #tablaRiesgoRent td:nth-child(3)  { width: 4%;  text-align: right; }
#tablaRiesgoRent td:nth-child(3)  { font-size: 0.78rem; opacity: 0.72; }
/* Col 4 — Valorización */
#tablaRiesgoRent th:nth-child(4),  #tablaRiesgoRent td:nth-child(4)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col 5 — Dividendos / Intereses */
#tablaRiesgoRent th:nth-child(5),  #tablaRiesgoRent td:nth-child(5)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col 6 — Movimientos */
#tablaRiesgoRent th:nth-child(6),  #tablaRiesgoRent td:nth-child(6)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col 7 — Adiciones / Retiros */
#tablaRiesgoRent th:nth-child(7),  #tablaRiesgoRent td:nth-child(7)  { width: 9%;  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col 8 — $Actual */
#tablaRiesgoRent th:nth-child(8),  #tablaRiesgoRent td:nth-child(8)  { width: 10%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Col 9 — % actual */
#tablaRiesgoRent th:nth-child(9),  #tablaRiesgoRent td:nth-child(9)  { width: 4%;  text-align: right; }
#tablaRiesgoRent td:nth-child(9)  { font-size: 0.78rem; opacity: 0.72; }
/* Col 10 — ROE % */
#tablaRiesgoRent th:nth-child(10), #tablaRiesgoRent td:nth-child(10) { width: 8%;  text-align: right; font-variant-numeric: tabular-nums; }
/* Col 11 — TIR % */
#tablaRiesgoRent th:nth-child(11), #tablaRiesgoRent td:nth-child(11) { width: 7%;  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#tablaRiesgoRent th[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ── TABLAS MOVIMIENTOS ──────────────────────────────────────── */
#tablaMovimientos1 { table-layout: fixed; width: 100%; }
#tablaMovimientos1 th,
#tablaMovimientos1 td { width: auto; min-width: 0; }

#tablaMovimientos1 th:first-child, #tablaMovimientos1 td:first-child {
  text-align: left; width: 220px; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tablaMovimientos1 th:not(:first-child), #tablaMovimientos1 td:not(:first-child) {
  text-align: right; font-size: 0.88rem; white-space: nowrap;
}
#tablaMovimientos1 .total-row td,
#tablaMovimientos1 .subtotal-row td { font-size: 0.88rem; }
#tablaMovimientos1 .subtotal-costos td { color: var(--danger, #8C3A3A); }
/* Filas de detalle (Fees, Impuestos, Otros costos) — quitar negrilla heredada de .var-neg */
#tablaMovimientos1 tr:not(.subtotal-row):not(.total-row) td.var-neg { font-weight: normal; }
#tablaMovimientos1 .yield-row td,
#tablaMovimientos1 .impuestos-fees-row td { font-size: 0.88rem; font-style: italic; font-weight: normal; }
#tablaMovimientos1 .yield-row td strong,
#tablaMovimientos1 .impuestos-fees-row td strong { font-weight: normal; }
/* Encabezados de sección dentro de Resumen P&G */
#tablaMovimientos1 .section-header-row td {
  color: var(--accent, #8B6F47);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
}

/* ── TABLAS COSTOS: Fees e Impuestos ─────────────────────────── */
#tablaCostosFees, #tablaCostosImpuestos {
  table-layout: fixed; width: 100%;
}
#tablaCostosFees th, #tablaCostosFees td,
#tablaCostosImpuestos th, #tablaCostosImpuestos td {
  width: auto; min-width: 0;
}
#tablaCostosFees th:first-child, #tablaCostosFees td:first-child,
#tablaCostosImpuestos th:first-child, #tablaCostosImpuestos td:first-child {
  text-align: left; width: 220px; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tablaCostosFees th:not(:first-child), #tablaCostosFees td:not(:first-child),
#tablaCostosImpuestos th:not(:first-child), #tablaCostosImpuestos td:not(:first-child) {
  text-align: right; font-size: 0.88rem; white-space: nowrap;
}
#tablaCostosFees .subtotal-row td,
#tablaCostosImpuestos .subtotal-row td { font-size: 0.88rem; }
#tablaCostosFees .subtotal-costos td,
#tablaCostosImpuestos .subtotal-costos td { color: var(--danger, #8C3A3A); }
#tablaCostosFees .impuestos-fees-row td,
#tablaCostosImpuestos .impuestos-fees-row td { font-size: 0.88rem; font-style: italic; font-weight: normal; }
#tablaCostosFees .impuestos-fees-row td strong,
#tablaCostosImpuestos .impuestos-fees-row td strong { font-weight: normal; }

/* ── VARIACIONES +/− ─────────────────────────────────────────── */
.var-pos { color: var(--success); font-weight: 600; }
.var-neg { color: var(--danger);  font-weight: 600; }
body.dark .var-pos { color: var(--success); }
body.dark .var-neg { color: var(--danger); }

/* ── BOTÓN DARK MODE ─────────────────────────────────────────── */
.theme-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--aa-radius);
  padding: 7px 14px;
  font-family: var(--aa-font-heading);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle:hover       { background: var(--primary); color: var(--aa-surface); border-color: var(--primary); }
body.dark .theme-toggle   { background: var(--card); border-color: var(--border); color: var(--text-muted); }
body.dark .theme-toggle:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); }

/* ── USER BADGE ──────────────────────────────────────────────── */
.user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--aa-font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
}
body.dark .user-badge { color: var(--text-muted); }
body.dark .user-badge button { background: var(--card); color: var(--text-muted); border-color: var(--border); }

/* ── BOTÓN CARGAR DATOS (mismo estilo que theme-toggle) ─────── */
.btn-upload {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--aa-radius);
  padding: 7px 14px;
  font-family: var(--aa-font-heading);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-upload:hover                { background: var(--primary); color: var(--aa-surface); border-color: var(--primary); }
body.dark .btn-upload            { background: var(--card); border-color: var(--border); color: var(--text-muted); }
body.dark .btn-upload:hover      { background: var(--primary); color: var(--bg); border-color: var(--primary); }

/* ── MODAL DE CARGA ──────────────────────────────────────────── */
.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.upload-modal__box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.dark .upload-modal__box { background: var(--card); border-color: var(--border); }

.upload-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-modal__title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
}
.upload-modal__close {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--aa-radius);
  transition: background 0.15s;
}
.upload-modal__close:hover { background: var(--border); color: var(--text); }

/* tabs dentro del modal */
.upload-modal__tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.upload-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--aa-radius);
  padding: 6px 16px;
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.upload-tab:hover { color: var(--text); border-color: var(--border); }
.upload-tab.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* hint de columnas requeridas */
.upload-modal__hint {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--aa-radius);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.upload-modal__hint strong { color: var(--text); }
body.dark .upload-modal__hint { background: var(--card-dark); }

/* drop zone */
.upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--aa-radius-lg);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.upload-dropzone__icon { font-size: 2rem; margin-bottom: 8px; }
.upload-dropzone__text { margin: 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.upload-dropzone__text strong { color: var(--text); }

/* preview */
.upload-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upload-preview__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.upload-preview__status {
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--aa-radius);
}
.upload-preview__status.ok  { background: rgba(100,170,100,0.12); color: var(--success); border: 1px solid var(--success); }
.upload-preview__status.err { background: rgba(192, 96, 96, 0.12); color: var(--danger);  border: 1px solid var(--danger); }
.upload-preview__table-wrap { overflow-x: auto; max-height: 220px; overflow-y: auto; }
.upload-preview__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.upload-preview__table th {
  background: var(--bg-alt);
  color: var(--primary);
  font-family: var(--aa-font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}
.upload-preview__table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.upload-preview__table tr:last-child td { border-bottom: none; }

/* footer */
.upload-modal__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.upload-modal__footer-info {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}
.btn-upload-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--aa-radius);
  padding: 7px 18px;
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-upload-cancel:hover { border-color: var(--danger); color: var(--danger); }
.btn-upload-confirm {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  border-radius: var(--aa-radius);
  padding: 7px 20px;
  font-family: var(--aa-font-heading);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-upload-confirm:hover:not(:disabled) { background: var(--primary-hover); }
.btn-upload-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
body.dark .btn-upload-confirm { color: var(--bg); }

@media (max-width: 640px) {
  .upload-modal__box  { padding: 20px 16px 18px; }
  .upload-modal__tabs { flex-wrap: wrap; }
  .upload-modal__footer { flex-wrap: wrap; }
}

/* ── COSTOS GRID ─────────────────────────────────────────────── */
.costos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 4px;
}
.costos-panel h3 {
  font-family: var(--aa-font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}
@media (max-width: 768px) {
  /* costos-grid ya es 1fr por defecto */
}

/* ── TABLA FLUJOS ────────────────────────────────────────────── */
#tablaFlujos, #tablaFlujosDetalle { table-layout: auto; width: 100%; }

#tablaFlujos th:first-child, #tablaFlujos td:first-child {
  text-align: left; min-width: 200px; font-size: 0.88rem;
}
#tablaFlujos th:not(:first-child), #tablaFlujos td:not(:first-child) {
  text-align: right; min-width: 90px; font-size: 0.88rem; white-space: nowrap;
}
#tablaFlujos .total-row td,
#tablaFlujos .subtotal-row td { font-size: 0.88rem; background: var(--card-soft, #F5F0E8); }

#tablaFlujos .section-header-row td {
  color: var(--primary, #8B6F47);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 8px 4px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

/* Detalle de flujos */
#tablaFlujosDetalle th:nth-child(1),
#tablaFlujosDetalle td:nth-child(1) { min-width: 100px; white-space: nowrap; }
#tablaFlujosDetalle th:nth-child(2),
#tablaFlujosDetalle td:nth-child(2) { min-width: 90px; }
#tablaFlujosDetalle th:nth-child(3),
#tablaFlujosDetalle td:nth-child(3) { min-width: 90px; }
#tablaFlujosDetalle th:nth-child(4),
#tablaFlujosDetalle td:nth-child(4) { min-width: 220px; font-size: 0.85rem; }
#tablaFlujosDetalle th:nth-child(5),
#tablaFlujosDetalle td:nth-child(5) { min-width: 100px; text-align: right; white-space: nowrap; }
#tablaFlujosDetalle .total-row td   { background: var(--card-soft, #F5F0E8); }

body.dark #tablaFlujos .subtotal-row td,
body.dark #tablaFlujos .total-row td,
body.dark #tablaFlujosDetalle .total-row td { background: var(--card); }

/* ── TAB FLUJOS: Adiciones y Retiros ────────────────────────── */
.flujos-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.flujos-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--aa-radius-lg);
  padding: 18px 16px 14px;
  text-align: center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.flujos-kpi:hover { border-color: var(--primary); box-shadow: var(--aa-shadow-sm); }
.flujos-kpi__label {
  display: block;
  font-family: var(--aa-font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.flujos-kpi__value {
  display: block;
  font-family: var(--aa-font-body);
  font-size: 1.4rem;
  font-weight: 500;
  color: #7A7470;
  line-height: 1.15;
}
.flujos-kpi__value.pos { color: var(--success); }
.flujos-kpi__value.neg { color: var(--danger); }
.flujos-kpi__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}
.flujos-table-wrap {
  overflow-x: auto;
  margin-bottom: 4px;
}
.flujos-chart-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: -6px 0 14px;
}
body.dark .flujos-kpi { background: var(--card); border-color: var(--border); }
body.dark .flujos-kpi__value { color: var(--text); }
body.dark .flujos-kpi__value.pos { color: var(--success); }
body.dark .flujos-kpi__value.neg { color: var(--danger); }

#tablaTIR {
  table-layout: fixed;
  width: 100%;
}
/* Ticker */
#tablaTIR th:nth-child(1),
#tablaTIR td:nth-child(1) {
  width: 6%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Descripción */
#tablaTIR th:nth-child(2),
#tablaTIR td:nth-child(2) {
  width: 24%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inversión */
#tablaTIR th:nth-child(3),
#tablaTIR td:nth-child(3) { width: 9%; text-align: right; }
/* Div / Int */
#tablaTIR th:nth-child(4),
#tablaTIR td:nth-child(4) { width: 9%; text-align: right; }
/* Valorización */
#tablaTIR th:nth-child(5),
#tablaTIR td:nth-child(5) { width: 9%; text-align: right; }
/* Valor actual */
#tablaTIR th:nth-child(6),
#tablaTIR td:nth-child(6) { width: 9%; text-align: right; }
/* % Portafolio */
#tablaTIR th:nth-child(7),
#tablaTIR td:nth-child(7) { width: 7%; text-align: right; }
/* ROI* % */
#tablaTIR th:nth-child(8),
#tablaTIR td:nth-child(8) { width: 8%; text-align: right; }
/* Tenencia */
#tablaTIR th:nth-child(9),
#tablaTIR td:nth-child(9) { width: 8%; text-align: center; }
/* TIR % */
#tablaTIR th:nth-child(10),
#tablaTIR td:nth-child(10) { width: 9%; text-align: right; }
/* Números tabulares en columnas numéricas */
#tablaTIR td:nth-child(3),
#tablaTIR td:nth-child(4),
#tablaTIR td:nth-child(5),
#tablaTIR td:nth-child(6),
#tablaTIR td:nth-child(7),
#tablaTIR td:nth-child(8),
#tablaTIR td:nth-child(10) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Tooltip en el header ROI* */
#tablaTIR th[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ── Tabla Rendimiento Anual ─────────────────────────────────── */
#tablaRendimientoAnual {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
}
#tablaRendimientoAnual th:nth-child(1),
#tablaRendimientoAnual td:nth-child(1) { width: 6%; text-align: left; }
#tablaRendimientoAnual th:nth-child(2),
#tablaRendimientoAnual td:nth-child(2) { width: 10%; text-align: right; }
#tablaRendimientoAnual th:nth-child(3),
#tablaRendimientoAnual td:nth-child(3) { width: 9%; text-align: right; }
#tablaRendimientoAnual th:nth-child(4),
#tablaRendimientoAnual td:nth-child(4) { width: 9%; text-align: right; }
#tablaRendimientoAnual th:nth-child(5),
#tablaRendimientoAnual td:nth-child(5) { width: 9%; text-align: right; }
#tablaRendimientoAnual th:nth-child(6),
#tablaRendimientoAnual td:nth-child(6) { width: 9%; text-align: right; }
#tablaRendimientoAnual th:nth-child(7),
#tablaRendimientoAnual td:nth-child(7) { width: 10%; text-align: right; }
#tablaRendimientoAnual th:nth-child(8),
#tablaRendimientoAnual td:nth-child(8) { width: 7%; text-align: right; }
#tablaRendimientoAnual th:nth-child(9),
#tablaRendimientoAnual td:nth-child(9) { width: 7%; text-align: right; }
/* Col 10 — ROE % (sin datos por ahora) */
#tablaRendimientoAnual th:nth-child(10),
#tablaRendimientoAnual td:nth-child(10) { width: 8%; text-align: right; }
/* Col 11 — S&P 500 */
#tablaRendimientoAnual th:nth-child(11),
#tablaRendimientoAnual td:nth-child(11) { width: 8%; text-align: right; }
/* Col 12 — α vs S&P */
#tablaRendimientoAnual th:nth-child(12),
#tablaRendimientoAnual td:nth-child(12) { width: 8%; text-align: right; }
#tablaRendimientoAnual thead th {
  padding: 8px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#tablaRendimientoAnual tbody td {
  padding: 7px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
#tablaRendimientoAnual tfoot td {
  padding: 6px 8px;
  font-size: 0.71rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  white-space: normal;
}
#tablaRendimientoAnual tbody tr:hover {
  background: rgba(139, 111, 71, 0.05);
}
body.dark #tablaRendimientoAnual thead th { background: var(--card); }
body.dark #tablaRendimientoAnual tbody tr:hover { background: rgba(196, 162, 101, 0.07); }

/* ── Tabla Benchmark (TIR Portafolio vs Índices) ─────────────── */
#tablaBenchmark {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
#tablaBenchmark .bm-th-label,
#tablaBenchmark .bm-th-period,
#tablaBenchmark .bm-th-delta,
#tablaBenchmark .bm-th-src {
  padding: 8px 10px;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  background: var(--card);
  white-space: nowrap;
}
#tablaBenchmark .bm-th-label  { text-align: left; }
#tablaBenchmark .bm-th-period { text-align: right; }
#tablaBenchmark .bm-th-delta  { text-align: right; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
#tablaBenchmark .bm-th-src    { text-align: center; font-size: 0.65rem; }
#tablaBenchmark tbody tr { transition: background 0.12s; }
#tablaBenchmark tbody tr:hover { background: rgba(139,111,71,0.05); }
#tablaBenchmark .bm-tr-portfolio {
  background: rgba(139,111,71,0.06);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}
#tablaBenchmark .bm-tr-portfolio .bm-name { font-family: var(--aa-font-heading); font-weight: 600; color: var(--text); }
#tablaBenchmark .bm-td-label {
  padding: 10px 10px;
}
#tablaBenchmark .bm-td-val {
  padding: 10px 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
#tablaBenchmark .bm-td-src {
  padding: 8px 6px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tablaBenchmark .bm-emoji { font-size: 1rem; margin-right: 4px; }
#tablaBenchmark .bm-name { font-size: 0.84rem; font-weight: 500; color: var(--text); }
#tablaBenchmark .bm-desc {
  display: block;
  font-size: 0.70rem;
  color: var(--text-muted);
  margin-top: 1px;
  font-style: italic;
}
#tablaBenchmark .bm-pos  { color: var(--aa-success, #5C8C5A); font-weight: 600; }
#tablaBenchmark .bm-neg  { color: var(--aa-danger,  #8C3A3A); font-weight: 600; }
#tablaBenchmark .bm-zero { color: var(--text-muted); }
#tablaBenchmark .bm-na   { color: var(--text-muted); font-size: 0.85em; }
#tablaBenchmark .bm-best { background: rgba(92,140,90,0.10); }
#tablaBenchmark tfoot .bm-foot {
  padding: 8px 10px;
  font-size: 0.70rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  white-space: normal;
  line-height: 1.5;
  font-style: italic;
}
body.dark #tablaBenchmark .bm-th-label,
body.dark #tablaBenchmark .bm-th-period,
body.dark #tablaBenchmark .bm-th-delta,
body.dark #tablaBenchmark .bm-th-src    { background: var(--card); }
body.dark #tablaBenchmark .bm-tr-portfolio { background: rgba(196,162,101,0.08); }
body.dark #tablaBenchmark tbody tr:hover   { background: rgba(196,162,101,0.07); }
body.dark #tablaBenchmark .bm-best         { background: rgba(122,175,120,0.12); }
body.dark #tablaBenchmark .bm-pos { color: #7AAF78; }
body.dark #tablaBenchmark .bm-neg { color: #C06060; }