/* Comparador — rejilla de comparación (etiquetas + N columnas de jugador). */
.cmpgrid{display:grid;grid-template-columns:196px repeat(var(--cols,4),minmax(0,1fr))}
.chead{display:contents}
.pcol{padding:14px 16px 16px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:9px;background:var(--surface);border-bottom:1px solid var(--border-strong);position:relative}
.pcol .x{position:absolute;right:10px;top:10px;color:var(--text-3);font-size:14px;line-height:1}
.pcol .nm{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.pcol .add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;color:var(--text-3);text-align:center}
.pcol.slot{justify-content:center;align-items:center;background:transparent}
.lblhead{background:var(--surface);border-bottom:1px solid var(--border-strong);padding:14px 16px;display:flex;align-items:flex-end}
.crow{display:contents}
.cell{padding:10px 16px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;background:var(--surface)}
.lbl{padding:10px 16px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-2);display:flex;align-items:center;gap:8px;background:var(--surface)}
.lbl b{font-weight:600;color:var(--text-2)}
.secrow{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:15px 16px 11px;background:var(--bg);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border)}
.secrow .mo{margin:0}
.secrow a{margin-left:auto;font-size:13px;font-weight:600}
.cv{display:flex;align-items:center;gap:10px;width:100%;font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.cv .b{flex:1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;min-width:30px}
.cv .b i{display:block;height:6px;border-radius:99px}
.cv .n{min-width:30px;text-align:right}
.cv.best .n{color:var(--r5t)}
.cv.worst{color:var(--text-3)}
.cv .w{font-size:11px;font-weight:800;color:var(--r5t)}
.cellfull{grid-column:2/-1;padding:16px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.lgnd{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:600;color:var(--text-2)}
.lgnd span{display:inline-flex;align-items:center;gap:7px}
.lgnd i{width:14px;height:3px;border-radius:2px}
.verdicts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 20px}
/* Tarjeta de veredicto: acento de color por tipo + foto + OVR de banda + posiciones coloreadas */
.verdict{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px 15px;display:flex;flex-direction:column;gap:11px}
.verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v-c,var(--accent))}
.v-now{--v-c:var(--accent)}
.v-margin{--v-c:var(--r5t)}
.v-price{--v-c:var(--pos-att)}
.v-young{--v-c:var(--pos-def)}
.v-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v-c,var(--accent))}
.v-hd{display:flex;align-items:center;gap:12px;min-width:0}
.v-face{position:relative;width:64px;height:64px;flex:none;border-radius:var(--r-sm);overflow:hidden;background:var(--empty);display:grid;place-items:center}
.v-face img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.v-face.noimg::after{content:"—";font-size:18px;font-weight:700;color:var(--text-3)}
.v-ovr{position:absolute;left:4px;top:4px;margin:0;height:22px;min-width:28px;font-size:12px;border-radius:var(--r-xs);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.v-id{min-width:0;display:flex;flex-direction:column;gap:7px}
.verdict .who{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;letter-spacing:-.005em;min-width:0}
.verdict .who a{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-pos{display:flex;flex-wrap:wrap;gap:5px}
.v-pos .posb{height:20px;min-width:30px;padding:0 6px;font-size:10.5px;letter-spacing:.02em}
.verdict .why{font-size:12.5px;color:var(--text-3);margin:0;line-height:1.4}
.onlydiff{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--text-2);background:none;border:0;cursor:pointer;font-family:inherit}
.onlydiff:hover{color:var(--text)}
.cv.worst .n{color:var(--text-3)}

/* ---- foto (cara) del jugador en la cabecera de columna: 128×128 sin recortar ---- */
.cmpface{position:relative;width:128px;height:128px;max-width:100%;border-radius:var(--r-sm);overflow:hidden;background:var(--empty);display:grid;place-items:center;margin:0 auto 3px}
.cmpface img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.cmpface.noimg::after{content:"Sin foto";font-size:11px;font-weight:600;color:var(--text-3)}
.cmpface-ovr{position:absolute;left:8px;top:8px;margin:0;font-size:15px;height:28px;min-width:34px;border-radius:var(--r-xs);box-shadow:0 2px 8px rgba(0,0,0,.4)}

.pcol .fbtn{display:flex;gap:7px;margin-top:2px}

/* ---- fila destacada (media-cara que abre cada grupo de atributos) ---- */
.crow.emph .lbl{font-weight:700;color:var(--text)}
.crow.emph .lbl,.crow.emph .cell{background:var(--surface-2)}

/* ---- chips de estilos de juego / especialidades ---- */
.cellchips{align-items:flex-start!important;padding-top:11px;padding-bottom:11px}
.cmpchips{display:flex;flex-wrap:wrap;gap:6px}
.cmpchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:99px;padding:4px 10px;line-height:1.3}
.cmpchip.plus{border-color:color-mix(in oklab,var(--accent) 45%,transparent);color:var(--accent-hi)}
.cmpchip .psic{width:13px;height:13px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex:none}
.cmpchip .pl{font-weight:800;color:var(--accent-hi);margin-left:-2px}

