/* Fuente común de los módulos. Sin recortar datos ni ocultar el desbordamiento. */
@media screen and (max-width: 720px) {
  table.tabla.mobile-cards,
  table.tabla.mobile-cards > tbody,
  table.tabla.mobile-cards > tfoot {
    display: block; width: 100%; min-width: 0; max-width: 100%;
  }
  table.tabla.mobile-cards > thead { display: none; }
  table.tabla.mobile-cards > tbody > tr,
  table.tabla.mobile-cards > tfoot > tr {
    display: block; width: 100%; min-width: 0; margin-bottom: .8rem;
    padding: .65rem .8rem; border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px; background: #fff;
  }
  table.tabla.mobile-cards > tbody > tr > td,
  table.tabla.mobile-cards > tfoot > tr > td {
    display: block; width: auto; min-width: 0; max-width: 100%;
    padding: .35rem 0; border: 0; text-align: left;
    white-space: normal; overflow-wrap: anywhere;
  }
  table.tabla.mobile-cards > tbody > tr > td::before {
    content: attr(data-l); display: block; margin-bottom: .1rem;
    color: var(--muted, #64748b); font-size: .75rem; font-weight: 600;
  }
  table.tabla.mobile-cards td:not([data-l])::before,
  table.tabla.mobile-cards td[data-l=""]::before,
  table.tabla.mobile-cards .mobile-cards-message > td::before { display: none; }
  table.tabla.mobile-cards .badge,
  table.tabla.mobile-cards .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  table.tabla.mobile-cards .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: .15rem .25rem .15rem 0; }
  table.tabla.mobile-cards .barra { width: 100%; min-width: 0; }
  table.tabla.mobile-cards .pedido-linea { min-width: 0; flex-wrap: wrap; }
  table.tabla.mobile-cards .pedido-linea > * { min-width: 0; max-width: 100%; }
  table.tabla.mobile-cards td.mobile-cards-actions,
  table.tabla.mobile-cards td.acciones {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem;
    padding-top: .65rem; border-top: 1px solid var(--line, #e2e8f0);
  }
  table.tabla.mobile-cards td.acciones::before { display: none; }
  table.tabla.mobile-cards td.mobile-cards-actions .btn,
  table.tabla.mobile-cards td.acciones .btn { flex: 1 1 7rem; margin: 0; text-align: center; }
  table.tabla.mobile-cards[hidden], table.tabla.mobile-cards [hidden] { display: none !important; }
}