// Tormentas — Pantallas administrativas

// ── PAGOS ─────────────────────────────────────────────────
function AdminPagos() {
  const { players } = window.TData;
  const { payments: init, MONTHLY_FEE, paymentMonths, monthLabels } = window.TAdmin;

  const [selMonth, setSelMonth] = React.useState(paymentMonths[paymentMonths.length - 1]);
  const [payments, setPayments] = React.useState(() => {
    try { const s = localStorage.getItem("tormentas_admin_payments"); return s ? JSON.parse(s) : init; }
    catch { return init; }
  });

  const toggle = (pid, month) => {
    setPayments(prev => {
      const next = {
        ...prev,
        [pid]: prev[pid].map(p => p.month !== month ? p : {
          ...p, paid: !p.paid,
          date:   !p.paid ? new Date().toISOString().split("T")[0] : null,
          method: !p.paid ? "Efectivo" : null,
        })
      };
      localStorage.setItem("tormentas_admin_payments", JSON.stringify(next));
      return next;
    });
  };

  const curIdx    = paymentMonths.indexOf(selMonth);
  const lastIdx   = paymentMonths.length - 1;
  const rows      = players.map(p => ({ player:p, pay: payments[p.id]?.find(x => x.month === selMonth) }));
  const paid      = rows.filter(r => r.pay?.paid).length;
  const pending   = rows.length - paid;
  const totalPaid = paid * MONTHLY_FEE;
  const totalPend = pending * MONTHLY_FEE;

  // Season totals
  const seasonPaid = players.reduce((s, p) =>
    s + (payments[p.id]?.filter(x => x.paid).length || 0) * MONTHLY_FEE, 0);

  return (
    <div>
      <div style={{marginBottom:24}}>
        <h2 style={{margin:0,fontSize:20,fontWeight:700,color:T.text,letterSpacing:"-0.02em"}}>Pagos mensuales</h2>
        <p style={{margin:"4px 0 0",fontSize:13,color:T.muted}}>Cuota: ${MONTHLY_FEE} MXN / jugadora / mes</p>
      </div>

      <div className="t-grid-6" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:20}}>
        <PKPICard label="Recaudado este mes"  value={`$${totalPaid.toLocaleString()}`}  color={T.green}  sub={`${paid} de ${players.length} jugadoras`} />
        <PKPICard label="Pendiente este mes"  value={`$${totalPend.toLocaleString()}`}  color={pending>0?T.red:T.green}  sub={`${pending} jugadoras`} />
        <PKPICard label="Cumplimiento"        value={`${Math.round(paid/players.length*100)}%`} color={paid/players.length>=0.8?T.green:T.yellow} />
        <PKPICard label="Total temporada"     value={`$${seasonPaid.toLocaleString()}`} color={T.text}   sub="acumulado" />
      </div>

      {/* Month tabs */}
      <div style={{display:"flex",gap:6,marginBottom:16}}>
        {paymentMonths.map(m => (
          <button key={m} onClick={() => setSelMonth(m)} style={{
            padding:"7px 20px", border:`1px solid ${selMonth===m?T.accent:T.border}`,
            borderRadius:6, background:selMonth===m?T.accentLt:"#fff",
            color:selMonth===m?T.accent:T.muted,
            fontWeight:selMonth===m?600:400, fontSize:13,
            cursor:"pointer", fontFamily:"inherit", transition:"all 0.12s"
          }}>{monthLabels[m]}</button>
        ))}
      </div>

      <PCard padding="0">
        <PTable
          columns={[
            {key:"player",  label:"Jugadora"},
            {key:"pos",     label:"Posición"},
            {key:"amount",  label:"Cuota",       right:true},
            {key:"status",  label:"Estado"},
            {key:"date",    label:"Fecha de pago"},
            {key:"method",  label:"Método"},
            {key:"action",  label:"",            right:true},
          ]}
          rows={rows.map(({player:p, pay}) => {
            const isPaid   = !!pay?.paid;
            const overdue  = !isPaid && curIdx < lastIdx;
            const statusColor = isPaid ? T.green : overdue ? T.red : T.yellow;
            const statusBg    = isPaid ? T.greenLt : overdue ? T.redLt : T.yellowLt;
            const statusBdr   = isPaid ? "#bbf7d0" : overdue ? "#fecaca" : "#fde68a";
            const statusLabel = isPaid ? "Pagado" : overdue ? "Vencido" : "Pendiente";
            return {
              player: (
                <div style={{display:"flex",alignItems:"center",gap:10}}>
                  <PAvatar initials={p.initials} color={posColorsP[p.pos]||T.accent} size={28} />
                  <span style={{fontWeight:500,color:T.text}}>{p.name}</span>
                </div>
              ),
              pos:    <PBadge text={p.pos} color={posColorsP[p.pos]} variant="pill" />,
              amount: `$${MONTHLY_FEE}`,
              status: (
                <span style={{fontSize:12,fontWeight:700,color:statusColor,background:statusBg,
                  padding:"3px 10px",borderRadius:4,border:`1px solid ${statusBdr}`}}>
                  {statusLabel}
                </span>
              ),
              date:   pay?.date   || <span style={{color:T.subtle,fontSize:12}}>—</span>,
              method: pay?.method || <span style={{color:T.subtle,fontSize:12}}>—</span>,
              action: (
                <button onClick={e=>{e.stopPropagation();toggle(p.id,selMonth);}} style={{
                  padding:"5px 12px", borderRadius:5, fontWeight:600, fontSize:11,
                  cursor:"pointer", fontFamily:"inherit", transition:"all 0.12s",
                  border:`1px solid ${isPaid?"#fecaca":T.accentMd}`,
                  background:isPaid?T.redLt:T.accentLt,
                  color:isPaid?T.red:T.accent,
                }}>{isPaid ? "Marcar pendiente" : "Marcar pagado"}</button>
              ),
            };
          })}
        />
        <div style={{height:4}} />
      </PCard>
    </div>
  );
}

