/* Folio web (16-oct-2026). Misma casa que Stockdle y la portada v3: near-black cálido, crema,
   burdeos, Frank Ruhl Libre + IBM Plex Sans + JetBrains Mono. Filete + aire; la caja solo
   donde agrupa (las dos fichas de puntaje y composición). Sin antetítulos en mayúscula
   espaciada ni el punto medio como separador (marca/rediseno_slides/INVESTIGACION.md §3.10). */
:root{
  --burgundy:#910713; --cream:#f5e5ba;
  --bg:#0d0a0b; --bg-2:#120e0f; --surf:#171214; --elev:#221a1d; --elev-2:#2c2226;
  --fg-1:#f5ecd9; --fg-2:#b8a99a; --fg-3:#897a70;
  --rule:rgba(245,229,186,.12); --rule-2:rgba(245,229,186,.22); --rule-3:rgba(245,229,186,.34);
  --pos:#3aa771; --neg:#e0525d;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Frank Ruhl Libre',Georgia,serif;
  --mono:'JetBrains Mono',Menlo,Consolas,monospace;
  --e-o3:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--fg-1); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--burgundy);color:var(--cream)}
a{color:inherit}
button{font:inherit; color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding-inline:28px}
@media (max-width:640px){ .wrap{padding-inline:16px} }
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.vacio{color:var(--fg-2); padding:60px 0}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* ── Cabecera (igual que Stockdle) ── */
.hd{position:sticky; top:0; z-index:40; background:rgba(13,10,11,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule)}
.hd-in{display:flex; align-items:center; gap:24px; height:58px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{display:block}
.brand b{font-family:var(--serif); font-weight:600; font-size:18px}
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{text-decoration:none; font-size:14px; color:var(--fg-2); padding:8px 11px}
.nav a:hover{color:var(--fg-1)}
.nav a.on{color:var(--fg-1); box-shadow:inset 0 -1.5px 0 var(--cream)}
.hd [data-cuenta]{margin-left:6px}
@media (max-width:760px){ .nav{display:none} .hd [data-cuenta]{margin-left:auto} }
footer{border-top:1px solid var(--rule); margin-top:80px; padding:30px 0 60px; color:var(--fg-3); font-size:13px}
footer p{max-width:70ch; margin:0}

/* ── Botones ── */
.bt{appearance:none; border:1px solid var(--rule-3); background:none; color:var(--fg-1); border-radius:8px; padding:10px 16px; font-size:14.5px; font-weight:600;
  cursor:pointer; transition:background .2s, border-color .2s, transform .15s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.bt:hover{border-color:var(--cream)}
.bt:active{transform:scale(.97)}
.bt.pri{background:var(--cream); color:var(--bg); border-color:var(--cream)}
.fo-pasos b::before{content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:#4fb3a5; margin-right:9px; vertical-align:3px}
.bt.pri:hover{background:#fff3d4}
.bt:disabled{opacity:.38; cursor:default; transform:none}
.lnk{background:none; border:0; padding:0; color:var(--fg-2); text-decoration:underline; text-decoration-color:var(--rule-3); text-underline-offset:3px; cursor:pointer; font-size:14px}
.lnk:hover{color:var(--cream)}
.lnk.peligro:hover{color:var(--neg)}
.acc{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px}
.acc .sp{flex:1}
.ib{width:34px; height:34px; border-radius:50%; border:1px solid var(--rule-2); background:none; cursor:pointer; display:grid; place-items:center; color:var(--fg-2)}
.ib:hover{border-color:var(--cream); color:var(--cream)}

/* ── Sin cuenta ── */
.fo-intro{max-width:760px; padding-top:56px}
.fo-intro h1{font-family:var(--serif); font-weight:700; font-size:clamp(46px,8vw,84px); letter-spacing:-.025em; line-height:.98; margin:0}
.fo-t{display:flex; align-items:center; gap:clamp(14px,2vw,22px)}
.fo-intro .lede{color:var(--fg-2); font-size:clamp(16px,1.7vw,18.5px); margin:18px 0 0; max-width:52ch}
.fo-pasos{list-style:none; padding:0; margin:30px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule)}
.fo-pasos li{padding:16px 18px 0 0}
.fo-pasos li + li{padding-left:18px; border-left:1px solid var(--rule)}
.fo-pasos b{display:block; font-family:var(--serif); font-weight:600; font-size:20px}
.fo-pasos span{display:block; color:var(--fg-2); font-size:14px; margin-top:4px}
@media (max-width:640px){ .fo-pasos{grid-template-columns:1fr} .fo-pasos li, .fo-pasos li + li{padding:14px 0; border-left:0; border-bottom:1px solid var(--rule)} }
.fo-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px}
.fo-cta span{color:var(--fg-3); font-size:14px}
.fo-ej-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:64px; padding-bottom:12px; border-bottom:1px solid var(--rule)}
.fo-ej-h h2{font-family:var(--serif); font-weight:600; font-size:26px; margin:0}
.fo-ej-h span{color:var(--fg-3); font-size:14px}
.fo-ej{opacity:.94}

/* ── Cabecera de la cartera ── */
.fo-h{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:40px 0 20px; border-bottom:1px solid var(--rule)}
.fo-h h1{font-family:var(--serif); font-weight:700; font-size:clamp(32px,5vw,48px); letter-spacing:-.02em; line-height:1.02; margin:0}
.fo-meta{color:var(--fg-3); font-size:14px; margin:8px 0 0}
.fo-g{color:var(--fg-2); margin-left:6px}
.fo-acc{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:560px){ .fo-h{padding-top:24px} .fo-acc{width:100%} .fo-acc .bt{flex:1} }

/* ── Vacía ── */
.fo-vacia{padding:40px 0}
.fo-vacia h2{font-family:var(--serif); font-weight:600; font-size:28px; margin:0}
.fo-vacia p{color:var(--fg-2); margin:6px 0 0}
.fo-ops2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; max-width:760px}
.fo-op2{appearance:none; text-align:left; border:1.5px solid var(--rule-2); background:var(--surf); border-radius:12px; padding:20px; cursor:pointer; transition:border-color .2s, transform .15s}
.fo-op2:hover{border-color:var(--cream); transform:translateY(-2px)}
.fo-op2 b{display:block; font-size:17px}
.fo-op2 span{display:block; color:var(--fg-2); font-size:14px; margin-top:4px}
@media (max-width:560px){ .fo-ops2{grid-template-columns:1fr} }

