/* mobile-adaptativo 1 — fonte: Master Ops/shared/tools/mobile-adaptativo/
   As cores ajustam-se com --mob-borda e --mob-rotulo. */
@media (max-width: 700px) {
  /* <table class="tabela-cartoes"> com <td data-label="Coluna">: cada linha passa a cartão. */
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr { display: block; width: 100%; }
  .tabela-cartoes tr { padding: 10px 12px; border-top: 1px solid var(--mob-borda, #2d3748); }
  .tabela-cartoes td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 3px 0 !important; text-align: right; max-width: none !important; overflow-wrap: anywhere;
  }
  .tabela-cartoes td[data-label]::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    color: var(--mob-rotulo, #6b7280); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
  }
  .tabela-cartoes td > * { min-width: 0; }

  /* Só para ecrãs grandes. */
  .so-pc { display: none !important; }

  /* Elementos que costumam empurrar a página para fora do ecrã. */
  img, video, input[type="file"] { max-width: 100%; }
}