/* ============================================================
   T6 · FICHA DE EXPERIMENTO  y  su índice
   Requiere estilo-base.css cargado antes.
   IIF · UMSA — v1.0 · septiembre de 2026

   No define ningún color propio: reutiliza las variables del
   :root de la capa base. El estado del experimento (activo,
   histórico, interrumpido, no construido) se codifica en color
   Y en texto — nunca sólo en color.
   ============================================================ */

/* ---------- estados ---------- */
.est{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:11.5px;
  font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:4px 11px; border-radius:20px;
  line-height:1.6; white-space:nowrap;}
.est::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto;}
.est.activo{color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent);}
.est.historico{color:var(--muted); background:var(--code);}
.est.interrumpido{color:var(--warn); background:var(--warn-soft);}
.est.propuesto{color:var(--accent2); background:var(--accent2-soft);}
/* sin color de fondo disponible en navegadores sin color-mix: el texto y el punto bastan */

/* ---------- índice de experimentos ---------- */
.xp-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--brand-soft),transparent);}
.xp-hero-in{max-width:var(--wide); margin:0 auto; padding:52px 24px 40px;}
.crumb{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;}
.crumb a{color:var(--muted); text-decoration:none;} .crumb a:hover{color:var(--accent);}
h1{font-size:clamp(34px,5.4vw,50px); line-height:1.05; letter-spacing:-.028em; margin:0 0 14px;}
.xp-hero p.lead{font-size:20px; line-height:1.55; color:var(--muted); max-width:64ch; margin:0;}

.leyenda-est{max-width:var(--wide); margin:0 auto; padding:26px 24px 0;
  display:flex; flex-wrap:wrap; gap:10px 14px;}

.grupo{max-width:var(--wide); margin:0 auto; padding:40px 24px 0;}
.grupo h2{font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px; padding-top:26px; border-top:1px solid var(--line);}
.grupo:first-of-type h2{padding-top:0; border-top:none;}
.grupo p.desc{font-size:17px; line-height:1.6; color:var(--muted); max-width:66ch; margin:0 0 24px;}

.xps{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-bottom:12px;}
.xp{display:flex; flex-direction:column; gap:9px; text-decoration:none; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  transition:border-color .15s, transform .15s;}
a.xp:hover{border-color:var(--accent); transform:translateY(-2px);}
.xp .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
/* min-width:0 permite que el bloque del nombre se encoja dentro del flex;
   sin esto, un nombre largo empuja al distintivo de estado fuera de la tarjeta */
.xp .top > div{min-width:0;}
/* algunos experimentos llevan el nombre completo desplegado y son muy largos */
.xp b{font-family:var(--sans); font-size:17px; line-height:1.25; letter-spacing:-.01em;
  overflow-wrap:anywhere;}
/* en pantallas estrechas el estado no cabe al lado del nombre: se pone debajo */
@media(max-width:460px){
  .xp .top{flex-direction:column; align-items:flex-start; gap:8px;}
}
.xp .sigla{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.04em;}
.xp .per{font-family:var(--sans); font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.xp p{margin:0; font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--muted);}
.xp .paises{display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:6px;}
.pais{font-family:var(--sans); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:2px 6px; line-height:1.6;}
.xp.sinficha{cursor:default;}
.xp .pendiente{display:inline-block; align-self:flex-start; font-family:var(--sans); font-size:11px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--warn);
  background:var(--warn-soft); padding:3px 8px; border-radius:20px; line-height:1.5;}

/* ---------- ficha individual ---------- */
.exp-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--brand-soft),transparent);}
.exp-hero-in{max-width:var(--wide); margin:0 auto; padding:46px 24px 38px;}
.exp-hero .sigla-grande{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;}
.exp-hero h1{margin:0 0 12px; max-width:20ch;}
.exp-hero .sub{font-size:21px; line-height:1.5; color:var(--muted); max-width:60ch; margin:0 0 20px;}
.exp-datos{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; font-family:var(--sans); font-size:14px;}
.exp-datos .dato{display:flex; flex-direction:column; gap:2px;}
.exp-datos .dato span{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
.exp-datos .dato b{font-size:15.5px; font-variant-numeric:tabular-nums;}

.exp-layout{max-width:var(--wide); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr);}
@media(min-width:980px){ .exp-layout{grid-template-columns:minmax(0,1fr) 280px; gap:56px; padding-top:40px;} }

article.exp{max-width:var(--read); padding:38px 0 60px;}
article.exp h2{font-size:26px; line-height:1.2; letter-spacing:-.015em; margin:44px 0 14px;}
article.exp h2:first-child{margin-top:0;}
article.exp h3{font-family:var(--sans); font-size:16px; margin:28px 0 8px;}
article.exp p{margin:0 0 17px;}
article.exp ul,article.exp ol{margin:0 0 17px; padding-left:22px;}
article.exp li{margin:6px 0;}

/* barra lateral */
aside.exp-side{padding:38px 0 60px; font-family:var(--sans); align-self:start;}
@media(min-width:980px){ aside.exp-side{position:sticky; top:78px;} }
aside.exp-side h4{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin:0 0 10px; padding-top:20px; border-top:1px solid var(--line);}
aside.exp-side section:first-child h4{padding-top:0; border-top:none;}
aside.exp-side section{margin-bottom:24px;}
aside.exp-side ul{list-style:none; margin:0; padding:0; font-size:14px; line-height:1.55;}
aside.exp-side li{margin:0 0 7px;}
aside.exp-side a{text-decoration:none;} aside.exp-side a:hover{text-decoration:underline;}

/* ficha técnica plegable */
.tecnica summary{font-weight:700;}
.tecnica dl{display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:0;}
@media(min-width:560px){ .tecnica dl{grid-template-columns:minmax(140px,auto) minmax(0,1fr); column-gap:20px;} }
.tecnica dt{font-weight:700; margin-top:11px; font-size:13.5px;}
.tecnica dd{margin:0; color:var(--muted); font-size:14px;}
@media(min-width:560px){ .tecnica dd{margin-top:11px;} }

/* instituciones participantes */
.inst{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:22px 0;}
.inst .i{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:13px 15px;
  font-family:var(--sans);}
.inst .i b{display:block; font-size:14.5px; line-height:1.35;}
.inst .i .pais{display:inline-block; margin-top:7px;}
.inst .i .rol{display:block; margin-top:5px; font-size:13px; color:var(--muted); line-height:1.5;}

/* resultados destacados */
.res{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:26px 0;}
.res .r{border-left:3px solid var(--accent); padding:2px 0 2px 15px;}
.res .r b{display:block; font-size:clamp(21px,3vw,26px); line-height:1.15; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.res .r span{display:block; margin-top:6px; font-family:var(--sans); font-size:13px; line-height:1.5;
  color:var(--muted);}

/* publicaciones */
ol.pubs{font-family:var(--sans); font-size:14px; line-height:1.6; padding-left:20px;}
ol.pubs li{margin:12px 0;}
ol.pubs .tit{color:var(--fg);}
ol.pubs .ref{color:var(--muted);}

@media print{
  .exp-hero{background:transparent}
  aside.exp-side{display:none}
  .exp-layout{grid-template-columns:1fr}
  .xp,.inst .i,.res .r,details{break-inside:avoid}
  details{border:none} details .body{display:block !important}
}