/* ── Cifras ── */
.kps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--rule)}
.kp{padding:18px 16px 18px 0; min-width:0}
.kp + .kp{padding-left:16px; border-left:1px solid var(--rule)}
.kp span{display:block; font-size:12.5px; color:var(--fg-3)}
.kp b{display:block; font-size:clamp(18px,2.1vw,24px); font-weight:700; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kp em{display:block; font:600 13px var(--mono); font-style:normal; margin-top:2px}
@media (max-width:900px){
  .kps{grid-template-columns:1fr 1fr}
  .kp, .kp + .kp{padding:14px 0; border-left:0; border-top:1px solid var(--rule)}
  .kp:first-child{grid-column:1 / -1; border-top:0}
  .kp:nth-child(odd):not(:first-child){padding-left:16px; border-left:1px solid var(--rule)}
}

/* ── Puntaje y composición ── */
.fo-2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
@media (max-width:860px){ .fo-2{grid-template-columns:1fr} }
.fo-card{border:1px solid var(--rule-2); border-radius:14px; padding:20px 20px 16px; min-width:0}
.fo-card h3, .fo-sh h3{font-family:var(--serif); font-weight:600; font-size:21px; margin:0; letter-spacing:-.01em}
.ms{display:flex; align-items:flex-end; gap:16px; margin:14px 0 16px}
.ms-n b{display:block; font-size:54px; line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--cream)}
.ms-n span{display:block; font-size:13px; color:var(--fg-3); margin-top:6px}
.ejs{display:grid; gap:9px}
.ejs--ctx{margin-top:14px; padding-top:12px; border-top:1px solid var(--rule)}
.ejs--ctx .ej i s{background:var(--fg-3)}
.ej, .sc{display:grid; grid-template-columns:104px 1fr 50px; align-items:center; gap:12px; font-size:14px}
.ej span, .sc span{color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ej i, .sc i{display:block; height:8px; border-radius:4px; background:var(--elev-2); overflow:hidden}
.ej i s, .sc i s{display:block; height:100%; background:var(--cream); border-radius:4px; transition:width .6s var(--e-o3)}
.ej b, .sc b{text-align:right; font-size:13.5px}
.sc{grid-template-columns:150px 1fr 56px}
.secs{display:grid; gap:8px; margin-top:16px}
@media (max-width:480px){ .sc{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 50px; gap:8px} }
.conc{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--rule)}
.conc b{display:block; font-size:19px; font-weight:700}
.conc span{display:block; font-size:12px; color:var(--fg-3); line-height:1.3; margin-top:2px}
@media (max-width:520px){ .conc{grid-template-columns:1fr 1fr; row-gap:14px} }
.fo-nota{font-size:12.5px; color:var(--fg-3); margin:14px 0 0; line-height:1.45}
.fo-nota a{color:var(--fg-2)}

