/* ============================================================================
   NORMA SUITE · remate de accesibilidad y de desbordamiento
   ----------------------------------------------------------------------------
   POR QUÉ ES TAN CORTA
   El responsive de TMT NormaSuite YA ESTABA HECHO. Los ocho módulos tienen su cajón
   de menú en móvil (@media 900px, clase `side-off`, botón #btnSide), sus tablas
   se desplazan dentro de .table-wrap, tienen :focus-visible,
   prefers-reduced-motion y el [hidden]{display:none!important} que hace falta
   para que el login no se vea por detrás. El gris secundario (#64748b) da 4,8:1
   sobre blanco, así que también pasa de contraste.

   Quedaban solo dos cosas, y son las dos que sí se le pusieron a GestObra:

   1. El `body` sin `overflow-x`. Si algo desborda —una tabla mal metida, un
      texto largo sin cortar, un pegado de una URL kilométrica— la página entera
      se desplaza en horizontal y todo baila. Es una red de seguridad: no arregla
      la causa, pero evita que un fallo de un sitio estropee la pantalla completa.

   2. Ningún enlace para saltar al contenido. Quien navega con el tabulador —o con
      un lector de pantalla— tiene que pasar por los treinta y tantos enlaces de
      la barra lateral antes de llegar a lo que vino a leer, en CADA página.

   Se carga la ÚLTIMA en cada módulo, después de styles.css y relieve.css.
   ========================================================================== */

/* `clip` y no `hidden`: hidden crea un contexto de desplazamiento que rompe el
   `position: sticky` de la barra lateral y de la barra superior, y las dos lo
   usan. Con clip se recorta sin crear ese contexto. */
body { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Saltar al contenido
   -------------------------------------------------------------------------
   Invisible hasta que recibe el foco. No se usa `display:none` ni
   `visibility:hidden` a propósito: eso también lo esconde del lector de
   pantalla, que es justo a quien sirve. Se saca de la pantalla con la posición.
   -------------------------------------------------------------------------*/
.saltar-al-contenido {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ns-ink, #0f172a);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
  transition: top .12s ease;
}
.saltar-al-contenido:focus,
.saltar-al-contenido:focus-visible {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* El destino del salto no debe dibujar un contorno cuando se le manda el foco
   por programa: no lo ha enfocado la persona, solo se ha movido ahí. */
.main:focus, .hub-main:focus { outline: none; }

/* Reducir movimiento: se quita la transición, NUNCA el elemento. Con las
   animaciones del sistema desactivadas esta consulta se cumple SIEMPRE, y un
   display:none aquí borraría cosas de la pantalla en vez de calmarlas. */
@media (prefers-reduced-motion: reduce) {
  .saltar-al-contenido { transition: none; }
}