/* ==================================================================
   Chronos Biosciences · Páginas de lectura
   Se apoya en sistema.css. Incluye los alias de los nombres antiguos
   de variables para que los estilos en línea de esas páginas sigan
   resolviendo contra los tokens del sistema.
   ================================================================== */

:root{
  --bg:var(--w);
  --surface:var(--w);
  --surface-2:var(--g10);
  --surface-3:var(--g15);
  --ink:var(--texto);
  --ink-soft:var(--texto-2);
  --ink-faint:var(--texto-3);
  --rule:var(--borde);
  --rule-soft:var(--g15);
  --accent:var(--azul);
  --accent-ink:var(--azul-70);
  --accent-soft:var(--azul-10);
  --warn-bg:#fcf4d6; --warn-rule:#8e6a00;
  --alert-bg:var(--rojo-10); --alert-rule:var(--rojo);
  --mark:#fcf4d6;
  --maxw:var(--ancho);
  --prose:46rem;
}

/* ---------------- cabecera ---------------- */
.top{
  position:sticky; top:0; z-index:60; background:var(--w);
  border-bottom:1px solid var(--borde); height:52px;
}
.top-in{
  max-width:var(--ancho); margin:0 auto; height:100%;
  padding-inline:var(--margen); display:flex; align-items:center; justify-content:space-between; gap:var(--e6);
}
.wordmark{
  display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600;
  letter-spacing:-.005em; color:var(--texto); text-decoration:none; white-space:nowrap;
}
.wordmark span{font-weight:400; color:var(--texto-3)}
.wordmark::before{
  content:""; width:22px; height:22px; flex:0 0 auto; background:var(--g100);
  -webkit-mask:url("/favicon.svg") center/contain no-repeat; mask:url("/favicon.svg") center/contain no-repeat;
}
.top-meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--texto-3); text-transform:uppercase}
.top-meta a{color:var(--texto-3); text-decoration:none}
.top-meta a:hover{color:var(--azul-70)}

/* ---------------- armazón ---------------- */
.wrap{max-width:var(--ancho); margin:0 auto; padding-inline:var(--margen)}
article{max-width:var(--prose); margin:0 auto; padding:var(--e10) 0 var(--e9)}
.back{
  display:inline-block; margin:0 0 var(--e7); font-size:14px;
  color:var(--texto-3); text-decoration:none;
}
.back:hover{color:var(--azul-70)}

/* ---------------- texto ---------------- */
article p{margin:0 0 1.15em; font-size:17px; line-height:1.65; color:var(--texto-2)}
article li{font-size:17px; line-height:1.65; color:var(--texto-2)}
article strong,article b{color:var(--texto); font-weight:600}
article ul,article ol{margin:0 0 1.15em; padding-left:1.3em}
article li{margin-bottom:.45em}
article li::marker{color:var(--texto-4)}
i.g{font-style:normal; font-family:var(--mono); font-size:.9em; color:var(--azul-70)}
mark{background:var(--mark); padding:.08em .2em}
.mono{font-family:var(--mono); font-size:.9em}

h1{font-size:clamp(28px,3.6vw,40px); line-height:1.14; letter-spacing:-.02em; margin:0 0 var(--e6); font-weight:600}
h2{font-size:25px; line-height:1.24; letter-spacing:-.012em; margin:2.6em 0 .7em; font-weight:600}
h2 .num{
  display:block; font-family:var(--mono); font-size:11.5px; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; color:var(--texto-4); margin-bottom:.8em;
}
h3{font-size:19px; line-height:1.34; margin:2.1em 0 .55em; font-weight:600}
h3 .sub{color:var(--texto-3); font-weight:400}

.kicker{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-4); margin:0 0 var(--e5);
}
.byline{
  font-family:var(--mono); font-size:12.5px; color:var(--texto-3);
  padding-bottom:var(--e6); border-bottom:1px solid var(--borde); margin-bottom:var(--e7);
}
.byline b{color:var(--texto-2); font-weight:500}

/* ---------------- bloques ---------------- */
.preamble{
  background:var(--g10); border-left:3px solid var(--g50); padding:var(--e6);
  margin:0 0 var(--e8);
}
.preamble p{font-size:15px; line-height:1.6; color:var(--texto-2)}
.preamble p:last-child{margin-bottom:0}
.preamble b{color:var(--texto)}

.thesis{background:var(--azul-10); border-left:3px solid var(--azul); padding:var(--e6); margin:1.8em 0}
.thesis .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--azul-70); margin-bottom:var(--e4)}
.thesis p{font-size:19px; line-height:1.45; margin:0; color:var(--texto); font-weight:500}

.op{border-left:2px solid var(--borde-fuerte); padding-left:var(--e5); margin:1.7em 0}
.op p,.op{color:var(--texto-2)}
.op b{color:var(--texto)}

