/*
 * Columnas fijas (freeze / pin) para las tablas de Filament.
 *
 * El controlador JS (columnas-fijas.js) agrega:
 *   - data-columna-fija="left" en cada <th>/<td> congelado.
 *   - --columna-fija-left con el offset horizontal calculado.
 *   - data-columna-fija-borde="left" en la ultima columna congelada (borde/sombra).
 *
 * Las celdas fijas deben pintar su PROPIO fondo solido y opaco: una celda
 * sticky transparente deja ver el texto de las columnas que se desplazan por
 * debajo (efecto "bleed-through"). El color exacto lo calcula el JS en tiempo
 * de ejecucion (resolverFondo): sube por el DOM desde la celda hasta el primer
 * ancestro con fondo opaco y lo aplica inline con !important, asi coincide con
 * la superficie real de la fila/tabla en CUALQUIER tema (claro u oscuro) sin
 * depender de colores hardcodeados. Aca solo queda un fallback neutro por si el
 * JS aun no corrio; el color inline calculado siempre gana.
 *
 * Las capas de z-index aseguran el orden de apilado para que nada se filtre:
 *   td normal (0) < td fijo (1) < th normal (2) < th fijo (3).
 */

.fi-ta-table [data-columna-fija='left'] {
    position: sticky;
    left: var(--columna-fija-left, 0px);
}

/* Celdas de cuerpo congeladas: fallback opaco neutro (el JS pisa el color). */
.fi-ta-table tbody [data-columna-fija='left'] {
    z-index: 1;
    background-color: #ffffff;
}

.dark .fi-ta-table tbody [data-columna-fija='left'] {
    background-color: #111827;
}

/* Encabezados congelados: por encima de todas las celdas de cuerpo. */
.fi-ta-table thead [data-columna-fija='left'] {
    z-index: 3;
    background-color: #f9fafb;
}

.dark .fi-ta-table thead [data-columna-fija='left'] {
    background-color: #1f2937;
}

/* Borde y sombra que marcan el limite del bloque congelado. */
.fi-ta-table [data-columna-fija-borde='left']::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    box-shadow: 8px 0 8px -6px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.dark .fi-ta-table [data-columna-fija-borde='left']::after {
    box-shadow: 8px 0 8px -6px rgba(0, 0, 0, 0.6);
}

/*
 * Boton de fijado dentro del header de cada columna.
 *
 * Se inyecta como hermano flex DESPUES del icono de orden, dentro de la misma
 * fila horizontal del encabezado (.fi-ta-header-cell-sort-btn es flex con
 * gap-x-1). Para columnas no ordenables el JS hace flex el contenido del <th>
 * via [data-columna-fija-header] para alinear el boton a la derecha del label.
 */
.columna-fija-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    color: #9ca3af;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

/*
 * Encabezados NO ordenables (sin sort-btn): el boton de fijar se ancla
 * absolutamente sobre el borde derecho del <th>, en vez de volver el <th> un
 * contenedor flex. Hacer `display: flex` en un <th> lo saca del algoritmo de
 * columnas de la tabla (deja de ocupar su celda real), lo que apilaba dos
 * columnas no ordenables contiguas (p. ej. "Gerentes asignados" y "Jefes de
 * Obra asignados") en la misma posicion. Manteniendo el <th> como table-cell y
 * posicionando el boton en absolute se conserva el layout de la tabla. El
 * `position: relative` del <th> lo aporta la feature de columnas redimensionables;
 * aca se deja como respaldo por si esa feature no esta cargada.
 *
 * El boton se ubica a la izquierda de la manija de redimensionado (que vive en
 * right: 0 con 8px de ancho), por eso right: 0.625rem.
 *
 * IMPORTANTE: el `:not([data-columna-fija])` excluye a las columnas CONGELADAS.
 * Cuando la columna esta fijada, la regla de arriba le da `position: sticky` con
 * un `left` igual al offset acumulado. Si ademas se le aplicara `position:
 * relative` (misma especificidad, pero declarada despues), ese `relative`
 * ganaria y, combinado con el `left` del offset, desplazaria el <th> cientos de
 * pixeles a la derecha (fuera de pantalla) en vez de fijarlo -> el encabezado
 * "desaparecia". Un <th> sticky ya es contexto de posicionamiento valido para
 * anclar el boton absoluto, asi que aca solo hace falta `relative` cuando la
 * columna NO esta congelada.
 */
.fi-ta-header-cell[data-columna-fija-header]:not([data-columna-fija]) {
    position: relative;
}

.fi-ta-header-cell[data-columna-fija-header] .columna-fija-toggle {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
}

.fi-ta-header-cell:hover .columna-fija-toggle {
    opacity: 0.7;
}

.columna-fija-toggle:hover {
    opacity: 1;
    background-color: #f3f4f6;
    color: #4b5563;
}

.dark .columna-fija-toggle:hover {
    background-color: #374151;
    color: #e5e7eb;
}

/* Estado activo: el icono queda visible y resaltado con el color primario. */
.columna-fija-toggle[data-fijada='true'] {
    opacity: 1;
    color: #f59e0b;
}

.columna-fija-toggle svg {
    width: 0.875rem;
    height: 0.875rem;
}