/* =====================================================================
   COMPONENTE · LISTA DE RESULTADOS DESPLEGABLE (vista celular)
   Cada fila muestra solo el puesto y el nombre. Al tocarla se despliegan
   las estadísticas del jugador. Usa <details>, así funciona sin JS extra
   y es accesible con teclado y lector de pantalla.
   Desde 900px se oculta y se usa la tabla (.view-table).
   ===================================================================== */

.view-list{display:block}
.rlist{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rlist > li + li{border-top:1px solid var(--line)}

.ritem > details > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ritem > details > summary::-webkit-details-marker{display:none}
.ritem > details > summary:active{background:var(--row)}
.ritem .rname{flex:1;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ritem .chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;flex:none;margin-right:2px}
.ritem details[open] .chev{transform:rotate(-135deg)}
.ritem details[open] > summary{background:var(--row)}

/* Zonas: barra lateral de color */
.ritem.z-top{box-shadow:inset 4px 0 0 var(--pine)}
.ritem.z-anti{box-shadow:inset 4px 0 0 var(--leaf)}

/* Línea de corte entre zonas */
.rcut{padding:6px 14px;font-size:12px;font-weight:600;background:var(--bg);color:var(--muted)}
.rcut.top{color:var(--zone-top-ink)}
.rcut.anti{color:var(--leaf)}

/* Panel desplegado */
.rbody{padding:4px 14px 14px;background:var(--row)}
.rstats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}
.rstats > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px}
.rstats dt{font-size:12px;color:var(--muted)}
.rstats dd{margin:0;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25}
.rstats dd .rec,.rstats dd small{font-family:var(--body);font-size:15px}
.rstats dd small{font-weight:500;color:var(--muted)}
.rstats .wide{grid-column:1/-1}
.rpath{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.rpath span{font-family:var(--body);font-size:13px;font-weight:500;background:var(--bg);border-radius:99px;padding:2px 8px}
.rlink{display:inline-block;margin-top:10px;font-weight:600;color:var(--ember);text-decoration:none;padding:6px 0}

@media (min-width:600px){
  .rstats{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:900px){
  .view-list{display:none}
}