/* ---- tipografia ----
   Roboto, la de Google, servida desde el propio contenedor igual que echarts y
   lightweight-charts: la aplicacion no le pide nada a terceros al cargar, sigue
   funcionando sin internet y no manda una peticion a Google cada vez que abres
   tu cartera.
   Es la version variable, un solo fichero para todos los pesos: hace falta
   porque aqui se usan 550 y 640, que en la version estatica no existen y el
   navegador tendria que falsear engordando el trazo. */
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;   /* que el texto se lea ya, aunque sea con la de respaldo */
  src:url('/static/vendor/roboto-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('/static/vendor/roboto-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Neutro y muy oscuro. El azulado anterior competia con los acentos y
     ensuciaba los graficos. */
  --bg:#0a0b0d; --surface:#121419; --surface2:#1a1d23; --line:#24272e;
  /* --dim se uso mucho para texto pequeno (hints, sellos, la linea del indice
     bajo cada periodo). El #575c66 anterior daba 2,93:1 sobre el fondo, por
     debajo incluso del umbral de texto grande. Este da 4,96:1 sobre --bg y
     4,64:1 sobre --surface, sin perder la jerarquia respecto a --muted. */
  --txt:#eceef1; --muted:#868b96; --dim:#7a808c;
  --up:#2ecc8f; --down:#f0616d; --brand:#f5c344; --brand2:#a78bfa;
  --warn:#ff8a3d;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt);
  font:14px/1.5 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  display:flex; -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* ---- barra superior, solo en movil ---- */
.topbar{display:none;position:fixed;top:0;left:0;right:0;height:52px;z-index:60;
  background:var(--surface);border-bottom:1px solid var(--line);
  align-items:center;gap:12px;padding:0 14px}
.hamb{background:none;border:0;color:var(--txt);font-size:19px;cursor:pointer;padding:6px 8px;
  border-radius:8px;line-height:1}
.hamb:hover{background:var(--surface2)}
.tb-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  letter-spacing:.4px;text-transform:uppercase}
.tb-brand .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#0a0b0d;
  background:linear-gradient(135deg,var(--brand),var(--warn))}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70}

/* ---- sidebar ---- */
.sidebar{
  width:232px; flex:0 0 232px; background:var(--bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:20px 14px;
  /* fixed y no sticky: con sticky, si el menu crece mas que la ventana deja de
     quedarse quieto al bajar. Asi no depende de su altura. */
  position:fixed; top:0; left:0; bottom:0; width:232px; overflow-y:auto; z-index:80;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;
  padding:2px 8px 26px;letter-spacing:.4px;text-transform:uppercase}
.brand .dot{width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--warn));
  display:grid;place-items:center;font-size:12px;color:#0a0b0d;font-weight:800}
nav{display:flex;flex-direction:column;gap:3px}
.nav{
  display:flex;align-items:center;gap:13px;background:none;border:0;color:var(--muted);
  font:inherit;font-size:14px;text-align:left;padding:11px 13px;border-radius:10px;
  cursor:pointer;transition:.13s;
}
/* Los emojis no encajan en el ancho que tenian los simbolos geometricos:
   necesitan mas caja y no admiten color, asi que la opacidad hace de atenuado. */
.nav i{font-style:normal;opacity:.8;width:22px;font-size:15px;display:inline-block;
  text-align:center;line-height:1;flex:0 0 22px}
.nav.active i{opacity:1}
.nav:hover{background:var(--surface);color:var(--txt)}
.nav.active{background:var(--surface2);color:var(--txt);font-weight:550}
.nav.active i{opacity:1;color:var(--brand)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding:0 4px}
.stamp{font-size:11px;color:var(--dim);padding-left:4px}

/* ---- layout ---- */
main{flex:1;min-width:0;padding:28px 34px 70px;max-width:1520px;margin-left:232px}
.head{margin-bottom:22px}
.head h1{font-size:23px;font-weight:650;letter-spacing:-.4px}
.sub{color:var(--muted);font-size:13px;margin-top:3px}

