section.categoria,
section~.modal[id*='ntento'] {
	--color-recurso1: #f36c3a;
	--color-recurso2: #11c1a9;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.65rem;
	font-size: 20px;
	margin: 3em auto;
	text-align: left;
	color: #000;

	box-shadow: 0 0 0 10px #fff, 0 15px 50px;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

section.categoria {
	background-color: #ffffff;
}

section~.modal[id*='ntento'] {
	margin: 0 auto;
}

section.categoria .encabezado {
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
}

section.categoria .encabezado .titulo {
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

section.categoria .encabezado .titulo h2 {
	color: #000;
	text-align: left;
	margin-top: 1em;
	margin-right: 1em;
}

section.categoria .encabezado .titulo .info {
	background-color: var(--azul);
	color: #fff;
	text-align: right;
	padding: 10px 20px;
	margin-top: 20px;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
	position: relative;
}

section.categoria .encabezado .titulo .info i.fa-plus,
section.categoria .encabezado .titulo .info i.fa-minus {
	position: absolute;
	bottom: 0.1em;
	right: 0.1em;
	font-size: 0.9em;
}

section.categoria .encabezado .instrucciones {
	padding: 0;
	font-size: 1.1em;
	line-height: 1.8em;
	text-align: left;
}

section.categoria .encabezado .estilosinstruccion {
	background-color: var(--azul);
	color: #fff;
	padding: 5px 10px;
	margin-top: 3px;
}

section.categoria .reactivosCO {
	margin-left: 0;
	margin-right: 0;
}

section.categoria .reactivosCO #encabezadoRL {
	position: -webkit-sticky;
	position: sticky;
	top: -2px;
	z-index: 100;
	line-height: 1em;
	text-align: center;
	color: #fff;
	background: #969696;
	padding: 15px 0;
}

section.categoria .reactivosCO #encabezadoRL :not(div:first-of-type) {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.categoria .reactivosCO #contenedorCO {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
	gap: 1rem;
}

section.categoria .reactivosCO #contenedorCO [id^=lista] {
	outline: 1px solid #444444;
	padding: 1rem;
	width: min(400px, 100%);
	background-color: #f0efef;
}

section.categoria .reactivosCO #contenedorCO ul {
	border: 1px solid #eee;
	width: 100%;
	min-height: 20px;
	list-style-type: none;
	margin: 0;
	padding: 5px 0 0 0;
	float: left;
}

section.categoria .reactivosCO #contenedorCO ul li {
	position: relative;
	margin: 0 5px 15px 5px;
	background: #fefefe;
	outline: 1px solid #444444;
	border: none;
	padding: 0.5rem;
	color: #444444;
	font-weight: 300;
}

section.categoria .reactivosCO #contenedorCO ul li.ui-sortable-placeholder.posicion {
	transform: translateY(-50%);
	outline-style: none;
}

section.categoria .reactivosCO #contenedorCO ul li.ui-sortable-placeholder:before {
	background-color: transparent;
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	margin-top: -5px;
	left: -1em;
	top: -4px;
	border: 1em solid transparent;
	border-left-color: red;
}

section.categoria .reactivosCO #contenedorCO ul li.ui-sortable-helper {
	transform: scale(0.5);
	transition: transform 0.2s ease-in-out;
}

section.categoria .reactivosCO #contenedorCO ul.ui-sortable-disabled {
	opacity: 0.75;
}

section.categoria .reactivosCO #contenedorCO ul li.listaOK {
	outline: 2px solid var(--color-OK);
}

section.categoria .reactivosCO #contenedorCO ul li.listanoOK {
	outline: 2px solid var(--color-noOK);
}

section.categoria .reactivosCO #contenedorCO ul li.ordenOK {
	outline: 2px dotted var(--color-OK);
}

section.categoria .reactivosCO #contenedorCO ul li.ordennoOK {
	outline: 2px dotted var(--color-noOK);
}

section.categoria .botones {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-top: 3rem;
	padding-bottom: 1em;
}

section.categoria .botones .btn,
section~.modal[id*='ntento'] .btn {
	border-radius: calc(0.5 * 48px);
	min-width: 4em;
	opacity: 1;
	transition: 0.5s;
}

section.categoria .botones .btn:hover,
section~.modal[id*='ntento'] .btn:hover {
	opacity: 0.7;
}