/* ---- typeahead "Añadir jugador" (casilla vacía + estado inicial) ---- */
.cmpadd{position:relative;width:100%;max-width:340px}
.cmpadd-field{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:text}
.cmpadd-field:focus-within{border-color:var(--accent)}
.cmpadd-field .k{color:var(--text-3);font-size:15px;line-height:1}
.cmpadd-i{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:inherit;font-size:14px}
.cmpadd-i::placeholder{color:var(--text-3)}
.cmpadd-i::-webkit-search-cancel-button{-webkit-appearance:none}
.cmpadd.big{max-width:420px;margin-top:6px}
.cmpadd.big .cmpadd-field{height:52px;padding:0 16px}
.cmpadd.big .cmpadd-i{font-size:16px}
.cmpadd-res{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:320px;overflow-y:auto;padding:5px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);box-shadow:var(--shadow-2,0 8px 24px rgba(0,0,0,.28))}
.cmpres{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-xs);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.cmpres:hover,.cmpres.act{background:var(--surface-2)}
.cmpres .nm{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpres .sub{font-size:11.5px;color:var(--text-3);display:flex;gap:6px;align-items:center;white-space:nowrap}
.cmpres .rc{font-size:12px;height:24px;min-width:30px;border-radius:var(--r-xs)}
.cmpres-empty{padding:12px 12px;font-size:13px;color:var(--text-3);text-align:center}

/* ---- estado inicial (sin jugadores) ---- */
.cmpempty{display:flex;justify-content:center;padding:48px 20px 64px}
.cmpempty-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cmpempty .ring{width:56px;height:56px;border-radius:99px;border:1px dashed var(--border-strong);display:grid;place-items:center;font-size:26px;color:var(--text-3)}

/* la rejilla scrollea en pantallas estrechas en vez de comprimirse */
.cmpwrap{overflow-x:auto}
.cmpwrap .cmpgrid{min-width:560px}

/* frame único en móvil (≤768): la rejilla se compacta para que hasta 4 jugadores
   quepan en el viewport SIN scroll horizontal; verdicts y cabecera se apilan. */
@media(max-width:768px){
  .verdicts{grid-template-columns:1fr 1fr;padding:14px 16px;gap:10px}
  .vhero{grid-template-columns:1fr!important;padding:10px 16px;gap:10px}
  .vhero>span{justify-content:flex-start!important}

  /* --- rejilla a pantalla completa: etiqueta estrecha + N columnas fluidas --- */
  .cmpwrap{overflow-x:visible}
  .cmpwrap .cmpgrid{min-width:0}
  .cmpgrid{grid-template-columns:60px repeat(var(--cols,4),minmax(0,1fr))}

  .lblhead{padding:9px 6px}
  .lblhead .mo{font-size:8.5px;letter-spacing:0;line-height:1.3;overflow-wrap:anywhere}
  .lbl{padding:8px 6px;font-size:10.5px;line-height:1.2;gap:5px;overflow-wrap:anywhere}
  .cell{padding:8px 4px;justify-content:center}

  /* celda: número centrado arriba, barra fina a todo el ancho debajo */
  .cv{flex-direction:column;align-items:center;gap:4px;width:100%;font-size:13px;text-align:center}
  .cv .b{width:100%;min-width:0;flex:none;order:2;height:5px}
  .cv .n{min-width:0;text-align:center;order:1}
  .cv .w{display:none}                 /* ▲ fuera: el mejor se marca con fondo + color */
  .cell.cbest{background:color-mix(in oklab,var(--r5t) 13%,var(--surface))}

  /* cabecera de jugador compacta: foto 64, sin edad/altura/pie (ya van en la tabla) */
  .pcol{padding:10px 6px;gap:5px}
  .pcol .x{right:5px;top:5px}
  .cmpface{width:100%;max-width:64px;height:auto;aspect-ratio:1/1;margin:0 auto 2px}
  .cmpface-ovr{left:4px;top:4px;height:20px;min-width:26px;font-size:11px}
  .pcol .nm{font-size:12.5px;gap:5px}
  .pcol .psub{font-size:10px;gap:5px;flex-wrap:wrap;row-gap:4px;white-space:normal;overflow:visible}
  .pcol .psub .clg{display:none}       /* club/liga: lo dice el escudo, gana espacio */
  .pcol .posb{font-size:9.5px;padding:1px 5px}
  .pcol .mt,.pcol .fbtn{display:none}  /* redundante con las filas Edad/Altura/Pie */

  /* chips de estilos/especialidades: más pequeños y centrados */
  .cellchips{padding:8px 4px!important}
  .cmpchips{gap:4px;justify-content:center}
  .cmpchip{font-size:9.5px;padding:2px 6px;gap:4px;max-width:100%;white-space:normal;text-align:center;line-height:1.15}

  /* --- estado inicial (sin jugadores): fluido, sin desbordar el viewport --- */
  .cmpempty{padding:28px 16px 44px}
  .cmpempty-card{width:100%}
  .cmpempty .bs{max-width:100%}
  .cmpadd.big{max-width:100%;width:100%}
}
@media(max-width:460px){
  .verdicts{grid-template-columns:1fr}
}

/* móvil: dos columnas + etiqueta encima */
.m .cmpgrid{grid-template-columns:96px repeat(2,minmax(0,1fr))}
.m .cell,.m .lbl{padding:9px 10px;font-size:13px}
.m .pcol{padding:12px 10px;gap:7px}
.m .pcol .nm{font-size:14px}
.m .verdicts{grid-template-columns:1fr;gap:10px;padding:14px 16px}
.m .cv{font-size:14px;gap:7px}