.box{padding:var(--e5) var(--e6); margin:1.7em 0}
.box p{font-size:16px; line-height:1.62; margin:0 0 .7em}
.box p:last-child{margin-bottom:0}
.box .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--e4)}
.box.alert{background:var(--rojo-10); border-left:3px solid var(--rojo)}
.box.alert .lbl{color:var(--rojo)}
.box.warn{background:#fcf4d6; border-left:3px solid #8e6a00}
.box.warn .lbl{color:#8e6a00}

/* ---------------- índice ---------------- */
nav.toc{border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); padding:var(--e5) 0; margin:0 0 var(--e8)}
nav.toc .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-4); margin-bottom:var(--e4)}
nav.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px var(--e6)}
nav.toc li{counter-increment:toc; margin:0}
nav.toc a{font-size:14px; text-decoration:none; color:var(--texto-2); display:block; padding:4px 0}
nav.toc a:hover{color:var(--azul-70)}
nav.toc a::before{content:counter(toc,decimal-leading-zero) "  "; font-family:var(--mono); font-size:11px; color:var(--texto-4)}
@media (max-width:671px){nav.toc ol{grid-template-columns:1fr}}

/* ---------------- listas numeradas ---------------- */
.contra{list-style:none; padding:0; margin:1.4em 0}
.contra li{position:relative; padding:var(--e5) 0 var(--e5) 44px; margin:0; border-top:1px solid var(--g15)}
.contra li:last-child{border-bottom:1px solid var(--g15)}
.contra li::before{
  content:attr(data-n); position:absolute; left:0; top:var(--e5);
  font-family:var(--mono); font-size:11px; color:var(--azul-70);
  background:var(--azul-10); width:26px; height:22px; display:grid; place-items:center;
}
.retire{list-style:none; padding:0; margin:1.4em 0}
.retire li{padding:var(--e4) 0 var(--e4) 26px; margin:0; position:relative; border-bottom:1px solid var(--g15); color:var(--texto-2); font-size:16px}
.retire li::before{content:"—"; position:absolute; left:0; top:var(--e4); color:var(--rojo)}
.retire li b{color:var(--texto)}

.closing{
  font-size:19px; line-height:1.5; font-weight:500; margin:2.2em 0 0;
  padding-top:var(--e6); border-top:1px solid var(--borde); color:var(--texto);
}

/* ---------------- tablas ---------------- */
.tscroll{margin:1.9em 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--borde)}
table{width:100%; border-collapse:collapse; font-size:14px; background:var(--w)}
caption{
  caption-side:top; text-align:left; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--texto-3); padding:var(--e4) var(--e5); border-bottom:1px solid var(--borde); background:var(--g10);
}
th{
  font-size:12px; font-weight:600; text-align:left; padding:12px var(--e5);
  background:var(--g10); color:var(--texto); border-bottom:1px solid var(--borde); white-space:nowrap;
}
td{padding:13px var(--e5); border-top:1px solid var(--g15); vertical-align:top; line-height:1.55; color:var(--texto-2)}
tbody tr:first-child td{border-top:0}
td.arm{font-family:var(--mono); font-size:13px; white-space:nowrap; color:var(--texto); font-weight:500}
tr.key{background:var(--azul-10)}
tr.key td.arm{color:var(--azul-70)}

/* ---------------- pie ---------------- */
footer{background:var(--g100); color:var(--g30); margin-top:var(--e10); padding:var(--e9) 0 var(--e10)}
footer .wrap{max-width:var(--ancho)}
footer p{margin:0 0 .6em; font-size:13px; line-height:1.6; color:var(--g50); max-width:74ch}
footer a{color:var(--g30)}
footer a:hover{color:var(--w)}
footer .mono{font-family:var(--mono); font-size:11.5px; color:var(--g50)}

@media print{
  .top,.back{display:none}
  article{max-width:none; padding-top:0}
  footer{background:#fff; color:#000}
  footer p{color:#333}
}

/* ---------------- citas dentro de un artículo ---------------- */
a.cita,span.cita{
  font-size:.92em; color:var(--azul-70); text-decoration:none;
  border-bottom:1px solid var(--azul-20); white-space:nowrap;
}
a.cita:hover{border-bottom-color:var(--azul)}
a.cita sup,span.cita sup{font-family:var(--mono); font-size:.72em; margin-left:2px; top:-.4em; position:relative}
.cita-rota{
  font-family:var(--mono); font-size:.86em; color:var(--rojo);
  background:var(--rojo-10); padding:1px 5px; border-radius:2px;
}
ol.refs-art{list-style:none; counter-reset:ra; padding:0; margin:1.4em 0 0}
ol.refs-art li{
  counter-increment:ra; position:relative; padding:var(--e5) 0 var(--e5) 38px;
  margin:0; border-top:1px solid var(--g15); font-size:15px; line-height:1.6; color:var(--texto-2);
}
ol.refs-art li:first-child{border-top:1px solid var(--borde)}
ol.refs-art li:last-child{border-bottom:1px solid var(--g15)}
ol.refs-art li::before{
  content:counter(ra); position:absolute; left:0; top:var(--e5);
  font-family:var(--mono); font-size:11.5px; color:var(--azul);
}
ol.refs-art i{font-style:italic; color:var(--texto)}
.erratas{display:block; margin-top:4px; font-family:var(--mono); font-size:11.5px; color:var(--texto-3)}
.ver-ok{
  display:inline-block; margin-top:5px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--verde);
}
.ver-ok::before{content:"● "; }