/* CSS para simular una tabla con rows de bootstrap
   Motivo: simular tabla con grid
   Fecha: 2026-01
*/

.bsx-table { border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }

    /* Anula gutters de bootstrap SOLO aquí */
    .bsx-table > .row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: 0; margin-right: 0; }

        /* Separador horizontal entre filas */
        .bsx-table > .row + .row { border-top: 1px solid var(--bs-border-color); }

        /* Estilo de celdas */
        .bsx-table > .row > [class^="col"],
        .bsx-table > .row > [class*=" col"] { padding: .75rem; box-sizing: border-box; }

            /* Separador vertical entre columnas */
            .bsx-table > .row > [class^="col"] + [class^="col"],
            .bsx-table > .row > [class*=" col"] + [class*=" col"] { border-left: 1px solid var(--bs-border-color); }

@media (max-width: 576px) {
    .bsx-table > .row > [class^="col"] + [class^="col"],
    .bsx-table > .row > [class*=" col"] + [class*=" col"] { border-left: 0; border-top: 1px solid var(--bs-border-color); }
}

.bsx-table > .row:hover { background-color: rgba(0,0,0,.03); }

.bsx-table.compact > .row > [class^="col"] { padding: .4rem .5rem; }