/* ══════════════════════════════════════════════════════════════════════════
   RECO-LAB · REPARACION DE REGRESIONES UI/UX · 2 SEP 2026
   Decimocuarta capa. Se carga LA ULTIMA, despues de
   `owner-correction-2026-09-01.css`. Quitar las dos lineas que la cargan
   revierte este paso y nada mas, como en todas las pasadas anteriores.

   No introduce ningun color, tipografia, escala de espaciado, patron de
   navegacion ni convencion de interaccion nueva. Todo lo que aqui se usa
   ya existe en el sistema.

     §1  Cabecera compartida: la fila es una rejilla de TRES pistas y las
         paginas de proyecto le meten CUATRO hijos, asi que los controles
         caian a un segundo renglon a la izquierda.
     §2  Barra de modulos del P02: el rotulo quedaba a 0px del borde.
     §3  Par de mapas TMD: las dos columnas se desalineaban 23px.
     §4  Bloque introductorio del FAI: 305px de vacio medido a la izquierda.
     §5  Guarda de interaccion de los mapas: estilos para puntero fino.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ §1 · CABECERA COMPARTIDA ═════════════════════════════════════════════

   CAUSA MEDIDA (P02, 1440px, antes de esta capa):

     .rlx-hdr-row   grid-template-columns: 366px 539px 361px   <- TRES pistas
       .rlx-wordmark   left  30  right  116   fila 1
       .rlx-hdr-ctx    left 458  right  984   fila 1   <- 342px de hueco
       .rlx-nav        left 1033 right 1395   fila 1
       .rlx-end        left  30  right  396   fila 2   <- SE CAE DE RENGLON

   `final-acotada-2026-08-16.css` declara la fila como
   `auto minmax(0,1fr) auto` para la portada, que tiene TRES hijos: marca,
   navegacion y controles. `project-01-ivub.html` y `project-02-housing.html`
   insertan ademas `.rlx-hdr-ctx` -el rotulo de orientacion- y con cuatro
   hijos la colocacion automatica manda el cuarto a un renglon nuevo, en la
   primera columna. De ahi las tres cosas que se ven: los controles a la
   izquierda y abajo, la navegacion empujada al extremo derecho, y la
   primera pista ensanchada a 366px por el elemento caido, que abre el hueco
   entre la marca y el rotulo.

   No es un problema de P01 ni de P02: es que la rejilla compartida no
   declara la pista del rotulo. Se declara aqui, y solo cuando el rotulo
   existe, de modo que la portada no cambia en absoluto.

   El corte es 1081px porque por debajo de 1080 `responsive-2026-08-29.css`
   ya convierte la fila en flex y ese camino nunca tuvo el defecto.        */

