/* ═══════════════════════════════════════════════════════════════════
   RECO-LAB · PASADA DE PULIDO Y RELEASE RESPONSIVE · 1 sep 2026
   Hoja autocontenida, cargada en ULTIMO lugar en las cuatro paginas.
   Retirar este unico <link> revierte toda esta pasada y nada mas.

   NO redisena el producto, no cambia la arquitectura de informacion
   y no toca ningun dato ni ninguna cifra publicada. Actua sobre:

     §0  guarda de [hidden] (feature flags)
     §1  seccion de sistemas analiticos · rejilla 1 / 4-2-1
     §2  proyectos 03 y 04 · contenedores no navegables
     §3  navegacion local del proyecto 02 (TMD · HAR · FAI · UPI)
     §4  guarda de interaccion de los mapas Folium en tactil
     §5  lectura explicita del UPI · segmentacion, no ranking
     §6  linea base de foco, area tactil y desbordamiento

   Tokens: solo los que existen en las CUATRO paginas
   (--accent, --accent-700, --ink, --muted, --muted-2, --surface,
   --surface-2, --bg, --r-pill, --r-card, --rl-hdr-h, --space-*).
   Todo lo demas lleva fallback explicito.
   ═══════════════════════════════════════════════════════════════════ */


/* ══ §0 · GUARDA DE [hidden] ═══════════════════════════════════════
   Un elemento con `hidden` sigue pintandose si una regla anterior le
   da `display:flex/inline-flex`, que es exactamente el caso de
   `.rlx-btn` en el pie. Sin esta guarda el flag de Medium no oculta
   nada. Con display:none el nodo sale del foco y del arbol de
   accesibilidad, y su hueco no deja separacion vacia. */
[hidden]{ display:none !important; }


/* ══ §1 · SISTEMAS ANALITICOS ══════════════════════════════════════
   Jerarquia renderizada actual, sin simplificar: IVUB a ancho
   completo y despues los cuatro modulos. Cada tarjeta conserva
   acronimo, categoria, nombre completo y descripcion.

     escritorio  1280 / 1440+ ....... 4 columnas
     tableta      768 /  834 / 1024 . 2 x 2
     movil        360 /  390 /  430 . columna unica

   Solo se toca el punto de corte inferior: estaba en 720px, de modo
   que la banda 721-767 -que es telefono en horizontal, no tableta-
   seguia intentando dos columnas. Se alinea con el limite 767/768
   que usa el resto del sitio. */
@media (max-width:767px){
  .mods{ grid-template-columns:1fr; }
}
/* El rail vertical que engancha los modulos a la espina del IVUB come
   ancho util justo donde no sobra. Por debajo de 620px se recoge: la
   derivacion ya la comunica el orden y el rotulo de `.branch`. */
@media (max-width:620px){
  .mods{ margin-left:0; padding-left:0; border-left:0; }
  .mods > .mod:first-child::before{ display:none; }
  .branch{ margin-left:0; padding-left:0; border-left:0; }
}
/* Ninguna tarjeta puede empujar la rejilla: el texto largo parte. */
.mod{ min-width:0; }
.mod h4,.mod p,.mod .mod-eyebrow{ overflow-wrap:anywhere; }
/* La tarjeta del Proyecto 01 ocupa la fila entera en las tres bandas. */
.found{ width:100%; max-width:100%; min-width:0; }


/* ══ §2 · PROYECTOS 03 Y 04 · NO NAVEGABLES ════════════════════════
   Permanecen visibles y legibles: representan el pipeline de
   investigacion en curso. Lo que se retira es la afordancia de
   navegacion, no la ficha.

   Sin href, sin cursor de mano, sin elevacion al pasar, sin flecha,
   sin CTA activo y sin parada de tabulacion. NO se bajan a una
   opacidad que dane la lectura: el contraste del cuerpo es el mismo
   que el de las tarjetas activas; lo unico atenuado es el borde. */
.project.is-record,
.project.is-record .project-link,
.project.is-record .project-media,
.project.is-record .project-media img{
  cursor:default;
}
.project.is-record{
  opacity:1;
  transform:none;
  box-shadow:none;
}
.project.is-record:hover,
.project.is-record:focus-within,
.project.is-record .project-link:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--divider,rgba(128,128,128,0.28));
}
/* Cualquier CTA o flecha heredada queda fuera de estas dos fichas. */
.project.is-record .project-cta,
.project.is-record .arrow,
.project.is-record .project-link::after{
  display:none !important;
}
.project.is-record .project-foot{
  flex-wrap:wrap;
  align-items:flex-start;
  row-gap:var(--space-3,10px);
}