// ── REGISTRO ──────────────────────────────────────────────
function AdminRegistro() {
  const { players } = window.TData;
  const { contacts } = window.TAdmin;
  const [search, setSearch] = React.useState("");
  const [expanded, setExpanded] = React.useState(null);

  const calcAge = dob => {
    const d = new Date(dob), now = new Date("2026-04-23");
    return now.getFullYear() - d.getFullYear() -
      (now < new Date(now.getFullYear(), d.getMonth(), d.getDate()) ? 1 : 0);
  };

  const filtered = players.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase()) || String(p.num).includes(search)
  );

  return (
    <div>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:20}}>
        <div>
          <h2 style={{margin:0,fontSize:20,fontWeight:700,color:T.text,letterSpacing:"-0.02em"}}>Registro de jugadoras</h2>
          <p style={{margin:"4px 0 0",fontSize:13,color:T.muted}}>Información de contacto y datos personales</p>
        </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:200,background:"#fff"}} />
          <span style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",color:T.muted,fontSize:13}}>⌕</span>
        </div>
      </div>

      <div style={{display:"flex",flexDirection:"column",gap:8}}>
        {filtered.map(p => {
          const c = contacts[p.id];
          const isOpen = expanded === p.id;
          const posColor = posColorsP[p.pos] || T.accent;
          const age = calcAge(c.dob);

          return (
            <PCard key={p.id} style={{padding:0,overflow:"hidden"}}>
              {/* Header */}
              <div onClick={() => setExpanded(isOpen ? null : p.id)} style={{
                display:"flex", alignItems:"center", gap:14, padding:"14px 20px",
                cursor:"pointer", background:isOpen?T.accentLt:"#fff", transition:"background 0.15s"
              }}>
                <PAvatar initials={p.initials} color={posColor} size={36} />
                <div style={{flex:1}}>
                  <div style={{fontWeight:600,fontSize:14,color:T.text}}>{p.name}</div>
                  <div style={{fontSize:12,color:T.muted,marginTop:3,display:"flex",alignItems:"center",gap:8}}>
                    <PBadge text={p.pos} color={posColor} variant="pill" />
                    <span>#{p.num} · {age} años · {c.school}</span>
                  </div>
                </div>
                <div style={{fontSize:13,color:T.muted,marginRight:8}}>{c.parents[0]?.phone}</div>
                <span style={{color:T.muted,fontSize:12}}>{isOpen ? "▲" : "▼"}</span>
              </div>

              {/* Expanded */}
              {isOpen && (
                <div style={{padding:"20px",borderTop:`1px solid ${T.border}`,background:"#fafbfd"}}>
                  <div className="t-grid-3" style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:20}}>

                    <div>
                      <PLabel>Datos personales</PLabel>
                      {[
                        {l:"Fecha de nacimiento", v:c.dob},
                        {l:"Edad",                v:`${age} años`},
                        {l:"Escuela",             v:c.school},
                        {l:"Tipo de sangre",      v:c.blood},
                        {l:"Alergias",            v:c.allergies},
                      ].map(s=>(
                        <div key={s.l} style={{display:"flex",justifyContent:"space-between",marginBottom:9}}>
                          <span style={{fontSize:12,color:T.muted}}>{s.l}</span>
                          <span style={{fontSize:12,fontWeight:600,color:T.text}}>{s.v}</span>
                        </div>
                      ))}
                    </div>

                    <div>
                      <PLabel>Padres / tutores</PLabel>
                      {c.parents.map((par, i) => (
                        <div key={i} style={{
                          marginBottom:10, padding:"10px 12px",
                          background:"#fff", borderRadius:6, border:`1px solid ${T.border}`
                        }}>
                          <div style={{fontWeight:600,fontSize:13,color:T.text,marginBottom:4}}>
                            {par.name}
                            <span style={{fontWeight:400,color:T.muted,fontSize:11,marginLeft:6}}>({par.rel})</span>
                          </div>
                          <div style={{fontSize:12,color:T.muted}}>{par.phone}</div>
                          <div style={{fontSize:12,color:T.muted}}>{par.email}</div>
                        </div>
                      ))}
                    </div>

                    <div>
                      <PLabel>Contacto de emergencia</PLabel>
                      <div style={{padding:"12px 14px",background:"#fff",borderRadius:6,border:`1px solid ${T.border}`}}>
                        <div style={{fontWeight:600,fontSize:13,color:T.text,marginBottom:6}}>{c.emergency.name}</div>
                        <div style={{fontSize:15,fontWeight:700,color:T.accent}}>{c.emergency.phone}</div>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </PCard>
          );
        })}
      </div>
    </div>
  );
}