/* ── Posiciones ── */
.fo-sec{margin-top:40px}
.fo-sh{display:flex; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--rule)}
.fo-sh span{font:500 13px var(--mono); color:var(--fg-3)}
.pt-h, .ps{display:grid; grid-template-columns:minmax(180px,2.2fr) .8fr 1fr 1.1fr 1.15fr 1.2fr .7fr .6fr; gap:10px; align-items:center}
.pt-h{padding:10px 4px; font-size:12px; color:var(--fg-3); border-bottom:1px solid var(--rule)}
.pt-h > *:not(:first-child){text-align:right; justify-self:end}
.th{appearance:none; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer}
.th.on, .th:hover{color:var(--cream)}
.ps{padding:11px 4px; border-bottom:1px solid var(--rule); text-decoration:none; font-size:14px; transition:background .15s}
.ps:hover{background:rgba(245,229,186,.035)}
.ps > *:not(:first-child){text-align:right}
.ps em{display:block; font-style:normal; font-size:12px; color:var(--fg-3)}
.ps-g em, .ps-p em.pos, .ps-p em.neg{color:inherit; opacity:.85}
.ps-e{display:flex; align-items:center; gap:11px; min-width:0}
.ps-e > span{min-width:0}
.ps-e b{display:block; font:700 14.5px var(--mono)}
.ps-e em{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logo{width:34px; height:34px; border-radius:50%; background:var(--elev); flex:none; object-fit:cover}
.logo.ph{display:grid; place-items:center; font:700 11px var(--mono); color:var(--fg-2)}
.ps-s{font-weight:700}
.ps-q .u{display:none; font-style:normal}
@media (max-width:760px){
  .pt-h{display:none}
  .ps{grid-template-columns:1fr auto; grid-template-areas:"e v" "q g" ; row-gap:4px; padding:12px 0}
  .ps-e{grid-area:e} .ps-v{grid-area:v; font-weight:700} .ps-g{grid-area:g}
  .ps-q{grid-area:q; text-align:left!important; color:var(--fg-3); font-size:12.5px}
  .ps-q .u{display:inline}
  .ps-c, .ps-p, .ps-w, .ps-s{display:none}
  .ps-g em{display:inline; margin-left:6px}
}

/* ── Operaciones ── */
.ops{list-style:none; margin:0; padding:0}
.ops li{display:grid; grid-template-columns:100px 88px 80px 1fr 30px; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--rule); font-size:14px}
.op-f{color:var(--fg-3); font-size:13px}
.op-k{font-size:13px; color:var(--fg-2)}
.op-k.kS{color:var(--neg)} .op-k.kD{color:var(--pos)}
.op-d{text-align:right; color:var(--fg-2); font-size:13px}
.op-x{width:28px; height:28px; border-radius:50%; border:0; background:none; color:var(--fg-3); cursor:pointer}
.op-x:hover{color:var(--neg); background:rgba(224,82,93,.1)}
@media (max-width:560px){ .ops li{grid-template-columns:auto 1fr auto; grid-template-areas:"k t x" "f d x"; row-gap:2px} .op-k{grid-area:k} .ops b{grid-area:t} .op-f{grid-area:f} .op-d{grid-area:d} .op-x{grid-area:x} }
.fo-pie{display:flex; gap:22px; flex-wrap:wrap; margin-top:20px}

