/* biwEZ — aspecto de la aplicación.
   Identidad (v4.4, a petición del usuario: «moderno y futurista»): azul espacio casi negro, con un degradado de marca
   que va del cian al violeta (--grad) en lo que manda: el botón principal, tu saldo, la pestaña activa y las barras.
   Los números van en una letra de marcador. Iconos e ilustraciones propios (icons.js); ningún emoji del sistema.
   Todos los colores salen de estas variables: para cambiar la paleta solo se tocan estos tres bloques. */
:root,[data-theme=dark]{
  --bg:#060912;--bg2:#0a0f1d;--card:#0e1526;--card2:#141d33;--line:#1e2a47;--txt:#e9eefb;--mut:#93a2c2;--faint:#7282a4;
  --acc:#38d6ff;--acc2:#7ae4ff;--onacc:#04101e;--brass:#5ee0ff;
  --ok:#3ddc97;--okbg:rgba(61,220,151,.12);--bad:#ff6b88;--badbg:rgba(255,107,136,.12);
  --gold:#ffb547;--warnbg:rgba(255,181,71,.13);--blue:#8ea2ff;
  --accrgb:56,214,255;--me:rgba(var(--accrgb),.07);--meline:var(--acc);--bar:#38d6ff;--bar2:#9a6bff;--fxA:1;
  --shadow:0 18px 50px rgba(0,0,0,.55);--glow:86,160,255;--glowA:.14;--chalk:130,160,255;--chalkA:.07
}
[data-theme=light]{
  --bg:#f2f4fb;--bg2:#ffffff;--card:#ffffff;--card2:#f0f3fb;--line:#dce2f0;--txt:#0d1428;--mut:#4a5674;--faint:#66728f;
  --acc:#4f6eff;--acc2:#3f5cf0;--onacc:#ffffff;--brass:#2747d8;
  --ok:#0a7d55;--okbg:rgba(10,125,85,.10);--bad:#c62d4c;--badbg:rgba(198,45,76,.09);
  --gold:#9a5a00;--warnbg:rgba(154,90,0,.10);--blue:#3352d6;
  --accrgb:79,110,255;--me:rgba(var(--accrgb),.09);--meline:#4f6eff;--bar:#4f6eff;--bar2:#a56bff;--fxA:.3;
  --shadow:0 18px 50px rgba(20,30,70,.14);--glow:79,110,255;--glowA:.08;--chalk:60,80,170;--chalkA:.07
}
:root{
  --font:"Segoe UI Variable Text","Segoe UI",Roboto,system-ui,-apple-system,Arial,sans-serif;
  --display:Bahnschrift,"DIN Alternate",sans-serif-condensed,"Segoe UI",Roboto,sans-serif;
  --toph:64px;
  /* El degradado de la marca y la banda oscura (cabecera, tarjeta de tu saldo, pizarra, avisos): iguales en los dos temas */
  --grad:linear-gradient(110deg,#38d6ff 0%,#6c8cff 52%,#a56bff 100%);--ongrad:#04101e;
  --band1:#080d1c;--band2:#121b3c;--band3:#0b1126;--bandline:#27376a;--bandrgb:86,110,255;--ez:#38d6ff;--ez2:#7ae4ff
}
[data-theme=dark]{color-scheme:dark}
[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:transparent;min-height:100vh;color:var(--txt);font:14px/1.5 var(--font)}
button,input,select{font:inherit;color:inherit}
.muted{color:var(--mut)}
b{font-weight:650}
[hidden]{display:none !important}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Iconos */
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
[data-ic]{display:inline-flex;flex:none}
.pin .ic,.up .ic,.down .ic,.warnc .ic{margin-right:4px}

/* ---------- Cabecera: la banda verde de la marca, igual en los dos temas ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--toph);padding:10px 24px;color:#eef3ee;
  background:linear-gradient(100deg,var(--band1),var(--band2) 60%,var(--band3));
  border-bottom:1px solid var(--bandline)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brandtxt{min-width:0}
img.logo{display:block;width:40px;height:40px;border-radius:11px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.title{font:700 20px/1.15 var(--display);letter-spacing:.01em;color:#f3f6f4}
.title .ez{color:var(--ez)}
.sub{color:rgba(255,255,255,.68);font-size:12.5px}
.actions{display:flex;align-items:center;gap:8px}
.when{color:rgba(255,255,255,.68);font-size:12px;margin-right:6px;white-space:nowrap}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 14px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover:not(:disabled){border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--glow),.12)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--onacc);font-weight:700}
.btn.primary:hover:not(:disabled){background:var(--acc2);border-color:var(--acc2);box-shadow:0 0 0 3px rgba(var(--accrgb),.25)}
.btn.icon{width:36px;height:36px;padding:0}
.btn.icon .ic{width:18px;height:18px}
.btn.mini{padding:4px 10px;font-size:12.5px;border-radius:7px;gap:4px}
.btn .caret{margin-left:-2px;opacity:.7}
.btn .caret .ic,.ic.caret{width:14px;height:14px}
.btn.primary.spin .ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.top .btn:not(.primary){background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#eef3ee}
.top .btn:not(.primary):hover:not(:disabled){background:rgba(255,255,255,.13);border-color:var(--ez);box-shadow:none}
#accBtn{max-width:190px}

/* Menús desplegables */
.menu{position:relative}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:230px;z-index:30}
.menu-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.menu-list button:hover{background:var(--card2)}
.menu-list .ic{color:var(--mut);width:17px;height:17px}
.sw{position:relative;flex:none;width:30px;height:17px;border-radius:999px;background:var(--line);transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--mut);transition:transform .15s,background .15s}
.sw.on{background:var(--acc)}
.sw.on::after{transform:translateX(13px);background:var(--onacc)}
.accinfo{padding:10px 12px;font-size:12.5px;color:var(--mut);border-bottom:1px solid var(--line);line-height:1.5;min-width:230px;margin-bottom:4px}

