/* Buscador — workspace layout (carril de filtros + tabla).
   Sólo layout; todos los colores salen de tokens.css. */

/* ---- cabecera compacta ---- */
.vhero{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:24px;align-items:center;padding:10px 20px 16px}
.vhero .field{height:44px}
.vhero .field input{font-size:15px}
.stuck{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-bottom:1px solid var(--border-strong);background:color-mix(in oklab,var(--chrome-dim) 55%,var(--surface));box-shadow:var(--shadow-1)}
.stuck .q{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border-strong);font-size:14px;font-weight:500;color:var(--text);min-width:0}
.stuck .q .k{color:var(--text-3)}
.stuck .n{font-size:15px;font-weight:600;white-space:nowrap}

/* ---- rejilla del espacio de trabajo ---- */
.ws{display:grid;grid-template-columns:248px minmax(0,1fr);align-items:stretch;border-top:1px solid var(--border-strong)}
.ws>*{min-width:0}

/* ---- carril de filtros ---- */
.rail{border-right:1px solid var(--border);background:var(--surface)}
.rail-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.rail-h .mo{margin:0}
.rail-h a{margin-left:auto;font-size:13px;font-weight:600}
.fgrp{padding:14px 16px;border-bottom:1px solid var(--border)}
.fgrp .mi{margin:0 0 10px;display:flex;align-items:center;gap:8px}
.fgrp .mi .ar{margin-left:auto;color:var(--text-3);font-size:12px}
.fgrp .mi .act{margin-left:auto;color:var(--accent-hi);letter-spacing:0;text-transform:none;font-size:12px;font-weight:600}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rail .pill{min-width:0;height:32px;padding:0 4px;font-size:13px}
.subpos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text-2)}
.opt .box{width:15px;height:15px;border-radius:3px;border:1px solid var(--border-strong);background:var(--surface-2);display:grid;place-items:center;font-size:9px;line-height:1;color:var(--accent-hi);flex:none}
.opt.on{color:var(--text)}
.opt.on .box{background:var(--accent-dim);border-color:var(--accent)}
.opt .n{margin-left:auto;font-size:12px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.more{display:inline-block;margin-top:11px;font-size:13px;font-weight:600}
.rngv{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;color:var(--text)}
.rngv small{font-size:12px;font-weight:500;color:var(--text-3)}
.tgl{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.sw{width:34px;height:20px;border-radius:99px;background:var(--surface-3);position:relative;flex:none}
.sw i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:99px;background:var(--text-3)}
.sw.on{background:var(--accent-dim);box-shadow:inset 0 0 0 1px var(--accent)}
.sw.on i{left:17px;background:var(--accent-hi)}

/* ---- barra de resultados ---- */
.rbar{display:flex;align-items:center;gap:10px;padding:11px 20px;border-bottom:1px solid var(--border)}
.rbar .n{font-size:19px;font-weight:600;white-space:nowrap}
.rbar .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.seg{display:flex;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
.seg a{height:32px;padding:0 11px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--text-2);border-right:1px solid var(--border-strong)}
.seg a:last-child{border-right:0}
.seg a.on{background:var(--accent-dim);color:var(--accent-hi)}
.sbtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
.sbtn:hover{color:var(--text);border-color:var(--chrome)}
.sbtn.on{color:var(--accent-hi);border-color:var(--accent);background:var(--accent-dim)}

/* ---- tabla ---- */
.trow{cursor:pointer;position:relative;display:grid;grid-template-columns:20px 22px minmax(0,1fr) 38px 38px 96px 46px 52px 52px 66px 62px 58px;gap:12px;align-items:center;padding:8px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.trow:hover{background:var(--surface-2)}
.trow.sel{background:var(--surface-2)}
.thead{background:var(--bg);border-bottom:1px solid var(--border-strong);padding-top:9px;padding-bottom:9px}
.thead span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:4px}
.thead .r{justify-content:flex-end}
.thead .s{color:var(--accent-hi)}
.tick{color:var(--text-3);font-size:13px}
.tick.on{color:var(--accent-hi)}
.rnum{font-size:12px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.pcell{display:flex;gap:10px;align-items:center;min-width:0}
.pcell>span:last-child{min-width:0}
.pnm{display:flex;align-items:center;gap:7px;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.pnm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psub{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden}
.posb{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:18px;padding:0 5px;border-radius:3px;background:var(--surface-2);border:1px solid var(--border-strong);font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--text-2);flex:none}
.vnum{font-size:13px;font-weight:600;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.potn{font-size:15px;font-weight:800;color:var(--r5t);text-align:right;font-variant-numeric:tabular-nums}
.cex{justify-self:end;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:rgba(134,142,150,.16);color:var(--text-2);font-variant-numeric:tabular-nums}
.cex.w{background:rgba(255,146,43,.16);color:var(--r2t)}
.cex.d{background:rgba(255,107,107,.15);color:var(--down)}
.spk{display:block;width:46px;height:16px;overflow:visible}
.acts{display:none;position:absolute;right:14px;top:1px;bottom:1px;align-items:center;gap:6px;padding-left:44px;background:linear-gradient(90deg,transparent,var(--surface-2) 34%)}
.trow:hover .acts,.trow.sel .acts{display:flex}
.iact{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;font-size:13px;color:var(--text-2)}
.iact:hover{border-color:var(--chrome);color:var(--text)}
.iact.on{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-hi)}
.dense .trow{padding-top:4px;padding-bottom:4px}
.dense .psub{margin-top:0}

/* ---- panel de vista previa ---- */
.side{border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column}
.side-h{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--border);background:radial-gradient(120% 150% at 100% 0%,color-mix(in oklab,var(--chrome-dim) 85%,transparent),transparent 62%)}
.side-s{padding:14px 16px;border-bottom:1px solid var(--border)}
.side-s>.mi{margin:0 0 10px}
.sactions{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.cmp{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border-strong);background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--chrome-dim) 45%,var(--surface)))}
.slots{display:flex;flex-direction:column;gap:7px;margin:10px 0 12px}
.slot{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text-3)}
.slot.f{border-style:solid;background:var(--surface-2);color:var(--text);font-weight:600}
.slot .x{margin-left:auto;color:var(--text-3)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:44px 26px;color:var(--text-3)}
.empty .ring{width:46px;height:46px;border-radius:99px;border:1px dashed var(--border-strong);display:grid;place-items:center;font-size:18px;color:var(--text-3)}

