/* ============================================================
   estilo-arbol.css — Árbol institucional
   Infografía del hito 08 · «El laboratorio que fundó la ciencia boliviana»
   IIF · UMSA — v1.0 · septiembre de 2026

   Se apoya en estilo-base.css. NO define ningún color propio:
   sólo reutiliza las variables del :root de la capa base, para que
   al cambiar la identidad visual de la Universidad esta página
   cambie con el resto del sitio.
   ============================================================ */

.arbol-hero{border-bottom:1px solid var(--line); background:var(--card);}
.arbol-hero-in{max-width:var(--wide); margin:0 auto; padding:34px 24px 30px;}
.crumb{font-family:var(--sans); font-size:13px; color:var(--muted); margin:0 0 14px;}
.crumb a{color:var(--muted);}
.arbol-hero h1{margin:0 0 12px; font-size:clamp(26px,4.2vw,40px); line-height:1.15; letter-spacing:-.02em;}
.arbol-hero .lead{margin:0; max-width:62ch; font-size:17.5px; color:var(--muted); line-height:1.6;}

.arbol{max-width:var(--wide); margin:0 auto; padding:40px 24px 40px;}

/* ---------- la raíz ---------- */
.raiz{background:var(--accent); color:#fff; border-radius:12px; padding:24px 28px; text-align:center;}
.raiz .f{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.85; margin-bottom:7px;}
.raiz b{display:block; font-size:clamp(19px,2.6vw,26px); line-height:1.25; letter-spacing:-.01em;}
.raiz .q{display:block; margin-top:11px; font-family:var(--sans); font-size:14px; line-height:1.55;
  opacity:.92; max-width:64ch; margin-left:auto; margin-right:auto;}

/* tronco: la línea vertical que baja de la raíz */
.tronco{height:34px; position:relative;}
.tronco::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  margin-left:-1px; background:var(--accent);}

/* ---------- las ramas ---------- */
.ramas{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:26px 26px;}

/* Cada rama lleva su propio tramo de riel. Los tramos de una misma fila se
   prolongan hasta la mitad del hueco por cada lado, de modo que se tocan y
   forman un riel continuo — sin necesidad de saber cuántas columnas hay. */
.rama{position:relative; padding-top:42px;}
.rama::after{content:""; position:absolute; left:-13px; right:-13px; top:0; height:2px; background:var(--line);}
/* colgante: une la rama con su riel */
.rama::before{content:""; position:absolute; left:22px; top:0; height:42px; width:2px; background:var(--line);}

.rama > h2{margin:0 0 16px; font-family:var(--sans); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); padding-left:44px; line-height:1.4;
  min-height:2.8em; display:flex; align-items:center;}

/* ---------- la cadena de nodos ---------- */
.cadena{list-style:none; margin:0; padding:0 0 0 44px; position:relative;}
/* eje vertical de la cadena */
.cadena::before{content:""; position:absolute; left:22px; top:6px; bottom:14px; width:2px; background:var(--line);}

.nodo{position:relative; margin:0 0 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 16px; font-family:var(--sans);}
.nodo:last-child{margin-bottom:0;}
/* el punto sobre el eje */
.nodo::before{content:""; position:absolute; left:-27px; top:16px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2.5px solid var(--muted);}
/* el trazo que une el punto con la tarjeta */
.nodo::after{content:""; position:absolute; left:-16px; top:21px; width:15px; height:2px; background:var(--line);}

.nodo .f{display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums; margin-bottom:4px;}
.nodo b{display:block; font-size:15px; line-height:1.35; letter-spacing:-.005em;}
.nodo .q{display:block; margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--muted);}
.nodo .q strong{color:var(--fg);}

/* --- estados --- */
/* nodo que corresponde a una norma del Estado */
.nodo.norma{border-left:4px solid var(--accent); background:var(--accent-soft);}
.nodo.norma::before{border-color:var(--accent); background:var(--accent);}
.nodo.norma b{color:var(--accent);}
/* institución que sigue existiendo hoy */
.nodo.hoy{border-left:4px solid var(--ok);}
.nodo.hoy::before{border-color:var(--ok); background:var(--ok);}
.nodo.hoy .hoy-tag{display:inline-block; margin-top:8px; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ok); font-weight:700;}
/* dato pendiente de verificación */
.nodo.duda{border-left:4px solid var(--warn); background:var(--warn-soft);}
.nodo.duda::before{border-color:var(--warn);}
.nodo .aviso{display:block; margin-top:7px; font-size:12.5px; line-height:1.5; color:var(--warn);}
/* el retorno al tronco */
.nodo.retorno{border-style:dashed; border-left:4px solid var(--accent2); border-left-style:solid;}
.nodo.retorno::before{border-color:var(--accent2); background:var(--accent2);}
.nodo.retorno b{color:var(--accent2);}

/* ---------- franja de cifras ---------- */
.cifras{max-width:var(--wide); margin:0 auto; padding:0 24px;}
.cifras-in{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:26px 28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:22px;
  font-family:var(--sans); text-align:center;}
.cifra b{display:block; font-size:clamp(26px,4vw,34px); line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.cifra span{display:block; margin-top:7px; font-size:13px; color:var(--muted); line-height:1.45;}
.cifras-pie{max-width:var(--wide); margin:12px auto 0; padding:0 24px; font-family:var(--sans);
  font-size:13px; color:var(--muted); text-align:center;}

/* ---------- leyenda ---------- */
.leyenda{max-width:var(--wide); margin:34px auto 0; padding:0 24px;}
.leyenda-in{display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--sans); font-size:13.5px;
  color:var(--muted); border-top:1px solid var(--line); padding-top:18px;}
.leyenda-in span{display:flex; align-items:center; gap:8px;}
.leyenda-in i{width:13px; height:13px; border-radius:3px; flex:0 0 auto;}
.i-norma{background:var(--accent);} .i-hoy{background:var(--ok);}
.i-duda{background:var(--warn);} .i-retorno{background:var(--accent2);}

/* ---------- notas y fuentes ---------- */
.notas{max-width:var(--read); margin:0 auto; padding:44px 24px 0;}
.notas h2{font-size:22px; margin:0 0 14px; letter-spacing:-.01em;}
.notas p{font-size:16px; line-height:1.65;}

@media(max-width:720px){
  .ramas{gap:20px;}
  .rama > h2{min-height:0;}
  /* en una sola columna el riel se prolongaría fuera de la caja */
  .rama::after{left:0; right:0;}
}

@media print{
  .arbol-hero{background:transparent; border-bottom:none}
  .arbol-hero-in{padding:0 0 18px}
  .arbol{padding:0 0 18px}
  .ramas{grid-template-columns:1fr 1fr; gap:14px}
  .tronco{height:20px}
  /* las ramas SÍ pueden partirse entre páginas —si no, quedan páginas medio
     vacías—; lo que nunca debe partirse es una tarjeta */
  .nodo, .cifras-in, .callout, blockquote{break-inside:avoid}
  .rama > h2{break-after:avoid; min-height:0; margin-bottom:12px}
  .nodo{margin-bottom:10px; padding:10px 13px}
  .nodo b{font-size:13px} .nodo .q{font-size:12px} .nodo .f{font-size:10px}
  .raiz{background:transparent; color:var(--fg); border:2px solid var(--accent); padding:16px 20px}
  .raiz .f, .raiz .q{opacity:1}
  .notas{padding-top:22px}
  .leyenda{margin-top:22px}
}