// Foto de jugadora con soporte de upload desde la pagina
function PPlayerPhoto({ player, size=64, radius="50%", style={}, editable=false }) {
  const key = `tormentas_photo_${player.id}`;
  const [src, setSrc] = React.useState(() => localStorage.getItem(key));
  const [fileErr, setFileErr] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const inputRef = React.useRef(null);
  const posColor = posColorsP[player.pos] || T.accent;

  const handleUpload = e => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      localStorage.setItem(key, ev.target.result);
      setSrc(ev.target.result);
      setFileErr(false);
    };
    reader.readAsDataURL(file);
  };

  const imgSrc = src || (!fileErr ? `tormentas/photos/${player.id}.jpg` : null);
  const baseStyle = {
    width:size, height:size, borderRadius:radius,
    objectFit:"cover", objectPosition:"top center",
    flexShrink:0, display:"block"
  };

  if (editable) {
    return (
      <div
        style={{ position:"relative", width:size, height:size, flexShrink:0, cursor:"pointer", borderRadius:radius, ...style }}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onClick={() => inputRef.current?.click()}
      >
        {imgSrc
          ? <img src={imgSrc} onError={() => { setFileErr(true); setSrc(null); }} style={{...baseStyle}} alt={player.name} />
          : <PAvatar initials={player.initials} color={posColor} size={size} />
        }
        <div style={{
          position:"absolute", inset:0, borderRadius:radius,
          background: hover ? "#00000055" : "#00000000",
          display:"flex", alignItems:"center", justifyContent:"center",
          transition:"background 0.2s", pointerEvents:"none"
        }}>
          {hover && <span style={{fontSize:size*0.26, filter:"drop-shadow(0 1px 2px #000)"}}>📷</span>}
        </div>
        <input ref={inputRef} type="file" accept="image/*" onChange={handleUpload} style={{display:"none"}} />
      </div>
    );
  }

  if (imgSrc) {
    return <img src={imgSrc} onError={() => { setFileErr(true); setSrc(null); }} style={{...baseStyle,...style}} alt={player.name} />;
  }
  return <PAvatar initials={player.initials} color={posColor} size={size} style={style} />;
}

