/***
Mobile-only fixes.
Everything in this file is scoped inside @media (max-width: 767px) so it
never affects the desktop layout, which stays exactly as-is.
***/
@media (max-width: 767px) {

	/* Tables overflow the viewport on small screens: make them scroll
	   horizontally instead of squeezing/breaking the layout. Works on
	   bare <table> tags, no markup changes needed on any page. */
	table,
	.table,
	.urjc-tabla,
	.urjc-coop-tabla {
		display: block;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	/* Links: bigger tap target and no ugly mid-word breaks on long
	   URLs/emails inside paragraphs. */
	a {
		word-break: break-word;
	}

	p a {
		display: inline-block;
		padding: 2px 0;
	}

	/* Images never wider than the screen. */
	img {
		max-width: 100%;
		height: auto;
	}

	/* Embeds (e.g. the PowerBI iframe) fit the screen width but keep
	   whatever height they were given, so dashboards aren't squashed. */
	iframe,
	embed,
	object {
		max-width: 100%;
	}

	/* Tighter side padding so content isn't cramped against the edges. */
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	body {
		font-size: 14px;
	}

	/* Contratación/Convenios pages set an unscoped inline <style> that fixes
	   the sidebar/content columns to 15.6667%/83.3333% at every viewport,
	   which is what makes the sidebar menu render as a narrow squeezed
	   column with empty space next to it on mobile. Force both back to a
	   full-width stacked layout here (needs !important since the page's
	   inline <style> block comes after this stylesheet in the DOM and would
	   otherwise win on specificity ties). */
	.urjc-datagrid-row > .col-md-3,
	.urjc-datagrid-row > .col-md-9,
	.urjc-datagrid-row-coop > .col-md-3,
	.urjc-datagrid-row-coop > .col-md-9,
	.urjc-resultados-row > .col-md-3,
	.urjc-resultados-row > .col-md-9 {
		width: 100% !important;
		float: none !important;
	}

	/* Bootstrap tabs/pills (.nav-tabs / .nav-pills) only float left with no
	   mobile handling anywhere in the theme, so long labels ("Contratos
	   Basados y Específicos") get cramped together. Stack them as a full
	   width list instead. */
	.nav-tabs > li,
	.nav-pills > li {
		float: none !important;
		width: 100%;
	}

	.nav-tabs > li > a,
	.nav-pills > li > a {
		margin-right: 0;
		text-align: left;
	}

	/* Homepage tile grid (Cifras/Resultados/Compromiso...): each tile has an
	   inline style="display:inline-block" (written by the mixitup filter
	   plugin) and no col-xs-12, so at mobile widths it shrinks to its
	   content instead of stacking full width - that's the narrow image +
	   big empty colored gap seen on phones. The overlay panel (.mix-details)
	   is also hover-only, which doesn't work on touch, so force it to show
	   permanently below the image instead. !important is required to beat
	   the plugin's inline style. */
	.mix-grid .mix {
		display: block !important;
		float: none !important;
		width: 100% !important;
		opacity: 1 !important;
	}

	.mix-grid .mix .mix-details {
		position: static;
		bottom: auto;
		height: auto;
		padding: 15px 0;
	}

	.mix-grid .mix .mix-details h4 {
		margin-top: 0;
	}

	/* "Fundación Haz" award badge above the footer: both rows use the
	   legacy align="right" attribute plus a hardcoded 50px right padding,
	   which on a narrow screen reads as a huge empty gap next to a
	   disconnected logo/text. Center it as one compact block instead. */
	.footer-award {
		text-align: center;
		padding: 10px 15px;
	}

	.footer-award div[align="right"] {
		text-align: center !important;
		padding: 0 !important;
	}

	.footer-award img {
		display: block;
		padding: 0 !important;
		margin: 0 auto 8px;
	}
}