/* Tablas del contenido en móvil (functions/tablas-responsive.php). Escritorio no cambia. */

@media (max-width: 767px) {

	/* Respaldo: sin <thead> o con colspan, la tabla se desplaza dentro de su caja, no la página. */
	table.sg-tabla-scroll { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 16px; line-height: 1.4; }

	/* Tarjetas */
	table.sg-tabla { display: block; width: 100%; max-width: 100%; border: 0; font-size: 16px; line-height: 1.4; }
	table.sg-tabla thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; display: block; }
	table.sg-tabla tbody { display: block; }
	table.sg-tabla tr { display: block; margin: 0 0 12px; padding: 4px 12px; border: 1px solid #dfe6ea; border-radius: 12px; background: #fff; }
	table.sg-tabla tbody tr:nth-of-type(n) { background: #fff; }

	table.sg-tabla th,
	table.sg-tabla td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: auto !important; padding: 8px 0; border: 0; border-bottom: 1px solid #eef2f4; text-align: right !important; font-size: 16px; line-height: 1.4; color: inherit; background: transparent; text-transform: none; overflow-wrap: anywhere; }
	table.sg-tabla tr > :last-child { border-bottom: 0; }

	/* Primera celda: título de la tarjeta, sin etiqueta */
	table.sg-tabla tr > :first-child { display: block; text-align: left !important; font-weight: 700; color: #26323b; }
	table.sg-tabla tr > :first-child::before { content: none; }

	/* Demás celdas: etiqueta a la izquierda, valor a la derecha */
	table.sg-tabla tr > :not(:first-child)::before { content: attr(data-label); display: block; float: none; margin: 0; flex: 0 0 auto; max-width: 50%; font-weight: 700; color: #5d6b75; text-align: left; }
}