/* ─────────────────────────────────────────────────────────────────────────
   app-responsivo.css — padrão de responsividade mobile do osfortoapp

   A peça central é `.tabela-cards`: abaixo de 768px a tabela vira uma lista
   de cards, um por linha, com o nome da coluna virando legenda de cada valor.
   No desktop continua tabela normal.

   Uso:
       <table class="table table-sm tabela-cards"> ... </table>

   Cada <td> precisa do atributo `data-rotulo` com o nome da coluna. Quem monta
   o HTML no controller já emite o atributo; para as telas que continuam em
   SQLFORM.grid, o `aplicaRotulos()` do layout.html preenche sozinho lendo o
   <thead> da própria tabela — ou seja, basta acrescentar a classe.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

    /* O cabeçalho vira a legenda de cada célula, então some como linha */
    .tabela-cards thead {
        display: none;
    }

    .tabela-cards,
    .tabela-cards tbody,
    .tabela-cards tr,
    .tabela-cards td {
        display: block;
        width: 100%;
    }

    /* Cada linha da tabela é um card */
    .tabela-cards tr {
        border: 1px solid #dee2e6;
        border-radius: .35rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .tabela-cards tr:last-child {
        margin-bottom: 0;
    }

    /* "RÓTULO .................. valor" */
    .tabela-cards td {
        border: 0;
        padding: .35rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
    }

    .tabela-cards td + td {
        border-top: 1px solid #f1f3f5;
    }

    .tabela-cards td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        text-align: left;
        font-weight: 600;
        font-size: .78rem;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: #6c757d;
    }

    /* Célula sem rótulo (ações, por exemplo) ocupa a largura toda */
    .tabela-cards td[data-rotulo=""]::before,
    .tabela-cards td:not([data-rotulo])::before {
        content: none;
    }

    .tabela-cards td[data-rotulo=""],
    .tabela-cards td:not([data-rotulo]) {
        justify-content: flex-end;
    }

    /* O botão de ação fica confortável para o dedo */
    .tabela-cards td .btn {
        width: 100%;
        margin-top: .25rem;
    }

    /* Sem rolagem horizontal: o wrapper do Bootstrap não é mais necessário */
    .tabela-cards-wrap.table-responsive {
        overflow-x: visible;
    }

    /* Paginação: centralizada e sem estourar em telas estreitas */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination .page-link {
        padding: .35rem .6rem;
        font-size: .85rem;
    }
}

/* ── Utilitários gerais ─────────────────────────────────────────────────── */

/* Cabeçalho de tela: título e busca lado a lado no desktop, empilhados no mobile */
.tela-header {
    gap: .75rem;
}

@media (max-width: 767.98px) {
    .tela-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    .tela-header .card-title {
        margin-bottom: .25rem;
    }
}