/* ---------- Avisos y comprobaciones ---------- */
.checks{display:flex;flex-wrap:wrap;gap:8px;padding:14px 24px 0}
.checks:empty,.kpis:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.chip .ic{width:14px;height:14px;stroke-width:2.4}
.chip.ok{background:var(--okbg);border-color:transparent;color:var(--ok);font-weight:600}
.chip.bad{background:var(--badbg);border-color:transparent;color:var(--bad);font-weight:600}
.chip.warn{background:var(--warnbg);border-color:transparent;color:var(--gold)}
.stale{margin:14px 24px 0;border-radius:12px;padding:12px 16px;font-weight:600}
.stale.warm{background:var(--warnbg);color:var(--gold)}
.stale.old{background:var(--badbg);color:var(--bad)}
.err{background:var(--badbg);color:var(--bad);border-radius:12px;padding:14px 18px;font-weight:600;margin:14px 24px 0}
.setup{margin:14px 24px 0;border-radius:12px;padding:14px 18px;background:var(--card);border:1px solid var(--gold)}
.setup p{margin:0 0 10px}

/* ---------- Tarjetas de resumen ---------- */
.kpis{display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr));gap:12px;padding:14px 24px}
@media (max-width:1150px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.kpi .k{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12.5px}
.kpi .k .ic{width:16px;height:16px;color:var(--faint)}
.kpi .v{display:flex;align-items:center;gap:8px;font:600 24px/1.25 var(--display);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v .ell{flex:1}
.kpi .s{color:var(--mut);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Tu saldo: la tarjeta que manda, con el verde y el latón de la marca */
.kpi.me{background:linear-gradient(135deg,var(--band2),var(--band1));border-color:var(--bandline);color:#f1f5f1}
.kpi.me::after{content:"";position:absolute;right:-46px;top:-46px;width:132px;height:132px;border-radius:50%;border:1.5px solid rgba(233,242,236,.12);pointer-events:none}
.kpi.me .k,.kpi.me .s{color:rgba(255,255,255,.72)}
.kpi.me .k .ic{color:var(--ez)}
.kpi.me .v{font-size:28px;color:var(--ez2)}
.kpi.me .up{color:#7fe0b0}.kpi.me .down{color:#ffa1a8}

/* ---------- Pestañas ---------- */
.tabs{display:flex;gap:2px;padding:0 20px;background:var(--bg2);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:13px 14px;cursor:pointer;color:var(--mut);font-weight:600;white-space:nowrap}
.tabs button .ic{width:17px;height:17px;color:var(--faint)}
.tabs button:hover{color:var(--txt)}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--acc);transform:scaleX(0);transition:transform .2s ease}
.tabs button.on{color:var(--txt)}
.tabs button.on .ic{color:var(--brass)}
.tabs button.on::after{transform:scaleX(1)}
.tabs button.alert::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bad);order:2}

main{padding:18px 24px 30px}

/* Pantalla inicial: la pizarra del campo */
.empty{text-align:center;padding:36px 20px 60px;color:var(--mut)}
.emptyart{max-width:440px;margin:0 auto 22px}
.art{display:block;width:100%;height:auto;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--band2),var(--band1));box-shadow:var(--shadow)}
.art .tk{fill:var(--ez);stroke:var(--band1);stroke-width:3}
.art .rv{fill:var(--band3);stroke:rgba(233,242,236,.75);stroke-width:2}
.art .pr{fill:var(--band1);stroke:var(--ez);stroke-opacity:.7}
.art .pt{fill:#fff;font:700 12.5px var(--display)}
.art .mv{fill:none;stroke:var(--ez);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.emptyh{margin:0 0 10px;font:700 24px/1.2 var(--display);color:var(--txt);letter-spacing:.01em}
.empty p{max-width:52ch;margin:0 auto 6px}

/* ---------- Barra de herramientas ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.toolbar .grow{flex:1}
.input{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 12px;color:var(--txt);outline:none;min-width:220px}
.input:focus,.input:focus-visible{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--glow),.16)}
.input::placeholder{color:var(--faint)}
#q,#mkq{padding-left:36px;background-repeat:no-repeat;background-position:11px 50%;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9b92' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E")}
select.input{min-width:170px}
.range{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13px}
.range input{accent-color:var(--acc)}
.note{color:var(--mut);font-size:12.5px}
.lbl{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-size:13px}
.lbl.chk{cursor:pointer;color:var(--txt)}
.lbl.chk input{accent-color:var(--acc);width:16px;height:16px}
.summary{margin:0 0 12px}
.lnk{color:var(--blue);cursor:pointer;font-weight:600;text-decoration:none}
.lnk:hover{text-decoration:underline}
h3.blk{margin:22px 0 8px;font:700 17px/1.3 var(--display);letter-spacing:.01em}
td .sub,.step .sub{color:var(--mut);font-size:11.5px;font-weight:400}

/* ---------- Tablas ---------- */
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:clip}
table{width:100%;border-collapse:collapse}
th{position:sticky;top:var(--toph);z-index:3;background:var(--card2);text-align:left;color:var(--mut);font-weight:600;font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
th.sort{cursor:pointer}
th.sort:hover{color:var(--txt)}
th .arr{margin-left:3px;color:var(--brass)}
th .arr .ic{width:12px;height:12px;stroke-width:2.6}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:var(--card2)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--brass)}
tbody tr.plain{cursor:default}
tr.me td{background:var(--me)}
tr.me td:first-child,tr.me:hover td:first-child{box-shadow:inset 3px 0 0 var(--meline)}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.n,.li .n,.step .n,.amt{font-family:var(--display);font-size:14.5px;letter-spacing:.01em}
td.n .sub,.step .n .sub{font-family:var(--font);letter-spacing:0}
.rank{color:var(--faint);width:30px;font-variant-numeric:tabular-nums}
.who{display:inline-flex;align-items:center;gap:9px;font-weight:600;white-space:nowrap}
.who .nm{max-width:240px}
.you{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;color:var(--onacc);background:var(--acc);border-radius:5px;padding:1px 6px;vertical-align:1px}
.moneycell{min-width:200px}
.bar{position:relative;height:6px;border-radius:4px;background:var(--line);margin-top:6px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:linear-gradient(90deg,var(--bar),var(--bar2))}
.bar i.lo{background:var(--bar2)}
.bar i.hi{background:var(--ok);opacity:.6}
.delta{font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.up{color:var(--ok)}.down{color:var(--bad)}.zero{color:var(--faint)}.warnc{color:var(--gold)}
.pin{font-size:12px;color:var(--mut);white-space:nowrap}
.pin .ic{width:13px;height:13px;stroke-width:2.4}
.pin.ok{color:var(--ok)}
.pin.warn{color:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--card2);border:1px solid var(--line);white-space:nowrap}
.tag.off{color:var(--faint);border-style:dashed}
.tag.prob{border-color:var(--gold);color:var(--gold)}
td.prev{font-size:12.5px;color:var(--mut);min-width:200px}
.pos{display:inline-block;min-width:28px;text-align:center;font:700 11px/1.3 var(--display);letter-spacing:.04em;border-radius:5px;padding:2px 5px;color:#fff;background:#5f7184;vertical-align:1px}
.pos.p1{background:#a8741a}.pos.p2{background:#2a6aa3}.pos.p3{background:#2c7d57}.pos.p4{background:#b53a44}.pos.p5{background:#6a4fb0}
.pst{display:inline-flex;vertical-align:-3px;margin-left:2px}
.pst .ic{width:15px;height:15px;stroke-width:2.2}
.pst.s-injured{color:var(--bad)}.pst.s-doubt{color:var(--gold)}.pst.s-sanctioned{color:#e5484d}.pst.s-warned{color:#f2c14e}

/* Fotos de los mánagers */
.av{position:relative;flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;box-shadow:0 0 0 2px var(--line);vertical-align:middle;background:var(--card2)}
.av img,.av .av-ini{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av .av-ini{display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px}
.av.sm{width:26px;height:26px}
.av.lg{width:56px;height:56px;box-shadow:0 0 0 3px var(--acc)}
.av.lg .av-ini{font-size:20px}
tr.me .av{box-shadow:0 0 0 2px var(--meline)}
.dhl{display:flex;align-items:center;gap:14px}

/* ---------- Simulador ---------- */
.simbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.simrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.siminput{font:600 24px/1.2 var(--display);width:190px;text-align:right}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick button{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:12.5px}
.quick button:hover{border-color:var(--brass)}
.simbox .quick{margin-top:10px}
.simbox .note{margin-top:8px}
.verdict{margin-top:12px;font-size:15px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:12px}
@media (max-width:1250px){.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:950px){.cols3{grid-template-columns:1fr}}
@media (max-width:700px){.cols4{grid-template-columns:1fr}}
.group{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
.group h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:15px}
.group .gs{color:var(--mut);font-size:12.5px;margin-bottom:10px}
.gdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--faint)}
.group.g1{border-top:3px solid var(--bad)}.group.g1 .gdot{background:var(--bad)}
.group.g2{border-top:3px solid #f2c14e}.group.g2 .gdot{background:#f2c14e}
.group.g4{border-top:3px solid #f08a3c}.group.g4 .gdot{background:#f08a3c}
.group.g3{border-top:3px solid var(--ok)}.group.g3 .gdot{background:var(--ok)}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 6px;border-bottom:1px dashed var(--line);border-radius:8px;cursor:pointer;transition:background .12s}
.li:last-child{border-bottom:0}
.li:hover{background:var(--card2)}
.li .who{min-width:0;flex:1}
.li .who .nm{max-width:none}
.li .n{flex:none;white-space:nowrap;text-align:right}
.ladder{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.step{display:grid;grid-template-columns:minmax(150px,260px) 1fr auto auto;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step.below{opacity:.62}
.step .who{cursor:pointer}
.step .n{text-align:right}
@media (max-width:800px){.step{grid-template-columns:1fr auto auto}.step .sub.ell{display:none}}
details.bands{margin-top:16px}
details.bands summary{cursor:pointer;font-weight:650;padding:8px 0}

/* ---------- Movimientos ---------- */
.day{margin:20px 0 8px;color:var(--mut);font-size:12.5px;font-weight:700}
.feed{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fi{display:grid;grid-template-columns:52px 32px 1fr auto;gap:10px;align-items:start;padding:10px 14px;border-bottom:1px solid var(--line);transition:background .12s}
.fi:last-child{border-bottom:0}
.fi:hover{background:var(--card2)}
.fi .t{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;padding-top:5px}
.fi .i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--card2);color:var(--mut)}
.fi .i .ic{width:16px;height:16px}
.fi .x{min-width:0;padding-top:4px}
.fi .bids{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
.fi .amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:4px}
.k-compra .i{background:rgba(124,192,238,.14);color:var(--blue)}
.k-venta .i{background:var(--okbg);color:var(--ok)}
.k-entre .i,.k-bonus .i{background:rgba(var(--accrgb),.16);color:var(--brass)}
.k-cesion .i,.k-intercambio .i{background:rgba(150,130,230,.16);color:#9d8cf0}
[data-theme=light] .k-cesion .i,[data-theme=light] .k-intercambio .i{color:#5b45b5}
.k-jornada .i{background:var(--warnbg);color:var(--gold)}
.k-anulada .i{background:var(--badbg);color:var(--bad)}
.more{display:flex;margin:14px auto 0}

/* ---------- Ficha lateral ---------- */
.scrim{position:fixed;inset:0;background:rgba(4,10,8,.55);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--bg2);border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:50;overflow:auto;animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(40px);opacity:.6}}
.drawer-in{padding:20px 22px 30px}
.dh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dh h2{margin:0;font:700 22px/1.2 var(--display);letter-spacing:.01em}
.dh .meta{color:var(--mut);font-size:13px;margin-top:2px}
.dbig{font:700 36px/1.15 var(--display);margin:16px 0 2px;font-variant-numeric:tabular-nums;color:var(--brass)}
.spark{width:100%;height:120px;margin:10px 0 4px;display:block}
.spark .ln{fill:none;stroke:var(--bar2);stroke-width:2}
.spark .ar{fill:var(--bar2);opacity:.12}
.spark .dt{fill:var(--bar2)}
.sparklbl{display:flex;justify-content:space-between;color:var(--faint);font-size:11.5px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat .k{color:var(--mut);font-size:12px}
.stat .v{font:600 17px/1.3 var(--display);margin-top:2px;font-variant-numeric:tabular-nums}
.sec{margin:20px 0 8px;font:700 15px/1.3 var(--display);letter-spacing:.01em}
.mini{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mini .r{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.mini .r:last-child{border-bottom:0}
.mini .r .l{min-width:0}
.mini .r .d{color:var(--faint);font-size:11.5px}
.mini.prof .r{display:block}
.won{color:var(--ok);font-weight:650}.lost{color:var(--bad);font-weight:650}

/* ---------- Capas: espera, ventanas y avisos breves ---------- */
.overlay{position:fixed;inset:0;background:rgba(6,14,11,.66);backdrop-filter:blur(3px);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;font-size:15px}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:var(--acc);animation:spin .9s linear infinite}
.modal{position:fixed;inset:0;background:rgba(4,10,8,.6);z-index:70;display:grid;place-items:center;padding:20px}
.modal-in{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:16px;max-width:640px;padding:24px 28px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal-in h2{margin:6px 40px 10px 0;font:700 19px/1.3 var(--display);letter-spacing:.01em}
.modal-in li{margin-bottom:6px}
.close{position:absolute;top:14px;right:14px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);background:var(--band1);color:#f1f5f1;border:1px solid var(--bandline);padding:10px 18px;border-radius:10px;font-weight:600;z-index:95;box-shadow:var(--shadow)}
.toast .ic{color:var(--ez);stroke-width:2.6}

/* ---------- Fondo: el campo, a lo lejos (se quita con «Efectos visuales») ---------- */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(900px 520px at 88% -12%,rgba(var(--bandrgb),var(--fxA)),transparent 62%),radial-gradient(720px 460px at -6% 4%,rgba(var(--accrgb),.05),transparent 62%)}
.bgfx i{position:absolute;display:block}
.bgfx i:nth-child(1){width:76vmin;height:76vmin;right:-20vmin;bottom:-26vmin;border-radius:50%;border:1.5px solid rgba(var(--chalk),var(--chalkA))}
.bgfx i:nth-child(2){top:0;bottom:0;right:18vmin;width:1.5px;background:rgba(var(--chalk),var(--chalkA))}
.bgfx i:nth-child(3){width:10px;height:10px;right:calc(18vmin - 4px);bottom:calc(12vmin - 5px);border-radius:50%;background:rgba(var(--chalk),calc(var(--chalkA)*1.6))}
/* Halo suave que sigue al cursor */
.glow{position:fixed;left:0;top:0;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle closest-side,rgba(var(--glow),var(--glowA)) 0%,rgba(var(--glow),calc(var(--glowA)*.45)) 45%,rgba(var(--glow),0) 100%);
  filter:blur(14px);opacity:0;transition:opacity .5s ease;will-change:transform;mix-blend-mode:screen}
[data-theme=light] .glow{mix-blend-mode:multiply}
.glow.on{opacity:1}
.glow.press{opacity:.75}
main.enter > *{animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
[data-fx=off] .bgfx,[data-fx=off] .glow{display:none}
[data-fx=off] main.enter > *{animation:none}
@media (prefers-reduced-motion: reduce){main.enter > *,.drawer{animation:none}.tabs button::after,.sw,.sw::after{transition:none}}

/* Barra de desplazamiento y selección */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--mut) 40%,transparent);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--mut) 70%,transparent);background-clip:padding-box}
::selection{background:rgba(var(--accrgb),.35)}

/* Foco de teclado visible en todo lo que se puede pulsar */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:6px}
tbody tr:focus-visible{outline-offset:-2px}

