/* ==================================================================
   Chronos Biosciences · Sistema de diseño
   ------------------------------------------------------------------
   Construido sobre el lenguaje de IBM Carbon Design System: escala
   tipográfica Plex, rejilla de 16 columnas, escala de espaciado 2x,
   paleta neutra gris y curvas de movimiento productivas.

   Tema claro único. Fondo blanco.
   ================================================================== */

:root{
  color-scheme:light;

  /* ---- neutros (Carbon gray) ---- */
  --w:#ffffff;
  --g10:#f4f4f4;
  --g15:#eeeeee;
  --g20:#e0e0e0;
  --g30:#c6c6c6;
  --g40:#a8a8a8;
  --g50:#8d8d8d;
  --g60:#6f6f6f;
  --g70:#525252;
  --g80:#393939;
  --g90:#262626;
  --g100:#161616;

  /* ---- interacción ---- */
  --azul:#0f62fe;
  --azul-h:#0353e9;
  --azul-10:#edf5ff;
  --azul-20:#d0e2ff;
  --azul-70:#0043ce;

  /* ---- apoyo ---- */
  --rojo:#da1e28;
  --rojo-10:#fff1f1;
  --verde:#198038;
  --ambar:#f1c21b;

  /* ---- visualización de datos (categórica Carbon) ---- */
  --dv1:#6929c4;
  --dv2:#1192e8;
  --dv3:#005d5d;
  --dv4:#9f1853;
  --dv5:#fa4d56;
  --dv6:#570408;

  /* ---- semánticos ---- */
  --fondo:var(--w);
  --capa:var(--g10);
  --capa-2:var(--g15);
  --borde:var(--g20);
  --borde-fuerte:var(--g30);
  --texto:var(--g100);
  --texto-2:var(--g70);
  --texto-3:var(--g60);
  --texto-4:var(--g50);
  --enlace:var(--azul-70);

  /* ---- tipografía ---- */
  --sans:"IBM Plex Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:var(--sans);   /* alias para páginas antiguas */
  --display:var(--sans);

  /* ---- espaciado 2x ---- */
  --e1:2px;  --e2:4px;  --e3:8px;  --e4:12px; --e5:16px; --e6:24px;
  --e7:32px; --e8:40px; --e9:48px; --e10:64px; --e11:80px; --e12:96px; --e13:160px;

  /* ---- movimiento ---- */
  --mov-productivo:cubic-bezier(.2,0,.38,.9);
  --mov-expresivo:cubic-bezier(.4,.14,.3,1);

  /* ---- rejilla ---- */
  --cols:16;
  --canal:32px;
  --ancho:1584px;
  --margen:clamp(16px, 4vw, 64px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  letter-spacing:0; -webkit-font-smoothing:antialiased;
}

/* ================= escala tipográfica ================= */
.t-display   {font-size:clamp(38px,4.6vw,60px); line-height:1.08; letter-spacing:-.02em; font-weight:600}
.t-h1        {font-size:clamp(30px,3.4vw,42px); line-height:1.16; letter-spacing:-.015em; font-weight:600}
.t-h2        {font-size:clamp(24px,2.4vw,30px); line-height:1.25; letter-spacing:-.01em; font-weight:600}
.t-h3        {font-size:20px; line-height:1.4; letter-spacing:0; font-weight:600}
.t-h4        {font-size:16px; line-height:1.375; letter-spacing:0; font-weight:600}
.t-cuerpo-lg {font-size:18px; line-height:1.6; letter-spacing:0}
.t-cuerpo    {font-size:16px; line-height:1.55; letter-spacing:0}
.t-cuerpo-sm {font-size:14px; line-height:1.55; letter-spacing:.01em}
.t-etiqueta  {font-family:var(--mono); font-size:12px; line-height:1.4; letter-spacing:.04em; text-transform:uppercase}
.t-codigo    {font-family:var(--mono); font-size:12px; line-height:1.5; letter-spacing:.02em}
.t-dato      {font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1}

h1,h2,h3,h4{margin:0; font-weight:600}
p{margin:0}
a{color:var(--enlace); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--azul)}
strong,b{font-weight:600}

