// shaiAcademy — Operations: Asistencia, Pagos, Planes, Evaluaciones

const Asistencia = () => {
  const grupo = ALUMNOS.filter(a => a.grupo === 'Sub-15 Avanzado' && a.disciplina === 'Voleibol');
  const extra = ALUMNOS.slice(0, 10).filter(a => !grupo.includes(a)).slice(0, 8);
  const lista = [...grupo, ...extra];
  const [estados, setEstados] = React.useState(() => Object.fromEntries(lista.map((a, i) => [a.id, i === 2 ? 'tardanza' : i === 4 ? 'falta_i' : 'presente'])));
  const ESTS = [
    { id: 'presente', label: 'P', color: 'var(--ink)', tone: 'Presente' },
    { id: 'tardanza', label: 'T', color: 'var(--warn)', tone: 'Tardanza' },
    { id: 'falta_j',  label: 'J', color: 'var(--ink-3)', tone: 'Falta J.' },
    { id: 'falta_i',  label: 'F', color: 'var(--danger)', tone: 'Falta' },
  ];
  return (
    <div className="page stack-l">
      <div className="between" style={{alignItems: 'flex-start', flexWrap: 'wrap', gap: 16}}>
        <div style={{minWidth: 0, flex: '1 1 400px'}}>
          <div className="eyebrow">Lun 18 abr · 16:00 · Cancha A · Prof. Salcedo</div>
          <h1 className="display" style={{fontSize: 48, margin: '10px 0 0', lineHeight: 1}}>Sub-15 <em>Voleibol</em></h1>
          <div className="row" style={{marginTop: 14, gap: 16, fontSize: 13, flexWrap: 'wrap'}}>
            <span className="muted" style={{whiteSpace: 'nowrap'}}>Clase #34 del ciclo</span>
            <span>·</span>
            <span style={{whiteSpace: 'nowrap'}}>Tolerancia: 10 min</span>
          </div>
        </div>
        <div className="stack-s" style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-end', flex: 'none', gap: 8}}>
          <div className="mono tiny muted" style={{whiteSpace: 'nowrap'}}>MARCADOS {Object.keys(estados).length} / {lista.length}</div>
          <button className="btn btn-primary btn-sm" style={{whiteSpace: 'nowrap'}}><Icon name="check" size={12}/> Guardar asistencia</button>
        </div>
      </div>

      <div className="row" style={{gap: 12, flexWrap: 'wrap'}}>
        <button className="chip" style={{whiteSpace: 'nowrap'}}>Marcar todos presentes</button>
        <button className="chip" style={{whiteSpace: 'nowrap'}}>Marcar todos ausentes</button>
        <div style={{flex: 1}}></div>
        <div className="row" style={{gap: 16, flexWrap: 'wrap'}}>
          {ESTS.map(e => (
            <div key={e.id} className="row" style={{gap: 6, fontSize: 12, whiteSpace: 'nowrap'}}>
              <span className="dot" style={{background: e.color}}></span>{e.tone}
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{padding: 0}}>
        {lista.map((a, i) => {
          const cur = estados[a.id];
          return (
            <div key={a.id} className="between" style={{padding: '14px 20px', borderBottom: i < lista.length - 1 ? '1px solid var(--rule)' : 'none'}}>
              <div className="row" style={{gap: 14, flex: 1, minWidth: 0}}>
                <div className="mono" style={{width: 24, color: 'var(--ink-3)', fontSize: 12, flex: 'none'}}>{String(i+1).padStart(2, '0')}</div>
                <Avatar name={a.nombre}/>
                <div style={{minWidth: 0, overflow: 'hidden'}}>
                  <div style={{fontSize: 14, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{a.nombre}</div>
                  <div className="tiny muted" style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{a.posicion || '—'} · dorsal {a.dorsal || '—'}</div>
                </div>
              </div>
              <div className="row" style={{gap: 6, flex: 'none'}}>
                {ESTS.map(e => (
                  <button
                    key={e.id}
                    onClick={() => setEstados({ ...estados, [a.id]: e.id })}
                    className="mono"
                    style={{
                      width: 44, height: 40, borderRadius: 8, fontSize: 13, fontWeight: 600,
                      background: cur === e.id ? e.color : 'transparent',
                      color: cur === e.id ? (e.id === 'tardanza' ? 'var(--ink)' : 'white') : 'var(--ink-3)',
                      border: '1px solid ' + (cur === e.id ? e.color : 'var(--rule)')
                    }}>
                    {e.label}
                  </button>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const AsistenciaMobile = () => {
  const lista = ALUMNOS.slice(0, 8);
  const [estados, setEstados] = React.useState(() => Object.fromEntries(lista.map((a, i) => [a.id, i === 2 ? 'tardanza' : i === 6 ? null : 'presente'])));
  const ESTS = [
    { id: 'presente', label: 'P', color: 'var(--ink)' },
    { id: 'tardanza', label: 'T', color: 'var(--warn)' },
    { id: 'falta_j',  label: 'J', color: 'var(--ink-3)' },
    { id: 'falta_i',  label: 'F', color: 'var(--danger)' },
  ];
  return (
    <div style={{padding: '60px 20px 80px', overflow: 'auto', flex: 1}}>
      <div className="eyebrow">Lun 18 abr · 16:00</div>
      <h1 className="display" style={{fontSize: 40, margin: '4px 0 4px', lineHeight: 1}}>Sub-15 <em>Voleibol</em></h1>
      <div className="small muted">{lista.length} atletas · Cancha A</div>

      <div className="row" style={{gap: 12, marginTop: 20, marginBottom: 16, fontSize: 11}}>
        <button className="chip" style={{fontSize: 10}}>Todos presentes</button>
        <div className="mono tiny muted" style={{marginLeft: 'auto'}}>
          {Object.values(estados).filter(Boolean).length}/{lista.length}
        </div>
      </div>

      <div className="stack-s">
        {lista.map((a, i) => {
          const cur = estados[a.id];
          return (
            <div key={a.id} className="card" style={{padding: 12}}>
              <div className="row" style={{gap: 10, marginBottom: 10}}>
                <Avatar name={a.nombre}/>
                <div style={{flex: 1}}>
                  <div style={{fontSize: 13, fontWeight: 500}}>{a.nombre}</div>
                  <div className="tiny muted">#{a.dorsal || '—'} · {a.posicion || '—'}</div>
                </div>
              </div>
              <div className="row" style={{gap: 6}}>
                {ESTS.map(e => (
                  <button key={e.id} onClick={() => setEstados({ ...estados, [a.id]: e.id })}
                    className="mono"
                    style={{
                      flex: 1, height: 38, borderRadius: 8, fontSize: 13, fontWeight: 600,
                      background: cur === e.id ? e.color : 'transparent',
                      color: cur === e.id ? (e.id === 'tardanza' ? 'var(--ink)' : 'white') : 'var(--ink-3)',
                      border: '1px solid ' + (cur === e.id ? e.color : 'var(--rule)')
                    }}>
                    {e.label}
                  </button>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      <button className="btn btn-primary" style={{position: 'fixed', bottom: 20, left: 20, right: 20, justifyContent: 'center', padding: '14px'}}>
        Guardar asistencia · {Object.values(estados).filter(Boolean).length} marcados
      </button>
    </div>
  );
};

const Pagos = () => (
  <div className="page stack-l">
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">Abril 2026 · 48 boletas emitidas</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Boletario<span style={{color: 'var(--accent)'}}>.</span></h1>
      </div>
      <div className="row">
        <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/> Exportar mes</button>
        <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Registrar pago</button>
      </div>
    </div>

    <div className="grid-4">
      <Stat label="Ingresos Abril" value="S/ 18.4k" sub="73% de meta"/>
      <Stat label="Cobrado" value="45" sub="de 48 boletas"/>
      <Stat label="En mora" value="3" sub="S/ 520 pendientes" trend="dn"/>
      <Stat label="Promedio por atleta" value="S/ 172"/>
    </div>

    {/* Alert */}
    <div className="card" style={{padding: 20, borderColor: 'var(--danger)', background: 'var(--danger-soft)'}}>
      <div className="between">
        <div>
          <div className="eyebrow" style={{color: 'var(--danger)'}}>Cobranza vencida</div>
          <div style={{fontSize: 16, fontWeight: 500, marginTop: 4}}>3 atletas con mensualidad vencida · S/ 520 por cobrar</div>
        </div>
        <button className="btn btn-ghost btn-sm">Enviar recordatorios WhatsApp</button>
      </div>
    </div>

    <div>
      <SectionMarker num="01">Movimientos recientes</SectionMarker>
      <div className="card" style={{padding: 0}}>
        <table className="tbl">
          <thead><tr><th>N° Boleta</th><th>Atleta</th><th>Concepto</th><th>Método</th><th>Fecha</th><th>Monto</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {PAGOS.map((p, i) => (
              <tr key={i}>
                <td className="mono tiny">{p.id}</td>
                <td><div className="row" style={{gap: 10}}><Avatar name={p.alumno}/><span style={{fontWeight: 500}}>{p.alumno}</span></div></td>
                <td>{p.concepto}</td>
                <td className="small">{p.metodo}</td>
                <td className="mono tiny muted">{p.fecha !== '—' ? p.fecha + ' 2026' : '—'}</td>
                <td className="num">S/ {p.monto}</td>
                <td>{p.estado === 'pagado' ? <Badge tone="ok">Pagado</Badge> : <Badge tone="warn">Pendiente</Badge>}</td>
                <td style={{textAlign: 'right'}}><Icon name="chevron" size={14}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>

    {/* Ticket preview */}
    <div>
      <SectionMarker num="02">Vista de comprobante</SectionMarker>
      <div className="row" style={{gap: 24, alignItems: 'flex-start'}}>
        <div className="ticket split-ticket" style={{maxWidth: 500, flex: 1, padding: 0}}>
          <div style={{padding: 28}}>
            <div className="row between">
              <div>
                <div className="brand-mark" style={{width: 36, height: 36, fontSize: 20}}>s</div>
              </div>
              <div style={{textAlign: 'right'}}>
                <div className="eyebrow">Boleta</div>
                <div className="mono" style={{fontSize: 14, fontWeight: 500}}>BOL-2026-041</div>
              </div>
            </div>
            <div className="eyebrow" style={{marginTop: 28}}>Concepto</div>
            <div style={{fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em', marginTop: 4}}>Mensualidad Abril</div>
            <div className="small muted">Sub-15 Voleibol · Camila Reyes</div>
            <div className="grid-2" style={{marginTop: 24, gap: 12}}>
              <div><div className="tiny muted mono">FECHA</div><div className="mono">05 abr 2026</div></div>
              <div><div className="tiny muted mono">MÉTODO</div><div className="mono">Yape</div></div>
            </div>
          </div>
          <div className="ticket-perforation"></div>
          <div style={{padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
            <div>
              <div className="eyebrow">Total</div>
              <div className="display" style={{fontSize: 56, marginTop: 4, lineHeight: 1}}>S/ 180</div>
            </div>
            <div>
              <Badge tone="ok">Pagado</Badge>
              <div className="tiny muted mono" style={{marginTop: 8}}>ACADEMIA SHAIACADEMY</div>
            </div>
          </div>
        </div>
        <div className="card" style={{padding: 20, flex: 1}}>
          <div className="eyebrow" style={{marginBottom: 12}}>Comprobante adjunto</div>
          <div className="ph" style={{height: 240}}>captura yape</div>
          <div className="row" style={{marginTop: 16, gap: 8}}>
            <button className="btn btn-ghost btn-sm"><Icon name="download" size={12}/> PDF</button>
            <button className="btn btn-ghost btn-sm"><Icon name="share" size={12}/> Compartir</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Planes = () => (
  <div className="page stack-l">
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">12 planes activos · 3 en revisión</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Planes de <em>entrenamiento</em></h1>
      </div>
      <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Nuevo plan</button>
    </div>

    <div className="row" style={{gap: 6}}>
      {['Todos', 'Aprobados', 'En revisión', 'Borradores', 'Archivados'].map((f, i) => (
        <button key={f} className={`chip ${i === 0 ? 'active' : ''}`}>{f}</button>
      ))}
    </div>

    <div className="grid-3">
      {[
        { n: 'Bloque Técnico · Saque', g: 'Sub-15 Voleibol', sesiones: 6, prog: 50, estado: 'aprobado', prof: 'L. Salcedo', fechas: '14 abr – 26 may' },
        { n: 'Preparación Física Abril', g: 'Sub-17 Voleibol', sesiones: 8, prog: 25, estado: 'revision', prof: 'L. Salcedo', fechas: '02 abr – 30 abr' },
        { n: 'Fundamentos · Pase y Control', g: 'Sub-13 Fútbol', sesiones: 10, prog: 60, estado: 'aprobado', prof: 'C. Tineo', fechas: '20 mar – 20 may' },
        { n: 'Táctica 6v6', g: 'Sub-17 Voleibol', sesiones: 5, prog: 0, estado: 'borrador', prof: 'R. Paredes', fechas: '—' },
        { n: 'Individual · Camila R.', g: 'Camila Reyes', sesiones: 4, prog: 75, estado: 'aprobado', prof: 'L. Salcedo', fechas: '01 abr – 15 may' },
        { n: 'Portería · Cierres', g: 'Sub-17 Fútbol', sesiones: 6, prog: 0, estado: 'rechazado', prof: 'J. Maldonado', fechas: '—' },
      ].map((p, i) => (
        <div key={i} className="card" style={{padding: 24, cursor: 'pointer'}}>
          <div className="between">
            {p.estado === 'aprobado' && <Badge tone="ok">Aprobado</Badge>}
            {p.estado === 'revision' && <Badge tone="warn">En revisión</Badge>}
            {p.estado === 'borrador' && <Badge>Borrador</Badge>}
            {p.estado === 'rechazado' && <Badge tone="danger">Rechazado</Badge>}
            <span className="mono tiny muted">{p.sesiones} SESIONES</span>
          </div>
          <div style={{fontFamily: 'var(--font-display)', fontSize: 22, margin: '16px 0 4px', letterSpacing: '-0.02em', lineHeight: 1.1}}>{p.n}</div>
          <div className="small muted">{p.g}</div>
          <hr className="hr" style={{margin: '20px 0 16px'}}/>
          {p.prog > 0 && (
            <>
              <div className="between tiny" style={{marginBottom: 6}}><span className="mono muted">PROGRESO</span><span className="mono">{p.prog}%</span></div>
              <div className="bar accent" style={{marginBottom: 16}}><span style={{width: p.prog + '%'}}></span></div>
            </>
          )}
          <div className="between tiny muted">
            <span>{p.prof}</span>
            <span className="mono">{p.fechas}</span>
          </div>
        </div>
      ))}
    </div>

    <div>
      <SectionMarker num="01">Editor de plan · Bloque Técnico Saque</SectionMarker>
      <div className="card" style={{padding: 24}}>
        <div className="row" style={{gap: 24, marginBottom: 24, flexWrap: 'wrap'}}>
          <div><div className="eyebrow">Tipo</div><div style={{fontSize: 16, marginTop: 4}}>Grupal</div></div>
          <div><div className="eyebrow">Grupo</div><div style={{fontSize: 16, marginTop: 4}}>Sub-15 Voleibol</div></div>
          <div><div className="eyebrow">Fechas</div><div style={{fontSize: 16, marginTop: 4}}>14 abr – 26 may</div></div>
          <div><div className="eyebrow">Estado</div><div style={{marginTop: 4}}><Badge tone="ok">Aprobado</Badge></div></div>
        </div>
        <div className="eyebrow" style={{marginBottom: 12}}>Objetivos</div>
        <div className="stack-s" style={{marginBottom: 24}}>
          {[
            ['Técnico', 'Dominio del saque flotado bajo presión'],
            ['Físico', 'Aumentar potencia explosiva de piernas'],
            ['Táctico', 'Lectura de bloqueo rival en saque'],
          ].map(([t, d], i) => (
            <div key={i} className="row" style={{gap: 16, padding: '8px 0', borderBottom: '1px solid var(--rule)'}}>
              <Badge tone="ink">{t}</Badge>
              <span>{d}</span>
            </div>
          ))}
        </div>
        <div className="eyebrow" style={{marginBottom: 12}}>Sesiones</div>
        <div style={{display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 8}}>
          {PLAN_SESIONES.map((s, i) => (
            <div key={i} className="card" style={{padding: 16, minWidth: 220, flex: 'none'}}>
              <div className="mono tiny muted">SESIÓN 0{s.num}</div>
              <div style={{fontFamily: 'var(--font-display)', fontSize: 18, margin: '8px 0 4px', letterSpacing: '-0.02em'}}>{s.foco}</div>
              <div className="tiny muted" style={{marginBottom: 12}}>{s.dur} min</div>
              <div className="stack-s tiny">
                {s.ejercicios.map(e => <div key={e} className="row" style={{gap: 6}}><span className="dot" style={{background: 'var(--ink-3)'}}></span>{e}</div>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const Evaluaciones = () => (
  <div className="page stack-l">
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">Evaluación periódica · Abril 2026</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Evaluaciones<span style={{color: 'var(--accent)'}}>.</span></h1>
      </div>
      <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Nueva evaluación</button>
    </div>

    {/* Giant radar hero */}
    <div className="card" style={{padding: 40, background: 'var(--ink)', color: 'var(--paper)', border: 'none'}}>
      <div className="split-radar">
        <div>
          <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Atleta destacada · abril</div>
          <h2 className="display" style={{fontSize: 80, color: 'var(--paper)', letterSpacing: '-0.03em', lineHeight: 0.95, margin: '12px 0 16px'}}>
            Camila<br/><em style={{fontStyle: 'italic'}}>Reyes</em>
          </h2>
          <p className="pullquote" style={{color: 'var(--paper)', fontSize: 22}}>
            Progreso de <em style={{color: 'var(--accent)', fontStyle: 'italic'}}>+1.4</em> puntos promedio en habilidades técnicas.
          </p>
          <div className="grid-3" style={{marginTop: 32}}>
            <div>
              <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Promedio</div>
              <div className="display" style={{fontSize: 48, color: 'var(--paper)'}}>7.5</div>
            </div>
            <div>
              <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Pico</div>
              <div className="display" style={{fontSize: 48, color: 'var(--accent)'}}>9.0</div>
            </div>
            <div>
              <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Delta</div>
              <div className="display" style={{fontSize: 48, color: 'var(--paper)'}}>+1.4</div>
            </div>
          </div>
        </div>
        <div style={{display: 'flex', justifyContent: 'center'}}>
          <div style={{filter: 'invert(1) hue-rotate(180deg)'}}>
            <Radar skills={HABILIDADES_VOLEIBOL} compare={HABILIDADES_PREV} size={400}/>
          </div>
        </div>
      </div>
    </div>

    <div>
      <SectionMarker num="01">Ranking del grupo · Sub-15 Voleibol</SectionMarker>
      <div className="card" style={{padding: 0}}>
        <table className="tbl">
          <thead><tr><th style={{width: 40}}>#</th><th>Atleta</th><th>Saque</th><th>Recep.</th><th>Coloc.</th><th>Remate</th><th>Bloqueo</th><th>Promedio</th><th>Evolución</th></tr></thead>
          <tbody>
            {[
              { n: 'Camila Reyes',    skills: [8, 7, 9, 7, 6], avg: 7.4, spark: [5,6,6,7,7,8] },
              { n: 'Lucía Mendoza',   skills: [7, 8, 7, 8, 7], avg: 7.4, spark: [6,6,7,7,7,8] },
              { n: 'Valentina Solís', skills: [6, 9, 6, 5, 8], avg: 6.8, spark: [5,5,6,7,7,7] },
              { n: 'Isabela Quispe',  skills: [5, 6, 5, 4, 5], avg: 5.0, spark: [3,3,4,4,5,5] },
            ].map((r, i) => (
              <tr key={i}>
                <td className="mono" style={{color: i === 0 ? 'var(--accent)' : 'var(--ink-3)', fontWeight: 600}}>{i + 1}</td>
                <td><div className="row" style={{gap: 10}}><Avatar name={r.n}/><span style={{fontWeight: 500}}>{r.n}</span></div></td>
                {r.skills.map((s, j) => <td key={j} className="num" style={{color: s >= 8 ? 'var(--accent)' : s >= 6 ? 'var(--ink)' : 'var(--ink-3)'}}>{s}</td>)}
                <td><div className="display" style={{fontSize: 20}}>{r.avg}</div></td>
                <td><Sparkline data={r.spark} width={80} height={24}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

const CVDeportivo = () => (
  <div className="page stack-l" style={{maxWidth: 1100}}>
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">Hoja de vida deportiva · vista previa pública</div>
        <h1 className="display" style={{fontSize: 56, margin: '8px 0 0'}}>CV <em>Deportivo</em></h1>
      </div>
      <div className="row">
        <button className="btn btn-ghost btn-sm"><Icon name="share" size={12}/> Copiar link público</button>
        <button className="btn btn-primary btn-sm"><Icon name="download" size={12}/> Descargar PDF</button>
      </div>
    </div>

    {/* The CV itself — editorial layout */}
    <div style={{background: 'var(--paper-2)', border: '1px solid var(--rule)', padding: 56, borderRadius: 'var(--r-lg)'}}>
      {/* Header */}
      <div className="cv-header" style={{display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'flex-end', paddingBottom: 28, borderBottom: '2px solid var(--ink)'}}>
        <div>
          <div className="eyebrow">shaiAcademy · 2026</div>
          <h2 className="display" style={{fontSize: 112, lineHeight: 0.88, letterSpacing: '-0.04em', margin: '16px 0 12px', maxWidth: 700}}>
            Camila<br/>Reyes<span style={{color: 'var(--accent)'}}>.</span>
          </h2>
          <div className="row" style={{gap: 20, fontSize: 14}}>
            <span>Colocadora</span>
            <span className="muted">·</span>
            <span>Voleibol · Sub-15</span>
            <span className="muted">·</span>
            <span>14 años</span>
            <span className="muted">·</span>
            <span>1.68 m</span>
          </div>
        </div>
        <div className="ph" style={{width: 180, height: 220}}>foto oficial</div>
      </div>

      {/* Body grid */}
      <div className="split-cv" style={{marginTop: 40}}>
        {/* Left column */}
        <div className="stack-l">
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Perfil</div>
            <p className="pullquote" style={{fontSize: 24, lineHeight: 1.2}}>
              Colocadora zurda con 18 meses en formación competitiva. Lectura de juego, precisión y liderazgo emergente.
            </p>
          </div>

          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Datos físicos</div>
            <div className="stack-s">
              {[
                ['Altura', '1.68 m'], ['Peso', '54 kg'], ['Envergadura', '1.71 m'],
                ['Salto vertical', '52 cm'], ['Sprint 30m', '4.9 s']
              ].map(([k, v]) => (
                <div key={k} className="between" style={{padding: '6px 0', borderBottom: '1px solid var(--rule)', fontSize: 13}}>
                  <span className="muted mono tiny" style={{textTransform: 'uppercase', letterSpacing: '0.08em'}}>{k}</span>
                  <span style={{fontWeight: 500}}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Logros</div>
            <div className="stack-s">
              {[
                ['2025', 'Medalla de plata · Torneo Intercolegial Lima'],
                ['2025', 'MVP del partido · Liga Desarrollo Oct'],
                ['2025', 'Asistencia perfecta · Dic'],
                ['2024', 'Selección regional Sub-14'],
              ].map(([y, t], i) => (
                <div key={i} className="row" style={{gap: 16, padding: '8px 0', borderBottom: '1px solid var(--rule)'}}>
                  <span className="mono" style={{fontSize: 12, color: 'var(--ink-3)', minWidth: 40}}>{y}</span>
                  <span style={{fontSize: 13}}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right column */}
        <div className="stack-l">
          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Habilidades técnicas</div>
            <div style={{display: 'flex', justifyContent: 'center'}}>
              <Radar skills={HABILIDADES_VOLEIBOL} compare={HABILIDADES_PREV} size={320}/>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Evolución · 6 meses</div>
            <LineChart series={EVOLUCION} width={560} height={180}/>
          </div>

          <div>
            <div className="eyebrow" style={{marginBottom: 12}}>Asistencia</div>
            <div className="between" style={{alignItems: 'flex-end', marginBottom: 16}}>
              <div className="display" style={{fontSize: 88, lineHeight: 0.9}}>94<span style={{fontSize: 32, color: 'var(--ink-3)'}}>%</span></div>
              <div className="tiny muted mono">PROMEDIO GENERAL · 18 MESES</div>
            </div>
            <BarChart data={ASISTENCIA_MESES} width={560} height={100}/>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div style={{marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--ink)'}} className="between">
        <div className="row" style={{gap: 16}}>
          <div className="brand-mark" style={{width: 40, height: 40, fontSize: 22}}>s</div>
          <div>
            <div style={{fontFamily: 'var(--font-display)', fontSize: 18}}>Academia Gutiérrez</div>
            <div className="tiny muted mono">shaiacademy.com/cv/camila-reyes-7a3f</div>
          </div>
        </div>
        <div className="ph" style={{width: 72, height: 72, borderRadius: 8}}>QR</div>
      </div>
    </div>
  </div>
);

const Nutricion = () => (
  <div className="page stack-l">
    <div className="between" style={{alignItems: 'flex-end'}}>
      <div>
        <div className="eyebrow">Plan nutricional · abril · 44 atletas</div>
        <h1 className="display" style={{fontSize: 72, margin: '8px 0 0'}}>Nutrición<span style={{color: 'var(--lime-ink)'}}>.</span></h1>
      </div>
      <button className="btn btn-accent btn-sm"><Icon name="plus" size={14}/> Nuevo plan</button>
    </div>

    <div className="grid-4">
      <Stat label="Planes activos" value="8" sub="en 5 grupos"/>
      <Stat label="Adherencia promedio" value="78%" sub="+4pts vs marzo" trend="up"/>
      <Stat label="Atletas monitoreados" value="44"/>
      <Stat label="Registros hoy" value="32" sub="de 44 · 73%"/>
    </div>

    <div className="split-2">
      <div>
        <SectionMarker num="01">Plan — Pretemporada Abril</SectionMarker>
        <div className="card" style={{padding: 0}}>
          <div style={{padding: 24, background: 'var(--lime)', color: 'var(--lime-ink)', borderRadius: 'var(--r-lg) var(--r-lg) 0 0'}}>
            <div className="eyebrow">Objetivo</div>
            <div style={{fontFamily: 'var(--font-display)', fontSize: 28, marginTop: 8, letterSpacing: '-0.02em'}}>Composición corporal + energía sostenida</div>
            <div className="grid-3" style={{marginTop: 20}}>
              <div><div className="tiny mono" style={{opacity: 0.7}}>KCAL META</div><div className="display" style={{fontSize: 32}}>2400</div></div>
              <div><div className="tiny mono" style={{opacity: 0.7}}>PROTEÍNAS</div><div className="display" style={{fontSize: 32}}>140g</div></div>
              <div><div className="tiny mono" style={{opacity: 0.7}}>AGUA</div><div className="display" style={{fontSize: 32}}>3.0L</div></div>
            </div>
          </div>
          <div style={{padding: 24}}>
            <div className="eyebrow" style={{marginBottom: 12}}>Comidas recomendadas</div>
            <div className="stack-s">
              {COMIDAS_HOY.map((c, i) => (
                <div key={i} className="between small" style={{padding: '10px 0', borderBottom: '1px solid var(--rule)'}}>
                  <div className="row" style={{gap: 12}}>
                    <span className="mono" style={{color: 'var(--ink-3)', minWidth: 44}}>{c.hora}</span>
                    <div>
                      <div style={{fontWeight: 500}}>{c.nombre}</div>
                      <div className="tiny muted">{c.items}</div>
                    </div>
                  </div>
                  <span className="mono tiny">{c.kcal} kcal</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div>
        <SectionMarker num="02">Adherencia del equipo</SectionMarker>
        <div className="card" style={{padding: 24}}>
          <div className="stack">
            {[
              { n: 'Camila Reyes', v: 92 },
              { n: 'Mateo Fernández', v: 88 },
              { n: 'Lucía Mendoza', v: 85 },
              { n: 'Sebastián Ochoa', v: 78 },
              { n: 'Diego Herrera', v: 65 },
              { n: 'Nicolás Ramírez', v: 52 },
            ].map((a, i) => (
              <div key={i}>
                <div className="between tiny" style={{marginBottom: 6}}>
                  <span style={{fontSize: 13}}>{a.n}</span>
                  <span className="mono num">{a.v}%</span>
                </div>
                <div className="bar lime"><span style={{width: a.v + '%', background: a.v >= 80 ? 'var(--lime)' : a.v >= 60 ? 'var(--warn)' : 'var(--danger)'}}></span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Login = () => (
  <div className="login-split">
    <div style={{padding: 60, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
      <div className="row" style={{gap: 12}}>
        <div className="brand-mark" style={{width: 40, height: 40, fontSize: 22}}>s</div>
        <div style={{fontFamily: 'var(--font-display)', fontSize: 22}}>shai<em style={{fontStyle:'italic'}}>Academy</em></div>
      </div>
      <div style={{maxWidth: 420, width: '100%', margin: '0 auto'}}>
        <div className="eyebrow">Bienvenida de vuelta</div>
        <h1 className="display" style={{fontSize: 64, margin: '12px 0 8px', lineHeight: 0.95, letterSpacing: '-0.03em'}}>
          Donde cada<br/>atleta<br/><em style={{fontStyle: 'italic', color: 'var(--accent)'}}>progresa</em>.
        </h1>
        <p className="muted" style={{marginTop: 16, marginBottom: 40, fontSize: 15}}>Ingresa con tu email de academia.</p>
        <div className="stack">
          <div>
            <div className="eyebrow" style={{marginBottom: 8}}>Email</div>
            <input placeholder="tu@academia.com" style={{width: '100%', padding: '14px 16px', border: '1px solid var(--rule-strong)', borderRadius: 10, fontSize: 14, background: 'var(--paper-2)'}}/>
          </div>
          <div>
            <div className="between" style={{marginBottom: 8}}>
              <div className="eyebrow">Contraseña</div>
              <a className="tiny link-ink" onClick={() => { localStorage.setItem('shai.screen','recuperar'); location.reload(); }} style={{cursor: 'pointer'}}>¿Olvidaste?</a>
            </div>
            <input type="password" placeholder="••••••••" style={{width: '100%', padding: '14px 16px', border: '1px solid var(--rule-strong)', borderRadius: 10, fontSize: 14, background: 'var(--paper-2)'}}/>
          </div>
          <button className="btn btn-primary" style={{width: '100%', justifyContent: 'center', padding: '14px'}}>Iniciar sesión <Icon name="arrow_right" size={14}/></button>
        </div>
        <div className="tiny muted" style={{marginTop: 24, textAlign: 'center'}}>
          ¿Llegaste por una invitación? <a className="link-ink">Completa tu registro</a>
        </div>
      </div>
      <div className="tiny muted mono" style={{letterSpacing: '0.08em'}}>© 2026 SHAIACADEMY · ACADEMIA GUTIÉRREZ</div>
    </div>
    <div style={{position: 'relative', background: 'var(--ink)', overflow: 'hidden'}}>
      <div className="ph" style={{position: 'absolute', inset: 0, borderRadius: 0, border: 'none', background: 'repeating-linear-gradient(135deg, #1a1a1a 0 14px, #222 14px 28px)'}}>foto · academia en acción</div>
      <div style={{position: 'absolute', left: 48, bottom: 48, right: 48, color: 'var(--paper)'}}>
        <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Testimonio</div>
        <p className="pullquote" style={{color: 'var(--paper)', marginTop: 16, maxWidth: 500}}>
          "Dejé de perseguir padres por WhatsApp. Ahora sé exactamente quién pagó, quién vino, y cómo están progresando."
        </p>
        <div className="row" style={{gap: 12, marginTop: 20}}>
          <Avatar name="Shaira Gutiérrez"/>
          <div>
            <div style={{fontSize: 13, color: 'var(--paper)'}}>Shaira Gutiérrez</div>
            <div className="tiny" style={{color: 'var(--ink-4)'}}>Fundadora · Academia Gutiérrez</div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Registro = () => (
  <div style={{minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40}}>
    <div style={{maxWidth: 640, width: '100%'}}>
      <div className="row" style={{gap: 12, marginBottom: 40}}>
        <div className="brand-mark" style={{width: 40, height: 40, fontSize: 22}}>s</div>
        <div style={{fontFamily: 'var(--font-display)', fontSize: 22}}>shai<em style={{fontStyle:'italic'}}>Academy</em></div>
      </div>
      <div className="card" style={{padding: 40}}>
        <div className="row" style={{gap: 12, marginBottom: 8}}>
          <Badge tone="accent">Invitación válida</Badge>
          <span className="tiny muted mono">EXPIRA EN 6 DÍAS</span>
        </div>
        <h1 className="display" style={{fontSize: 44, margin: '16px 0 8px', lineHeight: 1.05, letterSpacing: '-0.03em'}}>
          Bienvenido a <em style={{fontStyle:'italic'}}>Academia Gutiérrez</em>
        </h1>
        <p className="muted">Fuiste invitado como <strong>Profesor de Voleibol</strong>. Completa tu registro para activar tu cuenta.</p>

        <div className="card" style={{padding: 16, background: 'var(--paper-3)', marginTop: 24, border: 'none'}}>
          <div className="row" style={{gap: 12}}>
            <Avatar name="Shaira Gutiérrez" variant="avatar-c"/>
            <div>
              <div className="tiny muted">Invitado por</div>
              <div style={{fontSize: 13, fontWeight: 500}}>Shaira Gutiérrez · Owner</div>
            </div>
          </div>
        </div>

        <hr className="hr" style={{margin: '28px 0'}}/>

        <div className="grid-2" style={{gap: 16}}>
          {[['Nombre','Daniel'], ['Apellido','Rojas']].map(([k, v]) => (
            <div key={k}>
              <div className="eyebrow" style={{marginBottom: 8}}>{k}</div>
              <input defaultValue={v} style={{width: '100%', padding: '12px 14px', border: '1px solid var(--rule-strong)', borderRadius: 10, fontSize: 14, background: 'var(--paper)'}}/>
            </div>
          ))}
          <div style={{gridColumn: '1 / -1'}}>
            <div className="eyebrow" style={{marginBottom: 8}}>Email</div>
            <input defaultValue="daniel.rojas@mail.com" readOnly style={{width: '100%', padding: '12px 14px', border: '1px solid var(--rule)', borderRadius: 10, fontSize: 14, background: 'var(--paper-3)', color: 'var(--ink-3)'}}/>
            <div className="tiny muted" style={{marginTop: 6}}>Email fijado por la invitación.</div>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 8}}>Contraseña</div>
            <input type="password" placeholder="mín. 8 caracteres" style={{width: '100%', padding: '12px 14px', border: '1px solid var(--rule-strong)', borderRadius: 10, fontSize: 14, background: 'var(--paper)'}}/>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 8}}>Confirmar</div>
            <input type="password" placeholder="repítela" style={{width: '100%', padding: '12px 14px', border: '1px solid var(--rule-strong)', borderRadius: 10, fontSize: 14, background: 'var(--paper)'}}/>
          </div>
        </div>

        <button className="btn btn-primary" style={{marginTop: 32, width: '100%', justifyContent: 'center', padding: '14px'}}>
          Crear cuenta y unirme <Icon name="arrow_right" size={14}/>
        </button>
      </div>
    </div>
  </div>
);

Object.assign(window, { Asistencia, AsistenciaMobile, Pagos, Planes, Evaluaciones, CVDeportivo, Nutricion, Login, Registro, Recuperar });


// ============================================================
// RECUPERAR CONTRASEÑA — 3 steps in one screen
// (1) Email → (2) Check inbox → (3) Nueva contraseña
// ============================================================

const PasswordStrength = ({ value }) => {
  const v = value || '';
  let score = 0;
  if (v.length >= 8) score++;
  if (v.length >= 12) score++;
  if (/[A-Z]/.test(v) && /[a-z]/.test(v)) score++;
  if (/[0-9]/.test(v)) score++;
  if (/[^A-Za-z0-9]/.test(v)) score++;
  const labels = ['Muy débil', 'Débil', 'Aceptable', 'Fuerte', 'Excelente'];
  const tones  = ['var(--danger)', 'var(--warn)', 'var(--warn)', 'var(--ok)', 'var(--ok)'];
  const filled = Math.max(score, v.length > 0 ? 1 : 0);
  return (
    <div style={{marginTop: 10}}>
      <div className="row" style={{gap: 4}}>
        {[0,1,2,3,4].map(i => (
          <span key={i} style={{
            flex: 1, height: 3, borderRadius: 2,
            background: i < filled ? tones[Math.min(filled - 1, 4)] : 'var(--rule)'
          }}/>
        ))}
      </div>
      <div className="tiny" style={{marginTop: 6, color: v ? tones[Math.min(filled - 1, 4)] : 'var(--ink-3)'}}>
        {v ? labels[Math.min(filled - 1, 4)] : 'Mínimo 8 caracteres, mezcla letras y números'}
      </div>
    </div>
  );
};

const Recuperar = () => {
  const [step, setStep] = React.useState(1);
  const [email, setEmail] = React.useState('shaira@gutierrezvb.pe');
  const [pwd, setPwd] = React.useState('');
  const [pwd2, setPwd2] = React.useState('');
  const [cooldown, setCooldown] = React.useState(0);

  React.useEffect(() => {
    if (cooldown <= 0) return;
    const t = setTimeout(() => setCooldown(c => c - 1), 1000);
    return () => clearTimeout(t);
  }, [cooldown]);

  const inputStyle = {
    width: '100%', padding: '14px 16px', border: '1px solid var(--rule-strong)',
    borderRadius: 10, fontSize: 14, background: 'var(--paper-2)',
  };

  // Shared brand header
  const Header = () => (
    <div className="row" style={{gap: 12}}>
      <div className="brand-mark" style={{width: 40, height: 40, fontSize: 22}}>s</div>
      <div style={{fontFamily: 'var(--font-display)', fontSize: 22}}>shai<em style={{fontStyle:'italic'}}>Academy</em></div>
    </div>
  );

  // Shared footer
  const Footer = () => (
    <div className="tiny muted mono" style={{letterSpacing: '0.08em'}}>© 2026 SHAIACADEMY · RECUPERACIÓN DE CUENTA</div>
  );

  // Breadcrumbs / stepper
  const Stepper = () => (
    <div className="row" style={{gap: 10, marginBottom: 24, flexWrap: 'wrap'}}>
      {[
        { n: 1, label: 'Email' },
        { n: 2, label: 'Correo enviado' },
        { n: 3, label: 'Nueva contraseña' },
      ].map((s, i, arr) => (
        <React.Fragment key={s.n}>
          <div className="row" style={{gap: 8, alignItems: 'center'}}>
            <span style={{
              width: 22, height: 22, borderRadius: '50%', display: 'grid', placeItems: 'center',
              fontSize: 11, fontFamily: 'var(--font-mono)',
              background: step > s.n ? 'var(--ok)' : step === s.n ? 'var(--ink)' : 'var(--paper-3)',
              color: step >= s.n ? 'white' : 'var(--ink-3)',
              border: step < s.n ? '1px solid var(--rule)' : 'none',
            }}>{step > s.n ? '✓' : s.n}</span>
            <span className="tiny" style={{color: step >= s.n ? 'var(--ink)' : 'var(--ink-3)', fontWeight: step === s.n ? 500 : 400}}>{s.label}</span>
          </div>
          {i < arr.length - 1 && <span style={{flex: 'none', width: 18, height: 1, background: 'var(--rule)'}}/>}
        </React.Fragment>
      ))}
    </div>
  );

  return (
    <div className="login-split">
      <div style={{padding: 60, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
        <Header/>
        <div style={{maxWidth: 440, width: '100%', margin: '0 auto'}}>
          <Stepper/>

          {step === 1 && (
            <>
              <div className="eyebrow">Paso 01 · Identifícate</div>
              <h1 className="display" style={{fontSize: 56, margin: '12px 0 8px', lineHeight: 0.95, letterSpacing: '-0.03em'}}>
                Recuperar<br/><em style={{fontStyle: 'italic', color: 'var(--accent)'}}>acceso</em>.
              </h1>
              <p className="muted" style={{marginTop: 16, marginBottom: 36, fontSize: 15}}>
                Ingresa el email con el que inicias sesión. Te enviaremos un enlace para crear una contraseña nueva.
              </p>
              <div className="stack">
                <div>
                  <div className="eyebrow" style={{marginBottom: 8}}>Email de tu cuenta</div>
                  <input
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="tu@academia.com"
                    style={inputStyle}
                    autoFocus
                  />
                </div>
                <button
                  className="btn btn-primary"
                  onClick={() => { setStep(2); setCooldown(30); }}
                  disabled={!email || !email.includes('@')}
                  style={{width: '100%', justifyContent: 'center', padding: '14px', opacity: (!email || !email.includes('@')) ? 0.5 : 1}}
                >
                  Enviar enlace <Icon name="arrow_right" size={14}/>
                </button>
              </div>
              <div className="tiny muted" style={{marginTop: 24, textAlign: 'center'}}>
                ¿Ya la recordaste? <a className="link-ink" onClick={() => { localStorage.setItem('shai.screen','login'); location.reload(); }} style={{cursor: 'pointer'}}>Volver a iniciar sesión</a>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div className="eyebrow">Paso 02 · Revisa tu correo</div>
              <h1 className="display" style={{fontSize: 56, margin: '12px 0 8px', lineHeight: 0.95, letterSpacing: '-0.03em'}}>
                Te enviamos un<br/><em style={{fontStyle: 'italic', color: 'var(--accent)'}}>enlace</em>.
              </h1>
              <p className="muted" style={{marginTop: 16, marginBottom: 24, fontSize: 15, lineHeight: 1.5}}>
                Si <span className="mono" style={{color: 'var(--ink)'}}>{email}</span> pertenece a una cuenta de shaiAcademy, el enlace llegará en unos segundos. El enlace es válido por <strong>30 minutos</strong>.
              </p>

              {/* Email preview card */}
              <div style={{border: '1px solid var(--rule)', borderRadius: 12, padding: 20, background: 'var(--paper-2)', marginBottom: 24}}>
                <div className="row between" style={{marginBottom: 12}}>
                  <div className="tiny muted mono" style={{letterSpacing: '0.08em'}}>VISTA PREVIA · INBOX</div>
                  <Badge tone="ok">Entregado</Badge>
                </div>
                <div className="row" style={{gap: 12, alignItems: 'flex-start'}}>
                  <div style={{width: 36, height: 36, borderRadius: '50%', background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 16, flex: 'none'}}>s</div>
                  <div style={{minWidth: 0, flex: 1}}>
                    <div style={{fontSize: 13, fontWeight: 500, marginBottom: 2}}>shaiAcademy · Recuperación</div>
                    <div className="tiny muted" style={{marginBottom: 8}}>no-reply@shai.app · hace un momento</div>
                    <div style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5}}>
                      Hola, haz clic en el enlace para crear una nueva contraseña. Expira en 30 min.
                    </div>
                    <div className="mono tiny" style={{marginTop: 10, padding: '8px 10px', background: 'var(--paper)', borderRadius: 6, color: 'var(--accent)', wordBreak: 'break-all'}}>
                      shai.app/reset?token=3f8b2a1c9d…
                    </div>
                  </div>
                </div>
              </div>

              <div className="stack-s">
                <button
                  className="btn btn-primary"
                  onClick={() => setStep(3)}
                  style={{width: '100%', justifyContent: 'center', padding: '14px'}}
                >
                  He abierto el enlace <Icon name="arrow_right" size={14}/>
                </button>
                <div className="row between" style={{marginTop: 8, flexWrap: 'wrap', gap: 8}}>
                  <button
                    className="btn btn-ghost btn-sm"
                    onClick={() => { if (cooldown === 0) setCooldown(30); }}
                    disabled={cooldown > 0}
                    style={{opacity: cooldown > 0 ? 0.5 : 1}}
                  >
                    <Icon name="mail" size={12}/> {cooldown > 0 ? `Reenviar en ${cooldown}s` : 'Reenviar correo'}
                  </button>
                  <a className="tiny link-ink" onClick={() => setStep(1)} style={{cursor: 'pointer'}}>
                    Usar otro email
                  </a>
                </div>
              </div>

              <div className="tiny muted" style={{marginTop: 28, textAlign: 'center', lineHeight: 1.5}}>
                ¿No llega? Revisa spam o promociones.<br/>
                Si sigues sin recibirlo, escríbenos a <span className="mono">soporte@shai.app</span>.
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <div className="eyebrow">Paso 03 · Nueva contraseña</div>
              <h1 className="display" style={{fontSize: 56, margin: '12px 0 8px', lineHeight: 0.95, letterSpacing: '-0.03em'}}>
                Elige una<br/><em style={{fontStyle: 'italic', color: 'var(--accent)'}}>nueva</em>.
              </h1>
              <p className="muted" style={{marginTop: 16, marginBottom: 32, fontSize: 15, lineHeight: 1.5}}>
                Para <span className="mono" style={{color: 'var(--ink)'}}>{email}</span>. Al guardarla, cerraremos todas las sesiones activas en otros dispositivos.
              </p>
              <div className="stack">
                <div>
                  <div className="eyebrow" style={{marginBottom: 8}}>Nueva contraseña</div>
                  <input
                    type="password"
                    value={pwd}
                    onChange={e => setPwd(e.target.value)}
                    placeholder="mín. 8 caracteres"
                    style={inputStyle}
                    autoFocus
                  />
                  <PasswordStrength value={pwd}/>
                </div>
                <div>
                  <div className="eyebrow" style={{marginBottom: 8}}>Confirmar</div>
                  <input
                    type="password"
                    value={pwd2}
                    onChange={e => setPwd2(e.target.value)}
                    placeholder="repítela"
                    style={{
                      ...inputStyle,
                      borderColor: pwd2 && pwd2 !== pwd ? 'var(--danger)' : 'var(--rule-strong)',
                    }}
                  />
                  {pwd2 && pwd2 !== pwd && (
                    <div className="tiny" style={{marginTop: 6, color: 'var(--danger)'}}>
                      Las contraseñas no coinciden.
                    </div>
                  )}
                  {pwd2 && pwd2 === pwd && pwd.length >= 8 && (
                    <div className="tiny" style={{marginTop: 6, color: 'var(--ok)'}}>
                      <Icon name="check" size={11}/> Coinciden.
                    </div>
                  )}
                </div>

                {/* Security row */}
                <div style={{padding: '12px 14px', background: 'var(--paper-3)', borderRadius: 8, fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5}}>
                  <div className="row" style={{gap: 8, alignItems: 'flex-start'}}>
                    <Icon name="lock" size={13}/>
                    <span>Al guardar: cerraremos las sesiones en otros dispositivos y te enviaremos un aviso por correo.</span>
                  </div>
                </div>

                <button
                  className="btn btn-primary"
                  disabled={!(pwd.length >= 8 && pwd === pwd2)}
                  onClick={() => { alert('Contraseña actualizada. Redirigiendo al login…'); localStorage.setItem('shai.screen','login'); location.reload(); }}
                  style={{
                    width: '100%', justifyContent: 'center', padding: '14px',
                    opacity: !(pwd.length >= 8 && pwd === pwd2) ? 0.5 : 1,
                  }}
                >
                  Guardar contraseña <Icon name="arrow_right" size={14}/>
                </button>
              </div>
            </>
          )}
        </div>
        <Footer/>
      </div>

      {/* Right panel — same dark aesthetic as Login */}
      <div style={{position: 'relative', background: 'var(--ink)', overflow: 'hidden'}}>
        <div className="ph" style={{position: 'absolute', inset: 0, borderRadius: 0, border: 'none', background: 'repeating-linear-gradient(135deg, #1a1a1a 0 14px, #222 14px 28px)'}}>foto · academia · seguridad</div>
        <div style={{position: 'absolute', left: 48, bottom: 48, right: 48, color: 'var(--paper)'}}>
          <div className="eyebrow" style={{color: 'var(--ink-4)'}}>Seguridad</div>
          <p className="pullquote" style={{color: 'var(--paper)', marginTop: 16, maxWidth: 500}}>
            "Las cuentas de shaiAcademy guardan pagos, asistencia y datos de menores. Tu contraseña es la primera línea."
          </p>
          <div className="row" style={{gap: 24, marginTop: 32}}>
            <div>
              <div className="tiny mono" style={{color: 'var(--ink-4)', letterSpacing: '0.08em'}}>ENLACE VÁLIDO</div>
              <div style={{fontFamily: 'var(--font-display)', fontSize: 32, color: 'var(--paper)', lineHeight: 1}}>30 min</div>
            </div>
            <div>
              <div className="tiny mono" style={{color: 'var(--ink-4)', letterSpacing: '0.08em'}}>ENCRIPTACIÓN</div>
              <div style={{fontFamily: 'var(--font-display)', fontSize: 32, color: 'var(--paper)', lineHeight: 1}}>bcrypt</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Recuperar, PasswordStrength });