MediaWiki:Common.css: Difference between revisions

Latest revision as of 15:00, 29 January 2026

/* Responsive: Related articles - título arriba, contenido abajo */
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
 	
	/* Solución tipo table-responsive de Bootstrap - scroll solo en las tablas, no en el contenedor */
	/* El contenedor padre NO tiene scroll, solo las tablas individuales */
	.mw-parser-output,
	.mw-content-text {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: visible !important;
	}
	
	/* Las tablas tienen scroll horizontal individual - similar a .table-responsive de Bootstrap */
	/* Cada tabla es un contenedor con scroll independiente */
	/* Usar flexbox para reordenar caption primero, pero mantener estructura para collapse */
	.mw-parser-output table.wikitable,
	.mw-content-text table.wikitable,
	.mw-parser-output table,
	.mw-content-text table {
		display: flex !important;
		flex-direction: column !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		width: 100% !important;
		max-width: 100% !important;
		table-layout: auto !important;
		margin: 1em 0 !important;
		align-items: flex-start !important;
	}
	
	/* Caption debe aparecer primero usando order */
	.mw-parser-output table.wikitable caption,
	.mw-content-text table.wikitable caption,
	.mw-parser-output table caption,
	.mw-content-text table caption {
		display: block !important;
		text-align: left !important;
		width: 100% !important;
		order: -1 !important;
		margin-bottom: 0.5em !important;
		flex-shrink: 0 !important;
	}
	
	/* El tbody/thead mantiene la estructura de tabla con ancho fijo para activar scroll */
	/* Mantener como table para que el JavaScript de collapse funcione */
	/* Usar min-width para activar scroll horizontal en el contenedor flex */
	.mw-parser-output table.wikitable tbody,
	.mw-content-text table.wikitable tbody,
	.mw-parser-output table tbody,
	.mw-content-text table tbody,
	.mw-parser-output table.wikitable thead,
	.mw-content-text table.wikitable thead,
	.mw-parser-output table thead,
	.mw-content-text table thead {
		display: table !important;
		width: 100% !important;
		min-width: 2000px !important;
		order: 1 !important;
		flex-shrink: 0 !important;
		align-self: stretch !important;
	}
	
	/* Restaurar estructura de filas y celdas */
	.mw-parser-output table.wikitable tr,
	.mw-content-text table.wikitable tr,
	.mw-parser-output table tr,
	.mw-content-text table tr {
		display: table-row !important;
	}
	
	/* Sobrescribir estilos inline de width en las tablas */
	.mw-parser-output table.wikitable[style*="width"],
	.mw-content-text table.wikitable[style*="width"],
	.mw-parser-output table[style*="width"],
	.mw-content-text table[style*="width"] {
		display: flex !important;
		flex-direction: column !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Las celdas tienen anchos razonables y permiten que el texto se ajuste normalmente */
	/* Sin max-width excesivo para evitar celdas de 12000px */
	.mw-parser-output table.wikitable th,
	.mw-content-text table.wikitable th,
	.mw-parser-output table.wikitable td,
	.mw-content-text table.wikitable td,
	.mw-parser-output table th,
	.mw-content-text table th,
	.mw-parser-output table td,
	.mw-content-text table td {
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		width: revert-layer !important;
		max-width: 100% !important;
	}
	
	/* Excluir tablas dentro de .related-articles-box - revertir estilos */
	.related-articles-box table {
		display: table !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		width: auto !important;
		min-width: auto !important;
		max-width: 100% !important;
	}
	
	.related-articles-box table tbody,
	.related-articles-box table thead {
		display: table-row-group !important;
		min-width: auto !important;
	}
	
	.related-articles-box table[style*="width"] {
		display: table !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		width: auto !important;
		min-width: auto !important;
		max-width: 100% !important;
	}
	
	.related-articles-box table th,
	.related-articles-box table td {
		width: auto !important;
		max-width: 100% !important;
	}
	
  }