main {
	#todoElMain {
		position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;

		#tapaElFondo {background: var(--grisClaro); opacity: 70%; height: 100%; width: 100%;}

		.cartelCentro {
			/* Formato general */
			width: max-content; max-width: min(600px, 95vw);
			max-height: 95%; color: var(--grisClaro);
			padding: 20px; border-radius: 15px; border: 6px double white;

			/* Partes internas */
			#titulo {
				font-size: 1.5rem; margin: 0;
				&:empty {display: none;}
			}

			/* Mensajes */
			#mensajes {
				margin-inline: 20px;
				& > li {
					font-size: 1.2rem;
					&:nth-child(n+2) {margin-top: 6px;}
				}
				li {
					text-align: left; line-height: 1.2; color: var(--celesteClaro);
					& :is(ul, ol) {
						padding-left: 10px;
						li {font-size: 1.15rem; margin-top: 3px;}
					}
					& em {color: snow;}
					& > i {
						font-size: 1rem; line-height: normal; margin-right: 10px;
						&.fa-circle {border: solid 1px transparent;}
						&.fa-solid.fa-circle {color: var(--amarilloOscuro);}
					}
				}
				span {font-weight: bold; font-style: italic;}
			}

			/* Color de fondo */
			&:has(#alerta):not(:has(#alerta.ocultar)) {background: var(--rojoOscuro);}

			&#cartelGenerico {
				.inicio {font-size: 4rem; color: var(--amarilloOscuro);}
				#contenedorMensajes {
					overflow-y: auto;
					max-height: calc(var(--alturaViewPort) * 0.5);
				}
			}
		}
	}

}

/* Acostado */
@media (orientation: landscape) and (width > 1250px) {
	#cartelGenerico {
		transform: translateY(-12.7px);
		&:has(#contenedorMensajes:not(:empty)) #encab {margin-bottom: 40px;}
		&:has(#titulo:not(:empty)) #encab .inicio {margin-bottom: 20px;}
		#iconosCartel {margin-top: 35px;}
	}
}
@media (orientation: landscape) and (width <= 1250px) {
	.cartelCentro {
		#mensajes {margin-top: 10px;}
	}
	#cartelGenerico {
		&:has(#contenedorMensajes:not(:empty)) #encab {display: none;}
		&:has(#titulo:not(:empty)) #encab .inicio {margin-bottom: 5px;}
		#check {display: none;} /* para cartel de bienvenida */
		#contenedorMensajes {padding: 0;}
		#iconosCartel {margin-top: 5px;}
	}
}

/* Parado */
@media (orientation: portrait) {
	.cartelCentro {
		.inicio {margin-bottom: 30px;}
		#mensajes {margin-inline: 10px;}
	}
	#cartelGenerico {
		transform: translateY(-12.7px);
		&:has(#contenedorMensajes:not(:empty)) #encab {margin-bottom: 20px;}
		&:has(#titulo:not(:empty)) #encab .inicio {margin-bottom: 10px;}
		#iconosCartel {margin-top: 25px;}
	}
}
