/* =====================================================================
   TABLERO · HISTORIAL DE TORNEOS (index.html #thFin, #thZona y #thNomDlg; js/tablero-historial.js)
   Solo colores de css/base.css. Tres piezas:
     .thfin    aviso "Torneo terminado: campeón X" con el botón de archivar. Solo en modo edición.
     .th       la zona "Torneos anteriores", debajo de las vistas del Tablero:
                 .thsalon  "Salón de campeones": quién ha ganado más torneos, en píldoras
                 .thl      una fila por torneo (.thb: retrato del campeón, nombre, campeón y fecha).
                           Al abrirla, debajo (.thp) sale su pirámide. La pirámide es la del tablero
                           (clases .ll* de components.css) y va FUERA de la tarjeta de la fila, sobre el
                           fondo de la página, porque sus casillas tienen el color de las tarjetas.
     .thvt     en la ficha de una llave archivada, de qué torneo es.
   ===================================================================== */

/* ---------- aviso de torneo terminado ---------- */
.thfin{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:10px;padding:12px;
  border-radius:12px;background:var(--good-bg);
}
.thfi{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--good-ink)}
.thfi svg{width:22px;height:22px}
.thft{flex:1 1 240px;min-width:0;margin:0;font-size:15px;line-height:20px;color:var(--fg);overflow-wrap:anywhere}
.thft b{font-weight:700}
.thfin .btn{flex:0 0 auto;padding-inline:16px}

/* ---------- la zona ---------- */
.th{min-width:0;margin-top:28px;padding-top:2px;border-top:.5px solid var(--sep)}
.th .cap{margin-left:4px}
.thnote{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--accent-tint);color:var(--fg);font-size:14px;line-height:19px}
.thnote.warn{background:var(--bad-bg);color:var(--bad-ink);font-weight:600}

/* ---------- salón de campeones ---------- */
.thsalon{margin-bottom:10px;padding:12px;border-radius:12px;background:var(--card)}
.thsh{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:15px;line-height:20px;font-weight:600}
.thsh svg{flex:none;width:18px;height:18px;color:var(--giro-ink)}
.thsl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.thsi{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:6px 14px 6px 6px;border-radius:999px;background:var(--fill)}
.thsn{min-width:0;font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.thsi.top .thsn{font-weight:700}
.thsv{flex:none;font-size:13px;line-height:18px;color:var(--fg2);white-space:nowrap}
.thsm{margin:8px 2px 0;font-size:13px;line-height:18px;color:var(--fg2)}

/* ---------- un torneo: la fila y, abierto, su pirámide ---------- */
.thl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tht{min-width:0}
.thb{
  display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;
  border:0;border-radius:12px;background:var(--card);color:var(--fg);font-size:15px;line-height:20px;text-align:left;cursor:pointer;
}
.thb:focus-visible{outline-offset:-3px}
.thb:active{opacity:.7}
.tht.open .thb{box-shadow:inset 0 0 0 1.5px var(--accent)}
.thbt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.thbn{font-size:17px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
.thbs{overflow-wrap:anywhere}
.thbs b{font-weight:700}
.thbh,.thbd{color:var(--fg2)}
.thbd{font-size:13px;line-height:18px}
/* torneo archivado sin campeón: un hueco en vez del retrato */
.thnoc{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed var(--fg3);color:var(--fg2);font-size:17px;line-height:1;font-weight:600}
.thchev{flex:none;width:20px;height:20px;color:var(--fg2);transition:transform .2s}
.thb[aria-expanded="true"] .thchev{transform:rotate(180deg)}
.thp{min-width:0;padding:10px 0 12px}
.thpod{list-style:none;margin:0 4px 10px;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px;line-height:20px;font-weight:600}
.thpod li{min-width:0;overflow-wrap:anywhere}
.thpp{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.thacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.thacts .btn{flex:0 1 auto;padding-inline:16px}
.thmas{display:block;margin:4px auto 0;padding-inline:16px}
.thvt{overflow-wrap:anywhere}

@media (max-width:699.98px){
  .thfin .btn{flex:1 0 100%}
  .thacts .btn{flex:1 1 0}
}
@media (hover:hover){
  .thb:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .thchev{transition:none}
}