/* ══════════════════════════════════════════════════════════════════════════
   RECO-LAB · CORRECCION CONTROLADA DEL PROPIETARIO · 4 SEP 2026
   Decimoquinta capa. Se carga LA ULTIMA, despues de
   `uiux-repair-2026-09-02.css`. Retirar la linea que la carga revierte
   esta pasada entera y deja intacto todo lo anterior.

   No introduce ningun color, tipografia, escala de espaciado, patron de
   navegacion ni convencion de interaccion nueva. La barra de modulos
   conserva su arquitectura de informacion completa -- las mismas cuatro
   anclas, el mismo orden, el mismo `aria-current`, el mismo
   desplazamiento horizontal en movil. Cambia SOLO el vestido.

     §1  Barra de modulos del P02 · la lamina se sangra a todo el ancho.
     §2  Barra de modulos del P02 · tipografia legible y aire interno.
     §3  Barra de modulos del P02 · estado actual sin recuadro dibujado.
     §4  Barra de modulos del P02 · color propio del enlace.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ §1 · LA LAMINA SE SANGRA A TODO EL ANCHO ═════════════════════════════

   MEDIDO (project-02-housing.html, 1440x900, mood CLARO, con la barra
   adherida):

     header.rlx-hdr   left    0   right 1425   <- a sangre
     nav.rl-modnav    left   30   right 1395   <- columna de contenido
     fondo de pagina  #ffffff
     lamina de barra  #1d2d3d

   La cabecera es una lamina a sangre y la barra de modulos es una lamina
   del MISMO color pero encajada en la columna de contenido. Al quedar
   adherida bajo la cabecera aparecen 30px de fondo de pagina a cada lado
   de la costura: en claro, dos franjas blancas verticales justo debajo de
   la cabecera. Eso es la «banda desprendida» y el «recuadro raro que
   aparece bajo la cabecera al desplazar». En oscuro y noche el defecto
   existe igual, solo que el contraste lo disimula.

   La barra no se mueve ni cambia de ancho: lo que se sangra es su LAMINA,
   pintada por un pseudo-elemento que se extiende hasta el borde de la
   ventana. El contenido sigue exactamente en la columna de contenido, con
   el margen interno que le dio la capa 14.

   `html, body { overflow-x: clip }` -- declarado en `system-2.9.css` y
   repetido en `responsive-4-2026-08-29.css` -- garantiza que los 100vw no
   abran barra de desplazamiento horizontal en ningun corte.              */

.rl-modnav{
  /* La lamina deja de pintarse en el elemento: la pinta el pseudo. Sin
     esto la caja seguiria dibujando su rectangulo encajado ENCIMA del
     sangrado. */
  background:transparent;
  border-bottom:0;
}

.rl-modnav::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  /* Capa 6 del orden de pintado (elemento posicionado con z-index:0). El
     contenido sube a la capa 7 justo debajo, de modo que la lamina queda
     por detras de los rotulos sin recurrir a z-index negativo, que en
     movil -- donde la barra es `position:relative` sin contexto de
     apilamiento propio -- la mandaria detras del fondo del documento. */
  z-index:0;
  background:var(--rlmn-plate);
  /* El unico cierre: un filete inferior muy tenue que separa el cromo del
     contenido. Ni filete superior ni caja, como en la capa 13. */
  border-bottom:1px solid rgba(0,0,0,0.28);
  pointer-events:none;
}

.rl-modnav-inner{
  position:relative;
  z-index:1;
}


/* ══ §2 · TIPOGRAFIA LEGIBLE Y AIRE INTERNO ═══════════════════════════════

   MEDIDO (1440px, antes de esta capa):

     .rl-modnav-lbl   font-size 11.5px
     .rl-modnav .k    font-size 12px
     .rl-modnav .n    font-size 13.5px
     .rl-modnav a     padding 10px 18px, min-height 52px

   El encargo pide subir a un tamano claramente legible y dar 16-20px de
   respiracion. La escala se toma de la que ya usa el sistema: el rotulo
   sube al cuerpo del `.rl-ev` (12px), la sigla al del `.dim-label` del
   explorador (12.5px) y la etiqueta expandida al cuerpo pequeno de la
   pagina (15px), que es donde deja de leerse como nota al pie.           */

