/* =====================================================================
   TABLERO · ESTADÍSTICAS (index.html #tbStats; lo pinta js/tablero-stats.js)
   Tercera vista del Tablero, solo para leer. De arriba abajo: el filtro (Todo / Torneo / Amistosos,
   solo si hay de las dos clases) con la frase de qué cuenta, y cuatro bloques:
     Récords y curiosidades   fichas con una cifra grande (.es-rec); las de marcador ocupan dos columnas
     Jugadores                tabla (.es-tab) y, plegadas en teléfono, las fichas de héroes y rivales (.es-jl)
     Enfrentamientos repetidos   una tarjeta por pareja (.es-cc): quién va ganando, a la izquierda;
                              seis a la vista y las demás plegadas
     Héroes                   cuatro listas cortas (.es-hg) y, plegada, la tabla de todos
   Las tablas van dentro de .es-tw: si no caben (teléfono), se deslizan ahí dentro con la primera
   columna fija; la página nunca se desborda. Todo con los colores de base.css.
   ===================================================================== */
.tb .seg.tbvista{max-width:380px}   /* ahora son tres botones: Llaves, Lista y Estadísticas */

.es{min-width:0;margin-top:12px}
.es-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.tb .seg.es-fil{flex:1 1 260px;max-width:340px}
.es-sub{flex:1 1 260px;margin:0 4px;font-size:13px;line-height:18px;color:var(--fg2)}
.es-b{min-width:0}
.es-note{margin:6px 4px 0;font-size:12px;line-height:17px;color:var(--fg2)}
.es-note.es-arriba{margin:0 4px 8px;font-size:13px;line-height:18px}

/* ---------- récords: fichas con una cifra ---------- */
.es-rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px;margin:0}
.es-r{min-width:0;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--card)}
.es-r.wide{grid-column:span 2}
.es-r dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2)}
.es-r dd{min-width:0;display:flex;flex-direction:column;gap:2px;margin:0}
.es-rv{font-size:20px;line-height:25px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.es-rs{font-size:13px;line-height:18px;color:var(--fg2);overflow-wrap:anywhere}

/* ---------- tablas (jugadores y todos los héroes): se deslizan dentro de su caja ---------- */
/* position:relative: los textos .vh de las celdas son absolutos; sin esto no los recortaría la caja y
   ensancharían la página */
.es-tw{position:relative;background:var(--card);border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.es-tw:focus-visible{outline-offset:-3px}
.es-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:20px;font-variant-numeric:tabular-nums}
.es-tab th,.es-tab td{padding:10px 9px;text-align:right;font-weight:400;white-space:nowrap}
.es-tab thead th{padding-top:9px;padding-bottom:7px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2)}
.es-tab tbody th,.es-tab tbody td{border-top:.5px solid var(--sep)}
.es-tab th:last-child,.es-tab td:last-child{padding-right:14px}
/* primera columna: fija al deslizar, con su propio fondo y una raya a la derecha */
.es-tab .es-cn{
  position:sticky;left:0;z-index:1;min-width:104px;max-width:170px;padding-left:14px;
  background:var(--card);box-shadow:.5px 0 0 var(--sep);
  text-align:left;white-space:normal;
}
.es-nm{display:block;max-width:150px;overflow-wrap:break-word}   /* un nombre largo se parte por los espacios */
.es-tab tbody .es-cn{font-weight:600}
.es-ra{font-weight:700}
.es-ra.g{color:var(--good-ink)}
.es-ra.p{color:var(--bad-ink)}
.es-th .es-cn{min-width:150px;max-width:none;padding:3px 4px 3px 6px}

/* ---------- bloques plegables ---------- */
.es-det{margin-top:6px}
.es-det > summary{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:10px;cursor:pointer;
  list-style:none;color:var(--link);font-size:15px;line-height:20px;font-weight:600;
}
.es-det > summary::-webkit-details-marker{display:none}
.es-det > summary::before{
  content:"";flex:none;width:8px;height:8px;margin-left:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s;
}
.es-det[open] > summary::before{transform:rotate(45deg)}
.es-det > .es-note{margin:0 4px 8px}
.es-det > .es-cc{margin-top:4px}

/* ---------- héroes y rivales de cada jugador ---------- */
.es-jl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.es-jc{min-width:0;padding:12px;border-radius:12px;background:var(--card)}
.es-jn{margin:0 0 8px;font-size:17px;line-height:22px;font-weight:700;overflow-wrap:anywhere}
.es-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0}   /* los héroes, a lo ancho; bestia negra y cliente, lado a lado */
.es-dl > div{min-width:0}
.es-dl > .es-dh{grid-column:1 / -1}
.es-dl dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2)}
.es-dl dd{margin:2px 0 0;font-size:15px;line-height:20px;overflow-wrap:anywhere}
.es-dl dd b{font-weight:600}
.es-nd{color:var(--fg2)}
.es-dl .es-h{margin-left:-8px;width:calc(100% + 16px)}

/* ---------- un héroe: retrato, nombre y un dato; abre su ficha ---------- */
.es-h{
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:44px;padding:4px 8px;border:0;border-radius:10px;
  background:transparent;color:var(--fg);font-size:15px;line-height:20px;text-align:left;
}
button.es-h{cursor:pointer}
button.es-h:active{opacity:.7}
.es-hn{flex:1 1 auto;min-width:0;font-weight:600;overflow-wrap:anywhere}
button.es-h .es-hn{color:var(--link)}
.es-hv{flex:0 1 auto;font-size:13px;line-height:18px;color:var(--fg2);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- enfrentamientos repetidos ---------- */
.es-cc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:10px}
.es-c{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px 12px;padding:12px;border-radius:12px;background:var(--card)}
.es-ca{font-size:16px;line-height:21px;overflow-wrap:anywhere}
.es-ca.a{text-align:right}
.es-ca.win{font-weight:700}
.es-cs{font-size:20px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.es-cm{grid-column:1 / -1;text-align:center;font-size:13px;line-height:18px;color:var(--fg2);overflow-wrap:anywhere}

/* ---------- héroes: las cuatro listas ---------- */
.es-hg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:10px;align-items:start}
.es-hb{min-width:0;padding:12px 6px 6px;border-radius:12px;background:var(--card)}
.es-hb h4{margin:0 8px 4px;font-size:15px;line-height:20px;font-weight:700}
.es-hs{margin:0 8px 6px;font-size:13px;line-height:18px;color:var(--fg2)}
.es-hl{list-style:none;margin:0;padding:0}

@media (min-width:700px){
  /* en pantallas anchas las tablas no se estiran: las cifras quedan cerca del nombre */
  .es-tw{max-width:960px}
  .es-tw.es-twh{max-width:640px}
}
@media (hover:hover){
  button.es-h:hover,.es-det > summary:hover{background:var(--accent-tint)}
}
@media (prefers-reduced-motion: reduce){
  .es-det > summary::before{transition:none}
}