@media (min-width:1081px){
  .rlx-hdr .rlx-hdr-row:has(> .rlx-hdr-ctx){
    grid-template-columns:auto minmax(0,1fr) auto auto;
  }
  /* El rotulo cede ancho antes que nadie y se corta con puntos
     suspensivos: es contexto, no navegacion. */
  .rlx-hdr .rlx-hdr-row > .rlx-hdr-ctx{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Con la pista propia declarada, la navegacion deja de estirarse sobre
     el sobrante y se agrupa con los controles en el lado derecho. */
  .rlx-hdr .rlx-hdr-row:has(> .rlx-hdr-ctx) > .rlx-nav{
    justify-self:end;
    justify-content:flex-end;
  }
}

/* Respaldo sin `:has()`. Mismo resultado, apoyado en `data-page`. Las TRES
   paginas interiores llevan el rotulo -- `metodos.html` tambien, cosa que
   solo se ve midiendo: su cabecera tenia el mismo defecto. Si el navegador
   entiende `:has()` esta regla y la de arriba dicen lo mismo. */
@supports not selector(:has(*)){
  @media (min-width:1081px){
    body[data-page="p01"] .rlx-hdr .rlx-hdr-row,
    body[data-page="p02"] .rlx-hdr .rlx-hdr-row,
    body[data-page="metodos"] .rlx-hdr .rlx-hdr-row{
      grid-template-columns:auto minmax(0,1fr) auto auto;
    }
    body[data-page="p01"] .rlx-hdr .rlx-hdr-row > .rlx-nav,
    body[data-page="p02"] .rlx-hdr .rlx-hdr-row > .rlx-nav,
    body[data-page="metodos"] .rlx-hdr .rlx-hdr-row > .rlx-nav{
      justify-self:end; justify-content:flex-end;
    }
  }
}

/* Entre 901 y 1080 la fila es flex y el rotulo se cuela entre la marca y
   los controles disputandole ancho a la navegacion. Cede el, no ellos. */
@media (min-width:901px) and (max-width:1080px){
  .rlx-hdr .rlx-hdr-row > .rlx-hdr-ctx{
    flex:0 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .rlx-hdr .rlx-hdr-row > .rlx-nav{ flex:0 0 auto; }
  .rlx-hdr .rlx-hdr-row > .rlx-end{ flex:0 0 auto; }
}


/* ══ §2 · BARRA DE MODULOS DEL PROYECTO 02 ════════════════════════════════

   MEDIDO: borde izquierdo de la barra 30px, borde izquierdo del rotulo
   30px. Cero. El rotulo no estaba junto al filete, estaba PEGADO al limite
   de la propia lamina.

   La lamina recupera su margen interno a los dos lados. No crece: sigue
   ocupando exactamente la columna de contenido; lo que cambia es donde
   empieza su contenido dentro de ella.                                    */

.rl-modnav-inner{
  padding-left:20px;
  padding-right:20px;
}
@media (max-width:767px){
  /* En movil la tira se desplaza en horizontal: el margen interno viaja
     con ella para que el primer y el ultimo modulo no queden cortados
     contra el borde al llegar a los extremos. */
  .rl-modnav-inner{
    padding-left:16px; padding-right:16px;
    scroll-padding-left:16px;
  }
}


/* ══ §3 · PAR DE MAPAS TMD · ALINEACION ═══════════════════════════════════

   MEDIDO (1440px): las dos columnas arrancan juntas -rotulo a 2463 en las
   dos- pero el marco del mapa empieza a 2744 en la izquierda y a 2767 en la
   derecha. 23px de desfase, y los bordes inferiores heredan el mismo error.

   CAUSA: `.rl-pair` es una rejilla de dos columnas y cada `.rl-pair-col` es
   una caja flex independiente. Las alturas de sus parrafos no son iguales
   -son dos textos distintos- asi que cada columna coloca su marco donde le
   toca. Forzar una altura fija al texto seria tapar el sintoma.

   Las dos columnas pasan a compartir las filas de la rejilla madre con
   `subgrid`: rotulo, texto, marco y accion caen en la misma fila en ambas,
   y el marco arranca en la misma linea porque es la misma fila, no porque
   se le haya dicho una altura.                                            */

/* La prosa va envuelta en `.rl-pair-body` (cambio en el marcado): cada
   columna tiene entonces EXACTAMENTE cuatro hijos -rotulo, texto, marco y
   accion- que es lo que `subgrid` necesita para que las filas signifiquen
   lo mismo en las dos. Sin el envoltorio la columna tenia cinco hijos, el
   quinto caia en una fila implicita y la accion se dibujaba ENCIMA del
   mapa. */
.rl-pair-body{ display:block; min-width:0; }
.rl-pair-body > p:last-child{ margin-bottom:0; }

/* El corte es 1024px, no 768: `responsive-2026-08-29.css` colapsa el par a
   UNA columna por debajo de 1023px, y con una sola columna la rejilla madre
   no tiene filas que compartir -- medido a 768px con el corte mal puesto,
   las pistas salian `0px 691px` y las dos columnas se solapaban. Por debajo
   de 1024 cada columna vuelve a ser una caja flex normal, que es lo
   correcto cuando van una debajo de otra. */
@supports (grid-template-rows:subgrid){
  @media (min-width:1024px){
    .rl-pair{
      grid-template-rows:auto 1fr auto auto;
      align-items:stretch;
    }
    .rl-pair-col{
      display:grid;
      grid-row:1 / -1;
      grid-template-rows:subgrid;
    }
    /* El sobrante de la fila de texto queda DEBAJO del parrafo mas corto,
       nunca encima del marco: por eso los dos marcos arrancan juntos. */
    .rl-pair-body{ align-self:start; }
    .rl-pair-frame{ align-self:stretch; }
  }
}

/* Respaldo sin subgrid: la zona de texto es la unica que crece, de modo
   que el marco sigue arrancando a la misma altura en las dos columnas
   siempre que la rejilla les de la misma altura total. */
@supports not (grid-template-rows:subgrid){
  @media (min-width:1024px){
    .rl-pair{ align-items:stretch; }
    .rl-pair-col > .rl-pair-body{ flex:1 1 auto; }
  }
}


/* ══ §4 · BLOQUE INTRODUCTORIO DEL FAI ════════════════════════════════════

   MEDIDO (1440px): `.rl-fai-left` mide 509px de alto y su contenido termina
   a 205px. 305px de lamina blanca vacia, y la conclusion del bloque flotando
   despues, en un tercer renglon a todo el ancho.

   CAUSA: la fila de la rejilla la dimensiona el panel navy de la derecha
   -`Dimensiones combinadas`, 509px-, y la celda izquierda se estira hasta
   igualarlo sin nada que la llene.

   No se pone `min-height` a nada ni se le quita altura al panel derecho.
   La conclusion se MUEVE dentro de la columna izquierda (el cambio esta en
   el marcado de `project-02-housing.html`) y se ancla abajo: el hueco pasa
   a ser la separacion deliberada entre el argumento y su conclusion, que es
   justo la relacion que los dos parrafos tienen. La conclusion deja ademas
   de leerse como un pie suelto y pasa a leerse como el cierre analitico del
   bloque que la introduce.                                                */

/* La altura de la columna izquierda vuelve a seguir a su contenido. NO se
   estira para igualar el panel navy: eso era exactamente el "espaciador
   grande para igualar la tarjeta oscura" que el encargo prohibe. El panel
   derecho decide su propia altura, la izquierda la suya, y el fondo del
   contenedor -que es la misma superficie que el de la celda- cubre la
   diferencia sin que se vea ninguna cavidad. */
.rl-fai-left{
  align-self:start;
}

/* La conclusion, ya dentro de la columna del argumento (cambio en el
   marcado), se lee como el cierre analitico del bloque que la introduce y
   no como un pie suelto tras un hueco. Un hilo la separa; nada la empuja. */
.rl-fai-left > .rl-fai-close{
  margin:24px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--rule-strong);
  background:none;
  border-radius:0;
  overflow:visible;
}
.rl-fai-left > .rl-fai-close p{
  margin:0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--muted);
}
.rl-fai-left > .rl-fai-close p strong{
  color:var(--ink);
  font-weight:600;
}

