// shaiAcademy — Alumnos, Grupos, Profesores screens

const AlumnosList = () => {
  const [filter, setFilter] = React.useState('Todos');
  const filters = ['Todos', 'Voleibol', 'Fútbol', 'En mora', 'Preinscritos'];
  const filtered = ALUMNOS.filter(a => {
    if (filter === 'Todos') return true;
    if (filter === 'En mora') return a.estado === 'en_mora';
    if (filter === 'Preinscritos') return a.estado === 'preinscrito';
    return a.disciplina === filter;
  });

  return (
    <div className="page stack-l">
      <div className="between" style={{alignItems: 'flex-end'}}>
        <div>
          <div className="eyebrow">108 atletas · 6 grupos · 2 disciplinas</div>
          <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Alumnos<span style={{color:'var(--ink-3)'}}>.</span></h1>
        </div>
        <div className="row">
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/> Exportar</button>
          <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Invitar alumno</button>
        </div>
      </div>

      <div className="between" style={{borderBottom: '1px solid var(--rule)', paddingBottom: 16}}>
        <div className="row" style={{flexWrap: 'wrap', gap: 6}}>
          {filters.map(f => (
            <button key={f} className={`chip ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div className="row" style={{gap: 12}}>
          <div className="row" style={{gap: 6, padding: '6px 12px', border: '1px solid var(--rule)', borderRadius: 999}}>
            <Icon name="search" size={12}/>
            <input placeholder="Buscar por nombre…" style={{border: 0, background: 'transparent', outline: 0, fontSize: 12, width: 180}}/>
          </div>
        </div>
      </div>

      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 40}}></th>
              <th>Atleta</th>
              <th>Disciplina · Grupo</th>
              <th>Edad</th>
              <th>Asistencia</th>
              <th>Estado</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(a => (
              <tr key={a.id} style={{cursor: 'pointer'}}>
                <td><Avatar name={a.nombre}/></td>
                <td>
                  <div style={{fontWeight: 500}}>{a.nombre}</div>
                  <div className="tiny muted mono">{a.posicion ? a.posicion.toUpperCase() : 'POSICIÓN —'}</div>
                </td>
                <td>
                  <div className="small">{a.disciplina}</div>
                  <div className="tiny muted">{a.grupo}</div>
                </td>
                <td className="num">{a.edad}</td>
                <td>
                  <div className="row" style={{gap: 10}}>
                    <div className="bar" style={{width: 80}}><span style={{width: a.asistencia + '%', background: a.asistencia >= 85 ? 'var(--ink)' : a.asistencia >= 70 ? 'var(--warn)' : 'var(--danger)'}}></span></div>
                    <span className="num small">{a.asistencia}%</span>
                  </div>
                </td>
                <td><Badge tone={ESTADOS_LABEL[a.estado].tone}>{ESTADOS_LABEL[a.estado].label}</Badge></td>
                <td style={{textAlign: 'right'}}><Icon name="chevron" size={14}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const AlumnoDetalle = () => {
  const a = ALUMNOS[0]; // Camila
  const [tab, setTab] = React.useState('perfil');

  return (
    <div className="page stack-l">
      {/* Hero */}
      <div className="alumno-hero" style={{display: 'grid', gridTemplateColumns: '200px 1fr auto', gap: 32, alignItems: 'center', paddingBottom: 28, borderBottom: '1px solid var(--ink)'}}>
        <div className="ph alumno-hero-photo" style={{width: 200, height: 240, borderRadius: 'var(--r)'}}>foto atleta</div>
        <div style={{minWidth: 0}}>
          <div className="eyebrow">Dorsal 07 · Colocadora · Sub-15 Voleibol</div>
          <h1 className="display display-hero" style={{fontSize: 'clamp(48px, 9vw, 88px)', margin: '8px 0', lineHeight: 0.9, letterSpacing: '-0.03em'}}>
            Camila<br/><em style={{fontStyle: 'italic'}}>Reyes</em>
          </h1>
          <div className="row" style={{gap: 16, marginTop: 16, fontSize: 13, flexWrap: 'wrap'}}>
            <span className="mono muted" style={{whiteSpace: 'nowrap'}}>14 AÑOS</span>
            <span>·</span>
            <span style={{whiteSpace: 'nowrap'}}>Apoderado: María Reyes (madre)</span>
            <span>·</span>
            <span className="mono" style={{whiteSpace: 'nowrap'}}>+51 987 654 321</span>
          </div>
        </div>
        <div className="stack-s" style={{textAlign: 'right', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', flex: 'none'}}>
          <Badge tone="ok">Al día</Badge>
          <button className="btn btn-ghost btn-sm"><Icon name="share" size={12}/> CV público</button>
          <button className="btn btn-primary btn-sm"><Icon name="money" size={12}/> Registrar pago</button>
        </div>
      </div>

      {/* KPI band */}
      <div className="grid-4">
        <Stat label="Asistencia mes" value="94%" sub="15 de 16 sesiones"/>
        <Stat label="Progreso habilidades" value="+1.4" sub="vs mes anterior" trend="up"/>
        <Stat label="Meses en academia" value="18" sub="Desde oct 2024"/>
        <Stat label="Plan activo" value="50%" sub="Sesión 3 de 6"/>
      </div>

      {/* Tabs */}
      <div className="tabs">
        {['perfil','asistencia','evaluaciones','pagos','plan','nutricion','privacidad'].map(t => (
          <div key={t} className={`tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)} style={{textTransform: 'capitalize'}}>{t}</div>
        ))}
      </div>

      {tab === 'perfil' && (
        <div className="split-2">
          <div className="card" style={{padding: 24}}>
            <div className="eyebrow" style={{marginBottom: 16}}>Datos personales</div>
            <dl className="stack" style={{margin: 0}}>
              {[
                ['DNI', '74839201'],
                ['Fecha de nacimiento', '14 · 03 · 2012'],
                ['Email', 'camila.reyes@mail.com'],
                ['Dirección', 'San Borja, Lima'],
                ['Talla camiseta', 'M'],
                ['Altura', '1.68 m'],
                ['Peso', '54 kg'],
              ].map(([k, v]) => (
                <div key={k} className="between" style={{padding: '8px 0', borderBottom: '1px solid var(--rule)'}}>
                  <dt className="tiny muted mono" style={{textTransform: 'uppercase', letterSpacing: '0.08em'}}>{k}</dt>
                  <dd className="small" style={{margin: 0, fontWeight: 500}}>{v}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="card" style={{padding: 24}}>
            <div className="eyebrow" style={{marginBottom: 16}}>Apoderado principal</div>
            <div className="row" style={{gap: 16, marginBottom: 20}}>
              <Avatar name="María Reyes" size="avatar-lg" variant="avatar-b"/>
              <div>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em'}}>María Reyes</div>
                <div className="small muted">Madre · Usuario registrado</div>
              </div>
            </div>
            <div className="stack-s small">
              <div className="between" style={{padding: '6px 0'}}><span className="muted">Email</span><span>maria.reyes@mail.com</span></div>
              <div className="between" style={{padding: '6px 0'}}><span className="muted">Teléfono</span><span className="mono">+51 987 654 321</span></div>
              <div className="between" style={{padding: '6px 0'}}><span className="muted">WhatsApp</span><span className="mono">Activo</span></div>
            </div>
            <div className="eyebrow" style={{marginTop: 24, marginBottom: 12}}>Logros</div>
            <div className="stack-s">
              {[
                ['Medalla de plata', 'Torneo Intercolegial Lima · 2025'],
                ['MVP del partido', 'Liga Desarrollo · Oct 2025'],
                ['Campaña asistencia perfecta', 'Dic 2025'],
              ].map(([t, s]) => (
                <div key={t} className="row" style={{gap: 10, padding: '6px 0'}}>
                  <Icon name="star" size={14}/>
                  <div>
                    <div className="small" style={{fontWeight: 500}}>{t}</div>
                    <div className="tiny muted">{s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'evaluaciones' && (
        <div className="split-2">
          <div>
            <div className="eyebrow" style={{marginBottom: 16}}>Radar · Abril 2026 vs Marzo</div>
            <div className="card" style={{padding: 32, display: 'flex', justifyContent: 'center'}}>
              <Radar skills={HABILIDADES_VOLEIBOL} compare={HABILIDADES_PREV} size={380}/>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 16}}>Evolución · 6 meses</div>
            <div className="card" style={{padding: 24}}>
              <LineChart series={EVOLUCION} width={460} height={200}/>
              <div className="row" style={{gap: 20, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--rule)', fontSize: 12, flexWrap: 'wrap'}}>
                {EVOLUCION.map(s => (
                  <div key={s.name} className="row" style={{gap: 6}}><span className="dot" style={{background: s.color}}></span>{s.name}</div>
                ))}
              </div>
            </div>
            <div className="card" style={{padding: 20, marginTop: 16}}>
              <div className="eyebrow" style={{marginBottom: 12}}>Notas del evaluador</div>
              <p className="pullquote" style={{fontSize: 20}}>
                "Gran avance en colocación bajo presión. Trabajar lectura del bloqueo rival."
              </p>
              <div className="tiny muted mono" style={{marginTop: 12}}>PROF. LAURA SALCEDO · 14 ABR 2026</div>
            </div>
          </div>
        </div>
      )}

      {tab === 'asistencia' && (
        <div>
          <div className="split-2">
            <div>
              <div className="eyebrow" style={{marginBottom: 16}}>Últimos 60 días · cada celda = 1 clase</div>
              <div className="card" style={{padding: 24}}>
                <div className="dotgrid" style={{gridTemplateColumns: 'repeat(12, 16px)', gap: 5}}>
                  {ASIS_DOTS.map((c, i) => {
                    const cls = c === 'P' ? 'present' : c === 'T' ? 'late' : c === 'A' ? 'absent' : c === 'J' ? 'justified' : '';
                    return <div key={i} className={`dot-cell ${cls}`} style={{width: 16, height: 16, borderRadius: 3}}></div>;
                  })}
                </div>
                <div className="row" style={{gap: 16, marginTop: 20, fontSize: 11}}>
                  <div className="row" style={{gap: 6}}><div className="dot-cell present" style={{width:10, height:10, borderRadius: 2}}></div>Presente</div>
                  <div className="row" style={{gap: 6}}><div className="dot-cell late" style={{width:10, height:10, borderRadius: 2}}></div>Tardanza</div>
                  <div className="row" style={{gap: 6}}><div className="dot-cell justified" style={{width:10, height:10, borderRadius: 2}}></div>Justificada</div>
                  <div className="row" style={{gap: 6}}><div className="dot-cell absent" style={{width:10, height:10, borderRadius: 2}}></div>Falta</div>
                </div>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom: 16}}>6 meses</div>
              <div className="card" style={{padding: 24}}>
                <BarChart data={ASISTENCIA_MESES} width={440} height={180}/>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'pagos' && (
        <div className="card" style={{padding: 0}}>
          <table className="tbl">
            <thead><tr><th>Boleta</th><th>Concepto</th><th>Monto</th><th>Fecha</th><th>Método</th><th>Estado</th></tr></thead>
            <tbody>
              {PAGOS.filter(p => p.alumno === 'Camila Reyes').concat(PAGOS.slice(0, 5)).slice(0, 6).map((p, i) => (
                <tr key={i}>
                  <td className="mono">{p.id.replace('-041', '-0' + (40 + i))}</td>
                  <td>{p.concepto}</td>
                  <td className="num">S/ {p.monto}</td>
                  <td className="mono tiny muted">{p.fecha !== '—' ? p.fecha + ' 2026' : '—'}</td>
                  <td className="small">{p.metodo}</td>
                  <td>{p.estado === 'pagado' ? <Badge tone="ok">Pagado</Badge> : <Badge tone="warn">Pendiente</Badge>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'plan' && (
        <div>
          <div className="eyebrow" style={{marginBottom: 16}}>Plan activo · Bloque Técnico Saque · 14 abr – 26 may</div>
          <div style={{position: 'relative', overflowX: 'auto'}}>
            <div style={{display: 'flex', gap: 16, paddingBottom: 8}}>
              {PLAN_SESIONES.map((s, i) => (
                <div key={i} className="card" style={{padding: 20, width: 260, flex: 'none', background: i < 3 ? 'var(--ink)' : 'var(--paper-2)', color: i < 3 ? 'var(--paper)' : 'var(--ink)', border: i < 3 ? 'none' : '1px solid var(--rule)'}}>
                  <div className="between">
                    <div className="mono tiny" style={{opacity: 0.7}}>SESIÓN 0{s.num}</div>
                    {i < 3 && <Icon name="check" size={14}/>}
                  </div>
                  <div style={{fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 12, letterSpacing: '-0.02em'}}>{s.foco}</div>
                  <div className="tiny" style={{opacity: 0.7, marginBottom: 16}}>{s.dur} min</div>
                  <div className="stack-s tiny">
                    {s.ejercicios.map(e => <div key={e} style={{opacity: 0.85}}>· {e}</div>)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'nutricion' && <NutricionEmbed/>}

      {tab === 'privacidad' && (
        <div className="card" style={{padding: 28, maxWidth: 700}}>
          <div className="eyebrow" style={{marginBottom: 16}}>Acceso a tus datos</div>
          <p className="pullquote" style={{fontSize: 22, marginBottom: 24}}>
            Solo quienes tú aceptes pueden ver tus evaluaciones, métricas físicas y notas.
          </p>
          <div className="stack">
            {[
              { nombre: 'Prof. Laura Salcedo', rol: 'Entrenadora principal', estado: 'aceptado' },
              { nombre: 'Prof. Rocío Paredes', rol: 'Entrenadora Sub-17', estado: 'aceptado' },
              { nombre: 'Prof. Sofía Cárdenas', rol: 'Nutricionista', estado: 'pendiente' },
            ].map((p, i) => (
              <div key={i} className="between" style={{padding: '14px 0', borderBottom: '1px solid var(--rule)'}}>
                <div className="row" style={{gap: 12}}>
                  <Avatar name={p.nombre}/>
                  <div>
                    <div style={{fontSize: 13, fontWeight: 500}}>{p.nombre}</div>
                    <div className="tiny muted">{p.rol}</div>
                  </div>
                </div>
                {p.estado === 'aceptado' ? <Badge tone="ok">Acceso concedido</Badge> : (
                  <div className="row"><button className="btn btn-ghost btn-sm">Rechazar</button><button className="btn btn-primary btn-sm">Aceptar</button></div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const NutricionEmbed = () => {
  const totalK = COMIDAS_HOY.reduce((s, c) => s + c.kcal, 0);
  const meta = 2400;
  const macros = COMIDAS_HOY.reduce((s, c) => ({ p: s.p + c.p, c: s.c + c.c, g: s.g + c.g }), { p: 0, c: 0, g: 0 });
  return (
    <div className="split-nutri">
      <div className="card" style={{padding: 28}}>
        <div className="eyebrow">Calorías · Hoy</div>
        <div className="display display-hero" style={{fontSize: 'clamp(48px, 9vw, 88px)', lineHeight: 1, margin: '8px 0 4px'}}>{totalK}<span style={{fontSize: '0.32em', color: 'var(--ink-3)'}}> / {meta} kcal</span></div>
        <div className="bar accent" style={{marginTop: 16}}><span style={{width: (totalK / meta * 100) + '%'}}></span></div>
        <div className="stack" style={{marginTop: 24}}>
          {[
            ['Proteínas', macros.p, 140, 'var(--accent)'],
            ['Carbohidratos', macros.c, 280, 'var(--ink)'],
            ['Grasas', macros.g, 80, 'var(--lime)'],
          ].map(([n, v, max, c]) => (
            <div key={n}>
              <div className="between tiny" style={{marginBottom: 6}}><span className="mono" style={{textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-3)'}}>{n}</span><span className="mono">{v}g / {max}g</span></div>
              <div className="bar"><span style={{width: (v / max * 100) + '%', background: c}}></span></div>
            </div>
          ))}
        </div>
      </div>
      <div>
        <div className="eyebrow" style={{marginBottom: 16}}>Plan nutricional · "Pretemporada Abril"</div>
        <div className="stack">
          {COMIDAS_HOY.map((c, i) => (
            <div key={i} className="card" style={{padding: 18}}>
              <div className="between">
                <div className="row" style={{gap: 16}}>
                  <div className="mono" style={{fontSize: 14, color: 'var(--ink-3)', minWidth: 40}}>{c.hora}</div>
                  <div>
                    <div style={{fontFamily: 'var(--font-display)', fontSize: 20, letterSpacing: '-0.02em'}}>{c.nombre}</div>
                    <div className="tiny muted">{c.items}</div>
                  </div>
                </div>
                <div className="mono" style={{fontSize: 14}}>{c.kcal} kcal</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const Grupos = () => (
  <div className="page stack-l">
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">6 grupos · 108 alumnos · 4 profesores</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Grupos &amp; <em>horarios</em></h1>
      </div>
      <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Nuevo grupo</button>
    </div>

    {/* Week schedule */}
    <div>
      <SectionMarker num="01">Semana tipo</SectionMarker>
      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <div className="week-grid" style={{borderBottom: '1px solid var(--rule)'}}>
          <div style={{padding: 12}}></div>
          {['LUN','MAR','MIE','JUE','VIE','SAB','DOM'].map((d, i) => (
            <div key={d} style={{padding: 12, borderLeft: '1px solid var(--rule)', textAlign: 'center'}}>
              <div className="eyebrow">{d}</div>
              <div className="mono" style={{fontSize: 10, color: 'var(--ink-4)', marginTop: 2}}>{14 + i}</div>
            </div>
          ))}
        </div>
        {[
          { hora: '15:00', slots: [null, { grupo: 'Sub-13 V', color: 'var(--accent)' }, null, { grupo: 'Sub-13 V', color: 'var(--accent)' }, null, null, null] },
          { hora: '16:00', slots: [{ grupo: 'Sub-15 V', color: 'var(--ink)' }, { grupo: 'Sub-11 F', color: 'var(--lime-ink)' }, { grupo: 'Sub-15 V', color: 'var(--ink)' }, { grupo: 'Sub-11 F', color: 'var(--lime-ink)' }, { grupo: 'Sub-15 V', color: 'var(--ink)' }, { grupo: 'Sub-11 F', color: 'var(--lime-ink)' }, null] },
          { hora: '17:00', slots: [{ grupo: 'Sub-13 F', color: 'var(--lime-ink)' }, null, { grupo: 'Sub-13 F', color: 'var(--lime-ink)' }, null, { grupo: 'Sub-13 F', color: 'var(--lime-ink)' }, null, null] },
          { hora: '18:00', slots: [{ grupo: 'Sub-17 V', color: 'var(--ink)' }, { grupo: 'Sub-15 F', color: 'var(--lime-ink)' }, { grupo: 'Sub-17 V', color: 'var(--ink)' }, { grupo: 'Sub-15 F', color: 'var(--lime-ink)' }, { grupo: 'Sub-17 V', color: 'var(--ink)' }, null, null] },
        ].map((row, i, arr) => (
          <div key={i} className="week-grid" style={{borderBottom: i < arr.length - 1 ? '1px solid var(--rule)' : 'none'}}>
            <div className="mono" style={{padding: 12, fontSize: 12, color: 'var(--ink-3)'}}>{row.hora}</div>
            {row.slots.map((s, j) => (
              <div key={j} style={{padding: 8, borderLeft: '1px solid var(--rule)', minHeight: 60}}>
                {s && (
                  <div style={{background: s.color, color: 'white', padding: '8px 10px', borderRadius: 6, fontSize: 11, fontWeight: 500}}>
                    {s.grupo}
                    <div className="mono" style={{fontSize: 9, opacity: 0.8, marginTop: 2}}>2H</div>
                  </div>
                )}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>

    <div>
      <SectionMarker num="02">Todos los grupos</SectionMarker>
      <div className="grid-3">
        {GRUPOS.map(g => (
          <div key={g.id} className="card" style={{padding: 24, cursor: 'pointer'}}>
            <div className="between">
              <Badge tone={g.disciplina === 'Voleibol' ? 'default' : 'default'}>{g.disciplina}</Badge>
              <span className="mono tiny muted">{g.alumnos} ATLETAS</span>
            </div>
            <div style={{fontFamily: 'var(--font-display)', fontSize: 28, margin: '16px 0 4px', letterSpacing: '-0.02em'}}>{g.nombre}</div>
            <div className="small muted">{g.horario}</div>
            <hr className="hr" style={{margin: '16px 0'}}/>
            <div className="between small">
              <div className="row" style={{gap: 8}}>
                <Avatar name={g.profesor.replace('Prof. ', '')} size="" style={{width: 24, height: 24, fontSize: 11}}/>
                <span>{g.profesor}</span>
              </div>
              <span className="tiny muted mono">{g.sala.toUpperCase()}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const Profesores = () => (
  <div className="page stack-l">
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">6 profesores · 2 disciplinas</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Profesores<span style={{color:'var(--ink-3)'}}>.</span></h1>
      </div>
      <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Invitar profesor</button>
    </div>
    <div className="grid-3">
      {[
        { n: 'Laura Salcedo', d: 'Voleibol', g: 2, a: 32, estado: 'activo', exp: '8 años', foto: 'b' },
        { n: 'Rocío Paredes', d: 'Voleibol', g: 1, a: 12, estado: 'activo', exp: '12 años', foto: 'a' },
        { n: 'Carlos Tineo', d: 'Fútbol', g: 2, a: 42, estado: 'activo', exp: '6 años', foto: 'c' },
        { n: 'Jorge Maldonado', d: 'Fútbol', g: 1, a: 18, estado: 'activo', exp: '15 años', foto: 'b' },
        { n: 'Sofía Cárdenas', d: 'Nutrición', g: 0, a: 44, estado: 'activo', exp: '4 años', foto: 'a' },
        { n: 'Daniel Rojas', d: 'Voleibol', g: 0, a: 0, estado: 'pendiente', exp: '—', foto: 'c' },
      ].map((p, i) => (
        <div key={i} className="card" style={{padding: 24}}>
          <div className="row" style={{gap: 16, marginBottom: 16}}>
            <Avatar name={p.n} size="avatar-lg" variant={'avatar-' + p.foto}/>
            <div>
              <div style={{fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em'}}>{p.n}</div>
              <div className="tiny muted mono" style={{textTransform:'uppercase', letterSpacing:'0.08em'}}>{p.d} · {p.exp}</div>
            </div>
          </div>
          <div className="grid-2" style={{gap: 8}}>
            <div style={{padding: 12, background: 'var(--paper-3)', borderRadius: 8}}>
              <div className="tiny muted mono">GRUPOS</div>
              <div className="display" style={{fontSize: 28, marginTop: 4}}>{p.g}</div>
            </div>
            <div style={{padding: 12, background: 'var(--paper-3)', borderRadius: 8}}>
              <div className="tiny muted mono">ATLETAS</div>
              <div className="display" style={{fontSize: 28, marginTop: 4}}>{p.a}</div>
            </div>
          </div>
          <div className="between" style={{marginTop: 16}}>
            {p.estado === 'activo' ? <Badge tone="ok">Activo</Badge> : <Badge tone="warn">Pendiente aprobación</Badge>}
            <button className="btn btn-ghost btn-sm">Ver perfil</button>
          </div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { AlumnosList, AlumnoDetalle, Grupos, Profesores, NutricionEmbed });