/* Indicadores de orden. Van en su propia hoja porque las tablas viven en cinco
   stylesheets distintas (styles, bodega, quality, changes, mercado-marcas) y la vista
   original legacy no carga ninguna de ellas. */

/* `sticky` y no `relative`: la celda igual queda posicionada para la flecha del ::after,
   pero conserva el encabezado fijo al hacer scroll. Con `relative` se pisaba el
   `position: sticky` de styles.css y los títulos se iban con el scroll. */
th.sortable {
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
  padding-right: 1.5rem;
}

th.sortable:hover,
th.sortable:focus-visible {
  color: var(--text, #f6f8fb);
  background: var(--panel-2, #172231);
}

th.sortable:focus-visible {
  outline: 2px solid var(--accent, #f5b942);
  outline-offset: -2px;
}

/* La flecha se dibuja desde `aria-sort`, así que el estado accesible y el visual no
   pueden quedar desincronizados: son el mismo atributo. */
th.sortable::after {
  content: "↕";
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  opacity: .28;
  transition: opacity .12s ease, color .12s ease;
}

th.sortable:hover::after {
  opacity: .6;
}

th.sortable[aria-sort="ascending"]::after {
  content: "↑";
  opacity: 1;
  color: var(--accent, #f5b942);
}

th.sortable[aria-sort="descending"]::after {
  content: "↓";
  opacity: 1;
  color: var(--accent, #f5b942);
}

th.sortable[aria-sort="ascending"],
th.sortable[aria-sort="descending"] {
  color: var(--text, #f6f8fb);
}

/* Tirador de ancho de columna.
 *
 * Ocupa la franja derecha del encabezado y se pinta sólo al pasar el mouse, para no
 * competir con la flecha de orden. El `pointer-events` propio es lo que permite que
 * arrastrar el borde no dispare el ordenamiento del clic. */
th.redimensionable { position: sticky; }

.col-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.col-resize::before {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 2px;
  width: 1px;
  background: transparent;
  transition: background .12s ease-out;
}

th:hover > .col-resize::before { background: rgba(255, 255, 255, .16); }
.col-resize:hover::before,
.col-resize.activo::before { background: var(--brand, #F0B429); width: 2px; }

/* Mientras se arrastra, el cursor manda en toda la página y nada selecciona texto. */
body.redimensionando { cursor: col-resize; user-select: none; }