section.categoria.tipo1 .botones .btn {
	background-color: var(--color-recurso1);
	border-color: var(--color-recurso1);
}

section.categoria.tipo2 .botones .btn {
	background-color: var(--color-recurso2);
	border-color: var(--color-recurso2);
}

section.categoria .ir-arriba {
	display: none;
	padding: 15px;
	background: #63c9e0;
	font-size: 2em;
	color: #fff;
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
	border-radius: 50%;
	z-index: 10000;
}

/* ---------------------- EFECTO PULSO PARA PALOMITAS Y TACHES ----------------- */
section.categoria .reactivosCO #contenedorCO ul li .pulso {
	width: var(--tam-sonar);
	height: var(--tam-sonar);
	position: absolute;
	margin: auto;
	border-radius: 50%;
	font-size: calc(0.7 * var(--tam-sonar));
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 1;
	top: 20%;
	left: -0.25em;
	left: -1em;
	transform: translateY(-50%);
	/* cursor: help; */
}

section.categoria .reactivosCO #contenedorCO ul li .pulso:before,
section.categoria .reactivosCO #contenedorCO ul li .pulso:after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	z-index: -1;
	opacity: 0.7;
}

section.categoria .reactivosCO #contenedorCO ul li .pulso:before {
	-webkit-animation: pulso 1s ease-out infinite;
	animation: pulso 1s ease-out infinite;
}

section.categoria .reactivosCO #contenedorCO ul li .pulso:after {
	-webkit-animation: pulso 1s 0.5s ease-out infinite;
	animation: pulso 1s 0.5s ease-out infinite;
}

section.categoria .reactivosCO #contenedorCO ul li .pulso i {
	font-size: var(--tam-sonar);
}

@-webkit-keyframes pulso {
	100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

@keyframes pulso {
	100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

section.categoria .reactivosCO #contenedorCO ul li.ui-state-disabled {
	outline: 1px solid #cecbcb;
	opacity: 0.75;
}

section.categoria .reactivosCO #contenedorCO ul li.ui-state-disabled>.pulso {
	display: none !important;
}

section.categoria .reactivosCO #contenedorCO ul li .pulso.OK {
	color: var(--color-OK);
}

section.categoria .reactivosCO #contenedorCO ul li .pulso.OK:before,
section.categoria .reactivosCO #contenedorCO ul li .pulso.OK:after {
	background: var(--color-OK);
}

section.categoria .reactivosCO #contenedorCO ul li .pulso.noOK {
	color: var(--color-noOK);
}

section.categoria .reactivosCO #contenedorCO ul li .pulso.noOK:before,
section.categoria .reactivosCO #contenedorCO ul li .pulso.noOK:after {
	background: var(--color-noOK);
}

section.categoria .reactivosCO #contenedorCO ul li .pulso.comen {
	color: var(--color-comen);
}

section.categoria .reactivosCO #contenedorCO ul li .pulso.comen:before,
section.categoria .reactivosCO #contenedorCO ul li .pulso.comen:after {
	background: var(--color-comen);
}

section.categoria .reactivosCO #contenedorCO .imagenPie,
section.categoria .reactivosCO #contenedorCO ul .imagenPie {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
	-webkit-margin-before: 0;
	margin-block-start: 0;
	-webkit-margin-after: 0;
	margin-block-end: 0;
	-webkit-margin-start: 0;
	margin-inline-start: 0;
	-webkit-margin-end: 0;
	margin-inline-end: 0;
}

section.categoria .reactivosCO #contenedorCO .imagenPie img,
section.categoria .reactivosCO #contenedorCO ul .imagenPie img {
	width: min(600px, 100%);
}

section.categoria .reactivosCO #contenedorCO .imagenPie img+figcaption,
section.categoria .reactivosCO #contenedorCO ul .objetoMM figcaption,
section.categoria .reactivosCO #contenedorCO ul .imagenPie img+figcaption,
section.categoria .reactivosCO #contenedorCO ul video+figcaption {
	width: 90%;
	font-size: 0.75rem;
	text-align: center;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	overflow-wrap: anywhere;
	line-height: 1rem;
}

section.categoria .reactivosCO #contenedorCO ul .opcion {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

section.categoria .reactivosCO #contenedorCO ul .objetoMM {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

section.categoria .reactivosCO #contenedorCO ul [id^=ctrlDeslizante].rangos {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 50%;
	height: 0.3em;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 1em;
	visibility: visible;
}

