/* Encabezados de TODAS las grillas (Grid.js). Se carga en layouts/head.php DESPUÉS del CSS de Grid.js (plugins/mermaid.min.css)
   para pisar sus reglas sin tocar la librería.

   Problema: Grid.js pone el título en un bloque flotante con `width: 100%` + `overflow: hidden` + `text-overflow: ellipsis` y el
   `th` con `white-space: nowrap`. Con `table-layout: auto` (el que usan todas las grillas del sistema) un ancho en % no aporta ancho
   mínimo a la columna, así que la columna se achicaba al ancho de sus datos y el título quedaba en 1 o 2 letras (y la flecha de
   orden le sacaba otros 15px).

   Solución: el título cuenta para el ancho mínimo de su columna (nunca se corta) y, si hace falta, baja de renglón SOLO entre
   palabras ("Nombre y / Apellido"), así la tabla queda lo más angosta posible; si aun así no entra, la grilla ya tiene scroll
   horizontal (.gridjs-wrapper). La flecha de orden va en un lugar fijo a la derecha (posición absoluta, centrada en alto), con su
   espacio reservado: nunca se superpone al título. */
th.gridjs-th {
    white-space: normal;
}

th.gridjs-th .gridjs-th-content,
th.gridjs-th-sort .gridjs-th-content {
    float: none;
    width: auto;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
}

th.gridjs-th-sort {
    padding-right: 34px;
}

th.gridjs-th-sort button.gridjs-sort {
    position: absolute;
    top: 50%;
    right: 12px;
    float: none;
    transform: translateY(-50%);
}

/* Tabla de un modal mientras se recarga (gridSwapStart en utilities/functions.js): se atenúa, no responde a clicks y muestra un
   spinner centrado (SIEMPRE un indicador de carga mientras se espera al servidor), en lugar del cargador de pantalla completa;
   conserva su alto para que el modal no se achique y vuelva a crecer. El spinner aparece a los 250 ms: en las respuestas rápidas
   no llega a parpadear. Lo atenuado es el contenido (no el contenedor) para que el spinner se vea con su color pleno. */
.gridSwapping {
    position: relative;
    pointer-events: none;
}

.gridSwapping > * {
    opacity: .55;
    transition: opacity .15s ease;
}

.gridSwapping::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: .25em solid var(--bs-primary, #4680ff);
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-border .75s linear infinite, gridSwapSpinnerIn .01s linear .25s forwards;
}

@keyframes gridSwapSpinnerIn {
    to {
        opacity: 1;
    }
}