/* ============================================================
   Contenido más ancho que la pantalla: scroll horizontal propio
   ------------------------------------------------------------
   Capa: componente

   QUÉ PROBLEMA RESUELVE
   Una tabla de signos con 12 columnas, una fórmula en display larga
   o cualquier bloque horizontal no entran en un teléfono, y muchas
   veces tampoco en la columna de 840 px del escritorio. Hasta ahora
   el sistema resolvía eso con `overflow-x: auto` suelto en siete
   lugares distintos: funcionaba, pero sin ninguna señal de que
   hubiera más contenido al costado. El alumno no se enteraba.

   CÓMO SE USA
   Envolviendo el bloque ancho:

       <div class="scroll-x">
         <table class="tabla-analisis"> … </table>
       </div>

   Y nada más. El resto lo hace nucleo/scroll-x.js: mide, activa,
   y va marcando de qué lado queda contenido.

   LAS TRES SEÑALES
   1. DEGRADADO en el borde del lado que tiene más contenido. Se
      hace con `mask-image`, no con un pseudo-elemento: una máscara
      se ancla a la CAJA del elemento y no se va con el scroll, así
      que no hace falta un wrapper extra ni `position: sticky`.
      Las dos variables --sx-i / --sx-d valen 0 o 1 y las escribe
      el JS; con las dos en 0 la máscara es opaca entera y no se
      nota que existe.
   2. CURSOR de mano y arrastre, solo en dispositivos con mouse.
   3. PISTA con una flecha, la primera vez, y solo si hace falta.

   SIN BARRA DE SCROLL PERMANENTE. La barra nativa se oculta: en
   Windows es una franja gris de 15 px que rompe el borde inferior
   de la tabla y está siempre, aunque no se use. A cambio, el
   contenedor se vuelve enfocable (el JS le pone tabindex) para que
   con el teclado se pueda recorrer con las flechas, que es lo que
   la barra garantizaba.
   ============================================================ */

.scroll-x {
  --sx-i: 0;   /* 1 cuando queda contenido a la IZQUIERDA */
  --sx-d: 0;   /* 1 cuando queda contenido a la DERECHA   */
  --sx-fade: 30px;

  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Que el swipe horizontal no arrastre la página ni dispare el
     "volver atrás" del navegador al llegar al borde. */
  overscroll-behavior-x: contain;
  margin: 14px 0;

  /* Barra nativa fuera: ver la cabecera. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-x::-webkit-scrollbar { width: 0; height: 0; }

/* El degradado de los bordes.
   Con --sx-i y --sx-d en 0 los dos `calc()` dan 0 y la máscara
   queda opaca de punta a punta: cero efecto visible. */
.scroll-x {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 calc(var(--sx-i) * var(--sx-fade)),
    #000 calc(100% - var(--sx-d) * var(--sx-fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 calc(var(--sx-i) * var(--sx-fade)),
    #000 calc(100% - var(--sx-d) * var(--sx-fade)),
    transparent 100%
  );
}

/* Solo cuando de verdad hay desborde. La clase la pone el JS. */
.scroll-x.sx-activo { cursor: grab; }
.scroll-x.sx-arrastrando {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
/* Durante el arrastre no queremos que el navegador entienda el
   gesto como "seleccionar texto" ni que dispare clicks. */
.scroll-x.sx-arrastrando * { pointer-events: none; }

.scroll-x:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════
   LA PISTA — flecha discreta sobre el borde derecho
   El JS envuelve el contenedor en .sx-marco y cuelga la
   pista de ahí: dentro del .scroll-x se iría con el scroll.
═══════════════════════════════════════════════════ */
.sx-marco { position: relative; }

.sx-pista {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;

  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .8rem; line-height: 1;

  opacity: 0;
  transition: opacity .3s ease;
}
.sx-pista.sx-visible {
  opacity: 1;
  animation: sxLatido 1.9s ease-in-out 3;
}
@keyframes sxLatido {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-pista.sx-visible { animation: none; }
  .sx-pista { transition: none; }
}

/* ═══════════════════════════════════════════════════
   FÓRMULAS EN DISPLAY
   MathJax genera su propio contenedor y ya trae
   `overflow-x: auto` de base/04-estructura.css. No se le
   cambia el scroll: solo se le suma la máscara, y solo
   cuando el JS detecta que desborda de verdad.
═══════════════════════════════════════════════════ */
mjx-container[display="true"].sx-activo {
  --sx-i: 0; --sx-d: 0; --sx-fade: 26px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 calc(var(--sx-i) * var(--sx-fade)),
    #000 calc(100% - var(--sx-d) * var(--sx-fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 calc(var(--sx-i) * var(--sx-fade)),
    #000 calc(100% - var(--sx-d) * var(--sx-fade)),
    transparent 100%
  );
  scrollbar-width: none;
  cursor: grab;
}
mjx-container[display="true"].sx-activo::-webkit-scrollbar { width: 0; height: 0; }
mjx-container[display="true"].sx-arrastrando { cursor: grabbing; }

/* ═══════════════════════════════════════════════════
   IMPRESIÓN — en papel no hay scroll
═══════════════════════════════════════════════════ */
@media print {
  .scroll-x,
  mjx-container[display="true"].sx-activo {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    overflow: visible !important;
  }
  .sx-pista { display: none !important; }
}