/**
 * Simulador de Circle: las areas con sus soluciones y el panel con el anillo.
 *
 * Prototipo de la landing de instituciones (30-sep-2026) y su especificacion
 * (bloque-circle-simulador.md). Aqui va el CSS del bloque y el de sus dos
 * bloques de dentro, el area y la solucion, que no traen hoja propia.
 *
 * El bloque responde a SU ancho y no al de la ventana (consultas de contenedor):
 * se comporta igual a ancho completo que metido en una columna estrecha, y en el
 * lienzo del editor, que casi nunca mide lo que la pagina.
 */

/* ------------------------------------------------------------ Las areas
 *
 * Tres, cada una con su color. El color va con el AREA y no con su posicion: es
 * el mismo en el distintivo, en las casillas marcadas, en su tramo del anillo y
 * en la leyenda, asi que cambiar el orden no obliga a reaprender la clave.
 *
 * El gris del acompañamiento no es un token: la coleccion no tiene un gris que
 * de 5,7:1 con blanco encima y que ademas se separe del negro de las
 * complementarias. Cuando el sistema lo cubra, se sustituye.
 *
 * Rojo y gris tienen casi la misma luminosidad, asi que nada depende solo del
 * color: cada area lleva su icono, y cada estado, su forma.
 */
.mm-sim-area--met {
	--mm-area: var( --accent );
	--mm-area-tinte: var( --accent-bg );
	--mm-area-icono: url( ../../../assets/images/area-metodologica.svg );
}

.mm-sim-area--com {
	--mm-area: var( --text );
	--mm-area-tinte: var( --surface-alt );
	--mm-area-icono: url( ../../../assets/images/area-complementarias.svg );
}

.mm-sim-area--aco {
	--mm-area: #666666;
	--mm-area-tinte: var( --surface-alt );
	--mm-area-icono: url( ../../../assets/images/area-acompanamiento.svg );
}

/* ------------------------------------------------------------ La caja */

.mm-sim__caja {
	container-type: inline-size;
	container-name: mm-sim;
}

/* Una columna, y dos desde 960 de caja: los desplegables y el panel de 420. */
.mm-sim__fila {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --s-7 );
	align-items: start;
}

@container mm-sim ( min-width: 960px ) {
	.mm-sim__fila {
		grid-template-columns: minmax( 0, 1fr ) 420px;
	}
}

/* Entre areas, 16. En columna flexible y no con margen entre hermanas: en el
   lienzo cada area y cada solucion es un bloque con los 28 de margen del editor,
   que aqui sobran. */
.mm-sim__areas {
	display: flex;
	flex-direction: column;
	gap: var( --s-4 );
}

.mm-sim__areas > *,
.mm-sim-area__lista > * {
	margin-block: 0;
}

/* ---------------------------------------------- El aviso de los retos */

.mm-sim__aviso {
	display: flex;
	align-items: flex-start;
	gap: var( --s-4 );
	margin-block-end: var( --s-4 );
	padding: 14px 20px;
	border-radius: var( --rad-md );
	background: var( --surface );
}

/* El icono de informacion, dibujado: un aro con su «i». */
.mm-sim__aviso-icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-block-start: 1px;
	border: 2px solid var( --text );
	border-radius: 50%;
}

.mm-sim__aviso-icono::before {
	content: 'i';
	font-size: var( --body-sm-size );
	line-height: 1;
	font-weight: 600;
}

.mm-sim .mm-sim__aviso-texto {
	display: grid;
	min-width: 0;
	margin: 0;
}

/* «Empezar de cero»: un enlace, no un boton de bloque. 28 de alto pulsable, por
   encima de los 24 del objetivo de puntero sin engordar el aviso. */