.rl-modnav-lbl{
  font-size:12px;
  letter-spacing:0.16em;
  /* 20px de aire a cada lado del filete divisorio: el rotulo no toca ni
     la divisoria ni el margen interno de la lamina. */
  padding:0 20px 0 0;
  margin-right:20px;
}

.rl-modnav a{
  min-height:58px;
  padding:12px 20px;
}

.rl-modnav .k{
  font-size:12.5px;
  letter-spacing:0.15em;
}

.rl-modnav .n{
  font-size:15px;
  line-height:1.3;
}

/* La tira movil se desplaza en horizontal: el aire interno viaja con ella
   y las fichas no se cortan contra los extremos. */
@media (max-width:767px){
  .rl-modnav a{ min-height:54px; padding:11px 16px; }
  .rl-modnav .n{ font-size:14.5px; }
  .rl-modnav-lbl{ padding-right:16px; margin-right:16px; }
}


/* ══ §3 · ESTADO ACTUAL SIN RECUADRO DIBUJADO ═════════════════════════════

   MEDIDO (1440px, antes de esta capa):

     a[aria-current="true"]  background rgba(255,255,255,0.13)
                             border     1px solid rgba(255,255,255,0.26)

   Un rectangulo gris de borde visible alrededor de la ficha activa, sobre
   una lamina oscura y junto a tres fichas sin borde: es el «aspecto de
   recuadro a lapiz» del encargo. La senal se conserva entera -- color mas
   forma, nunca solo color -- pero cambia de forma: una lamina apenas
   levantada y un filete de acento al pie de la ficha, que es como marca
   el estado la navegacion principal de la cabecera.

   El borde no se retira, se vuelve transparente: asi la caja mide igual en
   los cuatro modulos y el estado no desplaza a sus vecinos.              */

.rl-modnav a{
  color:var(--rlmn-dim);
}

.rl-modnav a:hover{
  background:var(--rlmn-hover);
  border-color:transparent;
}

.rl-modnav a[aria-current="true"]{
  /* Sin lamina: el estado no es una caja, es un filete. La navegacion
     principal de la cabecera marca su pagina exactamente asi. */
  background:transparent;
  border-color:transparent;
  box-shadow:inset 0 -2px 0 0 var(--rlmn-key);
}

/* La sigla del modulo activo se lee en el acento, no en blanco puro: el
   filete inferior y la sigla dicen lo mismo y el conjunto deja de parecer
   una caja seleccionada. El nombre expandido sigue en tinta plena. */
.rl-modnav a[aria-current="true"] .k{
  color:var(--rlmn-key);
}

@media (prefers-reduced-motion:reduce){
  .rl-modnav a{ transition:none; }
}


/* ══ §4 · COLOR PROPIO DEL ENLACE ═════════════════════════════════════════

   MEDIDO: `getComputedStyle(a).color` en la barra de modulos devolvia
   `rgb(158,158,255)`, que es el color de enlace por defecto del navegador
   en esquema oscuro. Ninguna regla declaraba `color` sobre `.rl-modnav a`;
   solo sobre sus dos hijos `.k` y `.n`. Mientras el texto viva dentro de
   esos hijos no se ve, pero todo lo que resuelva `currentColor` -- un
   filete, un glifo, un contorno -- toma el violeta del navegador.

   La declaracion de §3 (`color:var(--rlmn-dim)`) cierra esa fuga. Aqui
   queda solo la nota, para que la proxima pasada no la vuelva a quitar
   por parecer redundante.                                                */