/* Estado documental · dos lineas, texto real, no solo color. */
.rl-state{
  display:flex; flex-direction:column; gap:3px;
  flex:1 1 auto; min-width:0;
  padding-left:15px; position:relative;
}
.rl-state::before{
  content:""; position:absolute; left:0; top:0.42em;
  width:7px; height:7px; border-radius:2px;
  background:var(--accent-700,#6d93b8);
}
.rl-state-k{
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-weight:600; font-size:11.5px; line-height:1.45;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--accent-700,#6d93b8);
}
.rl-state-d{
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-weight:400; font-size:12.5px; line-height:1.5;
  letter-spacing:0.01em;
  color:var(--muted,#6B6355);
  overflow-wrap:anywhere;
}
@media (max-width:430px){
  .rl-state-k{ font-size:11px; letter-spacing:0.1em; }
  .rl-state-d{ font-size:12px; }
}


/* ══ §3 · NAVEGACION LOCAL DEL PROYECTO 02 ═════════════════════════
   Cuatro modulos en una pagina de ~18.000px. La barra dice donde
   esta el lector y le permite saltar entre modulos sin volver al
   inicio. Etiquetas expandidas: la sigla sola no orienta a quien
   llega por primera vez.

   Escritorio y tableta: adherida bajo la cabecera, que ya es sticky,
   usando su altura MEDIDA (`--rl-hdr-h`, la escribe site.js).
   Movil: banda de desplazamiento horizontal, sin adherencia, para no
   comerse una pagina que ya es larga. */
.rl-modnav{
  margin:26px 0 30px;
  border-top:1px solid var(--divider,rgba(128,128,128,0.24));
  border-bottom:1px solid var(--divider,rgba(128,128,128,0.24));
  background:var(--bg,transparent);
}
.rl-modnav-inner{
  display:flex; align-items:stretch; gap:6px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:6px 0;
}
.rl-modnav-lbl{
  display:none;
  align-items:center;
  padding-right:14px; margin-right:8px;
  border-right:1px solid var(--divider,rgba(128,128,128,0.24));
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:11px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted-2,#9A9286);
  white-space:nowrap;
}
.rl-modnav a{
  flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  min-height:46px; padding:7px 14px;
  border-radius:var(--r-card,10px);
  text-decoration:none;
  border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.rl-modnav .k{
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:11.5px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-700,#6d93b8);
  white-space:nowrap;
}
.rl-modnav .n{
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:12.5px; font-weight:400; line-height:1.35;
  color:var(--muted,#6B6355);
  white-space:nowrap;
}
.rl-modnav a:hover{
  background:var(--surface-2,rgba(128,128,128,0.10));
  border-color:var(--divider,rgba(128,128,128,0.24));
}
/* Estado actual: color MAS un indicador de forma, para que la senal no
   dependa solo del color. */
.rl-modnav a[aria-current="true"]{
  background:var(--surface-2,rgba(128,128,128,0.12));
  border-color:var(--accent-700,#6d93b8);
}
.rl-modnav a[aria-current="true"] .n{ color:var(--ink,#1A1612); font-weight:500; }
.rl-modnav a[aria-current="true"] .k::before{ content:"\25B8\00A0"; }

@media (min-width:768px){
  .rl-modnav{
    position:sticky; top:var(--rl-hdr-h,84px); z-index:60;
  }
  .rl-modnav-lbl{ display:flex; }
  .rl-modnav-inner{ gap:4px; overflow-x:visible; }
  .rl-modnav a{ flex:1 1 0; min-width:0; }
  .rl-modnav .n{ white-space:normal; }
}
/* Pantallas cortas en horizontal: la barra adherida robaria demasiado
   alto util, asi que vuelve al flujo. */
@media (max-height:560px) and (orientation:landscape){
  .rl-modnav{ position:static; }
}
@media (max-width:767px){
  .rl-modnav{ position:relative; }
  .rl-modnav-inner{
    padding:6px 2px;
    scroll-snap-type:x proximity;
    scroll-padding-left:2px;
  }
  .rl-modnav a{ scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce){
  .rl-modnav a{ transition:none; }
}
/* Techo de anclaje: mientras la barra esta adherida se suma a la altura
   de la cabecera, o saltar a un modulo lo deja con el titulo justo
   DEBAJO de la barra. `--rl-modnav-h` la escribe medida
   `polish-2026-09-01.js`, y vale 0px fuera de la banda adherida, de modo
   que esta regla es inocua donde la barra viaja con el contenido.
   El selector lleva `body[data-page="p02"]` para ganarle al `[id]` de
   `responsive-2026-08-29.css:42` por especificidad y no por orden. */
body[data-page="p02"] [id]{
  scroll-margin-top:calc(var(--rl-hdr-h,84px) + var(--rl-modnav-h,0px) + 14px);
}


/* ══ §4 · GUARDA DE INTERACCION DE LOS MAPAS ═══════════════════════
   Los mapas Folium NO se reconstruyen. En tactil su iframe captura el
   gesto de desplazamiento de la pagina y el lector queda atrapado
   haciendo zoom sobre el mapa. Hasta que lo activa explicitamente, el
   iframe no recibe puntero; despues aparece un control visible que
   devuelve el desplazamiento a la pagina.

   En escritorio con puntero fino la guarda no se monta: el mapa se
   comporta exactamente como siempre. */
[data-map-guard]{ position:relative; }

[data-map-guard].is-guarded > iframe{ pointer-events:none; }
[data-map-guard].is-guarded.is-live > iframe{ pointer-events:auto; }

.rl-mapguard{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  width:100%; border:0; margin:0;
  padding:16px;
  background:rgba(7,13,19,0.32);
  color:#fff;
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
html[data-theme="light"] .rl-mapguard{ background:rgba(26,22,18,0.26); }
.rl-mapguard-pill{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:11px 20px;
  border-radius:var(--r-pill,999px);
  background:rgba(10,17,25,0.92);
  border:1px solid rgba(255,255,255,0.34);
  font-size:14px; font-weight:600; letter-spacing:0.02em;
  box-shadow:0 6px 22px -12px rgba(0,0,0,0.9);
}
.rl-mapguard-ico{
  width:17px; height:17px; fill:none;
  stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.rl-mapguard:focus-visible{
  outline:3px solid var(--accent-700,#93b3d1);
  outline-offset:-3px;
}
[data-map-guard].is-live > .rl-mapguard{ display:none; }

/* Salida: control visible mientras el mapa esta activo. */
.rl-maprelease{
  position:absolute; z-index:6;
  right:10px; top:10px;
  display:none; align-items:center; gap:8px;
  min-height:40px; padding:8px 15px;
  border-radius:var(--r-pill,999px);
  background:rgba(10,17,25,0.94);
  border:1px solid rgba(255,255,255,0.36);
  color:#fff; cursor:pointer;
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:12.5px; font-weight:600; letter-spacing:0.02em;
  box-shadow:0 6px 22px -12px rgba(0,0,0,0.9);
}
[data-map-guard].is-live > .rl-maprelease{ display:inline-flex; }
.rl-maprelease:focus-visible{
  outline:3px solid var(--accent-700,#93b3d1); outline-offset:2px;
}

/* El contenedor de cualquier iframe nunca desborda su columna. */
.rl-embed,.rl-embed-body,.rl-pair,.rl-pair-frame{ max-width:100%; }
.rl-embed-body > iframe,.rl-pair-frame > iframe{
  display:block; max-width:100%; border:0;
}


/* ══ §5 · LECTURA DEL UPI ══════════════════════════════════════════
   El UPI es una segmentacion territorial en regimenes leida sobre una
   matriz. No es un ranking lineal y no integra los modulos en una
   cifra unica. La pagina ya lo dice en prosa; aqui se hace visible en
   la superficie de la propia figura, donde el lector decide como
   mirarla. No cambia ningun calculo, ninguna geometria y ninguna
   clasificacion. */
/* AVISO DE TOKENS · este bloque vive DENTRO de `.rl-matrix`, y ese
   contenedor redefine `--surface-2` a la lamina clara de la figura
   (#EEF1F4) en LOS TRES moods, sin tocar `--ink`. Escrito con tokens,
   en oscuro y noche quedaba tinta clara sobre lamina clara: 1,03:1
   MEDIDO, es decir invisible. Por eso los colores van aqui literales y
   por mood. Los valores son exactamente los que `:root` da a
   --surface-2 / --ink / --muted / --muted-2 / --accent-700 en cada
   mood, de modo que el bloque sigue al sistema aunque no lo lea. */
.rl-upi-read{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:0 0 14px;
  padding:11px 14px;
  border:1px solid rgba(26,22,18,0.14);
  border-left:3px solid #416180;
  border-radius:var(--r-card,10px);
  background:#EEF1F4;
  color:#1A1612;
}
html[data-theme="dark"] .rl-upi-read{
  background:#1b2b37; color:#e9eef2;
  border-color:rgba(255,255,255,0.16); border-left-color:#a9c6e0;
}
html[data-theme="night"] .rl-upi-read{
  background:#111b24; color:#dbe4ea;
  border-color:rgba(255,255,255,0.14); border-left-color:#93b3d1;
}
.rl-upi-read .is{
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:12.5px; font-weight:600; line-height:1.5;
  letter-spacing:0.02em; color:inherit;
  min-width:0; overflow-wrap:anywhere;
}
.rl-upi-read .isnt{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:11.5px; font-weight:600; line-height:1.5;
  letter-spacing:0.11em; text-transform:uppercase;
  color:#5c5548;
  border:1px solid rgba(26,22,18,0.18);
  border-radius:var(--r-pill,999px);
  padding:4px 12px;
}
html[data-theme="dark"] .rl-upi-read .isnt{
  color:rgba(233,238,242,0.82); border-color:rgba(255,255,255,0.24);
}
html[data-theme="night"] .rl-upi-read .isnt{
  color:rgba(219,228,234,0.80); border-color:rgba(255,255,255,0.22);
}
.rl-upi-read .isnt::before{
  content:"✕"; font-size:11px; line-height:1; opacity:.72;
}
@media (max-width:620px){
  .rl-upi-read{ flex-direction:column; align-items:flex-start; gap:8px; }
}


/* ══ §6 · FOCO, AREA TACTIL Y DESBORDAMIENTO ═══════════════════════ */

/* Foco visible en todo lo operable, en los tres moods. Se declara con
   `outline` y no con sombra para que sobreviva a cualquier fondo. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--accent-700,#93b3d1);
  outline-offset:2px;
  border-radius:3px;
}
/* Enlace de salto · MEDIDO como ilegible en oscuro y noche.
   `system-2.9.css` lo pinta enfocado con `background:#fff` y
   `color:var(--ink)`, y en esos dos moods `--ink` es tinta CLARA
   (#e9eef2 / #dbe4ea): texto casi blanco sobre blanco, ~1,1:1. Es el
   mismo choque que ya documenta la colision --offwhite/--institutional.
   Aqui se le da una placa institucional propia, literal y no por token,
   que se lee igual en los tres moods, y se sube por encima de la
   cabecera adherida. El selector repite `a.skip:focus` para empatar en
   especificidad con `v3-reco-lab.css:2080` y ganar por orden. */
a.skip:focus,
a.skip:focus-visible,
.skip:focus,
.skip:focus-visible{
  left:8px; top:8px; width:auto; height:auto; overflow:visible;
  z-index:999;
  background:#0a1119; color:#ffffff;
  border:1px solid rgba(255,255,255,0.30);
  border-radius:0 0 8px 8px;
  padding:11px 16px;
  font-family:var(--font-ui,'IBM Plex Sans',system-ui,sans-serif);
  font-size:14px; font-weight:600; text-decoration:none;
  outline:3px solid #93b3d1;
  outline-offset:2px;
}

/* Area tactil de los controles de cabecera y pie en movil.

   Los selectores van largos a proposito, y cada uno responde a una
   regla concreta que gana por especificidad, no por orden:

   · `responsive-2026-08-29.css` fija `min-height:34px` en
     `.rlx-hdr .rlx-lang button` (0,2,1). Un `.rlx-lang button` (0,1,1)
     pierde: MEDIDO, el boton de idioma se quedaba en 44x34.
   · `responsive-2-2026-08-29.css` devuelve `min-width:auto` a
     `.rlx-hdr .rlx-hdr-row .rlx-end > *` (0,3,1), lo que anula el
     `min-width:44px` que la primera pasada ya le habia dado a la
     hamburguesa: MEDIDO, 39x44. */
/* La banda llega a 1024 y no a 767: una tableta es tactil, y en toda esa
   franja la navegacion principal esta plegada tras la hamburguesa, que
   es justamente el control que hay que poder acertar con el pulgar. */
@media (max-width:1024px){
  .rlx-hdr .rlx-hdr-row .rlx-lang button,
  .rlx-hdr .rlx-hdr-row .rlx-mood button,
  .rlx-drawer .rlx-mood button{ min-height:44px; }
  .rlx-hdr .rlx-hdr-row .rlx-lang button{ min-width:44px; }
  .rlx-hdr .rlx-hdr-row .rlx-end > .rlx-burger{
    min-width:44px; min-height:44px;
  }
  .rlx-ftr .rlx-btns .rlx-btn{ min-height:44px; }
}

/* El corte horizontal del documento NO se redeclara aqui: ya lo fija
   `responsive-4-2026-08-29.css:310` (`html,body{overflow-x:hidden}`), y
   dos fuentes para la misma regla es como se pierde el rastro de quien
   recorta que. Lo unico que se anade es el techo de ancho, que impide
   que un hijo empuje el documento antes de que ese corte actue. */
html,body{ max-width:100%; }