/* Tabelas no celular (v1, 05/10/2026) — ver /assets/scripts/tabelas-celular.js.
   Em telas de até 767px cada linha da tabela vira um cartão: a primeira
   coluna é o título do cartão e as outras aparecem como "NOME   valor".
   Só vale na tela (não mexe na impressão nem no cupom do caixa). */
@media screen and (max-width: 767.98px) {
  table.ac-cards,
  table.ac-cards > tbody { display: block; width: 100% !important; min-width: 0 !important; }
  table.ac-cards > thead { display: none; }
  table.ac-cards > tbody > tr {
    display: block;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border-soft, #ececf2);
  }
  table.ac-cards > tbody > tr:last-child { border-bottom: none; }
  table.ac-cards > tbody > tr > td {
    display: block;
    position: relative;
    padding: .3rem 0 .3rem 42% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-height: 1.9rem;
  }
  table.ac-cards > tbody > tr > td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: .45rem;
    width: 40%;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft, #6b6680);
    line-height: 1.3;
  }
  table.ac-cards > tbody > tr > td[data-label=""]::before { content: none; }

  /* 1ª coluna = título do cartão */
  table.ac-cards > tbody > tr > td:first-child:not(.ac-span) {
    padding: 0 0 .35rem 0 !important;
    text-align: left !important;
    font-weight: 700;
    font-size: 1rem;
    min-height: 0;
  }
  table.ac-cards > tbody > tr > td:first-child:not(.ac-span)::before { content: none; }

  /* coluna de botões (Ações) = rodapé do cartão, alinhado à direita */
  table.ac-cards > tbody > tr > td.ac-acoes {
    padding: .55rem 0 0 0 !important;
    margin-top: .3rem;
    border-top: 1px dashed var(--border-soft, #ececf2) !important;
  }
  table.ac-cards > tbody > tr > td.ac-acoes::before { content: none; }
  table.ac-cards > tbody > tr > td.ac-acoes .d-flex { justify-content: flex-end; flex-wrap: wrap; }
  table.ac-cards > tbody > tr > td.ac-acoes .btn { margin-top: .2rem; }

  /* linha única ocupando a tabela toda (ex.: "Nenhum registro") */
  table.ac-cards > tbody > tr > td.ac-span { padding: .6rem 0 !important; text-align: center !important; }
  table.ac-cards > tbody > tr > td.ac-span::before { content: none; }

  /* sem rolagem lateral na caixa da tabela */
  .table-responsive:has(> table.ac-cards) { overflow-x: visible; }
}