// ── DOCUMENTOS ────────────────────────────────────────────
function AdminDocumentos() {
  const { players } = window.TData;
  const { documents: init, DOC_TYPES } = window.TAdmin;

  const [docs, setDocs] = React.useState(() => {
    try { const s = localStorage.getItem("tormentas_admin_docs"); return s ? JSON.parse(s) : init; }
    catch { return init; }
  });

  const CYCLE = ["ok","pendiente","faltante"];
  const cycle = (pid, key) => {
    setDocs(prev => {
      const cur  = prev[pid][key];
      const next = { ...prev, [pid]: { ...prev[pid], [key]: CYCLE[(CYCLE.indexOf(cur)+1)%CYCLE.length] } };
      localStorage.setItem("tormentas_admin_docs", JSON.stringify(next));
      return next;
    });
  };

  const sc = s => s==="ok" ? T.green  : s==="pendiente" ? T.yellow  : T.red;
  const sb = s => s==="ok" ? T.greenLt: s==="pendiente" ? T.yellowLt: T.redLt;
  const sl = s => s==="ok" ? "OK"     : s==="pendiente" ? "Pendiente": "Faltante";

  const total       = players.length * DOC_TYPES.length;
  const totalOk     = players.reduce((n,p)=>n+DOC_TYPES.filter(d=>docs[p.id]?.[d.key]==="ok").length,0);
  const totalFalta  = players.reduce((n,p)=>n+DOC_TYPES.filter(d=>docs[p.id]?.[d.key]==="faltante").length,0);
  const totalPend   = players.reduce((n,p)=>n+DOC_TYPES.filter(d=>docs[p.id]?.[d.key]==="pendiente").length,0);

  return (
    <div>
      <div style={{marginBottom:24}}>
        <h2 style={{margin:0,fontSize:20,fontWeight:700,color:T.text,letterSpacing:"-0.02em"}}>Documentos</h2>
        <p style={{margin:"4px 0 0",fontSize:13,color:T.muted}}>Haz clic en cada celda para cambiar el estado</p>
      </div>

      <div className="t-grid-6" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:20}}>
        <PKPICard label="Completos"   value={totalOk}    color={T.green}                          sub={`de ${total} totales`} />
        <PKPICard label="Faltantes"   value={totalFalta}  color={totalFalta>0?T.red:T.green}      sub="sin entregar" />
        <PKPICard label="Pendientes"  value={totalPend}   color={totalPend>0?T.yellow:T.green}    sub="en proceso" />
        <PKPICard label="Cumplimiento" value={`${Math.round(totalOk/total*100)}%`} color={totalOk/total>=0.8?T.green:T.yellow} />
      </div>

      <PCard padding="0">
        <div style={{overflowX:"auto"}}>
          <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
            <thead>
              <tr style={{background:T.stripe}}>
                <th style={{padding:"10px 16px",textAlign:"left",color:T.muted,fontWeight:600,
                  fontSize:11,textTransform:"uppercase",letterSpacing:"0.06em",
                  borderBottom:`2px solid ${T.border}`,minWidth:200,position:"sticky",left:0,background:T.stripe,zIndex:2}}>
                  Jugadora
                </th>
                {DOC_TYPES.map(dt=>(
                  <th key={dt.key} style={{padding:"10px 16px",textAlign:"center",color:T.muted,
                    fontWeight:600,fontSize:11,textTransform:"uppercase",letterSpacing:"0.06em",
                    borderBottom:`2px solid ${T.border}`,minWidth:140}}>
                    {dt.label}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {players.map((p, pi) => (
                <tr key={p.id} style={{background:pi%2===1?T.stripe:"#fff"}}>
                  <td style={{padding:"10px 16px",borderBottom:`1px solid ${T.border}`,
                    position:"sticky",left:0,background:pi%2===1?T.stripe:"#fff",zIndex:1}}>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <PAvatar initials={p.initials} color={posColorsP[p.pos]||T.accent} size={26} />
                      <div>
                        <div style={{fontWeight:500,fontSize:13,color:T.text}}>{p.name}</div>
                        <div style={{fontSize:11,color:T.muted}}>#{p.num}</div>
                      </div>
                    </div>
                  </td>
                  {DOC_TYPES.map(dt => {
                    const s = docs[p.id]?.[dt.key] || "faltante";
                    return (
                      <td key={dt.key} style={{padding:"10px 16px",textAlign:"center",borderBottom:`1px solid ${T.border}`}}>
                        <span onClick={() => cycle(p.id, dt.key)} style={{
                          display:"inline-block", padding:"4px 12px", borderRadius:4,
                          background:sb(s), color:sc(s), fontWeight:700, fontSize:11,
                          border:`1px solid ${sc(s)}30`, cursor:"pointer",
                          transition:"all 0.12s", userSelect:"none"
                        }}>{sl(s)}</span>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{display:"flex",gap:20,padding:"12px 16px",fontSize:11,color:T.muted,borderTop:`1px solid ${T.border}`}}>
          <span><span style={{color:T.green,fontWeight:700}}>OK</span> = Entregado</span>
          <span><span style={{color:T.yellow,fontWeight:700}}>Pendiente</span> = En revisión</span>
          <span><span style={{color:T.red,fontWeight:700}}>Faltante</span> = Sin entregar</span>
          <span style={{marginLeft:"auto"}}>Clic en celda para cambiar estado</span>
        </div>
      </PCard>
    </div>
  );
}

window.AdminPagos       = AdminPagos;
window.AdminRegistro    = AdminRegistro;
window.AdminDocumentos  = AdminDocumentos;

// ── JUGADORAS (ROSTER) ────────────────────────────────────────
const POSITIONS = ["Base","Escolta","Alero","Ala-Pívot","Pívot"];
const AVATAR_COLORS = ["#2bbdf7","#e8508a","#8b6db8","#1a7ecf","#10b981","#f59e0b","#ef4444","#6366f1"];

function AdminJugadoras() {
  const [players, setPlayers] = React.useState(() => [...window.TData.players]);
  const [modal, setModal] = React.useState(null); // null | "add" | "edit"
  const [form, setForm] = React.useState({});
  const [deleteId, setDeleteId] = React.useState(null);

  const persist = (list) => {
    window.TData.players = list;
    localStorage.setItem("tormentas_players", JSON.stringify(list));
    setPlayers(list);
  };

  const openAdd = () => {
    setForm({ name:"", num:"", pos:"Base", hand:"Derecha", color:"#2bbdf7" });
    setModal("add");
  };

  const openEdit = (p) => {
    setForm({...p, num: String(p.num)});
    setModal("edit");
  };

  const handleSubmit = () => {
    if (!form.name.trim() || !form.num) return;
    const words = form.name.trim().split(" ").filter(Boolean);
    const initials = words.map(w => w[0].toUpperCase()).join("").slice(0, 2);
    const num = parseInt(form.num) || 0;
    if (modal === "add") {
      const id = Math.max(0, ...players.map(p => p.id)) + 1;
      persist([...players, { ...form, id, num, initials, attendancePct: 90 }]);
    } else {
      persist(players.map(p => p.id === form.id ? { ...form, num, initials } : p));
    }
    setModal(null);
  };

  const confirmDelete = () => {
    persist(players.filter(p => p.id !== deleteId));
    setDeleteId(null);
  };

  const field = (label, key, type="text", opts=null) => (
    <div style={{ marginBottom:16 }}>
      <label style={{ fontSize:11, fontWeight:700, color:"#64748b", textTransform:"uppercase", letterSpacing:"0.07em", display:"block", marginBottom:6 }}>{label}</label>
      {opts ? (
        <select value={form[key]||""} onChange={e=>setForm(f=>({...f,[key]:e.target.value}))} style={inputSt}>
          {opts.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} value={form[key]||""} onChange={e=>setForm(f=>({...f,[key]:e.target.value}))} style={inputSt} />
      )}
    </div>
  );

  const inputSt = {
    width:"100%", padding:"10px 12px", border:"1.5px solid #e2e8f0", borderRadius:8,
    fontSize:13, fontFamily:"inherit", outline:"none", color:"#0f172a",
    background:"#f8fafc"
  };

  const btnSt = (color, bg) => ({
    padding:"8px 16px", borderRadius:8, border:"none", cursor:"pointer",
    fontWeight:600, fontSize:13, fontFamily:"inherit", color, background:bg
  });

  return (
    <div style={{ display:"flex", flexDirection:"column", gap:20 }}>

      {/* Header */}
      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:10 }}>
        <div>
          <h2 style={{ margin:0, fontSize:20, fontWeight:700, color:T.text, letterSpacing:"-0.02em" }}>Roster</h2>
          <p style={{ margin:"4px 0 0", fontSize:13, color:T.muted }}>{players.length} jugadoras registradas</p>
        </div>
        <button onClick={openAdd} style={{ ...btnSt("#fff","#2563eb"), padding:"10px 20px", fontSize:14 }}>
          + Agregar jugadora
        </button>
      </div>

      {/* List */}
      <div style={{ background:"#fff", borderRadius:12, border:`1px solid ${T.border}`, overflow:"hidden" }}>
        {players.map((p, i) => (
          <div key={p.id} style={{
            display:"flex", alignItems:"center", gap:14, padding:"14px 20px",
            borderBottom: i < players.length-1 ? `1px solid ${T.border}` : "none",
          }}>
            <PAvatar initials={p.initials} color={p.color || posColorsP[p.pos] || T.accent} size={40} />
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:14, fontWeight:600, color:T.text }}>{p.name}</div>
              <div style={{ fontSize:12, color:T.muted, marginTop:2 }}>#{p.num} · {p.pos} · {p.hand}</div>
            </div>
            <div style={{ display:"flex", gap:8, flexShrink:0 }}>
              <button onClick={() => openEdit(p)} style={{ ...btnSt("#2563eb","#eff6ff"), padding:"7px 14px" }}>Editar</button>
              <button onClick={() => setDeleteId(p.id)} style={{ ...btnSt("#dc2626","#fef2f2"), padding:"7px 14px" }}>Eliminar</button>
            </div>
          </div>
        ))}
      </div>

      {/* Add/Edit Modal */}
      {modal && (
        <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,0.5)", zIndex:300, display:"flex", alignItems:"center", justifyContent:"center", padding:16 }}>
          <div style={{ background:"#fff", borderRadius:16, padding:32, width:"min(460px,100%)", maxHeight:"90vh", overflowY:"auto" }}>
            <h3 style={{ margin:"0 0 24px", fontSize:18, fontWeight:700, color:T.text }}>
              {modal === "add" ? "Agregar jugadora" : "Editar jugadora"}
            </h3>

            {field("Nombre completo", "name")}
            <div className="t-grid-2" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
              <div>{field("Número", "num", "number")}</div>
              <div>{field("Posición", "pos", "text", POSITIONS)}</div>
            </div>
            {field("Mano dominante", "hand", "text", ["Derecha","Izquierda"])}

            <div style={{ marginBottom:16 }}>
              <label style={{ fontSize:11, fontWeight:700, color:"#64748b", textTransform:"uppercase", letterSpacing:"0.07em", display:"block", marginBottom:8 }}>Color del avatar</label>
              <div style={{ display:"flex", gap:10, flexWrap:"wrap" }}>
                {AVATAR_COLORS.map(c => (
                  <div key={c} onClick={() => setForm(f=>({...f, color:c}))} style={{
                    width:28, height:28, borderRadius:"50%", background:c, cursor:"pointer",
                    border: form.color===c ? "3px solid #0f172a" : "3px solid transparent",
                    boxSizing:"border-box"
                  }} />
                ))}
              </div>
            </div>

            <div style={{ display:"flex", gap:10, marginTop:24 }}>
              <button onClick={handleSubmit} style={{ ...btnSt("#fff","#2563eb"), flex:1, padding:"12px" }}>Guardar</button>
              <button onClick={() => setModal(null)} style={{ ...btnSt("#64748b","#f1f5f9"), flex:1, padding:"12px" }}>Cancelar</button>
            </div>
          </div>
        </div>
      )}

      {/* Delete confirmation */}
      {deleteId && (
        <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,0.5)", zIndex:300, display:"flex", alignItems:"center", justifyContent:"center", padding:16 }}>
          <div style={{ background:"#fff", borderRadius:16, padding:32, width:"min(360px,100%)", textAlign:"center" }}>
            <div style={{ fontSize:40, marginBottom:12 }}>⚠️</div>
            <h3 style={{ margin:"0 0 8px", fontSize:17, fontWeight:700, color:T.text }}>¿Eliminar jugadora?</h3>
            <p style={{ margin:"0 0 24px", fontSize:13, color:T.muted }}>
              {players.find(p=>p.id===deleteId)?.name} — Esta acción no se puede deshacer.
            </p>
            <div style={{ display:"flex", gap:10 }}>
              <button onClick={confirmDelete} style={{ ...btnSt("#fff","#dc2626"), flex:1, padding:"12px" }}>Eliminar</button>
              <button onClick={() => setDeleteId(null)} style={{ ...btnSt("#64748b","#f1f5f9"), flex:1, padding:"12px" }}>Cancelar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.AdminJugadoras = AdminJugadoras;