/* ============================================================
   cards-mobile — cards de lista no mobile (padrão do portal)
   Portal do Beneficiário — Blue Med Saúde

   Telas que no DESKTOP são tabela e no MOBILE viram cards
   dedicados (renderizados pelo JS), em vez do flip genérico
   de tabela. Padrão validado primeiro em /boletos.

   ── Estrutura (markup gerado pelo JS) ──
     <div id="cardsXxxMobile" class="d-md-none cards-mobile"></div>
       └ .card-mobile
           ├ .card-mobile-head   (título + badge/status à direita)
           │    └ .card-mobile-titulo  (texto/ícone identificador)
           ├ .card-mobile-valor  (valor "herói" — opcional)
           ├ .card-mobile-linhas (rótulo:valor compactos)
           │    └ .cm-linha > .cm-rotulo + .cm-valor
           └ .card-mobile-acoes  (botão de ação full-width)

   ── Na view ──
     - O .card do Bootstrap que envolve a tabela recebe
       `cards-mobile-flush` (dissolve o card no mobile — regra em
       tabela-cards-mobile.css), pra os cards ficarem soltos no fundo.
     - A .table-responsive recebe `d-none d-md-block` (tabela só no desktop).
     - O container dos cards recebe `d-md-none cards-mobile`.

   Os elementos ficam escondidos no desktop pelo `.d-md-none` do
   container — por isso estas regras não precisam de @media.
   Badges/ícones de status são por-tela (cada tela tem sua paleta).
   ============================================================ */

.cards-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.card-mobile {
  background-color: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.card-mobile-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.card-mobile-valor {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.1rem 0 0.85rem;
}

.card-mobile-linhas {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cm-linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.cm-rotulo {
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.cm-valor {
  font-weight: 500;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Linha cujo rótulo é texto longo (ex.: nome de pessoa): o rótulo pode
   encolher e quebrar, e o valor curto (ex.: moeda) fica numa linha só.
   Sem isto, .cm-rotulo (flex-shrink:0) estoura o card no mobile. */
.cm-linha--texto .cm-rotulo {
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cm-linha--texto .cm-valor {
  flex-shrink: 0;
  white-space: nowrap;
}

.card-mobile-acoes {
  margin-top: 0.9rem;
}