section.categoria .reactivosCO #contenedorCO ul [id^=ctrlDeslizante].rangos::-webkit-slider-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: white;
	box-shadow: 0 0 0 3px white, 0 0 0 6px #cecbcb;
	width: 0.5em;
	height: 0.5em;
}

section.categoria .reactivosCO #contenedorCO ul [id^=ctrlDeslizante].rangos:not(.activo) {
	background: #cecbcb;
}

section.categoria .reactivosCO #contenedorCO ul [id^=ctrlDeslizante].rangos:not(.activo)::-webkit-slider-thumb {
	background: #cecbcb;
	border-radius: 50%;
	/* cursor: pointer; */
}

section.categoria .reactivosCO #contenedorCO ul [id^=ctrlDeslizante].rangos.activo {
	background: var(--azul);
	transition: opacity 0.2s;
}

section.categoria .reactivosCO #contenedorCO ul [id^=ctrlDeslizante].rangos.activo::-webkit-slider-thumb {
	background: white;
	box-shadow: 0 0 0 3px var(--azul), 0 0 0 6px white;
	border-radius: 50%;
	cursor: pointer;
}

section.categoria .reactivosCO #contenedorCO ul :not(.controlesVid)>.controles {
	padding: 20px;
}

section.categoria .reactivosCO .objetoMM audio~span,
section.categoria .reactivosCO .objetoMM .controlesVid span {
	cursor: pointer;
}

section.categoria .reactivosCO #contenedorCO ul .controles:hover {
	opacity: 0.75;
}

section.categoria .reactivosCO #contenedorCO ul .objetoMM video {
	width: 100%;
}

section.categoria .reactivosCO #contenedorCO ul .objetoMM .controlesVid {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	gap: 1em;
	width: 100%;
}

section.categoria .reactivosCO #contenedorCO [id^=sortable].ui-sortable-disabled .controles:hover {
	opacity: 1;
}

section.categoria h3 {
	display: flex;
	align-items: center;
}

section.categoria h3 .pista {
	font-size: 0.5em;
	margin-left: 1em;
	padding: 0.25em;
	border-radius: 50%;
	display: inline-flex;
	width: 2em;
	height: 2em;
	justify-content: center;
	align-items: center;
	cursor: help;
}

section.categoria h3 .pista {
	background-color: var(--azul);
}

section.categoria.tipo1 h3 .pista {
	background-color: var(--color-recurso1);
}

section.categoria.tipo2 h3 .pista {
	background-color: var(--color-recurso2);
}

section.categoria h3 .pista i {
	color: #ffffff;
}

section.categoria~.tooltip * {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.25em;
}

section.categoria~.tooltip .tooltip-arrow {
	color: var(--bs-info) !important;
}

section.categoria~.tooltip[data-popper-placement^=top] .tooltip-arrow::before {
	border-top-color: var(--bs-info);
}

section.categoria~.tooltip[data-popper-placement^=bottom] .tooltip-arrow::before {
	border-bottom-color: var(--bs-info);
}

section.categoria~.tooltip[data-popper-placement^=left] .tooltip-arrow::before {
	border-left-color: var(--bs-info);
}

section.categoria~.tooltip[data-popper-placement^=right] .tooltip-arrow::before {
	border-right-color: var(--bs-info);
}

section~.modal[id*='ntento'] h4.modal-title {
	text-transform: none !important;
}

/* Permite que el modal se posicione basado en coordenadas absolutas */
section~.modal[id*='ntento'].modal-custom-position {
	position: absolute !important;
	display: none;
	/* Bootstrap lo cambiará a block al abrir */
	height: auto;
	bottom: auto;
	right: auto;
}

/* Opcional: Quita el backdrop (oscurecimiento) si estorba el flujo */
section~.modal-static-no-backdrop .modal-backdrop {
	display: none;
}

.modal.fade .modal-dialog {
	transform: translateY(50px) scale(0);
	transition: transform .35s ease-out;
}

.modal.show .modal-dialog {
	transform: translateY(0) scale(1);
}

/* ----------------------------------------------------------------------------- */
@media (max-width: 992px) {
	section.categoria {
		margin: 1em auto;
		box-shadow: none;
	}

	section.categoria .reactivosCO #encabezadoRL {
		display: none;
	}
}