/* Estilos para tablas interactivas */

/*
 * Listados con scroll infinito: el contenedor es quien desplaza las filas y
 * cada celda de cabecera permanece visible. Se aplica el sticky a los th (no
 * al thead) para conservar el ancho calculado de cada columna en navegadores.
 */
.tabla-scroll-infinito {
    position: relative;
    max-height: 600px;
    overflow: auto;
}

.tabla-scroll-infinito > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-table-bg);
    background-clip: padding-box;
    box-shadow: inset 0 -1px 0 var(--bs-table-border-color);
}

/*
 * Filas que llevan a su ficha: cursor de mano y hover de fila completa (guía, §6.1).
 * La clase va en la tabla; tabla-navegable.js hace que un clic en la fila siga el
 * enlace .fila-enlace de la propia fila. Una tabla que se lista pero no se navega
 * no lleva la clase y solo hereda la cabecera fija.
 *
 * En IA Suite CLM estas reglas nombraban cada listado por su id. Aquí
 * no: un componente común no conoce pantallas (guía, §13.1).
 */
.tabla-navegable > tbody > tr {
    cursor: pointer;
}

.tabla-navegable > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(var(--em-primario-rgb), 0.08);
}

/* La fila de "no hay resultados" no es clicable ni debe parecerlo */
.tabla-navegable > tbody > tr.fila-vacia {
    cursor: default;
}

.tabla-navegable > tbody > tr.fila-vacia:hover > * {
    --bs-table-bg-state: transparent;
}

/* Chips de filtros aplicados sobre un listado */
.filtros-chips .chip-filtro {
    font-weight: 500;
}

/* El aspa es un botón (se alcanza con teclado) con el aspecto del texto del chip. */
.filtros-chips .chip-eliminar {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
    opacity: 0.75;
    text-decoration: none;
}

.filtros-chips .chip-eliminar:hover {
    opacity: 1;
}