/* ==========================================================================
   SimpleTable - componente propio de tablas (sustituye a DataTables)
   Paginación arriba, cabecera fija, búsqueda, cuerpo con scroll vertical.
   ========================================================================== */

.st-wrapper {
    width: 100%;
}

.st-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.st-toolbar-left,
.st-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.st-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.st-search-wrap {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.st-search {
    width: auto;
    min-width: 200px;
}

.st-pagination-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: .5rem;
}

.st-pagination {
    margin: 0;
}

.st-scroll {
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
}

.st-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.st-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #556ee6;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.st-table thead th.st-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.st-table thead th .st-sort-icon {
    margin-left: .25rem;
    opacity: .6;
    font-size: .75rem;
}

.st-table thead th.st-sort-active .st-sort-icon {
    opacity: 1;
}

.st-table tfoot th,
.st-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: #f8f9fa;
    font-weight: 600;
}

.st-group-row > td {
    cursor: pointer;
    background-color: #f1f3f9;
    font-weight: 600;
}

.st-group-row:hover > td {
    background-color: #e7eaf5;
}

.st-group-caret {
    display: inline-block;
    width: 1rem;
    transition: transform .15s ease-in-out;
}

.st-group-row.st-group-collapsed .st-group-caret {
    transform: rotate(-90deg);
}

.st-row-hidden {
    display: none !important;
}

.st-empty-row td {
    text-align: center;
    color: #74788d;
    padding: 1.5rem 0;
}

.st-loading-row td {
    text-align: center;
    color: #74788d;
    padding: 1.5rem 0;
}

/* Recarga ajax: se mantienen cabecera y filas actuales atenuadas hasta recibir los datos nuevos */
.st-table tbody.st-reloading {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

.st-table tbody tr[data-edit-href],
.st-table tbody tr[data-edit-id] {
    cursor: pointer;
}

.st-table tbody tr[data-edit-href]:hover,
.st-table tbody tr[data-edit-id]:hover {
    background-color: rgba(0, 0, 0, .035);
}

/* --------------------------------------------------------------------------
   Vista en cards (móviles / tablets): cada fila es un card ajustado al ancho
   y cada celda muestra el título de su columna (data-label) a la izquierda.
   Se desactiva por tabla con la opción responsive: false.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Sin altura máxima (420px o 'fill', fijada inline por JS): las cards usan el scroll de la página */
    .st-scroll-responsive {
        max-height: none !important;
    }

    .st-responsive,
    .st-responsive tbody,
    .st-responsive tfoot,
    .st-responsive tr,
    .st-responsive td,
    .st-responsive tfoot th {
        display: block;
        width: 100%;
    }

    .st-responsive thead {
        display: none;
    }

    .st-responsive.table-bordered {
        border: 0;
    }

    .st-responsive tbody tr,
    .st-responsive tfoot tr {
        margin-bottom: .5rem;
        padding: .5rem .75rem;
        border: 1px solid #e9ecef;
        border-radius: .375rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .st-responsive tbody td,
    .st-responsive tfoot th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .3rem 0;
        border: 0;
        border-bottom: 1px dashed #eff2f7;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .st-responsive tbody td:last-child,
    .st-responsive tfoot th:last-child {
        border-bottom: 0;
    }

    .st-responsive tbody td::before,
    .st-responsive tfoot th::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 50%;
        font-weight: 600;
        color: #74788d;
        text-align: left;
    }

    /* Celdas sin título (iconos, acciones...): contenido alineado a la izquierda */
    .st-responsive tbody td[data-label=""],
    .st-responsive tfoot th[data-label=""] {
        justify-content: flex-start;
        text-align: left;
    }

    .st-responsive tbody td[data-label=""]::before,
    .st-responsive tfoot th[data-label=""]::before {
        content: none;
    }

    .st-responsive tfoot tr {
        background-color: #f8f9fa;
    }

    /* Filas especiales: agrupación, vacío y cargando ocupan el card completo */
    .st-responsive tbody tr.st-group-row,
    .st-responsive tbody tr.st-empty-row,
    .st-responsive tbody tr.st-loading-row {
        padding: 0;
        box-shadow: none;
    }

    .st-responsive tbody tr.st-group-row > td,
    .st-responsive tbody tr.st-empty-row > td,
    .st-responsive tbody tr.st-loading-row > td {
        display: block;
        padding: .6rem .75rem;
        border-bottom: 0;
        border-radius: .375rem;
    }

    .st-responsive tbody tr.st-empty-row > td,
    .st-responsive tbody tr.st-loading-row > td {
        text-align: center;
    }

    .st-responsive tbody tr.st-group-row > td {
        text-align: left;
    }

    .st-responsive tbody tr.st-group-row > td::before,
    .st-responsive tbody tr.st-empty-row > td::before,
    .st-responsive tbody tr.st-loading-row > td::before {
        content: none;
    }
}