.mm-sim__reinicia {
	justify-self: start;
	min-height: 28px;
	padding: 2px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------- El area, desplegable */

/*
 * El contorno del hover existe siempre, transparente. Si solo se declarase al
 * pasar el raton, la transicion arrancaria desde currentColor —negro— y se
 * veria un parpadeo oscuro antes del rosa. Y va en outline y no en border: no
 * ocupa sitio, asi que al entrar y salir el puntero no se mueve nada.
 */
.mm-sim-area {
	--mm-casilla: var( --mm-area );
	min-width: 0;
	border-radius: var( --rad-lg );
	background: var( --surface );
	outline: 2px solid transparent;
	overflow: hidden;
	transition: outline-color var( --motion-link ) var( --motion-ease );
}

.mm-sim-area:has( .mm-sim-area__boton:hover ) {
	outline-color: var( --accent-bg-strong );
}

/* El h3 solo envuelve al boton: ni margenes ni el tamaño que le daria la escala
   de encabezados, que el titular lo lleva su span. Doblada para ganarle a la
   regla de elemento de variables.css. */
.mm-sim-area .mm-sim-area__cabecera {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

.mm-sim-area__boton {
	display: flex;
	align-items: center;
	gap: var( --s-4 );
	width: 100%;
	min-height: 64px;
	padding: 20px var( --s-5 ) var( --s-4 );
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

/* Con el recuento encima, el boton suelta parte de su aire de arriba. */
.mm-sim-area__cuenta:not( [hidden] ) + .mm-sim-area__cabecera .mm-sim-area__boton {
	padding-block-start: var( --s-3 );
}

.mm-sim-area__boton:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: -4px;
	border-radius: var( --rad-lg );
}

/* El distintivo del area: su circulo de color con el icono en blanco. */
.mm-sim-area__icono {
	flex: none;
	width: 48px;
	height: 48px;
	background: var( --mm-area-icono ) center / contain no-repeat;
}

.mm-sim-area__titulo {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

.mm-sim-area__chevron {
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url( ../../../assets/images/chevron.svg ) center / contain no-repeat;
	mask: url( ../../../assets/images/chevron.svg ) center / contain no-repeat;
	transition: transform var( --motion-link ) var( --motion-ease );
}

.mm-sim-area__boton[aria-expanded='true'] .mm-sim-area__chevron {
	transform: rotate( 180deg );
}

/* La frase, sangrada bajo el titular: los 24 del relleno, los 48 del distintivo
   y los 16 del hueco. Sube 10 para pegarse a el. */
.mm-sim .mm-sim-area__texto {
	max-width: 68ch;
	margin: -10px 0 0;
	padding: 0 var( --s-5 ) 20px 88px;
	color: var( --text-soft );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
}

/* El recuento: pastilla del color del area con el texto en blanco. Rojo 5,0:1,
   gris 5,7:1 y negro 17,4:1. */
.mm-sim .mm-sim-area__cuenta {
	width: max-content;
	margin: 20px var( --s-5 ) 0;
	padding: 6px var( --s-3 );
	border-radius: var( --rad-pill );
	background: var( --mm-area );
	color: var( --text-inverse );
	font-size: var( --body-sm-size );
	line-height: 1.4;
	font-weight: 600;
	white-space: nowrap;
}

.mm-sim-area__panel {
	padding: 0 var( --s-5 ) var( --s-5 );
}

/* Dos soluciones por fila, y una cuando la caja no da para dos. */
.mm-sim-area__lista {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --s-3 );
	margin: 0;
	padding: 0;
	list-style: none;
}

@container mm-sim ( max-width: 760px ) {
	.mm-sim-area__lista {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@container mm-sim ( max-width: 520px ) {
	.mm-sim-area__titulo {
		font-size: var( --h6-size );
		line-height: var( --h6-line );
		font-weight: var( --h6-weight );
	}

	.mm-sim .mm-sim-area__texto {
		padding-inline-start: var( --s-5 );
	}
}

/* ------------------------------------------------------- La solucion */

.mm-sim-sol {
	position: relative; /* el ancla del <input> estirado */
	min-width: 0;
	list-style: none;
}

.mm-sim-sol__tarjeta {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	min-height: 72px;
	padding: 14px var( --s-4 );
	border: 2px solid var( --line );
	border-radius: var( --rad-md );
	background: var( --surface );
	transition:
		border-color var( --motion-link ) var( --motion-ease ),
		background-color var( --motion-link ) var( --motion-ease );
}

/* La casilla, alineada con la primera linea del nombre. */
.mm-sim-sol__tarjeta .mm-casilla {
	margin-block-start: 2px;
}

/* Sin descripcion —la propuesta metodologica—, el nombre solo y a media altura,
   en una tarjeta mas baja. */
.mm-sim-sol__tarjeta:not( :has( .mm-sim-sol__desc ) ) {
	align-items: center;
	min-height: 56px;
}

.mm-sim-sol__tarjeta:not( :has( .mm-sim-sol__desc ) ) .mm-casilla {
	margin-block-start: 0;
}

.mm-sim-sol__texto {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.mm-sim-sol__nombre {
	font-size: var( --body-size );
	line-height: 1.4;
	font-weight: 600;
}

/* 13 no es un paso del sistema: es el del prototipo, para que la descripcion
   quepa en dos lineas en la tarjeta de media caja. */
.mm-sim-sol__desc {
	color: var( --text-soft );
	font-size: 13px;
	line-height: 1.45;
}

.mm-sim-sol__casilla:hover + .mm-sim-sol__tarjeta {
	background: var( --bg-blue );
}

/* Marcada: el filo y el tinte del area, ademas de la casilla rellena. */
.mm-sim-sol__casilla:checked + .mm-sim-sol__tarjeta {
	border-color: var( --mm-area );
	background: var( --mm-area-tinte );
}

/* ------------------------------------------ El enlace de debajo */

.mm-sim .mm-sim__mas {
	display: flex;
	justify-content: center;
	margin: var( --s-4 ) 0 0;
}

/* --------------------------------------------------------- El panel */

.mm-sim__panel {
	display: grid;
	gap: 20px;
	padding: var( --s-6 );
	border-radius: var( --rad-xl );
	background: var( --surface );
}

/*
 * En dos columnas el panel acompaña mientras se elige: se queda pegado debajo
 * de la navbar y de la barra de pestañas de la pagina, que mide 53.
 *
 * Solo en la web, de ahi el .mm-contenido, como el sticky de las pestañas: en el
 * lienzo no hay barras a las que pegarse y el panel se quedaba flotando a media
 * altura mientras se escribe.
 */
@container mm-sim ( min-width: 960px ) {
	.mm-contenido .mm-sim__panel {
		position: sticky;
		top: calc( var( --mm-navbar-alto, 82px ) + 53px + var( --s-5 ) );
	}
}

.mm-sim__panel-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --s-4 );
}

.mm-sim .mm-sim__panel-titulo {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

/* «Borrar seleccion», junto al titular y como enlace: es una accion secundaria
   y el boton rojo se reserva para la llamada. 44 de alto pulsable. */
.mm-sim__borra {
	flex: none;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --accent );
	font: inherit;
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.mm-sim__borra:hover {
	color: var( --accent-hover );
}

/* ------------------------------------------------------- El anillo */

.mm-sim__anillo {
	position: relative;
	width: 240px;
	max-width: 100%;
	margin-inline: auto;
}

.mm-sim__anillo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.mm-sim .mm-sim__centro {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	margin: 0;
	text-align: center;
	pointer-events: none;
}

.mm-sim__numero {
	font-size: 40px;
	line-height: 1;
	font-weight: 700;
}

/* El rotulo del centro: cabe en el hueco del anillo, que mide 148. 12 es el del
   prototipo; la caption del sistema, 12,8, partia en cuatro lineas. */
.mm-sim__rotulo {
	max-width: 110px;
	margin-block-start: var( --s-1 );
	color: var( --text-soft );
	font-size: 12px;
	line-height: 1.35;
}

.mm-sim__anillo.is-vacio .mm-sim__rotulo {
	max-width: 104px;
	margin-block-start: 0;
}

/* El aro del estado vacio: decoracion. Lo que hay que saber lo dice la frase
   del centro, en texto. Mide lo mismo que el anillo lleno, asi que el panel no
   da un salto al elegir la primera solucion. */
.mm-sim__fantasma {
	fill: none;
	stroke: var( --line );
	stroke-width: 1.5;
	stroke-dasharray: 5 7;
	stroke-linecap: round;
}

/* El quesito va relleno y sin borde: las esquinas redondeadas estan en la
   propia trayectoria. El trazo blanco solo aparece en el resalte. */
.mm-sim__quesito {
	fill: var( --mm-area );
	stroke: var( --surface );
	stroke-width: 0;
	transition: stroke-width var( --motion-link ) var( --motion-ease );
}

/* Resalte reciproco tarjeta ↔ quesito: un filo blanco, que se ve igual sobre
   los tres colores. */
.mm-sim__tramo.is-senalado .mm-sim__quesito {
	stroke-width: 3;
}

.mm-sim__tramo-icono {
	fill: none;
	stroke: var( --text-inverse );
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mm-sim .mm-sim__estado {
	margin: 0;
	color: var( --text-soft );
	font-size: 15px; /* el del prototipo, entre el cuerpo y el pequeño */
	line-height: 1.5;
	text-align: center;
}

/* ------------------------------------------------------ La leyenda */

.mm-sim__leyenda {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-sim__leyenda > li {
	display: grid;
	gap: 6px;
	padding: var( --s-3 ) 14px;
	border-radius: var( --rad-md );
	background: var( --bg-blue );
}

/* El mismo distintivo del desplegable, en pequeño: un cuadradito de color no
   diria de que area es la fila a quien no distingue el rojo del gris. */
.mm-sim__leyenda-area {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var( --body-sm-size );
	line-height: 1.3;
	font-weight: 600;
}

.mm-sim__leyenda .mm-sim-area__icono {
	width: 24px;
	height: 24px;
}

.mm-sim__leyenda ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0 0 0 var( --s-5 );
	list-style: disc;
	color: var( --text-soft );
	font-size: 13px;
	line-height: 1.45;
}

.mm-sim__ir {
	width: 100%;
}

.mm-sim .mm-sim__nota {
	margin: 0;
	padding-block-start: 14px;
	border-top: 1px solid var( --line );
	color: var( --text-soft );
	font-size: var( --caption-size );
	line-height: 1.5;
}

/* ---------------------------------------------- La barra flotante
 *
 * Solo por debajo del corte de la navbar, donde el panel queda debajo de los
 * desplegables. Aparece mientras se esta eligiendo y el anillo no se ve, y se
 * va en cuanto entra en pantalla: nunca hay dos recuentos a la vez.
 *
 * Entra y sale deslizando. visibility se retrasa hasta el final de la salida
 * para que la barra oculta no deje un boton invisible en el recorrido del
 * tabulador, que con opacity: 0 a secas si lo dejaria.
 */
.mm-sim__barra {
	position: fixed;
	z-index: 1070; /* por debajo de la navbar (1080) y de las pestañas (1079) */
	left: 50%;
	bottom: calc( var( --s-4 ) + env( safe-area-inset-bottom ) );
	display: flex;
	align-items: center;
	gap: var( --s-3 );
	width: calc( 100% - var( --s-6 ) );
	max-width: 520px;
	padding: var( --s-2 ) 10px var( --s-2 ) var( --s-3 );
	border: 1px solid var( --line );
	border-radius: var( --rad-pill );
	background: var( --surface );
	box-shadow: 0 10px 28px rgba( 26, 26, 26, .18 );
	transform: translateX( -50% );
	transition:
		transform 250ms var( --motion-ease ),
		opacity 200ms ease,
		visibility 0s;
}

.mm-sim__barra.is-fuera,
.mm-sim__barra.is-de-mas {
	transform: translate( -50%, calc( 100% + 28px ) );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		transform 250ms var( --motion-ease ),
		opacity 200ms ease,
		visibility 0s 250ms;
}

.mm-sim__barra-anillo {
	flex: none;
	width: 44px;
	height: 44px;
}

.mm-sim .mm-sim__barra-texto {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var( --text-soft );
	font-size: 13px;
	line-height: 1.35;
}

.mm-sim__barra-texto strong {
	display: block;
	color: var( --text );
	font-size: var( --body-sm-size );
}

@media ( min-width: 1100px ) {
	.mm-sim__barra {
		display: none;
	}
}

@media ( max-width: 360px ) {
	.mm-sim__barra-anillo {
		display: none;
	}
}

/*
 * El hueco de la barra al saltar a un ancla o al tabular: el destino no puede
 * quedar debajo de ella. Se reserva en el elemento que hace scroll, que es la
 * raiz del documento —puesto en body el navegador lo ignora—, y solo donde la
 * barra existe.
 */
@media ( max-width: 1099px ) {
	html:has( .mm-sim__barra:not( [hidden] ) ) {
		scroll-padding-bottom: 104px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mm-sim-area,
	.mm-sim-area__chevron,
	.mm-sim-sol__tarjeta,
	.mm-sim__quesito,
	.mm-sim__barra,
	.mm-sim__barra.is-fuera,
	.mm-sim__barra.is-de-mas {
		transition: none;
	}
}

/* Alto contraste de Windows: el anillo conserva sus colores, que son su
   leyenda, y la tarjeta marcada gana un contorno. */
@media ( forced-colors: active ) {
	.mm-sim__quesito {
		forced-color-adjust: none;
	}

	.mm-sim-sol__casilla:checked + .mm-sim-sol__tarjeta {
		outline: 3px solid CanvasText;
	}
}