// ── LISTA DE JUGADORAS ──────────────────────────────────────────────────────
function ProJugadoras({ selectedPlayer, onPlayerSelect, onBack }) {
  const { players } = window.TData;
  const [search, setSearch] = React.useState("");
  const [filterPos, setFilterPos] = React.useState("Todas");
  const [viewMode, setViewMode] = React.useState("cards");
  const positions = ["Todas","Base","Escolta","Alero","Ala-Pívot","Pívot"];

  if (selectedPlayer) return <ProPlayerProfile player={selectedPlayer} onBack={onBack} />;

  const filtered = players.filter(p => {
    const ms = p.name.toLowerCase().includes(search.toLowerCase()) || String(p.num).includes(search);
    return ms && (filterPos==="Todas" || p.pos===filterPos);
  });

  const cols = [
    {key:"player",  label:"Jugadora"},
    {key:"pos",     label:"Posición"},
    {key:"num",     label:"#", right:true, color:T.muted},
    {key:"pts",     label:"Pts", right:true, bold:true, color:T.accent},
    {key:"reb",     label:"Reb", right:true},
    {key:"ast",     label:"Ast", right:true},
    {key:"stl",     label:"Rob", right:true},
    {key:"fg",      label:"FG%", right:true},
    {key:"tl",      label:"TL%", right:true},
    {key:"min",     label:"Min", right:true},
    {key:"att",     label:"Asist.", right:true},
  ];

  const rows = filtered.map(p=>({
    _player: p,
    player: (
      <div style={{display:"flex",alignItems:"center",gap:10}}>
        <PPlayerPhoto player={p} size={30} />
        <span style={{fontWeight:500,color:T.text}}>{p.name}</span>
      </div>
    ),
    pos:  <PBadge text={p.pos} color={posColorsP[p.pos]} variant="pill" />,
    num:  p.num,
    pts:  p.avgPts,
    reb:  p.avgReb,
    ast:  p.avgAst,
    stl:  p.avgStl,
    fg:   `${p.fgPct}%`,
    tl:   `${p.ftPct}%`,
    min:  `${p.avgMin}'`,
    att: (
      <span style={{fontWeight:600,color:p.attendancePct>=85?T.green:p.attendancePct>=70?T.yellow:T.red}}>
        {p.attendancePct}%
      </span>
    ),
  }));

  return (
    <div>
      {/* Header */}
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:20,flexWrap:"wrap",gap:12}}>
        <div>
          <h2 style={{margin:0,fontSize:20,fontWeight:700,color:T.text,letterSpacing:"-0.02em"}}>Jugadoras</h2>
          <p style={{margin:"4px 0 0",fontSize:13,color:T.muted}}>{filtered.length} de {players.length}</p>
        </div>
        <div style={{display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
          <div style={{display:"flex",border:`1px solid ${T.border}`,borderRadius:6,overflow:"hidden"}}>
            {[["cards","▦"],["table","≡"]].map(([id,lbl])=>(
              <button key={id} onClick={()=>setViewMode(id)} style={{
                padding:"7px 12px",border:"none",cursor:"pointer",fontFamily:"inherit",
                background:viewMode===id?T.accent:"#fff",
                color:viewMode===id?"#fff":T.muted,
                fontWeight:600,fontSize:13,transition:"all 0.12s"
              }}>{lbl}</button>
            ))}
          </div>
          <div style={{position:"relative"}}>
            <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Buscar..."
              style={{
                padding:"7px 12px 7px 32px",borderRadius:6,border:`1px solid ${T.border}`,
                fontSize:13,color:T.text,outline:"none",fontFamily:"inherit",width:160,background:"#fff"
              }} />
            <span style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",color:T.muted,fontSize:13}}>⌕</span>
          </div>
          <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
            {positions.map(pos=>(
              <button key={pos} onClick={()=>setFilterPos(pos)} style={{
                padding:"6px 12px",borderRadius:6,fontFamily:"inherit",
                border:`1px solid ${filterPos===pos?T.accent:T.border}`,
                background:filterPos===pos?T.accent:"#fff",
                color:filterPos===pos?"#fff":T.muted,
                fontWeight:600,fontSize:12,cursor:"pointer",transition:"all 0.12s"
              }}>{pos}</button>
            ))}
          </div>
        </div>
      </div>

      {viewMode === "table" ? (
        <PCard padding="0">
          <PTable columns={cols} rows={rows} onRowClick={row=>onPlayerSelect(row._player)} />
          <div style={{height:4}} />
        </PCard>
      ) : (
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:14}}>
          {filtered.map(p => {
            const posColor = posColorsP[p.pos] || T.accent;
            const devScore = window.TDataExt?.computeDevScore(p.id) || 0;
            const attOk = p.attendancePct >= 85;
            const attWarn = p.attendancePct >= 70;

            return (
              <div key={p.id} onClick={()=>onPlayerSelect(p)}
                style={{
                  position:"relative",
                  background:`linear-gradient(150deg, ${posColor} 0%, ${posColor}cc 100%)`,
                  borderRadius:16,
                  overflow:"hidden",
                  cursor:"pointer",
                  transition:"transform 0.18s, box-shadow 0.18s",
                  boxShadow:`0 4px 16px ${posColor}40`,
                  minHeight:210,
                }}
                onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-4px) scale(1.01)";e.currentTarget.style.boxShadow=`0 12px 32px ${posColor}60`;}}
                onMouseLeave={e=>{e.currentTarget.style.transform="";e.currentTarget.style.boxShadow=`0 4px 16px ${posColor}40`;}}>

                {/* Número de fondo */}
                <div style={{
                  position:"absolute", right:-8, bottom:-24,
                  fontSize:130, fontWeight:900, fontStyle:"italic",
                  color:"rgba(255,255,255,0.1)", lineHeight:1,
                  userSelect:"none", pointerEvents:"none", letterSpacing:"-0.05em"
                }}>{p.num}</div>

                <div style={{position:"relative",zIndex:1,padding:"18px 16px 16px"}}>
                  {/* Top row: foto + dev */}
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:12}}>
                    <PPlayerPhoto player={p} size={52} radius={10}
                      style={{boxShadow:"0 4px 14px rgba(0,0,0,0.35)",border:"2px solid rgba(255,255,255,0.3)"}} />
                    <div style={{
                      background:"rgba(0,0,0,0.22)", borderRadius:8,
                      padding:"5px 10px", textAlign:"center", backdropFilter:"blur(4px)"
                    }}>
                      <div style={{fontSize:17,fontWeight:900,color:"#fff",lineHeight:1}}>{devScore}</div>
                      <div style={{fontSize:7,color:"rgba(255,255,255,0.65)",fontWeight:700,letterSpacing:"0.1em",marginTop:2}}>DEV</div>
                    </div>
                  </div>

                  {/* Nombre y posición */}
                  <div style={{marginBottom:14}}>
                    <div style={{
                      fontSize:14,fontWeight:800,color:"#fff",
                      letterSpacing:"-0.02em",lineHeight:1.2,
                      overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"
                    }}>{p.name}</div>
                    <div style={{fontSize:11,color:"rgba(255,255,255,0.65)",marginTop:3}}>
                      #{p.num} · {p.pos}
                    </div>
                  </div>

                  {/* Stats */}
                  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:5,marginBottom:12}}>
                    {[{l:"PTS",v:p.avgPts},{l:"REB",v:p.avgReb},{l:"AST",v:p.avgAst}].map(s=>(
                      <div key={s.l} style={{
                        background:"rgba(255,255,255,0.16)",
                        borderRadius:8,padding:"8px 4px",textAlign:"center"
                      }}>
                        <div style={{fontSize:17,fontWeight:900,color:"#fff",lineHeight:1}}>{s.v}</div>
                        <div style={{fontSize:8,color:"rgba(255,255,255,0.65)",fontWeight:700,
                          textTransform:"uppercase",letterSpacing:"0.07em",marginTop:2}}>{s.l}</div>
                      </div>
                    ))}
                  </div>

                  {/* Asistencia */}
                  <div>
                    <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}>
                      <span style={{fontSize:9,color:"rgba(255,255,255,0.55)",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.06em"}}>Asistencia</span>
                      <span style={{fontSize:9,color:"rgba(255,255,255,0.9)",fontWeight:700}}>{p.attendancePct}%</span>
                    </div>
                    <div style={{height:3,background:"rgba(255,255,255,0.18)",borderRadius:2,overflow:"hidden"}}>
                      <div style={{
                        height:"100%",width:`${p.attendancePct}%`,borderRadius:2,
                        background:attOk?"rgba(34,197,94,0.85)":attWarn?"rgba(234,179,8,0.85)":"rgba(239,68,68,0.85)"
                      }}/>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ── PERFIL DE JUGADORA ──────────────────────────────────────────────────────
function ProPlayerProfile({ player:p, onBack }) {
  const [tab, setTab] = React.useState("stats");
  const { games, rawStats } = window.TData;
  const physData = window.TDataExt?.physicalData?.[p.id];
  const gameLabels = games.map(g=>g.rival.slice(0,4));
  const gamePts = p.gamesPts.map(x=>x.pts);
  const attColor = p.attendancePct>=85?T.green:p.attendancePct>=70?T.yellow:T.red;
  const accentColor = posColorsP[p.pos]||T.accent;
  const devScore = window.TDataExt?.computeDevScore(p.id) || 0;

  return (
    <div>
      <PBackBtn onClick={onBack} label="Jugadoras" />

      {/* ── HERO BANNER ────────────────────────────────────── */}
      <div style={{
        position:"relative",
        background:`linear-gradient(140deg, ${accentColor} 0%, ${accentColor}bb 55%, ${accentColor}66 100%)`,
        borderRadius:20,
        overflow:"hidden",
        marginBottom:20,
        padding:"28px 28px 0",
      }}>
        {/* Número de fondo gigante */}
        <div style={{
          position:"absolute",
          right:-15, top:-40,
          fontSize:260, fontWeight:900, fontStyle:"italic",
          color:"rgba(255,255,255,0.07)",
          lineHeight:1, userSelect:"none", pointerEvents:"none",
          letterSpacing:"-0.06em"
        }}>{p.num}</div>

        {/* Contenido principal */}
        <div style={{position:"relative",zIndex:1,display:"flex",alignItems:"flex-end",gap:22,flexWrap:"wrap"}}>
          <PPlayerPhoto player={p} size={110} radius={14} editable style={{
            boxShadow:"0 8px 32px rgba(0,0,0,0.45)",
            border:"3px solid rgba(255,255,255,0.25)",
            flexShrink:0,
          }} />
          <div style={{flex:1,minWidth:160,paddingBottom:22,color:"#fff"}}>
            <div style={{
              display:"inline-block",
              background:"rgba(255,255,255,0.18)",
              borderRadius:20, padding:"4px 14px",
              fontSize:11, fontWeight:700, letterSpacing:"0.07em",
              marginBottom:10, backdropFilter:"blur(4px)"
            }}>{p.pos}</div>
            <h1 style={{margin:"0 0 6px",fontSize:28,fontWeight:900,letterSpacing:"-0.03em",lineHeight:1.1}}>{p.name}</h1>
            <div style={{fontSize:13,color:"rgba(255,255,255,0.7)",display:"flex",gap:16}}>
              <span>#{p.num}</span>
              <span>Mano {p.hand || "Derecha"}</span>
              <span style={{
                color: p.attendancePct>=85?"#4ade80":p.attendancePct>=70?"#fbbf24":"#f87171",
                fontWeight:700
              }}>{p.attendancePct}% asist.</span>
            </div>
          </div>
          {/* Dev score badge */}
          <div style={{
            paddingBottom:22,
            textAlign:"center",
            color:"#fff",
          }}>
            <div style={{
              width:64,height:64,borderRadius:"50%",
              background:"rgba(0,0,0,0.25)",
              border:"2px solid rgba(255,255,255,0.2)",
              display:"flex",flexDirection:"column",
              alignItems:"center",justifyContent:"center",
              backdropFilter:"blur(4px)"
            }}>
              <div style={{fontSize:20,fontWeight:900,lineHeight:1}}>{devScore}</div>
              <div style={{fontSize:8,color:"rgba(255,255,255,0.6)",fontWeight:700,letterSpacing:"0.1em",marginTop:2}}>DEV</div>
            </div>
          </div>
        </div>

        {/* Stats strip */}
        <div style={{
          display:"grid", gridTemplateColumns:"repeat(5,1fr)",
          marginTop:20,
          marginLeft:-28, marginRight:-28,
          background:"rgba(0,0,0,0.18)",
          borderTop:"1px solid rgba(255,255,255,0.1)",
        }}
        className="t-grid-stats">
          {[
            {l:"PTS", v:p.avgPts, hot:true},
            {l:"REB", v:p.avgReb},
            {l:"AST", v:p.avgAst},
            {l:"FG%", v:`${p.fgPct}%`},
            {l:"MIN", v:`${p.avgMin}'`},
          ].map((s,i) => (
            <div key={s.l} style={{
              padding:"16px 8px", textAlign:"center",
              background: s.hot ? "rgba(255,255,255,0.1)" : "transparent",
              borderLeft: i>0 ? "1px solid rgba(255,255,255,0.08)" : "none",
            }}>
              <div style={{fontSize:22,fontWeight:900,color:"#fff",lineHeight:1}}>{s.v}</div>
              <div style={{fontSize:9,color:"rgba(255,255,255,0.55)",fontWeight:700,
                textTransform:"uppercase",letterSpacing:"0.1em",marginTop:4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── DETALLE ────────────────────────────────────────── */}
      <div className="t-grid-2" style={{display:"grid",gridTemplateColumns:"260px 1fr",gap:16,alignItems:"start"}}>

        {/* Columna izquierda */}
        <div style={{display:"flex",flexDirection:"column",gap:12}}>

          {/* Medidas */}
          <PCard>
            <PLabel>Medidas y perfil</PLabel>
            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              {[
                {l:"Talla",          v: physData ? `${physData.latest.altura} cm` : "—"},
                {l:"Peso",           v: physData ? `${physData.latest.peso} kg`   : "—"},
                {l:"Masa muscular",  v: physData ? `${physData.latest.musculo}%`  : "—"},
                {l:"Grasa corporal", v: physData ? `${physData.latest.grasa}%`    : "—"},
                {l:"Mano dominante", v: p.hand || "Derecha"},
              ].map(s=>(
                <div key={s.l} style={{display:"flex",justifyContent:"space-between",alignItems:"center",
                  padding:"6px 0",borderBottom:`1px solid ${T.border}`}}>
                  <span style={{fontSize:12,color:T.muted}}>{s.l}</span>
                  <span style={{fontSize:13,fontWeight:700,color:T.text}}>{s.v}</span>
                </div>
              ))}
            </div>
          </PCard>

          {/* Asistencia */}
          <PCard>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
              <PLabel>Asistencia</PLabel>
              <span style={{fontSize:16,fontWeight:900,color:attColor}}>{p.attendancePct}%</span>
            </div>
            <PProgress value={p.attendancePct} max={100} color={attColor} height={6} />
          </PCard>

          {/* Logros */}
          {p.achievements.length > 0 && (
            <PCard>
              <PLabel>Logros</PLabel>
              <div style={{display:"flex",flexDirection:"column",gap:6}}>
                {p.achievements.map((a,i)=>(
                  <div key={i} style={{
                    fontSize:12,color:T.text,padding:"8px 10px",
                    background:T.stripe,borderRadius:6,border:`1px solid ${T.border}`
                  }}>{a}</div>
                ))}
              </div>
            </PCard>
          )}
        </div>

        {/* Columna derecha: tabs */}
        <div>
          <PTabBar
            tabs={[["stats","Estadísticas"],["progreso","Progreso"],["partidos","Por partido"],["metas","Metas"],["asistencia","Asistencia"]]}
            active={tab}
            onChange={setTab}
          />

          {tab==="stats" && (
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <div className="t-grid-6" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12}}>
                <PKPICard label="Pts / partido" value={p.avgPts} color={accentColor} />
                <PKPICard label="Reb / partido" value={p.avgReb} />
                <PKPICard label="Ast / partido" value={p.avgAst} />
                <PKPICard label="FG%" value={`${p.fgPct}%`} color={p.fgPct>=45?T.green:T.text} />
              </div>
              <div className="t-grid-2" style={{display:"grid",gridTemplateColumns:"2fr 1fr",gap:16}}>
                <PCard>
                  <PSectionHeader title="Puntos por partido" />
                  <PLineChart data={gamePts} labels={gameLabels} color={accentColor} height={140} />
                </PCard>
                <PCard>
                  <PSectionHeader title="Distribución" />
                  <PBarChart
                    data={[p.avgPts, p.avgReb, p.avgAst, p.avgStl]}
                    labels={["Pts","Reb","Ast","Rob"]}
                    color={accentColor}
                    height={140}
                  />
                </PCard>
              </div>
            </div>
          )}

          {tab==="progreso" && (
            <div style={{display:"flex",flexDirection:"column",gap:16}}>
              <PCard>
                <PSectionHeader title="Evolución de puntos" />
                <PLineChart data={gamePts} labels={gameLabels} color={accentColor} height={150} />
              </PCard>
              <PCard>
                <PSectionHeader title="Eficiencia" />
                {[
                  {l:"Tiro de campo (FG%)",   v:p.fgPct,         c:accentColor},
                  {l:"Tiro libre (TL%)",       v:p.ftPct,         c:T.green},
                  {l:"Asistencia a entrenos",  v:p.attendancePct, c:attColor},
                ].map(s=>(
                  <div key={s.l} style={{marginBottom:14}}>
                    <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}>
                      <span style={{fontSize:13,color:T.muted}}>{s.l}</span>
                      <span style={{fontSize:13,fontWeight:700,color:s.c}}>{s.v}%</span>
                    </div>
                    <PProgress value={s.v} max={100} color={s.c} height={5} />
                  </div>
                ))}
              </PCard>
            </div>
          )}

          {tab==="partidos" && (
            <PCard padding="0">
              <div style={{padding:"20px 24px 0"}}>
                <PLabel>Estadísticas por partido</PLabel>
              </div>
              <PTable
                columns={[
                  {key:"game",label:"Partido"},
                  {key:"res", label:"Res."},
                  {key:"pts", label:"Pts", right:true, bold:true, color:accentColor},
                  {key:"reb", label:"Reb", right:true},
                  {key:"ast", label:"Ast", right:true},
                  {key:"fg",  label:"FG",  right:true},
                  {key:"tl",  label:"TL",  right:true},
                  {key:"min", label:"Min", right:true},
                  {key:"fouls",label:"F",  right:true},
                ]}
                rows={games.map(g=>{
                  const s=rawStats[g.id]?.[p.id]||[0,0,0,0,0,0,0,0,0,0,0];
                  const win=g.result==="W";
                  return {
                    game:`vs ${g.rival}`,
                    res:<span style={{fontWeight:600,fontSize:11,color:win?T.green:T.red}}>{win?"V":"D"}</span>,
                    pts:s[0],reb:s[1],ast:s[2],
                    fg:s[7]?`${s[6]}/${s[7]}`:"—",
                    tl:s[5]?`${s[4]}/${s[5]}`:"—",
                    min:`${s[9]}'`,fouls:s[8]
                  };
                })}
              />
              <div style={{height:4}} />
            </PCard>
          )}

          {tab==="metas" && (
            <PCard>
              <PLabel>Objetivos de temporada</PLabel>
              {p.goals.length===0 && (
                <div style={{textAlign:"center",padding:"40px 0",color:T.muted}}>
                  <div style={{fontSize:13}}>Sin metas asignadas aún.</div>
                </div>
              )}
              <div style={{display:"flex",flexDirection:"column",gap:10}}>
                {p.goals.map((g,i)=>(
                  <div key={i} style={{
                    display:"flex",alignItems:"center",gap:12,
                    padding:"12px 14px",borderRadius:8,
                    border:`1px solid ${g.done?T.green+"40":T.border}`,
                    background:g.done?T.greenLt:"#fff"
                  }}>
                    <div style={{
                      width:20,height:20,borderRadius:"50%",flexShrink:0,
                      border:`2px solid ${g.done?T.green:T.border}`,
                      background:g.done?T.green:"#fff",
                      display:"flex",alignItems:"center",justifyContent:"center",
                      color:"#fff",fontSize:11,fontWeight:700
                    }}>{g.done?"✓":""}</div>
                    <div style={{flex:1,fontSize:13,color:T.text}}>{g.text}</div>
                    {g.done && <span style={{fontSize:11,fontWeight:600,color:T.green}}>✓</span>}
                  </div>
                ))}
              </div>
              {p.goals.length>0 && (
                <div style={{marginTop:16}}>
                  <div style={{display:"flex",justifyContent:"space-between",marginBottom:6}}>
                    <span style={{fontSize:12,color:T.muted}}>Progreso</span>
                    <span style={{fontSize:12,fontWeight:600,color:T.accent}}>
                      {p.goals.filter(g=>g.done).length}/{p.goals.length}
                    </span>
                  </div>
                  <PProgress value={p.goals.filter(g=>g.done).length} max={p.goals.length} color={T.accent} height={5} />
                </div>
              )}
            </PCard>
          )}

          {tab==="asistencia" && (
            <PCard>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
                <PLabel>Asistencia a entrenamientos</PLabel>
                <span style={{fontSize:13,fontWeight:700,color:attColor}}>
                  {p.attendance.filter(a=>a.present).length}/{p.attendance.length} · {p.attendancePct}%
                </span>
              </div>
              <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
                {p.attendance.map((a,i)=>(
                  <div key={i} title={a.date} style={{
                    width:44,height:44,borderRadius:8,
                    display:"flex",flexDirection:"column",
                    alignItems:"center",justifyContent:"center",gap:1,
                    background:a.present?T.accentLt:T.redLt,
                    border:`1px solid ${a.present?T.accentMd:"#fecaca"}`,
                  }}>
                    <span style={{fontSize:12,fontWeight:700,color:a.present?T.accent:T.red}}>{a.present?"✓":"–"}</span>
                    <span style={{fontSize:9,color:T.muted}}>{a.date.slice(5)}</span>
                  </div>
                ))}
              </div>
            </PCard>
          )}
        </div>
      </div>
    </div>
  );
}

window.ProJugadoras = ProJugadoras;