/* Sextante — app shell + componentes interactivos (paleta validada dataviz). */
:root {
    color-scheme: light;
    --plane: #f4f4f1; --surface: #ffffff; --surface-2: #fafaf8;
    --sidebar: #ffffff;
    --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
    --line: rgba(11,11,11,.09); --line-strong: rgba(11,11,11,.14);
    --accent: #2a78d6; --accent-soft: rgba(42,120,214,.10);
    --pos: #0a7d33; --neg: #cf3a3a;
    --pos-bg: rgba(10,125,51,.10); --neg-bg: rgba(207,58,58,.10);
    --tag-bg: #f0f0ec; --tag-ink: #6b6a65;
    --shadow: 0 1px 2px rgba(11,11,11,.04), 0 10px 30px rgba(11,11,11,.06);
    --radius: 16px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --plane: #0b0b0d; --surface: #17171a; --surface-2: #1d1d21;
        --sidebar: #131315;
        --ink: #f5f5f2; --ink-2: #b9b8b0; --muted: #8b8a84;
        --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14);
        --accent: #4f97ec; --accent-soft: rgba(79,151,236,.14);
        --pos: #3ec16f; --neg: #f0736f;
        --pos-bg: rgba(62,193,111,.13); --neg-bg: rgba(240,115,111,.13);
        --tag-bg: #24242a; --tag-ink: #a5a49c;
        --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.34);
    }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--plane); color: var(--ink);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; }
.muted { color: var(--muted); } .small { font-size: 12px; } .strong { font-weight: 600; }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }

/* ── App shell ──────────────────────────────── */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar);
    border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; }
.side-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px;
    letter-spacing: -0.02em; padding: 4px 10px 20px; }
.side-brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft); }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
    color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: .13s; }
.side-nav a .ic { width: 18px; text-align: center; opacity: .8; font-size: 14px; }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 6px 0; }
.mep-badge { display: flex; flex-direction: column; gap: 1px; padding: 12px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 12px; }
.mep-badge b { font-size: 18px; letter-spacing: -0.02em; }
.link-btn { background: none; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
    font-size: 13px; padding: 7px 12px; border-radius: 9px; transition: .13s; font-family: inherit; }
.link-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }

.content { padding: 26px 30px 60px; max-width: 1160px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px; }
.view[hidden] { display: none !important; }

/* ── KPIs ───────────────────────────────────── */
.kpis { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi-value { font-size: 22px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; }
.kpi.hero .kpi-value { font-size: 34px; }
.kpi-value.sm { font-size: 22px; }
.kpi-delta { font-size: 13px; font-weight: 600; margin-top: 2px; }
.kpi.hero.pos .kpi-delta { color: var(--pos); } .kpi.hero.neg .kpi-delta { color: var(--neg); }
.kpi-value.pos { color: var(--pos); } .kpi-value.neg { color: var(--neg); }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }

/* ── Panels ─────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.panel h2 { margin: 0 0 16px; font-size: 15px; font-weight: 640; letter-spacing: -0.01em; }
.panel h2 .muted { font-weight: 400; font-size: 13px; letter-spacing: 0; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Treemap ────────────────────────────────── */
.treemap-panel { display: flex; flex-direction: column; }
.treemap { position: relative; height: 460px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.tm-tile { position: absolute; overflow: hidden; border: 1.5px solid var(--surface); border-radius: 7px;
    padding: 7px 9px; color: #fff; cursor: default; display: flex; flex-direction: column; gap: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,.4); will-change: transform;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s, box-shadow .18s, border-color .18s; }
.treemap:hover .tm-tile { opacity: .3; }
.tm-tile:hover { opacity: 1 !important; transform: scale(1.08); z-index: 5;
    box-shadow: 0 12px 34px rgba(0,0,0,.4); border-color: rgba(255,255,255,.75); }
.tm-tk { font-weight: 700; font-size: 13px; }
.tm-v { font-size: 11px; font-weight: 600; }
.tm-r { font-size: 10.5px; opacity: .9; }
.treemap-legend { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.treemap-legend i.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.treemap-legend .loss { background: #c43a3a; } .treemap-legend .flat { background: #60626a; } .treemap-legend .gain { background: #1c9654; }

/* ── Position cards (hover-expand) ──────────── */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 12px; }
.pos-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--muted);
    border-radius: 12px; padding: 14px; position: relative; transition: transform .18s, box-shadow .18s; }
.pos-card.pos { border-left-color: var(--pos); } .pos-card.neg { border-left-color: var(--neg); }
.pos-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); z-index: 2; }
.pc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pc-ticker { font-weight: 700; font-size: 15px; }
.pc-value { font-size: 18px; font-weight: 650; margin-top: 8px; letter-spacing: -0.02em; }
.pc-rets { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.pc-ret { font-size: 15px; font-weight: 700; }
.pos-card.pos .pc-ret { color: var(--pos); } .pos-card.neg .pc-ret { color: var(--neg); }
.pc-usd-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.pc-ret-ars { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 100%; }
.pc-gap { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }
.pc-detail { max-height: 0; opacity: 0; overflow: hidden; display: grid; gap: 5px; margin-top: 0;
    transition: max-height .24s ease, opacity .2s, margin-top .2s; }
.pos-card:hover .pc-detail { max-height: 260px; opacity: 1; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-detail > div { display: flex; justify-content: space-between; font-size: 12px; gap: 10px; }
.pc-detail b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Chips (trades cerrados) ────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.chip b { font-weight: 650; } .chip.pos span { color: var(--pos); } .chip.neg span { color: var(--neg); }

/* ── Bars (fricción) ────────────────────────── */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; }
.bar-label { font-size: 12px; font-weight: 600; }
.bar-track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); border-radius: 999px; min-width: 3px; }
.bar-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Strat cards ────────────────────────────── */
.strat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.strat-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 15px;
    display: flex; flex-direction: column; gap: 5px; border-top: 3px solid var(--muted); }
