/* ============================================================
   CIEN — páginas
   ============================================================ */

/* Las tres fotos de Destacados son de contexto, no del contenido: van por
   posición y no por ítem. Los `id` son los del editor de slots — si se cambian,
   se pierde la imagen que el usuario haya elegido para cada uno. */
const SLOTS_DEST = [
  { id:"dest-mercado", src:"assets/contexto/trabajadores.jpg", ph:"Trabajadores · sector manufacturero" },
  { id:"dest-dolar",   src:"assets/contexto/dolar.jpg",        ph:"Calle Florida · cotización del dólar" },
  { id:"dest-fce",     src:"assets/contexto/fce.jpg",          ph:"Entrada de la FCE-UBA" },
];

function abrirDestacado(d){
  if(!d) return;
  // `path` es una página propia del sitio (el monitor de /mora/): se navega en la
  // misma pestaña. `url` es un medio externo y sí abre pestaña nueva.
  if(d.path) window.location.href = d.path;
  else if(d.url) window.open(d.url, "_blank", "noreferrer");
  else go(d.route);
}

/* ---------------- HOME ---------------- */
function Home(){
  // El recuadro grande es SIEMPRE el último informe: pesa más que una nota en un
  // medio o que una actividad, así que no compite por fecha. Los dos chicos de la
  // derecha sí son lo último del feed, sea del tipo que sea.
  const lead = LO_ULTIMO.find(d=>d.kind==="informe") || LO_ULTIMO[0];
  const dest = [lead, ...LO_ULTIMO.filter(d=>d!==lead).slice(0,2)];
  // La franja de abajo no repite los informes que ya salieron en Destacados.
  const yaEnDestacados = new Set(dest.filter(d=>d.kind==="informe").map(d=>d.route));
  const recientes = INFORMES.filter(i=> !yaEnDestacados.has("informe/"+i.slug)).slice(0,4);
  return (
    <main>
      <section className="hero-wrap fade">
        <div className="wrap hero-grid">
          {/* Sin eyebrow: desde que el lockup del header dice el nombre completo,
              repetirlo acá arriba del titular era decir lo mismo dos veces. */}
          <div className="hero">
            <h1 className="display">
              Economía política con rigor.<br/>Para la Argentina que viene.
            </h1>
            <p className="lede">
              Una nueva generación de economistas que no elige entre el rigor técnico y la
              perspectiva política. Desde la FCE-UBA, para el debate público argentino.
            </p>
            <div className="cta-row">
              <span className="btn btn-green" onClick={()=>go("informes")}>Ver informes <Arrow/></span>
              <span className="btn btn-ghost" onClick={()=>go("institucional")}>Quiénes somos</span>
            </div>
          </div>
          <HeroChart/>
        </div>
      </section>

      <BarChartRule/>

      {/* qué es CIEN */}
      <section className="section">
        <div className="read" style={{textAlign:"left"}}>
          <BarAccent/>
          <Eyebrow>Qué es CIEN</Eyebrow>
          <p style={{fontFamily:"var(--serif)", fontSize:"clamp(22px,3vw,30px)", lineHeight:1.36, marginTop:"22px", color:"#23241b"}}>
            Somos un centro de investigación económica integrado por economistas jóvenes con
            fuerte formación académica. Unimos el rigor técnico con una perspectiva económica
            heterodoxa comprometida con la transformación.
          </p>
          <p style={{color:"var(--muted)", marginTop:"20px", maxWidth:"62ch"}}>
            Combinamos profundidad analítica con una perspectiva económica heterodoxa, al servicio
            del debate público: estudiantes, periodistas, funcionarios y el ecosistema académico argentino.
          </p>
        </div>
      </section>

      {/* destacados */}
      <section className="wrap section tight">
        <div className="sec-head">
          <div>
            <BarAccent/>
            <Eyebrow>Lo último</Eyebrow>
            <h2 style={{marginTop:"14px"}}>Destacados</h2>
          </div>
          <a className="tlink" onClick={()=>go("informes")}>Todos los informes <Arrow/></a>
        </div>

        <div className="feat-grid">
          <div className="feat-main" onClick={()=>abrirDestacado(dest[0])} style={{cursor:"pointer"}}>
            <div className="ph" onClick={(e)=>e.stopPropagation()}>
              <image-slot id={SLOTS_DEST[0].id} shape="rect" src={SLOTS_DEST[0].src} placeholder={SLOTS_DEST[0].ph}></image-slot>
            </div>
            <div className="body">
              <Eyebrow>{dest[0].label} · {dest[0].date}</Eyebrow>
              <h3>{dest[0].title}</h3>
              {dest[0].summary ? <p>{dest[0].summary}</p> : <p>{dest[0].meta}</p>}
              <div className="meta">
                <span className="tlink">{dest[0].cta} <Arrow/></span>
              </div>
            </div>
          </div>

          <div className="feat-side">
            {dest.slice(1).map((d,i)=>(
              <div className="feat-card" key={d.route||d.path||d.url} onClick={()=>abrirDestacado(d)}>
                <div className="ph" onClick={(e)=>e.stopPropagation()}>
                  <image-slot id={SLOTS_DEST[i+1].id} shape="rect" src={SLOTS_DEST[i+1].src} placeholder={SLOTS_DEST[i+1].ph}></image-slot>
                </div>
                <div className="body">
                  <Eyebrow>{d.label} · {d.date}</Eyebrow>
                  <h4>{d.title}</h4>
                  <div className="meta">{d.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* franja informes recientes */}
      <section className="wrap section tight">
        <div className="sec-head">
          <div><BarAccent/><Eyebrow>Archivo</Eyebrow><h2 style={{marginTop:"14px"}}>Informes recientes</h2></div>
          <a className="tlink" onClick={()=>go("informes")}>Ver los {INFORMES.length} <Arrow/></a>
        </div>
        <div className="inf-cards">
          {recientes.map(inf=>(
            <InformeCard key={inf.slug} inf={inf}/>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ---------------- INSTITUCIONAL ---------------- */
function Institucional(){
  return (
    <main>
      <section className="wrap hero fade">
        <BarAccent/>
        <Eyebrow>Institucional</Eyebrow>
        <h1 className="display" style={{marginTop:"24px", fontSize:"clamp(36px,5.4vw,68px)"}}>
          Rigor académico,<br/>convicción política.
        </h1>
      </section>
      <hr className="divider"/>
      <section className="wrap section tight">
        <div className="inst-block">
          <div className="k"><Eyebrow className="e">Quiénes somos</Eyebrow><h2>Quiénes somos</h2></div>
          <div className="c">
            <p>CIEN es un centro de investigación económica de la Facultad de Ciencias Económicas de la Universidad de Buenos Aires, integrado por economistas jóvenes con fuerte formación académica.</p>
            <p>Unimos el rigor técnico con una perspectiva económica heterodoxa comprometida con la transformación. Producimos informes de coyuntura, documentos de trabajo y notas de análisis para el debate público.</p>
          </div>
        </div>
        <div className="inst-block">
          <div className="k"><Eyebrow className="e">Misión</Eyebrow><h2>Nuestra misión</h2></div>
          <div className="c">
            <p>Producir investigación económica de alta calidad técnica que no renuncie a una mirada política sobre los problemas del desarrollo argentino. Acercamos el análisis riguroso a quienes toman decisiones, informan y estudian.</p>
            <p>Creemos que los datos y las fuentes importan, y que el conocimiento económico no es neutral: tiene consecuencias distributivas que elegimos hacer explícitas.</p>
          </div>
        </div>
        <div className="inst-block">
          <div className="k"><Eyebrow className="e">Visión</Eyebrow><h2>Nuestra visión</h2></div>
          <div className="c">
            <p>Aspiramos a ser una referencia del pensamiento económico heterodoxo argentino: un espacio donde la nueva generación de economistas construya alternativas al sentido común dominante.</p>
            <p>No alcanza con frenar; hace falta pensar, proponer y construir un modelo de desarrollo con mejores salarios, más capacidad productiva y una matriz más justa.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- INFORME ROW (reutilizable) ---------------- */
function InformeRow({ inf }){
  return (
    <div className="info-row" onClick={()=>go("informe/"+inf.slug)}>
      <div className="date">{inf.date}</div>
      <div>
        <h3>{inf.title}</h3>
        <div className="sum">{inf.summary}</div>
        <span className="go">Leer informe →</span>
      </div>
      <div className="rt">
        <b>{inf.pages}</b> págs<br/>
        <b>{inf.charts}</b> gráficos<br/>
        {inf.source}
      </div>
    </div>
  );
}

/* ---------------- INFORME CARD ---------------- */
function InformeCard({ inf }){
  return (
    <div className="inf-card" onClick={()=>go("informe/"+inf.slug)}>
      <div className="top">
        <span className="dt">{inf.date}</span>
        <span className="src">{TIPO_LABEL[tipoInforme(inf)]}</span>
      </div>
      <h3>{inf.title}</h3>
      <div className="sum">{inf.summary}</div>
      <div className="foot">
        <span className="m">{inf.pages} págs · {inf.charts} gráficos</span>
        <span className="go">Leer <Arrow/></span>
      </div>
    </div>
  );
}

function InformeLead({ inf }){
  return (
    <div className="inf-lead" onClick={()=>go("informe/"+inf.slug)}>
      <div className="body">
        <Eyebrow>Último informe · {inf.date}</Eyebrow>
        <h2>{inf.title}</h2>
        <div className="sum">{inf.summary}</div>
        <div className="cta"><span className="tlink">Leer el informe <Arrow/></span></div>
      </div>
      <div className="side">
        <div className="lbl">Publicado</div>
        <div className="yr">{inf.year}</div>
        <div className="m"><b>{inf.pages}</b> páginas<br/><b>{inf.charts}</b> gráficos<br/>fuente · {inf.source}</div>
      </div>
    </div>
  );
}

/* ---------------- INFORMES (índice) ---------------- */
function Informes(){
  const [q, setQ] = useState("");
  const list = INFORMES.filter(i=>
    !q || (i.title+" "+i.summary).toLowerCase().includes(q.toLowerCase())
  );
  return (
    <main>
      <section className="wrap hero fade" style={{paddingBottom:"32px"}}>
        <BarAccent/>
        <Eyebrow>El núcleo del centro</Eyebrow>
        <h1 className="display" style={{marginTop:"24px", fontSize:"clamp(36px,5.4vw,68px)"}}>Informes</h1>
        <p className="lede" style={{maxWidth:"58ch"}}>
          Informes de coyuntura y documentos de trabajo. Cada uno se lee completo en su página,
          con sus gráficos y tablas; el PDF original queda disponible al pie.
        </p>
      </section>

      <section className="wrap section tight" style={{paddingTop:"24px"}}>
        <div className="filters">
          <div className="search-wrap">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <input placeholder="Buscar informe…" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
        </div>

        <div style={{fontFamily:"var(--mono)", fontSize:"12px", color:"var(--muted)", margin:"22px 0 18px", letterSpacing:".04em"}}>
          {list.length} {list.length===1?"informe":"informes"}
        </div>

        {list.length>0 ? (
          <div className="inf-cards">
            <InformeLead inf={list[0]}/>
            {list.slice(1).map(inf=> <InformeCard key={inf.slug} inf={inf}/> )}
          </div>
        ) : (
          <div style={{padding:"60px 0", textAlign:"center", color:"var(--muted)", fontFamily:"var(--mono)", fontSize:"13px", borderTop:"1px solid var(--line)"}}>
            No hay informes que coincidan con la búsqueda.
          </div>
        )}
      </section>
    </main>
  );
}

/* ---------------- INFORME (detalle) ---------------- */
function InformeDetalle({ slug }){
  const inf = INFORMES.find(i=>i.slug===slug);
  const [activeId, setActiveId] = useState(null);
  const [dynToc, setDynToc] = useState([]);

  // TODOS los informes se renderizan a partir de su .md (texto fiel al PDF) vía
  // <InformeMarkdown>. Los .md se regeneraron con pdftotext, así que ya no usamos
  // los componentes hand-crafted (que tenían el texto abreviado).
  // IMPORTANTE: el cuerpo se computa como ELEMENTO ya creado (no como una
  // función nueva por render). Si lo envolvemos en `function MdBody(){...}`
  // definida acá adentro, cada re-render genera una referencia distinta y
  // React desmonta + remonta InformeMarkdown — eso disparaba un loop
  // infinito de "Cargando…" cada vez que onReady llamaba setDynToc.
  let bodyEl=null, toc=null, pdfName="", pdfHref="#";
  if(inf){
    bodyEl = <InformeMarkdown slug={slug} onReady={setDynToc}/>;
    toc = dynToc;
    pdfName = "CIEN — " + inf.title;
    pdfHref = "pdfs/" + slug + ".pdf";
  }

  useEffect(()=>{
    if(!toc || !toc.length) return;
    const obs = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting) setActiveId(e.target.id); });
    }, { rootMargin:"-20% 0px -70% 0px" });
    // Esperamos un tick para que el body (sobre todo el markdown async) ya esté en el DOM.
    const t = setTimeout(()=>{
      toc.forEach(tt=>{ const el=document.getElementById(tt.id); if(el) obs.observe(el); });
    }, 80);
    return ()=>{ clearTimeout(t); obs.disconnect(); };
  },[slug, toc]);

  if(!inf) return <NotFound/>;

  return (
    <main>
      <article className="fade">
        <div className="read" style={{paddingTop:"34px"}}>
          <span className="crumb"><a onClick={()=>go("informes")}>Informes</a> / {inf.year}</span>
          <div className="art-head" style={{marginTop:"12px"}}>
            <div className="kick">
              <span className="tag">Informe</span>
              <span className="tag" style={{background:"var(--paper-2)", border:"1px solid var(--line)", color:"var(--muted)"}}>{inf.source}</span>
            </div>
            <h1>{inf.title}</h1>
            <p className="standfirst">{inf.summary}</p>
            <div className="art-meta">
              <span>Publicado en <b>{inf.date}</b></span>
              <DownloadChip pages={inf.pages} href={pdfHref} filename={pdfName+".pdf"}/>
            </div>
          </div>
        </div>

        <div className="art-grid" style={{marginTop:"48px"}}>
          <aside className="toc">
            <div className="h">En este informe</div>
            {(toc && toc.length>0) ? toc.map(t=>(
              <a key={t.id} className={(activeId===t.id?"on":"")+(t.sub?" sub":"")}
                 onClick={()=>{ const el=document.getElementById(t.id); if(el) el.scrollIntoView({behavior:"smooth",block:"start"}); }}>
                {t.label}
              </a>
            )) : (
              <div style={{color:"var(--muted)", fontSize:"12px", fontFamily:"var(--mono)"}}>—</div>
            )}
          </aside>
          <div>
            {bodyEl || (
              <div className="prose">
                <p>El texto completo de este informe está en preparación para su versión web. Mientras
                tanto, podés descargar el documento original en PDF.</p>
              </div>
            )}
            <DownloadBlock title={pdfName||inf.title} pages={inf.pages} href={pdfHref} filename={pdfName+".pdf"}/>
            <div style={{marginTop:"40px"}}>
              <a className="backlink" onClick={()=>go("informes")}><Arrow d="l"/> Volver a todos los informes</a>
            </div>
          </div>
        </div>
      </article>
    </main>
  );
}

/* ---------------- ACTIVIDADES ---------------- */
function Actividades(){
  // El FAEP es lo más importante que hizo el centro, así que va arriba y con
  // tarjeta grande. El resto conserva la grilla de siempre.
  const destacadas = ACTIVIDADES.filter(a=>a.featured);
  const resto      = ACTIVIDADES.filter(a=>!a.featured);
  return (
    <main>
      <section className="wrap hero fade" style={{paddingBottom:"24px"}}>
        <BarAccent/>
        <Eyebrow>Eventos y participaciones</Eyebrow>
        <h1 className="display" style={{marginTop:"24px", fontSize:"clamp(36px,5.4vw,68px)"}}>Actividades</h1>
        <p className="lede" style={{maxWidth:"56ch"}}>
          Charlas, presentaciones de informes y mesas de debate del centro, dentro y fuera de la FCE-UBA.
        </p>
      </section>

      {destacadas.length>0 && (
        <section className="wrap section tight" style={{paddingTop:"20px"}}>
          <div className="act-feat-head">
            <Eyebrow>Foro Argentino de Economía Política</Eyebrow>
            <p>
              El encuentro anual que organiza el CIEN en la Facultad de Ciencias Económicas
              de la UBA.
            </p>
          </div>
          <div className="act-feat-grid">
            {destacadas.map(a=>(
              <article className="act-feat" key={a.slug} onClick={()=>go("actividad/"+a.slug)}>
                <div className="img"><img src={a.img} alt={"Foto del "+a.title} loading="lazy"/></div>
                <Eyebrow className="e" rule={false}>{a.kind} · {a.date}</Eyebrow>
                <h3>{a.title}</h3>
                <div className="meta">{a.place}</div>
                {a.scale && <div className="scale">{a.scale}</div>}
                <span className="act-go">Ver la edición <Arrow/></span>
              </article>
            ))}
          </div>
        </section>
      )}

      <section className="wrap section tight" style={{paddingTop:"8px"}}>
        <Eyebrow>Otras actividades</Eyebrow>
        <div className="act-grid" style={{marginTop:"28px"}}>
          {resto.map((a,i)=>(
            <div className="act-card" key={i}>
              {/* Sin foto propia del evento no se pone una de archivo que no
                  corresponda: la tarjeta cae en un bloque tipográfico. */}
              {a.img
                ? <div className="img"><img src={a.img} alt="" loading="lazy"/></div>
                : <div className="img img-ph"><span>{a.kind}</span></div>}
              <Eyebrow className="e" rule={false}>{a.kind} · {a.date}</Eyebrow>
              <h4>{a.title}</h4>
              <div className="meta">{a.place}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ---------------- ACTIVIDAD (detalle) ---------------- */
/* Sólo las actividades con `slug` llegan acá. Reusa el andamiaje del detalle de
   informe (.read / .art-head / .art-grid / .toc / .prose), que ya tiene el CSS
   resuelto, en vez de inventar un layout nuevo. */
function ActividadDetalle({ slug }){
  const act = ACTIVIDADES.find(a=>a.slug===slug);
  const [activeId, setActiveId] = useState(null);

  // Las secciones se arman según lo que tenga la actividad: así el índice y la
  // numeración (01, 02, …) no quedan nunca desfasados de lo que se renderiza.
  const secciones = [];
  const toc = [];
  if(act){
    if(act.mision){ secciones.push("que-es"); toc.push({ id:"que-es", label:"Qué es el FAEP" }); }
    if(act.paneles){
      secciones.push("programa");
      toc.push({ id:"programa", label:"Programa" });
      act.paneles.forEach((p,i)=> toc.push({ id:"panel-"+i, label:p.title, sub:true }));
    }
    if(act.resena && act.resena.length){ secciones.push("resena"); toc.push({ id:"resena", label:"Reseña de los paneles" }); }
    if(act.adherentes && act.adherentes.length){ secciones.push("adherentes"); toc.push({ id:"adherentes", label:"Adhieren" }); }
    if(act.gallery && act.gallery.length){ secciones.push("galeria"); toc.push({ id:"galeria", label:"Galería" }); }
  }
  const num = id => String(secciones.indexOf(id)+1).padStart(2,"0");

  useEffect(()=>{
    if(!toc.length) return;
    const obs = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting) setActiveId(e.target.id); });
    }, { rootMargin:"-20% 0px -70% 0px" });
    const t = setTimeout(()=>{
      toc.forEach(tt=>{ const el=document.getElementById(tt.id); if(el) obs.observe(el); });
    }, 80);
    return ()=>{ clearTimeout(t); obs.disconnect(); };
  },[slug]);

  if(!act) return <NotFound/>;

  const year = String(act.sort).slice(0,4);

  return (
    <main>
      <article className="fade">
        <div className="read" style={{paddingTop:"34px"}}>
          <span className="crumb"><a onClick={()=>go("actividades")}>Actividades</a> / {year}</span>
          <div className="art-head" style={{marginTop:"12px"}}>
            <div className="kick">
              <span className="tag">{act.kind}</span>
              <span className="tag" style={{background:"var(--paper-2)", border:"1px solid var(--line)", color:"var(--muted)"}}>{act.place}</span>
            </div>
            <h1>{act.title}</h1>
            {act.summary && <p className="standfirst">{act.summary}</p>}
            <div className="art-meta">
              <span><b>{act.date}</b></span>
              {act.venue && <span>{act.venue}</span>}
            </div>
          </div>
        </div>

        {act.img && (
          <figure className="act-hero">
            <img src={act.img} alt={"Foto del "+act.title}/>
          </figure>
        )}

        <div className="art-grid" style={{marginTop:"48px"}}>
          <aside className="toc">
            <div className="h">En esta edición</div>
            {toc.map(t=>(
              <a key={t.id} className={(activeId===t.id?"on":"")+(t.sub?" sub":"")}
                 onClick={()=>{ const el=document.getElementById(t.id); if(el) el.scrollIntoView({behavior:"smooth",block:"start"}); }}>
                {t.label}
              </a>
            ))}
          </aside>

          <div className="prose">
            {act.mision && (
              <React.Fragment>
                <h2 id="que-es"><span className="num">{num("que-es")}</span>Qué es el FAEP</h2>
                {act.mision.map((p,i)=><p key={i}>{p}</p>)}
              </React.Fragment>
            )}

            {act.paneles && (
              <React.Fragment>
                <h2 id="programa"><span className="num">{num("programa")}</span>Programa</h2>
                {act.paneles.map((p,i)=>(
                  <section className="panel-block" id={"panel-"+i} key={i}>
                    <div className="pb-when">{p.day} · {p.time} h</div>
                    <h3>{p.title}</h3>
                    {p.desc && <p>{p.desc}</p>}
                    <ul className="pb-oradores">
                      {p.oradores.map((o,j)=>{
                        // Los integrantes del CIEN que expusieron van marcados: era el
                        // objetivo declarado del Foro, discutir de igual a igual.
                        const esCien = (p.cien||[]).indexOf(o) >= 0;
                        return <li key={j} className={esCien?"is-cien":""}>{o}{esCien && <span className="chip-cien">CIEN</span>}</li>;
                      })}
                    </ul>
                    <div className="pb-modera">Modera: {p.modera}</div>
                    {p.video && (
                      <a className="pb-video" href={p.video} target="_blank" rel="noreferrer">
                        Ver la grabación del panel <Arrow/>
                      </a>
                    )}
                  </section>
                ))}
              </React.Fragment>
            )}

            {act.resena && act.resena.length>0 && (
              <React.Fragment>
                <h2 id="resena"><span className="num">{num("resena")}</span>Reseña de los paneles</h2>
                {act.resena.map((r,i)=>(
                  <section className="resena-block" key={i}>
                    <h3>{r.panel}</h3>
                    {r.derivada && (
                      <p className="resena-nota">
                        Reconstrucción a partir del programa del Foro y de los oradores confirmados.
                        A diferencia de los otros dos paneles, no está escrita sobre la base de lo que
                        se dijo en la sala.
                      </p>
                    )}
                    {r.texto.map((t,j)=><p key={j}>{t}</p>)}
                  </section>
                ))}
              </React.Fragment>
            )}

            {act.adherentes && act.adherentes.length>0 && (
              <React.Fragment>
                <h2 id="adherentes"><span className="num">{num("adherentes")}</span>Adhieren</h2>
                <div className="adh-list">
                  {act.adherentes.map((x,i)=><span className="adh" key={i}>{x}</span>)}
                </div>
              </React.Fragment>
            )}

            {act.gallery && act.gallery.length>0 && (
              <React.Fragment>
                <h2 id="galeria"><span className="num">{num("galeria")}</span>Galería</h2>
                <div className="act-gallery">
                  {act.gallery.map((src,i)=>(
                    <div className="g" key={i}><img src={src} alt={"Foto del "+act.title} loading="lazy"/></div>
                  ))}
                </div>
              </React.Fragment>
            )}

            <div style={{marginTop:"40px"}}>
              <a className="backlink" onClick={()=>go("actividades")}><Arrow d="l"/> Volver a todas las actividades</a>
            </div>
          </div>
        </div>
      </article>
    </main>
  );
}

/* ---------------- MEDIOS ---------------- */
function Medios(){
  return (
    <main>
      <section className="wrap hero fade" style={{paddingBottom:"24px"}}>
        <BarAccent/>
        <Eyebrow>En los medios</Eyebrow>
        <h1 className="display" style={{marginTop:"24px", fontSize:"clamp(36px,5.4vw,68px)"}}>Medios</h1>
        <p className="lede" style={{maxWidth:"56ch"}}>
          Columnas de opinión de CIEN publicadas en medios externos. Cada una enlaza al artículo original.
        </p>
      </section>
      <section className="wrap section tight" style={{paddingTop:"20px"}}>
        <div style={{borderTop:"1px solid var(--ink)"}}>
          {MEDIOS.map((m,i)=>(
            <a className="media-row" key={i} href={m.url} target="_blank" rel="noreferrer"
               style={{"--m": MEDIO_COLOR[m.outlet] || "var(--brand)"}}>
              <div className="outlet">{m.outlet}</div>
              <div className="ttl">{m.title}</div>
              <div className="d">{m.date}</div>
              <div className="media-go">
                Leer en el medio
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg>
              </div>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ---------------- 404 ---------------- */
function NotFound(){
  return (
    <main className="wrap section" style={{textAlign:"center"}}>
      <Eyebrow rule={false} className="muted">Error 404</Eyebrow>
      <h1 className="display" style={{fontSize:"clamp(40px,7vw,84px)", marginTop:"16px"}}>Página no encontrada</h1>
      <div style={{marginTop:"28px"}}><span className="btn btn-green" onClick={()=>go("")}>Volver al inicio <Arrow/></span></div>
    </main>
  );
}

Object.assign(window, { Home, Institucional, Informes, InformeDetalle, Actividades, ActividadDetalle, Medios, NotFound, InformeRow, InformeCard, InformeLead });