/* =============================================================
   ResponsiveTables.css — regla global reutilizable para listados
   del sistema:
     1) .wk-table-responsive: convierte cualquier <table> en cards
        en móvil (técnica data-label), sin ocultar columnas.
     2) .wk-infinite-sentinel / .wk-infinite-loading: soporte visual
        para scroll infinito (ver wwwroot/js/infiniteScroll.js).
   (Los filtros sticky se probaron y se quitaron: tapaban la pantalla
   y no se adaptaban bien al hacer scroll — 2026-08-02.)
   ============================================================= */

@media (max-width: 640px) {
    .wk-table-responsive thead { display: none; }

    .wk-table-responsive,
    .wk-table-responsive tbody,
    .wk-table-responsive tr,
    .wk-table-responsive td {
        display: block;
        width: 100%;
    }

    .wk-table-responsive tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--wk-border-2, #ece7d8);
        border-radius: 14px;
        background: var(--wk-surface, #fff);
    }

    .wk-table-responsive td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 2px;
        border: none;
        text-align: right;
        white-space: normal;
    }

    .wk-table-responsive td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 11.5px;
        color: var(--wk-text-3, #8a8577);
        text-align: left;
        flex-shrink: 0;
    }

    /* Celdas realmente vacías (spacers de layout, sin botón ni texto):
       se ocultan para no dejar renglones "· " en blanco dentro de la card.
       Las columnas de acción SÍ deben llevar data-label (ej. "Acciones")
       para seguir siendo usables — no se ocultan. */
    .wk-table-responsive td:empty {
        display: none;
    }

    .dark .wk-table-responsive tr { background: rgba(28,28,28,.6); }
}

/* Scroll infinito: centinela invisible + indicador de carga */
.wk-infinite-sentinel { height: 1px; }
.wk-infinite-loading {
    display: flex;
    justify-content: center;
    padding: 16px;
    color: var(--wk-text-3, #8a8577);
    font-size: 13px;
}