.c-2{color:var(--texto-2)} .c-3{color:var(--texto-3)} .c-4{color:var(--texto-4)}
.mono{font-family:var(--mono)}

/* ================= rejilla ================= */
.rejilla{
  display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--canal);
  max-width:var(--ancho); margin:0 auto; padding-inline:var(--margen);
}
.contenedor{max-width:var(--ancho); margin:0 auto; padding-inline:var(--margen)}
@media (max-width:1055px){:root{--cols:8; --canal:16px}}
@media (max-width:671px){:root{--cols:4; --canal:16px}}

.col-12{grid-column:span 12} .col-10{grid-column:span 10} .col-9{grid-column:span 9}
.col-8{grid-column:span 8}   .col-7{grid-column:span 7}   .col-6{grid-column:span 6}
.col-5{grid-column:span 5}   .col-4{grid-column:span 4}   .col-16{grid-column:span 16}
@media (max-width:1055px){
  .col-12,.col-10,.col-9,.col-8,.col-16{grid-column:span 8}
  .col-7,.col-6,.col-5,.col-4{grid-column:span 8}
}
@media (max-width:671px){
  .col-12,.col-10,.col-9,.col-8,.col-16,.col-7,.col-6,.col-5,.col-4{grid-column:span 4}
}

/* ================= cabecera ================= */
.cabecera{
  position:sticky; top:0; z-index:60; background:var(--w);
  border-bottom:1px solid var(--borde); height:52px;
}
.cabecera-in{
  max-width:var(--ancho); margin:0 auto; height:100%;
  padding-inline:var(--margen); display:flex; align-items:center; gap:var(--e7);
}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--texto); flex:0 0 auto}
.marca:hover{color:var(--texto)}
.marca svg{display:block}
.marca .nom{font-size:15px; font-weight:600; letter-spacing:-.005em; white-space:nowrap}
.marca .nom i{font-style:normal; font-weight:400; color:var(--texto-3)}

.menu{display:flex; align-items:stretch; height:100%; margin-left:var(--e6)}
.menu a{
  display:flex; align-items:center; padding:0 var(--e5); height:100%;
  font-size:14px; color:var(--texto-2); text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{background:var(--g10); color:var(--texto)}
.menu a[aria-current="true"]{border-bottom-color:var(--azul); color:var(--texto); font-weight:500}
.cabecera .fin{margin-left:auto; display:flex; align-items:stretch; height:100%}
@media (max-width:671px){.menu{display:none}}

/* ================= botones ================= */
.boton{
  display:inline-flex; align-items:center; justify-content:space-between; gap:var(--e10);
  min-height:48px; padding:13px 15px 13px 16px; max-width:320px;
  font-size:14px; font-weight:400; line-height:1.3; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .11s var(--mov-productivo), border-color .11s var(--mov-productivo);
}
.boton svg{flex:0 0 auto}
.boton--primario{background:var(--azul); color:var(--w)}
.boton--primario:hover{background:var(--azul-h); color:var(--w)}
.boton--secundario{background:var(--g100); color:var(--w)}
.boton--secundario:hover{background:var(--g80); color:var(--w)}
.boton--fantasma{background:transparent; color:var(--enlace); border-color:var(--borde-fuerte)}
.boton--fantasma:hover{background:var(--g10)}
.boton--cabecera{
  min-height:0; height:100%; padding:0 var(--e5); background:var(--azul); color:var(--w);
  font-size:14px; gap:var(--e4); max-width:none;
}
.boton--cabecera:hover{background:var(--azul-h); color:var(--w)}

/* ================= etiquetas de estado ================= */
.tag{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:12px; font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  text-transform:uppercase; white-space:nowrap;
}
.tag--azul{background:var(--azul-20); color:var(--azul-70)}
.tag--gris{background:var(--g20); color:var(--g80)}
.tag--contorno{background:transparent; border:1px solid var(--borde-fuerte); color:var(--texto-2)}
.tag .pt{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}

/* ================= tabla de datos ================= */
.tabla-env{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--borde)}
table.datos{width:100%; border-collapse:collapse; background:var(--w); font-size:14px}
table.datos caption{
  caption-side:top; text-align:left; padding:var(--e5) var(--e5);
  background:var(--g10); border-bottom:1px solid var(--borde);
  font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--texto-3);
}
table.datos th{
  text-align:left; font-weight:600; font-size:12px; letter-spacing:.02em;
  padding:12px var(--e5); background:var(--g10); color:var(--texto);
  border-bottom:1px solid var(--borde); white-space:nowrap; vertical-align:bottom;
}
table.datos td{
  padding:14px var(--e5); border-bottom:1px solid var(--borde); vertical-align:top;
  line-height:1.5; color:var(--texto-2);
}
/* Cabecera de FILA: es th, pero no debe llevar el fondo de la cabecera de columna. */
table.datos tbody th{
  text-align:left; vertical-align:top; white-space:normal;
  background:var(--w); color:var(--texto); font-weight:500; font-size:14px; letter-spacing:0;
  padding:14px var(--e5); border-bottom:1px solid var(--borde); line-height:1.4;
}
table.datos tbody tr:last-child td,
table.datos tbody tr:last-child th{border-bottom:0}
table.datos tbody tr:hover td,
table.datos tbody tr:hover th{background:var(--g10)}
table.datos td.principal{color:var(--texto); font-weight:500}
table.datos td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
table.datos .fuente{display:block; margin-top:4px; font-family:var(--mono); font-size:11px; color:var(--texto-4)}
table.datos .fuente a{color:var(--texto-3)}