@media (max-width:900px){
  /* En una sola columna no hay celda que igualar: la conclusion es
     simplemente el ultimo bloque del texto. */
  .rl-fai-left{ align-self:auto; }
  .rl-fai-left > .rl-fai-close{ margin-top:20px; }
}


/* ══ §5 · GUARDA DE INTERACCION DE LOS MAPAS · PUNTERO FINO ═══════════════

   La guarda existe desde la pasada de pulido y su patron no cambia: una
   capa delante del mapa, activacion deliberada por clic, y un boton visible
   para devolver el desplazamiento a la pagina. Lo unico que cambia es que
   ahora tambien se monta con puntero fino, porque la rueda del raton sobre
   un mapa Leaflet lo hace zoom y le roba el desplazamiento al lector
   exactamente igual que el arrastre en tactil.

   Estas reglas son solo las diferencias de escritorio: el resto del vestido
   ya esta en `polish-2026-09-01.css`.                                      */

/* Con puntero fino la capa no se pinta encima del mapa hasta que el puntero
   llega: en escritorio la figura se lee perfectamente sin activarla, y la
   invitacion aparece cuando el lector se acerca. El mapa sigue sin recibir
   la rueda -de eso se ocupa `pointer-events:none` en la capa de pulido-,
   que es lo que devuelve el desplazamiento a la pagina. */
@media (hover:hover) and (pointer:fine){
  [data-map-guard].is-guarded > .rl-mapguard{
    background:transparent;
    transition:background .16s ease;
  }
  [data-map-guard].is-guarded:hover > .rl-mapguard,
  [data-map-guard].is-guarded > .rl-mapguard:focus-visible{
    background:rgba(7,13,19,0.30);
  }
  html[data-theme="light"] [data-map-guard].is-guarded:hover > .rl-mapguard,
  html[data-theme="light"] [data-map-guard].is-guarded > .rl-mapguard:focus-visible{
    background:rgba(26,22,18,0.24);
  }
  [data-map-guard].is-guarded > .rl-mapguard > .rl-mapguard-pill{
    opacity:0;
    transform:translateY(4px);
    transition:opacity .16s ease, transform .16s ease;
  }
  [data-map-guard].is-guarded:hover > .rl-mapguard > .rl-mapguard-pill,
  [data-map-guard].is-guarded > .rl-mapguard:focus-visible > .rl-mapguard-pill{
    opacity:1;
    transform:none;
  }
}
@media (prefers-reduced-motion:reduce){
  [data-map-guard].is-guarded > .rl-mapguard,
  [data-map-guard].is-guarded > .rl-mapguard > .rl-mapguard-pill{
    transition:none;
  }
}

/* El marco del par TMD no tenia posicion propia declarada en esta capa;
   `[data-map-guard]{position:relative}` de la capa de pulido ya la da, y
   esto solo lo hace explicito para el par. */
.rl-pair-frame{ position:relative; }