/* ============================================================
   tabela-cards-mobile — componente compartilhado
   Portal do Beneficiário — Blue Med Saúde

   Converte QUALQUER tabela em cards empilhados no mobile,
   eliminando o scroll horizontal que captura o swipe vertical
   (sensação de "a tela não rola pra baixo").

   ── Uso (opt-in) ──
   1. No wrapper da tabela:
        <div class="table-responsive tabela-cards-mobile"> … </div>
   2. Em cada <td> de DADOS, adicione o rótulo da coluna:
        <td data-label="Vencimento">12/05/2026</td>
   3. Células só-ícone / checkbox / redundantes no card:
        <td class="celula-oculta-mobile">…</td>   (somem no mobile)

   Células sem data-label (ex.: estado vazio com colspan) seguem
   como bloco centralizado, sem virar linha "rótulo : valor".

   Escopado com combinadores diretos (> table > tbody > tr > td)
   para não vazar em tabelas aninhadas.
   ============================================================ */

@media (max-width: 767.98px) {
  /* desarma o scroller horizontal herdado do .table-responsive global */
  .tabela-cards-mobile {
    overflow-x: visible;
  }

  /* cabeçalho some — cada célula carrega seu próprio rótulo */
  .tabela-cards-mobile > table > thead {
    display: none;
  }

  /* tabela, corpo, linhas e células viram blocos */
  .tabela-cards-mobile > table,
  .tabela-cards-mobile > table > tbody,
  .tabela-cards-mobile > table > tbody > tr,
  .tabela-cards-mobile > table > tbody > tr > td {
    display: block;
    width: 100%;
  }

  /* cada linha vira um card */
  .tabela-cards-mobile > table > tbody > tr {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0.9rem;
    background-color: var(--bs-card-bg, #fff);
  }

  /* primeira linha não cola no topo do card-body (que costuma ter p-0) */
  .tabela-cards-mobile > table > tbody > tr:first-child {
    margin-top: 0.75rem;
  }

  /* Utilitário: dissolve no mobile o .card do Bootstrap que envolve a
     tabela, pra cada linha-card ficar como bloco solto no fundo da página
     (evita o efeito "card-dentro-de-card"). Aplicar a classe no .card
     que contém a .tabela-cards-mobile. */
  .card.cards-mobile-flush {
    border: 0;
    box-shadow: none;
    background-color: transparent;
  }
  .card.cards-mobile-flush > .card-body {
    padding: 0;
  }
  .card.cards-mobile-flush > .card-footer {
    background-color: transparent;
    border-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* célula com rótulo: linha "rótulo : valor" */
  .tabela-cards-mobile > table > tbody > tr > td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    white-space: normal;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
  }

  .tabela-cards-mobile > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    margin-right: auto;
    text-align: left;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
  }

  /* rótulo explicitamente vazio não reserva espaço */
  .tabela-cards-mobile > table > tbody > tr > td[data-label=""]::before {
    content: none;
  }

  /* última célula visível do card sem borda inferior */
  .tabela-cards-mobile > table > tbody > tr > td:last-child {
    border-bottom: 0;
  }

  /* utilitário: esconde a célula no card (só-ícone, checkbox, redundante) */
  .tabela-cards-mobile > table > tbody > tr > td.celula-oculta-mobile {
    display: none;
  }

  /* estado vazio (td com colspan) ocupa o card inteiro, centralizado */
  .tabela-cards-mobile > table > tbody > tr > td[colspan] {
    text-align: center;
  }
}