@media (max-width: 768px) {

	/* 1. BASE */
	html,
	body,
	#slot,
	form {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	#slot {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	form {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	[id*="ejercicio"] {
		flex-grow: 1;
	}

	/* 2. HEADER TOOLBAR GLOBAL
     header.php tiene .toolbar { width: 960px } en <style> inline.
     Este CSS se carga después → !important posterior gana. */
	.toolbar {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 3. CONTENEDORES
     mpfl_sec1_to_adu.css: .wrapper { min-width:900px; width:900px !important }
     Compartido por HOMEOFFICE, EJECUTIVA_A/B, FL. */
	.wrapper,
	.wrapper-evaluacion,
	#wrapper,
	[class*="wrapper"] {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 10px !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	.contenido,
	#contenido {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	.sidebar,
	.lateral {
		width: 100% !important;
		float: none !important;
		height: auto !important;
	}

	/* 4. FIXES ESPECÍFICOS
     .op-answers { width:450px } → FL y 7FS (estilo-mhp.css compartido)
     .cuadro-mhp-1 { width:450px } → HABITOS */
	.op-answers,
	.cuadro-mhp,
	.cuadro-mhp-1 {
		width: 100%;
		max-width: 100%;
	}

	/* Modales con height fija: SOI-E, PCA, INTEGRIDAD */
	.modal-header,
	.modal-dialog {
		height: auto !important;
	}

	/* Inline styles con ancho fijo */
	*[style*="width:900"],
	*[style*="width: 900"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* 5. TABLAS HTML → stack vertical (PC, otras) */
	table {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	thead,
	tbody,
	tfoot {
		display: block;
		width: 100%;
	}

	tr {
		display: block;
		border-bottom: 1px solid #eee;
		margin-bottom: 8px;
		padding-bottom: 8px;
	}

	td,
	th {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 4px 8px !important;
		box-sizing: border-box !important;
		border: none !important;
	}

	th {
		background: #f5f5f5;
		font-weight: bold;
		font-size: .85em;
	}

	/* 6. IFRAMES — ORTOGRAFIA */
	iframe {
		max-width: 100% !important;
		width: 100% !important;
	}

	.iframe-ortografia {
		position: relative;
		padding-bottom: 62.5%;
		/* ratio 960:600 */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.iframe-ortografia iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}

	input[type="radio"],
	input[type="checkbox"] {
		min-width: 20px;
		min-height: 20px;
		margin-right: 8px;
	}

	label {
		display: flex !important;
		align-items: center;
		min-height: 44px;
		padding: 4px 0;
		cursor: pointer;
	}

	/* 8. TIPOGRAFÍA — 16px en inputs evita zoom en iOS */
	body {
		font-size: 16px;
		line-height: 1.5;
	}

	p,
	li {
		font-size: clamp(14px, 3.5vw, 18px);
		line-height: 1.6;
	}

	h1 {
		font-size: clamp(20px, 5vw, 28px);
	}

	h2 {
		font-size: clamp(18px, 4.5vw, 24px);
	}

	h3 {
		font-size: clamp(16px, 4vw, 20px);
	}

	input[type="text"],
	input[type="email"],
	input[type="number"],
	textarea,
	select {
		font-size: 16px !important;
		padding: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	video {
		max-width: 100% !important;
		height: auto !important;
		width: 100% !important;
	}

	/* Hide the landscape requirement message since we're making it work in mobile */
	div.aviso {
		display: none !important;
	}

	.container-ejercicios,
	.contenido-pca,
	.container-intro {
		display: block;
	}

	.liderazgo.container-intro	 {
		display: block !important;
	}

	.sieteFS .container-ejercicios,
	.liderazgo.container-ejercicios {
		display: block !important;
	}

	.psicometrias-footer {
		position: relative;
	}

	.bullet-progress {
		.progress-bar {
			height: 10px;
			padding: 0;

			.progress {
				height: 100%;
				background-color: var(--secondary);
			}
		}

		a {
			display: none;
		}
	}

	b {
		font-size: 14px;
	}

	span {
		font-size: 12px;
	}

	button:has(i),
	a:has(i) {
		span {
			display: none;
		}
	}

	[class*="correcto"] {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		width: 75%;
		min-width: 200px;
		z-index: 100;
	}

	.shuffle {
		display: flex;
		width: 100%;
		margin-top: 10px;
	}

	.row-cfc {
		display: block;

		.opciones-cfc {
			display: flex;
		}
	}

	.contenedor-opciones-preguntas-practica-cfc {
		width: 100%;
		margin-bottom: 20px;
	}

	.options_cfc,
	.options_cfc_2,
	.opciones-cfc {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.contenedor-opciones-practica-cfc {
		flex-grow: 1;
	}

	.ejercicio-practica {
		height: min-content;
	}

	.ejercicio-practica .d-flex {
		display: flex;
		flex-wrap: wrap;
	}

	.ejercicio-practica .d-flex>div {
		flex-grow: 1;
	}

	.ejercicio-practica .d-flex>div:first-child {
		flex: 0 0 100%;
		margin-bottom: 10px;
	}

	[class*="reactivos"] {
		display: flex;
		flex-wrap: wrap;

		div:first-child {
			max-width: 100%;
		}

		>div:last-child {
			flex: 0 0 100%;
			margin-bottom: 10px;
		}
	}

	.ejercicio-cms>.row-csm,
	.row-cms1,
	.row-cms2,
	.row-cms3 {
		display: flex;
		flex-wrap: wrap;

		div:first-child {
			max-width: 100%;
		}

		>div:last-child {
			flex: 0 0 100%;
			margin-bottom: 10px;
		}
	}

	.row-cms:has(.shuffle) {
		display: flex;
		flex-wrap: wrap;
	}

	.row-cms .shuffle {
		flex: 0 0 100%;
		margin-bottom: 10px;
	}

	#muestra {
		flex-grow: 1;
	}

	.cuadro-vi {
		width: min-content;
	}

	/* habitos */

	[class*="blank"] {
		width: 0 !important;
	}

	.contenedor-mhp-opciones {
		width: 100% !important;
		position: sticky;
		top: 61px;
		justify-content: space-evenly;
	}

	.habitos,
	.integridad,
	.emocionales,
	.sieteFS {
		.contenedor-mhp-opciones {
			display: none;
		}

		.pregunta-opciones-ocultas {
			display: flex;
			flex-direction: row;
			font-size: 10px;
			gap: 4px;
			justify-content: space-evenly;
			width: 100%;

			label {
				background-color: var(--secondary);
				color: white;
				display: flex;
				justify-content: center;
				padding: 12px;
				border-radius: 8px;
			}
		}
	}

	.habitos,
	.integridad,
	.emocionales,
	.liderazgo,
	.sieteFS {

		.mhp-opciones,
		.mhp-opciones-3 {
			max-width: 85px !important;
			text-wrap: unset !important;
			;
		}

		.shuffle {
			display: flex;
			flex-direction: column;
		}

		.op-answers {
			width: 20px;
		}

		.op-questions {
			display: flex;
			flex-wrap: wrap;

			.pregunta-single-vi,
			.pregunta-single {
				flex-grow: 1;
			}

			.pregunta-opciones {
				flex: 0 0 100%;
			}
		}
	}

	.liderazgo footer {
		margin-top: 10px;
	}


	.sieteFS {
		.contenedor-practica-fs-1 {
			height: min-content;
		}

		input {
			margin: 0 !important;
			margin-bottom: 10px !important;
		}
	}


	/* pca */
	.pca {
		.ejercicio-practica {
			margin-bottom: 10px;
		}

		.ejercicio-practica .d-flex>div:first-child {
			margin: 0;
		}

		.shuffle {
			flex-wrap: wrap;
		}

		.ejercicio-practica .d-flex>div,
		.contenedor-opciones-actividad-pca-emu {
			border-radius: 0px !important;
			flex: 0 0 calc(33.33%);
			position: unset;
			justify-content: center;
		}

		.row {
			margin-right: 0 !important;
		}

		.container-ejercicios {
			margin-right: 0 !important;
			margin-left: 0 !important;
		}

		.ejercicio-practica-pca-efi>div {
			display: flex;
			flex-direction: column;
		}

		[class*='pca-efi'] {
			width: 100%;
			position: relative;
		}

		.efi-shuffle {
			display: flex;
			flex-direction: row;
		}

		.contenedor-opciones-actividad-pca-efi {
			width: min-content;
		}

		.separador-reactivos-esu {
			margin: 0 !important;
		}

		.contenedor-opciones-actividad-esu {
			flex-grow: 1;
		}

		form {
			flex-grow: unset;
		}
	}

	.cuadro-vi,
	.indicaciones {
		width: 100% !important
	}

	.language-select-wrapper {
		display: flex !important;
		justify-content: end !important;
	}

	.language-select {
		max-width: 250px !important;
		min-width: unset !important;
		height: unset !important;
	}
}

@media (min-width: 770px) and (max-width: 1000px) {

	.mhp-opciones,
	.mhp-opciones-3 {
		max-width: 85px !important;
		text-wrap: unset !important;
		;
	}
}

/* fin @media */