/* ================= barra de progreso de evidencia ================= */
.medidor{display:flex; align-items:center; gap:10px; min-width:150px}
.medidor .via{position:relative; flex:1 1 auto; height:4px; background:var(--g20)}
.medidor .val{position:absolute; inset:0 auto 0 0; background:var(--azul); transform-origin:left; transform:scaleX(0)}
.visible .medidor .val{transform:scaleX(1); transition:transform .9s var(--mov-expresivo)}
@media (prefers-reduced-motion:reduce){.visible .medidor .val{transition:none}}

/* ================= tarjetas ================= */
.tarjeta{
  display:block; background:var(--g10); border:1px solid transparent; padding:var(--e6);
  text-decoration:none; color:var(--texto); position:relative; min-height:180px;
  transition:background .11s var(--mov-productivo), border-color .11s var(--mov-productivo);
}
a.tarjeta:hover{background:var(--w); border-color:var(--borde-fuerte); color:var(--texto)}
.tarjeta .sup{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3); margin-bottom:var(--e5)}
.tarjeta h3{font-size:19px; line-height:1.3; margin-bottom:var(--e4); letter-spacing:-.01em}
.tarjeta p{font-size:14px; line-height:1.55; color:var(--texto-2)}
.tarjeta .flecha{position:absolute; right:var(--e5); bottom:var(--e5); color:var(--azul)}

/* ================= secciones ================= */
.seccion{padding-block:var(--e12); border-top:1px solid var(--borde)}
.seccion--capa{background:var(--g10)}
.seccion--oscura{background:var(--g100); color:var(--g10); border-top:0}
.seccion--oscura h2,.seccion--oscura h3{color:var(--w)}
.seccion--oscura .c-2{color:var(--g30)}
.seccion--oscura .idx{color:var(--g50)}
.seccion--oscura a{color:#78a9ff}
.idx{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--texto-4)}
@media (max-width:671px){.seccion{padding-block:var(--e10)}}

/* ================= aparición ================= */
.js .rv{opacity:0; transform:translateY(12px)}
.js .rv.visible{opacity:1; transform:none; transition:opacity .5s var(--mov-expresivo), transform .5s var(--mov-expresivo)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1; transform:none}
  .js .rv.visible{transition:none}
}

/* ================= pie ================= */
.pie{background:var(--g100); color:var(--g30); padding-block:var(--e10) var(--e11)}
.pie a{color:var(--g30)}
.pie a:hover{color:var(--w)}
.pie h4{color:var(--w); font-size:13px; margin-bottom:var(--e5); font-weight:600}
.pie .lista{list-style:none; margin:0; padding:0}
.pie .lista li{margin-bottom:var(--e3)}
.pie .lista a{font-size:14px; text-decoration:none}
.pie .legal{font-size:12px; line-height:1.6; color:var(--g50); max-width:68ch}
.pie .barra{
  margin-top:var(--e9); padding-top:var(--e5); border-top:1px solid var(--g80);
  display:flex; flex-wrap:wrap; gap:var(--e5) var(--e7); justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--g50);
}

