/* Estilos responsivos para DataTables - Diseño de Cards en Móviles */
@media screen and (max-width: 767px) {
    /* Ocultar thead en móvil */
    .datatable-responsive thead {
        display: none;
    }

    /* Hacer que cada fila sea un card */
    .datatable-responsive tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.375rem;
        background: var(--bs-body-bg, white);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 0.5rem;
    }

    /* Cada celda se convierte en un bloque vertical */
    .datatable-responsive tbody td {
        display: block;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid
            var(--bs-border-color-translucent, rgba(0, 0, 0, 0.075));
        text-align: left;
        color: var(--bs-body-color, #212529);
    }

    /* Última celda (acciones) sin borde inferior */
    .datatable-responsive tbody td:last-child {
        border-bottom: none;
        padding-top: 1rem;
        text-align: right;
    }

    /* Label arriba del valor (diseño vertical) */
    .datatable-responsive tbody td:before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--bs-body-color, #212529);
        margin-bottom: 0.25rem;
    }

    /* El valor debajo del label */
    .datatable-responsive tbody td {
        font-size: 0.9rem;
    }

    /* La celda de acciones no necesita label */
    .datatable-responsive tbody td:last-child:before {
        content: none;
    }

    /* Ajustar el wrapper de DataTables en móvil */
    .dataTables_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .dataTables_wrapper .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }
}