@media (max-width: 768px) {
    .tabela-responsiva {
        display: block; 
        width: 100% !important;
        box-sizing: border-box;
    }
    .tabela-responsiva tbody {
        display: block;
        width: 100%;
    }
    .tabela-responsiva tbody tr {
        display: block;
        width: 100%; 
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
    }
    .tabela-responsiva tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; 
        padding: 10px 5px;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 12px;
        box-sizing: border-box;
    }
    .tabela-responsiva tbody td:last-child {
        border-bottom: 0;
    }
    .tabela-responsiva tbody td::before {
        content: attr(data-label);
        font-weight: bold;        
        margin-right: 10px;
    }
    .tabela-responsiva thead {
        display: none;
    }
    .dataTables_wrapper {
        width: 100% !important;
    }
    table.dataTable {
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    :root {
        --topo-h: 190px;
        --bar-h: 56px;
        --shell-x: 10px;
        --shell-y: 10px;
    }

    body {
        padding-top: calc(var(--topo-h) + var(--bar-h));
        padding-left: var(--shell-x);
        padding-right: var(--shell-x);
    }

    .topo {
        height: var(--topo-h);
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

        .topo .container-fluid {
            height: 100%;
        }

        .topo .row {
            display: flex;
            flex-direction: column;
            align-items: flex-start !important;
            justify-content: center;
            height: 100%;
            gap: 8px;
        }

        .topo .col-md-6 {
            width: 100%;
            max-width: 100%;
        }

        .topo img {
            max-width: 380px;
            height: auto;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
        }

    .bloco-boas-vindas {
        display: block !important;
        width: 100%;
        text-align: left !important;
        margin-top: 0 !important;
        padding-right: 0;
    }

        .bloco-boas-vindas .d-inline-block {
            display: block !important;
            width: 100%;
        }

        .bloco-boas-vindas .small {
            font-size: 12px;
            line-height: 1.2;
            opacity: .95;
        }

        .bloco-boas-vindas .fw-bold {
            font-size: 14px;
            line-height: 1.25;
            word-break: break-word;
        }

    .topbar {
        top: var(--topo-h);
        height: var(--bar-h);
        display: block;
    }

    .app-shell {
        display: block;
        margin: var(--shell-y) 0;
        box-shadow: none;
        border-radius: 0;
        gap: 0;
    }

    .sidebar {
        display: none !important;
    }

    .content {
        width: 100%;
    }

    .page-header {
        margin-top: 0 !important;
        padding: 14px;
    }

    .d-flex.justify-content-end.mb-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
    }

    .btn-despesa {
        width: 100%;
    }
}