/* Paquete redes — corrección del frontend 13-sep-2026 (docs/auditoria/frontend-vistas-2026-09-13.md). */

/* ---------------------------------------------------------------------------
 * RED-13 — Tabla de máquinas de /network/<id> en móvil.
 *
 * Medido con Playwright a 390 px antes del cambio: la tabla medía 564 px dentro
 * de una caja de 330 px y en la vista solo cabían la miniatura, «Máquina», «IP»
 * y la columna de writeups. Servicios, banderas y el botón quedaban a la
 * derecha, en un desplazamiento interno SIN ninguna pista de que existía. La
 * página no desbordaba (scrollWidth 390), así que nada invitaba a deslizar.
 *
 * Tres cosas, todas acotadas a .network-view y a < 576 px:
 *  1. La miniatura (primera columna, siempre presente: TargetWidget no la deja
 *     ocultar) es decorativa —el nombre va al lado— y cuesta ~3 em. Fuera.
 *  2. El nombre queda fijo a la izquierda al deslizar: sin él, las cifras de
 *     la derecha no dicen de qué máquina son. Es la columna 2 porque la vista
 *     siempre oculta `id` ($ocultas en view.php).
 *  3. Sombra en el borde que tiene más contenido: el patrón de «sombras de
 *     desplazamiento» con background-attachment local/scroll. Solo CSS, sin JS,
 *     y desaparece sola al llegar al final.
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .network-view .table-responsive {
    background:
      linear-gradient(to right, var(--ac-nivel-1, var(--bg-1)) 30%, transparent) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--ac-nivel-1, var(--bg-1)) 30%, transparent) right center / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, oklch(0 0 0 / 0.45), transparent) left center / 0.9rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, oklch(0 0 0 / 0.45), transparent) right center / 0.9rem 100% no-repeat scroll;
  }

  .network-view #target-list table {
    background: transparent;
  }

  .network-view #target-list tr > :first-child {
    display: none;
  }

  .network-view #target-list tr > :nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 8.5rem;
    background: var(--ac-nivel-1, var(--bg-1));
    box-shadow: 1px 0 0 var(--ac-linea, var(--line-soft));
  }

  /* «sin instancia» partido en dos líneas ocupa menos que en una. */
  .network-view #target-list td:nth-child(3) {
    white-space: normal;
    min-width: 5.5rem;
    color: var(--ac-txt-2, var(--fg-dim));
  }
}