/* ================= foco y selección ================= */
:where(a,button,[tabindex]):focus{outline:none}
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--azul); outline-offset:1px; border-radius:1px;
}
.seccion--oscura :where(a,button):focus-visible,
.pie :where(a,button):focus-visible{outline-color:var(--w)}
.boton:focus-visible{outline-offset:-3px; outline-color:var(--w)}
.boton--fantasma:focus-visible{outline-color:var(--azul); outline-offset:-3px}
::selection{background:var(--azul-20); color:var(--g100)}

.saltar{
  position:absolute; left:var(--margen); top:-100px; z-index:100;
  background:var(--azul); color:var(--w); padding:12px 16px; font-size:14px; text-decoration:none;
  transition:top .11s var(--mov-productivo);
}
.saltar:focus{top:8px; color:var(--w)}

/* ================= tabla: variante oscura ================= */
.tabla-env--oscura{border-color:var(--g80)}
table.datos--oscura{background:var(--g90); color:var(--g20)}
table.datos--oscura caption{background:var(--g80); border-bottom-color:var(--g70); color:var(--g30)}
table.datos--oscura th{background:var(--g80); border-bottom-color:var(--g70); color:var(--w)}
table.datos--oscura td{border-bottom-color:var(--g80); color:var(--g30)}
table.datos--oscura tbody th{background:var(--g90); color:var(--w); border-bottom-color:var(--g80)}
table.datos--oscura tbody tr:hover td,
table.datos--oscura tbody tr:hover th{background:var(--g80)}
table.datos--oscura td.principal{color:var(--w)}
table.datos--oscura td.num{color:var(--g40)}
table.datos--oscura tr.destaca td,
table.datos--oscura tr.destaca th{background:#1f3a6e; border-bottom-color:#2d4a85; color:var(--g20)}
table.datos--oscura tr.destaca th{color:var(--w)}
table.datos--oscura tr.destaca:hover td,
table.datos--oscura tr.destaca:hover th{background:#27467f}
table.datos--oscura tr.destaca td.principal{color:var(--w)}
table.datos--oscura tr.destaca td.num{color:#a6c8ff}
table.datos--oscura td.si{text-align:center; font-weight:600; color:#78a9ff}
table.datos--oscura tr.destaca td.si{color:#a6c8ff}
table.datos--oscura td.no{text-align:center; color:var(--g60)}
table.datos--oscura th.centro{text-align:center}

/* leyenda de una figura o tabla */
.leyenda{
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e6); margin-top:var(--e5);
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--texto-3);
}
.leyenda span{display:inline-flex; align-items:center; gap:7px}
.leyenda .mu{width:14px; height:14px; border:1px solid var(--g40); background:var(--w); flex:0 0 auto}
.leyenda .mu.gris{background:var(--g10); border-color:var(--g50)}
.leyenda .mu.az{background:var(--azul-10); border-color:var(--azul)}
.leyenda .mu.linea{height:0; border:0; border-top:1px solid var(--g50); width:18px}
.leyenda .mu.linea-az{height:0; border:0; border-top:1.5px solid var(--azul); width:18px}
.seccion--oscura .leyenda{color:var(--g40)}

/* ================= impresión ================= */
@media print{
  .cabecera,.boton,.lienzo,.saltar{display:none}
  .seccion{padding-block:24px; break-inside:avoid}
  .seccion--oscura,.pie{background:#fff; color:#000}
  .js .rv{opacity:1; transform:none}
  .medidor .val{transform:scaleX(1)}
}

/* ---------------- cambiador de idioma ---------------- */
.idioma{
  display:flex; align-items:center; height:100%; padding:0 var(--e5);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--texto-2); text-decoration:none; border-left:1px solid var(--borde);
}
.idioma:hover{background:var(--g10); color:var(--texto)}
.pie .idioma{border-left:0; padding:0; color:var(--g30)}