/* ── Diálogos ── */
dialog{border:1px solid var(--rule-2); background:var(--bg-2); color:var(--fg-1); border-radius:14px; padding:26px 24px 22px; max-width:min(520px, calc(100vw - 24px)); width:100%; max-height:calc(100dvh - 32px)}
dialog.ancho{max-width:min(860px, calc(100vw - 24px))}
dialog::backdrop{background:rgba(5,3,4,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
dialog h2{font-family:var(--serif); font-weight:600; font-size:24px; margin:0 0 14px}
dialog .cerrar{position:absolute; top:14px; right:14px}
.fm{display:grid; gap:12px}
.fm label, .mp label{display:grid; gap:5px; font-size:13px; color:var(--fg-2)}
.fm input, .mp select, .fm-pega textarea{width:100%; background:var(--surf); border:1px solid var(--rule-3); border-radius:8px; padding:11px 12px; color:var(--fg-1); font:500 16px var(--sans); outline:none}
.fm input:focus, .mp select:focus, .fm-pega textarea:focus{border-color:var(--cream); box-shadow:0 0 0 3px rgba(245,229,186,.13)}
.fm input[type=date]{color-scheme:dark}
.fm-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fm-2 [hidden]{display:none}
.fm-err{color:var(--neg); font-size:13.5px; margin:0; min-height:1px}
.fm-p{color:var(--fg-2); font-size:14.5px; margin:0 0 14px}
.segk{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.segk button{appearance:none; border:1px solid var(--rule-2); background:none; border-radius:8px; padding:10px; font-weight:600; font-size:14px; cursor:pointer}
.segk button.on{background:var(--cream); color:var(--bg); border-color:var(--cream)}
.sug{list-style:none; margin:-6px 0 0; padding:4px; border:1px solid var(--rule-2); border-radius:10px; background:var(--surf); max-height:250px; overflow:auto}
.sug button{width:100%; display:grid; grid-template-columns:30px 64px 1fr auto; align-items:center; gap:10px; padding:7px 8px; background:none; border:0; border-radius:7px; cursor:pointer; text-align:left}
.sug button:hover{background:var(--elev)}
.sug .logo{width:28px; height:28px}
.sug b{font:700 14px var(--mono)}
.sug span{font-size:13.5px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sug em{font-style:normal; font-size:12.5px; color:var(--fg-3)}
.drop{position:relative; border:1.5px dashed var(--rule-3); border-radius:12px; padding:26px; text-align:center; transition:border-color .2s, background .2s}
.drop.on{border-color:var(--cream); background:rgba(245,229,186,.05)}
.drop input{position:absolute; inset:0; opacity:0; cursor:pointer}
.drop b{display:block; font-size:16px}
.drop span{color:var(--fg-3); font-size:13.5px}
.fm-pega{margin-top:12px}
.fm-pega summary{cursor:pointer; color:var(--fg-2); font-size:14px}
.fm-pega textarea{font:13px var(--mono); margin:10px 0}
.mp{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:20px}
.mp select{font-size:14px; padding:9px 10px}
@media (max-width:640px){ .mp{grid-template-columns:1fr 1fr} .fm-2{grid-template-columns:1fr} }
.pv-n{font-size:14px; color:var(--fg-2); margin:16px 0 8px}
.pv-n b{color:var(--fg-1)}
.pv-w{overflow-x:auto}
.pv{width:100%; border-collapse:collapse; font-size:13px}
.pv th, .pv td{padding:7px 8px; border-bottom:1px solid var(--rule); text-align:left; white-space:nowrap}
.pv th{color:var(--fg-3); font-weight:500}
.pv tr.mal td{color:var(--neg); font-size:12.5px}
.pv .av{font-style:normal; color:#d99c44}
.chk{display:flex; gap:8px; align-items:center; font-size:14px; color:var(--fg-2); cursor:pointer}
#toast{position:fixed; left:50%; top:76px; transform:translate(-50%,-8px); background:var(--cream); color:var(--bg); font-weight:600; font-size:14px; padding:10px 16px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s, transform .25s var(--e-o3); z-index:95}
#toast.on{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }