:root{
  --bg:#f5f7fa;--panel:#ffffff;--panel-2:#eef2f6;--borde:#dde3ea;--txt:#0f1720;--sub:#5b6776;
  --acento:#0e7c66;--verde:#12a37b;--amarillo:#c99a06;--rojo:#d64545;--gris:#8a96a3;
  --sel:#e6f4ef;--mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1016;--panel:#111821;--panel-2:#17212c;--borde:#223040;--txt:#e6edf3;--sub:#8b98a8;
  --acento:#34d399;--verde:#34d399;--amarillo:#fbbf24;--rojo:#f87171;--gris:#6b7785;--sel:#15302a;
}}
:root[data-theme="dark"]{
  --bg:#0b1016;--panel:#111821;--panel-2:#17212c;--borde:#223040;--txt:#e6edf3;--sub:#8b98a8;
  --acento:#34d399;--verde:#34d399;--amarillo:#fbbf24;--rojo:#f87171;--gris:#6b7785;--sel:#15302a;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 Inter,system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}
.top{display:flex;align-items:center;gap:20px;padding:12px 20px;border-bottom:1px solid var(--borde);background:var(--panel);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-size:16px;letter-spacing:.08em}
.brand span{display:block;color:var(--sub);font-size:12px}
.tabs{display:flex;gap:4px;background:var(--panel-2);padding:3px;border-radius:9px}
.tabs button{border:0;background:none;padding:6px 14px;border-radius:7px;cursor:pointer;color:var(--sub);font-weight:500}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--txt);box-shadow:0 1px 2px #0002}
.meta{margin-left:auto;color:var(--sub);font-size:12px;font-family:var(--mono)}
.filtros{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--borde)}
.filtros input[type=search],.filtros select{background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:7px 10px;min-width:0}
#q{width:260px;max-width:100%}
.chips{display:flex;gap:4px}
.chip{border:1px solid var(--borde);background:var(--panel);border-radius:8px;padding:4px 8px;cursor:pointer;opacity:.35}
.chip.on{opacity:1}
.rango{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:12px}
.rango b{color:var(--txt);font-family:var(--mono);min-width:44px}
.rango input{width:110px;accent-color:var(--acento)}
.doble{display:flex;gap:4px}.doble input{width:80px}
.check{display:flex;gap:6px;align-items:center;color:var(--sub);font-size:13px}
.link{background:none;border:0;color:var(--acento);cursor:pointer}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0;min-height:calc(100vh - 170px)}
.tabla-wrap{min-width:0;border-right:1px solid var(--borde)}
.conteo{padding:8px 20px;color:var(--sub);font-size:12px}
.scroll{overflow:auto;max-height:calc(100vh - 200px)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;background:var(--panel);text-align:right;font-weight:600;color:var(--sub);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--borde);cursor:pointer;white-space:nowrap;user-select:none}
thead th.izq,td.izq{text-align:left}
thead th.ord::after{content:" ▾"}thead th.ord.asc::after{content:" ▴"}
tbody td{padding:7px 10px;border-bottom:1px solid var(--borde);text-align:right;white-space:nowrap;font-family:var(--mono);font-size:12.5px}
tbody td.izq{font-family:Inter,system-ui,sans-serif}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--panel-2)}
tbody tr.sel{background:var(--sel)}
.tk{font-weight:700;font-family:var(--mono)}
.emp{color:var(--sub);max-width:180px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
.pos{color:var(--verde)}.neg{color:var(--rojo)}.nd{color:var(--gris)}
.barra{display:inline-flex;align-items:center;gap:6px}
.barra i{display:inline-block;width:46px;height:5px;border-radius:3px;background:var(--panel-2);position:relative;overflow:hidden}
.barra i::before{content:"";position:absolute;inset:0;width:var(--w);background:var(--c)}
.tag{font-family:Inter,sans-serif;font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--panel-2);color:var(--sub)}
.tag.nuevo{background:var(--acento);color:var(--bg);font-weight:600}
.ficha{background:var(--panel);position:sticky;top:61px;align-self:start;max-height:calc(100vh - 61px);overflow:auto}
.vacio{color:var(--sub);padding:60px 24px;text-align:center}
.f-head{padding:16px 20px 8px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.f-head h2{margin:0;font-size:20px;font-family:var(--mono)}
.f-head p{margin:2px 0 0;color:var(--sub);font-size:13px}
.f-nav button{background:var(--panel-2);border:0;border-radius:7px;width:30px;height:30px;cursor:pointer;margin-left:4px}
.f-precio{padding:0 20px;display:flex;gap:10px;align-items:baseline}
.f-precio b{font-size:26px;font-family:var(--mono)}
#grafico{height:240px;margin:8px 12px}
.periodos{display:flex;gap:4px;padding:0 20px}
.periodos button{border:1px solid var(--borde);background:none;border-radius:6px;padding:2px 8px;font-size:12px;cursor:pointer;color:var(--sub)}
.periodos button.on{color:var(--txt);border-color:var(--acento)}
.bloque{padding:12px 20px;border-top:1px solid var(--borde);margin-top:12px}
.bloque h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sub)}
.vela{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vela div,.kpis div{background:var(--panel-2);border-radius:8px;padding:7px 9px}
.vela small,.kpis small{display:block;color:var(--sub);font-size:11px}
.vela b,.kpis b{font-family:var(--mono);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sub{display:grid;grid-template-columns:110px 1fr 48px;gap:8px;align-items:center;font-size:12.5px;margin:5px 0}
.sub i{height:6px;background:var(--panel-2);border-radius:3px;position:relative;overflow:hidden}
.sub i::before{content:"";position:absolute;inset:0;width:var(--w);background:var(--acento)}
.sub span:last-child{font-family:var(--mono);text-align:right;color:var(--sub)}
.aviso{background:color-mix(in srgb,var(--amarillo) 14%,transparent);border-left:3px solid var(--amarillo);padding:8px 10px;border-radius:6px;font-size:12.5px;margin-top:8px}
.motivo{font-size:13px;color:var(--sub)}
.pie{padding:14px 20px;color:var(--sub);font-size:12px;border-top:1px solid var(--borde)}
.cerrar{display:none}
@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .ficha{position:fixed;inset:auto 0 0 0;top:auto;max-height:85vh;border-top:1px solid var(--borde);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px #0006;transform:translateY(100%);transition:transform .2s;z-index:10}
  .ficha.abierta{transform:none}
  .cerrar{display:inline-block}
  .top,.filtros{padding-left:16px;padding-right:16px}
  .meta{margin-left:0;width:100%}
  #q{width:100%}
  .col-opc{display:none}
  .scroll{max-height:none}
  .rango{width:100%}
  .rango input,.doble{flex:1;min-width:0}
  .doble input{width:auto;flex:1;min-width:0}
  .f-precio{flex-wrap:wrap}
}
html,body{overflow-x:hidden}

.punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verde);margin-right:6px;vertical-align:middle;animation:late 2s infinite}
@keyframes late{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.punto{animation:none}}