/* Rendimiento section (live) — all rules scoped under .performance — matches Stratus tokens (v2: Inter numerals, % curve, Darwinex-style table + stats) */
.performance{
  --font-num:'Inter','IBM Plex Sans',Arial,sans-serif;
  --pos:#8dbb98;--neg:#d77e70;
}
.performance .num,
.performance .k-value,
.performance .stat-value,
.performance .mt td,
.performance .chart-tooltip b,
.performance .chart-tooltip .tt-line{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.performance .section-head p{color:var(--fg-soft);font-size:16px;margin:0}

/* ---------- KPIs ---------- */
.performance .kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:28px;
}
.performance .kpi{
  background:var(--panel);padding:28px 22px;min-height:118px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
}
.performance .kpi .k-label{font:11px var(--font-mono);letter-spacing:1.6px;color:var(--soft);text-transform:uppercase}
.performance .kpi .k-value{font-size:clamp(28px,2.7vw,34px);font-weight:300;letter-spacing:-.6px;line-height:1}
.performance .kpi .k-value.pos{color:var(--pos)}
.performance .kpi .k-value.neg{color:var(--neg)}
.performance .kpi .k-value.gold{color:var(--gold)}
.performance .kpi .k-hint{font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}

/* ---------- Chart ---------- */
.performance .perf-chart-panel{border:1px solid var(--line);background:var(--panel);padding:28px 28px 18px;margin-bottom:28px}
.performance .chart-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.performance .chart-sub{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.performance .chart-sub .num{font-size:12.5px}
.performance .range-toggles{display:flex;gap:6px;flex-wrap:wrap}
.performance .range-btn{font:11px var(--font-mono);letter-spacing:1.2px;padding:8px 12px;border:1px solid var(--line);color:var(--soft);background:transparent;cursor:pointer}
.performance .range-btn:hover{border-color:var(--gold);color:var(--fg)}
.performance .range-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.performance .chart-wrap{position:relative;width:100%;aspect-ratio:1100/380;max-height:440px}
.performance .chart-wrap canvas{width:100%!important;height:100%!important;display:block;cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.performance .chart-tooltip{
  position:absolute;pointer-events:none;z-index:2;
  background:rgba(16,18,22,.96);border:1px solid var(--line);padding:10px 12px 9px;
  font:12px var(--font-sans);color:var(--fg);min-width:150px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.performance .chart-tooltip .tt-date{display:block;font:11px var(--font-mono);color:var(--soft);letter-spacing:.8px}
.performance .chart-tooltip b{display:block;font-size:20px;font-weight:300;letter-spacing:-.3px;margin:5px 0 1px}
.performance .chart-tooltip b.pos{color:var(--pos)}.performance .chart-tooltip b.neg{color:var(--neg)}
.performance .chart-tooltip .tt-cap{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.performance .chart-tooltip .tt-line{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;color:var(--soft);font-weight:300}
.performance .chart-tooltip .tt-line i{font-style:normal;color:var(--muted);font-family:var(--font-sans)}
.performance .chart-tooltip .pos{color:var(--pos)}.performance .chart-tooltip .neg{color:var(--neg)}
.performance .chart-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}

/* ---------- Monthly table (Darwinex-style) ---------- */
.performance .monthly-block{margin-bottom:28px}
.performance .monthly-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.performance .monthly-note{font:11px var(--font-mono);color:var(--muted);letter-spacing:.4px}
.performance .mt-wrap{border:1px solid var(--line);background:var(--panel);padding:10px 22px 8px}
.performance .mt{width:100%;border-collapse:collapse;table-layout:fixed}
.performance .mt th,
.performance .mt td{text-align:right;white-space:nowrap;padding:0 4px}
.performance .mt thead th{
  font:500 13.5px var(--font-sans);color:var(--fg-soft);letter-spacing:.3px;
  padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.performance .mt thead th.mt-year-h{text-align:left;font:11px var(--font-mono);letter-spacing:1.4px;color:var(--muted);text-transform:uppercase}
.performance .mt thead th.mt-total-h{color:var(--gold)}
.performance .mt tbody th{
  text-align:left;font:400 15px var(--font-num);font-variant-numeric:tabular-nums lining-nums;
  color:var(--fg);letter-spacing:.2px;
}
.performance .mt tbody tr + tr th,
.performance .mt tbody tr + tr td{border-top:1px solid var(--line-soft)}
.performance .mt tbody th,
.performance .mt tbody td{padding-top:17px;padding-bottom:17px}
.performance .mt td{font-size:14px;font-weight:300;color:var(--soft);letter-spacing:-.1px}
.performance .mt td.pos{color:var(--pos)}
.performance .mt td.neg{color:var(--neg)}
.performance .mt td.empty{color:#3a3e44}
.performance .mt .mt-total{font-weight:400;border-left:1px solid var(--line);padding-left:14px}
.performance .mt th.mt-total-h{border-left:1px solid var(--line);padding-left:14px}
.performance .mt col.c-year{width:62px}
.performance .mt col.c-total{width:96px}
/* narrow (transposed) variant, only on phones */
.performance .mt-narrow{display:none}
.performance .mt-narrow tbody th{font:500 14px var(--font-sans);color:var(--fg-soft);letter-spacing:.3px}
.performance .mt-narrow thead th{font:400 14px var(--font-num);color:var(--fg);letter-spacing:.2px}
.performance .mt-narrow tbody th,
.performance .mt-narrow tbody td{padding-top:12px;padding-bottom:12px}
.performance .mt-narrow tfoot th,
.performance .mt-narrow tfoot td{padding-top:14px;padding-bottom:12px;border-top:1px solid var(--line)}
.performance .mt-narrow tfoot th{text-align:left;font:11px var(--font-mono);letter-spacing:1.4px;color:var(--gold);text-transform:uppercase}
.performance .mt-narrow tfoot td{font-weight:400}
.performance .mt-narrow td.mt-cur,
.performance .mt-wide td.mt-cur{position:relative}

/* ---------- Stats tiles ---------- */
.performance .stats-block{margin-bottom:36px}
.performance .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.performance .stat{background:var(--panel);padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px;min-height:104px}
.performance .stat-label{font:400 12.5px var(--font-sans);color:var(--soft);letter-spacing:.2px}
.performance .stat-value{font-size:24px;font-weight:300;letter-spacing:-.4px;line-height:1.1;color:var(--fg)}
.performance .stat-value.pos{color:var(--pos)}.performance .stat-value.neg{color:var(--neg)}.performance .stat-value.gold{color:var(--gold)}
.performance .stat-value small{font-size:13px;color:var(--muted);font-weight:300;letter-spacing:0;margin-left:4px}
.performance .stat-hint{font:10.5px var(--font-mono);color:var(--muted);letter-spacing:.3px;margin-top:auto}

.performance .perf-actions{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--panel);padding:28px 32px;
}
.performance .perf-actions .fine-note{margin:0;max-width:480px}
.performance .perf-error{border:1px solid var(--line);background:var(--panel);padding:36px;color:var(--fg-soft);font-size:15px}

@media(max-width:900px){
  .performance .kpi-strip{grid-template-columns:1fr 1fr}
  .performance .stat-grid{grid-template-columns:repeat(2,1fr)}
  .performance .mt-wrap{padding:6px 14px 4px}
  .performance .mt thead th{font-size:12.5px}
  .performance .mt td{font-size:13px}
  .performance .mt col.c-total{width:84px}
}
@media(max-width:680px){
  .performance .kpi{padding:22px 16px;min-height:100px}
  .performance .kpi .k-value{font-size:26px}
  .performance .kpi .k-label{font-size:10px;letter-spacing:1px}
  .performance .kpi .k-hint{font-size:10px}
  .performance .perf-chart-panel{padding:20px 14px 14px}
  .performance .chart-wrap{aspect-ratio:1.15}
  .performance .chart-toolbar{align-items:flex-start}
  .performance .mt-wide{display:none}
  .performance .mt-narrow{display:table}
  .performance .mt-wrap{padding:4px 16px 2px}
  .performance .mt-narrow td{font-size:14.5px}
  .performance .stat{padding:16px 14px 14px;min-height:96px}
  .performance .stat-value{font-size:21px}
  .performance .stat-label{font-size:12px}
  .performance .stat-hint{font-size:10px}
  .performance .perf-actions{padding:22px 18px;flex-direction:column;align-items:flex-start}
}

/* encabezado de Rendimiento al mismo ancho que el resto de la sección */
.performance .section-head{max-width:none}
.performance .section-head p{max-width:none}

/* tabla mensual (vista ancha): números 2 px más pequeños, total más proporcionado y aire antes de la línea del total */
@media(min-width:681px){
  .performance .mt-wide td{font-size:12px}
  @supports (container-type:inline-size){
    .performance .mt-wrap{container-type:inline-size}
    .performance .mt-wide td{font-size:clamp(10px,1.45cqi,12px)}
  }
  .performance .mt-wide tbody th{font-size:13px}
  .performance .mt-wide col.c-total{width:76px}
  .performance .mt-wide .mt-total,
  .performance .mt-wide th.mt-total-h{padding-left:10px}
  .performance .mt-wide tbody td:nth-last-child(2),
  .performance .mt-wide thead th:nth-last-child(2){padding-right:10px}
}
/* en tablets angostas la tabla ancha no cabe: se usa la misma tabla transpuesta del celular */
@media(min-width:681px) and (max-width:860px){
  .performance .mt-wide{display:none}
  .performance .mt-narrow{display:table}
}