/* ---- menú de presets ---- */
.menu{position:absolute;z-index:5;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:6px;width:224px}
.menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--text-2)}
.menu a:hover{background:var(--surface)}
.menu a.on{color:var(--accent-hi);background:var(--accent-dim)}
.menu a i{font-style:normal;font-size:12px;color:var(--text-3);margin-left:auto}
.menu .sep{height:1px;background:var(--border);margin:6px 4px}

/* ---- filtros de atributo (añadidos por el usuario) ---- */
.afil{border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface-2);padding:9px 10px 4px}
.afil+.afil{margin-top:8px}
.afh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
.afh .v{margin-left:auto;color:var(--accent-hi);font-variant-numeric:tabular-nums}
.afh .x{color:var(--text-3);font-size:14px;line-height:1}
.addf{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:34px;margin-top:10px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--text-2);background:transparent}
.addf:hover{border-color:var(--accent);color:var(--accent-hi)}
.menu .grp{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:10px 10px 4px}
.menu .field{height:34px;padding:0 10px;margin:2px 2px 4px}
.menu .field input{font-size:13.5px}
.acol{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2)}
.acol.hi{color:var(--r5t)}
.thead .a{color:var(--accent-hi);opacity:.85}
/* ---- barra de comparación acoplada ---- */
.cmpbar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border-strong);background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--chrome-dim) 45%,var(--surface)))}
.cmpbar .slot{height:34px}
.cmpbar .btn{margin-left:auto}

/* ---- móvil: cards compactas y continuas (foto + VAL · rango · POT) ---- */
.mlist2{display:flex;flex-direction:column;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mc2{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface);color:inherit}
.mc2:last-child{border-bottom:0}
.mc2:active{background:var(--surface-2)}
.mc2 .ph{position:relative;width:52px;height:52px;border-radius:9px;overflow:hidden;background:linear-gradient(150deg,color-mix(in oklab,var(--pos-c,var(--chrome)) 24%,var(--surface-2)),var(--surface-3));display:grid;place-items:center;font-size:16px;font-weight:800;letter-spacing:.02em;color:var(--text);flex:none}
.mc2 .ph .cr{position:absolute;right:-2px;bottom:-2px;border-radius:99px;background:var(--surface);box-shadow:0 0 0 2px var(--surface);display:grid;place-items:center}
.phcol{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.agew{display:flex;align-items:baseline;gap:2px;line-height:1}
.agew b{font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.agew span{font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.rgt{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rgt .chips{display:flex;gap:7px}
.mval{display:flex;flex-direction:column;align-items:flex-end;line-height:1;gap:2px}
.mval .ml{font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.mval b{font-size:18px;font-weight:800;color:var(--accent-hi);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vch{display:flex;flex-direction:column;align-items:center;gap:3px}
.vch .rc{font-size:15px;height:32px;min-width:38px;border-radius:var(--r-sm)}
.vch .l{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.mc2 .mid{min-width:0}
.mc2 .nm{display:flex;align-items:center;gap:6px;min-width:0}
.mc2 .nm b{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc2 .posrow{display:flex;gap:4px;margin-top:5px}
.mc2 .posrow .posb{min-width:26px;height:18px;font-size:10px;padding:0 5px;border-radius:3px}
.mc2 .team{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12.5px;font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden}
.mc2 .team .cl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rngbar{display:flex;align-items:center;gap:7px;margin-top:7px}
.rngbar .pb{flex:1;position:relative;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.rngbar .pb i{display:block;position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.rngbar .pb .gh{position:absolute;top:0;bottom:0;border-radius:0 99px 99px 0;background:repeating-linear-gradient(105deg,var(--r5) 0 4px,transparent 4px 8px);opacity:.6;border-right:2px solid var(--r5)}
.rngbar .gp{font-size:11px;font-weight:800;color:var(--up);font-variant-numeric:tabular-nums;flex:none}

/* Barra media→potencial (misma que la ficha del jugador y el buscador): relleno
   sólido = valor actual, tramo a rayas = crecimiento hasta el potencial, canal
   gris = tope. --tgt = color de la banda del potencial. Compartida buscador/equipo. */
.gbar{position:relative;flex:1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.gbar .f{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.gbar .g{position:absolute;top:0;bottom:0;border-radius:0 99px 99px 0;background:repeating-linear-gradient(115deg,var(--tgt) 0 3px,transparent 3px 7px);opacity:.6}