/* ---------- Pestaña «Pujas» ---------- */
.info{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--brass);background:transparent;color:var(--brass);font:italic 700 12.5px/1 Georgia,"Times New Roman",serif;cursor:pointer;padding:0;vertical-align:2px;flex:none}
.info:hover,.info:focus-visible{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.bidwrap .stale{margin:0 0 14px}
.bidalert .btn{margin-left:10px;color:var(--txt)}
.bidbox .bt{margin:0 0 12px;font:700 17px/1.3 var(--display);letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.bidform{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(160px,.8fr) minmax(220px,1fr) auto;gap:14px;align-items:end}
.bf{display:flex;flex-direction:column;gap:6px;min-width:0}
.bf .input{min-width:0;width:100%}
.bq{display:flex;align-items:center;gap:8px}
.bq .btn{font-weight:650;border-color:var(--brass);color:var(--brass)}
.bidbox #bidsum{margin-top:12px;font-size:13.5px;line-height:1.6}
.biderr{margin:10px 0 0;padding:9px 12px;border-radius:9px;background:var(--badbg);color:var(--bad);font-weight:600}
.ba{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.ba .btn.primary{padding:9px 22px;letter-spacing:.03em}
.bidcfg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.bidcfg .bsep{width:1px;height:22px;background:var(--line);margin:0 6px}
.input.numin{min-width:0;width:64px;text-align:right;padding:6px 8px}
.bfilters{margin:0 0 12px}
.bfilters button.on{background:var(--acc);border-color:var(--acc);color:var(--onacc);font-weight:700}
.bidlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px}
.bid{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.bid.alert{border-color:var(--bad)}
.bh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.bn{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px}
.bst{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--mut)}
.bst.sch{color:var(--blue);border-color:var(--blue)}
.bst.sent{color:var(--gold);border-color:var(--gold)}
.bst.ok{color:var(--ok);background:var(--okbg);border-color:transparent}
.bst.bad{color:var(--bad);background:var(--badbg);border-color:transparent}
.bg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.bg dt{color:var(--mut);font-size:12px}
.bg dd{margin:2px 0 0;font-variant-numeric:tabular-nums}
.bnote{margin:10px 0 0;font-size:13px;color:var(--mut)}
.bnote.k-ok{color:var(--ok)}.bnote.k-warn{color:var(--gold)}.bnote.k-error{color:var(--bad)}
.blog{margin:12px 0 0;padding:10px 0 0 18px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--mut)}
.blog li{margin-bottom:5px}
.blog time{color:var(--faint);font-variant-numeric:tabular-nums;margin-right:6px}
.blog .k-ok{color:var(--ok)}.blog .k-warn{color:var(--gold)}.blog .k-error{color:var(--bad)}
.infodl{margin:0}
.infodl dt{color:var(--brass);font-weight:700;font-size:13px;margin-top:12px}
.infodl dd{margin:3px 0 0;line-height:1.55}
.infodl.confirm dt{color:var(--mut)}
#bidmodal .modal-in{min-width:min(520px,90vw)}
@media (max-width:1100px){.bidform{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bidform{grid-template-columns:1fr}.bidlist{grid-template-columns:1fr}.bq{flex-wrap:wrap}}
.biddead .btn{margin:0 0 6px 10px}
.biddead .note{font-weight:400}

/* ---------- Pantalla de acceso y suscripción ---------- */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;overflow:auto;
  background:radial-gradient(900px 520px at 88% -12%,rgba(var(--bandrgb),var(--fxA)),transparent 62%),radial-gradient(720px 460px at -6% 104%,rgba(var(--accrgb),.06),transparent 62%),var(--bg)}
.gate[hidden]{display:none}
html.locked main,html.locked .kpis,html.locked .checks,html.locked .tabs{visibility:hidden}
.gshell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);width:min(940px,100%);background:var(--bg2);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.gart{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:30px;color:#eef3ee;background:linear-gradient(150deg,var(--band2),var(--band1))}
.gart .art{box-shadow:0 18px 40px rgba(0,0,0,.4)}
.gtag{margin:0;font:700 23px/1.25 var(--display);letter-spacing:.01em;max-width:24ch}
.gpts{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:rgba(255,255,255,.78);font-size:13.5px}
.gpts li{display:flex;align-items:center;gap:10px}
.gpts .ic{width:18px;height:18px;color:var(--ez)}
.gcard{align-self:center;padding:30px 32px}
.ghead{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.gcard .title{color:var(--txt);font-size:20px}
.gcard .title .ez{color:var(--brass)}
.gcard .sub{color:var(--mut)}
.gcard h2{margin:0 0 14px;font:700 22px/1.25 var(--display);letter-spacing:.01em}
.gf{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;color:var(--mut);font-size:13px}
.gf .input{min-width:0;width:100%;font-size:15px;padding:10px 12px;background:var(--card2)}
.gbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.gbtns .btn{padding:10px 20px}
.gnote{color:var(--mut);font-size:12.5px;line-height:1.5;margin:0 0 12px}
.glinks{margin:16px 0 0;color:var(--mut);font-size:13px}
.link{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font-size:13px;text-decoration:underline}
.gerr{margin:0 0 12px;padding:9px 12px;border-radius:9px;background:var(--badbg);color:var(--bad);font-weight:600}
.ginfo{margin:0 0 12px;padding:9px 12px;border-radius:9px;background:var(--okbg);color:var(--ok);font-weight:600}
.gstate{border-radius:14px;padding:16px 18px;margin-bottom:14px;background:var(--badbg);border:1px solid var(--bad)}
.gstate .gbig{font:700 21px/1.25 var(--display);letter-spacing:.02em;color:var(--bad);margin-bottom:6px}
.gstate p{margin:0;line-height:1.5}
.gstate.pending,.gstate.unknown{background:var(--warnbg);border-color:var(--gold)}
.gstate.pending .gbig,.gstate.unknown .gbig{color:var(--gold)}
@media (max-width:820px){
  .gshell{grid-template-columns:1fr;width:min(480px,100%)}
  .gart{padding:18px 18px 4px;background:none}
  .gart .gtag,.gart .gpts{display:none}
  .gcard{padding:20px 22px 26px}
}
@media (max-height:640px) and (max-width:820px){.gart{display:none}}

/* ---------- Pantallas estrechas (media ventana junto a Biwenger, móvil) ---------- */
@media (max-width:1320px){.tablewrap{overflow-x:auto} th{position:static}}
@media (max-width:1100px){
  .top{flex-wrap:wrap;padding:10px 14px}
  .when{display:none}
  .kpis,.checks,main{padding-left:14px;padding-right:14px}
  .tabs{padding-left:8px;padding-right:8px}
  .stale,.err,.setup{margin-left:14px;margin-right:14px}
  .toolbar .note{display:none}
  .who .nm{max-width:150px}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
  .actions{flex-wrap:wrap}
  .input{min-width:0;width:100%}
  .bt-txt{display:none}
  #accBtn{max-width:130px}
  .emptyh{font-size:21px}
  .bgfx i{display:none}
}
/* Monitores muy anchos: el contenido no se estira sin límite */
@media (min-width:1900px){
  .kpis,.checks,main,.stale,.err,.setup{max-width:1800px;margin-left:auto;margin-right:auto}
  .tabs,.top{padding-left:max(24px,calc((100vw - 1800px)/2 + 24px));padding-right:max(24px,calc((100vw - 1800px)/2 + 24px))}
}
/* Dentro de la app de Android la barra del móvil ya lleva el logo y el nombre */
html.native .brand .logo,html.native .brand .title{display:none}
.native-only{display:none}
html.native .native-only{display:block}
html.native .web-only{display:none}

/* ================= Estilo moderno y futurista: lo que no es solo un color ================= */
/* Cabecera de cristal oscuro con un filo de luz */
.top{background:linear-gradient(180deg,rgba(9,14,30,.94),rgba(7,11,24,.88));backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:0}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#38d6ff 18%,#6c8cff 50%,#a56bff 82%,transparent);opacity:.75;pointer-events:none}
html.native .top{position:relative}
.title .ez{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gcard .title .ez{color:transparent}
/* Lo principal lleva el degradado de la marca */
.btn.primary{background:var(--grad);border-color:transparent;color:var(--ongrad);box-shadow:0 6px 22px rgba(86,140,255,.32)}
.btn.primary:hover:not(:disabled){background:var(--grad);border-color:transparent;filter:brightness(1.1);box-shadow:0 8px 28px rgba(86,140,255,.5)}
.tabs button::after{background:var(--grad)}
.you,.bfilters button.on{background:var(--grad);border-color:transparent;color:var(--ongrad)}
.sw.on{background:var(--grad)}
.sw.on::after{background:var(--ongrad)}
.bar i{box-shadow:0 0 10px rgba(var(--accrgb),.4)}
.bar i.hi{box-shadow:none}
.dbig{display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.av.lg{box-shadow:0 0 0 3px var(--acc),0 0 22px rgba(var(--accrgb),.45)}
/* Tu saldo: borde de luz y cifra en degradado */
.kpi.me{background:linear-gradient(135deg,var(--band2),var(--band1)) padding-box,var(--grad) border-box;border:1px solid transparent;box-shadow:0 12px 40px rgba(86,140,255,.2)}
.kpi.me .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi.me::after{border-color:rgba(122,228,255,.16)}
/* Paneles con un punto de profundidad */
[data-theme=dark] .kpi:not(.me),[data-theme=dark] .tablewrap,[data-theme=dark] .simbox,[data-theme=dark] .group,[data-theme=dark] .feed,[data-theme=dark] .bid,[data-theme=dark] .ladder{background:color-mix(in srgb,var(--card) 86%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.toast{border-color:rgba(108,140,255,.55);box-shadow:0 10px 36px rgba(86,140,255,.3)}
/* Fondo: auroras suaves y una cuadrícula que se pierde hacia abajo */
.bgfx{background:
  radial-gradient(860px 500px at 86% -10%,rgba(108,140,255,calc(var(--fxA)*.22)),transparent 62%),
  radial-gradient(720px 460px at -6% 10%,rgba(56,214,255,calc(var(--fxA)*.11)),transparent 62%),
  radial-gradient(900px 560px at 55% 118%,rgba(165,107,255,calc(var(--fxA)*.14)),transparent 60%)}
.bgfx::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(var(--chalk),var(--chalkA)) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--chalk),var(--chalkA)) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 95% 75% at 50% 0%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 95% 75% at 50% 0%,#000 25%,transparent 80%)}
/* Pantalla de acceso */
.gate{background:
  radial-gradient(860px 500px at 86% -10%,rgba(108,140,255,calc(var(--fxA)*.22)),transparent 62%),
  radial-gradient(720px 460px at -6% 104%,rgba(165,107,255,calc(var(--fxA)*.16)),transparent 62%),var(--bg)}
.gshell{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,linear-gradient(140deg,rgba(56,214,255,.7),rgba(108,140,255,.12) 38%,rgba(165,107,255,.12) 62%,rgba(165,107,255,.7)) border-box;border:1px solid transparent;box-shadow:0 30px 90px rgba(40,70,200,.25)}
.gart{background:radial-gradient(520px 320px at 12% -6%,rgba(56,214,255,.18),transparent 62%),linear-gradient(150deg,var(--band2),var(--band1))}
/* La pizarra: tablero azul con fichas de luz */
.art{background:linear-gradient(135deg,#15204a,#080d20)}
.art .tk{filter:drop-shadow(0 0 5px rgba(56,214,255,.75))}
.art .rv{fill:#0b1126;stroke:#a56bff}
.art .mv{stroke:#a56bff}
.art .pr{stroke:#38d6ff;stroke-opacity:.8}
@media (max-width:820px){.gart{background:none}}
/* En la app de Android se quitan los tres efectos más costosos de dibujar (cristal desenfocado de la cabecera, máscara de la
   cuadrícula y brillo de las fichas): con ellos el móvil simulado se cerraba solo al abrir la app la mitad de las veces,
   y en un móvil modesto solo restan fluidez. El resto del diseño es idéntico. */
html.native .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,#090e1e,#070b18)}
html.native .bgfx::before{display:none}
html.native .art .tk{filter:none}
html.native .overlay{backdrop-filter:none}
html.native .top{position:static}
html.native th{position:static}