.strat-card.pos { border-top-color: var(--pos); } .strat-card.neg { border-top-color: var(--neg); }
.strat-total { font-size: 20px; font-weight: 660; letter-spacing: -0.02em; }
.strat-card.pos .strat-total { color: var(--pos); } .strat-card.neg .strat-total { color: var(--neg); }

/* ── Op list (historial) ────────────────────── */
.oplist { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.op { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--line); font-size: 13px; transition: background .12s; }
.op:hover { background: var(--surface-2); }
.op-date { width: 82px; font-variant-numeric: tabular-nums; }
.op-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.op-type.buy { background: var(--accent-soft); color: var(--accent); }
.op-type.sell { background: var(--neg-bg); color: var(--neg); }
.op-ticker { font-weight: 650; width: 74px; }
.op-qty { width: 74px; } .op-neto { margin-left: auto; font-weight: 600; } .op-mon { width: 34px; } .op-comm { width: 108px; text-align: right; }

/* ── Charts ─────────────────────────────────── */
.chart-wrap { position: relative; height: 300px; }
.chart-wrap.sm { height: 300px; } .chart-wrap.tall { height: 380px; }

/* ── Forms ──────────────────────────────────── */
.mini-totals { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 16px; }
.mini-totals > div { display: flex; flex-direction: column; gap: 3px; }
.mini-totals b { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select, .upload input[type=file] { padding: 9px 11px; border: 1px solid var(--line-strong);
    border-radius: 9px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-family: inherit; }
.inline-form input:focus, .inline-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inline-form input[type=number] { width: 150px; } .inline-form input[type=text] { flex: 1; min-width: 130px; }
.upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.warnings { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.warnings li { margin: 4px 0; }
button { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 10px 17px;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter .15s, transform .05s; }
button:hover { filter: brightness(1.06); } button:active { transform: translateY(1px); }
.tag { display: inline-block; background: var(--tag-bg); color: var(--tag-ink); font-size: 10.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }

/* ── Alerts / empty ─────────────────────────── */
.alert { padding: 11px 15px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.alert.ok { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 22%, transparent); }
.alert.err { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 22%, transparent); }
.empty { text-align: center; padding: 70px 20px; }
.empty h1 { font-size: 25px; margin-bottom: 8px; letter-spacing: -0.02em; }
.empty .upload { justify-content: center; margin-top: 20px; }

/* ── Login ──────────────────────────────────── */
.login-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--plane); padding: 20px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 38px 34px; width: 340px; box-shadow: var(--shadow); }
.login-card .brand { font-size: 24px; margin-bottom: 2px; display: flex; align-items: center; gap: 9px; font-weight: 700; }
.login-card .brand::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.login-card p { margin: 6px 0 22px; color: var(--muted); }
.login-card label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; font-weight: 500; }
.login-card input { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-family: inherit; }
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-card button { width: 100%; margin-top: 8px; padding: 12px; }

@media (max-width: 720px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .side-nav { flex-direction: row; flex-wrap: wrap; } .side-foot { margin: 0 0 0 auto; flex-direction: row; }
}