/* ---- movil y tablet ---- */
@media(max-width:900px){
  .topbar{display:flex}
  .scrim.abierto{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;
           box-shadow:6px 0 28px rgba(0,0,0,.5);background:var(--surface)}
  .sidebar.abierto{transform:translateX(0)}
  main{margin-left:0;padding:70px 15px 60px;max-width:none}
  .head h1{font-size:20px}
  .st-v{font-size:27px}
  .stat{padding:15px 16px}
  .card{padding:14px 14px 16px;border-radius:12px}
  .chart{height:250px}
  .chart.tall{height:300px}
  .chart.huge{height:66vh}
  .chart.sm,.chart.xs{height:210px}
  .card.watch{position:static}
  .pills{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;
         -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
  .pills button{flex:0 0 auto}
  .compare{justify-content:flex-start}
  .card-h{gap:9px}
  .card-h h2{font-size:13.5px}
  /* En pantalla estrecha la ficha se lee mejor a una columna. */
  .kv{grid-template-columns:1fr}
  .periods{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
  .per .vl{font-size:16px}
  .search{max-width:none}
  .tk-px{font-size:18px}
  .row .sp{flex:0 0 46px}
  .nrow img{width:52px;height:40px;flex:0 0 52px}
  .toast{left:14px;right:14px;bottom:14px;text-align:center}
  /* La cabecera movil ocupa 52px: la barra se centra dentro de ella. */
  .acciones{top:7px;right:10px;gap:6px}
  .acc{width:38px;height:38px}
  /* Objetivos tactiles: por debajo de 44px se falla el toque con el pulgar.
     Solo en movil; en escritorio el raton no lo necesita y aprieta el diseno. */
  .hamb{min-width:44px;min-height:44px}
  .ghost,.linksel,.pills button,.seg button{min-height:44px}
  .pills button,.seg button{display:inline-flex;align-items:center}
}

/* ---- tablas apiladas en movil ----
   Una tabla de 8 columnas en 320px obliga a arrastrar en horizontal para leer
   una sola fila. Apilada, cada fondo es una tarjeta y cada celda lleva su
   etiqueta desde data-l, que es lo que rellena el JS al pintar. */
@media(max-width:620px){
  .stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stack tbody tr{display:block;background:var(--bg);border:1px solid var(--line);
    border-radius:11px;padding:4px 12px;margin-bottom:9px}
  .stack tbody tr:hover{background:var(--bg)}
  .stack td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:7px 0;white-space:normal;border-bottom:1px solid rgba(36,39,46,.55)}
  .stack td:last-child{border-bottom:0}
  .stack td::before{content:attr(data-l);color:var(--muted);font-size:11.5px;
    text-transform:uppercase;letter-spacing:.5px;flex:0 0 auto}
  /* La primera celda es el nombre del fondo: ocupa el ancho y hace de titulo. */
  .stack td:first-child{display:block;font-weight:600;padding-top:10px}
  .stack td:first-child::before{display:none}
}
@media(max-width:520px){
  main{padding:66px 11px 50px}
  .kpis,.stats{gap:10px}
  .st-v{font-size:24px}
  .chart{height:215px}
  .arow{gap:9px}
  .arow .a-c{min-width:auto;width:100%}
  .pair{gap:10px}
  .pair .leg{min-width:100%}
}

/* ---- tarjetas de cabecera ---- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.st-h{font-size:13px;color:var(--muted);margin-bottom:9px}
.st-v{font-size:33px;font-weight:640;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin-bottom:9px}
.st-d{font-size:13px;font-variant-numeric:tabular-nums;line-height:1.75}
.st-d.dim{color:var(--muted)}
.st-d .tail{color:var(--muted);font-weight:400}

/* ---- comparador y pastillas ---- */
.compare{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-size:14px}
.cmp-lb{color:var(--muted)}
.linksel{background:none;border:0;color:var(--txt);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;padding:3px 6px;border-radius:7px}
.linksel:hover{background:var(--surface2)}
.cmp-btn{background:none;border:1px solid var(--line);color:var(--muted);font:inherit;
  font-size:15px;line-height:1;width:28px;height:28px;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;transition:.12s;flex:0 0 auto}
.cmp-btn:hover{color:var(--txt);border-color:var(--brand)}
.bench-buscador{display:flex;justify-content:center;margin-bottom:12px}
.bench-buscador .search{flex:0 1 420px}
.linksel option{background:var(--surface2);color:var(--txt)}

.pills{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pills button{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;
  padding:7px 15px;border-radius:20px;cursor:pointer;transition:.13s}
.pills button:hover{color:var(--txt);background:var(--surface2)}
.pills button.on{background:#4a3a12;color:#ffe6a8}
.pills.soft{justify-content:flex-start;margin-bottom:10px}
.pills.soft button{font-size:13px;padding:6px 14px}
.pills.soft button.on{background:var(--surface2);color:var(--txt)}

/* Leyenda propia debajo del grafico, como la de Capitally. */
.clegend{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--muted)}
.clegend span{display:flex;align-items:center;gap:7px}
.clegend i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* ---- rentabilidad por periodo ---- */
.periods{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.per{background:var(--surface);padding:13px 14px;text-align:center}
.per .lb{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.per .vl{font-size:18px;font-weight:640;margin:6px 0 3px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.per .bm{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.per .bm b{font-weight:600}

/* ---- metricas de riesgo ---- */
.riesgo{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.rm{background:var(--surface);padding:13px 14px}
.rm .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:5px}
.rm .v{font-size:19px;font-weight:640;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.rm .d{font-size:11px;color:var(--dim);margin-top:2px}
/* Marca las que se miden en semanal, para que nadie las compare con las diarias. */
.rm .sem{font-size:9px;color:var(--brand);border:1px solid rgba(245,195,68,.35);
  border-radius:4px;padding:0 3px;letter-spacing:.3px}
.riesgo-vacio{color:var(--muted);font-size:13px;padding:4px 2px}

/* ---- modo privado ----
   El desenfoque va en em y no en pixeles para que escale con el tamano de la
   cifra: el patrimonio, que va a 33px, necesita mucho mas velo que una celda de
   tabla a 13px, y con un valor fijo o se lee lo grande o se emborrona lo
   pequeno hasta hacerlo desaparecer. */
.borroso{display:inline-block;filter:blur(.3em);user-select:none;-webkit-user-select:none;
  padding:0 .14em}
a.ghost{text-decoration:none;display:inline-flex;align-items:center}

/* ---- barra de acciones ----
   Fija arriba a la derecha. El emoji es el boton y la etiqueta sale al pasar por
   encima; el aria-label lleva el mismo texto porque un lector de pantalla no ve
   emojis, solo oiria "globo ocular". */
.acciones{position:fixed;top:14px;right:18px;z-index:75;display:flex;gap:8px}
.acc{position:relative;background:var(--surface);border:1px solid var(--line);
  width:38px;height:38px;border-radius:11px;cursor:pointer;display:grid;place-items:center;
  transition:transform .12s,border-color .12s,background .12s;padding:0}
.acc i{font-style:normal;font-size:17px;line-height:1;display:block;transition:transform .18s}
.acc:hover{border-color:var(--brand);background:var(--surface2)}
.acc:hover i{transform:scale(1.15)}
.acc:active{transform:scale(.92)}
.acc b{
  position:absolute;top:calc(100% + 7px);right:0;white-space:nowrap;
  background:var(--surface2);border:1px solid var(--line);color:var(--txt);
  font-size:11.5px;font-weight:500;padding:5px 9px;border-radius:8px;
  opacity:0;transform:translateY(-3px);pointer-events:none;transition:.13s;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.acc:hover b,.acc:focus-visible b{opacity:1;transform:translateY(0)}
/* La rueda gira mientras de verdad se estan descargando precios. */
@keyframes girar{to{transform:rotate(360deg)}}
.acc.girando i{animation:girar .9s linear infinite}
.acc.girando{pointer-events:none;opacity:.75}

/* ---- calendario ---- */
#cal-anos{margin-top:10px;display:inline-flex}
.cal-anio{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.cal-mes .tit{font-size:12px;color:var(--muted);text-transform:capitalize;margin-bottom:7px;
  display:flex;justify-content:space-between;gap:8px}
.cal-mes .tit b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dias span{font-size:9px;color:var(--dim);text-align:center;padding-bottom:2px}
.cal-d{aspect-ratio:1;border-radius:4px;background:var(--surface2);font-size:9.5px;
  display:grid;place-items:center;color:var(--dim);cursor:default;position:relative}
.cal-d.hueco{background:none}
/* Cuatro intensidades segun el importe; la escala se calcula en el JS sobre el
   maximo del ano, para que un ano de aportaciones pequenas no salga todo apagado. */
.cal-d.p1{background:rgba(46,204,143,.25);color:var(--txt)}
.cal-d.p2{background:rgba(46,204,143,.45);color:var(--txt)}
.cal-d.p3{background:rgba(46,204,143,.7);color:#06281c}
.cal-d.p4{background:var(--up);color:#06281c;font-weight:700}
.cal-d.ret{background:rgba(240,97,109,.55);color:#fff}
.cal-d.tra{background:rgba(167,139,250,.4);color:var(--txt)}
.cal-d.reg{background:rgba(245,195,68,.45);color:var(--txt)}
.cal-d.hoy{outline:1.5px solid var(--brand);outline-offset:1px}
.cal-d.activo{cursor:pointer}
.cal-d.activo:hover{outline:1.5px solid var(--txt);outline-offset:1px}
.cal-d.sel{outline:2px solid var(--brand);outline-offset:1px}
.cal-leyenda{display:flex;gap:14px;font-size:11px;color:var(--dim);flex-wrap:wrap;align-items:center}
.cal-leyenda span{display:inline-flex;align-items:center;gap:3px}
.cal-leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cal-leyenda .p1{background:rgba(46,204,143,.25)} .cal-leyenda .p2{background:rgba(46,204,143,.45)}
.cal-leyenda .p3{background:rgba(46,204,143,.7)}  .cal-leyenda .p4{background:var(--up)}
.cal-leyenda .ret{background:rgba(240,97,109,.55)} .cal-leyenda .tra{background:rgba(167,139,250,.4)}
.cal-leyenda .reg{background:rgba(245,195,68,.45)}

/* ---- selector de broker ---- */
#broker-pick{margin-top:10px;display:inline-flex}
.tag.tr{color:var(--brand2);border-color:rgba(167,139,250,.35)}
.tag.mi{color:var(--brand);border-color:rgba(245,195,68,.35)}

/* ---- recalibrar ---- */
.rc-add{display:flex;gap:10px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.rc-add .search{flex:1 1 280px;max-width:420px}
.rc-foot{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.rc-foot label{font-size:13px;color:var(--muted)}
.rc-inp{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:0 11px}
.rc-inp input{background:none;border:0;color:var(--txt);font:inherit;font-size:15px;font-weight:600;
  width:92px;padding:9px 0;outline:none;font-variant-numeric:tabular-nums}
.rc-inp span{color:var(--muted);font-size:13px}
.peso-inp{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);
  font:inherit;font-size:13px;width:74px;padding:6px 9px;text-align:right;outline:none;
  font-variant-numeric:tabular-nums}
.peso-inp:focus{border-color:var(--brand)}
.rc-quita{background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer;padding:2px 6px;
  border-radius:6px;line-height:1}
.rc-quita:hover{color:var(--down);background:var(--surface2)}
.rc-mal{color:var(--down)}
/* Barra de desvio: el objetivo es la linea del centro. */
.rc-barra{position:relative;height:6px;background:var(--surface2);border-radius:3px;margin-top:6px;
  min-width:80px}
.rc-barra i{position:absolute;top:0;bottom:0;border-radius:3px}
.rc-barra .obj{left:50%;width:1px;background:var(--muted);top:-2px;bottom:-2px}
.mov{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(36,39,46,.6);
  flex-wrap:wrap}
.mov:last-child{border-bottom:0}
.mov .flecha{color:var(--dim);font-size:15px}
.mov .imp{margin-left:auto;font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}
.etq{font-size:10.5px;padding:2px 7px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.etq.ok{color:var(--up);border-color:rgba(46,204,143,.35)}
.etq.no{color:var(--warn);border-color:rgba(255,138,61,.35)}

/* ---- listas con sparkline ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
/* Sin esto, un item de grid no baja de su contenido (min-width:auto) y las filas
   con nowrap ensanchan la columna hasta desbordar la tarjeta en movil. */
.grid-3>*,.grid-2>*{min-width:0}
@media(max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid-3{grid-template-columns:1fr}}
.hint{font-size:11.5px;color:var(--dim)}
.card.list{padding-bottom:8px}
.row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid rgba(36,39,46,.6)}
.row:last-child{border-bottom:0}
.row .ic{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#0a0b0d}
.row .nm{flex:1;min-width:0}
.row .nm b{display:block;font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm span{font-size:11px;color:var(--dim)}
.row .sp{flex:0 0 62px;height:26px}
.row .vl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .vl b{display:block;font-size:12.5px;font-weight:600}
.row .vl span{font-size:11.5px}
.chart.xs{height:132px}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;margin-bottom:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:14px;font-weight:600;color:var(--txt)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1000px){.grid-2{grid-template-columns:1fr}}
.chart{height:320px;width:100%}
.chart.sm{height:250px}
.chart.tall{height:460px}

/* ---- controls ---- */
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.seg button{background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;padding:5px 11px;border-radius:7px;cursor:pointer;transition:.12s;white-space:nowrap}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--surface2);color:var(--txt)}
.ghost{background:var(--surface2);border:1px solid var(--line);color:var(--muted);font:inherit;font-size:12.5px;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.12s}
.ghost:hover{color:var(--txt);border-color:var(--brand)}
.sel{background:var(--bg);border:1px solid var(--line);color:var(--txt);font:inherit;font-size:13px;padding:7px 10px;border-radius:9px;cursor:pointer;max-width:340px}
.sel.sm{font-size:12.5px;padding:6px 9px}
.ctrls{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ---- esqueletos de carga ----
   Mientras una vista pide sus datos, sus huecos laten en gris en vez de ensenar
   guiones. Se activa poniendo .cargando en la seccion, asi que ningun loader
   tiene que acordarse de encenderlo y apagarlo hueco a hueco. */
@keyframes sk{100%{transform:translateX(100%)}}
.view.cargando .chart,
.view.cargando .st-v,
.view.cargando .st-d,
.view.cargando .per .vl,
.view.cargando .per .bm{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--surface2);color:transparent!important;
}
.view.cargando .st-v,.view.cargando .st-d{max-width:220px}
.view.cargando .chart::after,
.view.cargando .st-v::after,
.view.cargando .st-d::after,
.view.cargando .per .vl::after,
.view.cargando .per .bm::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:sk 1.25s infinite;
}
/* Un grafico ya dibujado no debe asomar bajo el esqueleto al recargar la vista. */
.view.cargando .chart>*{visibility:hidden}

/* ---- fallo de carga ---- */
.fallo{background:rgba(240,97,109,.07);border:1px solid rgba(240,97,109,.3);
  border-radius:var(--r);padding:14px 16px;margin-bottom:16px;font-size:13px;color:#f2a0a6;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fallo button{background:none;border:1px solid rgba(240,97,109,.45);color:#f2a0a6;
  font:inherit;font-size:12.5px;padding:7px 14px;border-radius:9px;cursor:pointer;min-height:38px}
.fallo button:hover{background:rgba(240,97,109,.12)}

/* ---- tables ---- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px}
th{text-align:left;font-weight:550;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:0 12px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid rgba(36,39,46,.6);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
.r{text-align:right}
th.sortable{cursor:pointer;user-select:none;transition:color .12s}
th.sortable:hover{color:var(--txt)}
th.sortable::after{content:'↕';font-size:9px;margin-left:5px;opacity:.35}
th[aria-sort=ascending],th[aria-sort=descending]{color:var(--txt)}
th[aria-sort=ascending]::after{content:'↑';opacity:1;color:var(--brand)}
th[aria-sort=descending]::after{content:'↓';opacity:1;color:var(--brand)}
.up{color:var(--up)} .down{color:var(--down)}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--muted);background:var(--bg)}
.tag.buy{color:var(--brand);border-color:rgba(245,195,68,.35)}
.tag.tin{color:var(--up);border-color:rgba(46,204,143,.3)}
.tag.tout{color:var(--warn);border-color:rgba(255,138,61,.3)}
.tag.pend{color:var(--warn);border-color:rgba(255,138,61,.3)}
.muted{color:var(--muted)}

/* ---- alert ---- */
.alert{background:rgba(255,138,61,.07);border:1px solid rgba(255,138,61,.28);border-radius:var(--r);padding:13px 16px;margin-bottom:16px;font-size:13px;color:#ffc9a0}
.alert a{color:#ffd08a;cursor:pointer;text-decoration:underline}
/* Rojo, no naranja: esto no es un "revisa cuando puedas", es "los numeros que
   estas viendo no valen". */
.alert.grave{background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.35);color:#ffb4b4}
.alert.grave a{color:#ffd0d0}
/* Ventana temporal que no cabe en el historico: la cifra es real pero no es la
   que su etiqueta promete, asi que se pinta apagada y con la fecha real. */
.per.parcial .vl{opacity:.5}
.per.parcial .lb{color:var(--dim)}
.per .warn{display:block;font-size:10px;color:var(--dim);margin-top:2px;letter-spacing:0}

/* ---- traspasos ---- */
.pair{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:var(--bg);flex-wrap:wrap}
.pair .leg{flex:1;min-width:210px}
.pair .leg .d{font-size:11.5px;color:var(--dim)}
.pair .leg .n{font-size:13px;margin:2px 0}
.pair .leg .a{font-weight:600;font-variant-numeric:tabular-nums}
.pair .arrow{color:var(--dim);font-size:18px}
.pair .meta{font-size:11.5px;color:var(--muted);min-width:120px}
.pair .acts{display:flex;gap:7px}
.pair button{font:inherit;font-size:12.5px;padding:6px 12px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--surface2);color:var(--muted)}
.pair button.sel-t{background:rgba(46,204,143,.14);border-color:var(--up);color:var(--up)}
.pair button.sel-p{background:rgba(245,195,68,.14);border-color:var(--brand);color:var(--brand)}
.conf{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--line)}
.conf.alta{color:var(--up);border-color:rgba(46,204,143,.3)}
.conf.media{color:var(--warn);border-color:rgba(255,138,61,.3)}
.conf.baja{color:var(--down);border-color:rgba(240,97,109,.3)}

/* ---- subida de CSV ---- */
.upload{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1.5px dashed var(--line);border-radius:11px;padding:18px;background:var(--bg);
  transition:.15s;
}
.upload.over{border-color:var(--brand);background:rgba(245,195,68,.06)}
.up-txt{flex:1;min-width:240px;display:flex;flex-direction:column;gap:3px}
.up-txt b{font-size:13.5px;font-weight:600}
.up-txt span{font-size:12.5px;color:var(--muted)}
.up-txt a{color:var(--brand);cursor:pointer;text-decoration:underline}
.up-result{margin-top:12px;padding:12px 15px;border-radius:11px;font-size:13px;line-height:1.6}
.up-result.ok{background:rgba(46,204,143,.07);border:1px solid rgba(46,204,143,.28);color:#8fe3bf}
.up-result.err{background:rgba(240,97,109,.07);border:1px solid rgba(240,97,109,.3);color:#f2a0a6}
.up-result .force{margin-top:10px;background:none;border:1px solid rgba(240,97,109,.45);
  color:#f2a0a6;font:inherit;font-size:12.5px;padding:6px 13px;border-radius:8px;cursor:pointer}
.up-result .force:hover{background:rgba(240,97,109,.12)}

/* ---- search ---- */
.search{position:relative;flex:1;max-width:420px}
.search input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);font:inherit;padding:9px 13px;border-radius:9px;outline:none}
.search input:focus{border-color:var(--brand)}
.results{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--surface2);border:1px solid var(--line);border-radius:11px;max-height:320px;overflow-y:auto;z-index:50;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.results div{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.results div:last-child{border-bottom:0}
.results div:hover{background:var(--surface)}
.results .sym{font-weight:600;color:var(--brand);margin-right:7px}
.results .ex{float:right;font-size:11px;color:var(--dim)}
.quick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.quick button{background:var(--bg);border:1px solid var(--line);color:var(--muted);font:inherit;font-size:12px;padding:5px 11px;border-radius:20px;cursor:pointer}
.quick button:hover{color:var(--txt);border-color:var(--brand)}

/* ---- mercados: dos columnas ---- */
.mkt{display:grid;grid-template-columns:288px 1fr;gap:16px;align-items:start}
@media(max-width:1080px){.mkt{grid-template-columns:1fr}}
.card.watch{position:sticky;top:26px}
.search.wfull{max-width:none;margin-bottom:11px}
.tk h2{font-size:16px;font-weight:640;letter-spacing:-.3px}
.tk-sub{font-size:11.5px;color:var(--dim);margin-top:2px}
.tk-r{text-align:right}
.tk-px{font-size:21px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tk-ch{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.tk-ch .per-lb{color:var(--muted);font-weight:400;font-size:11.5px}
.tk-day{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:2px}
/* Va dentro de .pills, y '.pills button' tiene mas especificidad que '.fav':
   sin calificarlo con el elemento, le ganaba el 'border:0' y el boton acababa
   pareciendo un filtro de periodo mas. */
.pills button.fav{
  background:var(--surface2); border:1px solid rgba(245,195,68,.45); color:var(--brand);
  font-size:13px; padding:7px 16px; border-radius:20px; cursor:pointer;
  margin-left:auto; font-weight:550;
}
.pills button.fav:hover{background:rgba(245,195,68,.16);border-color:var(--brand);color:var(--brand)}
.pills button.fav.on{background:rgba(245,195,68,.2);border-color:var(--brand);color:#ffe6a8}

/* ---- grupos de favoritos ---- */
.wgrp{margin-top:10px}
.wgrp:first-child{margin-top:2px}
.wgh{display:flex;align-items:center;gap:7px;padding:6px 2px;cursor:pointer;
  font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--line);user-select:none}
.wgh:hover{color:var(--txt)}
.wgh .cv{font-size:9px;transition:transform .15s;display:inline-block}
.wgh.plegado .cv{transform:rotate(-90deg)}
.wgh .n{flex:1;font-weight:600}
.wgh .ct{background:var(--surface2);border-radius:20px;padding:1px 7px;font-size:10.5px;letter-spacing:0}
.wgrp.plegado .wrow{display:none}

/* Reordenar arrastrando */
.wgh .grip{color:var(--dim);font-size:11px;cursor:grab;opacity:0;transition:opacity .13s;letter-spacing:-2px}
.wgh:hover .grip{opacity:1}
.wgh:active .grip{cursor:grabbing}
.wgrp.arrastrando{opacity:.45}
.wgrp.arrastrando .wgh{background:var(--surface2);border-radius:7px}
.wgh .mv{color:var(--dim);font-size:9px;padding:2px 4px;border-radius:5px;cursor:pointer;letter-spacing:0}
.wgh .mv:hover{color:var(--brand);background:var(--surface2)}
.wsel{background:var(--surface2);border:1px solid var(--line);color:var(--muted);font:inherit;
  font-size:11px;padding:3px 5px;border-radius:7px;max-width:118px;cursor:pointer}
.wsel:focus{border-color:var(--brand);color:var(--txt);outline:none}

.wrow{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid rgba(36,39,46,.6);cursor:pointer}
.wrow:last-child{border-bottom:0}
.wrow:hover{background:var(--surface2)}
.wrow .n{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrow .p{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}
.wrow .c{font-size:11.5px;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.wrow .x{color:var(--dim);font-size:14px;padding:0 2px}
.wrow .x:hover{color:var(--down)}

/* ---- ficha del instrumento ---- */
.rng{margin-bottom:14px}
.rng-lb{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.rng-lb b{color:var(--txt);font-weight:550}
.rng-bar{position:relative;height:4px;background:var(--surface2);border-radius:3px}
.rng-bar i{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--brand);transform:translateX(-50%);box-shadow:0 0 0 3px var(--surface)}
.rng-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:5px;
  font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:14px}
.kv div{background:var(--surface);padding:11px 13px;display:flex;justify-content:space-between;gap:10px}
.kv span{font-size:12px;color:var(--muted)}
.kv b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- mapa de calor ---- */
.chart.huge{height:min(72vh,720px)}
.heat-scale{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;
  font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.heat-scale .grad{width:190px;height:7px;border-radius:4px;display:inline-block;
  background:linear-gradient(90deg,#d1414d,#3a2528,#2a2e33,#243a30,#22a36b)}

/* ---- alertas ---- */
.badge{margin-left:auto;background:var(--warn);color:#0a0b0d;font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
.aform{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:14px}
.inp{background:var(--surface);border:1px solid var(--line);color:var(--txt);font:inherit;
  font-size:13px;padding:7px 11px;border-radius:9px;outline:none;width:130px}
.inp.wide{flex:1;min-width:230px;width:auto}
.inp:focus{border-color:var(--brand)}
.ghost.prim{background:rgba(245,195,68,.15);border-color:rgba(245,195,68,.4);color:#ffe0a0}
.arow{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid rgba(36,39,46,.6);flex-wrap:wrap}
.arow:last-child{border-bottom:0}
.arow .a-n{flex:1;min-width:170px}
.arow .a-n b{display:block;font-size:13px}
.arow .a-n span{font-size:11.5px;color:var(--dim)}
.arow .a-c{font-size:12.5px;font-variant-numeric:tabular-nums;min-width:150px}
.arow .a-b{display:flex;gap:7px}
.arow .a-b button{font:inherit;font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface2);color:var(--muted)}
.arow .a-b button:hover{color:var(--txt)}
.state{font-size:10.5px;padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
.state.armada{color:var(--brand);border-color:rgba(245,195,68,.35)}
.state.saltada{color:var(--warn);border-color:rgba(255,138,61,.4)}

/* ---- noticias ---- */
.nrow{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(36,39,46,.6);
  text-decoration:none;color:inherit}
.nrow:last-child{border-bottom:0}
.nrow:hover{background:var(--surface2)}
.nrow img{width:64px;height:48px;flex:0 0 64px;object-fit:cover;border-radius:8px;background:var(--surface2)}
.nrow .nt{flex:1;min-width:0}
.nrow .nt b{display:block;font-size:13px;font-weight:550;line-height:1.35;margin-bottom:3px}
.nrow .nt p{font-size:11.5px;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nrow .nt small{font-size:11px;color:var(--dim)}

/* ---- fiscal ---- */
.alert.info{background:rgba(245,195,68,.06);border-color:rgba(245,195,68,.25);color:#ffe0a0}

/* ---- comparador ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  color:var(--muted);font:inherit;font-size:12.5px;padding:7px 13px;border-radius:20px;cursor:pointer;
  transition:.13s}
.chip:hover{color:var(--txt)}
.chip.on{color:var(--txt);border-color:transparent}
.chip .dotc{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:0 0 8px}
.chip.on .dotc{background:var(--c)}
.chip.on{background:color-mix(in srgb, var(--c) 14%, transparent);border-color:color-mix(in srgb, var(--c) 45%, transparent)}
.chip .grp{font-size:10.5px;color:var(--dim)}

.corr{border-collapse:separate;border-spacing:2px}
.corr th{padding:0 8px 8px;font-size:11px;text-align:center;border:0;text-transform:none;letter-spacing:0}
/* La esquina superior izquierda va vacia: es td para no ser una cabecera sin
   ambito, pero se peina como las de la fila de cabecera y no como un dato. */
.corr td.lft{padding:0 8px 8px;background:none;text-align:left}
.corr td{padding:9px 10px;text-align:center;border:0;border-radius:7px;font-size:12.5px;font-weight:600}
.corr .lbl{text-align:left;background:none;font-weight:400;font-size:12.5px;color:var(--muted);
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;padding:9px 10px}

/* ---- misc ---- */
.legend{display:flex;gap:18px;font-size:12px;color:var(--muted);margin-top:10px;padding-left:4px}
.legend .mk{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.mk.buy{background:var(--brand)} .mk.tin{background:var(--up)} .mk.tout{background:var(--warn)}
.toast{position:fixed;bottom:22px;right:22px;background:var(--surface2);border:1px solid var(--line);padding:11px 17px;border-radius:11px;font-size:13px;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:100}

/* ---- movimiento reducido ----
   Quien lo pide en el sistema suele hacerlo por mareo o migrana, no por gusto.
   Se anulan transiciones y el latido de los esqueletos; ECharts se desactiva
   aparte, desde el JS, porque anima en canvas y el CSS no lo alcanza. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ---- objetivos tactiles ----
   Va al final del fichero a proposito: son anulaciones y con la misma
   especificidad gana la ultima regla, asi que si estuvieran en el bloque movil
   de arriba las pisarian las definiciones base, que vienen despues. */
@media(max-width:900px){
  .cmp-btn{width:44px;height:44px}
  .peso-inp,.search input,.rc-inp input{min-height:44px}
  .rc-quita{min-width:44px;min-height:44px}
  .quick button{min-height:44px;padding:5px 15px}
  .chip{min-height:44px}
  .pair .acts button{min-height:44px}
  .sel,.inp{min-height:44px}
}